diff --git a/.claude/skills/devtools-ui/SKILL.md b/.claude/skills/devtools-ui/SKILL.md index de0c4b8..533eeed 100644 --- a/.claude/skills/devtools-ui/SKILL.md +++ b/.claude/skills/devtools-ui/SKILL.md @@ -33,4 +33,4 @@ Edit `app/src/styles/main.scss` (`$accent`) or the maps in `_palette.scss`. Neve ## Verify -Use the `devtools-verify` skill: template check with `ngc`, rebuild `extension/ui`, then the axe and 360px overflow audit on every page you touched, in the popup and at `/__devframes/`. +Add component tests in `app/src/__tests__` as `*.test.ts` (see `app/src/__tests__/forms-panels.test.ts`); `pnpm test:panel` runs them. Then use the `devtools-verify` skill: template check with `ngc`, rebuild `extension/ui`, then the axe and 360px overflow audit on every page you touched, in the popup and at `/__devframes/`. diff --git a/.claude/skills/devtools-verify/SKILL.md b/.claude/skills/devtools-verify/SKILL.md index 6ae060e..2ea9592 100644 --- a/.claude/skills/devtools-verify/SKILL.md +++ b/.claude/skills/devtools-verify/SKILL.md @@ -16,6 +16,8 @@ pnpm skills:check pnpm typecheck pnpm test pnpm test:devtools +pnpm test:panel +pnpm test:axe pnpm build pnpm extension:build pnpm devtools:build-pkg @@ -26,7 +28,7 @@ CI runs `pnpm exec nx affected -t test build` instead of the plain `pnpm test` a When the change affects behaviour, an option, a UI label or an agent tool, update the matching page in `apps/docs` in the same change (use the `devtools-docs` skill). When the change touches the docs site (apps/docs) or `README.md`, also run the build checks in the `devtools-docs` skill. -`pnpm typecheck` does not type-check panel templates. Also run: +`pnpm typecheck` runs `ngc` on the panel (`app/tsconfig.json`, with `strictTemplates`) and on the Analog demo, so it catches template errors. To run the panel template check alone: ```sh NO_COLOR=1 pnpm exec ngc -p app/tsconfig.json --noEmit @@ -34,6 +36,8 @@ NO_COLOR=1 pnpm exec ngc -p app/tsconfig.json --noEmit and treat any `error TS` or `error NG` line as a failure. Strip color codes before grepping the output, or errors slip through. +`pnpm test:axe` needs Chromium (`pnpm exec playwright install chromium` once). It runs axe on every panel tab and hub view against a static report of Angular Travel, in light and dark. It does not replace the browser checks below, which use real data from the demos. + ## 2. Run the demos `pnpm build` is a production build and turns the in-page launcher off. For manual checks rebuild in development mode: diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 782f289..eb56cfa 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -12,8 +12,8 @@ See docs/contributing/commit-message-guidelines.md - [ ] `pnpm commit:check` (commit messages follow the guidelines) - [ ] `pnpm format:check` -- [ ] `pnpm typecheck` and the `ngc` template check (`pnpm exec ngc -p app/tsconfig.json --noEmit`) -- [ ] `pnpm test` and `pnpm test:devtools` +- [ ] `pnpm typecheck` (includes the `ngc` template checks) +- [ ] `pnpm test`, `pnpm test:devtools` and `pnpm test:panel` - [ ] `pnpm skills:check` (when `.claude/` changed) - [ ] Docs in `apps/docs` updated and `pnpm docs:build` passes (when behavior, options, UI labels or agent tools changed), or the `no-docs` label added with the reason below - [ ] `pnpm extension:build` and `extension/ui` committed (when `app/` changed) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 26cc48f..2fe2add 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -51,6 +51,9 @@ jobs: - name: Test devtools package run: pnpm test:devtools + - name: Test devtools panel + run: pnpm test:panel + - name: Build Chrome extension run: pnpm extension:build @@ -65,3 +68,26 @@ jobs: - name: Smoke-test the CLI run: node bin.mjs --help + + axe: + runs-on: ubuntu-latest + timeout-minutes: 15 + steps: + - uses: actions/checkout@v7 + with: + persist-credentials: false + + - uses: pnpm/action-setup@v5 + + - uses: actions/setup-node@v7 + with: + node-version-file: .nvmrc + cache: pnpm + + - run: pnpm install --frozen-lockfile + + - name: Install Chromium + run: pnpm exec playwright install --with-deps chromium + + - name: Check the panel with axe + run: pnpm test:axe diff --git a/app/src/__tests__/base-url.test.ts b/app/src/__tests__/base-url.test.ts new file mode 100644 index 0000000..b8525e7 --- /dev/null +++ b/app/src/__tests__/base-url.test.ts @@ -0,0 +1,65 @@ +import { describe, expect, it } from 'vitest'; +import { detectBaseURL } from '../base-url'; + +function at(href: string) { + const url = new URL(href); + return { + href: url.href, + origin: url.protocol === 'chrome-extension:' ? `${url.protocol}//${url.host}` : url.origin, + protocol: url.protocol, + pathname: url.pathname, + search: url.search, + }; +} + +describe('detectBaseURL', () => { + it('tries the embedded server path, then the folder the panel is served from', () => { + expect(detectBaseURL(at('http://localhost:5173/'))).toEqual(['/__ng-devtools/', './']); + expect(detectBaseURL(at('http://127.0.0.1:4782/reports/today/'))).toEqual([ + '/__ng-devtools/', + './', + ]); + }); + + it('lets devframe pick the base when the panel is served under the server path', () => { + expect(detectBaseURL(at('http://localhost:4200/__ng-devtools/'))).toBeUndefined(); + expect(detectBaseURL(at('http://localhost:4200/__devframes/ng-devtools/'))).toBeUndefined(); + }); + + it('accepts a same origin baseURL query', () => { + const loc = at('http://localhost:4200/panel/?baseURL=/custom/'); + expect(detectBaseURL(loc)).toBe('/custom/'); + const absolute = at( + 'http://localhost:4200/panel/?baseURL=' + encodeURIComponent('http://localhost:4200/x/'), + ); + expect(detectBaseURL(absolute)).toBe('http://localhost:4200/x/'); + }); + + it('ignores a cross origin baseURL query on a web page', () => { + const loc = at( + 'http://localhost:4200/panel/?baseURL=' + encodeURIComponent('https://evil.example/'), + ); + expect(detectBaseURL(loc)).toEqual(['/__ng-devtools/', './']); + }); + + it('ignores a malformed baseURL query instead of throwing', () => { + const loc = at('http://localhost:4200/panel/?baseURL=' + encodeURIComponent('http://[')); + expect(() => detectBaseURL(loc)).not.toThrow(); + expect(detectBaseURL(loc)).toEqual(['/__ng-devtools/', './']); + }); + + it('accepts an http or https host from the extension panel', () => { + const base = 'chrome-extension://abc/ui/index.html?baseURL='; + const http = at(base + encodeURIComponent('http://localhost:4200/__ng-devtools/')); + expect(detectBaseURL(http)).toBe('http://localhost:4200/__ng-devtools/'); + const https = at(base + encodeURIComponent('https://app.example/__ng-devtools/')); + expect(detectBaseURL(https)).toBe('https://app.example/__ng-devtools/'); + }); + + it('rejects other schemes from the extension panel', () => { + const loc = at( + 'chrome-extension://abc/ui/index.html?baseURL=' + encodeURIComponent('javascript:alert(1)'), + ); + expect(detectBaseURL(loc)).toEqual(['/__ng-devtools/', './']); + }); +}); diff --git a/app/src/__tests__/dashboard-cards.test.ts b/app/src/__tests__/dashboard-cards.test.ts new file mode 100644 index 0000000..673110e --- /dev/null +++ b/app/src/__tests__/dashboard-cards.test.ts @@ -0,0 +1,56 @@ +import { describe, expect, it } from 'vitest'; +import { componentsCard, routesCard, storeCard } from '../pages/dashboard'; + +describe('dashboard cards', () => { + it('counts source components when the rows carry no kind', () => { + expect(componentsCard([{}, {}, {}])).toEqual({ value: 3, sub: 'discovered in source' }); + }); + + it('splits live components from directives', () => { + expect( + componentsCard([{ kind: 'component' }, { kind: 'component' }, { kind: 'directive' }]), + ).toEqual({ value: 2, sub: 'components · 1 directive' }); + expect(componentsCard([{ kind: 'component' }])).toEqual({ + value: 1, + sub: 'components · 0 directives', + }); + }); + + it('counts source route entries when the rows carry no kind', () => { + expect(routesCard([{ path: 'a' }, { path: 'b' }])).toEqual({ + value: 2, + sub: 'route entries in source', + }); + }); + + it('counts distinct navigable paths and redirects', () => { + expect( + routesCard([ + { kind: 'page', fullPath: '/a' }, + { kind: 'page', fullPath: '/a' }, + { kind: 'page', path: 'b' }, + { kind: 'redirect', path: '' }, + { kind: 'redirect', path: 'old' }, + ]), + ).toEqual({ value: 2, sub: 'navigable paths · 2 redirects' }); + }); + + it('counts source declarations when the rows carry no kind', () => { + expect(storeCard([{}, {}])).toEqual({ value: 2, sub: 'declarations in source' }); + }); + + it('lists NgRx declaration kinds, most common first', () => { + expect( + storeCard([ + { kind: 'action' }, + { kind: 'reducer' }, + { kind: 'action' }, + { kind: 'signal-store' }, + { kind: 'custom' }, + ]), + ).toEqual({ + value: 5, + sub: '2 actions · 1 reducer · 1 signal store · 1 custom', + }); + }); +}); diff --git a/app/src/__tests__/format.test.ts b/app/src/__tests__/format.test.ts new file mode 100644 index 0000000..8cd091a --- /dev/null +++ b/app/src/__tests__/format.test.ts @@ -0,0 +1,9 @@ +import { describe, expect, it } from 'vitest'; +import { time } from '../format'; + +describe('time', () => { + it('formats a timestamp as the local time of day', () => { + const at = new Date(2026, 0, 2, 13, 4, 5).getTime(); + expect(time(at)).toBe(new Date(at).toLocaleTimeString()); + }); +}); diff --git a/app/src/__tests__/forms-panels.test.ts b/app/src/__tests__/forms-panels.test.ts new file mode 100644 index 0000000..a991864 --- /dev/null +++ b/app/src/__tests__/forms-panels.test.ts @@ -0,0 +1,191 @@ +import { TestBed, type ComponentFixture } from '@angular/core/testing'; +import type { DevframeRpcClient } from 'devframe/client'; +import { afterEach, describe, expect, it } from 'vitest'; +import { FormsFieldDetail } from '../pages/forms-field-detail'; +import { FormsInspector } from '../pages/forms-inspector'; +import { FormsLint, FormsSubmit } from '../pages/forms-report'; +import type { CollectedForm, FormFieldNode } from '../pages/forms-types'; + +type Call = (name: string, arg: Record) => Promise; + +function fakeClient(call: Call, forms: CollectedForm[] = []): DevframeRpcClient { + const rpc = { + call, + callEvent: () => Promise.resolve(), + sharedState: () => Promise.resolve({ value: () => ({ forms }), on: () => () => {} }), + }; + return { connectionMeta: {}, scope: () => ({ rpc }) } as unknown as DevframeRpcClient; +} + +const fail: Call = () => Promise.reject(new Error('offline')); + +function field(path: string, extra: Partial = {}): FormFieldNode { + return { + key: path.split('.').pop() ?? '', + path, + type: 'control', + status: 'VALID', + touched: false, + dirty: false, + bound: true, + value: 'x', + errors: [], + ...extra, + }; +} + +const form: CollectedForm = { + id: 'signup@p1', + kind: 'reactive', + owner: 'Signup', + label: 'Signup.form', + root: { ...field(''), type: 'group', children: [field('email'), field('name')] }, +}; + +async function settle(fixture: ComponentFixture) { + for (let i = 0; i < 3; i++) { + await new Promise((resolve) => setTimeout(resolve)); + await fixture.whenStable(); + } +} + +function text(fixture: ComponentFixture): string { + return (fixture.nativeElement as HTMLElement).textContent ?? ''; +} + +function button(fixture: ComponentFixture, name: string): HTMLButtonElement { + const found = Array.from( + (fixture.nativeElement as HTMLElement).querySelectorAll('button'), + ).find((b) => (b.getAttribute('aria-label') ?? b.textContent ?? '').trim() === name); + if (!found) throw new Error(`No button named ${name}`); + return found; +} + +afterEach(() => { + document.body.innerHTML = ''; +}); + +describe('FormsLint', () => { + it('shows a failure with Try again instead of "No problems found" when the check fails', async () => { + let answer: Call = fail; + const fixture = TestBed.createComponent(FormsLint); + fixture.componentRef.setInput('formId', form.id); + fixture.componentRef.setInput( + 'rpc', + fakeClient((name, arg) => answer(name, arg)), + ); + await settle(fixture); + expect(text(fixture)).toContain('Could not check this form'); + expect(text(fixture)).not.toContain('No problems found'); + + answer = () => Promise.resolve([]); + button(fixture, 'Try again').click(); + await settle(fixture); + expect(text(fixture)).toContain('No problems found'); + }); +}); + +describe('FormsSubmit', () => { + it('shows a failure instead of loading forever when the explain call fails', async () => { + const fixture = TestBed.createComponent(FormsSubmit); + fixture.componentRef.setInput('formId', form.id); + fixture.componentRef.setInput('rpc', fakeClient(fail)); + await settle(fixture); + const host = fixture.nativeElement as HTMLElement; + expect(text(fixture)).toContain('Could not explain this form'); + expect(host.querySelector('[aria-busy="true"]')).toBeNull(); + expect(text(fixture)).not.toContain('Loading'); + }); + + it('shows the submit and payload text once both answer', async () => { + const fixture = TestBed.createComponent(FormsSubmit); + fixture.componentRef.setInput('formId', form.id); + fixture.componentRef.setInput( + 'rpc', + fakeClient((_, arg) => Promise.resolve(`${arg['kind']} text`)), + ); + await settle(fixture); + expect(text(fixture)).toContain('submit text'); + expect(text(fixture)).toContain('payload text'); + }); +}); + +describe('FormsFieldDetail', () => { + function detail(call: Call) { + const fixture = TestBed.createComponent(FormsFieldDetail); + fixture.componentRef.setInput('form', form); + fixture.componentRef.setInput('node', form.root.children![0]); + fixture.componentRef.setInput('rpc', fakeClient(call)); + document.body.append(fixture.nativeElement); + return fixture; + } + + it('shows a failure with Try again when the field explain call fails', async () => { + const fixture = detail(fail); + await settle(fixture); + expect(text(fixture)).toContain('Could not explain this field'); + expect((fixture.nativeElement as HTMLElement).querySelector('[aria-busy="true"]')).toBeNull(); + }); + + it("drops the previous field's text while the next field loads", async () => { + const pending: ((value: string) => void)[] = []; + const fixture = detail((_, arg) => + arg['path'] === 'email' + ? Promise.resolve('about email') + : new Promise((resolve) => pending.push(resolve)), + ); + await settle(fixture); + expect(text(fixture)).toContain('about email'); + + fixture.componentRef.setInput('node', form.root.children![1]); + await settle(fixture); + expect(text(fixture)).not.toContain('about email'); + expect(text(fixture)).toContain('Loading…'); + pending[0]('about name'); + await settle(fixture); + expect(text(fixture)).toContain('about name'); + }); + + it('moves focus to its heading when it opens and emits closed from Close', async () => { + const fixture = detail(() => Promise.resolve('about email')); + let closed = 0; + fixture.componentInstance.closed.subscribe(() => closed++); + await settle(fixture); + expect(document.activeElement?.id).toBe('forms-field-heading'); + button(fixture, 'Close details for email').click(); + expect(closed).toBe(1); + }); +}); + +describe('FormsInspector fields', () => { + it('names the row button for what it does, toggles it, and closes the detail', async () => { + const fixture = TestBed.createComponent(FormsInspector); + fixture.componentRef.setInput( + 'rpc', + fakeClient(() => Promise.resolve('about email'), [form]), + ); + document.body.append(fixture.nativeElement); + await settle(fixture); + const host = fixture.nativeElement as HTMLElement; + const row = button(fixture, 'Show details for email'); + expect(row.getAttribute('aria-pressed')).toBe('false'); + + row.click(); + await settle(fixture); + expect(row.getAttribute('aria-pressed')).toBe('true'); + expect(host.querySelector('app-forms-field-detail')).not.toBeNull(); + expect(document.activeElement?.id).toBe('forms-field-heading'); + + row.click(); + await settle(fixture); + expect(row.getAttribute('aria-pressed')).toBe('false'); + expect(host.querySelector('app-forms-field-detail')).toBeNull(); + + row.click(); + await settle(fixture); + button(fixture, 'Close details for email').click(); + await settle(fixture); + expect(host.querySelector('app-forms-field-detail')).toBeNull(); + expect(document.activeElement).toBe(row); + }); +}); diff --git a/app/src/__tests__/hub-dock-sync.test.ts b/app/src/__tests__/hub-dock-sync.test.ts new file mode 100644 index 0000000..0d5ef95 --- /dev/null +++ b/app/src/__tests__/hub-dock-sync.test.ts @@ -0,0 +1,110 @@ +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; +import { followHubDocks, selectHubDock } from '../hub-dock-sync'; + +const KEY = '__DEVFRAME_HUB_CLIENT_CONTEXT__'; + +function fakeHub(selectedId: string | null = null) { + const listeners = new Map void>(); + const offs: string[] = []; + const docks = { + selectedId, + getStateById: (id: string) => + id === 'ng-devtools:missing' + ? undefined + : { + events: { + on: (_event: 'entry:activated', listener: () => void) => { + listeners.set(id, listener); + return () => offs.push(id); + }, + }, + }, + switchEntry: vi.fn(async (_id?: string | null) => true), + }; + return { docks, listeners, offs }; +} + +describe('hub dock sync', () => { + let parent: Record; + + beforeEach(() => { + parent = {}; + vi.spyOn(window, 'parent', 'get').mockReturnValue(parent as unknown as Window); + }); + + afterEach(() => { + vi.restoreAllMocks(); + vi.useRealTimers(); + }); + + it('reports the dock the hub already has selected', () => { + parent[KEY] = fakeHub('ng-devtools:ngrx'); + const onView = vi.fn(); + followHubDocks(['angular', 'ngrx'], onView); + expect(onView).toHaveBeenCalledOnce(); + expect(onView).toHaveBeenCalledWith('ngrx'); + }); + + it('ignores a selected dock that belongs to another tool', () => { + parent[KEY] = fakeHub('vite:inspect'); + const onView = vi.fn(); + followHubDocks(['angular', 'ngrx'], onView); + expect(onView).not.toHaveBeenCalled(); + }); + + it('follows dock activations and stops on cleanup', () => { + const hub = fakeHub(); + parent[KEY] = hub; + const onView = vi.fn(); + const stop = followHubDocks(['angular', 'ngrx', 'missing'], onView); + hub.listeners.get('ng-devtools:ngrx')?.(); + hub.listeners.get('ng-devtools:angular')?.(); + expect(onView.mock.calls).toEqual([['ngrx'], ['angular']]); + stop(); + expect(hub.offs).toEqual(['ng-devtools:angular', 'ng-devtools:ngrx']); + }); + + it('waits for the hub context to appear', () => { + vi.useFakeTimers(); + const onView = vi.fn(); + followHubDocks(['angular'], onView); + parent[KEY] = fakeHub('ng-devtools:angular'); + vi.advanceTimersByTime(100); + expect(onView).toHaveBeenCalledWith('angular'); + }); + + it('stops retrying once cleaned up', () => { + vi.useFakeTimers(); + const onView = vi.fn(); + const stop = followHubDocks(['angular'], onView); + stop(); + parent[KEY] = fakeHub('ng-devtools:angular'); + vi.advanceTimersByTime(1000); + expect(onView).not.toHaveBeenCalled(); + }); + + it('does nothing outside a frame', async () => { + vi.spyOn(window, 'parent', 'get').mockReturnValue(window); + const onView = vi.fn(); + expect(() => followHubDocks(['angular'], onView)()).not.toThrow(); + expect(await selectHubDock('angular')).toBe(false); + }); + + it('switches the hub to the matching dock', async () => { + const hub = fakeHub(); + parent[KEY] = hub; + expect(await selectHubDock('ngrx')).toBe(true); + expect(hub.docks.switchEntry).toHaveBeenCalledWith('ng-devtools:ngrx'); + }); + + it('reports failure when the hub rejects the switch', async () => { + const hub = fakeHub(); + hub.docks.switchEntry.mockRejectedValueOnce(new Error('gone')); + parent[KEY] = hub; + expect(await selectHubDock('ngrx')).toBe(false); + }); + + it('reports failure without a hub context', async () => { + expect(await selectHubDock('ngrx')).toBe(false); + }); +}); diff --git a/app/src/__tests__/select.test.ts b/app/src/__tests__/select.test.ts new file mode 100644 index 0000000..d7715e4 --- /dev/null +++ b/app/src/__tests__/select.test.ts @@ -0,0 +1,128 @@ +import { Component, signal } from '@angular/core'; +import { TestBed } from '@angular/core/testing'; +import { afterEach, describe, expect, it } from 'vitest'; +import { Select, type SelectOption } from '../ui/select'; + +@Component({ + imports: [Select], + template: ``, +}) +class Host { + readonly options = signal([]); + readonly value = signal(null); +} + +async function setup(options: SelectOption[], value: string | null = null) { + const fixture = TestBed.createComponent(Host); + fixture.componentInstance.options.set(options); + fixture.componentInstance.value.set(value); + await fixture.whenStable(); + const trigger = fixture.nativeElement.querySelector('button[role="combobox"]') as HTMLElement; + const press = async (key: string) => { + trigger.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true })); + await fixture.whenStable(); + }; + const active = () => { + const id = trigger.getAttribute('aria-activedescendant'); + return id ? fixture.nativeElement.querySelector(`#${id}`)?.textContent?.trim() : null; + }; + return { fixture, trigger, press, active }; +} + +const FRUIT: SelectOption[] = [ + { value: 'apple', label: 'Apple' }, + { value: 'banana', label: 'Banana', disabled: true }, + { value: 'cherry', label: 'Cherry' }, +]; + +describe('Select', () => { + afterEach(() => TestBed.resetTestingModule()); + + it('opens on ArrowDown with the first enabled option active', async () => { + const { trigger, press, active } = await setup(FRUIT); + await press('ArrowDown'); + expect(trigger.getAttribute('aria-expanded')).toBe('true'); + expect(active()).toBe('Apple'); + }); + + it('skips disabled options when moving', async () => { + const { press, active } = await setup(FRUIT); + await press('ArrowDown'); + await press('ArrowDown'); + expect(active()).toBe('Cherry'); + await press('ArrowUp'); + expect(active()).toBe('Apple'); + }); + + it('keeps the active option when only disabled options follow', async () => { + const { press, active } = await setup([ + { value: 'a', label: 'A' }, + { value: 'b', label: 'B', disabled: true }, + ]); + await press('ArrowDown'); + await press('ArrowDown'); + expect(active()).toBe('A'); + }); + + it('keeps the active option when only disabled options come before', async () => { + const { press, active } = await setup( + [ + { value: 'a', label: 'A', disabled: true }, + { value: 'b', label: 'B' }, + ], + 'b', + ); + await press('ArrowDown'); + expect(active()).toBe('B'); + await press('ArrowUp'); + expect(active()).toBe('B'); + }); + + it('stops at the ends of the list', async () => { + const { press, active } = await setup(FRUIT, 'cherry'); + await press('ArrowDown'); + expect(active()).toBe('Cherry'); + await press('ArrowDown'); + expect(active()).toBe('Cherry'); + }); + + it('jumps to the first and last enabled options with Home and End', async () => { + const { press, active } = await setup([ + ...FRUIT, + { value: 'date', label: 'Date', disabled: true }, + ]); + await press('ArrowDown'); + await press('End'); + expect(active()).toBe('Cherry'); + await press('Home'); + expect(active()).toBe('Apple'); + }); + + it('chooses the active option with Enter and closes', async () => { + const { fixture, trigger, press } = await setup(FRUIT); + await press('ArrowDown'); + await press('ArrowDown'); + await press('Enter'); + expect(fixture.componentInstance.value()).toBe('cherry'); + expect(trigger.getAttribute('aria-expanded')).toBe('false'); + expect(trigger.hasAttribute('aria-activedescendant')).toBe(false); + }); + + it('closes on Escape without changing the value', async () => { + const { fixture, trigger, press } = await setup(FRUIT, 'apple'); + await press('ArrowDown'); + await press('ArrowDown'); + await press('Escape'); + expect(trigger.getAttribute('aria-expanded')).toBe('false'); + expect(fixture.componentInstance.value()).toBe('apple'); + }); + + it('selects by typed prefix while closed, skipping disabled options', async () => { + const skipped = await setup(FRUIT); + await skipped.press('b'); + expect(skipped.fixture.componentInstance.value()).toBeNull(); + const chosen = await setup(FRUIT); + await chosen.press('c'); + expect(chosen.fixture.componentInstance.value()).toBe('cherry'); + }); +}); diff --git a/app/src/__tests__/store-inspector.test.ts b/app/src/__tests__/store-inspector.test.ts index c1510a9..8bfb400 100644 --- a/app/src/__tests__/store-inspector.test.ts +++ b/app/src/__tests__/store-inspector.test.ts @@ -1,17 +1,9 @@ -import '@angular/compiler'; import { TestBed } from '@angular/core/testing'; -import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing'; import type { DevframeRpcClient } from 'devframe/client'; import { afterEach, describe, expect, it } from 'vitest'; import { StoreInspector } from '../pages/store-inspector'; import type { NgrxPage, NgrxState } from '../pages/store-types'; -try { - TestBed.initTestEnvironment(BrowserTestingModule, platformBrowserTesting()); -} catch { - // already initialized in this worker -} - afterEach(() => { TestBed.resetTestingModule(); document.body.innerHTML = ''; diff --git a/app/src/app.ts b/app/src/app.ts index 7968118..57f7ddb 100644 --- a/app/src/app.ts +++ b/app/src/app.ts @@ -30,6 +30,9 @@ import { TabIcon } from './pages/tab-icon'; import { styleHubRail } from './hub-rail-style'; import { followHubDocks, selectHubDock } from './hub-dock-sync'; import { panelConfig, tabEnabled } from './devtools-config'; +import { hostPageId } from './page-id'; +import { initialTab, storeTab, storedTab } from './tab-memory'; +import { detectBaseURL } from './base-url'; const HUB_VIEWS = ['angular', 'ngrx', 'analog', 'nativescript', 'capacitor'] as const; @@ -245,6 +248,7 @@ function readView(): View | null {
+

{{ backgroundNote() }}

@if (connectionFailed()) {
- @if (m.matched) { - {{ testUrl() }} renders -
    - @for (r of m.chain; track r.id) { -
  1. - {{ short(r.file) ?? r.fullPath }} - {{ r.kind }} -
    2. - } -
- @if (paramList(m.params).length) { -
- @for (p of paramList(m.params); track p[0]) { - {{ p[0] }} = {{ p[1] }} - } -
- } - } @else { - {{ testUrl() }} matches no file route. Angular - throws NG04002 "Cannot match any routes". - @if (m.rejected.length) { -
    - @for (r of m.rejected.slice(0, 5); track $index) { +
    + @if (explainError(); as error) { +
    {{ error }}
    + } @else if (explained(); as e) { +
    + @if (e.match.matched) { + {{ e.url }} renders +
      + @for (r of e.match.chain; track r.id) {
    1. - {{ short(r.file) ?? r.path }} - {{ r.reason }} + {{ short(r.file) ?? r.fullPath }} + {{ r.kind }}
      2. } -
+ + @if (paramList(e.match.params).length) { +
+ @for (p of paramList(e.match.params); track p[0]) { + {{ p[0] }} = {{ p[1] }} + } +
+ } + } @else { + {{ e.url }} matches no file route. Angular throws + NG04002 "Cannot match any routes". + @if (e.match.rejected.length) { +
    + @for (r of e.match.rejected.slice(0, 5); track $index) { +
  • + {{ short(r.file) ?? r.path }} + {{ r.reason }} +
    • + } +
+ } } - } -
- } + + } +
@@ -462,6 +526,17 @@ function walk(routes: AnalogRoute[], depth = 0, out: { route: AnalogRoute; depth server result. } + @if (refetchedFns().length) { +
+ Server function read ran twice: + @for (name of refetchedFns(); track name; let last = $last) { + {{ name }}{{ last ? '' : ', ' }} + } + ran while server rendering, then again in the browser. The browser did not use the + TransferState seed. +
+ }
Show calls of kind @@ -512,7 +587,23 @@ function walk(routes: AnalogRoute[], depth = 0, out: { route: AnalogRoute; depth
- + } @@ -550,7 +647,8 @@ function walk(routes: AnalogRoute[], depth = 0, out: { route: AnalogRoute; depth }

- Navigate in the app to see page renders, load() fetches and API calls. + Navigate in the app to see page renders, load() fetches, form actions, server + functions and API calls.

} @@ -601,6 +699,39 @@ function walk(routes: AnalogRoute[], depth = 0, out: { route: AnalogRoute; depth
{{ c.method }} - {{ c.url }} + @if (fnOf(c); as fn) { + {{ fn.name }} + {{ short(fn.file) }} + } @else { + {{ c.url }} + } + @if (c.seeded) { + ran during server rendering + } + @if (c.outcome) { + {{ outcomeLabel(c.outcome) }} + @if (c.location) { + to {{ c.location }} + } + + } @if (c.render) {
{{ c.ms }} ms + @if (c.seeded) { + in process + } @else { + {{ c.ms }} ms + } + {{ c.from }}
+ @if (serverFns().length) { +

Server functions

+
+ + + + + + + + + + + @for (fn of serverFns(); track fn.id) { + + + + + + + } + +
MethodNameFileCalls
+ {{ fn.method }} + {{ fn.name }} + {{ dir(fn.file) }}{{ base(fn.file) }} + {{ fnCalls(fn.id) }}
+
+ } +

Request playground

@@ -623,14 +754,19 @@ function walk(routes: AnalogRoute[], depth = 0, out: { route: AnalogRoute; depth
@if (!canCall()) {

{{ callsOff }}

+ } @else if (needsConfirm()) { +

+ Tick "This request can change data on the dev server" below to send a + {{ method() }} request. +

} @if (method() !== 'GET') { @@ -651,7 +787,9 @@ function walk(routes: AnalogRoute[], depth = 0, out: { route: AnalogRoute; depth This request can change data on the dev server } - @if (response(); as r) { + @if (sending()) { +

Sending {{ method() }} {{ apiPath().trim() }}…

+ } @else if (response(); as r) {
@if (r.error) {
@@ -757,6 +895,14 @@ function walk(routes: AnalogRoute[], depth = 0, out: { route: AnalogRoute; depth default, nothing configured } + @if (p.fromRules?.length) { +
From routeRules
+
+ @for (r of p.fromRules; track r) { + {{ r }} + } +
+ } @if (p.staticMissing.length) {
Static, not listed
@@ -877,6 +1023,9 @@ function walk(routes: AnalogRoute[], depth = 0, out: { route: AnalogRoute; depth @if (item.path && item.path !== item.file) { {{ item.path }} } + @if (item.message) { +

{{ item.message }}

+ } } @@ -1475,6 +1624,14 @@ function walk(routes: AnalogRoute[], depth = 0, out: { route: AnalogRoute; depth border-color: #eab308; color: #fef08a; } + .pill[data-mode='cached'] { + border-color: #a855f7; + color: #e9d5ff; + } + .pill[data-mode='redirect'] { + border-color: #94a3b8; + color: #e2e8f0; + } .pill[data-call='page'] { border-color: #3b82f6; color: #bfdbfe; @@ -1491,6 +1648,15 @@ function walk(routes: AnalogRoute[], depth = 0, out: { route: AnalogRoute; depth border-color: #f97316; color: #fed7aa; } + .pill[data-call='action'] { + border-color: #ec4899; + color: #fbcfe8; + } + [data-tone='good'].pill { + border-color: color-mix(in srgb, var(--ok) 30%, transparent); + background: color-mix(in srgb, var(--ok) 12%, transparent); + color: var(--ok); + } [data-tone='warn'].pill, [data-tone='warn'].chip { border-color: color-mix(in srgb, var(--warn) 30%, transparent); @@ -1781,7 +1947,13 @@ function walk(routes: AnalogRoute[], depth = 0, out: { route: AnalogRoute; depth .where li { display: flex; flex-wrap: wrap; - gap: 12px; + gap: 4px 12px; + } + .where .detail { + flex-basis: 100%; + margin: 0; + color: var(--text-2); + overflow-wrap: anywhere; } .fix { margin-top: 12px; @@ -1833,7 +2005,7 @@ export class AnalogInspector { readonly canCall = computed(() => actionAllowed(this.rpc(), 'analog')); protected readonly callsOff = actionBlockedMessage('analog'); - readonly kinds: Kind[] = ['all', 'page', 'load', 'fn', 'api']; + readonly kinds: Kind[] = ['all', 'page', 'load', 'action', 'fn', 'api']; readonly methods = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE']; readonly methodOptions = this.methods.map((m) => ({ value: m, label: m })); readonly view = signal('routes'); @@ -1844,13 +2016,21 @@ export class AnalogInspector { readonly plan = signal(null); readonly filter = signal(''); readonly testUrl = signal(''); - readonly match = signal(null); + readonly explained = signal<{ url: string; match: UrlMatch } | null>(null); + readonly explainError = signal(''); + readonly explaining = signal(false); readonly kind = signal('all'); readonly method = signal('GET'); readonly apiPath = signal(''); readonly apiBody = signal(''); readonly confirmSend = signal(false); readonly response = signal(null); + readonly sending = signal(false); + readonly needsConfirm = computed(() => this.method() !== 'GET' && !this.confirmSend()); + readonly canSend = computed(() => this.canCall() && !this.sending() && !this.needsConfirm()); + readonly sendHintId = computed(() => + !this.canCall() ? 'analog-calls-off' : this.needsConfirm() ? 'analog-confirm-hint' : null, + ); private unsubscribe: (() => void) | null = null; private refreshTimer: ReturnType | undefined; @@ -1880,11 +2060,18 @@ export class AnalogInspector { !!r.route.file?.toLowerCase().includes(needle), ); }); + readonly serverFns = computed(() => this.project()?.serverFns ?? []); + private readonly fnById = computed(() => new Map(this.serverFns().map((fn) => [fn.id, fn]))); + readonly refetchedFns = computed(() => + Array.from( + new Set((this.state().refetches ?? []).map((r) => this.fnById().get(r.id)?.name ?? r.id)), + ), + ); readonly duplicates = computed(() => Array.from(new Set((this.state().duplicates ?? []).map((d) => d.route))), ); readonly modeCounts = computed(() => - (['ssr', 'ssg', 'client'] as const) + (['ssr', 'ssg', 'cached', 'client', 'redirect'] as const) .map((mode) => ({ mode, label: MODE_LABEL[mode], @@ -1909,7 +2096,14 @@ export class AnalogInspector { }; cards.set(finding.rule, card); } - card.items.push({ file: finding.file, path: finding.path }); + const message = + STATIC_MESSAGES.has(finding.rule) || finding.message === card.summary + ? undefined + : finding.message; + const same = (item: LintCard['items'][number]) => + item.file === finding.file && item.path === finding.path && item.message === message; + if (!card.items.some(same)) + card.items.push({ file: finding.file, path: finding.path, message }); } return Array.from(cards.values()).sort((a, b) => order[a.severity] - order[b.severity]); }); @@ -2032,10 +2226,26 @@ export class AnalogInspector { } mismatch(row: RenderRow): boolean { - if (!row.last?.render) return false; + if (!row.last?.render || row.mode === 'redirect') return false; return row.mode === 'client' ? row.last.render !== 'client' : row.last.render === 'client'; } + fnOf(call: AnalogCall): ServerFn | undefined { + return call.kind === 'fn' && call.route ? this.fnById().get(call.route) : undefined; + } + + fnCalls(id: string): number { + return this.allCalls().filter((c) => c.kind === 'fn' && c.route === id).length; + } + + outcomeLabel(outcome: ActionOutcome): string { + return OUTCOME_LABEL[outcome]; + } + + outcomeTone(outcome: ActionOutcome): string { + return OUTCOME_TONE[outcome]; + } + statusClass(status: number): 'good' | 'warn' | 'bad' { if (status >= 500 || status === 0) return 'bad'; if (status >= 400) return 'warn'; @@ -2080,13 +2290,29 @@ export class AnalogInspector { async explain() { const url = this.testUrl().trim(); - if (!url) return; - this.match.set(await call(this.rpc(), 'analog-explain-url', url)); + if (!url) { + this.explained.set(null); + this.explainError.set('Type a URL to explain, for example /products/42.'); + return; + } + this.explaining.set(true); + this.explainError.set(''); + try { + const match = (await rpcCall(this.rpc(), 'analog-explain-url', url)) as UrlMatch | null; + if (!match) throw new Error('The devtools server did not answer'); + this.explained.set({ url, match }); + } catch (error) { + const reason = String((error as Error)?.message || 'The devtools server did not answer'); + this.explained.set(null); + this.explainError.set(`Could not explain ${url}. ${reason.replace(/\.?$/, '.')}`); + } finally { + this.explaining.set(false); + } } async send() { const path = this.apiPath().trim(); - if (!path) return; + if (!path || this.sending() || this.needsConfirm()) return; let body: unknown; if (this.method() !== 'GET' && this.apiBody().trim()) { try { @@ -2096,13 +2322,19 @@ export class AnalogInspector { return; } } - const result = await call(this.rpc(), 'analog-call-api', { - method: this.method(), - path, - body, - confirm: this.confirmSend(), - }); - this.response.set(result ?? { error: 'No answer from the devtools server.' }); + this.response.set(null); + this.sending.set(true); + try { + const result = await call(this.rpc(), 'analog-call-api', { + method: this.method(), + path, + body, + confirm: this.confirmSend(), + }); + this.response.set(result ?? { error: 'No answer from the devtools server.' }); + } finally { + this.sending.set(false); + } } onKey(event: KeyboardEvent) { diff --git a/app/src/pages/cd-recording.ts b/app/src/pages/cd-recording.ts new file mode 100644 index 0000000..d697b9d --- /dev/null +++ b/app/src/pages/cd-recording.ts @@ -0,0 +1,311 @@ +import { Component, computed, input, signal } from '@angular/core'; +import type { DevframeRpcClient } from 'devframe/client'; +import { panelConfig } from '../devtools-config'; +import { time } from '../format'; +import { rpcCall as call } from '../rpc'; +import { LimitNote } from '../ui/limit-note'; + +export interface CdCheck { + name: string; + checks: number; + ms: number; +} + +export interface CdCycle { + id: number; + at: number; + ms: number; + passes: number; + trigger?: string; + checks: number; + components: CdCheck[]; +} + +export interface CdComponentStat extends CdCheck { + maxMs: number; + cycles: number; +} + +export interface CdPage { + pageId: string; + supported: boolean; + recording: boolean; + startedAt: number | null; + dropped: number; + cycles: CdCycle[]; + components: CdComponentStat[]; + hosts: Record; +} + +const SHOWN = 10; +const SHOWN_CYCLES = 30; + +/** Record and Stop for change detection, with the slowest components and the latest cycles. */ +@Component({ + selector: 'app-cd-recording', + imports: [LimitNote], + template: ` +
+
+

Change detection

+ + @if (cycles().length) { + + } +

{{ status() }}

+
+

+ Records each change detection cycle with Angular's profiler: how long it took, how many + components it checked and the output that ran before it. Tree rows show how often each + instance was checked. Times come from a development build. +

+ @if (page()?.supported === false) { +

This page can't record change detection. It needs Angular 20 or later.

+ } + + @if (slowest().length) { +
+
+

Slowest components

+ + + + + + + + + + + @for (c of slowest(); track c.name) { + + + + + + + } + +
ComponentChecksSelf timeSlowest
{{ c.name }}{{ c.checks }}{{ ms(c.ms) }}{{ ms(c.maxMs) }}
+
+
+

Latest cycles

+
    + @for (cycle of latest(); track cycle.id) { +
  1. + {{ clock(cycle.at) }} + {{ ms(cycle.ms) }} + + {{ cycle.checks }} {{ cycle.checks === 1 ? 'check' : 'checks' }}, + {{ cycle.passes }} + {{ cycle.passes === 1 ? 'pass' : 'passes' }} + + @if (cycle.trigger) { + after {{ cycle.trigger }} + } + @if (cycle.components[0]; as top) { + + slowest {{ top.name }} {{ ms(top.ms) }} + + } +
    2. + } +
+
+
+ } @else if (recording()) { +

Use the app. Cycles show up here as Angular runs change detection.

+ } +
+ `, + styles: ` + @use 'mixins' as m; + + :host { + display: block; + margin-top: 16px; + } + .cd { + @include m.panel; + padding: 12px 14px; + } + .cd-head { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px 12px; + } + h2 { + margin: 0; + font-size: 14px; + color: var(--text-strong); + } + h3 { + @include m.label; + margin: 12px 0 6px; + } + button { + display: inline-flex; + align-items: center; + gap: 8px; + height: var(--control-h); + padding: 0 12px; + background: var(--surface-2); + border: 1px solid var(--border-strong); + border-radius: var(--radius-sm); + color: var(--text); + cursor: pointer; + font: inherit; + font-size: 13px; + } + button:hover:not(:disabled) { + background: var(--surface-3); + border-color: var(--accent-line); + } + button:focus-visible { + @include m.focus-ring; + } + button:disabled { + cursor: not-allowed; + opacity: 0.6; + } + .dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--text-3); + } + button.on .dot { + background: var(--danger); + } + .status { + margin: 0; + color: var(--text-2); + font-size: 12px; + } + .hint, + .note, + .empty { + margin: 8px 0; + color: var(--text-2); + line-height: 1.5; + } + .cd-grid { + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: 0 16px; + } + @media (min-width: 880px) { + .cd-grid { + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + } + } + table { + width: 100%; + border-collapse: collapse; + font-size: 12px; + } + th, + td { + padding: 4px 6px; + border-bottom: 1px solid var(--border); + text-align: left; + } + th { + color: var(--text-2); + font-weight: 500; + } + td.mono { + overflow-wrap: anywhere; + } + .num { + text-align: right; + font-variant-numeric: tabular-nums; + } + .mono { + font-family: var(--font-mono); + } + .cycles { + margin: 0; + padding: 0; + list-style: none; + font-size: 12px; + } + .cycles li { + display: flex; + flex-wrap: wrap; + gap: 4px 10px; + padding: 4px 0; + border-bottom: 1px solid var(--border); + color: var(--text); + } + .when, + .trigger, + .top { + color: var(--text-2); + } + .trigger .mono, + .top .mono { + overflow-wrap: anywhere; + } + `, +}) +export class CdRecording { + readonly page = input(null); + readonly pageId = input(null); + readonly rpc = input(null); + + protected readonly message = signal(''); + readonly recording = computed(() => this.page()?.recording === true); + readonly cycles = computed(() => this.page()?.cycles ?? []); + readonly maxCycles = computed(() => panelConfig(this.rpc()).limits.cdCycles); + readonly slowest = computed(() => + [...(this.page()?.components ?? [])].sort((a, b) => b.ms - a.ms).slice(0, SHOWN), + ); + readonly latest = computed(() => this.cycles().slice(-SHOWN_CYCLES).reverse()); + readonly status = computed(() => { + if (this.message()) return this.message(); + const count = this.cycles().length; + if (this.recording()) return `Recording. ${count} ${count === 1 ? 'cycle' : 'cycles'} so far.`; + return count ? `${count} ${count === 1 ? 'cycle' : 'cycles'} recorded.` : ''; + }); + + protected ms(value: number): string { + return `${value < 10 ? value.toFixed(2) : Math.round(value)} ms`; + } + + protected clock(at: number): string { + return time(at); + } + + async toggle() { + await this.send({ on: !this.recording() }, this.recording() ? '' : 'Starting…'); + } + + async clear() { + await this.send({ clear: true }, ''); + } + + private async send(request: { on?: boolean; clear?: boolean }, pending: string) { + this.message.set(pending); + try { + await call(this.rpc(), 'request-change-detection-record', { + pageId: this.pageId(), + ...request, + }); + this.message.set(''); + } catch { + this.message.set('Could not reach the page.'); + } + } +} diff --git a/app/src/pages/component-tree-state.ts b/app/src/pages/component-tree-state.ts new file mode 100644 index 0000000..8c7fb14 --- /dev/null +++ b/app/src/pages/component-tree-state.ts @@ -0,0 +1,93 @@ +export interface TreeNode { + id: string; + name: string; + tag: string; + directives?: string[]; + children: TreeNode[]; +} + +/** Keeps matching nodes and their ancestors; `matches` counts the matching nodes only. */ +export function filterTree( + roots: T[], + query: string, +): { nodes: T[]; matches: number } { + const q = query.trim().toLowerCase(); + if (!q) return { nodes: roots, matches: 0 }; + let matches = 0; + const keep = (node: T) => + node.name.toLowerCase().includes(q) || + node.tag.toLowerCase().includes(q) || + !!node.directives?.some((d) => d.toLowerCase().includes(q)); + const prune = (nodes: T[]): T[] => + nodes.flatMap((node) => { + const hit = keep(node); + if (hit) matches++; + const children = prune(node.children as T[]); + return hit || children.length ? [{ ...node, children }] : []; + }); + return { nodes: prune(roots), matches }; +} + +export function countText(total: number, matches: number, filtering: boolean): string { + if (filtering) return `${matches} of ${total}`; + return `${total} ${total === 1 ? 'instance' : 'instances'}`; +} + +export function filterAnnouncement(total: number, matches: number, query: string): string { + if (!query.trim()) return ''; + if (!matches) return 'No components match.'; + return `${matches} of ${total} ${total === 1 ? 'instance' : 'instances'} match.`; +} + +export interface SelectionState { + pageId: string | null; + selectedId: string | null; + detailId: string | null; +} + +export interface SelectionPage { + pageId: string; + roots: TreeNode[]; + detail: { id: string } | null; + truncated?: boolean; +} + +/** + * Brings the panel selection in line with a new report. A page switch takes + * that page's own selection. On the same page, a selection made elsewhere + * (on the page or by an agent) is followed, and a selected instance that left + * the tree is dropped and reported as `destroyed`. + */ +export function reconcileSelection( + state: SelectionState, + page: SelectionPage | null, +): SelectionState & { destroyed: string | null } { + const detailId = page?.detail?.id ?? null; + const pageId = page?.pageId ?? null; + if (pageId !== state.pageId) { + return { pageId, selectedId: detailId, detailId, destroyed: null }; + } + let selectedId = state.selectedId; + if (detailId && detailId !== state.detailId && detailId !== selectedId) selectedId = detailId; + if (selectedId && page && !page.truncated && !hasNode(page.roots, selectedId)) { + return { pageId, selectedId: null, detailId, destroyed: selectedId }; + } + return { pageId, selectedId, detailId, destroyed: null }; +} + +function hasNode(nodes: TreeNode[], id: string): boolean { + return nodes.some((node) => node.id === id || hasNode(node.children, id)); +} + +/** The row that takes the place of a removed one: the next remaining row, else the previous one. */ +export function nearestRow( + before: string[], + after: ReadonlySet, + gone: string, +): string | null { + const at = before.indexOf(gone); + if (at < 0) return null; + for (let i = at + 1; i < before.length; i++) if (after.has(before[i])) return before[i]; + for (let i = at - 1; i >= 0; i--) if (after.has(before[i])) return before[i]; + return null; +} diff --git a/app/src/pages/component-tree.ts b/app/src/pages/component-tree.ts index 3bdf629..0dc431b 100644 --- a/app/src/pages/component-tree.ts +++ b/app/src/pages/component-tree.ts @@ -2,19 +2,31 @@ import { JsonPipe } from '@angular/common'; import { Component, DestroyRef, + ElementRef, Injector, afterNextRender, computed, effect, inject, input, + linkedSignal, output, signal, untracked, } from '@angular/core'; import type { DevframeRpcClient } from 'devframe/client'; import { hostPageId } from '../page-id'; +import { pickPage } from '../live-pages'; import { isStaticReport } from '../rpc'; +import { Select, type SelectOption } from '../ui/select'; +import { + countText, + filterAnnouncement, + filterTree, + nearestRow, + reconcileSelection, +} from './component-tree-state'; +import { CdRecording, type CdPage } from './cd-recording'; interface SourceComponent { selector: string; @@ -40,6 +52,7 @@ interface Prop { prop: string; value?: unknown; listened?: boolean; + kind?: 'signal' | 'resource'; } interface Dependency { @@ -59,13 +72,27 @@ interface Detail { encapsulation?: string; inputs: Prop[]; outputs: Prop[]; + properties?: Prop[]; listeners: string[]; directives: { name: string; inputs: Prop[]; outputs: Prop[] }[]; dependencies: Dependency[]; } +interface DeferBlock { + id: string; + owner?: { id: string; name: string; tag: string }; + state: string; + hydration: string; + hydrateNever?: boolean; + triggers: string[]; + rootIds: string[]; +} + interface Page { pageId: string; + url?: string; + title?: string; + deferBlocks?: DeferBlock[]; roots: LiveNode[]; count: number; truncated?: boolean; @@ -87,6 +114,14 @@ interface RoutedHit { outlet: string; } +interface PickResult { + ok?: boolean; + id?: string; + name?: string; + pageId?: string; + error?: string; +} + interface Row { node: LiveNode; depth: number; @@ -100,13 +135,14 @@ function bare(name: string): string { @Component({ selector: 'app-component-tree', - imports: [JsonPipe], + imports: [JsonPipe, Select, CdRecording], + host: { '(keydown.escape)': 'cancelPick()' }, template: ` @if (live()) {

Every component instance on the page, in the order Angular rendered them. Hover a row to - highlight its host in the page, and select it to read its live inputs, outputs and injected - services. + highlight its host in the page, and select it to read its live inputs, properties, outputs + and injected services.

@@ -122,14 +158,37 @@ function bare(name: string): string { autocomplete="off" spellcheck="false" [value]="filter()" - (input)="filter.set($any($event.target).value)" - (keydown.escape)="filter.set('')" + (input)="setFilter($any($event.target).value)" + (keydown.escape)="setFilter('')" />
- - {{ page()!.count }} {{ page()!.count === 1 ? 'instance' : 'instances' }} - + @if (pageOptions().length > 1) { + Page + + } + {{ countLabel() }} +
+

{{ announcement() }}

+ @if (pickMessage()) { +

{{ pickMessage() }}

+ } @if (page()!.truncated) {

The page has more components than the tree shows.

} @@ -140,7 +199,7 @@ function bare(name: string): string { @if (!rows().length) {

No components match “{{ filter().trim() }}”

- +
}
{{ hit.route || '/' }} } + @if (cdHosts()[row.node.id]; as checks) { + + {{ checks + }} + {{ checks === 1 ? 'check' : 'checks' }} while recording + + } @if (row.node.directives?.length) { +{{ row.node.directives!.length }} @@ -272,6 +339,29 @@ function bare(name: string): string { }
+
+

+ Properties {{ d.properties?.length ?? 0 }} +

+ @if (d.properties?.length) { +
    + @for (p of d.properties; track p.name) { +
  • + + {{ p.name }} + @if (p.kind) { + {{ p.kind }} + } + + 
    {{ p.value | json }}
    +
    • + } +
+ } @else { +

No other properties.

+ } +
+ @if (d.listeners.length) {

@@ -357,13 +447,59 @@ function bare(name: string): string { } @else {
-

- Select a component to see its live inputs, outputs, change detection and injected - services. -

+ @if (destroyed(); as name) { +

The selected component was destroyed

+

+ {{ name }} is no longer on the page. Select another + component to see its live values. +

+ } @else { +

+ Select a component to see its live inputs, properties, outputs, change detection and + injected services. +

+ }
}

+ + @if (deferBlocks().length) { +
+

+ Defer blocks {{ deferBlocks().length }} +

+
    + @for (block of deferBlocks(); track block.id) { +
  • + +
    • + } +
+
+ } + @if (!staticReport()) { + + } } @else { @if (page()) {

@@ -635,6 +771,75 @@ function bare(name: string): string { .refresh.spinning svg { animation: spin 0.8s linear infinite; } + .page-select { + flex: 0 1 220px; + min-width: 0; + } + .pick.on { + background: var(--accent-soft); + border-color: var(--accent-line); + color: var(--text-strong); + } + .defer { + margin-top: 16px; + } + .defer-title { + @include m.label; + display: flex; + align-items: center; + gap: 6px; + margin: 0 0 8px; + } + .defer-list { + display: grid; + gap: 6px; + margin: 0; + padding: 0; + list-style: none; + } + .defer-row { + justify-content: flex-start; + flex-wrap: wrap; + width: 100%; + height: auto; + min-height: var(--control-h); + padding: 6px 12px; + background: var(--surface); + border-color: var(--border); + text-align: left; + } + .defer-row:disabled { + cursor: default; + } + .state { + padding: 0 8px; + border-radius: 99px; + background: var(--surface-3); + color: var(--text-2); + font-size: 11px; + line-height: 18px; + } + .state-complete { + @include m.soft(var(--ok)); + } + .state-error { + @include m.soft(var(--danger)); + } + .state-loading, + .state-placeholder { + @include m.soft(var(--warn)); + } + .triggers { + min-width: 0; + color: var(--text-2); + font-size: 12px; + @include m.truncate; + } + .pick-message { + margin: 0 0 12px; + color: var(--text-2); + line-height: 1.5; + } .layout { display: grid; grid-template-columns: minmax(0, 1fr); @@ -747,6 +952,20 @@ function bare(name: string): string { line-height: 18px; @include m.truncate; } + .checks { + flex: none; + margin-left: auto; + padding: 0 7px; + border-radius: 99px; + background: var(--accent-soft); + color: var(--text); + font-size: 11px; + line-height: 18px; + font-variant-numeric: tabular-nums; + } + .checks + .dirs { + margin-left: 0; + } .dirs { flex: none; margin-left: auto; @@ -1110,7 +1329,12 @@ export class ComponentTree { readonly source = signal([]); readonly formOwners = signal<{ formId: string; label: string; file: string | null }[]>([]); readonly pages = signal>({}); + readonly chosenPageId = signal(null); readonly selectedId = signal(null); + readonly destroyed = signal(null); + readonly announcement = signal(''); + readonly picking = signal(false); + readonly pickMessage = signal(''); readonly focusId = signal(null); readonly collapsed = signal>(new Set()); readonly openKey = signal(null); @@ -1118,20 +1342,41 @@ export class ComponentTree { private readonly pageId = hostPageId(); private readonly destroyRef = inject(DestroyRef); private readonly injector = inject(Injector); + private readonly host = inject>(ElementRef); private readonly cleanups: (() => void)[] = []; + private selection = { pageId: null as string | null, detailId: null as string | null }; + + private readonly shownPageId = linkedSignal< + { pages: Record; chosen: string | null }, + string | null + >({ + source: () => ({ pages: this.pages(), chosen: this.chosenPageId() }), + computation: ({ pages, chosen }, previous) => + pickPage(pages, { chosen, host: this.pageId, previous: previous?.value ?? null }), + }); readonly page = computed(() => { - const pages = this.pages(); - if (this.pageId) return pages[this.pageId] ?? null; - let latest: Page | null = null; - for (const page of Object.values(pages)) { - if (!latest || page.reportedAt > latest.reportedAt) latest = page; - } - return latest; + const id = this.shownPageId(); + return id ? (this.pages()[id] ?? null) : null; }); + readonly pageOptions = computed(() => + Object.values(this.pages()).map((page) => ({ + value: page.pageId, + label: page.title || page.url || `Page ${page.pageId}`, + hint: page.url, + })), + ); + readonly live = computed(() => (this.page()?.roots.length ?? 0) > 0); + private readonly cdPages = signal>({}); + readonly cdPage = computed(() => { + const pageId = this.page()?.pageId; + return pageId ? (this.cdPages()[pageId] ?? null) : null; + }); + readonly cdHosts = computed(() => this.cdPage()?.hosts ?? {}); + private readonly index = computed(() => { const map = new Map(); const parents = new Map(); @@ -1148,21 +1393,13 @@ export class ComponentTree { private readonly query = computed(() => this.filter().trim().toLowerCase()); - private readonly visible = computed(() => { - const roots = this.page()?.roots ?? []; - const q = this.query(); - if (!q) return roots; - const keep = (node: LiveNode) => - node.name.toLowerCase().includes(q) || - node.tag.toLowerCase().includes(q) || - !!node.directives?.some((d) => d.toLowerCase().includes(q)); - const prune = (nodes: LiveNode[]): LiveNode[] => - nodes.flatMap((node) => { - const children = prune(node.children); - return keep(node) || children.length ? [{ ...node, children }] : []; - }); - return prune(roots); - }); + private readonly filtered = computed(() => filterTree(this.page()?.roots ?? [], this.query())); + + readonly deferBlocks = computed(() => this.page()?.deferBlocks ?? []); + + readonly countLabel = computed(() => + countText(this.page()?.count ?? 0, this.filtered().matches, !!this.query()), + ); readonly rows = computed(() => { const rows: Row[] = []; @@ -1175,7 +1412,7 @@ export class ComponentTree { if (expanded) walk(node.children, depth + 1); } }; - walk(this.visible(), 0); + walk(this.filtered().nodes, 0); return rows; }); @@ -1270,12 +1507,24 @@ export class ComponentTree { if (this.destroyRef.destroyed) return; const applyTree = (value: unknown) => { const pages = (value as { pages?: Record } | null)?.pages; - this.pages.set(pages && typeof pages === 'object' ? pages : {}); + this.applyPages(pages && typeof pages === 'object' ? pages : {}); }; applyTree(tree.value()); this.cleanups.push(tree.on('updated', applyTree)); } catch { - this.pages.set({}); + this.applyPages({}); + } + try { + const cd = await my.rpc.sharedState('change-detection'); + if (this.destroyRef.destroyed) return; + const applyCd = (value: unknown) => { + const pages = (value as { pages?: Record } | null)?.pages; + this.cdPages.set(pages && typeof pages === 'object' ? pages : {}); + }; + applyCd(cd.value()); + this.cleanups.push(cd.on('updated', applyCd)); + } catch { + this.cdPages.set({}); } try { const router = await my.rpc.sharedState('router'); @@ -1343,18 +1592,112 @@ export class ComponentTree { return bare(name); } - select(id: string) { - const next = this.selectedId() === id ? null : id; - this.selectedId.set(next); - this.focusId.set(id); + private applyPages(pages: Record) { + const active = document.activeElement; + const focused = + active instanceof HTMLElement && this.host.nativeElement.contains(active) + ? (active.closest('.row')?.dataset['id'] ?? null) + : null; + const before = focused ? this.rows().map((row) => row.node.id) : []; + const known = this.index().map; + this.pages.set(pages); + this.syncSelection(known); + if (!focused) return; + const after = new Set(this.rows().map((row) => row.node.id)); + if (after.has(focused)) return; + const next = nearestRow(before, after, focused); + if (!next) return; + this.focusId.set(next); + afterNextRender(() => this.rowElement(next)?.focus(), { injector: this.injector }); + } + + private syncSelection(known = this.index().map) { + const page = this.page(); + const next = reconcileSelection( + { ...this.selection, selectedId: this.selectedId() }, + page + ? { pageId: page.pageId, roots: page.roots, detail: page.detail, truncated: page.truncated } + : null, + ); + const name = next.destroyed ? known.get(next.destroyed)?.name : undefined; + this.selection = { pageId: next.pageId, detailId: next.detailId }; + if (next.selectedId !== this.selectedId()) this.selectedId.set(next.selectedId); + if (next.selectedId) this.destroyed.set(null); + if (!next.destroyed) return; + this.destroyed.set(name ?? 'The component'); + this.announcement.set('The selected component was destroyed.'); + this.sendSelection(null); + } + + selectPage(pageId: string | null) { + if (!pageId) return; + this.chosenPageId.set(pageId); + this.destroyed.set(null); + this.syncSelection(); + } + + setFilter(value: string) { + this.filter.set(value); + const { matches } = this.filtered(); + this.announcement.set(filterAnnouncement(this.page()?.count ?? 0, matches, value)); + } + + async pick() { + const client = this.rpc(); + if (!client || this.picking()) return; + this.picking.set(true); + this.say('Click a component in the app. Press Escape to cancel.'); + const result = (await client + .scope('ng-devtools') + .rpc.call('request-component-pick', { pageId: this.page()?.pageId }) + .catch(() => ({ ok: false, error: 'Could not reach the devtools server.' }))) as PickResult; + this.picking.set(false); + if (!result?.ok || !result.id) { + this.say(result?.error ?? 'No component was picked.'); + return; + } + if (result.pageId && result.pageId !== this.page()?.pageId) this.selectPage(result.pageId); + this.say(`Picked ${result.name ?? 'a component'}.`); + this.destroyed.set(null); + if (this.index().map.has(result.id)) this.reveal(result.id); + else this.selectedId.set(result.id); + } + + cancelPick() { + const client = this.rpc(); + if (!client || !this.picking()) return; + void client + .scope('ng-devtools') + .rpc.call('cancel-component-pick', { pageId: this.page()?.pageId }) + .catch(() => {}); + } + + private say(message: string) { + this.pickMessage.set(message); + this.announcement.set(message); + } + + private sendSelection(id: string | null) { const client = this.rpc(); if (!client) return; void client .scope('ng-devtools') - .rpc.call('select-component', { pageId: this.page()?.pageId, id: next }) + .rpc.call('select-component', { pageId: this.page()?.pageId, id }) .catch(() => {}); } + private rowElement(id: string) { + return this.host.nativeElement.querySelector(`.row[data-id="${CSS.escape(id)}"]`); + } + + select(id: string) { + const next = this.selectedId() === id ? null : id; + this.selectedId.set(next); + this.destroyed.set(null); + this.focusId.set(id); + this.sendSelection(next); + } + private reveal(id: string) { const { parents } = this.index(); this.collapsed.update((set) => { @@ -1362,7 +1705,7 @@ export class ComponentTree { for (let parent = parents.get(id); parent; parent = parents.get(parent)) next.delete(parent); return next; }); - if (!this.rows().some((row) => row.node.id === id)) this.filter.set(''); + if (!this.rows().some((row) => row.node.id === id)) this.setFilter(''); if (this.selectedId() !== id) this.select(id); afterNextRender( () => @@ -1394,6 +1737,14 @@ export class ComponentTree { .catch(() => {}); } + highlightBlock(block: DeferBlock) { + this.highlight(block.rootIds[0] ?? block.owner?.id ?? null); + } + + showOwner(block: DeferBlock) { + if (block.owner && this.index().map.has(block.owner.id)) this.reveal(block.owner.id); + } + onTreeKey(event: KeyboardEvent) { const rows = this.rows(); if (!rows.length) return; diff --git a/app/src/pages/dashboard.ts b/app/src/pages/dashboard.ts index 3dde28f..5d76f1a 100644 --- a/app/src/pages/dashboard.ts +++ b/app/src/pages/dashboard.ts @@ -14,6 +14,7 @@ import { type ResolvedNgDevtoolsConfig, } from '@santoshyadavdev/ng-devtools/config'; import { hostPageId } from '../page-id'; +import { injectorTreeFor, signalGraphFor } from '../live-pages'; import { isStaticReport } from '../rpc'; import { panelConfig, tabEnabled } from '../devtools-config'; import { TabIcon } from './tab-icon'; @@ -61,6 +62,7 @@ interface InjectorNode { interface InjectorSnapshot { roots?: InjectorNode[]; environment?: InjectorNode[]; + pages?: Record; } interface GraphSnapshot { @@ -507,7 +509,7 @@ export class Dashboard { private stopLive: (() => void)[] = []; private readonly liveInjectors = computed(() => { - const tree = this.injectorTree(); + const tree = injectorTreeFor(this.injectorTree(), this.pageId); if (!tree?.roots?.length) return null; let injectors = 0; let providers = 0; @@ -521,8 +523,7 @@ export class Dashboard { }); private readonly liveSignals = computed(() => { - const state = this.signalGraph(); - const graph = (this.pageId && state?.pages?.[this.pageId]) || state?.graph; + const graph = signalGraphFor(this.signalGraph(), this.pageId); if (!graph?.nodes?.length) return null; return graph.nodes.filter((node) => LIVE_SIGNAL_KINDS.has(node.kind ?? '')).length; }); diff --git a/app/src/pages/di-inspector.ts b/app/src/pages/di-inspector.ts index 0427d74..e340e0c 100644 --- a/app/src/pages/di-inspector.ts +++ b/app/src/pages/di-inspector.ts @@ -137,6 +137,20 @@ function isTree(value: unknown): value is InjectorNode[] {

+ @if (truncated()) { +

+ + + This page has more than 2000 element injectors. + Only the first 2000 are shown, so a lookup path or a provider can point to one that is + not listed. + +

+ } + @if (providedBy().length) {
Provided by @@ -213,6 +227,7 @@ function isTree(value: unknown): value is InjectorNode[] { aria-hidden="true" >{{ kind(row.node)[0].toUpperCase() }} + {{ kind(row.node) }} {{ label(row.node) }} @if (row.node.injector.component) { {{ row.node.injector.component }} @@ -225,6 +240,7 @@ function isTree(value: unknown): value is InjectorNode[] { + injects {{ row.node.dependencies!.length }} } @@ -236,6 +252,7 @@ function isTree(value: unknown): value is InjectorNode[] { + provides {{ row.node.injector.providerCount }} } @@ -283,7 +300,12 @@ function isTree(value: unknown): value is InjectorNode[] { > {{ step.label }} @if (step.providers) { - {{ step.providers }} + + {{ step.providers }} + {{ + step.providers === 1 ? 'provider' : 'providers' + }} + } } @@ -320,6 +342,8 @@ function isTree(value: unknown): value is InjectorNode[] { > from {{ labelById(by) }} + } @else if (dep.flags.includes('optional')) { + optional, not provided } @else { not provided anywhere } @@ -415,7 +439,7 @@ function isTree(value: unknown): value is InjectorNode[] { DI from source scan (static analysis). - Connect the overlay on Angular 17+ to see the live injector tree. + Connect the overlay on Angular 20 or later to see the live injector tree.

@if (groupedProviders().length === 0) { @@ -1020,6 +1044,10 @@ function isTree(value: unknown): value is InjectorNode[] { .from .mono { color: var(--text); } + .from.absent { + cursor: default; + background: none; + } .from.missing { cursor: default; border-color: color-mix(in srgb, var(--warn) 40%, transparent); @@ -1203,6 +1231,7 @@ export class DiInspector { readonly environment = signal([]); readonly sourceProviders = signal([]); readonly loaded = signal(false); + readonly truncated = signal(false); readonly view = signal('element'); readonly query = signal(''); readonly onlyProviding = signal(false); @@ -1286,7 +1315,7 @@ export class DiInspector { const node = map.get(id); return { id, - label: node ? labelOf(node) : 'Null injector', + label: node ? labelOf(node) : id === NULL_ID ? 'Null injector' : 'Not listed', kind: node ? kindOf(node) : 'null', providers: node?.providers.length ?? 0, }; @@ -1368,7 +1397,7 @@ export class DiInspector { labelById(id: string) { const node = this.index().map.get(id); - return node ? labelOf(node) : 'Null injector'; + return node ? labelOf(node) : id === NULL_ID ? 'Null injector' : 'not listed'; } capital(text: string) { @@ -1506,11 +1535,13 @@ export class DiInspector { const shared = value as { roots?: unknown; environment?: unknown; - pages?: Record; + truncated?: unknown; + pages?: Record; } | null; const next = (pageId ? shared?.pages?.[pageId] : undefined) ?? shared; if (isTree(next?.roots)) this.roots.set(next.roots); if (isTree(next?.environment)) this.environment.set(next.environment); + this.truncated.set(next?.truncated === true); }; apply(state.value()); this.stopTree = state.on('updated', apply); diff --git a/app/src/pages/forms-field-detail.ts b/app/src/pages/forms-field-detail.ts index 57cec9e..35e0687 100644 --- a/app/src/pages/forms-field-detail.ts +++ b/app/src/pages/forms-field-detail.ts @@ -1,4 +1,17 @@ -import { Component, computed, effect, input, linkedSignal, signal, untracked } from '@angular/core'; +import { + Component, + ElementRef, + afterRenderEffect, + computed, + effect, + inject, + input, + linkedSignal, + output, + signal, + untracked, + viewChild, +} from '@angular/core'; import type { DevframeRpcClient } from 'devframe/client'; import { FORMS_STYLES, @@ -13,13 +26,31 @@ import { actionAllowed, actionBlockedMessage } from '../devtools-config'; @Component({ selector: 'app-forms-field-detail', + host: { role: 'region', 'aria-labelledby': 'forms-field-heading' }, template: `
Field -

{{ node().path || '(form)' }}

+

{{ node().path || '(form)' }}

{{ node().type }} +
- 
{{ text() || 'Loading…' }}
+ @if (failed()) { + + } @else { + 
{{
+        text() ?? 'Loading…'
+      }}
+ } @if (node().type === 'control' && !node().redacted) {
@@ -96,6 +127,7 @@ import { actionAllowed, actionBlockedMessage } from '../devtools-config'; flex-basis: 100%; } h3 { + flex: 1 1 0; min-width: 0; margin: 0; color: var(--text-strong); @@ -104,6 +136,27 @@ import { actionAllowed, actionBlockedMessage } from '../devtools-config'; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; + border-radius: 4px; + } + h3:focus { + outline: none; + } + h3:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; + } + .close { + margin-left: auto; + } + .failed { + display: flex; + flex-wrap: wrap; + gap: 8px 12px; + align-items: center; + } + .failed p { + margin: 0; + font-size: 12.5px; } .editor { display: flex; @@ -133,11 +186,19 @@ export class FormsFieldDetail { node = input.required(); version = input(0); rpc = input(null); + readonly closed = output(); readonly canWrite = computed(() => actionAllowed(this.rpc(), 'forms')); protected readonly writesOff = actionBlockedMessage('forms'); - readonly text = signal(''); private readonly target = computed(() => `${this.form().id}|${this.node().path}`); + readonly text = linkedSignal({ + source: this.target, + computation: () => null, + }); + readonly failed = linkedSignal({ source: this.target, computation: () => false }); + private readonly attempt = signal(0); + private readonly heading = viewChild.required>('heading'); + private readonly host = inject>(ElementRef); readonly draft = linkedSignal({ source: this.target, computation: () => '' }); readonly message = linkedSignal({ source: this.target, computation: () => '' }); @@ -146,14 +207,33 @@ export class FormsFieldDetail { const form = this.form().id; const path = this.node().path; this.version(); + this.attempt(); const client = this.rpc(); untracked(() => this.load(client, form, path)); }); + afterRenderEffect(() => { + this.target(); + const heading = untracked(this.heading).nativeElement; + this.host.nativeElement.scrollIntoView?.({ block: 'nearest' }); + heading.focus({ preventScroll: true }); + }); } private async load(client: DevframeRpcClient | null, form: string, path: string) { + if (!client) return; const text = await formsCall(client, 'forms-explain', { kind: 'field', form, path }); - if (this.form().id === form && this.node().path === path) this.text.set(plain(text)); + if (this.form().id !== form || this.node().path !== path) return; + if (text === null) { + this.failed.set(true); + return; + } + this.failed.set(false); + this.text.set(plain(text)); + } + + retry() { + this.failed.set(false); + this.attempt.update((n) => n + 1); } async act(action: string) { diff --git a/app/src/pages/forms-inspector.ts b/app/src/pages/forms-inspector.ts index 2353b7a..f2d0ca4 100644 --- a/app/src/pages/forms-inspector.ts +++ b/app/src/pages/forms-inspector.ts @@ -1,6 +1,7 @@ import { Component, DestroyRef, + ElementRef, computed, effect, inject, @@ -12,7 +13,8 @@ import { import { JsonPipe } from '@angular/common'; import type { DevframeRpcClient } from 'devframe/client'; import { hostPageId } from '../page-id'; -import { actionAllowed, actionBlockedMessage } from '../devtools-config'; +import { actionAllowed, actionBlockedMessage, panelConfig } from '../devtools-config'; +import { LimitNote } from '../ui/limit-note'; import { FormsFieldDetail } from './forms-field-detail'; import { FormsLint, FormsSubmit } from './forms-report'; import { FormsTimeline } from './forms-timeline'; @@ -66,6 +68,7 @@ interface FormsSnapshot { forms?: CollectedForm[]; events?: FormEvent[]; instrumented?: string[]; + dropped?: Record; } interface FieldRow { @@ -84,7 +87,7 @@ function countFields(node: FormFieldNode): number { @Component({ selector: 'app-forms-inspector', - imports: [JsonPipe, FormsFieldDetail, FormsTimeline, FormsSubmit, FormsLint], + imports: [JsonPipe, FormsFieldDetail, FormsTimeline, FormsSubmit, FormsLint, LimitNote], template: ` @if (!rpc()) {
@@ -359,13 +362,13 @@ function countFields(node: FormFieldNode): number { type="button" class="field" [attr.aria-label]=" - 'Highlight ' + (row.node.path || 'the form') + ' on the page' + 'Show details for ' + (row.node.path || 'the form') " [attr.aria-pressed]="row.node.path === fieldPath()" [attr.title]="row.node.path || '(form)'" (focus)="highlight(form.id, row.node.path)" (blur)="highlight(null, '')" - (click)="fieldPath.set(row.node.path)" + (click)="toggleField(row.node.path)" > {{ row.node.key || '(form)' }} @@ -505,10 +508,17 @@ function countFields(node: FormFieldNode): number { [node]="node" [version]="version()" [rpc]="rpc()" + (closed)="closeField()" /> } } @case ('timeline') { + void) | null = null; private readonly destroyRef = inject(DestroyRef); + private readonly host = inject>(ElementRef); readonly counts = computed( () => @@ -1310,6 +1321,13 @@ export class FormsInspector { return find(form.root); }); + readonly dropped = signal>({}); + readonly droppedEvents = computed(() => { + const id = this.selected()?.id; + return id ? (this.dropped()[pageOf(id)] ?? 0) : 0; + }); + readonly maxEvents = computed(() => panelConfig(this.rpc()).limits.formTimeline); + readonly selectedEvents = computed(() => { const id = this.selected()?.id; return this.events() @@ -1347,6 +1365,7 @@ export class FormsInspector { this.forms.set(snapshot?.forms ?? []); this.events.set(snapshot?.events ?? []); this.instrumented.set(snapshot?.instrumented ?? []); + this.dropped.set(snapshot?.dropped ?? {}); this.version.update((v) => v + 1); }; apply(state.value()); @@ -1401,6 +1420,19 @@ export class FormsInspector { this.armed.set(null); } + toggleField(path: string) { + this.fieldPath.update((current) => (current === path ? null : path)); + } + + closeField() { + const host = this.host.nativeElement; + const row = + host.querySelector('button.field[aria-pressed="true"]') ?? + host.querySelector('.table-scroll'); + this.fieldPath.set(null); + row?.focus(); + } + toggleChip(chip: Chip) { this.active.update((set) => { const next = new Set(set); diff --git a/app/src/pages/forms-report.ts b/app/src/pages/forms-report.ts index ccb7591..5686a57 100644 --- a/app/src/pages/forms-report.ts +++ b/app/src/pages/forms-report.ts @@ -1,22 +1,30 @@ -import { Component, effect, input, signal, untracked } from '@angular/core'; +import { Component, effect, input, linkedSignal, signal, untracked } from '@angular/core'; import type { DevframeRpcClient } from 'devframe/client'; import { FORMS_STYLES, formsCall, plain, type FormLintFinding } from './forms-types'; @Component({ selector: 'app-forms-submit', template: ` -
-

Submit

- 
{{
-        submit() || 'Loading…'
-      }}
-
-
-

Payload

- 
{{
-        payload() || 'Loading…'
-      }}
-
+ @if (failed()) { + + } @else { +
+

Submit

+ 
{{
+          submit() ?? 'Loading…'
+        }}
+
+
+

Payload

+ 
{{
+          payload() ?? 'Loading…'
+        }}
+
+ }
{{ message() }} @@ -52,27 +60,47 @@ export class FormsSubmit { version = input(0); rpc = input(null); - readonly submit = signal(''); - readonly payload = signal(''); + readonly submit = linkedSignal({ + source: this.formId, + computation: () => null, + }); + readonly payload = linkedSignal({ + source: this.formId, + computation: () => null, + }); + readonly failed = linkedSignal({ source: this.formId, computation: () => false }); readonly message = signal(''); + private readonly attempt = signal(0); constructor() { effect(() => { const form = this.formId(); this.version(); + this.attempt(); const client = this.rpc(); + if (!client) return; untracked(async () => { const [submit, payload] = await Promise.all([ formsCall(client, 'forms-explain', { kind: 'submit', form }), formsCall(client, 'forms-explain', { kind: 'payload', form }), ]); if (this.formId() !== form) return; + if (submit === null || payload === null) { + this.failed.set(true); + return; + } + this.failed.set(false); this.submit.set(plain(submit)); this.payload.set(plain(payload)); }); }); } + retry() { + this.failed.set(false); + this.attempt.update((n) => n + 1); + } + async copyFixture() { const text = await formsCall(this.rpc(), 'forms-explain', { kind: 'fixture', @@ -95,7 +123,13 @@ export class FormsSubmit { @Component({ selector: 'app-forms-lint', template: ` - @if (findings() === null) { + @if (failed()) { + + } @else if (findings() === null) {

Checking the form for problems…

@@ -254,17 +288,31 @@ export class FormsLint { version = input(0); rpc = input(null); - readonly findings = signal(null); + readonly findings = linkedSignal({ + source: this.formId, + computation: () => null, + }); + readonly failed = linkedSignal({ source: this.formId, computation: () => false }); + private readonly attempt = signal(0); constructor() { effect(() => { const form = this.formId(); this.version(); + this.attempt(); const client = this.rpc(); + if (!client) return; untracked(async () => { const found = await formsCall(client, 'forms-lint', { form }); - if (this.formId() === form) this.findings.set(found ?? []); + if (this.formId() !== form) return; + this.failed.set(found === null); + if (found) this.findings.set(found); }); }); } + + retry() { + this.failed.set(false); + this.attempt.update((n) => n + 1); + } } diff --git a/app/src/pages/network-inspector.ts b/app/src/pages/network-inspector.ts index 7e35d61..a5f53ee 100644 --- a/app/src/pages/network-inspector.ts +++ b/app/src/pages/network-inspector.ts @@ -1,6 +1,9 @@ import { Component, DestroyRef, + ElementRef, + Injector, + afterNextRender, computed, effect, inject, @@ -12,7 +15,8 @@ import { JsonPipe } from '@angular/common'; import type { DevframeRpcClient } from 'devframe/client'; import { hostPageId } from '../page-id'; import { rpcCall as call } from '../rpc'; -import { actionAllowed, actionBlockedMessage } from '../devtools-config'; +import { actionAllowed, actionBlockedMessage, panelConfig } from '../devtools-config'; +import { LimitNote } from '../ui/limit-note'; import { Select, type SelectOption } from '../ui/select'; type HttpSide = 'client' | 'server'; @@ -37,7 +41,11 @@ interface HttpCall { side: HttpSide; cacheHit: boolean; faulted: boolean; + mocked?: boolean; + delayMs?: number; + cancelled?: boolean; ruleId?: string; + rulePattern?: string; pageUrl?: string; at: number; error?: string; @@ -48,6 +56,7 @@ interface PayloadEntry { key: string; http?: { url?: string; status?: number; statusText?: string; responseType?: string }; source?: 'http' | 'analog' | 'hydration'; + fn?: { id: string; name?: string; file?: string }; size: number; value: unknown; } @@ -71,20 +80,28 @@ interface HydrationStats { warningsCaptured?: boolean; } +interface HttpPayload { + found: boolean; + size: number; + entries: PayloadEntry[]; + error?: string; +} + interface HttpPage { pageId: string; url: string; initialUrl?: string; title: string; - payload: { found: boolean; size: number; entries: PayloadEntry[]; error?: string }; hydration: HydrationStats | null; calls: HttpCall[]; + dropped?: number; firstSeenAt?: number; reportedAt: number; } interface HttpState { serverCalls: HttpCall[]; + serverDropped?: number; pages: HttpPage[]; rules: HttpRule[]; } @@ -99,17 +116,19 @@ interface RuleDraft { } const EMPTY_DRAFT: RuleDraft = { - pattern: '/api/products', + pattern: '', method: '', target: 'both', - status: '500', + status: '', delayMs: '', body: '', }; +const MAX_RULES = 50; + @Component({ selector: 'app-network-inspector', - imports: [JsonPipe, Select], + imports: [JsonPipe, LimitNote, Select], template: ` @if (loading()) {
@@ -152,6 +171,12 @@ const EMPTY_DRAFT: RuleDraft = {

HTTP timeline ({{ timeline().length }})

+ @if (timeline().length) {
@@ -170,7 +195,7 @@ const EMPTY_DRAFT: RuleDraft = { @for (entry of timeline(); track entry.side + entry.id) { @@ -226,23 +263,34 @@ const EMPTY_DRAFT: RuleDraft = { } @if (selectedCall(); as detail) { -
+
-

Response preview

- +

Response preview

+

{{ detail.method }} {{ detail.status || 'ERR' }}{{ statusLabel(detail) }} {{ detail.url }}

- 
{{
+            @if (rulePatternOf(detail); as pattern) {
+              

+                Matched rule {{ pattern }}
+              

+            }
+            
{{
               detail.error ?? detail.preview ?? '(no body)'
             }}
@@ -258,12 +306,13 @@ const EMPTY_DRAFT: RuleDraft = {
@@ -294,8 +343,11 @@ const EMPTY_DRAFT: RuleDraft = { inputmode="numeric" min="100" max="599" + placeholder="e.g. 500" [value]="draft().status" (input)="patch('status', $event)" + [attr.aria-invalid]="statusError() ? 'true' : null" + aria-describedby="rule-hint" />
{{ @@ -183,8 +208,9 @@ const EMPTY_DRAFT: RuleDraft = { type="button" class="link" [title]="entry.url" + [attr.data-call-id]="entry.id" [attr.aria-pressed]="selectedCall()?.id === entry.id" - (click)="selectedCallId.set(entry.id)" + [attr.aria-controls]="selectedCall() ? 'call-preview' : null" > {{ entry.url }} @@ -194,11 +220,11 @@ const EMPTY_DRAFT: RuleDraft = { - {{ entry.status || 'ERR' }} + {{ statusLabel(entry) }} {{ entry.durationMs }} ms @@ -206,9 +232,20 @@ const EMPTY_DRAFT: RuleDraft = { @if (entry.cacheHit) { transfer cache } + @if (entry.delayMs) { + delayed {{ entry.delayMs }} ms + } + @if (entry.mocked) { + mocked + } @if (entry.faulted) { faulted } + @if (rulePatternOf(entry); as pattern) { + rule {{ pattern }} + }
diff --git a/app/src/pages/route-lint.ts b/app/src/pages/route-lint.ts index 96e657f..259c9b2 100644 --- a/app/src/pages/route-lint.ts +++ b/app/src/pages/route-lint.ts @@ -1,19 +1,25 @@ import { Component, computed, effect, input, signal, untracked } from '@angular/core'; import type { DevframeRpcClient } from 'devframe/client'; -import { SHARED_STYLES, routerCall, type LintFinding, type RouterPage } from './router-types'; +import { + SHARED_STYLES, + routerCall, + type LintFinding, + type LintResult, + type RouterPage, +} from './router-types'; @Component({ selector: 'app-route-lint', template: `
- Checks the live config, links and recent navigations. Lazy routes that have not loaded are skipped. - @if (!loading() && findings().length) { + @if (result()?.checked && findings().length) { @if (counts().error) { {{ counts().error }} error(s) @@ -27,10 +33,35 @@ import { SHARED_STYLES, routerCall, type LintFinding, type RouterPage } from './ }
- @if (loading()) { + @if (failed()) { + + } @else if (!result()) {

Checking…

+ } @else if (notChecked(); as reason) { +
+

No checks ran.

+

+ @switch (reason) { + @case ('events-only') { + This page runs in events-only mode: it has no debug utils (a production build or an + unusual setup), so it cannot report its route config. + } + @case ('no-config') { + The page has not reported its route config yet. It appears after the app finishes + bootstrapping. + } + @default { + No page with a router is connected. + } + } +

+
} @else if (findings().length) { -
    +
      @for (finding of findings(); track $index) {
    • @@ -195,16 +226,29 @@ export class RouteLint { page = input.required(); rpc = input(null); - readonly findings = signal([]); - readonly loading = signal(false); + readonly result = signal(null); + readonly failed = signal(false); + readonly checking = signal(false); + readonly findings = computed(() => { + const result = this.result(); + return result?.checked ? result.findings : []; + }); + readonly notChecked = computed(() => { + const result = this.result(); + return result && !result.checked ? result.reason : null; + }); readonly counts = computed(() => { const counts = { error: 0, warning: 0, info: 0 }; for (const finding of this.findings()) counts[finding.severity]++; return counts; }); - private readonly key = computed( - () => `${this.page().pageId}:${this.page().generation}:${this.page().navigations.length}`, - ); + private readonly key = computed(() => { + const page = this.page(); + const last = page.navigations[page.navigations.length - 1]; + return `${page.pageId}:${page.generation}:${last?.id}:${last?.outcome}`; + }); + private seq = 0; + private checkedPage: string | null = null; constructor() { effect(() => { @@ -218,10 +262,17 @@ export class RouteLint { } async run() { - this.loading.set(true); - this.findings.set( - (await routerCall(this.rpc(), 'router-lint', this.page().pageId)) ?? [], - ); - this.loading.set(false); + const seq = ++this.seq; + const pageId = this.page().pageId; + if (pageId !== this.checkedPage) this.result.set(null); + this.checking.set(true); + const result = await routerCall(this.rpc(), 'router-lint', pageId); + if (seq !== this.seq) return; + this.checking.set(false); + this.failed.set(!result); + if (result) { + this.result.set(result); + this.checkedPage = pageId; + } } } diff --git a/app/src/pages/route-timeline.ts b/app/src/pages/route-timeline.ts index ed39e21..4bcf3ff 100644 --- a/app/src/pages/route-timeline.ts +++ b/app/src/pages/route-timeline.ts @@ -1,6 +1,7 @@ import { Component, computed, input, signal } from '@angular/core'; import type { DevframeRpcClient } from 'devframe/client'; -import { actionAllowed, actionBlockedMessage } from '../devtools-config'; +import { actionAllowed, actionBlockedMessage, panelConfig } from '../devtools-config'; +import { LimitNote } from '../ui/limit-note'; import { time } from '../format'; import { SHARED_STYLES, @@ -23,6 +24,7 @@ const PHASE_COLORS: Record = { @Component({ selector: 'app-route-timeline', + imports: [LimitNote], template: `
      = { @if (!navigationAllowed()) {

      {{ navigationOff }}

      } + @if (loops().length) {

      @@ -553,6 +561,7 @@ const PHASE_COLORS: Record = { export class RouteTimeline { page = input.required(); rpc = input(null); + readonly maxNavigations = computed(() => panelConfig(this.rpc()).limits.navigations); readonly navigationAllowed = computed(() => actionAllowed(this.rpc(), 'router')); protected readonly navigationOff = actionBlockedMessage('router'); diff --git a/app/src/pages/route-tree.ts b/app/src/pages/route-tree.ts index dc82ca4..210095d 100644 --- a/app/src/pages/route-tree.ts +++ b/app/src/pages/route-tree.ts @@ -458,7 +458,9 @@ export class RouteTree { this.message.set( result['matched'] ? `The app recognized ${url} and its canMatch guards passed. The probe stopped before canActivate guards and resolvers, so those did not run. See the probe entry in Navigations.` - : `The app could not recognize ${url}: ${String(result['reason'] ?? '')}`, + : typeof result['redirectedTo'] === 'string' + ? `A canMatch guard or the navigation error handler redirected ${url} to ${result['redirectedTo']}. The probe stopped that navigation before it rendered anything.` + : `The app could not recognize ${url}: ${String(result['reason'] ?? '')}`, ); } diff --git a/app/src/pages/router-types.ts b/app/src/pages/router-types.ts index 9237166..c77991c 100644 --- a/app/src/pages/router-types.ts +++ b/app/src/pages/router-types.ts @@ -173,6 +173,7 @@ export interface RouterPage { pending?: { id: number; url: string }; } | null; navigations: NavigationRecord[]; + dropped?: number; generation?: number; config?: RouteNode[]; configTruncated?: number; @@ -194,6 +195,10 @@ export interface LintFinding { angular: string; } +export type LintResult = + | { checked: true; findings: LintFinding[] } + | { checked: false; reason: 'no-page' | 'events-only' | 'no-config' }; + export const routerCall = rpcTry; export function routerAction( diff --git a/app/src/pages/signal-inspector.ts b/app/src/pages/signal-inspector.ts index 2722414..5c448d9 100644 --- a/app/src/pages/signal-inspector.ts +++ b/app/src/pages/signal-inspector.ts @@ -1,5 +1,5 @@ import { Component, DestroyRef, computed, effect, inject, input, signal } from '@angular/core'; -import { DatePipe, JsonPipe } from '@angular/common'; +import { DatePipe, JsonPipe, NgTemplateOutlet } from '@angular/common'; import type { DevframeRpcClient } from 'devframe/client'; import { hostPageId } from '../page-id'; import { Select, type SelectOption } from '../ui/select'; @@ -10,6 +10,7 @@ interface SignalNode { label?: string; epoch: number; value?: unknown; + changes?: number; } interface SignalEdge { @@ -25,11 +26,36 @@ interface SignalChange { missed?: number; } +interface SignalResource { + id: string; + name: string; + named: boolean; + status?: string; + isLoading?: boolean; + params?: unknown; + value?: unknown; + error?: unknown; + statusCode?: number; + epoch: number; + changes?: number; + nodeIds: string[]; +} + +interface GraphInjector { + id: string; + name: string; +} + interface SignalGraph { nodes: SignalNode[]; edges: SignalEdge[]; componentSelector?: string; component?: { id: string; name: string; tag: string; path: string }; + injector?: GraphInjector; + environments?: GraphInjector[]; + resources?: SignalResource[]; + nodeCount?: number; + unsupported?: boolean; source?: 'selected' | 'routed' | 'root'; pageId?: string; history?: Record; @@ -43,6 +69,8 @@ interface LiveNode { } const FOLLOW = 'follow'; +const ENV = 'env:'; +const MAX_HISTORY = 50; const SOURCE_NOTES: Record, string> = { selected: 'picked', @@ -56,6 +84,14 @@ const SOURCE_LABELS: Record = { initial: 'initial', }; +const RESOURCE_STATUS_TONES: Record = { + resolved: 'ok', + local: 'ok', + loading: 'warn', + reloading: 'warn', + error: 'danger', +}; + interface SourceSignal { name: string; kind: string; @@ -89,7 +125,7 @@ const KIND_COLORS: Record = { @Component({ selector: 'app-signal-inspector', - imports: [DatePipe, JsonPipe, Select], + imports: [DatePipe, JsonPipe, NgTemplateOutlet, Select], template: `
      = { /> @if (componentOptions().length) {
      - Component + Graph of = { {{ sourceNote(graph()!.source!) }} }

      - @if (picked() && graph()!.source !== 'selected') { -

      - The picked component is gone or has no signal graph, so this shows another one. -

      - } + } @else if (graph()?.injector; as injector) { +

      + {{ injectorLabel(injector) }} + environment injector +

      + } + @if (graph() && picked() && graph()!.source !== 'selected') { +

      + The picked component or injector is gone or has no signal graph, so this shows another one. +

      }

      - @if (graph()) { + @if (graph()?.injector) { + The effects registered on this injector and the signals they read. A signal that no effect + reads is not part of the graph. Pick a kind to filter. + } @else if (graph()) { The live signal graph of one component. Only signals that its template or an effect has read appear here; a signal nothing has read yet is not part of the graph. Pick a kind to filter. } @else { Every signal, computed and effect found in your source. Pick a kind to filter. }

      + @if (unsupported()) { +

      + The live signal graph needs Angular 20.1 or later. This list comes from a source scan. +

      + } + @if (graph()?.nodeCount; as total) { +

      + Showing {{ graph()!.nodes.length }} of {{ total }} signals. The rest and their edges are + left out. +

      + } @if (kindCounts().length) {
      } @@ -211,7 +266,158 @@ const KIND_COLORS: Record = {
      } - @if (graph()) { + + @if (selectedHistory().length) { +

      {{ label }}

      +

      {{ historySummary(id) }}

      +
        + @for (change of selectedHistory(); track change.epoch) { +
      1. + + + {{ + sourceLabel(change.source) + }} + epoch {{ change.epoch }} + @if (change.missed) { + {{ change.missed }} earlier not captured + } + + 
        {{ change.value | json }}
        +
        2. + } +
      + } +       + + @if (graph() && filteredResources().length) { +

      Resources

      +
        + @for (res of filteredResources(); track res.id) { +
      • + + @if (selectedId() === res.id) { +
        +

        {{ res.name }}

        + @if (!res.named) { +

        + This resource has no name. Pass debugName to + resource() or httpResource() to name it here. +

        + } +
        +
        Status
        +
        {{ res.status ?? 'unknown' }}
        + @if (res.isLoading !== undefined) { +
        Loading
        +
        {{ res.isLoading ? 'yes' : 'no' }}
        + } + @if (res.statusCode !== undefined) { +
        HTTP status
        +
        {{ res.statusCode }}
        + } + @if (res.params !== undefined) { +
        Params
        +
        + 
        {{ res.params | json }}
        +
        + } + @if (res.value !== undefined) { +
        Value
        +
        + 
        {{ res.value | json }}
        +
        + } + @if (res.error !== undefined) { +
        Error
        +
        + 
        {{ res.error | json }}
        +
        + } +
        + + + @if (showInternals()) { +
          + @for (inner of internalsOf(res); track inner.id) { +
        • + {{ + inner.kind + }} + {{ inner.label ?? inner.id }} +
          • + } +
        + } +
        + } +
        • + } +
      + } + + @if (graph() && (visibleNodes().length || !filteredResources().length)) { +

      Signals

        @for (node of filteredNodes(); track node.id) {
      • @@ -221,7 +427,7 @@ const KIND_COLORS: Record = { [class.selected]="selectedId() === node.id" [attr.aria-expanded]="selectedId() === node.id" [attr.aria-controls]="'signal-detail-' + node.id" - (click)="selectNode(node)" + (click)="select(node.id)" > {{ @@ -252,7 +458,7 @@ const KIND_COLORS: Record = { @if (selectedId() === node.id && selectedNode()) {
        -

        {{ selectedNode()!.label ?? selectedNode()!.id }}

        +

        {{ selectedNode()!.label ?? selectedNode()!.id }}

        Kind
        {{ selectedNode()!.kind }}
        @@ -261,12 +467,17 @@ const KIND_COLORS: Record = { @if (selectedNode()!.value !== undefined) {
        Value
        - 
        {{ selectedNode()!.value | json }}
        + 
        {{ selectedNode()!.value | json }}
        }
        @if (getDependencies(selectedNode()!).length) { -

        Dependencies (producers)

        +

        Dependencies (producers)

          @for (dep of getDependencies(selectedNode()!); track dep.id) {
        • @@ -279,7 +490,7 @@ const KIND_COLORS: Record = {
        } @if (getConsumers(selectedNode()!).length) { -

        Consumers

        +

        Consumers

          @for (con of getConsumers(selectedNode()!); track con.id) {
        • @@ -291,45 +502,26 @@ const KIND_COLORS: Record = { }
        } - @if (selectedHistory().length) { -

        Value history

        -

        - {{ changeCount(selectedNode()!.id) }} changes recorded, newest first. -

        -
          - @for (change of selectedHistory(); track change.epoch) { -
        1. - - - {{ - sourceLabel(change.source) - }} - epoch {{ change.epoch }} - @if (change.missed) { - {{ change.missed }} earlier not captured - } - - 
          {{ change.value | json }}
          -
          2. - } -
        - } +
        }
        • } @empty {

      • - {{ graph()!.nodes.length ? 'No signals match.' : 'No signals in this component.' }} + {{ visibleNodes().length ? 'No signals match.' : 'No signals in this graph.' }}

        {{ - graph()!.nodes.length + visibleNodes().length ? 'Try a different name or kind.' : 'Select a component that reads signals, or interact with the page to create some.' }}

        - @if (graph()!.nodes.length) { + @if (visibleNodes().length) { }
        • @@ -772,7 +964,7 @@ const KIND_COLORS: Record = { box-shadow: var(--shadow); @include m.enter(0.25s); } - .detail-panel h2 { + .detail-title { margin: 0 0 16px; font-family: var(--font-mono); font-size: 14px; @@ -780,7 +972,7 @@ const KIND_COLORS: Record = { color: var(--accent); overflow-wrap: anywhere; } - .detail-panel h3 { + .detail-panel h4 { @include m.label; margin: 20px 0 8px; } @@ -792,6 +984,47 @@ const KIND_COLORS: Record = { border: 1px solid var(--border); border-radius: var(--radius-sm); } + .scroll-box:focus-visible { + @include m.focus-ring(-2px); + } + .list-heading { + @include m.label; + margin: 16px 0 8px; + } + .resources { + margin-bottom: 8px; + } + .status-tag { + flex: none; + font-size: 11px; + font-weight: 500; + line-height: 16px; + padding: 0 8px; + border: 1px solid; + border-radius: 99px; + } + .tone-ok { + @include m.soft(var(--ok)); + } + .tone-warn { + @include m.soft(var(--warn)); + } + .tone-danger { + @include m.soft(var(--danger)); + } + .tone-neutral { + color: var(--text-2); + border-color: var(--border-strong); + } + .detail-panel .hint { + margin: 0 0 12px; + } + .internals-toggle { + margin-top: 16px; + } + .detail-panel .internals-toggle + ul { + margin-top: 8px; + } .detail-panel ul { display: flex; flex-direction: column; @@ -914,13 +1147,23 @@ export class SignalInspector { readonly picked = signal(null); graph = signal(null); + readonly unsupported = signal(false); + readonly showInternals = signal(false); sourceSignals = signal([]); sourceLoaded = signal(false); filter = signal(''); kind = signal(null); + readonly resources = computed(() => this.graph()?.resources ?? []); + private readonly internalIds = computed( + () => new Set(this.resources().flatMap((r) => r.nodeIds)), + ); + readonly visibleNodes = computed(() => { + const internal = this.internalIds(); + return (this.graph()?.nodes ?? []).filter((n) => !internal.has(n.id)); + }); kindCounts = computed(() => { const kinds: string[] = this.graph() - ? (this.graph()?.nodes ?? []).map((n) => n.kind) + ? [...this.visibleNodes().map((n) => n.kind), ...this.resources().map(() => 'resource')] : this.sourceSignals().map((s) => s.kind); const counts = new Map(); for (const k of kinds) counts.set(k, (counts.get(k) ?? 0) + 1); @@ -938,12 +1181,19 @@ export class SignalInspector { readonly kindLegend = Object.entries(KIND_COLORS).map(([kind, color]) => ({ kind, color })); + filteredResources = computed(() => { + const q = this.filter().toLowerCase(); + const kind = this.kind(); + if (kind && kind !== 'resource') return []; + return this.resources().filter( + (r) => !q || r.name.toLowerCase().includes(q) || 'resource'.includes(q), + ); + }); + filteredNodes = computed(() => { - const g = this.graph(); - if (!g) return []; const q = this.filter().toLowerCase(); const kind = this.kind(); - const nodes = g.nodes.filter( + const nodes = this.visibleNodes().filter( (n) => (!kind || n.kind === kind) && (!q || (n.label ?? '').toLowerCase().includes(q) || n.kind.toLowerCase().includes(q)), @@ -989,12 +1239,18 @@ export class SignalInspector { } }; walk(roots); - if (!flat.length) return []; + const environments = this.graph()?.environments ?? []; + if (!flat.length && !environments.length) return []; const totals = new Map(); for (const node of flat) totals.set(node.name, (totals.get(node.name) ?? 0) + 1); const seen = new Map(); const options: SelectOption[] = [ { value: FOLLOW, label: 'Follow the routed component', hint: 'automatic' }, + ...environments.map((env) => ({ + value: ENV + env.id, + label: this.injectorLabel(env), + hint: 'injector', + })), ]; for (const node of flat) { const n = (seen.get(node.name) ?? 0) + 1; @@ -1033,8 +1289,11 @@ export class SignalInspector { if (this.destroyRef.destroyed) return; const apply = (value: unknown) => { const next = value as { graph?: SignalGraph | null; pages?: Record }; - const graph = (this.pageId ? next?.pages?.[this.pageId] : next?.graph) ?? null; - if (graph?.component?.id !== this.graph()?.component?.id) this.selectedId.set(null); + const reported = (this.pageId ? next?.pages?.[this.pageId] : next?.graph) ?? null; + this.unsupported.set(!!reported?.unsupported); + const graph = reported?.unsupported ? null : reported; + const owner = (g: SignalGraph | null) => g?.component?.id ?? g?.injector?.id; + if (owner(graph) !== owner(this.graph())) this.selectedId.set(null); this.graph.set(graph); }; apply(state.value()); @@ -1057,16 +1316,24 @@ export class SignalInspector { } pickComponent(value: string | null) { - const id = value && value !== FOLLOW ? value : null; - this.picked.set(id); + const picked = value && value !== FOLLOW ? value : null; + this.picked.set(picked); const client = this.rpc(); if (!client) return; + const pageId = this.targetPageId() ?? undefined; + const target = picked?.startsWith(ENV) + ? { pageId, env: picked.slice(ENV.length) } + : { pageId, id: picked }; void client .scope('ng-devtools') - .rpc.call('select-signal-target', { pageId: this.targetPageId() ?? undefined, id }) + .rpc.call('select-signal-target', target) .catch(() => {}); } + injectorLabel(injector: GraphInjector) { + return injector.name === 'Root' ? 'Root services' : injector.name; + } + sourceNote(source: NonNullable) { return SOURCE_NOTES[source]; } @@ -1088,16 +1355,39 @@ export class SignalInspector { this.kind.set(null); } - selectNode(node: SignalNode) { - this.selectedId.set(this.selectedId() === node.id ? null : node.id); + select(id: string) { + this.selectedId.set(this.selectedId() === id ? null : id); + this.showInternals.set(false); } - // The first entry is the value seen on connect, not a change. + // The page counts past the kept history; older pages only send the list. changeCount(id: string): number { - const list = this.graph()?.history?.[id] ?? []; + const g = this.graph(); + const counted = + g?.nodes.find((n) => n.id === id)?.changes ?? g?.resources?.find((r) => r.id === id)?.changes; + if (counted !== undefined) return counted; + const list = g?.history?.[id] ?? []; return list.reduce((n, c) => n + (c.source === 'initial' ? 0 : 1 + (c.missed ?? 0)), 0); } + historySummary(id: string): string { + const count = this.changeCount(id); + const kept = this.graph()?.history?.[id]?.length ?? 0; + if (!count) return 'No changes recorded yet. The entry below is the value seen first.'; + const changes = `${count} ${count === 1 ? 'change' : 'changes'} recorded`; + const shown = kept >= MAX_HISTORY && count >= kept ? `, showing the last ${kept}` : ''; + return `${changes}${shown}, newest first.`; + } + + statusTone(status: string) { + return RESOURCE_STATUS_TONES[status] ?? 'neutral'; + } + + internalsOf(resource: SignalResource): SignalNode[] { + const ids = new Set(resource.nodeIds); + return (this.graph()?.nodes ?? []).filter((n) => ids.has(n.id)); + } + sourceLabel(source: SignalChange['source']) { return SOURCE_LABELS[source]; } diff --git a/app/src/pages/store-inspector.ts b/app/src/pages/store-inspector.ts index 04272dd..2a49d0f 100644 --- a/app/src/pages/store-inspector.ts +++ b/app/src/pages/store-inspector.ts @@ -14,12 +14,14 @@ import type { DevframeRpcClient } from 'devframe/client'; import { time } from '../format'; import { hostPageId } from '../page-id'; import { rpcCall as call } from '../rpc'; -import { actionAllowed, actionBlockedMessage } from '../devtools-config'; +import { actionAllowed, actionBlockedMessage, panelConfig } from '../devtools-config'; +import { LimitNote } from '../ui/limit-note'; import { Select, type SelectOption } from '../ui/select'; import { pretty, short, type LiveStore, + type NgrxActionOrigin, type NgrxLogEntry, type NgrxPage, type NgrxState, @@ -47,6 +49,12 @@ const KIND_LABELS: Record = { store: '@ngrx/store', }; +const ORIGIN_TEXT: Record = { + dispatch: 'store.dispatch(action)', + effect: 'NgRx effect (Store.next)', + reactive: 'store.dispatch(() => action)', +}; + const CLASSIC_KINDS = new Set([ 'action', 'reducer', @@ -58,7 +66,7 @@ const CLASSIC_KINDS = new Set([ @Component({ selector: 'app-store-inspector', - imports: [Select], + imports: [LimitNote, Select], template: `
        {{ storeLog().length }}

      +
        @for (entry of storeLog(); track entry.seq) { @@ -270,8 +284,11 @@ const CLASSIC_KINDS = new Set([ > #{{ entry.seq }} {{ entry.type }} - {{ + + @if (entry.origin) { + {{ entry.origin }} + } + {{ entry.diff.length === 0 ? 'no change' : entry.diff.length + @@ -302,6 +319,10 @@ const CLASSIC_KINDS = new Set([
        Time
        {{ formatTime(selected.timestamp) }}
        + @if (selected.origin) { +
        Origin
        +
        {{ originText(selected.origin) }}
        + } @if (selected.action !== undefined) {
        Action
        @@ -343,7 +364,12 @@ const CLASSIC_KINDS = new Set([ @if (selected.restorable) { @if (confirmSeq() === selected.seq) { -
        +

        @if (selected.source === 'store') { Store DevTools jumps the app state to the state right after action @@ -364,7 +390,12 @@ const CLASSIC_KINDS = new Set([ > Restore -

        @@ -375,7 +406,8 @@ const CLASSIC_KINDS = new Set([ class="btn restore" [disabled]="!canRestore()" [attr.aria-describedby]="canRestore() ? null : 'store-writes-off'" - (click)="confirmSeq.set(selected.seq)" + (click)="askRestore(selected.seq)" + #restoreButton > Restore this state @@ -1168,11 +1200,15 @@ export class StoreInspector { readonly failed = signal(false); readonly selectedPageId = signal(null); private readonly hostPageId = hostPageId(); + readonly maxLog = computed(() => panelConfig(this.rpc()).limits.changeLog); readonly selectedStoreId = signal(null); readonly selectedSeq = signal(null); readonly confirmSeq = signal(null); readonly busy = signal(false); private readonly focusLatest = signal(false); + private readonly focusConfirm = signal<'cancel' | 'restore' | null>(null); + private readonly cancelButton = viewChild>('cancelButton'); + private readonly restoreButton = viewChild>('restoreButton'); private readonly stateTree = viewChild>('stateTree'); private readonly latestButton = viewChild>('latestButton'); readonly message = signal(''); @@ -1300,6 +1336,13 @@ export class StoreInspector { this.focusLatest.set(false); button.nativeElement.focus(); }); + effect(() => { + const target = this.focusConfirm(); + const button = target === 'cancel' ? this.cancelButton() : this.restoreButton(); + if (!target || !button) return; + this.focusConfirm.set(null); + button.nativeElement.focus(); + }); this.destroyRef.onDestroy(() => this.unsubscribe?.()); } @@ -1339,17 +1382,31 @@ export class StoreInspector { this.selectedStoreId.set(null); this.selectedSeq.set(null); this.confirmSeq.set(null); + this.message.set(''); } selectStore(id: string) { this.selectedStoreId.set(id); this.selectedSeq.set(null); this.confirmSeq.set(null); + this.message.set(''); } selectEntry(seq: number) { this.selectedSeq.set(this.selectedSeq() === seq ? null : seq); this.confirmSeq.set(null); + this.message.set(''); + } + + askRestore(seq: number) { + this.confirmSeq.set(seq); + this.focusConfirm.set('cancel'); + } + + cancelRestore(event?: Event) { + event?.preventDefault(); + this.confirmSeq.set(null); + this.focusConfirm.set('restore'); } async restore(seq: number, pauses: boolean) { @@ -1411,6 +1468,10 @@ export class StoreInspector { return KIND_LABELS[kind] ?? kind; } + originText(origin: NgrxActionOrigin) { + return ORIGIN_TEXT[origin] ?? origin; + } + opLabel(op: string) { return op === 'add' ? 'added' : op === 'remove' ? 'removed' : 'changed'; } diff --git a/app/src/pages/store-types.ts b/app/src/pages/store-types.ts index 61e3523..9c14850 100644 --- a/app/src/pages/store-types.ts +++ b/app/src/pages/store-types.ts @@ -46,6 +46,8 @@ export interface NgrxDiffEntry { after?: unknown; } +export type NgrxActionOrigin = 'dispatch' | 'effect' | 'reactive'; + export interface NgrxLogEntry { seq: number; source: 'signal-store' | 'store'; @@ -53,6 +55,7 @@ export interface NgrxLogEntry { type: string; args?: unknown[]; action?: unknown; + origin?: NgrxActionOrigin; timestamp: number; diff: NgrxDiffEntry[]; restorable: boolean; @@ -65,6 +68,7 @@ export interface NgrxPage { stores: NgrxSignalStoreInfo[]; classic: NgrxClassicStoreInfo | null; log: NgrxLogEntry[]; + dropped?: number; reportedAt: number; } diff --git a/app/src/tab-memory.ts b/app/src/tab-memory.ts new file mode 100644 index 0000000..6105efe --- /dev/null +++ b/app/src/tab-memory.ts @@ -0,0 +1,32 @@ +const TAB_KEY = 'ng-devtools-tab'; + +/** + * The tab to open on load. A `#tab=` deep link wins; without one, the last tab + * of this browser tab's session, since the extension and the popup reload the + * panel without a hash. `undefined` means the default tab. + */ +export function initialTab( + hash: string, + stored: string | null, + available: readonly T[], +): T | undefined { + const fromHash = new URLSearchParams(hash.replace(/^#/, '')).get('tab'); + const wanted = fromHash || stored; + return available.find((tab) => tab === wanted); +} + +export function storedTab(scope: string): string | null { + try { + return sessionStorage.getItem(`${TAB_KEY}:${scope}`); + } catch { + return null; + } +} + +export function storeTab(scope: string, tab: string) { + try { + sessionStorage.setItem(`${TAB_KEY}:${scope}`, tab); + } catch { + // blocked storage only loses the tab on the next reload + } +} diff --git a/app/src/test-setup.ts b/app/src/test-setup.ts new file mode 100644 index 0000000..291ce50 --- /dev/null +++ b/app/src/test-setup.ts @@ -0,0 +1,5 @@ +import '@angular/compiler'; +import { getTestBed } from '@angular/core/testing'; +import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing'; + +getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting()); diff --git a/app/src/ui/limit-note.ts b/app/src/ui/limit-note.ts new file mode 100644 index 0000000..0d32520 --- /dev/null +++ b/app/src/ui/limit-note.ts @@ -0,0 +1,54 @@ +import { Component, input } from '@angular/core'; +import type { NgDevtoolsLimit } from '@santoshyadavdev/ng-devtools/config'; + +export const LIMITS_DOCS_URL = + 'https://github.com/santoshyadavdev/angular-devtools/blob/main/apps/docs/src/content/getting-started/configuration.md#limits'; + +/** Says that a capped timeline dropped its oldest entries, and which limit to raise. */ +@Component({ + selector: 'app-limit-note', + template: ` + @if (dropped() > 0) { +

        + Showing the latest {{ max() }} {{ what() }}. {{ dropped() }} older + {{ dropped() === 1 ? 'entry was' : 'entries were' }} dropped. Raise + limits.{{ limit() }} to keep more. + About limits +

        + } + `, + styles: ` + @use 'mixins' as m; + + :host { + display: block; + } + .note { + margin: 0 0 12px; + padding: 8px 12px; + border: 1px solid var(--border); + border-radius: var(--radius-sm); + background: var(--surface); + color: var(--text-2); + line-height: 1.5; + } + code { + font-family: var(--font-mono); + color: var(--text); + } + a { + color: var(--accent); + border-radius: 2px; + } + a:focus-visible { + @include m.focus-ring; + } + `, +}) +export class LimitNote { + readonly dropped = input(0); + readonly max = input.required(); + readonly what = input.required(); + readonly limit = input.required(); + protected readonly docsUrl = LIMITS_DOCS_URL; +} diff --git a/app/src/ui/select.ts b/app/src/ui/select.ts index f94c728..c1ef744 100644 --- a/app/src/ui/select.ts +++ b/app/src/ui/select.ts @@ -371,13 +371,8 @@ export class Select { } private move(step: 1 | -1) { - const opts = this.options(); - let i = this.active(); - for (let n = 0; n < opts.length; n++) { - i = Math.min(Math.max(i + step, 0), opts.length - 1); - if (!opts[i].disabled) break; - } - this.setActive(i); + const next = this.firstEnabled(this.active() + step, step); + if (next >= 0) this.setActive(next); } private firstEnabled(from: number, step: 1 | -1) { diff --git a/app/tsconfig.json b/app/tsconfig.json index 6a24b6c..214c0da 100644 --- a/app/tsconfig.json +++ b/app/tsconfig.json @@ -15,7 +15,8 @@ "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, "strictInjectionParameters": true, - "strictInputAccessModifiers": true + "strictInputAccessModifiers": true, + "strictTemplates": true }, "include": ["./**/*.ts", "../packages/ng-devtools/src/config.ts"], "exclude": ["node_modules", "vite.config.ts", "vitest.config.ts"] diff --git a/app/vitest.config.ts b/app/vitest.config.ts index 70bd7b1..a56c67b 100644 --- a/app/vitest.config.ts +++ b/app/vitest.config.ts @@ -13,11 +13,13 @@ export default defineConfig({ angular({ tsconfig: join(import.meta.dirname, 'tsconfig.json'), inlineStylesExtension: 'scss', + jit: false, }), ], test: { environment: 'jsdom', include: ['src/**/*.test.ts'], + setupFiles: ['src/test-setup.ts'], execArgv: ['--no-experimental-webstorage'], }, }); diff --git a/apps/docs/src/content/agents/mcp-server.md b/apps/docs/src/content/agents/mcp-server.md index 2bceee9..f3eab2f 100644 --- a/apps/docs/src/content/agents/mcp-server.md +++ b/apps/docs/src/content/agents/mcp-server.md @@ -17,7 +17,7 @@ There are two ways to connect. Pick one based on the data your agent needs. - Your client starts ng-devtools mcp in the project folder. The server scans your source. No page ever connects to it. + Your client starts ng-devtools mcp for your project folder. The server scans your source. No page ever connects to it. Your client calls /__devframes/__mcp on the server that runs your app. Pages open in a browser report to it, so the live tools work. @@ -36,7 +36,7 @@ The package ships an `ng-devtools` binary. Its `mcp` command starts an MCP serve ### Add the stdio server to your client ```bash group="stdio" name="Claude Code" active -claude mcp add ng-devtools -- npx @santoshyadavdev/ng-devtools mcp +claude mcp add ng-devtools -- npx @santoshyadavdev/ng-devtools mcp --root /path/to/your-app ``` ```json group="stdio" name="Cursor" @@ -45,7 +45,7 @@ claude mcp add ng-devtools -- npx @santoshyadavdev/ng-devtools mcp "mcpServers": { "ng-devtools": { "command": "npx", - "args": ["@santoshyadavdev/ng-devtools", "mcp"] + "args": ["@santoshyadavdev/ng-devtools", "mcp", "--root", "${workspaceFolder}"] } } } @@ -58,15 +58,21 @@ claude mcp add ng-devtools -- npx @santoshyadavdev/ng-devtools mcp "ng-devtools": { "type": "stdio", "command": "npx", - "args": ["@santoshyadavdev/ng-devtools", "mcp"] + "args": ["@santoshyadavdev/ng-devtools", "mcp", "--root", "${workspaceFolder}"] } } } ``` -### Start it in the project folder +### Point it at the project folder -The server scans the folder it starts in. Start it from the root of your Angular or Analog project, next to `package.json` and `angular.json`. +The server scans the folder it starts in, and your client picks that folder. Some clients start servers in `/`. Pass `--root` with the root of your Angular or Analog project, the folder with `package.json` and `angular.json`, or set `NG_DEVTOOLS_ROOT`. Cursor and VS Code expand `${workspaceFolder}` to the open folder. + +If the folder has no `angular.json` and no `package.json` that depends on `@angular/core`, the server prints a warning on stderr. Your client shows it in the MCP server log. + +### Configure the stdio server + +The stdio server reads the [devtools options](../getting-started/configuration.md) from `ng-devtools.config.json` in the project folder, from the file you pass with `--config`, or from `NG_DEVTOOLS_CONFIG`. `--read-only` sets `agent.readOnly`. See [Flags for every command](../getting-started/cli.md#flags-for-every-command). Inside this repository, pnpm devtools:mcp runs the same server against the demo app. @@ -74,9 +80,9 @@ The server scans the folder it starts in. Start it from the root of your Angular ### What stdio can answer -Over stdio, the source scan tools work: `get-routes`, `get-components`, `get-signals`, `get-providers`, `get-ngrx-store`, `get-pipes` and `build-meta`. So do the tools that read files only, like `lint-pipes`, `analog-routes` and `analog-lint`. +Over stdio, the source scan tools work: `get-routes`, `get-components`, `get-signals`, `get-providers`, `get-ngrx-store`, `get-pipes` and `build-meta`. So do the tools that read files only, like `lint-pipes`, `explain-pipe`, `explain-render-mode`, `analog-routes` and `analog-lint`. -Tools that need the running app reply that no page is attached. Resources stay empty. Use HTTP for those. +The stdio server leaves out the tools and resources that need the running app, such as `highlight`, `navigate`, `form-action`, `fill-form`, the forms and router tools, `analog-current-page`, `analog-server-calls` and `analog-call-api`. Use HTTP for those. ## Connect over HTTP @@ -216,7 +222,7 @@ Your client can ask you before it runs them. To drop them from the server, set ` ### Pages and tabs -Each browser tab reports on its own and gets a page id. Tools that read live data use the most recent page by default. Pass `page` (or `pageId` for `inspect-providers`) to pick another tab. The server drops pages that stop reporting after a short time. +Each browser tab reports on its own and gets a page id. `list-pages` lists them. Tools that read live data use the most recent page by default. Pass `page` to pick another tab (`inspect-providers`, `highlight`, `inspect-component` and `defer-blocks` also accept `pageId`). An id that no tab reports gets an answer that lists the tabs that do, instead of data from another tab. The server drops pages that stop reporting after a short time. ## Where to next diff --git a/apps/docs/src/content/agents/resources.md b/apps/docs/src/content/agents/resources.md index e1ada4e..7b9b998 100644 --- a/apps/docs/src/content/agents/resources.md +++ b/apps/docs/src/content/agents/resources.md @@ -44,21 +44,21 @@ Each one returns JSON. ### component-tree -The component instances of each page, under `pages[pageId].roots`. Each node has an instance id, class name, host tag and the directives on its host. `detail` holds the live inputs, outputs, listeners, change detection, encapsulation and injected dependencies of the instance selected in the panel. `nodes` repeats the roots of the most recent page. +The component instances of each page, under `pages[pageId].roots`. Each node has an instance id, class name, host tag and the directives on its host. `detail` holds the live inputs, outputs, other properties, listeners, change detection, encapsulation and injected dependencies of the selected instance. The selection is the one made in the panel, by clicking in the page with **Pick component on page**, or with the `highlight` or `inspect-component` tool. `deferBlocks` lists the page's `@defer` blocks, and is missing when the page has no util to read them. `nodes` repeats the roots of the most recent page. -The instance ids here are what `highlight` accepts. +The instance ids here are what `highlight` and `inspect-component` accept. ### signal-graph -The signal graph of each page, under `pages[pageId]`. `graph` is the latest one. It holds the nodes (`signal`, `computed`, `effect`, `linkedSignal`), producer to consumer edges, the component it belongs to, and recent value history per node. Only signals a template or an effect has read appear. +The signal graph of each page, under `pages[pageId]`. `graph` is the latest one. It holds the nodes (`signal`, `computed`, `effect`, `linkedSignal`), producer to consumer edges, the component or injector it belongs to, the resources folded into one entry each, and recent value history per node and status history per resource. Only signals a template or an effect has read appear. ### injector-tree -The injector hierarchy the page last reported, with the providers at each level. +The injector hierarchy the page last reported, with the providers at each level. Each page is under `pages[pageId]`. `roots` and `environment` are the latest. `truncated` is `true` when the page has more than 2000 element injectors and reported only the first 2000. ### ngrx-store -Each `@ngrx/signals` store on the page: state, computed values, methods, and the component fields that reference it. It also holds the `@ngrx/store` state and the change log, with a state diff per entry. The log records method calls, `patchState` writes, dispatched actions and restores. `classic.paused` is `true` while a restore holds `@ngrx/store` on a past state. +Each `@ngrx/signals` store on the page: state, computed values, methods, and the component fields that reference it. It also holds the `@ngrx/store` state and the change log, with a state diff per entry. The log records method calls, `patchState` writes, dispatched actions and restores. An `@ngrx/store` action has an `origin`: `dispatch`, `effect` or `reactive`. `classic.paused` is `true` while a restore holds `@ngrx/store` on a past state. `dropped` counts the older log entries removed at [`limits.changeLog`](../getting-started/configuration.md#limits). ### forms @@ -80,12 +80,14 @@ The devtools keep their live data in shared-state keys. Every key is also listed This table covers the data that has no resource of its own. -| Key | Content | -| ------------------------ | ------------------------------------------------------------------------------ | -| `ng-devtools:http` | The SSR & HTTP timeline, fault rules, hydration data and TransferState payload | -| `ng-devtools:pipe-usage` | Live pipe instances and recorded calls | -| `ng-devtools:analog` | Analog page data and the server call log | -| `ng-devtools:routes` | Declared but not filled. Use `get-routes` or `list-routes` instead. | +| Key | Content | +| ------------------------------ | ------------------------------------------------------------------- | +| `ng-devtools:http` | The SSR & HTTP timeline, fault rules and hydration data | +| `ng-devtools:http-payloads` | The TransferState payload of each page, by page id | +| `ng-devtools:change-detection` | Change detection recordings, by page id | +| `ng-devtools:pipe-usage` | Live pipe instances and recorded calls | +| `ng-devtools:analog` | Analog page data and the server call log | +| `ng-devtools:routes` | Declared but not filled. Use `get-routes` or `list-routes` instead. | The list also includes the keys behind the six resources above (`ng-devtools:component-tree`, `ng-devtools:forms`, and so on). diff --git a/apps/docs/src/content/agents/tools.md b/apps/docs/src/content/agents/tools.md index f594c1a..63be861 100644 --- a/apps/docs/src/content/agents/tools.md +++ b/apps/docs/src/content/agents/tools.md @@ -4,7 +4,7 @@ description: Every agent tool the devtools expose, grouped by inspector, with wh --- - Forty-four tools, grouped by inspector. Each one answers a question you would otherwise answer by clicking through the panel. + Forty-eight tools, grouped by inspector. Each one answers a question you would otherwise answer by clicking through the panel. # Tools @@ -19,7 +19,7 @@ Tool ids use a colon, as `ng-devtools:get-routes`. MCP clients see them with an ### Source and live tools -Each tool reads from one of three places. +Each tool reads from one of three places. The stdio server registers only the tools that read your source, because no page reaches it. @@ -35,7 +35,13 @@ Each tool reads from one of three places. ### The page argument -Most page tools take an optional `page` argument to pick a browser tab. It defaults to the most recent one. `inspect-providers` calls it `pageId`. The tables below leave `page` out. +Most page tools take an optional `page` argument to pick a browser tab. It defaults to the most recent one. `form-action` and `fill-form` take the tab from the form id instead (the part after `@`, as in `Checkout.form@ab12`). `highlight` and `inspect-component` search every tab without it, newest first, and `defer-blocks` lists every tab. `inspect-providers`, `highlight`, `inspect-component` and `defer-blocks` also accept `pageId`. The tables below leave `page` out. + +If `page` names a tab that doesn't report that data, the tool answers `No page is reporting ...` and lists the tabs that do, newest first. It never falls back to another tab. Without `page`, a class name or tag resolves on the most recent tab that has it, and `highlight` names the other tabs where it also matches. + +### list-pages + +Lists the tabs that report to the server, newest first: page id, URL, seconds since the last report, and which inspectors report. Takes no arguments. Reads: page. Use it to find the id to pass as `page`. ### Action tools @@ -56,7 +62,7 @@ These seven tools take no arguments. They all read your source. | `get-routes` | Angular routes from your route files, with full URL path (parents and `loadChildren` prefixes included), kind (page, group, redirect or wildcard), guards, resolvers, and file and line. | | `get-components` | Components and directives from `@Component` and `@Directive` classes, with class name, selector, kind, inputs, outputs, change detection (components only), and file and line. | | `get-signals` | `signal()`, `computed()`, `linkedSignal()`, `effect()`, `toSignal()` and resource declarations (`resource`, `httpResource`, `rxResource`), plus signal inputs, models and queries. | -| `get-providers` | DI providers: `@Injectable` services, `inject()` calls and `providers` arrays, with token, file and where each one is provided. | +| `get-providers` | DI providers: `@Injectable` services, `inject()` calls, constructor parameters and `providers` arrays, with token, file and where each one is provided. | | `get-ngrx-store` | NgRx declarations: `@ngrx/store` actions, reducers, effects, selectors, features and store setup, and `@ngrx/signals` `signalStore` (with its members), `signalState` and `signalMethod`. | | `get-pipes` | Custom `@Pipe` classes, and built-in pipes from `@angular/common` in use in templates, with purity, standalone status, and where each is declared or used. | | `build-meta` | The project name, the Angular and TypeScript versions, SSR status, the Analog version in Analog apps, and a `builtAt` timestamp. | @@ -65,21 +71,65 @@ These seven tools take no arguments. They all read your source. ### highlight Action -Highlights a component in the page and makes it the target of `inspect-signals`. Reads: page. +Highlights a component in the page, scrolls it into view, selects it and makes it the target of `inspect-signals`. The `component-tree` resource then carries its live `detail`, and the Components tab selects it too. Reads: page. | Argument | Required | Value | | ---------- | -------- | ------------------------------------------------------------------------------------------------------------- | | `selector` | yes | An instance id from the `component-tree` resource (like `c12`), a class name, a host tag or any CSS selector. | +| `pageId` | no | Same as `page`. | + +An instance id targets that exact instance, for example the second card of a list. A class name or tag that matches several instances picks the first and lists the ids of all of them. A CSS selector highlights but doesn't change the selection. With `page`, a CSS selector goes to that tab only. + +### inspect-component + +The live detail of one component instance: inputs, outputs and whether a parent listens, other own properties (signals and resources unwrapped), DOM listeners, host directives, change detection, encapsulation, host path and injected services. It selects the instance on its page and waits up to 3 seconds for the page to report it. Reads: page. + +| Argument | Required | Value | +| ---------- | -------- | ---------------------------------------------------------------------------- | +| `selector` | yes | An instance id from the `component-tree` resource, a class name or host tag. | +| `pageId` | no | Same as `page`. | + +A class name or tag that matches several instances answers for the first and lists the ids of all of them. Secret-looking values are redacted. + +### defer-blocks + +The `@defer` blocks of each page: the component that holds each one, its state, its incremental hydration state, its triggers and whether it has `@loading`, `@placeholder` and `@error` blocks. A **Needs attention** list names blocks that failed to load and blocks still on their placeholder after 10 seconds. Reads: page. + +| Argument | Required | Value | +| -------- | -------- | --------------- | +| `pageId` | no | Same as `page`. | -An instance id targets that exact instance, for example the second card of a list. +Without a development build, the page has no util to read defer blocks, and the answer says so. + +### change-detection + +Change detection cycles recorded with Angular's profiler: the slowest components by self time, the most often checked components, and the latest cycles with their duration, component checks, sync passes and the output that ran before each one. Reads: page. Needs Angular 20 or later. + +| Argument | Required | Value | +| -------- | -------- | -------------------------------------------------------------------------------------------------------------- | +| `record` | no | `start` starts a fresh recording, `stop` stops it and keeps the cycles, `clear` empties it. Leave out to read. | +| `limit` | no | Rows per list. Default 10, at most 50. | + +Without `page`, it reads the page that is recording, and `record` goes to every connected page. Recording is off until the panel or this tool starts it. Call it with `record: "start"`, use the app, then call it again without `record`. When older cycles were dropped at [`limits.cdCycles`](../getting-started/configuration.md#limits), the answer says how many. ### inspect-signals -The signal graph the page reported: nodes (`signal`, `computed`, `linkedSignal`, `effect`), dependency edges, the component they belong to, and recent value history per node. Reads: page. +The signal graph the page reported: nodes (`signal`, `computed`, `linkedSignal`, `effect`), dependency edges, the component or injector they belong to, and recent value history per node. Reads: page. + +| Argument | Required | Value | +| ---------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- | +| `selector` | yes | Host tag, class name or instance id of the component, like `app-root`. Or `root`, or a route path like `/admin` or `Route: admin`. | + +The answer also holds: -| Argument | Required | Value | -| ---------- | -------- | ---------------------------------------------------------------------- | -| `selector` | yes | Host tag, class name or instance id of the component, like `app-root`. | +| Field | Value | +| -------------- | ----------------------------------------------------------------------------------------------------------------------------- | +| `resources` | One entry per `resource()`, `httpResource()` or `rxResource()`: `status`, `isLoading`, `params`, `value`, `error`, `nodeIds`. | +| `environments` | The root and route injectors the page can report, with `id` and `name`. | +| `changes` | On a node or resource, every change since the page first saw it. The history keeps the last 50. | +| `nodeCount` | Set when Angular reported more than the 400 nodes the page keeps. | + +With `root` or a route path, the tool switches the page's graph to the effects of that injector and waits up to 1.5 seconds for it. If no injector matches, the answer lists the ones the page knows. On Angular 20.0, the answer says the live graph needs Angular 20.1 or later. The page reports one graph: the component picked on the Signals page or with highlight, otherwise the deepest component in the primary router outlet. Call highlight first to switch the graph to another component. Only signals a template or an effect has read appear. @@ -87,12 +137,15 @@ The signal graph the page reported: nodes (`signal`, `computed`, `linkedSignal`, ### inspect-providers -The injector hierarchy a page reported, with the providers at each level. Element injectors list what each component injected and which injector supplied it. Environment injectors run from the platform down to the root and route injectors. Reads: page. +The injectors a page reported. Element injectors list what each component injected and which injector supplied it. Environment injectors run from the platform down to the root and route injectors. Reads: page. + +| Argument | Required | Value | +| ---------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | +| `selector` | no | A tag name, a component or directive class name, or an injector id. Returns only the matching element injectors, each with its lookup path resolved. | +| `token` | no | A token name, like `HttpClient`. Returns the injectors that provide it and the components that inject it. | +| `pageId` | no | Same as `page`. | -| Argument | Required | Value | -| ---------- | -------- | --------------------------------------------------------------- | -| `selector` | no | Only labels the answer. The page always reports the whole tree. | -| `pageId` | no | The tab to read. Defaults to the most recent. | +Without `selector` or `token`, the answer is the whole tree, cut off at 20,000 characters. When the page has more than 2000 element injectors, the answer says that it holds only the first 2000. ## Router @@ -140,6 +193,15 @@ Use `explain-navigation` for "why was I redirected". Pass `perf: true` for "why `action` is required. Only same-origin URLs that start with `/` are accepted. +`waitFor` sets when `navigate` answers: + +| Value | When the tool answers | +| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `navigation` | When the navigation ends. The default. | +| `stable` | When the navigation ends and the app has no pending tasks, such as HTTP requests or `httpResource` loads (the signal behind `ApplicationRef.whenStable()`). The result has `stable: true`, or `stable: false` with a note when 10 seconds pass first. | + +If a `canMatch` guard or the navigation error handler redirects a `probe`, the probe stops the redirected navigation before it matches or renders anything, and the result names the target in `redirectedTo`. + ## Forms All forms tools read the page. They cover Signal Forms, reactive forms and template-driven forms. @@ -174,7 +236,7 @@ For "why is this form invalid", call `explain-form-invalid` first. The tools red | `export-form` | A JSON snapshot, or a test fixture with the expected status. Secret values stay redacted. | `form`, `format` (`snapshot` or `fixture`) | | `lint-forms` | Form bugs, NG01xxx setup errors and model-aware accessibility checks, like a missing label or error text that is not linked. | `form` | -Markers let an agent check its own work: read the marker, act, then call `form-diff` with `since` set to it. +Markers let an agent check its own work: read the marker, act, then call `form-diff` with `since` set to it. A marker counts events across every open page and keeps counting after a page reloads, so it stays valid when the agent works in another tab. ### Act on a form @@ -199,11 +261,11 @@ When a write goes through a native ` + +

        + @if (invalid('email')) { + {{ + form.controls.email.hasError('required') + ? 'Enter your email.' + : 'Enter a valid email address.' + }} + } +

        +

        + @if (invalid('password')) { + {{ + form.controls.password.hasError('required') + ? 'Enter your password.' + : 'Use at least 8 characters.' + }} + } +

        - @if (message()) { -

        {{ message() }}

        - } +

        {{ message() }}

        New here? Create an account

        `, @@ -44,6 +69,11 @@ export default class Login { remember: new FormControl(false, { nonNullable: true }), }); + protected invalid(name: 'email' | 'password'): boolean { + const control = this.form.controls[name]; + return control.invalid && control.touched; + } + submit() { this.form.markAllAsTouched(); this.message.set(this.form.valid ? 'Logged in (demo).' : 'Fix the errors above.'); diff --git a/examples/analog/src/app/pages/(auth)/register.page.ts b/examples/analog/src/app/pages/(auth)/register.page.ts index 2d1007f..96d9bfa 100644 --- a/examples/analog/src/app/pages/(auth)/register.page.ts +++ b/examples/analog/src/app/pages/(auth)/register.page.ts @@ -1,5 +1,5 @@ import { Component, signal } from '@angular/core'; -import { FormsModule } from '@angular/forms'; +import { FormsModule, NgModel } from '@angular/forms'; import type { RouteMeta } from '@analogjs/router'; export const routeMeta: RouteMeta = { @@ -10,19 +10,63 @@ export const routeMeta: RouteMeta = { imports: [FormsModule], template: `

        Create account

        -
        + - + +

        + @if (shown(nameModel, f.submitted)) { + {{ nameModel.hasError('required') ? 'Enter your name.' : 'Use at least 2 characters.' }} + } +

        - + +

        + @if (shown(emailModel, f.submitted)) { + {{ + emailModel.hasError('required') ? 'Enter your email.' : 'Enter a valid email address.' + }} + } +

        + I accept the terms +

        + @if (shown(termsModel, f.submitted)) { + Accept the terms to create an account. + } +

        - @if (done()) { -

        Account created (demo).

        - } +

        {{ status() }}

        `, }) @@ -30,5 +74,13 @@ export default class Register { protected name = ''; protected email = ''; protected terms = false; - protected readonly done = signal(false); + protected readonly status = signal(''); + + protected shown(model: NgModel, submitted: boolean): boolean { + return !!model.invalid && (!!model.touched || submitted); + } + + protected submit(valid: boolean) { + this.status.set(valid ? 'Account created (demo).' : 'Fix the errors above.'); + } } diff --git a/examples/analog/src/app/pages/checkout.page.ts b/examples/analog/src/app/pages/checkout.page.ts index ec7be25..90dbbe3 100644 --- a/examples/analog/src/app/pages/checkout.page.ts +++ b/examples/analog/src/app/pages/checkout.page.ts @@ -1,7 +1,15 @@ import { CurrencyPipe } from '@angular/common'; import { HttpClient, HttpErrorResponse } from '@angular/common/http'; import { Component, inject, signal } from '@angular/core'; -import { FormField, FormRoot, email, form, minLength, required } from '@angular/forms/signals'; +import { + FormField, + FormRoot, + email, + form, + minLength, + required, + type FieldTree, +} from '@angular/forms/signals'; import { RouterLink } from '@angular/router'; import { firstValueFrom } from 'rxjs'; import type { RouteMeta } from '@analogjs/router'; @@ -29,20 +37,51 @@ interface CheckoutModel { } @else {
        - - @for (error of checkout.name().errors(); track error.kind) { -

        {{ error.message }}

        - } + +
        + @if (shown(checkout.name)) { + @for (error of checkout.name().errors(); track error.kind) { +

        {{ error.message }}

        + } + } +
        - - @for (error of checkout.email().errors(); track error.kind) { -

        {{ error.message }}

        - } + +
        + @if (shown(checkout.email)) { + @for (error of checkout.email().errors(); track error.kind) { +

        {{ error.message }}

        + } + } +
        - - @for (error of checkout.address().errors(); track error.kind) { -

        {{ error.message }}

        - } + +
        + @if (shown(checkout.address)) { + @for (error of checkout.address().errors(); track error.kind) { +

        {{ error.message }}

        + } + } +
        ): boolean { + const state = field(); + return state.touched() && state.invalid(); + } + protected readonly checkout = form( this.model, (path) => { diff --git a/examples/analog/src/styles.css b/examples/analog/src/styles.css index 06e26ce..a9ecf79 100644 --- a/examples/analog/src/styles.css +++ b/examples/analog/src/styles.css @@ -8,6 +8,7 @@ --muted: #52525b; --card: #ffffff; --soft: #f4f4f5; + --error: #b91c1c; font-family: Inter, system-ui, @@ -26,6 +27,7 @@ --muted: #a1a1aa; --card: #18181b; --soft: #111113; + --error: #f87171; } } @@ -262,10 +264,19 @@ h2 { .error { margin: 0; - color: #dc2626; + color: var(--error); font-size: 14px; } +.error:empty, +.errors:empty { + display: none; +} + +input[aria-invalid='true'] { + border-color: var(--error); +} + .list { display: grid; gap: 10px; diff --git a/examples/analog/tsconfig.app.json b/examples/analog/tsconfig.app.json index c030d59..e803ab9 100644 --- a/examples/analog/tsconfig.app.json +++ b/examples/analog/tsconfig.app.json @@ -2,8 +2,9 @@ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/app", - "types": [] + "types": [], + "rewriteRelativeImportExtensions": true }, "files": ["src/main.ts", "src/main.server.ts"], - "include": ["src/**/*.d.ts", "src/app/pages/**/*.page.ts", "src/server/middleware/**/*.ts"] + "include": ["src/**/*.d.ts", "src/app/pages/**/*.page.ts", "src/server/**/*.ts"] } diff --git a/extension/ui/assets/browser-agent-rpc-BXhoSh1z-BkMFKrGq.js b/extension/ui/assets/browser-agent-rpc-BXhoSh1z-Cfmnc8tc.js similarity index 93% rename from extension/ui/assets/browser-agent-rpc-BXhoSh1z-BkMFKrGq.js rename to extension/ui/assets/browser-agent-rpc-BXhoSh1z-Cfmnc8tc.js index 5967d36..0f85c4d 100644 --- a/extension/ui/assets/browser-agent-rpc-BXhoSh1z-BkMFKrGq.js +++ b/extension/ui/assets/browser-agent-rpc-BXhoSh1z-Cfmnc8tc.js @@ -1 +1 @@ -import{t as e}from"./index-DBeQs79F.js";var t=Symbol.for(`devframe:browser-agent-registry`),{tools:n,listeners:r}=globalThis[t]??={tools:new Map,listeners:new Set};function i(){return[...n.values()]}function a(e){return r.add(e),()=>r.delete(e)}var o=`devframe:client-id`,s;function c(t=globalThis.window){try{let n=t?.sessionStorage;if(n){let t=n.getItem(o);return t||(t=e(),n.setItem(o,t)),t}}catch{}return s??=e(),s}function l(e){e.client.register({name:`devframe:agent:invoke-client-tool`,type:`action`,jsonSerializable:!0,handler:async(e,t)=>{let n=i().find(t=>t.id===e);if(!n)throw Error(`[devframe/agent] browser tool "${e}" not found`);return await n.invoke(t)}});let t=!1,n=!1,r=0,o=()=>{t||n||(t=!0,queueMicrotask(async()=>{if(t=!1,n)return;let a=i().map(({invoke:e,...t})=>t);(a.length!==0||r!==0)&&(r=a.length,await e.callOptional(`devframe:agent:sync-client-tools`,c(),a).catch(()=>{}))}))},s=a(o),l=e.events.on(`connection:status`,e=>{e===`connected`&&o()});return o(),()=>{n=!0,s(),l()}}export{l as setupBrowserAgentRpcBridge}; \ No newline at end of file +import{t as e}from"./index-CT4NGk62.js";var t=Symbol.for(`devframe:browser-agent-registry`),{tools:n,listeners:r}=globalThis[t]??={tools:new Map,listeners:new Set};function i(){return[...n.values()]}function a(e){return r.add(e),()=>r.delete(e)}var o=`devframe:client-id`,s;function c(t=globalThis.window){try{let n=t?.sessionStorage;if(n){let t=n.getItem(o);return t||(t=e(),n.setItem(o,t)),t}}catch{}return s??=e(),s}function l(e){e.client.register({name:`devframe:agent:invoke-client-tool`,type:`action`,jsonSerializable:!0,handler:async(e,t)=>{let n=i().find(t=>t.id===e);if(!n)throw Error(`[devframe/agent] browser tool "${e}" not found`);return await n.invoke(t)}});let t=!1,n=!1,r=0,o=()=>{t||n||(t=!0,queueMicrotask(async()=>{if(t=!1,n)return;let a=i().map(({invoke:e,...t})=>t);(a.length!==0||r!==0)&&(r=a.length,await e.callOptional(`devframe:agent:sync-client-tools`,c(),a).catch(()=>{}))}))},s=a(o),l=e.events.on(`connection:status`,e=>{e===`connected`&&o()});return o(),()=>{n=!0,s(),l()}}export{l as setupBrowserAgentRpcBridge}; \ No newline at end of file diff --git a/extension/ui/assets/index-CT4NGk62.js b/extension/ui/assets/index-CT4NGk62.js new file mode 100644 index 0000000..0dae4fe --- /dev/null +++ b/extension/ui/assets/index-CT4NGk62.js @@ -0,0 +1,12315 @@ +(function(){let e=document.createElement(`link`).relList;if(e&&e.supports&&e.supports(`modulepreload`))return;for(let e of document.querySelectorAll(`link[rel="modulepreload"]`))n(e);new MutationObserver(e=>{for(let t of e)if(t.type===`childList`)for(let e of t.addedNodes)e.tagName===`LINK`&&e.rel===`modulepreload`&&n(e)}).observe(document,{childList:!0,subtree:!0});function t(e){let t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),t.credentials=e.crossOrigin===`use-credentials`?`include`:e.crossOrigin===`anonymous`?`omit`:`same-origin`,t}function n(e){if(e.ep)return;e.ep=!0;let n=t(e);fetch(e.href,n)}})();var e=Object.defineProperty,t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable,i=(t,n,r)=>n in t?e(t,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[n]=r,a=(e,a)=>{for(var o in a||={})n.call(a,o)&&i(e,o,a[o]);if(t)for(var o of t(a))r.call(a,o)&&i(e,o,a[o]);return e},o=(e,t,n)=>(i(e,typeof t==`symbol`?t:t+``,n),n),s=globalThis;function c(e){let t=s.__Zone_symbol_prefix;return(typeof t==`string`?t:`__zone_symbol__`)+e}function l(){let e=s.performance;function t(t){e&&e.mark&&e.mark(t)}function n(t,n){e&&e.measure&&e.measure(t,n)}t(`Zone`);let r=class e{constructor(e,t){o(this,`_parent`),o(this,`_name`),o(this,`_properties`),o(this,`_zoneDelegate`),this._parent=e,this._name=t?t.name||`unnamed`:``,this._properties=t&&t.properties||{},this._zoneDelegate=new l(this,this._parent&&this._parent._zoneDelegate,t)}static assertZonePatched(){if(s.Promise!==fe.ZoneAwarePromise)throw Error("Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten.\nMost likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.)")}static get root(){let t=e.current;for(;t.parent;)t=t.parent;return t}static get current(){return me.zone}static get currentTask(){return he}static __load_patch(r,i,a=!1){if(Object.hasOwn(fe,r)){let e=s[c(`forceDuplicateZoneCheck`)]===!0;if(!a&&e)throw Error(`Already loaded patch: `+r)}else if(!s[`__Zone_disable_`+r]){let a=`Zone:`+r;t(a),fe[r]=i(s,e,pe),n(a,a)}}get parent(){return this._parent}get name(){return this._name}get(e){let t=this.getZoneWith(e);if(t)return t._properties[e]}getZoneWith(e){let t=this;for(;t;){if(Object.hasOwn(t._properties,e))return t;t=t._parent}return null}fork(e){if(!e)throw Error(`ZoneSpec required!`);return this._zoneDelegate.fork(this,e)}wrap(e,t){if(typeof e!=`function`)throw Error(`Expecting function got: `+e);let n=this._zoneDelegate.intercept(this,e,t),r=this;return function(){return r.runGuarded(n,this,arguments,t)}}run(e,t,n,r){me={parent:me,zone:this};try{return this._zoneDelegate.invoke(this,e,t,n,r)}finally{me=me.parent}}runGuarded(e,t=null,n,r){me={parent:me,zone:this};try{try{return this._zoneDelegate.invoke(this,e,t,n,r)}catch(e){if(this._zoneDelegate.handleError(this,e))throw e}}finally{me=me.parent}}runTask(e,t,n){if(e.zone!=this)throw Error(`A task can only be run in the zone of creation! (Creation: `+(e.zone||ne).name+`; Execution: `+this.name+`)`);let r=e,{type:i,data:{isPeriodic:a=!1,isRefreshable:o=!1}={}}=e;if(e.state===re&&(i===de||i===ue))return;let s=e.state!=oe;s&&r._transitionTo(oe,ae);let c=he;he=r,me={parent:me,zone:this};try{i==ue&&e.data&&!a&&!o&&(e.cancelFn=void 0);try{return this._zoneDelegate.invokeTask(this,r,t,n)}catch(e){if(this._zoneDelegate.handleError(this,e))throw e}}finally{let t=e.state;if(t!==re&&t!==ce){if(i==de||a||o&&t===ie)s&&r._transitionTo(ae,oe,ie);else{let e=r._zoneDelegates;this._updateTaskCount(r,-1),s&&r._transitionTo(re,oe,re),o&&(r._zoneDelegates=e)}}me=me.parent,he=c}}scheduleTask(e){if(e.zone&&e.zone!==this){let t=this;for(;t;){if(t===e.zone)throw Error(`can not reschedule task to ${this.name} which is descendants of the original zone ${e.zone.name}`);t=t.parent}}e._transitionTo(ie,re);let t=[];e._zoneDelegates=t,e._zone=this;try{e=this._zoneDelegate.scheduleTask(this,e)}catch(t){throw e._transitionTo(ce,ie,re),this._zoneDelegate.handleError(this,t),t}return e._zoneDelegates===t&&this._updateTaskCount(e,1),e.state==ie&&e._transitionTo(ae,ie),e}scheduleMicroTask(e,t,n,r){return this.scheduleTask(new u(le,e,t,n,r,void 0))}scheduleMacroTask(e,t,n,r,i){return this.scheduleTask(new u(ue,e,t,n,r,i))}scheduleEventTask(e,t,n,r,i){return this.scheduleTask(new u(de,e,t,n,r,i))}cancelTask(e){if(e.zone!=this)throw Error(`A task can only be cancelled in the zone of creation! (Creation: `+(e.zone||ne).name+`; Execution: `+this.name+`)`);if(e.state===ae||e.state===oe){e._transitionTo(se,ae,oe);try{this._zoneDelegate.cancelTask(this,e)}catch(t){throw e._transitionTo(ce,se),this._zoneDelegate.handleError(this,t),t}return this._updateTaskCount(e,-1),e._transitionTo(re,se),e.runCount=-1,e}}_updateTaskCount(e,t){let n=e._zoneDelegates;t==-1&&(e._zoneDelegates=null);for(let r=0;re.hasTask(n,r),onScheduleTask:(e,t,n,r)=>e.scheduleTask(n,r),onInvokeTask:(e,t,n,r,i,a)=>e.invokeTask(n,r,i,a),onCancelTask:(e,t,n,r)=>e.cancelTask(n,r)};class l{constructor(e,t,n){o(this,`_zone`),o(this,`_taskCounts`,{microTask:0,macroTask:0,eventTask:0}),o(this,`_forkDlgt`),o(this,`_forkZS`),o(this,`_forkCurrZone`),o(this,`_interceptDlgt`),o(this,`_interceptZS`),o(this,`_interceptCurrZone`),o(this,`_invokeDlgt`),o(this,`_invokeZS`),o(this,`_invokeCurrZone`),o(this,`_handleErrorDlgt`),o(this,`_handleErrorZS`),o(this,`_handleErrorCurrZone`),o(this,`_scheduleTaskDlgt`),o(this,`_scheduleTaskZS`),o(this,`_scheduleTaskCurrZone`),o(this,`_invokeTaskDlgt`),o(this,`_invokeTaskZS`),o(this,`_invokeTaskCurrZone`),o(this,`_cancelTaskDlgt`),o(this,`_cancelTaskZS`),o(this,`_cancelTaskCurrZone`),o(this,`_hasTaskDlgt`),o(this,`_hasTaskDlgtOwner`),o(this,`_hasTaskZS`),o(this,`_hasTaskCurrZone`),this._zone=e,this._forkZS=n&&(n&&n.onFork?n:t._forkZS),this._forkDlgt=n&&(n.onFork?t:t._forkDlgt),this._forkCurrZone=n&&(n.onFork?this._zone:t._forkCurrZone),this._interceptZS=n&&(n.onIntercept?n:t._interceptZS),this._interceptDlgt=n&&(n.onIntercept?t:t._interceptDlgt),this._interceptCurrZone=n&&(n.onIntercept?this._zone:t._interceptCurrZone),this._invokeZS=n&&(n.onInvoke?n:t._invokeZS),this._invokeDlgt=n&&(n.onInvoke?t:t._invokeDlgt),this._invokeCurrZone=n&&(n.onInvoke?this._zone:t._invokeCurrZone),this._handleErrorZS=n&&(n.onHandleError?n:t._handleErrorZS),this._handleErrorDlgt=n&&(n.onHandleError?t:t._handleErrorDlgt),this._handleErrorCurrZone=n&&(n.onHandleError?this._zone:t._handleErrorCurrZone),this._scheduleTaskZS=n&&(n.onScheduleTask?n:t._scheduleTaskZS),this._scheduleTaskDlgt=n&&(n.onScheduleTask?t:t._scheduleTaskDlgt),this._scheduleTaskCurrZone=n&&(n.onScheduleTask?this._zone:t._scheduleTaskCurrZone),this._invokeTaskZS=n&&(n.onInvokeTask?n:t._invokeTaskZS),this._invokeTaskDlgt=n&&(n.onInvokeTask?t:t._invokeTaskDlgt),this._invokeTaskCurrZone=n&&(n.onInvokeTask?this._zone:t._invokeTaskCurrZone),this._cancelTaskZS=n&&(n.onCancelTask?n:t._cancelTaskZS),this._cancelTaskDlgt=n&&(n.onCancelTask?t:t._cancelTaskDlgt),this._cancelTaskCurrZone=n&&(n.onCancelTask?this._zone:t._cancelTaskCurrZone),this._hasTaskZS=null,this._hasTaskDlgt=null,this._hasTaskDlgtOwner=null,this._hasTaskCurrZone=null;let r=n&&n.onHasTask,i=t&&t._hasTaskZS;(r||i)&&(this._hasTaskZS=r?n:a,this._hasTaskDlgt=t,this._hasTaskDlgtOwner=this,this._hasTaskCurrZone=this._zone,n.onScheduleTask||(this._scheduleTaskZS=a,this._scheduleTaskDlgt=t,this._scheduleTaskCurrZone=this._zone),n.onInvokeTask||(this._invokeTaskZS=a,this._invokeTaskDlgt=t,this._invokeTaskCurrZone=this._zone),n.onCancelTask||(this._cancelTaskZS=a,this._cancelTaskDlgt=t,this._cancelTaskCurrZone=this._zone))}get zone(){return this._zone}fork(e,t){return this._forkZS?this._forkZS.onFork(this._forkDlgt,this.zone,e,t):new i(e,t)}intercept(e,t,n){return this._interceptZS?this._interceptZS.onIntercept(this._interceptDlgt,this._interceptCurrZone,e,t,n):t}invoke(e,t,n,r,i){return this._invokeZS?this._invokeZS.onInvoke(this._invokeDlgt,this._invokeCurrZone,e,t,n,r,i):t.apply(n,r)}handleError(e,t){return!this._handleErrorZS||this._handleErrorZS.onHandleError(this._handleErrorDlgt,this._handleErrorCurrZone,e,t)}scheduleTask(e,t){let n=t;if(this._scheduleTaskZS)this._hasTaskZS&&n._zoneDelegates.push(this._hasTaskDlgtOwner),n=this._scheduleTaskZS.onScheduleTask(this._scheduleTaskDlgt,this._scheduleTaskCurrZone,e,t),n||=t;else if(t.scheduleFn)t.scheduleFn(t);else if(t.type==le)v(t);else throw Error(`Task is missing scheduleFn.`);return n}invokeTask(e,t,n,r){return this._invokeTaskZS?this._invokeTaskZS.onInvokeTask(this._invokeTaskDlgt,this._invokeTaskCurrZone,e,t,n,r):t.callback.apply(n,r)}cancelTask(e,t){let n;if(this._cancelTaskZS)n=this._cancelTaskZS.onCancelTask(this._cancelTaskDlgt,this._cancelTaskCurrZone,e,t);else{if(!t.cancelFn)throw Error(`Task is not cancelable`);n=t.cancelFn(t)}return n}hasTask(e,t){try{this._hasTaskZS&&this._hasTaskZS.onHasTask(this._hasTaskDlgt,this._hasTaskCurrZone,e,t)}catch(t){this.handleError(e,t)}}_updateTaskCount(e,t){let n=this._taskCounts,r=n[e],i=n[e]=r+t;if(i<0)throw Error(`More tasks executed then were scheduled.`);if(r==0||i==0){let t={microTask:n.microTask>0,macroTask:n.macroTask>0,eventTask:n.eventTask>0,change:e};this.hasTask(this._zone,t)}}}class u{constructor(e,t,n,r,i,a){if(o(this,`type`),o(this,`source`),o(this,`invoke`),o(this,`callback`),o(this,`data`),o(this,`scheduleFn`),o(this,`cancelFn`),o(this,`_zone`,null),o(this,`runCount`,0),o(this,`_zoneDelegates`,null),o(this,`_state`,`notScheduled`),this.type=e,this.source=t,this.data=r,this.scheduleFn=i,this.cancelFn=a,!n)throw Error(`callback is not defined`);this.callback=n;let c=this;this.invoke=e===de&&r&&r.useG?u.invokeTask:function(){return u.invokeTask.call(s,c,this,arguments)}}static invokeTask(e,t,n){e||=this,ge++;try{return e.runCount++,e.zone.runTask(e,t,n)}finally{try{ge===1&&!s[m]&&te()}finally{ge--}}}get zone(){return this._zone}get state(){return this._state}cancelScheduleRequest(){this._transitionTo(re,ie)}_transitionTo(e,t,n){if(this._state===t||this._state===n)this._state=e,e==re&&(this._zoneDelegates=null);else throw Error(`${this.type} '${this.source}': can not transition to '${e}', expecting state '${t}'${n?` or '`+n+`'`:``}, was '${this._state}'.`)}toString(){return this.data&&this.data.handleId!==void 0?this.data.handleId.toString():Object.prototype.toString.call(this)}toJSON(){return{type:this.type,state:this.state,source:this.source,zone:this.zone.name,runCount:this.runCount}}}let d=c(`setTimeout`),f=c(`Promise`),p=c(`then`),m=c(`enable_native_microtask_draining`),h=[],g=!1,_;function ee(e){!_&&s[f]&&(_=s[f].resolve(0)),_?(_[p]??_.then).call(_,e):s[d](e,0)}function v(e){let t=s[m],n=t&&h.length===0&&!g,r=!t&&ge===0&&h.length===0;(n||r)&&ee(te),e&&h.push(e)}function te(){if(!g){g=!0;try{for(;h.length;){let e=h;h=[];for(let t of e)try{t.zone.runTask(t,null,null)}catch(e){pe.onUnhandledError(e)}}}finally{if(s[m])g=!1,pe.microtaskDrainDone();else try{pe.microtaskDrainDone()}finally{g=!1}}}}let ne={name:`NO ZONE`},re=`notScheduled`,ie=`scheduling`,ae=`scheduled`,oe=`running`,se=`canceling`,ce=`unknown`,le=`microTask`,ue=`macroTask`,de=`eventTask`,fe=Object.create(null),pe={symbol:c,currentZoneFrame:()=>me,onUnhandledError:_e,microtaskDrainDone:_e,scheduleMicroTask:v,showUncaughtError:()=>!i[c(`ignoreConsoleErrorUncaughtError`)],patchEventTarget:()=>[],patchOnProperties:_e,patchMethod:()=>_e,bindArguments:()=>[],patchThen:()=>_e,patchMacroTask:()=>_e,patchEventPrototype:()=>_e,getGlobalObjects:()=>void 0,ObjectDefineProperty:()=>_e,ObjectGetOwnPropertyDescriptor:()=>void 0,ObjectCreate:()=>void 0,ArraySlice:()=>[],patchClass:()=>_e,wrapWithCurrentZone:()=>_e,filterProperties:()=>[],attachOriginToPatched:()=>_e,_redefineProperty:()=>_e,patchCallbacks:()=>_e,nativeScheduleMicroTask:ee},me={parent:null,zone:new i(null,null)},he=null,ge=0;function _e(){}return n(`Zone`,`Zone`),i}function u(){let e=globalThis,t=e[c(`forceDuplicateZoneCheck`)]===!0;if(e.Zone&&(t||typeof e.Zone.__symbol__!=`function`))throw Error(`Zone already loaded.`);return e.Zone??=l(),e.Zone}var d=Object.getOwnPropertyDescriptor,f=Object.defineProperty,p=Object.getPrototypeOf,m=Object.create,h=Array.prototype.slice,g=`addEventListener`,_=`removeEventListener`,ee=c(g),v=c(_),te=`true`,ne=`false`,re=c(``);function ie(e,t){return Zone.current.wrap(e,t)}function ae(e,t,n,r,i){return Zone.current.scheduleMacroTask(e,t,n,r,i)}var oe=c,se=typeof window<`u`,ce=se?window:void 0,le=se&&ce||globalThis,ue=`removeAttribute`;function de(e,t){for(let n=e.length-1;n>=0;n--)typeof e[n]==`function`&&(e[n]=ie(e[n],t+`_`+n));return e}function fe(e,t){let n=e.constructor.name;for(let r=0;r{let t=function(){return e.apply(this,de(arguments,n+`.`+i))};return De(t,e),t})(a)}}}function pe(e){return e?e.writable===!1?!1:typeof e.get!=`function`||e.set!==void 0:!0}var me=typeof WorkerGlobalScope<`u`&&self instanceof WorkerGlobalScope,he=!(`nw`in le)&&le.process!==void 0&&le.process.toString()===`[object process]`,ge=!he&&!me&&!!(se&&ce.HTMLElement),_e=le.process!==void 0&&le.process.toString()===`[object process]`&&!me&&!!(se&&ce.HTMLElement),ve=Object.create(null),ye=oe(`enable_beforeunload`),be=function(e){if(e||=le.event,!e)return;let t=ve[e.type];t||=ve[e.type]=oe(`ON_PROPERTY`+e.type);let n=this||e.target||le,r=n[t],i;if(ge&&n===ce&&e.type===`error`){let t=e;i=r&&r.call(this,t.message,t.filename,t.lineno,t.colno,t.error),i===!0&&e.preventDefault()}else i=r&&r.apply(this,arguments),e.type===`beforeunload`&&le[ye]&&typeof i==`string`?e.returnValue=i:i!=null&&!i&&e.preventDefault();return i};function xe(e,t,n){let r=d(e,t);if(!r&&n&&d(n,t)&&(r={enumerable:!0,configurable:!0}),!r||!r.configurable)return;let i=oe(`on`+t+`patched`);if(Object.hasOwn(e,i)&&e[i])return;delete r.writable,delete r.value;let a=r.get,o=r.set,s=t.slice(2),c=ve[s];c||=ve[s]=oe(`ON_PROPERTY`+s),r.set=function(t){let n=this;!n&&e===le&&(n=le),n&&(typeof n[c]==`function`&&n.removeEventListener(s,be),o?.call(n,null),n[c]=t,typeof t==`function`&&n.addEventListener(s,be,!1))},r.get=function(){let n=this;if(!n&&e===le&&(n=le),!n)return null;let i=n[c];if(i)return i;if(a){let e=a.call(this);if(e)return r.set.call(this,e),typeof n[ue]==`function`&&n.removeAttribute(t),e}return null},f(e,t,r),e[i]=!0}function Se(e,t,n){if(t)for(let r=0;rfunction(t,r){let a=n(t,r);return a.cbIdx>=0&&typeof r[a.cbIdx]==`function`?ae(a.name,r[a.cbIdx],a,i):e.apply(t,r)})}function De(e,t){e[oe(`OriginalDelegate`)]=t}function Oe(e){return typeof e==`function`}function ke(e){return typeof e==`number`}var Ae={useG:!0},je=Object.create(null),Me={},Ne=RegExp(`^`+re+`(\\w+)(true|false)$`),Pe=oe(`propagationStopped`),Fe=[`capture`,`once`,`passive`,`signal`];function Ie(e,t){let n=(t?t(e):e)+ne,r=(t?t(e):e)+te,i=re+n,a=re+r;je[e]={[ne]:i,[te]:a}}function Le(e,t,n,r){let i=r&&r.add||g,o=r&&r.rm||_,s=r&&r.listeners||`eventListeners`,c=r&&r.rmAll||`removeAllListeners`,l=oe(i),u=`.`+i+`:`,d=function(e,t,n){if(e.isRemoved)return;let r=e.callback;typeof r==`object`&&r.handleEvent&&(e.callback=e=>r.handleEvent(e),e.originalDelegate=r);let i;try{e.invoke(e,t,[n])}catch(e){i=e}let a=e.options;if(a&&typeof a==`object`&&a.once){let r=e.originalDelegate?e.originalDelegate:e.callback;t[o].call(t,n.type,r,a)}return i};function f(n,r,i){if(r||=e.event,!r)return;let a=n||r.target||e,o=a[je[r.type][i?te:ne]];if(o){let e=[];if(o.length===1){let t=d(o[0],a,r);t&&e.push(t)}else{let t=o.slice();for(let n=0;n{throw r})}}}let m=function(e){return f(this,e,!1)},h=function(e){return f(this,e,!0)};function ee(t,n){if(!t)return!1;let r=!0;n&&n.useG!==void 0&&(r=n.useG);let d=n&&n.vh,f=!0;n&&n.chkDup!==void 0&&(f=n.chkDup);let g=!1;n&&n.rt!==void 0&&(g=n.rt);let _=t;for(;_&&!Object.hasOwn(_,i);)_=p(_);if(!_&&t[i]&&(_=t),!_||_[l])return!1;let ee=n&&n.eventNameToString,v={},ie=_[l]=_[i],ae=_[oe(o)]=_[o],se=_[oe(s)]=_[s],ce=_[oe(c)]=_[c],le;n&&n.prepend&&(le=_[oe(n.prepend)]=_[n.prepend]);function ue(e,t){return t?typeof e==`boolean`?{capture:e,passive:!0}:e?(typeof e==`object`&&e.passive!==!1&&(e.passive=!0),e):{passive:!0}:e}let de=function(e){if(!v.isExisting)return ie.call(v.target,v.eventName,v.capture?h:m,v.options)},fe=function(e){if(!e.isRemoved){let t=je[e.eventName],n;t&&(n=t[e.capture?te:ne]);let r=n&&e.target[n];if(r){for(let t=0;tge.zone.cancelTask(ge);t.call(_,`abort`,e,{once:!0}),ge.removeAbortListener=()=>_.removeEventListener(`abort`,e)}if(v.target=null,me&&(me.taskData=null),ie&&(v.options.once=!0),typeof ge.options!=`boolean`&&(ge.options=g),ge.target=l,ge.capture=re,ge.eventName=u,m&&(ge.originalDelegate=p),c?ce.unshift(ge):ce.push(ge),s)return l}};return _[i]=Ce(ie,u,_e,ve,g),le&&(_.prependListener=Ce(le,`.prependListener:`,me,ve,g,!0)),_[o]=function(){let t=this||e,r=arguments[0];n&&n.transferEventName&&(r=n.transferEventName(r));let i=arguments[2],a=i?typeof i==`boolean`||i.capture:!1,o=arguments[1];if(!o)return ae.apply(this,arguments);if(d&&!d(ae,o,t,arguments))return;let s=je[r],c;s&&(c=s[a?te:ne]);let l=c&&t[c];if(l)for(let e=0;efunction(t,n){t[Pe]=!0,e&&e.apply(t,n)})}function Be(e,t){t.patchMethod(e,`queueMicrotask`,e=>function(e,t){Zone.current.scheduleMicroTask(`queueMicrotask`,t[0])})}var Ve=oe(`zoneTask`);function He(e,t,n,r){let i=null,a=null;t+=r,n+=r;let o={};function s(t){let n=t.data;n.args[0]=function(){return t.invoke.apply(this,arguments)};let r=i.apply(e,n.args);return ke(r)?n.handleId=r:(n.handle=r,n.isRefreshable=Oe(r?.refresh)),t}function c(t){let{handle:n,handleId:r}=t.data;return a.call(e,n??r)}i=Te(e,t,n=>function(i,a){if(Oe(a[0])){let e={isRefreshable:!1,isPeriodic:r===`Interval`,delay:r===`Timeout`||r===`Interval`?a[1]||0:void 0,args:a},n=a[0];a[0]=function(){try{return n.apply(this,arguments)}finally{let{handle:t,handleId:n,isPeriodic:r,isRefreshable:i}=e;!r&&!i&&(n?delete o[n]:t&&(t[Ve]=null))}};let i=ae(t,a[0],e,s,c);if(!i)return i;let{handleId:l,handle:u,isRefreshable:d,isPeriodic:f}=i.data;if(l)o[l]=i;else if(u&&(u[Ve]=i,d&&!f)){let e=u.refresh;u.refresh=function(){let{zone:t,state:n}=i;return n===`notScheduled`?(i._state=`scheduled`,t._updateTaskCount(i,1)):n===`running`&&(i._state=`scheduling`),e.call(this)}}return u??l??i}return n.apply(e,a)}),a=Te(e,n,t=>function(n,r){let i=r[0],a;ke(i)?(a=o[i],delete o[i]):(a=i?.[Ve],a?i[Ve]=null:a=i),a?.type?a.cancelFn&&a.zone.cancelTask(a):t.apply(e,r)})}function Ue(e,t){let{isBrowser:n,isMix:r}=t.getGlobalObjects();(n||r)&&e.customElements&&`customElements`in e&&t.patchCallbacks(t,e.customElements,`customElements`,`define`,[`connectedCallback`,`disconnectedCallback`,`adoptedCallback`,`attributeChangedCallback`,`formAssociatedCallback`,`formDisabledCallback`,`formResetCallback`,`formStateRestoreCallback`])}function We(e,t){if(Zone[t.symbol(`patchEventTarget`)])return;let{eventNames:n,zoneSymbolEventNames:r,TRUE_STR:i,FALSE_STR:a,ZONE_SYMBOL_PREFIX:o}=t.getGlobalObjects();for(let e=0;et.target===e);if(r.length===0)return t;let i=r[0].ignoreProperties;return t.filter(e=>i.indexOf(e)===-1)}function qe(e,t,n,r){e&&Se(e,Ke(e,t,n),r)}function Je(e){return Object.getOwnPropertyNames(e).filter(e=>e.startsWith(`on`)&&e.length>2).map(e=>e.substring(2))}function Ye(e,t){if(he&&!_e||Zone[e.symbol(`patchEvents`)])return;let n=t.__Zone_ignore_on_properties,r=[];if(ge){let e=window;r=r.concat([`Document`,`SVGElement`,`Element`,`HTMLElement`,`HTMLBodyElement`,`HTMLMediaElement`,`HTMLFrameSetElement`,`HTMLFrameElement`,`HTMLIFrameElement`,`HTMLMarqueeElement`,`Worker`]),qe(e,Je(e),n,p(e))}r=r.concat([`XMLHttpRequest`,`XMLHttpRequestEventTarget`,`IDBIndex`,`IDBRequest`,`IDBOpenDBRequest`,`IDBDatabase`,`IDBTransaction`,`IDBCursor`,`WebSocket`]);for(let e=0;e{let t=`clear`;He(e,`set`,t,`Timeout`),He(e,`set`,t,`Interval`),He(e,`set`,t,`Immediate`)}),e.__load_patch(`requestAnimationFrame`,e=>{He(e,`request`,`cancel`,`AnimationFrame`),He(e,`mozRequest`,`mozCancel`,`AnimationFrame`),He(e,`webkitRequest`,`webkitCancel`,`AnimationFrame`)}),e.__load_patch(`blocking`,(e,t)=>{let n=[`alert`,`prompt`,`confirm`];for(let r=0;rfunction(r,a){return t.current.run(n,e,a,i)})}}),e.__load_patch(`EventTarget`,(e,t,n)=>{Ge(e,n),We(e,n);let r=e.XMLHttpRequestEventTarget;r&&r.prototype&&n.patchEventTarget(e,n,[r.prototype])}),e.__load_patch(`MutationObserver`,(e,t,n)=>{we(`MutationObserver`),we(`WebKitMutationObserver`)}),e.__load_patch(`IntersectionObserver`,(e,t,n)=>{we(`IntersectionObserver`)}),e.__load_patch(`FileReader`,(e,t,n)=>{we(`FileReader`)}),e.__load_patch(`on_property`,(e,t,n)=>{Ye(n,e)}),e.__load_patch(`customElements`,(e,t,n)=>{Ue(e,n)}),e.__load_patch(`XHR`,(e,t)=>{c(e);let n=oe(`xhrTask`),r=oe(`xhrSync`),i=oe(`xhrListener`),a=oe(`xhrScheduled`),o=oe(`xhrURL`),s=oe(`xhrErrorBeforeScheduled`);function c(e){let c=e.XMLHttpRequest;if(!c)return;let l=c.prototype;function u(e){return e[n]}let d=l[ee],f=l[v];if(!d){let t=e.XMLHttpRequestEventTarget;if(t){let e=t.prototype;d=e[ee],f=e[v]}}let p=`readystatechange`,m=`scheduled`;function h(e){let r=e.data,o=r.target;o[a]=!1,o[s]=!1;let c=o[i];d||(d=o[ee],f=o[v]),c&&f.call(o,p,c);let l=o[i]=()=>{if(o.readyState===o.DONE){if(!r.aborted&&o[a]&&e.state===m){let n=o[t.__symbol__(`loadfalse`)];if(o.status!==0&&n&&n.length>0){let i=e.invoke;e.invoke=function(){let n=o[t.__symbol__(`loadfalse`)];for(let t=0;tfunction(e,t){return e[r]=t[2]==0,e[o]=t[1],te.apply(e,t)}),ne=oe(`fetchTaskAborting`),re=oe(`fetchTaskScheduling`),ie=Te(l,`send`,()=>function(e,n){if(t.current[re]===!0||e[r])return ie.apply(e,n);{let t={target:e,url:e[o],isPeriodic:!1,args:n,aborted:!1},r=ae(`XMLHttpRequest.send`,g,t,h,_);e&&e[s]===!0&&!t.aborted&&r.state===m&&r.invoke()}}),se=Te(l,`abort`,()=>function(e,n){let r=u(e);if(r&&typeof r.type==`string`){if(r.cancelFn==null||r.data&&r.data.aborted)return;r.zone.cancelTask(r)}else if(t.current[ne]===!0)return se.apply(e,n)})}}),e.__load_patch(`geolocation`,e=>{e.navigator&&e.navigator.geolocation&&fe(e.navigator.geolocation,[`getCurrentPosition`,`watchPosition`])}),e.__load_patch(`PromiseRejectionEvent`,(e,t)=>{function n(t){return function(n){Re(e,t).forEach(r=>{let i=e.PromiseRejectionEvent;if(i){let e=new i(t,{promise:n.promise,reason:n.rejection});r.invoke(e)}})}}e.PromiseRejectionEvent&&(t[oe(`unhandledPromiseRejectionHandler`)]=n(`unhandledrejection`),t[oe(`rejectionHandledHandler`)]=n(`rejectionhandled`))}),e.__load_patch(`queueMicrotask`,(e,t,n)=>{Be(e,n)})}function Ze(e){e.__load_patch(`ZoneAwarePromise`,(e,t,n)=>{let r=Object.getOwnPropertyDescriptor,i=Object.defineProperty;function a(e){return e&&e.toString===Object.prototype.toString?(e.constructor&&e.constructor.name||``)+`: `+JSON.stringify(e):e?e.toString():Object.prototype.toString.call(e)}let o=n.symbol,s=[],c=e[o(`DISABLE_WRAPPING_UNCAUGHT_PROMISE_REJECTION`)]!==!1,l=o(`Promise`),u=o(`then`);n.onUnhandledError=e=>{if(n.showUncaughtError()){let t=e&&e.rejection;t&&e.zone&&e.task?console.error(`Unhandled Promise rejection:`,t instanceof Error?t.message:t,`; Zone:`,e.zone.name,`; Task:`,e.task&&e.task.source,`; Value:`,t,t instanceof Error?t.stack:void 0):console.error(e)}},n.microtaskDrainDone=()=>{for(;s.length;){let e=s.shift();try{e.zone.runGuarded(()=>{throw e.throwOriginal?e.rejection:e})}catch(e){f(e)}}};let d=o(`unhandledPromiseRejectionHandler`);function f(e){n.onUnhandledError(e);try{let n=t[d];typeof n==`function`&&n.call(this,e)}catch{}}function p(e){return e&&typeof e.then==`function`}function m(e){return e}function h(e){return de.reject(e)}let g=o(`state`),_=o(`value`),ee=o(`finally`),v=o(`parentPromiseValue`),te=o(`parentPromiseState`);function ne(e,t){return n=>{try{ae(e,t,n)}catch(t){ae(e,!1,t)}}}let re=function(){let e=!1;return function(t){return function(){e||(e=!0,t.apply(null,arguments))}}},ie=o(`currentTaskTrace`);function ae(e,r,o){let l=re();if(e===o)throw TypeError(`Promise resolved with itself`);if(e[g]===null){let u=null;try{(typeof o==`object`||typeof o==`function`)&&(u=o&&o.then)}catch(t){return l(()=>{ae(e,!1,t)})(),e}if(r!==!1&&o instanceof de&&Object.hasOwn(o,g)&&Object.hasOwn(o,_)&&o[g]!==null)se(o),ae(e,o[g],o[_]);else if(r!==!1&&typeof u==`function`)try{u.call(o,l(ne(e,r)),l(ne(e,!1)))}catch(t){l(()=>{ae(e,!1,t)})()}else{e[g]=r;let l=e[_];if(e[_]=o,e[ee]===ee&&r===!0&&(e[g]=e[te],e[_]=e[v]),r===!1&&o instanceof Error){let e=t.currentTask&&t.currentTask.data&&t.currentTask.data.__creationTrace__;e&&i(o,ie,{configurable:!0,enumerable:!1,writable:!0,value:e})}for(let t=0;t{try{let r=e[_],i=!!n&&ee===n[ee];i&&(n[v]=r,n[te]=a),ae(n,!0,t.run(o,void 0,i&&o!==h&&o!==m?[]:[r]))}catch(e){ae(n,!1,e)}},n)}let le=function(){},ue=e.AggregateError;class de{static toString(){return`function ZoneAwarePromise() { [native code] }`}static resolve(e){return e instanceof de?e:ae(new this(null),!0,e)}static reject(e){return ae(new this(null),!1,e)}static withResolvers(){let e={};return e.promise=new de((t,n)=>{e.resolve=t,e.reject=n}),e}static any(e){if(!e||typeof e[Symbol.iterator]!=`function`)return Promise.reject(new ue([],`All promises were rejected`));let t=[],n=0;try{for(let r of e)n++,t.push(de.resolve(r))}catch{return Promise.reject(new ue([],`All promises were rejected`))}if(n===0)return Promise.reject(new ue([],`All promises were rejected`));let r=!1,i=[];return new de((e,a)=>{for(let o=0;o{r||(r=!0,e(t))},e=>{i.push(e),n--,n===0&&(r=!0,a(new ue(i,`All promises were rejected`)))})})}static race(e){let t,n,r=new this((e,r)=>{t=e,n=r});function i(e){t(e)}function a(e){n(e)}for(let t of e)p(t)||(t=this.resolve(t)),t.then(i,a);return r}static all(e){return de.allWithCallback(e)}static allSettled(e){return(this&&this.prototype instanceof de?this:de).allWithCallback(e,{thenCallback:e=>({status:`fulfilled`,value:e}),errorCallback:e=>({status:`rejected`,reason:e})})}static allWithCallback(e,t){let n,r,i=new this((e,t)=>{n=e,r=t}),a=2,o=0,s=[];for(let i of e){p(i)||(i=this.resolve(i));let e=o;try{i.then(r=>{s[e]=t?t.thenCallback(r):r,a--,a===0&&n(s)},i=>{t?(s[e]=t.errorCallback(i),a--,a===0&&n(s)):r(i)})}catch(e){r(e)}a++,o++}return a-=2,a===0&&n(s),i}constructor(e){let t=this;if(!(t instanceof de))throw Error(`Must be an instanceof Promise.`);t[g]=null,t[_]=[];try{let n=re();e&&e(n(ne(t,!0)),n(ne(t,!1)))}catch(e){ae(t,!1,e)}}get[Symbol.toStringTag](){return`Promise`}get[Symbol.species](){return de}then(e,n){let r=this.constructor?.[Symbol.species];(!r||typeof r!=`function`)&&(r=this.constructor||de);let i=new r(le),a=t.current;return this[g]==null?this[_].push(a,i,e,n):ce(this,a,i,e,n),i}catch(e){return this.then(null,e)}finally(e){let n=this.constructor?.[Symbol.species];(!n||typeof n!=`function`)&&(n=de);let r=new n(le);r[ee]=ee;let i=t.current;return this[g]==null?this[_].push(i,r,e,e):ce(this,i,r,e,e),r}}de.resolve=de.resolve,de.reject=de.reject,de.race=de.race,de.all=de.all;let fe=e[l]=e.Promise;e.Promise=de;let pe=o(`thenPatched`);function me(e){let t=e.prototype,n=r(t,`then`);if(n&&(n.writable===!1||!n.configurable))return;let i=t.then;t[u]=i,e.prototype.then=function(e,t){return new de((e,t)=>{i.call(this,e,t)}).then(e,t)},e[pe]=!0}n.patchThen=me;function he(e){return function(t,n){let r=e.apply(t,n);if(r instanceof de)return r;let i=r.constructor;return i[pe]||me(i),r}}if(fe){me(fe);let t=fe.try;t&&typeof t==`function`&&(de.try=t),Te(e,`fetch`,e=>he(e))}return Promise[t.__symbol__(`uncaughtPromiseErrors`)]=s,de})}function Qe(e){e.__load_patch(`toString`,e=>{let t=Function.prototype.toString,n=oe(`OriginalDelegate`),r=oe(`Promise`),i=oe(`Error`),a=function(){if(typeof this==`function`){let a=this[n];if(a)return typeof a==`function`?t.call(a):Object.prototype.toString.call(a);if(this===Promise){let n=e[r];if(n)return t.call(n)}if(this===Error){let n=e[i];if(n)return t.call(n)}}return t.call(this)};a[n]=t,Function.prototype.toString=a;let o=Object.prototype.toString;Object.prototype.toString=function(){return typeof Promise==`function`&&this instanceof Promise?`[object Promise]`:o.call(this)}})}function $e(e,t,n,r,i){let a=Zone.__symbol__(r);if(t[a])return;let o=t[a]=t[r];t[r]=function(a,s,c){return s&&s.prototype&&i.forEach(function(t){let i=`${n}.${r}::`+t,a=s.prototype;try{if(Object.hasOwn(a,t)){let n=e.ObjectGetOwnPropertyDescriptor(a,t);n&&n.value?(n.value=e.wrapWithCurrentZone(n.value,i),e._redefineProperty(s.prototype,t,n)):a[t]&&(a[t]=e.wrapWithCurrentZone(a[t],i))}else a[t]&&(a[t]=e.wrapWithCurrentZone(a[t],i))}catch{}}),o.call(t,a,s,c)},e.attachOriginToPatched(t[r],o)}function et(e){e.__load_patch(`util`,(e,t,n)=>{let r=Je(e);n.patchOnProperties=Se,n.patchMethod=Te,n.bindArguments=de,n.patchMacroTask=Ee;let i=t.__symbol__(`BLACK_LISTED_EVENTS`),a=t.__symbol__(`UNPATCHED_EVENTS`);e[a]&&(e[i]=e[a]),e[i]&&(t[i]=t[a]=e[i]),n.patchEventPrototype=ze,n.patchEventTarget=Le,n.ObjectDefineProperty=f,n.ObjectGetOwnPropertyDescriptor=d,n.ObjectCreate=m,n.ArraySlice=h,n.patchClass=we,n.wrapWithCurrentZone=ie,n.filterProperties=Ke,n.attachOriginToPatched=De,n._redefineProperty=Object.defineProperty,n.patchCallbacks=$e,n.getGlobalObjects=()=>({globalSources:Me,zoneSymbolEventNames:je,eventNames:r,isBrowser:ge,isMix:_e,isNode:he,TRUE_STR:te,FALSE_STR:ne,ZONE_SYMBOL_PREFIX:re,ADD_EVENT_LISTENER_STR:g,REMOVE_EVENT_LISTENER_STR:_})})}function tt(e){Ze(e),Qe(e),et(e)}var nt=u();tt(nt),Xe(nt);var rt=(function(e){return e[e.NONE=0]=`NONE`,e[e.HTML=1]=`HTML`,e[e.STYLE=2]=`STYLE`,e[e.SCRIPT=3]=`SCRIPT`,e[e.URL=4]=`URL`,e[e.RESOURCE_URL=5]=`RESOURCE_URL`,e[e.ATTRIBUTE_NO_BINDING=6]=`ATTRIBUTE_NO_BINDING`,e})(rt||{}),it=(function(e){return e[e.None=0]=`None`,e[e.Const=1]=`Const`,e})(it||{}),at=class{modifiers;constructor(e=it.None){this.modifiers=e}hasModifier(e){return(this.modifiers&e)!==0}},ot=(function(e){return e[e.Dynamic=0]=`Dynamic`,e[e.Bool=1]=`Bool`,e[e.String=2]=`String`,e[e.Int=3]=`Int`,e[e.Number=4]=`Number`,e[e.Function=5]=`Function`,e[e.Inferred=6]=`Inferred`,e[e.None=7]=`None`,e})(ot||{}),st=class extends at{name;constructor(e,t){super(t),this.name=e}visitType(e,t){return e.visitBuiltinType(this,t)}};ot.Dynamic;var ct=new st(ot.Inferred);ot.Bool,ot.Int,ot.Number,ot.String,ot.Function,ot.None;var y=(function(e){return e[e.Equals=0]=`Equals`,e[e.NotEquals=1]=`NotEquals`,e[e.Assign=2]=`Assign`,e[e.Identical=3]=`Identical`,e[e.NotIdentical=4]=`NotIdentical`,e[e.Minus=5]=`Minus`,e[e.Plus=6]=`Plus`,e[e.Divide=7]=`Divide`,e[e.Multiply=8]=`Multiply`,e[e.Modulo=9]=`Modulo`,e[e.And=10]=`And`,e[e.Or=11]=`Or`,e[e.BitwiseOr=12]=`BitwiseOr`,e[e.BitwiseAnd=13]=`BitwiseAnd`,e[e.Lower=14]=`Lower`,e[e.LowerEquals=15]=`LowerEquals`,e[e.Bigger=16]=`Bigger`,e[e.BiggerEquals=17]=`BiggerEquals`,e[e.NullishCoalesce=18]=`NullishCoalesce`,e[e.Exponentiation=19]=`Exponentiation`,e[e.In=20]=`In`,e[e.InstanceOf=21]=`InstanceOf`,e[e.AdditionAssignment=22]=`AdditionAssignment`,e[e.SubtractionAssignment=23]=`SubtractionAssignment`,e[e.MultiplicationAssignment=24]=`MultiplicationAssignment`,e[e.DivisionAssignment=25]=`DivisionAssignment`,e[e.RemainderAssignment=26]=`RemainderAssignment`,e[e.ExponentiationAssignment=27]=`ExponentiationAssignment`,e[e.AndAssignment=28]=`AndAssignment`,e[e.OrAssignment=29]=`OrAssignment`,e[e.NullishCoalesceAssignment=30]=`NullishCoalesceAssignment`,e})(y||{});function lt(e,t){return e==null||t==null?e==t:e.isEquivalent(t)}function ut(e,t,n){let r=e.length;if(r!==t.length)return!1;for(let i=0;ie.isEquivalent(t))}var ft=class{leadingComments;type;sourceSpan;constructor(e,t,n){this.leadingComments=n,this.type=e||null,this.sourceSpan=t||null}prop(e,t){return new St(this,e,null,t)}key(e,t,n){return new Ct(this,e,t,n)}callFn(e,t,n,r){return new ht(this,e,null,t,n,r)}instantiate(e,t,n,r){return new gt(this,e,t,n)}conditional(e,t=null,n,r){return new bt(this,e,t,null,n)}equals(e,t){return new xt(y.Equals,this,e,null,t)}notEquals(e,t){return new xt(y.NotEquals,this,e,null,t)}identical(e,t){return new xt(y.Identical,this,e,null,t)}notIdentical(e,t){return new xt(y.NotIdentical,this,e,null,t)}minus(e,t){return new xt(y.Minus,this,e,null,t)}plus(e,t){return new xt(y.Plus,this,e,null,t)}divide(e,t){return new xt(y.Divide,this,e,null,t)}multiply(e,t){return new xt(y.Multiply,this,e,null,t)}modulo(e,t){return new xt(y.Modulo,this,e,null,t)}power(e,t){return new xt(y.Exponentiation,this,e,null,t)}and(e,t){return new xt(y.And,this,e,null,t)}bitwiseOr(e,t){return new xt(y.BitwiseOr,this,e,null,t)}bitwiseAnd(e,t){return new xt(y.BitwiseAnd,this,e,null,t)}or(e,t){return new xt(y.Or,this,e,null,t)}lower(e,t){return new xt(y.Lower,this,e,null,t)}lowerEquals(e,t){return new xt(y.LowerEquals,this,e,null,t)}bigger(e,t){return new xt(y.Bigger,this,e,null,t)}biggerEquals(e,t){return new xt(y.BiggerEquals,this,e,null,t)}isBlank(e){return this.equals(Ot,e)}nullishCoalesce(e,t){return new xt(y.NullishCoalesce,this,e,null,t)}toStmt(e){return new jt(this,null,e)}},pt=class e extends ft{name;constructor(e,t,n,r){super(t,n,r),this.name=e}isEquivalent(t){return t instanceof e&&this.name===t.name}isConstant(){return!1}visitExpression(e,t){return e.visitReadVarExpr(this,t)}clone(){return new e(this.name,this.type,this.sourceSpan)}set(e){return new xt(y.Assign,this,e,null,this.sourceSpan)}},mt=class e extends ft{expr;constructor(e,t,n,r){super(t,n,r),this.expr=e}visitExpression(e,t){return e.visitTypeofExpr(this,t)}isEquivalent(t){return t instanceof e&&t.expr.isEquivalent(this.expr)}isConstant(){return this.expr.isConstant()}clone(){return new e(this.expr.clone())}},ht=class e extends ft{fn;args;pure;isOptional;constructor(e,t,n,r,i=!1,a,o=!1){super(n,r,a),this.fn=e,this.args=t,this.pure=i,this.isOptional=o}get receiver(){return this.fn}isEquivalent(t){return t instanceof e&&this.fn.isEquivalent(t.fn)&&dt(this.args,t.args)&&this.pure===t.pure}isConstant(){return!1}visitExpression(e,t){return e.visitInvokeFunctionExpr(this,t)}clone(){return new e(this.fn.clone(),this.args.map(e=>e.clone()),this.type,this.sourceSpan,this.pure,[],this.isOptional)}},gt=class e extends ft{classExpr;args;constructor(e,t,n,r,i){super(n,r,i),this.classExpr=e,this.args=t}isEquivalent(t){return t instanceof e&&this.classExpr.isEquivalent(t.classExpr)&&dt(this.args,t.args)}isConstant(){return!1}visitExpression(e,t){return e.visitInstantiateExpr(this,t)}clone(){return new e(this.classExpr.clone(),this.args.map(e=>e.clone()),this.type,this.sourceSpan)}},_t=class e extends ft{body;flags;constructor(e,t,n,r){super(null,n,r),this.body=e,this.flags=t}isEquivalent(t){return t instanceof e&&this.body===t.body&&this.flags===t.flags}isConstant(){return!0}visitExpression(e,t){return e.visitRegularExpressionLiteral(this,t)}clone(){return new e(this.body,this.flags,this.sourceSpan)}},vt=class e extends ft{value;constructor(e,t,n,r){super(t,n,r),this.value=e}isEquivalent(t){return t instanceof e&&this.value===t.value}isConstant(){return!0}visitExpression(e,t){return e.visitLiteralExpr(this,t)}clone(){return new e(this.value,this.type,this.sourceSpan)}},yt=class e extends ft{value;typeParams;constructor(e,t,n=null,r,i){super(t,r,i),this.value=e,this.typeParams=n}isEquivalent(t){return t instanceof e&&this.value.name===t.value.name&&this.value.moduleName===t.value.moduleName}isConstant(){return!1}visitExpression(e,t){return e.visitExternalExpr(this,t)}clone(){return new e(this.value,this.type,this.typeParams,this.sourceSpan)}},bt=class e extends ft{condition;falseCase;trueCase;constructor(e,t,n=null,r,i,a){super(r||t.type,i,a),this.condition=e,this.falseCase=n,this.trueCase=t}isEquivalent(t){return t instanceof e&&this.condition.isEquivalent(t.condition)&&this.trueCase.isEquivalent(t.trueCase)&<(this.falseCase,t.falseCase)}isConstant(){return!1}visitExpression(e,t){return e.visitConditionalExpr(this,t)}clone(){return new e(this.condition.clone(),this.trueCase.clone(),this.falseCase?.clone(),this.type,this.sourceSpan)}},xt=class e extends ft{operator;rhs;lhs;constructor(e,t,n,r,i,a){super(r||t.type,i,a),this.operator=e,this.rhs=n,this.lhs=t}isEquivalent(t){return t instanceof e&&this.operator===t.operator&&this.lhs.isEquivalent(t.lhs)&&this.rhs.isEquivalent(t.rhs)}isConstant(){return!1}visitExpression(e,t){return e.visitBinaryOperatorExpr(this,t)}clone(){return new e(this.operator,this.lhs.clone(),this.rhs.clone(),this.type,this.sourceSpan)}isAssignment(){let e=this.operator;return e===y.Assign||e===y.AdditionAssignment||e===y.SubtractionAssignment||e===y.MultiplicationAssignment||e===y.DivisionAssignment||e===y.RemainderAssignment||e===y.ExponentiationAssignment||e===y.AndAssignment||e===y.OrAssignment||e===y.NullishCoalesceAssignment}},St=class e extends ft{receiver;name;isOptional;constructor(e,t,n,r,i,a=!1){super(n,r,i),this.receiver=e,this.name=t,this.isOptional=a}get index(){return this.name}isEquivalent(t){return t instanceof e&&this.receiver.isEquivalent(t.receiver)&&this.name===t.name&&this.isOptional===t.isOptional}isConstant(){return!1}visitExpression(e,t){return e.visitReadPropExpr(this,t)}set(e){return new xt(y.Assign,this.receiver.prop(this.name),e,null,this.sourceSpan)}clone(){return new e(this.receiver.clone(),this.name,this.type,this.sourceSpan,[],this.isOptional)}},Ct=class e extends ft{receiver;index;isOptional;constructor(e,t,n,r,i,a=!1){super(n,r,i),this.receiver=e,this.index=t,this.isOptional=a}isEquivalent(t){return t instanceof e&&this.receiver.isEquivalent(t.receiver)&&this.index.isEquivalent(t.index)&&this.isOptional===t.isOptional}isConstant(){return!1}visitExpression(e,t){return e.visitReadKeyExpr(this,t)}set(e){return new xt(y.Assign,this.receiver.key(this.index),e,null,this.sourceSpan)}clone(){return new e(this.receiver.clone(),this.index.clone(),this.type,this.sourceSpan,[],this.isOptional)}},wt=class e extends ft{entries;constructor(e,t,n,r){super(t,n,r),this.entries=e}isConstant(){return this.entries.every(e=>e.isConstant())}isEquivalent(t){return t instanceof e&&dt(this.entries,t.entries)}visitExpression(e,t){return e.visitLiteralArrayExpr(this,t)}clone(){return new e(this.entries.map(e=>e.clone()),this.type,this.sourceSpan)}},Tt=class e{expression;constructor(e){this.expression=e}isEquivalent(t){return t instanceof e&&this.expression.isEquivalent(t.expression)}clone(){return new e(this.expression.clone())}isConstant(){return this.expression.isConstant()}},Et=class e extends ft{entries;valueType=null;constructor(e,t,n,r){super(t,n,r),this.entries=e,t&&(this.valueType=t.valueType)}isEquivalent(t){return t instanceof e&&dt(this.entries,t.entries)}isConstant(){return this.entries.every(e=>e.isConstant())}visitExpression(e,t){return e.visitLiteralMapExpr(this,t)}clone(){let t=this.entries.map(e=>e.clone());return new e(t,this.type,this.sourceSpan)}},Dt=class e extends ft{expression;constructor(e,t,n){super(null,t,n),this.expression=e}isEquivalent(t){return t instanceof e&&this.expression.isEquivalent(t.expression)}isConstant(){return this.expression.isConstant()}visitExpression(e,t){return e.visitSpreadElementExpr(this,t)}clone(){return new e(this.expression.clone(),this.sourceSpan)}},Ot=new vt(null,ct,null),kt=(function(e){return e[e.None=0]=`None`,e[e.Final=1]=`Final`,e[e.Private=2]=`Private`,e[e.Exported=4]=`Exported`,e[e.Static=8]=`Static`,e})(kt||{}),At=class{modifiers;sourceSpan;leadingComments;constructor(e=kt.None,t=null,n){this.modifiers=e,this.sourceSpan=t,this.leadingComments=n}hasModifier(e){return(this.modifiers&e)!==0}addLeadingComment(e){this.leadingComments=this.leadingComments??[],this.leadingComments.push(e)}},jt=class e extends At{expr;constructor(e,t,n){super(kt.None,t,n),this.expr=e}isEquivalent(t){return t instanceof e&&this.expr.isEquivalent(t.expr)}visitStatement(e,t){return e.visitExpressionStmt(this,t)}};(class e{static INSTANCE=new e;keyOf(e){if(e instanceof vt&&typeof e.value==`string`)return`"${e.value}"`;if(e instanceof vt)return String(e.value);if(e instanceof _t)return`/${e.body}/${e.flags??``}`;if(e instanceof wt){let t=[];for(let n of e.entries)t.push(this.keyOf(n));return`[${t.join(`,`)}]`}if(e instanceof Et){let t=[];for(let n of e.entries)if(n instanceof Tt)t.push(`...`+this.keyOf(n.expression));else{let e=n.key;n.quoted&&(e=`"${e}"`),t.push(e+`:`+this.keyOf(n.value))}return`{${t.join(`,`)}}`}if(e instanceof yt)return`import("${e.value.moduleName}", ${e.value.name})`;if(e instanceof pt)return`read(${e.name})`;if(e instanceof mt)return`typeof(${this.keyOf(e.expr)})`;if(e instanceof Dt)return`...${this.keyOf(e.expression)}`;throw Error(`${this.constructor.name} does not handle expressions of type ${e.constructor.name}`)}});var b=`@angular/core`,x=(()=>{class e{static core={name:null,moduleName:b};static namespaceHTML={name:`ɵɵnamespaceHTML`,moduleName:b};static namespaceMathML={name:`ɵɵnamespaceMathML`,moduleName:b};static namespaceSVG={name:`ɵɵnamespaceSVG`,moduleName:b};static element={name:`ɵɵelement`,moduleName:b};static elementStart={name:`ɵɵelementStart`,moduleName:b};static elementEnd={name:`ɵɵelementEnd`,moduleName:b};static foreignComponent={name:`ɵɵforeignComponent`,moduleName:b};static foreignContent={name:`ɵɵforeignContent`,moduleName:b};static foreignContentFn={name:`ɵɵforeignContentFn`,moduleName:b};static domElement={name:`ɵɵdomElement`,moduleName:b};static domElementStart={name:`ɵɵdomElementStart`,moduleName:b};static domElementEnd={name:`ɵɵdomElementEnd`,moduleName:b};static domElementContainer={name:`ɵɵdomElementContainer`,moduleName:b};static domElementContainerStart={name:`ɵɵdomElementContainerStart`,moduleName:b};static domElementContainerEnd={name:`ɵɵdomElementContainerEnd`,moduleName:b};static domTemplate={name:`ɵɵdomTemplate`,moduleName:b};static domListener={name:`ɵɵdomListener`,moduleName:b};static advance={name:`ɵɵadvance`,moduleName:b};static syntheticHostProperty={name:`ɵɵsyntheticHostProperty`,moduleName:b};static syntheticHostListener={name:`ɵɵsyntheticHostListener`,moduleName:b};static attribute={name:`ɵɵattribute`,moduleName:b};static classProp={name:`ɵɵclassProp`,moduleName:b};static elementContainerStart={name:`ɵɵelementContainerStart`,moduleName:b};static elementContainerEnd={name:`ɵɵelementContainerEnd`,moduleName:b};static elementContainer={name:`ɵɵelementContainer`,moduleName:b};static styleMap={name:`ɵɵstyleMap`,moduleName:b};static classMap={name:`ɵɵclassMap`,moduleName:b};static styleProp={name:`ɵɵstyleProp`,moduleName:b};static interpolate={name:`ɵɵinterpolate`,moduleName:b};static interpolate1={name:`ɵɵinterpolate1`,moduleName:b};static interpolate2={name:`ɵɵinterpolate2`,moduleName:b};static interpolate3={name:`ɵɵinterpolate3`,moduleName:b};static interpolate4={name:`ɵɵinterpolate4`,moduleName:b};static interpolate5={name:`ɵɵinterpolate5`,moduleName:b};static interpolate6={name:`ɵɵinterpolate6`,moduleName:b};static interpolate7={name:`ɵɵinterpolate7`,moduleName:b};static interpolate8={name:`ɵɵinterpolate8`,moduleName:b};static interpolateV={name:`ɵɵinterpolateV`,moduleName:b};static nextContext={name:`ɵɵnextContext`,moduleName:b};static resetView={name:`ɵɵresetView`,moduleName:b};static templateCreate={name:`ɵɵtemplate`,moduleName:b};static defer={name:`ɵɵdefer`,moduleName:b};static deferWhen={name:`ɵɵdeferWhen`,moduleName:b};static deferOnIdle={name:`ɵɵdeferOnIdle`,moduleName:b};static deferOnImmediate={name:`ɵɵdeferOnImmediate`,moduleName:b};static deferOnTimer={name:`ɵɵdeferOnTimer`,moduleName:b};static deferOnHover={name:`ɵɵdeferOnHover`,moduleName:b};static deferOnInteraction={name:`ɵɵdeferOnInteraction`,moduleName:b};static deferOnViewport={name:`ɵɵdeferOnViewport`,moduleName:b};static deferPrefetchWhen={name:`ɵɵdeferPrefetchWhen`,moduleName:b};static deferPrefetchOnIdle={name:`ɵɵdeferPrefetchOnIdle`,moduleName:b};static deferPrefetchOnImmediate={name:`ɵɵdeferPrefetchOnImmediate`,moduleName:b};static deferPrefetchOnTimer={name:`ɵɵdeferPrefetchOnTimer`,moduleName:b};static deferPrefetchOnHover={name:`ɵɵdeferPrefetchOnHover`,moduleName:b};static deferPrefetchOnInteraction={name:`ɵɵdeferPrefetchOnInteraction`,moduleName:b};static deferPrefetchOnViewport={name:`ɵɵdeferPrefetchOnViewport`,moduleName:b};static deferHydrateWhen={name:`ɵɵdeferHydrateWhen`,moduleName:b};static deferHydrateNever={name:`ɵɵdeferHydrateNever`,moduleName:b};static deferHydrateOnIdle={name:`ɵɵdeferHydrateOnIdle`,moduleName:b};static deferHydrateOnImmediate={name:`ɵɵdeferHydrateOnImmediate`,moduleName:b};static deferHydrateOnTimer={name:`ɵɵdeferHydrateOnTimer`,moduleName:b};static deferHydrateOnHover={name:`ɵɵdeferHydrateOnHover`,moduleName:b};static deferHydrateOnInteraction={name:`ɵɵdeferHydrateOnInteraction`,moduleName:b};static deferHydrateOnViewport={name:`ɵɵdeferHydrateOnViewport`,moduleName:b};static deferEnableTimerScheduling={name:`ɵɵdeferEnableTimerScheduling`,moduleName:b};static enableIncrementalHydrationRuntime={name:`ɵɵenableIncrementalHydrationRuntime`,moduleName:b};static conditionalCreate={name:`ɵɵconditionalCreate`,moduleName:b};static conditionalBranchCreate={name:`ɵɵconditionalBranchCreate`,moduleName:b};static conditional={name:`ɵɵconditional`,moduleName:b};static repeater={name:`ɵɵrepeater`,moduleName:b};static repeaterCreate={name:`ɵɵrepeaterCreate`,moduleName:b};static repeaterTrackByIndex={name:`ɵɵrepeaterTrackByIndex`,moduleName:b};static repeaterTrackByIdentity={name:`ɵɵrepeaterTrackByIdentity`,moduleName:b};static componentInstance={name:`ɵɵcomponentInstance`,moduleName:b};static text={name:`ɵɵtext`,moduleName:b};static enableBindings={name:`ɵɵenableBindings`,moduleName:b};static disableBindings={name:`ɵɵdisableBindings`,moduleName:b};static getCurrentView={name:`ɵɵgetCurrentView`,moduleName:b};static textInterpolate={name:`ɵɵtextInterpolate`,moduleName:b};static textInterpolate1={name:`ɵɵtextInterpolate1`,moduleName:b};static textInterpolate2={name:`ɵɵtextInterpolate2`,moduleName:b};static textInterpolate3={name:`ɵɵtextInterpolate3`,moduleName:b};static textInterpolate4={name:`ɵɵtextInterpolate4`,moduleName:b};static textInterpolate5={name:`ɵɵtextInterpolate5`,moduleName:b};static textInterpolate6={name:`ɵɵtextInterpolate6`,moduleName:b};static textInterpolate7={name:`ɵɵtextInterpolate7`,moduleName:b};static textInterpolate8={name:`ɵɵtextInterpolate8`,moduleName:b};static textInterpolateV={name:`ɵɵtextInterpolateV`,moduleName:b};static restoreView={name:`ɵɵrestoreView`,moduleName:b};static pureFunction0={name:`ɵɵpureFunction0`,moduleName:b};static pureFunction1={name:`ɵɵpureFunction1`,moduleName:b};static pureFunction2={name:`ɵɵpureFunction2`,moduleName:b};static pureFunction3={name:`ɵɵpureFunction3`,moduleName:b};static pureFunction4={name:`ɵɵpureFunction4`,moduleName:b};static pureFunction5={name:`ɵɵpureFunction5`,moduleName:b};static pureFunction6={name:`ɵɵpureFunction6`,moduleName:b};static pureFunction7={name:`ɵɵpureFunction7`,moduleName:b};static pureFunction8={name:`ɵɵpureFunction8`,moduleName:b};static pureFunctionV={name:`ɵɵpureFunctionV`,moduleName:b};static pipeBind1={name:`ɵɵpipeBind1`,moduleName:b};static pipeBind2={name:`ɵɵpipeBind2`,moduleName:b};static pipeBind3={name:`ɵɵpipeBind3`,moduleName:b};static pipeBind4={name:`ɵɵpipeBind4`,moduleName:b};static pipeBindV={name:`ɵɵpipeBindV`,moduleName:b};static domProperty={name:`ɵɵdomProperty`,moduleName:b};static ariaProperty={name:`ɵɵariaProperty`,moduleName:b};static property={name:`ɵɵproperty`,moduleName:b};static control={name:`ɵɵcontrol`,moduleName:b};static controlCreate={name:`ɵɵcontrolCreate`,moduleName:b};static animationEnterListener={name:`ɵɵanimateEnterListener`,moduleName:b};static animationLeaveListener={name:`ɵɵanimateLeaveListener`,moduleName:b};static animationEnter={name:`ɵɵanimateEnter`,moduleName:b};static animationLeave={name:`ɵɵanimateLeave`,moduleName:b};static i18n={name:`ɵɵi18n`,moduleName:b};static i18nAttributes={name:`ɵɵi18nAttributes`,moduleName:b};static i18nExp={name:`ɵɵi18nExp`,moduleName:b};static i18nStart={name:`ɵɵi18nStart`,moduleName:b};static i18nEnd={name:`ɵɵi18nEnd`,moduleName:b};static i18nApply={name:`ɵɵi18nApply`,moduleName:b};static i18nPostprocess={name:`ɵɵi18nPostprocess`,moduleName:b};static pipe={name:`ɵɵpipe`,moduleName:b};static projection={name:`ɵɵprojection`,moduleName:b};static projectionDef={name:`ɵɵprojectionDef`,moduleName:b};static reference={name:`ɵɵreference`,moduleName:b};static inject={name:`ɵɵinject`,moduleName:b};static injectAttribute={name:`ɵɵinjectAttribute`,moduleName:b};static directiveInject={name:`ɵɵdirectiveInject`,moduleName:b};static invalidFactory={name:`ɵɵinvalidFactory`,moduleName:b};static invalidFactoryDep={name:`ɵɵinvalidFactoryDep`,moduleName:b};static templateRefExtractor={name:`ɵɵtemplateRefExtractor`,moduleName:b};static forwardRef={name:`forwardRef`,moduleName:b};static resolveForwardRef={name:`resolveForwardRef`,moduleName:b};static replaceMetadata={name:`ɵɵreplaceMetadata`,moduleName:b};static getReplaceMetadataURL={name:`ɵɵgetReplaceMetadataURL`,moduleName:b};static ɵɵdefineInjectable={name:`ɵɵdefineInjectable`,moduleName:b};static declareInjectable={name:`ɵɵngDeclareInjectable`,moduleName:b};static InjectableDeclaration={name:`ɵɵInjectableDeclaration`,moduleName:b};static defineService={name:`ɵɵdefineService`,moduleName:b};static declareService={name:`ɵɵngDeclareService`,moduleName:b};static resolveWindow={name:`ɵɵresolveWindow`,moduleName:b};static resolveDocument={name:`ɵɵresolveDocument`,moduleName:b};static resolveBody={name:`ɵɵresolveBody`,moduleName:b};static getComponentDepsFactory={name:`ɵɵgetComponentDepsFactory`,moduleName:b};static defineComponent={name:`ɵɵdefineComponent`,moduleName:b};static declareComponent={name:`ɵɵngDeclareComponent`,moduleName:b};static setComponentScope={name:`ɵɵsetComponentScope`,moduleName:b};static ChangeDetectionStrategy={name:`ChangeDetectionStrategy`,moduleName:b};static ViewEncapsulation={name:`ViewEncapsulation`,moduleName:b};static ComponentDeclaration={name:`ɵɵComponentDeclaration`,moduleName:b};static FactoryDeclaration={name:`ɵɵFactoryDeclaration`,moduleName:b};static declareFactory={name:`ɵɵngDeclareFactory`,moduleName:b};static FactoryTarget={name:`ɵɵFactoryTarget`,moduleName:b};static defineDirective={name:`ɵɵdefineDirective`,moduleName:b};static declareDirective={name:`ɵɵngDeclareDirective`,moduleName:b};static DirectiveDeclaration={name:`ɵɵDirectiveDeclaration`,moduleName:b};static InjectorDef={name:`ɵɵInjectorDef`,moduleName:b};static InjectorDeclaration={name:`ɵɵInjectorDeclaration`,moduleName:b};static defineInjector={name:`ɵɵdefineInjector`,moduleName:b};static declareInjector={name:`ɵɵngDeclareInjector`,moduleName:b};static NgModuleDeclaration={name:`ɵɵNgModuleDeclaration`,moduleName:b};static ModuleWithProviders={name:`ModuleWithProviders`,moduleName:b};static defineNgModule={name:`ɵɵdefineNgModule`,moduleName:b};static declareNgModule={name:`ɵɵngDeclareNgModule`,moduleName:b};static setNgModuleScope={name:`ɵɵsetNgModuleScope`,moduleName:b};static registerNgModuleType={name:`ɵɵregisterNgModuleType`,moduleName:b};static PipeDeclaration={name:`ɵɵPipeDeclaration`,moduleName:b};static definePipe={name:`ɵɵdefinePipe`,moduleName:b};static declarePipe={name:`ɵɵngDeclarePipe`,moduleName:b};static declareClassMetadata={name:`ɵɵngDeclareClassMetadata`,moduleName:b};static declareClassMetadataAsync={name:`ɵɵngDeclareClassMetadataAsync`,moduleName:b};static setClassMetadata={name:`ɵsetClassMetadata`,moduleName:b};static setClassMetadataAsync={name:`ɵsetClassMetadataAsync`,moduleName:b};static setClassDebugInfo={name:`ɵsetClassDebugInfo`,moduleName:b};static queryRefresh={name:`ɵɵqueryRefresh`,moduleName:b};static viewQuery={name:`ɵɵviewQuery`,moduleName:b};static loadQuery={name:`ɵɵloadQuery`,moduleName:b};static contentQuery={name:`ɵɵcontentQuery`,moduleName:b};static viewQuerySignal={name:`ɵɵviewQuerySignal`,moduleName:b};static contentQuerySignal={name:`ɵɵcontentQuerySignal`,moduleName:b};static queryAdvance={name:`ɵɵqueryAdvance`,moduleName:b};static twoWayProperty={name:`ɵɵtwoWayProperty`,moduleName:b};static twoWayBindingSet={name:`ɵɵtwoWayBindingSet`,moduleName:b};static twoWayListener={name:`ɵɵtwoWayListener`,moduleName:b};static declareLet={name:`ɵɵdeclareLet`,moduleName:b};static storeLet={name:`ɵɵstoreLet`,moduleName:b};static readContextLet={name:`ɵɵreadContextLet`,moduleName:b};static arrowFunction={name:`ɵɵarrowFunction`,moduleName:b};static attachSourceLocations={name:`ɵɵattachSourceLocations`,moduleName:b};static NgOnChangesFeature={name:`ɵɵNgOnChangesFeature`,moduleName:b};static ControlFeature={name:`ɵɵControlFeature`,moduleName:b};static InheritDefinitionFeature={name:`ɵɵInheritDefinitionFeature`,moduleName:b};static ProvidersFeature={name:`ɵɵProvidersFeature`,moduleName:b};static HostDirectivesFeature={name:`ɵɵHostDirectivesFeature`,moduleName:b};static ExternalStylesFeature={name:`ɵɵExternalStylesFeature`,moduleName:b};static listener={name:`ɵɵlistener`,moduleName:b};static getInheritedFactory={name:`ɵɵgetInheritedFactory`,moduleName:b};static sanitizeHtml={name:`ɵɵsanitizeHtml`,moduleName:b};static sanitizeStyle={name:`ɵɵsanitizeStyle`,moduleName:b};static validateAttribute={name:`ɵɵvalidateAttribute`,moduleName:b};static sanitizeResourceUrl={name:`ɵɵsanitizeResourceUrl`,moduleName:b};static sanitizeScript={name:`ɵɵsanitizeScript`,moduleName:b};static sanitizeUrl={name:`ɵɵsanitizeUrl`,moduleName:b};static sanitizeUrlOrResourceUrl={name:`ɵɵsanitizeUrlOrResourceUrl`,moduleName:b};static trustConstantHtml={name:`ɵɵtrustConstantHtml`,moduleName:b};static trustConstantResourceUrl={name:`ɵɵtrustConstantResourceUrl`,moduleName:b};static inputDecorator={name:`Input`,moduleName:b};static outputDecorator={name:`Output`,moduleName:b};static viewChildDecorator={name:`ViewChild`,moduleName:b};static viewChildrenDecorator={name:`ViewChildren`,moduleName:b};static contentChildDecorator={name:`ContentChild`,moduleName:b};static contentChildrenDecorator={name:`ContentChildren`,moduleName:b};static InputSignalBrandWriteType={name:`ɵINPUT_SIGNAL_BRAND_WRITE_TYPE`,moduleName:b};static UnwrapDirectiveSignalInputs={name:`ɵUnwrapDirectiveSignalInputs`,moduleName:b};static unwrapWritableSignal={name:`ɵunwrapWritableSignal`,moduleName:b};static assertType={name:`ɵassertType`,moduleName:b}}return e})();y.And,y.Bigger,y.BiggerEquals,y.BitwiseOr,y.BitwiseAnd,y.Divide,y.Assign,y.Equals,y.Identical,y.Lower,y.LowerEquals,y.Minus,y.Modulo,y.Exponentiation,y.Multiply,y.NotEquals,y.NotIdentical,y.NullishCoalesce,y.Or,y.Plus,y.In,y.InstanceOf,y.AdditionAssignment,y.SubtractionAssignment,y.MultiplicationAssignment,y.DivisionAssignment,y.RemainderAssignment,y.ExponentiationAssignment,y.AndAssignment,y.OrAssignment,y.NullishCoalesceAssignment;var Mt=class{span;sourceSpan;constructor(e,t){this.span=e,this.sourceSpan=t}toString(){return`AST`}},Nt=class extends Mt{receiver;args;argumentSpan;constructor(e,t,n,r,i){super(e,t),this.receiver=n,this.args=r,this.argumentSpan=i}visit(e,t=null){return e.visitCall(this,t)}},Pt=(function(e){return e[e.Property=0]=`Property`,e[e.Attribute=1]=`Attribute`,e[e.Class=2]=`Class`,e[e.Style=3]=`Style`,e[e.LegacyAnimation=4]=`LegacyAnimation`,e[e.TwoWay=5]=`TwoWay`,e[e.Animation=6]=`Animation`,e})(Pt||{}),Ft=`(:(where|is)\\()?`,It=`-shadowcsshost`,Lt=`-shadowcsscontext`,Rt=`[^)(]*`,zt=String.raw`(?:\(${Rt}\)|${Rt})+?`,Bt=String.raw`(?:\(${zt}\)|${Rt})+?`,Vt=String.raw`(?:\((${Bt})\))`;String.raw`(:nth-[-\w]+)`+Vt,It+Vt+``,`${Ft}`,Lt+Vt+``;var S=(function(e){return e[e.ListEnd=0]=`ListEnd`,e[e.Statement=1]=`Statement`,e[e.Variable=2]=`Variable`,e[e.ElementStart=3]=`ElementStart`,e[e.Element=4]=`Element`,e[e.ForeignComponent=5]=`ForeignComponent`,e[e.Template=6]=`Template`,e[e.ElementEnd=7]=`ElementEnd`,e[e.ContainerStart=8]=`ContainerStart`,e[e.Container=9]=`Container`,e[e.ContainerEnd=10]=`ContainerEnd`,e[e.DisableBindings=11]=`DisableBindings`,e[e.ConditionalCreate=12]=`ConditionalCreate`,e[e.ConditionalBranchCreate=13]=`ConditionalBranchCreate`,e[e.Conditional=14]=`Conditional`,e[e.EnableBindings=15]=`EnableBindings`,e[e.Text=16]=`Text`,e[e.Listener=17]=`Listener`,e[e.InterpolateText=18]=`InterpolateText`,e[e.Binding=19]=`Binding`,e[e.Property=20]=`Property`,e[e.StyleProp=21]=`StyleProp`,e[e.ClassProp=22]=`ClassProp`,e[e.StyleMap=23]=`StyleMap`,e[e.ClassMap=24]=`ClassMap`,e[e.Advance=25]=`Advance`,e[e.Pipe=26]=`Pipe`,e[e.Attribute=27]=`Attribute`,e[e.ExtractedAttribute=28]=`ExtractedAttribute`,e[e.Defer=29]=`Defer`,e[e.DeferOn=30]=`DeferOn`,e[e.DeferWhen=31]=`DeferWhen`,e[e.I18nMessage=32]=`I18nMessage`,e[e.DomProperty=33]=`DomProperty`,e[e.Namespace=34]=`Namespace`,e[e.ProjectionDef=35]=`ProjectionDef`,e[e.EnableIncrementalHydrationRuntime=36]=`EnableIncrementalHydrationRuntime`,e[e.Projection=37]=`Projection`,e[e.Content=38]=`Content`,e[e.RepeaterCreate=39]=`RepeaterCreate`,e[e.Repeater=40]=`Repeater`,e[e.TwoWayProperty=41]=`TwoWayProperty`,e[e.TwoWayListener=42]=`TwoWayListener`,e[e.DeclareLet=43]=`DeclareLet`,e[e.StoreLet=44]=`StoreLet`,e[e.I18nStart=45]=`I18nStart`,e[e.I18n=46]=`I18n`,e[e.I18nEnd=47]=`I18nEnd`,e[e.I18nExpression=48]=`I18nExpression`,e[e.I18nApply=49]=`I18nApply`,e[e.IcuStart=50]=`IcuStart`,e[e.IcuEnd=51]=`IcuEnd`,e[e.IcuPlaceholder=52]=`IcuPlaceholder`,e[e.I18nContext=53]=`I18nContext`,e[e.I18nAttributes=54]=`I18nAttributes`,e[e.SourceLocation=55]=`SourceLocation`,e[e.Animation=56]=`Animation`,e[e.AnimationString=57]=`AnimationString`,e[e.AnimationBinding=58]=`AnimationBinding`,e[e.AnimationListener=59]=`AnimationListener`,e[e.Control=60]=`Control`,e[e.ControlCreate=61]=`ControlCreate`,e})(S||{}),Ht=(function(e){return e[e.LexicalRead=0]=`LexicalRead`,e[e.Context=1]=`Context`,e[e.TrackContext=2]=`TrackContext`,e[e.ReadVariable=3]=`ReadVariable`,e[e.NextContext=4]=`NextContext`,e[e.Reference=5]=`Reference`,e[e.StoreLet=6]=`StoreLet`,e[e.ContextLetReference=7]=`ContextLetReference`,e[e.GetCurrentView=8]=`GetCurrentView`,e[e.RestoreView=9]=`RestoreView`,e[e.ResetView=10]=`ResetView`,e[e.PureFunctionExpr=11]=`PureFunctionExpr`,e[e.PureFunctionParameterExpr=12]=`PureFunctionParameterExpr`,e[e.PipeBinding=13]=`PipeBinding`,e[e.PipeBindingVariadic=14]=`PipeBindingVariadic`,e[e.SafePropertyRead=15]=`SafePropertyRead`,e[e.SafeKeyedRead=16]=`SafeKeyedRead`,e[e.SafeNavigationMigration=17]=`SafeNavigationMigration`,e[e.SafeTernaryExpr=18]=`SafeTernaryExpr`,e[e.EmptyExpr=19]=`EmptyExpr`,e[e.AssignTemporaryExpr=20]=`AssignTemporaryExpr`,e[e.ReadTemporaryExpr=21]=`ReadTemporaryExpr`,e[e.SlotLiteralExpr=22]=`SlotLiteralExpr`,e[e.ConditionalCase=23]=`ConditionalCase`,e[e.ConstCollected=24]=`ConstCollected`,e[e.TwoWayBindingSet=25]=`TwoWayBindingSet`,e[e.ForeignContent=26]=`ForeignContent`,e[e.ArrowFunction=27]=`ArrowFunction`,e})(Ht||{}),Ut=(function(e){return e[e.None=0]=`None`,e[e.AlwaysInline=1]=`AlwaysInline`,e})(Ut||{}),Wt=(function(e){return e[e.Context=0]=`Context`,e[e.Identifier=1]=`Identifier`,e[e.SavedView=2]=`SavedView`,e[e.Alias=3]=`Alias`,e})(Wt||{}),Gt=(function(e){return e[e.Attribute=0]=`Attribute`,e[e.ClassName=1]=`ClassName`,e[e.StyleProperty=2]=`StyleProperty`,e[e.Property=3]=`Property`,e[e.Template=4]=`Template`,e[e.I18n=5]=`I18n`,e[e.LegacyAnimation=6]=`LegacyAnimation`,e[e.TwoWayProperty=7]=`TwoWayProperty`,e[e.Animation=8]=`Animation`,e})(Gt||{}),Kt=(function(e){return e[e.Creation=0]=`Creation`,e[e.Postproccessing=1]=`Postproccessing`,e})(Kt||{}),qt=(function(e){return e[e.I18nText=0]=`I18nText`,e[e.I18nAttribute=1]=`I18nAttribute`,e})(qt||{}),Jt=(function(e){return e[e.None=0]=`None`,e[e.ElementTag=1]=`ElementTag`,e[e.TemplateTag=2]=`TemplateTag`,e[e.OpenTag=4]=`OpenTag`,e[e.CloseTag=8]=`CloseTag`,e[e.ExpressionIndex=16]=`ExpressionIndex`,e})(Jt||{}),Yt=(function(e){return e[e.HTML=0]=`HTML`,e[e.SVG=1]=`SVG`,e[e.Math=2]=`Math`,e})(Yt||{}),Xt=(function(e){return e[e.Idle=0]=`Idle`,e[e.Immediate=1]=`Immediate`,e[e.Timer=2]=`Timer`,e[e.Hover=3]=`Hover`,e[e.Interaction=4]=`Interaction`,e[e.Viewport=5]=`Viewport`,e[e.Never=6]=`Never`,e})(Xt||{}),Zt=(function(e){return e[e.RootI18n=0]=`RootI18n`,e[e.Icu=1]=`Icu`,e[e.Attr=2]=`Attr`,e})(Zt||{}),Qt=(function(e){return e[e.NgTemplate=0]=`NgTemplate`,e[e.Structural=1]=`Structural`,e[e.Block=2]=`Block`,e})(Qt||{}),$t=(function(e){return e[e.None=0]=`None`,e[e.InChildOperation=1]=`InChildOperation`,e[e.InArrowFunctionOperation=2]=`InArrowFunctionOperation`,e[e.InSafeNavigationMigration=4]=`InSafeNavigationMigration`,e})($t||{});S.Element,S.ElementStart,S.Container,S.ContainerStart,S.Template,S.RepeaterCreate,S.ConditionalCreate,S.ConditionalBranchCreate;var C=(function(e){return e[e.Tmpl=0]=`Tmpl`,e[e.Host=1]=`Host`,e[e.Both=2]=`Both`,e})(C||{}),en=(function(e){return e[e.Full=0]=`Full`,e[e.DomOnly=1]=`DomOnly`,e})(en||{});x.ariaProperty,x.ariaProperty,x.attribute,x.attribute,x.classProp,x.classProp,x.element,x.element,x.elementContainer,x.elementContainer,x.elementContainerEnd,x.elementContainerEnd,x.elementContainerStart,x.elementContainerStart,x.elementEnd,x.elementEnd,x.elementStart,x.elementStart,x.domProperty,x.domProperty,x.i18nExp,x.i18nExp,x.listener,x.listener,x.listener,x.listener,x.property,x.property,x.styleProp,x.styleProp,x.syntheticHostListener,x.syntheticHostListener,x.syntheticHostProperty,x.syntheticHostProperty,x.templateCreate,x.templateCreate,x.twoWayProperty,x.twoWayProperty,x.twoWayListener,x.twoWayListener,x.declareLet,x.declareLet,x.conditionalCreate,x.conditionalBranchCreate,x.conditionalBranchCreate,x.conditionalBranchCreate,x.domElement,x.domElement,x.domElementStart,x.domElementStart,x.domElementEnd,x.domElementEnd,x.domElementContainer,x.domElementContainer,x.domElementContainerStart,x.domElementContainerStart,x.domElementContainerEnd,x.domElementContainerEnd,x.domListener,x.domListener,x.domTemplate,x.domTemplate,x.animationEnter,x.animationEnter,x.animationLeave,x.animationLeave,x.animationEnterListener,x.animationEnterListener,x.animationLeaveListener,x.animationLeaveListener,y.And,y.Bigger,y.BiggerEquals,y.BitwiseOr,y.BitwiseAnd,y.Divide,y.Assign,y.Equals,y.Identical,y.Lower,y.LowerEquals,y.Minus,y.Modulo,y.Exponentiation,y.Multiply,y.NotEquals,y.NotIdentical,y.NullishCoalesce,y.Or,y.Plus,y.In,y.InstanceOf,y.AdditionAssignment,y.SubtractionAssignment,y.MultiplicationAssignment,y.DivisionAssignment,y.RemainderAssignment,y.ExponentiationAssignment,y.AndAssignment,y.OrAssignment,y.NullishCoalesceAssignment,S.Property,S.Property,S.Property,S.Attribute,S.Attribute,S.Property,S.TwoWayProperty,S.Container,S.ContainerStart,S.ContainerEnd,S.Element,S.ElementStart,S.ElementEnd,S.Template,S.ElementEnd,S.ElementStart,S.Element,S.ContainerEnd,S.ContainerStart,S.Container,S.I18nEnd,S.I18nStart,S.I18n,S.Pipe;var tn=` \f +\r \v ᠎ - \u2028\u2029  　`;`${tn}`,`${tn}`;var nn=(function(e){return e[e.Character=0]=`Character`,e[e.Identifier=1]=`Identifier`,e[e.PrivateIdentifier=2]=`PrivateIdentifier`,e[e.Keyword=3]=`Keyword`,e[e.String=4]=`String`,e[e.Operator=5]=`Operator`,e[e.Number=6]=`Number`,e[e.RegExpBody=7]=`RegExpBody`,e[e.RegExpFlags=8]=`RegExpFlags`,e[e.Error=9]=`Error`,e})(nn||{}),rn=(function(e){return e[e.Plain=0]=`Plain`,e[e.TemplateLiteralPart=1]=`TemplateLiteralPart`,e[e.TemplateLiteralEnd=2]=`TemplateLiteralEnd`,e})(rn||{});nn.Character,S.StyleMap,S.ClassMap,S.StyleProp,S.ClassProp,S.Attribute,S.Property,S.Attribute,S.Control,S.DomProperty,S.DomProperty,S.Attribute,S.StyleMap,S.ClassMap,S.StyleProp,S.ClassProp,S.Listener,S.TwoWayListener,S.AnimationListener,S.StyleMap,S.ClassMap,S.StyleProp,S.ClassProp,S.Property,S.TwoWayProperty,S.DomProperty,S.Attribute,S.Animation,S.Control,Xt.Idle,x.deferOnIdle,x.deferPrefetchOnIdle,x.deferHydrateOnIdle,Xt.Immediate,x.deferOnImmediate,x.deferPrefetchOnImmediate,x.deferHydrateOnImmediate,Xt.Timer,x.deferOnTimer,x.deferPrefetchOnTimer,x.deferHydrateOnTimer,Xt.Hover,x.deferOnHover,x.deferPrefetchOnHover,x.deferHydrateOnHover,Xt.Interaction,x.deferOnInteraction,x.deferPrefetchOnInteraction,x.deferHydrateOnInteraction,Xt.Viewport,x.deferOnViewport,x.deferPrefetchOnViewport,x.deferHydrateOnViewport,Xt.Never,x.deferHydrateNever,x.deferHydrateNever,x.deferHydrateNever,x.pipeBind1,x.pipeBind2,x.pipeBind3,x.pipeBind4,x.textInterpolate,x.textInterpolate1,x.textInterpolate2,x.textInterpolate3,x.textInterpolate4,x.textInterpolate5,x.textInterpolate6,x.textInterpolate7,x.textInterpolate8,x.textInterpolateV,x.interpolate,x.interpolate1,x.interpolate2,x.interpolate3,x.interpolate4,x.interpolate5,x.interpolate6,x.interpolate7,x.interpolate8,x.interpolateV,x.pureFunction0,x.pureFunction1,x.pureFunction2,x.pureFunction3,x.pureFunction4,x.pureFunction5,x.pureFunction6,x.pureFunction7,x.pureFunction8,x.pureFunctionV,x.resolveWindow,x.resolveDocument,x.resolveBody,rt.HTML,x.sanitizeHtml,rt.RESOURCE_URL,x.sanitizeResourceUrl,rt.SCRIPT,x.sanitizeScript,rt.STYLE,x.sanitizeStyle,rt.URL,x.sanitizeUrl,rt.ATTRIBUTE_NO_BINDING,x.validateAttribute,rt.HTML,x.trustConstantHtml,rt.RESOURCE_URL,x.trustConstantResourceUrl;var an=(function(e){return e[e.None=0]=`None`,e[e.ViewContextRead=1]=`ViewContextRead`,e[e.ViewContextWrite=2]=`ViewContextWrite`,e[e.SideEffectful=4]=`SideEffectful`,e})(an||{});C.Tmpl,C.Tmpl,C.Both,C.Host,C.Tmpl,C.Tmpl,C.Tmpl,C.Both,C.Both,C.Both,C.Tmpl,C.Both,C.Both,C.Tmpl,C.Both,C.Tmpl,C.Both,C.Both,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Both,C.Both,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Both,C.Both,C.Both,C.Tmpl,C.Tmpl,C.Both,C.Tmpl,C.Tmpl,C.Tmpl,C.Both,C.Both,C.Tmpl,C.Both,C.Both,C.Both,C.Both,C.Both,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Both,C.Tmpl,C.Both,C.Tmpl,C.Both,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Both,C.Both,C.Both,Pt.Property,Gt.Property,Pt.TwoWay,Gt.TwoWayProperty,Pt.Attribute,Gt.Attribute,Pt.Class,Gt.ClassName,Pt.Style,Gt.StyleProperty,Pt.LegacyAnimation,Gt.LegacyAnimation,Pt.Animation,Gt.Animation;var on=`%COMP%`;`${on}`,`${on}`,class e{static SINGLETON=new e;static veWillInferAnyFor(t){let n=e.SINGLETON;return t instanceof Nt?t.visit(n):t.receiver.visit(n)}visitUnary(e){return e.expr.visit(this)}visitBinary(e){return e.left.visit(this)||e.right.visit(this)}visitChain(){return!1}visitConditional(e){return e.condition.visit(this)||e.trueExp.visit(this)||e.falseExp.visit(this)}visitCall(){return!0}visitSafeCall(){return!1}visitImplicitReceiver(){return!1}visitThisReceiver(){return!1}visitInterpolation(e){return e.expressions.some(e=>e.visit(this))}visitKeyedRead(){return!1}visitLiteralArray(){return!0}visitLiteralMap(){return!0}visitLiteralPrimitive(){return!1}visitPipe(){return!0}visitPrefixNot(e){return e.expression.visit(this)}visitTypeofExpression(e){return e.expression.visit(this)}visitVoidExpression(e){return e.expression.visit(this)}visitNonNullAssert(e){return e.expression.visit(this)}visitPropertyRead(){return!1}visitSafePropertyRead(){return!1}visitSafeKeyedRead(){return!1}visitTemplateLiteral(){return!1}visitTemplateLiteralElement(){return!1}visitTaggedTemplateLiteral(){return!1}visitParenthesizedExpression(e){return e.expression.visit(this)}visitRegularExpressionLiteral(){return!1}visitSpreadElement(e){return e.expression.visit(this)}visitArrowFunction(e,t){return!1}};var sn=null,cn=!1,ln=1,un=null,dn=Symbol(`SIGNAL`);function w(e){let t=sn;return sn=e,t}function fn(){return sn}var pn={version:0,lastCleanEpoch:0,dirty:!1,producers:void 0,producersTail:void 0,consumers:void 0,consumersTail:void 0,recomputing:!1,consumerAllowSignalWrites:!1,consumerIsAlwaysLive:!1,kind:`unknown`,producerMustRecompute:()=>!1,producerRecomputeValue:()=>{},consumerMarkedDirty:()=>{},consumerOnSignalRead:()=>{}};function mn(e){if(cn)throw Error(``);if(sn===null)return;sn.consumerOnSignalRead(e);let t=sn.producersTail;if(t!==void 0&&t.producer===e)return;let n,r=sn.recomputing;if(r&&(n=t===void 0?sn.producers:t.nextProducer,n!==void 0&&n.producer===e)){sn.producersTail=n,n.lastReadVersion=e.version,n.knownValidAtEpoch=ln;return}let i=e.consumersTail;if(i!==void 0&&i.consumer===sn&&(!r||i.knownValidAtEpoch===ln))return;let a=kn(sn),o={producer:e,consumer:sn,nextProducer:n,prevConsumer:void 0,knownValidAtEpoch:ln,lastReadVersion:e.version,nextConsumer:void 0};sn.producersTail=o,t===void 0?sn.producers=o:t.nextProducer=o,a&&Dn(e,o)}function hn(){ln++}function gn(e){if((!kn(e)||e.dirty)&&(e.dirty||e.lastCleanEpoch!==ln)){if(!e.producerMustRecompute(e)&&!Tn(e)){bn(e);return}e.producerRecomputeValue(e),bn(e)}}function _n(e){if(e.consumers===void 0)return;let t=cn;cn=!0;try{for(let t=e.consumers;t!==void 0;t=t.nextConsumer){let e=t.consumer;e.dirty||yn(e)}}finally{cn=t}}function vn(){return sn?.consumerAllowSignalWrites!==!1}function yn(e){e.dirty=!0,_n(e),e.consumerMarkedDirty?.(e)}function bn(e){e.dirty=!1,e.lastCleanEpoch=ln}function xn(e){return e&&Sn(e),w(e)}function Sn(e){if(e.producersTail?.knownValidAtEpoch===ln){let t=e.producers;for(;t!==void 0;)t.knownValidAtEpoch=null,t=t.nextProducer}e.producersTail=void 0,e.recomputing=!0}function Cn(e,t){w(t),e&&wn(e)}function wn(e){e.recomputing=!1;let t=e.producersTail,n=t===void 0?e.producers:t.nextProducer;if(n!==void 0){if(kn(e))do n=On(n);while(n!==void 0);t===void 0?e.producers=void 0:t.nextProducer=void 0}}function Tn(e){for(let t=e.producers;t!==void 0;t=t.nextProducer){let e=t.producer,n=t.lastReadVersion;if(n!==e.version||(gn(e),n!==e.version))return!0}return!1}function En(e){if(kn(e)){let t=e.producers;for(;t!==void 0;)t=On(t)}e.producers=void 0,e.producersTail=void 0,e.consumers=void 0,e.consumersTail=void 0}function Dn(e,t){let n=e.consumersTail,r=kn(e);if(n===void 0?(t.nextConsumer=void 0,e.consumers=t):(t.nextConsumer=n.nextConsumer,n.nextConsumer=t),t.prevConsumer=n,e.consumersTail=t,!r)for(let t=e.producers;t!==void 0;t=t.nextProducer)Dn(t.producer,t)}function On(e){let t=e.producer,n=e.nextProducer,r=e.nextConsumer,i=e.prevConsumer;if(e.nextConsumer=void 0,e.prevConsumer=void 0,r===void 0?t.consumersTail=i:r.prevConsumer=i,i!==void 0)i.nextConsumer=r;else if(t.consumers=r,!kn(t)){let e=t.producers;for(;e!==void 0;)e=On(e)}return n}function kn(e){return e.consumerIsAlwaysLive||e.consumers!==void 0}function An(e){un?.(e)}function jn(e,t){return Object.is(e,t)}function Mn(e,t){let n=Object.create(In);n.computation=e,t!==void 0&&(n.equal=t);let r=()=>{if(gn(n),mn(n),n.value===Fn)throw n.error;return n.value};return r[dn]=n,An(n),r}var Nn=Symbol(`UNSET`),Pn=Symbol(`COMPUTING`),Fn=Symbol(`ERRORED`),In={...pn,value:Nn,dirty:!0,error:null,equal:jn,kind:`computed`,producerMustRecompute(e){return e.value===Nn||e.value===Pn},producerRecomputeValue(e){if(e.value===Pn)throw Error(``);let t=e.value;e.value=Pn;let n=xn(e),r,i=!1;try{r=e.computation(),w(null),i=t!==Nn&&t!==Fn&&r!==Fn&&e.equal(t,r)}catch(t){r=Fn,e.error=t}finally{Cn(e,n)}if(i){e.value=t;return}e.value=r,e.version++}};function Ln(){throw Error()}var Rn=Ln;function zn(e){Rn(e)}function Bn(e){Rn=e}var Vn=null;function Hn(e,t){let n=Object.create(Kn);n.value=e,t!==void 0&&(n.equal=t);let r=()=>Un(n);return r[dn]=n,An(n),[r,e=>Wn(n,e),e=>Gn(n,e)]}function Un(e){return mn(e),e.value}function Wn(e,t){vn()||zn(e),e.equal(e.value,t)||(e.value=t,qn(e))}function Gn(e,t){vn()||zn(e),Wn(e,t(e.value))}var Kn={...pn,equal:jn,value:void 0,kind:`signal`};function qn(e){e.version++,hn(),_n(e),Vn?.(e)}var Jn={...pn,consumerIsAlwaysLive:!0,consumerAllowSignalWrites:!0,dirty:!0,kind:`effect`};function Yn(e){if(e.dirty=!1,e.version>0&&!Tn(e))return;e.version++;let t=xn(e);try{e.cleanup(),e.fn()}finally{Cn(e,t)}}var Xn=void 0;function Zn(){return Xn}function Qn(e){let t=Xn;return Xn=e,t}var $n=Symbol(`NotFound`);function er(e){return e===$n||e?.name===`ɵNotFound`}function tr(e,t,n){let r=Object.create(ir);r.source=e,r.computation=t,n!=null&&(r.equal=n);let i=()=>{if(gn(r),mn(r),r.value===Fn)throw r.error;return r.value};return i[dn]=r,An(r),i}function nr(e,t){gn(e),Wn(e,t),bn(e)}function rr(e,t){if(gn(e),e.value===Fn)throw e.error;Gn(e,t),bn(e)}var ir={...pn,value:Nn,dirty:!0,error:null,equal:jn,kind:`linkedSignal`,producerMustRecompute(e){return e.value===Nn||e.value===Pn},producerRecomputeValue(e){if(e.value===Pn)throw Error(``);let t=e.value;e.value=Pn;let n=xn(e),r,i=!1;try{let n=e.source(),a=t!==Nn&&t!==Fn,o=a?{source:e.sourceValue,value:t}:void 0;r=e.computation(n,o),e.sourceValue=n,w(null),i=a&&r!==Fn&&e.equal(t,r)}catch(t){r=Fn,e.error=t}finally{Cn(e,n)}if(i){e.value=t;return}e.value=r,e.version++}};function ar(e){let t=w(null);try{return e()}finally{w(t)}}var or=function(e,t){return or=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},or(e,t)};function sr(e,t){if(typeof t!=`function`&&t!==null)throw TypeError(`Class extends value `+String(t)+` is not a constructor or null`);or(e,t);function n(){this.constructor=e}e.prototype=t===null?Object.create(t):(n.prototype=t.prototype,new n)}function cr(e){var t=typeof Symbol==`function`&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&typeof e.length==`number`)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw TypeError(t?`Object is not iterable.`:`Symbol.iterator is not defined.`)}function lr(e,t){var n=typeof Symbol==`function`&&e[Symbol.iterator];if(!n)return e;var r=n.call(e),i,a=[],o;try{for(;(t===void 0||t-->0)&&!(i=r.next()).done;)a.push(i.value)}catch(e){o={error:e}}finally{try{i&&!i.done&&(n=r.return)&&n.call(r)}finally{if(o)throw o.error}}return a}function ur(e,t,n){if(n||arguments.length===2)for(var r=0,i=t.length,a;r0},enumerable:!1,configurable:!0}),t.prototype._trySubscribe=function(t){return this._throwIfClosed(),e.prototype._trySubscribe.call(this,t)},t.prototype._subscribe=function(e){return this._throwIfClosed(),this._checkFinalizedStatuses(e),this._innerSubscribe(e)},t.prototype._innerSubscribe=function(e){var t=this,n=this,r=n.hasError,i=n.isStopped,a=n.observers;return r||i?gr:(this.currentObservers=null,a.push(e),new hr(function(){t.currentObservers=null,mr(a,e)}))},t.prototype._checkFinalizedStatuses=function(e){var t=this,n=t.hasError,r=t.thrownError,i=t.isStopped;n?e.error(r):i&&e.complete()},t.prototype.asObservable=function(){var e=new Hr;return e.source=this,e},t.create=function(e,t){return new Qr(e,t)},t}(Hr),Qr=function(e){sr(t,e);function t(t,n){var r=e.call(this)||this;return r.destination=t,r.source=n,r}return t.prototype.next=function(e){var t,n;(n=(t=this.destination)?.next)==null||n.call(t,e)},t.prototype.error=function(e){var t,n;(n=(t=this.destination)?.error)==null||n.call(t,e)},t.prototype.complete=function(){var e,t;(t=(e=this.destination)?.complete)==null||t.call(e)},t.prototype._subscribe=function(e){return this.source?.subscribe(e)??gr},t}(Zr),$r=function(e){sr(t,e);function t(t){var n=e.call(this)||this;return n._value=t,n}return Object.defineProperty(t.prototype,"value",{get:function(){return this.getValue()},enumerable:!1,configurable:!0}),t.prototype._subscribe=function(t){var n=e.prototype._subscribe.call(this,t);return!n.closed&&t.next(this._value),n},t.prototype.getValue=function(){var e=this,t=e.hasError,n=e.thrownError,r=e._value;if(t)throw n;return this._throwIfClosed(),r},t.prototype.next=function(t){e.prototype.next.call(this,this._value=t)},t}(Zr);function ei(e,t){return qr(function(n,r){var i=0;n.subscribe(Jr(r,function(n){r.next(e.call(t,n,i++))}))})}var ti=`https://angular.dev/best-practices/security#preventing-cross-site-scripting-xss`,T=class extends Error{code;constructor(e,t){super(ri(e,t)),this.code=e}};function ni(e){return`NG0${Math.abs(e)}`}function ri(e,t){return`${ni(e)}${t?`: `+t:``}`}function ii(e){for(let t in e)if(e[t]===ii)return t;throw Error(``)}function ai(e){if(typeof e==`string`)return e;if(Array.isArray(e))return`[${e.map(ai).join(`, `)}]`;if(e==null)return``+e;let t=e.overriddenName||e.name;if(t)return`${t}`;let n=e.toString();if(n==null)return``+n;let r=n.indexOf(` +`);return r>=0?n.slice(0,r):n}function oi(e,t){return e?t?`${e} ${t}`:e:t||``}var si=ii({__forward_ref__:ii});function ci(e){return e.__forward_ref__=ci,e}function li(e){return ui(e)?e():e}function ui(e){return typeof e==`function`&&Object.hasOwn(e,si)&&e.__forward_ref__===ci}function di(e){return{token:e.token,providedIn:e.providedIn||null,factory:e.factory,value:void 0}}function fi(e){return pi(e,gi)}function pi(e,t){return Object.hasOwn(e,t)&&e[t]||null}function mi(e){return(e?.[gi]??null)||null}function hi(e){return e&&Object.hasOwn(e,_i)?e[_i]:null}var gi=ii({ɵprov:ii}),_i=ii({ɵinj:ii}),vi=class{_desc;ngMetadataName=`InjectionToken`;ɵprov;constructor(e,t){this._desc=e,this.ɵprov=void 0,typeof t==`number`?this.__NG_ELEMENT_ID__=t:t!==void 0&&(this.ɵprov=di({token:this,providedIn:t.providedIn||`root`,factory:t.factory}))}get multi(){return this}toString(){return`InjectionToken ${this._desc}`}};function yi(e){return e&&!!e.ɵproviders}var bi=ii({ɵcmp:ii}),xi=ii({ɵdir:ii}),Si=ii({ɵpipe:ii}),Ci=ii({ɵfac:ii}),wi=ii({__NG_ELEMENT_ID__:ii}),Ti=ii({__NG_ENV_ID__:ii});function Ei(e){return ki(e,`@Component`),e[bi]||null}function Di(e){return ki(e,`@Directive`),e[xi]||null}function Oi(e){return ki(e,`@Pipe`),e[Si]||null}function ki(e,t){if(e==null)throw new T(-919,!1)}function Ai(e){return typeof e==`string`?e:e==null?``:String(e)}var ji=ii({ngErrorCode:ii}),Mi=ii({ngErrorMessage:ii}),Ni=ii({ngTokenPath:ii});function Pi(e,t){return Ii(``,-200,t)}function Fi(e,t){throw new T(-201,!1)}function Ii(e,t,n){let r=new T(t,e);return r[ji]=t,r[Mi]=e,n&&(r[Ni]=n),r}function Li(e){return e[ji]}var Ri;function zi(){return Ri}function Bi(e){let t=Ri;return Ri=e,t}function Vi(e,t,n){let r=fi(e);if(r&&r.providedIn==`root`)return r.value===void 0?r.value=r.factory():r.value;if(n&8)return null;if(t!==void 0)return t;Fi(e,``)}var Hi=globalThis,Ui={},Wi=`__NG_DI_FLAG__`,Gi=class{injector;constructor(e){this.injector=e}retrieve(e,t){let n=Ji(t)||0;try{return this.injector.get(e,n&8?null:Ui,n)}catch(e){if(er(e))return e;throw e}}};function Ki(e,t=0){let n=Zn();if(n===void 0)throw new T(-203,!1);if(n===null)return Vi(e,void 0,t);{let r=Yi(t),i=n.retrieve(e,r);if(er(i)){if(r.optional)return null;throw i}return i}}function qi(e,t=0){return(zi()||Ki)(li(e),t)}function E(e,t){return qi(e,Ji(t))}function Ji(e){return e===void 0||typeof e==`number`?e:0|(e.optional&&8)|(e.host&&1)|(e.self&&2)|(e.skipSelf&&4)}function Yi(e){return{optional:!!(e&8),host:!!(e&1),self:!!(e&2),skipSelf:!!(e&4)}}function Xi(e){let t=[];for(let n=0;nArray.isArray(e)?ta(e,t):t(e))}function na(e,t,n){t>=e.length?e.push(n):e.splice(t,0,n)}function ra(e,t){return t>=e.length-1?e.pop():e.splice(t,1)[0]}function ia(e,t,n,r){let i=e.length;if(i==t)e.push(n,r);else if(i===1)e.push(r,e[0]),e[0]=n;else{for(i--,e.push(e[i-1],e[i]);i>t;){let t=i-2;e[i]=e[t],i--}e[t]=n,e[t+1]=r}}function aa(e,t,n){let r=sa(e,t);return r>=0?e[r|1]=n:(r=~r,ia(e,r,t,n)),r}function oa(e,t){let n=sa(e,t);if(n>=0)return e[n|1]}function sa(e,t){return ca(e,t,1)}function ca(e,t,n){let r=0,i=e.length>>n;for(;i!==r;){let a=r+(i-r>>1),o=e[a<t?i=a:r=a+1}return~(i<{n.push(e)};return ta(t,e=>{let t=e;va(t,a,[],r)&&(i||=[],i.push(t))}),i!==void 0&&_a(i,a),n}function _a(e,t){for(let n=0;n{t(e,r)})}}function va(e,t,n,r){if(e=li(e),!e)return!1;let i=null,a=hi(e),o=!a&&Ei(e);if(!a&&!o){let t=e.ngModule;if(a=hi(t),a)i=t;else return!1}else if(o&&!o.standalone)return!1;else i=e;let s=r.has(i);if(o){if(s)return!1;if(r.add(i),o.dependencies){let e=typeof o.dependencies==`function`?o.dependencies():o.dependencies;for(let i of e)va(i,t,n,r)}}else if(a){if(a.imports!=null&&!s){r.add(i);let e;try{ta(a.imports,i=>{va(i,t,n,r)&&(e||=[],e.push(i))})}finally{}e!==void 0&&_a(e,t)}if(!s){let e=Qi(i)||(()=>new i);t({provide:i,useFactory:e,deps:ua},i),t({provide:pa,useValue:i,multi:!0},i),t({provide:da,useValue:()=>qi(i),multi:!0},i)}let o=a.providers;if(o!=null&&!s){let n=e;ya(o,e=>{t(e,n)})}}else return!1;return i!==e&&e.providers!==void 0}function ya(e,t){for(let n of e)yi(n)&&(n=n.ɵproviders),Array.isArray(n)?ya(n,t):t(n)}var ba=ii({provide:String,useValue:ii});function xa(e){return typeof e==`object`&&!!e&&ba in e}function Sa(e){return!!(e&&e.useExisting)}function Ca(e){return!!(e&&e.useFactory)}function wa(e){return typeof e==`function`}var Ta=new vi(``),Ea={},Da={},Oa=void 0;function ka(){return Oa===void 0&&(Oa=new ma),Oa}var Aa=class{},ja=class extends Aa{parent;source;scopes;records=new Map;_ngOnDestroyHooks=new Set;_onDestroyHooks=[];get destroyed(){return this._destroyed}_destroyed=!1;injectorDefTypes;constructor(e,t,n,r){super(),this.parent=t,this.source=n,this.scopes=r,Va(e,e=>this.processProvider(e)),this.records.set(fa,La(void 0,this)),r.has(`environment`)&&this.records.set(Aa,La(void 0,this));let i=this.records.get(Ta);i!=null&&typeof i.value==`string`&&this.scopes.add(i.value),this.injectorDefTypes=new Set(this.get(pa,ua,{self:!0}))}retrieve(e,t){let n=Ji(t)||0;try{return this.get(e,Ui,n)}catch(e){if(er(e))return e;throw e}}destroy(){Ia(this),this._destroyed=!0;let e=w(null);try{for(let e of this._ngOnDestroyHooks)e.ngOnDestroy();let e=this._onDestroyHooks;this._onDestroyHooks=[];for(let t of e)t()}finally{this.records.clear(),this._ngOnDestroyHooks.clear(),this.injectorDefTypes.clear(),w(e)}}onDestroy(e){return Ia(this),this._onDestroyHooks.push(e),()=>this.removeOnDestroy(e)}runInContext(e){Ia(this);let t=Qn(this),n=Bi(void 0);try{return e()}finally{Qn(t),Bi(n)}}get(e,t=Ui,n){if(Ia(this),Object.hasOwn(e,Ti))return e[Ti](this);let r=Ji(n),i=Qn(this),a=Bi(void 0);try{if(!(r&4)){let t=this.records.get(e);if(t===void 0){let n=Ba(e)&&fi(e);t=n&&this.injectableDefInScope(n)?La(Ma(e),Ea):null,this.records.set(e,t)}if(t!=null)return this.hydrate(e,t,r)}let n=r&2?ka():this.parent;return t=r&8&&t===Ui?null:t,n.get(e,t)}catch(e){let t=Li(e);throw t===-200||t===-201?new T(t,null):e}finally{Bi(a),Qn(i)}}resolveInjectorInitializers(){let e=w(null),t=Qn(this),n=Bi(void 0);try{let e=this.get(da,ua,{self:!0});for(let t of e)t()}finally{Qn(t),Bi(n),w(e)}}toString(){return`R3Injector[...]`}processProvider(e){e=li(e);let t=wa(e)?e:li(e&&e.provide),n=Pa(e);if(!wa(e)&&e.multi===!0){let n=this.records.get(t);n||(n=La(void 0,Ea,!0),n.factory=()=>Xi(n.multi),this.records.set(t,n)),t=e,n.multi.push(e)}this.records.set(t,n)}hydrate(e,t,n){let r=w(null);try{if(t.value===Da)throw Pi(``);return t.value===Ea&&(t.value=Da,t.value=t.factory(void 0,n)),typeof t.value==`object`&&t.value&&za(t.value)&&this._ngOnDestroyHooks.add(t.value),t.value}finally{w(r)}}injectableDefInScope(e){if(!e.providedIn)return!1;let t=li(e.providedIn);return typeof t==`string`?t===`any`||this.scopes.has(t):this.injectorDefTypes.has(t)}removeOnDestroy(e){let t=this._onDestroyHooks.indexOf(e);t!==-1&&this._onDestroyHooks.splice(t,1)}};function Ma(e){let t=fi(e),n=t===null?Qi(e):t.factory;if(n!==null)return n;if(e instanceof vi)throw new T(-204,!1);if(e instanceof Function)return Na(e);throw new T(-204,!1)}function Na(e){if(e.length>0)throw new T(-204,!1);let t=mi(e);return t===null?()=>new e:()=>t.factory(e)}function Pa(e){return xa(e)?La(void 0,e.useValue):La(Fa(e),Ea)}function Fa(e,t,n){let r;if(wa(e)){let t=li(e);return Qi(t)||Ma(t)}if(xa(e))r=()=>li(e.useValue);else if(Ca(e))r=()=>e.useFactory(...Xi(e.deps||[]));else if(Sa(e))r=(t,n)=>qi(li(e.useExisting),n!==void 0&&n&8?8:void 0);else{let t=li(e&&(e.useClass||e.provide));if(Ra(e))r=()=>new t(...Xi(e.deps));else return Qi(t)||Ma(t)}return r}function Ia(e){if(e.destroyed)throw new T(-205,!1)}function La(e,t,n=!1){return{factory:e,value:t,multi:n?[]:void 0}}function Ra(e){return!!e.deps}function za(e){return typeof e==`object`&&!!e&&typeof e.ngOnDestroy==`function`}function Ba(e){return typeof e==`function`||typeof e==`object`&&e.ngMetadataName===`InjectionToken`}function Va(e,t){for(let n of e)Array.isArray(n)?Va(n,t):n&&yi(n)?Va(n.ɵproviders,t):t(n)}function Ha(e,t){let n;e instanceof ja?(Ia(e),n=e):n=new Gi(e);let r=Qn(n),i=Bi(void 0);try{return t()}finally{Qn(r),Bi(i)}}function Ua(){return zi()!==void 0||Zn()!=null}var Wa=1;function Ga(e){return Array.isArray(e)&&typeof e[Wa]==`object`}function Ka(e){return Array.isArray(e)&&e[Wa]===!0}function qa(e){return!!(e.flags&4)}function Ja(e){return e.componentOffset>-1}function Ya(e){return(e.flags&1)==1}function Xa(e){return!!e.template}function Za(e){return!!(e[2]&512)}function Qa(e){return(e[2]&256)==256}var $a=(function(e){return e[e.NONE=0]=`NONE`,e[e.HTML=1]=`HTML`,e[e.STYLE=2]=`STYLE`,e[e.SCRIPT=3]=`SCRIPT`,e[e.URL=4]=`URL`,e[e.RESOURCE_URL=5]=`RESOURCE_URL`,e[e.ATTRIBUTE_NO_BINDING=6]=`ATTRIBUTE_NO_BINDING`,e})($a||{}),eo=`math`;function to(e){for(;Array.isArray(e);)e=e[0];return e}function no(e,t){return to(t[e])}function ro(e,t){return to(t[e.index])}function io(e,t){return e.data[t]}function ao(e,t){return e[t]}function oo(e,t,n,r){n>=e.data.length&&(e.data[n]=null,e.blueprint[n]=null),t[n]=r}function so(e,t){let n=t[e];return Ga(n)?n:n[0]}function co(e){return(e[2]&128)==128}function lo(e){return Ka(e[3])}function uo(e,t){return t==null?null:e[t]}function fo(e){e[17]=0}function po(e){e[2]&1024||(e[2]|=1024,co(e)&&_o(e))}function mo(e,t){for(;e>0;)t=t[14],e--;return t}function ho(e){return!!(e[2]&9216||e[24]?.dirty)}function go(e){e[10].changeDetectionScheduler?.notify(8),e[2]&64&&(e[2]|=1024),ho(e)&&_o(e)}function _o(e){e[10].changeDetectionScheduler?.notify(0);let t=bo(e);for(;t!==null&&!(t[2]&8192||(t[2]|=8192,!co(t)));)t=bo(t)}function vo(e,t){if(Qa(e))throw new T(911,!1);e[21]===null&&(e[21]=[]),e[21].push(t)}function yo(e,t){if(e[21]===null)return;let n=e[21].indexOf(t);n!==-1&&e[21].splice(n,1)}function bo(e){let t=e[3];return Ka(t)?t[3]:t}function xo(e){return e[7]??=[]}function So(e){return e.cleanup??=[]}function Co(e,t,n,r){let i=xo(t);i.push(n),e.firstCreatePass&&So(e).push(r,i.length-1)}var D={lFrame:is(null),bindingsEnabled:!0,skipHydrationRootTNode:null},wo=!1;function To(){return D.lFrame.elementDepthCount}function Eo(){D.lFrame.elementDepthCount++}function Do(){D.lFrame.elementDepthCount--}function Oo(){return D.bindingsEnabled}function ko(){return D.skipHydrationRootTNode!==null}function Ao(e){return D.skipHydrationRootTNode===e}function jo(){D.skipHydrationRootTNode=null}function O(){return D.lFrame.lView}function Mo(){return D.lFrame.tView}function k(e){return D.lFrame.contextLView=e,e[8]}function A(e){return D.lFrame.contextLView=null,e}function No(){let e=Po();for(;e!==null&&e.type===64;)e=e.parent;return e}function Po(){return D.lFrame.currentTNode}function Fo(){let e=D.lFrame,t=e.currentTNode;return e.isParent?t:t.parent}function Io(e,t){let n=D.lFrame;n.currentTNode=e,n.isParent=t}function Lo(){return D.lFrame.isParent}function Ro(){D.lFrame.isParent=!1}function zo(){return D.lFrame.contextLView}function Bo(){return wo}function Vo(e){let t=wo;return wo=e,t}function Ho(){let e=D.lFrame,t=e.bindingRootIndex;return t===-1&&(t=e.bindingRootIndex=e.tView.bindingStartIndex),t}function Uo(){return D.lFrame.bindingIndex}function Wo(e){return D.lFrame.bindingIndex=e}function Go(){return D.lFrame.bindingIndex++}function Ko(e){let t=D.lFrame,n=t.bindingIndex;return t.bindingIndex+=e,n}function qo(){return D.lFrame.inI18n}function Jo(e,t){let n=D.lFrame;n.bindingIndex=n.bindingRootIndex=e,Xo(t)}function Yo(){return D.lFrame.currentDirectiveIndex}function Xo(e){D.lFrame.currentDirectiveIndex=e}function Zo(e){let t=D.lFrame.currentDirectiveIndex;return t===-1?null:e[t]}function Qo(){return D.lFrame.currentQueryIndex}function $o(e){D.lFrame.currentQueryIndex=e}function es(e){let t=e[1];return t.type===2?t.declTNode:t.type===1?e[5]:null}function ts(e,t,n){if(n&4){let r=t,i=e;for(;r=r.parent,r===null&&!(n&1)&&(r=es(i),!(r===null||(i=i[14],r.type&10))););if(r===null)return!1;t=r,e=i}let r=D.lFrame=rs();return r.currentTNode=t,r.lView=e,!0}function ns(e){let t=rs(),n=e[1];D.lFrame=t,t.currentTNode=n.firstChild,t.lView=e,t.tView=n,t.contextLView=e,t.bindingIndex=n.bindingStartIndex,t.inI18n=!1}function rs(){let e=D.lFrame,t=e===null?null:e.child;return t===null?is(e):t}function is(e){let t={currentTNode:null,isParent:!0,lView:null,tView:null,selectedIndex:-1,contextLView:null,elementDepthCount:0,currentNamespace:null,currentDirectiveIndex:-1,bindingRootIndex:-1,bindingIndex:-1,currentQueryIndex:0,parent:e,child:null,inI18n:!1};return e!==null&&(e.child=t),t}function as(){let e=D.lFrame;return D.lFrame=e.parent,e.currentTNode=null,e.lView=null,e}var os=as;function ss(){let e=as();e.isParent=!0,e.tView=null,e.selectedIndex=-1,e.contextLView=null,e.elementDepthCount=0,e.currentDirectiveIndex=-1,e.currentNamespace=null,e.bindingRootIndex=-1,e.bindingIndex=-1,e.currentQueryIndex=0}function cs(e){return(D.lFrame.contextLView=mo(e,D.lFrame.contextLView))[8]}function ls(){return D.lFrame.selectedIndex}function us(e){D.lFrame.selectedIndex=e}function ds(){let e=D.lFrame;return io(e.tView,e.selectedIndex)}function fs(){D.lFrame.currentNamespace=`svg`}function ps(){ms()}function ms(){D.lFrame.currentNamespace=null}function hs(){return D.lFrame.currentNamespace}var gs=!0;function _s(){return gs}function vs(e){gs=e}function ys(e,t=null,n=null,r){let i=bs(e,t,n,r);return i.resolveInjectorInitializers(),i}function bs(e,t=null,n=null,r,i=new Set){return new ja([n||ua,ha(e)],t||ka(),null,i)}var xs=class e{static THROW_IF_NOT_FOUND=Ui;static NULL=new ma;static create(e,t){if(Array.isArray(e))return ys({name:``},t,e,``);{let t=e.name??``;return ys({name:t},e.parent,e.providers,t)}}static ɵprov=di({token:e,providedIn:`any`,factory:()=>qi(fa)});static __NG_ELEMENT_ID__=-1},Ss=new vi(``),Cs=class{static __NG_ELEMENT_ID__=Ts;static __NG_ENV_ID__=e=>e},ws=class extends Cs{_lView;constructor(e){super(),this._lView=e}get destroyed(){return Qa(this._lView)}onDestroy(e){let t=this._lView;return vo(t,e),()=>yo(t,e)}};function Ts(){return new ws(O())}var Es=new vi(``),Ds=(()=>{class e{taskId=0;pendingTasks=new Set;destroyed=!1;pendingTask=new $r(!1);debugTaskTracker=E(Es,{optional:!0});get hasPendingTasks(){return!this.destroyed&&this.pendingTask.value}get hasPendingTasksObservable(){return this.destroyed?new Hr(e=>{e.next(!1),e.complete()}):this.pendingTask}add(){!this.hasPendingTasks&&!this.destroyed&&this.pendingTask.next(!0);let e=this.taskId++;return this.pendingTasks.add(e),this.debugTaskTracker?.add(e),e}has(e){return this.pendingTasks.has(e)}remove(e){this.pendingTasks.delete(e),this.debugTaskTracker?.remove(e),this.pendingTasks.size===0&&this.hasPendingTasks&&this.pendingTask.next(!1)}ngOnDestroy(){this.pendingTasks.clear(),this.hasPendingTasks&&this.pendingTask.next(!1),this.destroyed=!0,this.pendingTask.unsubscribe()}static ɵprov=di({token:e,providedIn:`root`,factory:()=>new e})}return e})(),Os=class extends Zr{__isAsync;destroyRef=void 0;pendingTasks=void 0;constructor(e=!1){super(),this.__isAsync=e,Ua()&&(this.destroyRef=E(Cs,{optional:!0})??void 0,this.pendingTasks=E(Ds,{optional:!0})??void 0)}emit(e){let t=w(null);try{super.next(e)}finally{w(t)}}subscribe(e,t,n){let r=e,i=t||(()=>null),a=n;if(e&&typeof e==`object`){let t=e;r=t.next?.bind(t),i=t.error?.bind(t),a=t.complete?.bind(t)}this.__isAsync&&(i=this.wrapInTimeout(i),r&&=this.wrapInTimeout(r),a&&=this.wrapInTimeout(a));let o=super.subscribe({next:r,error:i,complete:a});return e instanceof hr&&e.add(o),o}wrapInTimeout(e){return t=>{let n=this.pendingTasks?.add();setTimeout(()=>{try{e(t)}finally{n!==void 0&&this.pendingTasks?.remove(n)}})}}};function ks(...e){}function As(e){let t,n;function r(){e=ks;try{n!==void 0&&typeof cancelAnimationFrame==`function`&&cancelAnimationFrame(n),t!==void 0&&clearTimeout(t)}catch{}}return t=setTimeout(()=>{e(),r()}),typeof requestAnimationFrame==`function`&&(n=requestAnimationFrame(()=>{e(),r()})),()=>r()}function js(e){return queueMicrotask(()=>e()),()=>{e=ks}}var Ms=`isAngularZone`,Ns=`isAngularZone_ID`,Ps=0,Fs=class e{hasPendingMacrotasks=!1;hasPendingMicrotasks=!1;isStable=!0;onUnstable=new Os(!1);onMicrotaskEmpty=new Os(!1);onStable=new Os(!1);onError=new Os(!1);constructor(e){let{enableLongStackTrace:t=!1,shouldCoalesceEventChangeDetection:n=!1,shouldCoalesceRunChangeDetection:r=!1,scheduleInRootZone:i=!1}=e;if(typeof Zone>`u`)throw new T(908,!1);Zone.assertZonePatched();let a=this;a._nesting=0,a._outer=a._inner=Zone.current,Zone.TaskTrackingZoneSpec&&(a._inner=a._inner.fork(new Zone.TaskTrackingZoneSpec)),t&&Zone.longStackTraceZoneSpec&&(a._inner=a._inner.fork(Zone.longStackTraceZoneSpec)),a.shouldCoalesceEventChangeDetection=!r&&n,a.shouldCoalesceRunChangeDetection=r,a.callbackScheduled=!1,a.scheduleInRootZone=i,zs(a)}static isInAngularZone(){return typeof Zone<`u`&&Zone.current.get(Ms)===!0}static assertInAngularZone(){if(!e.isInAngularZone())throw new T(909,!1)}static assertNotInAngularZone(){if(e.isInAngularZone())throw new T(909,!1)}run(e,t,n){return this._inner.run(e,t,n)}runTask(e,t,n,r){let i=this._inner,a=i.scheduleEventTask(`NgZoneEvent: `+r,e,Is,ks,ks);try{return i.runTask(a,t,n)}finally{i.cancelTask(a)}}runGuarded(e,t,n){return this._inner.runGuarded(e,t,n)}runOutsideAngular(e){return this._outer.run(e)}},Is={};function Ls(e){if(e._nesting==0&&!e.hasPendingMicrotasks&&!e.isStable)try{e._nesting++,e.onMicrotaskEmpty.emit(null)}finally{if(e._nesting--,!e.hasPendingMicrotasks)try{e.runOutsideAngular(()=>e.onStable.emit(null))}finally{e.isStable=!0}}}function Rs(e){if(e.isCheckStableRunning||e.callbackScheduled)return;e.callbackScheduled=!0;function t(){As(()=>{e.callbackScheduled=!1,Bs(e),e.isCheckStableRunning=!0,Ls(e),e.isCheckStableRunning=!1})}e.scheduleInRootZone?Zone.root.run(()=>{t()}):e._outer.run(()=>{t()}),Bs(e)}function zs(e){let t=()=>{Rs(e)},n=Ps++;e._inner=e._inner.fork({name:`angular`,properties:{[Ms]:!0,[Ns]:n,[Ns+n]:!0},onInvokeTask:(n,r,i,a,o,s)=>{if(Ws(s))return n.invokeTask(i,a,o,s);try{return Vs(e),n.invokeTask(i,a,o,s)}finally{(e.shouldCoalesceEventChangeDetection&&a.type===`eventTask`||e.shouldCoalesceRunChangeDetection)&&t(),Hs(e)}},onInvoke:(n,r,i,a,o,s,c)=>{try{return Vs(e),n.invoke(i,a,o,s,c)}finally{e.shouldCoalesceRunChangeDetection&&!e.callbackScheduled&&!Gs(s)&&t(),Hs(e)}},onHasTask:(t,n,r,i)=>{t.hasTask(r,i),n===r&&(i.change==`microTask`?(e._hasPendingMicrotasks=i.microTask,Bs(e),Ls(e)):i.change==`macroTask`&&(e.hasPendingMacrotasks=i.macroTask))},onHandleError:(t,n,r,i)=>(t.handleError(r,i),e.runOutsideAngular(()=>e.onError.emit(i)),!1)})}function Bs(e){e.hasPendingMicrotasks=!!(e._hasPendingMicrotasks||(e.shouldCoalesceEventChangeDetection||e.shouldCoalesceRunChangeDetection)&&e.callbackScheduled===!0)}function Vs(e){e._nesting++,e.isStable&&(e.isStable=!1,e.onUnstable.emit(null))}function Hs(e){e._nesting--,Ls(e)}var Us=class{hasPendingMicrotasks=!1;hasPendingMacrotasks=!1;isStable=!0;onUnstable=new Os;onMicrotaskEmpty=new Os;onStable=new Os;onError=new Os;run(e,t,n){return e.apply(t,n)}runGuarded(e,t,n){return e.apply(t,n)}runOutsideAngular(e){return e()}runTask(e,t,n,r){return e.apply(t,n)}};function Ws(e){return Ks(e,`__ignore_ng_zone__`)}function Gs(e){return Ks(e,`__scheduler_tick__`)}function Ks(e,t){return!Array.isArray(e)||e.length!==1?!1:e[0]?.data?.[t]===!0}var qs=class{_console=console;handleError(e){this._console.error(`ERROR`,e)}},Js=new vi(``,{factory:()=>{let e=E(Fs),t=E(Aa),n;return r=>{e.runOutsideAngular(()=>{t.destroyed&&!n?setTimeout(()=>{throw r}):(n??=t.get(qs),n.handleError(r))})}}}),Ys={provide:da,useValue:()=>{E(qs,{optional:!0})},multi:!0};function j(e,t){let[n,r,i]=Hn(e,t?.equal),a=n;return a[dn],a.set=r,a.update=i,a.asReadonly=Xs.bind(a),a}function Xs(){let e=this[dn];if(e.readonlyFn===void 0){let t=()=>this();t[dn]=e,e.readonlyFn=t}return e.readonlyFn}var Zs=new vi(``,{factory:()=>Qs}),Qs=`ng`,$s=new vi(``),ec=new vi(``,{providedIn:`platform`,factory:()=>`unknown`}),tc=new vi(``,{factory:()=>E(Ss).body?.querySelector(`[ngCspNonce]`)?.getAttribute(`ngCspNonce`)||null}),nc=(()=>{class e{view;node;constructor(e,t){this.view=e,this.node=t}static __NG_ELEMENT_ID__=rc}return e})();function rc(){return new nc(O(),No())}var ic=class{},ac=new vi(``,{factory:()=>!0}),oc=new vi(``),sc=(()=>{class e{static ɵprov=di({token:e,providedIn:`root`,factory:()=>new cc})}return e})(),cc=class{dirtyEffectCount=0;queues=new Map;add(e){this.enqueue(e),this.schedule(e)}schedule(e){e.dirty&&this.dirtyEffectCount++}remove(e){let t=e.zone,n=this.queues.get(t);n.has(e)&&(n.delete(e),e.dirty&&this.dirtyEffectCount--)}enqueue(e){let t=e.zone;this.queues.has(t)||this.queues.set(t,new Set);let n=this.queues.get(t);n.has(e)||n.add(e)}flush(){for(;this.dirtyEffectCount>0;){let e=!1;for(let[t,n]of this.queues)e||=t===null?this.flushQueue(n):t.run(()=>this.flushQueue(n));e||(this.dirtyEffectCount=0)}}flushQueue(e){let t=!1;for(let n of e)n.dirty&&(this.dirtyEffectCount--,t=!0,n.run());return t}},lc=class{[dn];constructor(e){this[dn]=e}destroy(){this[dn].destroy()}};function uc(e,t){let n=t?.injector??E(xs),r=t?.manualCleanup===!0?null:n.get(Cs),i,a=n.get(nc,null,{optional:!0}),o=n.get(ic);return a===null?i=hc(e,n.get(sc),o):(i=mc(a.view,o,e),r instanceof ws&&r._lView===a.view&&(r=null)),i.injector=n,r!==null&&(i.onDestroyFns=[r.onDestroy(()=>i.destroy())]),new lc(i)}var dc={...Jn,cleanupFns:void 0,zone:null,onDestroyFns:null,run(){let e=Vo(!1);try{Yn(this)}finally{Vo(e)}},cleanup(){if(!this.cleanupFns?.length)return;let e=w(null);try{for(;this.cleanupFns.length;)this.cleanupFns.pop()()}finally{this.cleanupFns=[],w(e)}}},fc={...dc,consumerMarkedDirty(){this.scheduler.schedule(this),this.notifier.notify(12)},destroy(){if(En(this),this.onDestroyFns!==null)for(let e of this.onDestroyFns)e();this.cleanup(),this.scheduler.remove(this)}},pc={...dc,consumerMarkedDirty(){this.view[2]|=8192,_o(this.view),this.notifier.notify(13)},destroy(){if(En(this),this.onDestroyFns!==null)for(let e of this.onDestroyFns)e();this.cleanup(),this.view[23]?.delete(this)}};function mc(e,t,n){let r=Object.create(pc);return r.view=e,r.zone=typeof Zone<`u`?Zone.current:null,r.notifier=t,r.fn=gc(r,n),e[23]??=new Set,e[23].add(r),r.consumerMarkedDirty(r),r}function hc(e,t,n){let r=Object.create(fc);return r.fn=gc(r,e),r.scheduler=t,r.notifier=n,r.zone=typeof Zone<`u`?Zone.current:null,r.scheduler.add(r),r.notifier.notify(12),r}function gc(e,t){return()=>{t(t=>(e.cleanupFns??=[]).push(t))}}function _c(e){return typeof e==`function`&&e[dn]!==void 0}function vc(e){return _c(e)&&typeof e.set==`function`}var yc=Symbol(`InputSignalNode#UNSET`),bc={...Kn,transformFn:void 0,applyValueToInputSignal(e,t){Wn(e,t)}};function xc(e){return{toString:e}.toString()}var Sc=(function(e){return e[e.TemplateCreateStart=0]=`TemplateCreateStart`,e[e.TemplateCreateEnd=1]=`TemplateCreateEnd`,e[e.TemplateUpdateStart=2]=`TemplateUpdateStart`,e[e.TemplateUpdateEnd=3]=`TemplateUpdateEnd`,e[e.LifecycleHookStart=4]=`LifecycleHookStart`,e[e.LifecycleHookEnd=5]=`LifecycleHookEnd`,e[e.OutputStart=6]=`OutputStart`,e[e.OutputEnd=7]=`OutputEnd`,e[e.BootstrapApplicationStart=8]=`BootstrapApplicationStart`,e[e.BootstrapApplicationEnd=9]=`BootstrapApplicationEnd`,e[e.BootstrapComponentStart=10]=`BootstrapComponentStart`,e[e.BootstrapComponentEnd=11]=`BootstrapComponentEnd`,e[e.ChangeDetectionStart=12]=`ChangeDetectionStart`,e[e.ChangeDetectionEnd=13]=`ChangeDetectionEnd`,e[e.ChangeDetectionSyncStart=14]=`ChangeDetectionSyncStart`,e[e.ChangeDetectionSyncEnd=15]=`ChangeDetectionSyncEnd`,e[e.AfterRenderHooksStart=16]=`AfterRenderHooksStart`,e[e.AfterRenderHooksEnd=17]=`AfterRenderHooksEnd`,e[e.ComponentStart=18]=`ComponentStart`,e[e.ComponentEnd=19]=`ComponentEnd`,e[e.DeferBlockStateStart=20]=`DeferBlockStateStart`,e[e.DeferBlockStateEnd=21]=`DeferBlockStateEnd`,e[e.DynamicComponentStart=22]=`DynamicComponentStart`,e[e.DynamicComponentEnd=23]=`DynamicComponentEnd`,e[e.HostBindingsUpdateStart=24]=`HostBindingsUpdateStart`,e[e.HostBindingsUpdateEnd=25]=`HostBindingsUpdateEnd`,e})(Sc||{}),Cc=class{previousValue;currentValue;firstChange;constructor(e,t,n){this.previousValue=e,this.currentValue=t,this.firstChange=n}isFirstChange(){return this.firstChange}};function wc(e,t,n,r){t===null?e[n]=r:t.applyValueToInputSignal(t,r)}var Tc=null,Ec=(()=>{Tc=Oc;let e=()=>Oc;return e.ngInherit=!0,e})();function Dc(){return Tc}function Oc(e){return e.type.prototype.ngOnChanges&&(e.setInput=Ac),kc}function kc(){let e=Mc(this),t=e?.current;if(t){let n=e.previous;if(n===la)e.previous=t;else for(let e in t)n[e]=t[e];e.current=null,this.ngOnChanges(t)}}function Ac(e,t,n,r,i){let a=this.declaredInputs[r],o=Mc(e)||Nc(e,{previous:la,current:null}),s=o.current||={},c=o.previous,l=c[a];s[a]=new Cc(l&&l.currentValue,n,c===la),wc(e,t,i,n)}var jc=`__ngSimpleChanges__`;function Mc(e){return Object.hasOwn(e,jc)&&e[jc]||null}function Nc(e,t){return e[jc]=t}var Pc=[],Fc=function(e,t=null,n){for(let r=0;r=r)break}else t[c]<0&&(e[17]+=65536),(s>14>16&&(e[2]&3)===t&&(e[2]+=16384,Hc(o,a)):Hc(o,a)}var Wc=-1,Gc=class{factory;name;injectImpl;resolving=!1;canSeeViewProviders;multi;componentProviders;index;providerFactory;constructor(e,t,n,r){this.factory=e,this.name=r,this.canSeeViewProviders=t,this.injectImpl=n}};function Kc(e){return!!(e.flags&8)}function qc(e){return!!(e.flags&16)}function Jc(e,t,n){let r=0;for(;rt){o=a-1;break}}}for(;a>16}function nl(e,t){let n=tl(e),r=t;for(;n>0;)r=r[14],n--;return r}var rl=!0;function il(e){let t=rl;return rl=e,t}var al=255,ol=5,sl=0,cl={};function ll(e,t,n){let r;typeof n==`string`?r=n.charCodeAt(0)||0:Object.hasOwn(n,wi)&&(r=n[wi]),r??=n[wi]=sl++;let i=r&al,a=1<>ol)]|=a}function ul(e,t){let n=fl(e,t);if(n!==-1)return n;let r=t[1];r.firstCreatePass&&(e.injectorIndex=t.length,dl(r.data,e),dl(t,null),dl(r.blueprint,null));let i=pl(e,t),a=e.injectorIndex;if($c(i)){let e=el(i),n=nl(i,t),r=n[1].data;for(let i=0;i<8;i++)t[a+i]=n[e+i]|r[e+i]}return t[a+8]=i,a}function dl(e,t){e.push(0,0,0,0,0,0,0,0,t)}function fl(e,t){return e.injectorIndex===-1||e.parent&&e.parent.injectorIndex===e.injectorIndex||t[e.injectorIndex+8]===null?-1:e.injectorIndex}function pl(e,t){if(e.parent&&e.parent.injectorIndex!==-1)return e.parent.injectorIndex;let n=0,r=null,i=t;for(;i!==null;){if(r=Ol(i),r===null)return Wc;if(n++,i=i[14],r.injectorIndex!==-1)return r.injectorIndex|n<<16}return Wc}function ml(e,t,n){ll(e,t,n)}function hl(e,t,n){if(n&8||e!==void 0)return e;Fi(t,`NodeInjector`)}function gl(e,t,n,r){if(n&8&&r===void 0&&(r=null),!(n&3)){let i=e[9],a=Bi(void 0);try{return i?i.get(t,r,n&8):Vi(t,r,n&8)}finally{Bi(a)}}return hl(r,t,n)}function _l(e,t,n,r=0,i){if(e!==null){if(t[2]&2048&&!(r&2)){let i=Dl(e,t,n,r,cl);if(i!==cl)return i}let i=vl(e,t,n,r,cl);if(i!==cl)return i}return gl(t,n,r,i)}function vl(e,t,n,r,i){let a=Sl(n);if(typeof a==`function`){if(!ts(t,e,r))return r&1?hl(i,n,r):gl(t,n,r,i);try{let e;if(e=a(r),e==null&&!(r&8))Fi(n);else return e}finally{os()}}else if(typeof a==`number`){let i=null,o=fl(e,t),s=Wc,c=r&1?t[15][5]:null;for((o===-1||r&4)&&(s=o===-1?pl(e,t):t[o+8],s===Wc||!wl(r,!1)?o=-1:(i=t[1],o=el(s),t=nl(s,t)));o!==-1;){let e=t[1];if(Cl(a,o,e.data)){let e=yl(o,t,n,i,r,c);if(e!==cl)return e}s=t[o+8],s!==Wc&&wl(r,t[1].data[o+8]===c)&&Cl(a,o,t)?(i=e,o=el(s),t=nl(s,t)):o=-1}}return i}function yl(e,t,n,r,i,a){let o=t[1],s=o.data[e+8],c=bl(s,o,n,r==null?Ja(s)&&rl:r!=o&&!!(s.type&3),i&1&&a===s);return c===null?cl:xl(t,o,c,s,i)}function bl(e,t,n,r,i){let a=e.providerIndexes,o=t.data,s=a&1048575,c=e.directiveStart,l=e.directiveEnd,u=a>>20,d=r?s:s+u,f=i?s+u:l;for(let e=d;e=c&&t.type===n)return e}if(i){let e=o[c];if(e&&Xa(e)&&e.type===n)return c}return null}function xl(e,t,n,r,i){let a=e[n],o=t.data;if(a instanceof Gc){let s=a;if(s.resolving)throw Pi(``);let c=il(s.canSeeViewProviders);s.resolving=!0,o[n].type||o[n];let l=s.injectImpl?Bi(s.injectImpl):null;ts(e,r,0);try{a=e[n]=s.factory(void 0,i,o,e,r),t.firstCreatePass&&n>=r.directiveStart&&Ic(n,o[n],t)}finally{l!==null&&Bi(l),il(c),s.resolving=!1,os()}}return a}function Sl(e){if(typeof e==`string`)return e.charCodeAt(0)||0;let t=Object.hasOwn(e,wi)?e[wi]:void 0;return typeof t==`number`?t>=0?t&al:El:t}function Cl(e,t,n){let r=1<>ol)]&r)}function wl(e,t){return!(e&2)&&!(e&1&&t)}var Tl=class{_tNode;_lView;constructor(e,t){this._tNode=e,this._lView=t}get(e,t,n){return _l(this._tNode,this._lView,e,Ji(n),t)}};function El(){return new Tl(No(),O())}function Dl(e,t,n,r,i){let a=e,o=t;for(;a!==null&&o!==null&&o[2]&2048&&!Za(o);){let e=vl(a,o,n,r|2,cl);if(e!==cl)return e;r&=-5;let t=a.parent;if(!t){let e=o[20];if(e){let t=e.get(n,cl,r);if(t!==cl)return t}t=Ol(o),o=o[14]}a=t}return i}function Ol(e){let t=e[1],n=t.type;return n===2?t.declTNode:n===1?e[5]:null}function kl(e){return{token:e.token,providedIn:e.autoProvided===!1?null:`root`,factory:e.factory,value:void 0}}function Al(){return jl(No(),O())}function jl(e,t){return new Ml(ro(e,t))}var Ml=(()=>{class e{nativeElement;constructor(e){this.nativeElement=e}static __NG_ELEMENT_ID__=Al}return e})();function Nl(e){return e instanceof Ml?e.nativeElement:e}function Pl(){return this._results[Symbol.iterator]()}var Fl=class{_emitDistinctChangesOnly;dirty=!0;_onDirty=void 0;_results=[];_changesDetected=!1;_changes=void 0;length=0;first=void 0;last=void 0;get changes(){return this._changes??=new Zr}constructor(e=!1){this._emitDistinctChangesOnly=e}get(e){return this._results[e]}map(e){return this._results.map(e)}filter(e){return this._results.filter(e)}find(e){return this._results.find(e)}reduce(e,t){return this._results.reduce(e,t)}forEach(e){this._results.forEach(e)}some(e){return this._results.some(e)}toArray(){return this._results.slice()}toString(){return this._results.toString()}reset(e,t){this.dirty=!1;let n=ea(e);(this._changesDetected=!$i(this._results,n,t))&&(this._results=n,this.length=n.length,this.last=n[this.length-1],this.first=n[0])}notifyOnChanges(){this._changes!==void 0&&(this._changesDetected||!this._emitDistinctChangesOnly)&&this._changes.next(this)}onDirty(e){this._onDirty=e}setDirty(){this.dirty=!0,this._onDirty?.()}destroy(){this._changes!==void 0&&(this._changes.complete(),this._changes.unsubscribe())}[Symbol.iterator]=Pl};function Il(e){return(e.flags&128)==128}var Ll=(function(e){return e[e.OnPush=0]=`OnPush`,e[e.Eager=1]=`Eager`,e[e.Default=1]=`Default`,e})(Ll||{}),Rl=new Map,zl=0;function Bl(){return zl++}function Vl(e){Rl.set(e[19],e)}function Hl(e){Rl.delete(e[19])}var Ul=`__ngContext__`;function Wl(e,t){Ga(t)?(e[Ul]=t[19],Vl(t)):e[Ul]=t}function Gl(e){return ql(e[12])}function Kl(e){return ql(e[4])}function ql(e){for(;e!==null&&!Ka(e);)e=e[4];return e}var Jl=void 0;function Yl(e){Jl=e}function Xl(){if(Jl!==void 0)return Jl;if(typeof document<`u`)return document;throw new T(210,!1)}var Zl=!1,Ql=new vi(``,{factory:()=>Zl}),$l=new WeakMap;function eu(e,t){if(typeof e!=`object`||!e)return;let n=$l.get(e);n||(n=new WeakSet,$l.set(e,n)),n.add(t)}function tu(e){return(e.flags&32)==32}var nu=()=>null;function ru(e,t,n=!1){return nu(e,t,n)}function iu(e,t){let n=e.contentQueries;if(n!==null){let r=w(null);try{for(let r=0;r|^->||--!>|)/g,gu=`​$1​`;function _u(e){return e.replace(mu,e=>e.replace(hu,gu))}function vu(e,t){return e.createText(t)}function yu(e,t,n){e.setValue(t,n)}function bu(e,t){return e.createComment(_u(t))}function xu(e,t,n){return e.createElement(t,n)}function Su(e,t,n,r,i){e.insertBefore(t,n,r,i)}function Cu(e,t,n){e.appendChild(t,n)}function wu(e,t,n,r,i){r===null?Cu(e,t,n):Su(e,t,n,r,i)}function Tu(e,t,n,r){e.removeChild(null,t,n,r)}function Eu(e,t,n){e.setAttribute(t,`style`,n)}function Du(e,t,n){n===``?e.removeAttribute(t,`class`):e.setAttribute(t,`class`,n)}function Ou(e,t,n){let{mergedAttrs:r,classes:i,styles:a}=n;r!==null&&Jc(e,t,r),i!==null&&Du(e,t,i),a!==null&&Eu(e,t,a)}function ku(e){let t=Au();return t?t.sanitize($a.URL,e)||``:uu(e,`URL`)?lu(e):pu(Ai(e))}function Au(){let e=O();return e&&e[10].sanitizer}function ju(e){return e.ownerDocument.defaultView}function Mu(e){return e.ownerDocument}function Nu(e,t,n){let r=e.length;for(;;){let i=e.indexOf(t,n);if(i===-1)return i;if(i===0||e.charCodeAt(i-1)<=32){let n=t.length;if(i+n===r||e.charCodeAt(i+n)<=32)return i}n=i+1}}var Pu=`ng-template`;function Fu(e,t,n,r){let i=0;if(r){for(;i-1){let e;for(;++ia?``:i[u+1].toLowerCase(),r&2&&l!==e){if(zu(r))return!1;o=!0}}}}}return zu(r)||o}function zu(e){return!(e&1)}function Bu(e,t,n,r){if(t===null)return-1;let i=0;if(r||!n){let n=!1;for(;i-1)for(n++;n0?`="`+t+`"`:``)+`]`}else r&8?i+=`.`+o:r&4&&(i+=` `+o)}else i!==``&&!zu(o)&&(t+=Wu(a,i),i=``),r=o,a||=!zu(r);n++}return i!==``&&(t+=Wu(a,i)),t}function Ku(e){return e.map(Gu).join(`,`)}function qu(e){let t=[],n=[],r=1,i=2;for(;r!1});function $u(e){if(!e)return 0;let t=e.toLowerCase().indexOf(`ms`)>-1?1:1e3;return parseFloat(e)*t}function ed(e,t){return e.getPropertyValue(t).split(`,`).map(e=>e.trim())}function td(e){let t=ed(e,`transition-property`),n=ed(e,`transition-duration`),r=ed(e,`transition-delay`),i={propertyName:``,duration:0,animationName:void 0};for(let e=0;ei.duration&&(i.propertyName=t[e],i.duration=a)}return i}function nd(e){let t=ed(e,`animation-name`),n=ed(e,`animation-delay`),r=ed(e,`animation-duration`),i=ed(e,`animation-iteration-count`),a={animationName:``,propertyName:void 0,duration:0};for(let e=0;ea.duration&&s!==`infinite`&&(a.animationName=t[e],a.duration=o)}return a}function rd(e,t){return e!==void 0&&e.duration>t.duration}function id(e){return(e.animationName!=null||e.propertyName!=null)&&e.duration>0}function ad(e){let t=e.effect?.getTiming();if(t===void 0)return;let n=typeof t.duration==`number`?t.duration:0,r=(t.delay??0)+n,i=e.playbackRate;return i!==void 0&&i!==0&&i!==1&&(r/=Math.abs(i)),r}function od(e,t){let n=getComputedStyle(e),r=nd(n),i=td(n),a=r.duration>i.duration?r:i;rd(t.get(e),a)||id(a)&&t.set(e,a)}function sd(e,t,n){if(!n)return;let r=e.getAnimations();return r.length===0?od(e,t):cd(e,t,r)}function cd(e,t,n){let r={animationName:void 0,propertyName:void 0,duration:0};for(let e of n){if(e.effect?.getTiming()?.iterations===1/0)continue;let t=ad(e)??0,n,i;e.animationName?i=e.animationName:n=e.transitionProperty,t>=r.duration&&(r={animationName:i,propertyName:n,duration:t})}rd(t.get(e),r)||id(r)&&t.set(e,r)}var ld=new Set,ud=!1,dd=1,fd=typeof document<`u`&&typeof document?.documentElement?.getAnimations==`function`;function pd(e){return e[9].get(Qu,ud)}function md(e,t,n){let r=gd.get(e);if(r){for(let e of t)r.classList.push(e);for(let e of n)r.cleanupFns.push(e)}else gd.set(e,{classList:t,cleanupFns:n})}function hd(e){let t=gd.get(e);if(t){for(let e of t.cleanupFns)e();gd.delete(e)}_d.delete(e)}var gd=new WeakMap,_d=new WeakMap,vd=new WeakMap;function yd(e){return e?e[14]??e:null}var bd=new WeakSet;function xd(e,t,n){let r=vd.get(e);if(!r||r.length===0)return;let i=t.parentNode,a=t.previousSibling,o=yd(n);for(let e=r.length-1;e>=0;e--){let{el:n,declarationView:s}=r[e],c=n.parentNode;n===t?(r.splice(e,1),bd.add(n),n.dispatchEvent(new CustomEvent(`animationend`,{detail:{cancel:!0}}))):(a&&n===a||c&&i&&c!==i&&(o===null||s===null||o===s))&&(r.splice(e,1),n.dispatchEvent(new CustomEvent(`animationend`,{detail:{cancel:!0}})),n.parentNode?.removeChild(n))}}function Sd(e,t,n){let r=yd(n),i=vd.get(e);i?i.some(e=>e.el===t)||i.push({el:t,declarationView:r}):vd.set(e,[{el:t,declarationView:r}])}function Cd(e){let t=e[26]??={};return t.enter??=new Map}function wd(e){let t=typeof e==`function`?e():e,n=Array.isArray(t)?t:null;return typeof t==`string`&&(n=t.trim().split(/\s+/).filter(e=>e)),n}function Td(e){return e.composedPath?e.composedPath()[0]:e.target}function Ed(e,t){let n=_d.get(t);if(n===void 0)return!0;if(t!==Td(e))return!1;let r=e.animation;if(r){let e=ad(r);if(e!==void 0&&e+dd{class e{impl=null;execute(){this.impl?.execute()}static ɵprov=di({token:e,providedIn:`root`,factory:()=>new e})}return e})(),Nd=[0,1,2,3],Pd=(()=>{class e{ngZone=E(Fs);scheduler=E(ic);errorHandler=E(qs,{optional:!0});sequences=new Set;deferredRegistrations=new Set;executing=!1;constructor(){E(kd,{optional:!0})}execute(){let e=this.sequences.size>0;e&&Fc(Sc.AfterRenderHooksStart),this.executing=!0;for(let e of Nd)for(let t of this.sequences)if(!t.erroredOrDestroyed&&t.hooks[e])try{t.pipelinedValue=this.ngZone.runOutsideAngular(()=>this.maybeTrace(()=>{let n=t.hooks[e];return n(t.pipelinedValue)},t.snapshot))}catch(e){t.erroredOrDestroyed=!0,this.errorHandler?.handleError(e)}this.executing=!1;for(let e of this.sequences)e.afterRun(),e.once&&(this.sequences.delete(e),e.destroy());for(let e of this.deferredRegistrations)this.sequences.add(e);this.deferredRegistrations.size>0&&this.scheduler.notify(7),this.deferredRegistrations.clear(),e&&Fc(Sc.AfterRenderHooksEnd)}register(e){let{view:t}=e;t===void 0?this.executing?this.deferredRegistrations.add(e):this.addSequence(e):((t[25]??=[]).push(e),_o(t),t[2]|=8192)}addSequence(e){this.sequences.add(e),this.scheduler.notify(7)}unregister(e){this.executing&&this.sequences.has(e)?(e.erroredOrDestroyed=!0,e.pipelinedValue=void 0,e.once=!0):(this.sequences.delete(e),this.deferredRegistrations.delete(e))}maybeTrace(e,t){return t?t.run(Od.AFTER_NEXT_RENDER,e):e()}static ɵprov=di({token:e,providedIn:`root`,factory:()=>new e})}return e})(),Fd=class{impl;hooks;view;once;snapshot;erroredOrDestroyed=!1;pipelinedValue=void 0;unregisterOnDestroy;constructor(e,t,n,r,i,a=null){this.impl=e,this.hooks=t,this.view=n,this.once=r,this.snapshot=a,this.unregisterOnDestroy=i?.onDestroy(()=>this.destroy())}afterRun(){this.erroredOrDestroyed=!1,this.pipelinedValue=void 0,this.snapshot?.dispose(),this.snapshot=null}destroy(){this.impl.unregister(this),this.unregisterOnDestroy?.();let e=this.view?.[25];e&&(this.view[25]=e.filter(e=>e!==this))}};function Id(e,t){let n=t?.injector??E(xs);return jd(`NgAfterNextRender`),Rd(e,n,t,!0)}function Ld(e){return e instanceof Function?[void 0,void 0,e,void 0]:[e.earlyRead,e.write,e.mixedReadWrite,e.read]}function Rd(e,t,n,r){let i=t.get(Md);i.impl??=t.get(Pd);let a=t.get(kd,null,{optional:!0}),o=n?.manualCleanup===!0?null:t.get(Cs),s=t.get(nc,null,{optional:!0}),c=new Fd(i.impl,Ld(e),s?.view,r,o,a?.snapshot(null));return i.impl.register(c),c}var zd=new vi(``,{factory:()=>{let e=E(Aa),t=new Set;return e.onDestroy(()=>t.clear()),{queue:t,isScheduled:!1,scheduler:null,injector:e}}});function Bd(e,t,n){let r=e.get(zd);if(Array.isArray(t))for(let e of t)r.queue.add(e),n?.detachedLeaveAnimationFns?.push(e);else r.queue.add(t),n?.detachedLeaveAnimationFns?.push(t);r.scheduler&&r.scheduler(e)}function Vd(e,t){let n=e.get(zd);if(Array.isArray(t))for(let e of t)n.queue.delete(e);else n.queue.delete(t)}function Hd(e,t){let n=e.get(zd);if(t.detachedLeaveAnimationFns){for(let e of t.detachedLeaveAnimationFns)n.queue.delete(e);t.detachedLeaveAnimationFns=void 0}}function Ud(e){let t=e.get(zd);t.isScheduled||=(Id(()=>{t.isScheduled=!1;for(let e of t.queue)e();t.queue.clear()},{injector:t.injector}),!0)}function Wd(e){let t=e.get(zd);t.scheduler=Ud,t.scheduler(e)}function Gd(e,t){for(let[n,r]of t)Bd(e,r.animateFns)}function Kd(e,t,n,r){let i=e?.[26]?.enter;t!==null&&i&&i.has(n.index)&&Gd(r,i)}function qd(e,t,n,r){try{n.get(fa)}catch{return r(!1)}let i=e?.[26];i?.enter?.has(t.index)&&Vd(n,i.enter.get(t.index).animateFns);let a=Jd(e,t,i);if(a.size===0){let n=!1;if(e){let r=[];Xd(e,t,r),n=r.length>0}if(!n)return r(!1)}e&&ld.add(e[19]),Bd(n,()=>Yd(e,t,i||void 0,a,r),i||void 0)}function Jd(e,t,n){let r=new Map,i=n?.leave;if(i&&i.has(t.index)&&r.set(t.index,i.get(t.index)),e&&i)for(let[n,a]of i){if(r.has(n))continue;let i=e[1].data[n].parent;for(;i;){if(i===t){r.set(n,a);break}i=i.parent}}return r}function Yd(e,t,n,r,i){let a=[];if(n&&n.leave)for(let[e]of r){if(!n.leave.has(e))continue;let t=n.leave.get(e);for(let e of t.animateFns){let{promise:t}=e();a.push(t)}n.detachedLeaveAnimationFns=void 0}if(e&&Xd(e,t,a),a.length>0){let t=n||e?.[26];if(t){let n=t.running;n&&a.push(n),t.running=Promise.allSettled(a),Qd(e,t.running,i)}else Promise.allSettled(a).then(()=>{e&&ld.delete(e[19]),i(!0)})}else e&&ld.delete(e[19]),i(!1)}function Xd(e,t,n){if(t.type&12){let r=e[t.index];if(Ka(r))for(let e=10;e{e[26]?.running===t&&(e[26].running=void 0,ld.delete(e[19])),n(!0)})}function $d(e,t,n,r,i,a,o,s){if(i!=null){let c,l=!1;Ka(i)?c=i:Ga(i)&&(l=!0,i=i[0]);let u=to(i);e===0&&r!==null?(Kd(s,r,a,n),o==null?Cu(t,r,u):Su(t,r,u,o||null,!0)):e===1&&r!==null?(Kd(s,r,a,n),Su(t,r,u,o||null,!0),xd(a,u,s)):e===2?(s?.[26]?.leave?.has(a.index)&&Sd(a,u,s),bd.delete(u),qd(s,a,n,e=>{if(bd.has(u)){bd.delete(u);return}Tu(t,u,l,e)})):e===3&&(bd.delete(u),qd(s,a,n,()=>{t.destroyNode(u)})),c!=null&&Cf(t,e,n,c,a,r,o)}}function ef(e,t){nf(e,t),t[0]=null,t[5]=null}function tf(e,t,n,r,i,a){r[0]=i,r[5]=t,bf(e,r,n,1,i,a)}function nf(e,t){t[10].changeDetectionScheduler?.notify(9),bf(e,t,t[11],2,null,null)}function rf(e){let t=e[12];if(!t)return sf(e[1],e);for(;t;){let n=null;if(Ga(t))n=t[12];else{let e=t[10];e&&(n=e)}if(!n){for(;t&&!t[4]&&t!==e;)Ga(t)&&sf(t[1],t),t=t[3];t===null&&(t=e),Ga(t)&&sf(t[1],t),n=t&&t[4]}t=n}}function af(e,t){let n=e[9],r=n.indexOf(t);n.splice(r,1)}function of(e,t){if(Qa(t))return;let n=t[11];n.destroyNode&&bf(e,t,n,3,null,null),rf(t)}function sf(e,t){if(Qa(t))return;let n=w(null);try{t[2]&=-129,t[2]|=256,t[24]&&En(t[24]),lf(e,t),cf(e,t),t[1].type===1&&t[11].destroy();let n=t[16];if(n!==null&&Ka(t[3])){n!==t[3]&&af(n,t);let r=t[18];r!==null&&r.detachView(e)}Hl(t)}finally{w(n)}}function cf(e,t){let n=e.cleanup,r=t[7];if(n!==null)for(let e=0;e=0?r[t]():r[-t].unsubscribe(),e+=2}else{let t=r[n[e+1]];n[e].call(t)}r!==null&&(t[7]=null);let i=t[21];if(i!==null){t[21]=null;for(let e=0;e27&&Nf(e,t,27,!1),Fc(o?Sc.TemplateUpdateStart:Sc.TemplateCreateStart,i,n),n(r,i)}finally{us(a),Fc(o?Sc.TemplateUpdateEnd:Sc.TemplateCreateEnd,i,n)}}function Lf(e,t,n){Wf(e,t,n),(n.flags&64)==64&&Gf(e,t,n)}function Rf(e,t,n=ro){let r=t.localNames;if(r!==null){let i=t.index+1;for(let a=0;a{_o(e.lView)},consumerOnSignalRead(){this.lView[24]=this}};function hp(e){let t=e[24]??Object.create(gp);return t.lView=e,t}var gp={...pn,consumerIsAlwaysLive:!0,kind:`template`,consumerMarkedDirty:e=>{let t=bo(e.lView);for(;t&&!_p(t[1]);)t=bo(t);t&&po(t)},consumerOnSignalRead(){this.lView[24]=this}};function _p(e){return e.type!==2}function vp(e){if(e[23]===null)return;let t=!0;for(;t;){let n=!1;for(let t of e[23])if(t.dirty&&(n=!0,t.zone===null||Zone.current===t.zone?t.run():t.zone.run(()=>t.run()),e[23]===null))return;t=n&&!!(e[2]&8192)}}var yp=100;function bp(e,t=0){let n=e[10].rendererFactory;n.begin?.();try{xp(e,t)}finally{n.end?.()}}function xp(e,t){let n=Bo();try{Vo(!0),Dp(e,t);let n=0;for(;ho(e);){if(n===yp)throw new T(103,!1);n++,Dp(e,1)}}finally{Vo(n)}}function Sp(e,t,n,r){if(Qa(t))return;let i=t[2];ns(t);let a=!0,o=null,s=null;_p(e)?(s=dp(t),o=xn(s)):fn()===null?(a=!1,s=hp(t),o=xn(s)):t[24]&&=(En(t[24]),null);try{fo(t),Wo(e.bindingStartIndex),n!==null&&If(e,t,n,2,r);let a=(i&3)==3;if(a){let n=e.preOrderCheckHooks;n!==null&&Rc(t,n,null)}else{let n=e.preOrderHooks;n!==null&&zc(t,n,0,null),Bc(t,0)}if(wp(t),vp(t),Cp(t,0),e.contentQueries!==null&&iu(e,t),a){let n=e.contentCheckHooks;n!==null&&Rc(t,n)}else{let n=e.contentHooks;n!==null&&zc(t,n,1),Bc(t,1)}kp(e,t);let o=e.components;o!==null&&Op(t,o,0);let s=e.viewQuery;if(s!==null&&au(2,s,r),a){let n=e.viewCheckHooks;n!==null&&Rc(t,n)}else{let n=e.viewHooks;n!==null&&zc(t,n,2),Bc(t,2)}if(e.firstUpdatePass===!0&&(e.firstUpdatePass=!1),t[22]){for(let e of t[22])e();t[22]=null}lp(t),t[2]&=-73}catch(e){throw _o(t),e}finally{s!==null&&(Cn(s,o),a&&pp(s)),ss()}}function Cp(e,t){for(let n=Gl(e);n!==null;n=Kl(n))for(let e=10;e0&&(e[n-1][4]=r[4]);let a=ra(e,10+t);ef(r[1],r);let o=a[18];o!==null&&o.detachView(a[1]),r[3]=null,r[4]=null,r[2]&=-129}return r}function Ip(e,t,n,r){let i=10+r,a=n.length;r>0&&(n[i-1][4]=t),r-1&&(Fp(e,n),ra(t,n))}this._attachedToViewContainer=!1}of(this._lView[1],this._lView)}onDestroy(e){vo(this._lView,e)}markForCheck(){Ap(this._cdRefInjectingView||this._lView,4)}detach(){this._lView[2]&=-129}reattach(){go(this._lView),this._lView[2]|=128}detectChanges(){this._lView[2]|=1024,bp(this._lView)}checkNoChanges(){}attachToViewContainerRef(){if(this._appRef)throw new T(902,!1);this._attachedToViewContainer=!0}detachFromAppRef(){this._appRef=null;let e=Za(this._lView),t=this._lView[16];t!==null&&!e&&af(t,this._lView),nf(this._lView[1],this._lView)}attachToAppRef(e){if(this._attachedToViewContainer)throw new T(902,!1);this._appRef=e;let t=Za(this._lView),n=this._lView[16];n!==null&&!t&&Lp(n,this._lView),go(this._lView)}},zp=(()=>{class e{_declarationLView;_declarationTContainer;elementRef;static __NG_ELEMENT_ID__=Bp;constructor(e,t,n){this._declarationLView=e,this._declarationTContainer=t,this.elementRef=n}get ssrId(){return this._declarationTContainer.tView?.ssrId||null}createEmbeddedView(e,t){return this.createEmbeddedViewImpl(e,t)}createEmbeddedViewImpl(e,t,n){return new Rp(ap(this._declarationLView,this._declarationTContainer,e,{embeddedViewInjector:t,dehydratedView:n}))}}return e})();function Bp(){return Vp(No(),O())}function Vp(e,t){return e.type&4?new zp(t,e,jl(e,t)):null}function Hp(e,t,n,r,i){let a=e.data[t];if(a===null)a=Up(e,t,n,r,i),qo()&&(a.flags|=32);else if(a.type&64){a.type=n,a.value=r,a.attrs=i;let e=Fo();a.injectorIndex=e===null?-1:e.injectorIndex}return Io(a,!0),a}function Up(e,t,n,r,i){let a=Po(),o=Lo(),s=o?a:a&&a.parent,c=e.data[t]=Gp(e,s,n,t,r,i);return Wp(e,c,a,o),c}function Wp(e,t,n,r){e.firstChild===null&&(e.firstChild=t),n!==null&&(r?n.child==null&&t.parent!==null&&(n.child=t):n.next===null&&(n.next=t,t.prev=n))}function Gp(e,t,n,r,i,a){let o=t?t.injectorIndex:-1,s=0;return ko()&&(s|=128),{type:n,index:r,insertBeforeIndex:null,injectorIndex:o,directiveStart:-1,directiveEnd:-1,directiveStylingLast:-1,componentOffset:-1,controlDirectiveIndex:-1,customControlIndex:-1,propertyBindings:null,flags:s,providerIndexes:0,value:i,namespace:hs(),attrs:a,mergedAttrs:null,localNames:null,initialInputs:null,inputs:null,hostDirectiveInputs:null,outputs:null,hostDirectiveOutputs:null,directiveToIndex:null,tView:null,next:null,prev:null,projectionNext:null,child:null,parent:t,projection:null,styles:null,stylesWithoutHost:null,residualStyles:void 0,classes:null,classesWithoutHost:null,residualClasses:void 0,classBindings:0,styleBindings:0}}function Kp(e){let t=e[6]??[],n=e[3][11],r=[];for(let e of t)e.data.di===void 0?qp(e,n):r.push(e);e[6]=r}function qp(e,t){let n=0,r=e.firstChild;if(r){let i=e.data.r;for(;nnull,Yp=()=>null;function Xp(e,t){return Jp(e,t)}function Zp(e,t,n){return Yp(e,t,n)}var Qp=class{},$p=class{},em=(()=>{class e{static ɵprov=di({token:e,providedIn:`root`,factory:()=>null})}return e})();function tm(e){return e.debugInfo?.className||e.type.name||null}var nm={},rm=class{injector;parentInjector;constructor(e,t){this.injector=e,this.parentInjector=t}get(e,t,n){let r=this.injector.get(e,nm,n);return r!==nm||t===nm?r:this.parentInjector.get(e,t,n)}};function im(e,t,n){return e[t]=n}function am(e,t){return e[t]}function om(e,t,n){if(n===Ju)return!1;let r=e[t];return!Object.is(r,n)&&(e[t]=n,!0)}function sm(e,t,n,r){let i=om(e,t,n);return om(e,t+1,r)||i}function cm(e,t,n,r,i){let a=sm(e,t,n,r);return om(e,t+2,i)||a}function lm(e,t,n,r,i,a){let o=sm(e,t,n,r);return sm(e,t+2,i,a)||o}function um(e,t,n){return function r(i){let a=r.__ngNativeEl__;a!==void 0&&eu(i,a),Ap(Ja(e)?so(e.index,t):t,5);let o=t[8],s=dm(t,o,n,i),c=r.__ngNextListenerFn__;for(;c;)s=dm(t,o,c,i)&&s,c=c.__ngNextListenerFn__;return s}}function dm(e,t,n,r){let i=w(null);try{return Fc(Sc.OutputStart,t,n),n(r)!==!1}catch(t){return $f(e,t),!1}finally{Fc(Sc.OutputEnd,t,n),w(i)}}function fm(e,t,n,r,i,a,o,s){let c=Ya(e),l=!1,u=null;if(!r&&c&&(u=mm(t,n,a,e.index)),u!==null){let e=u.__ngLastListenerFn__||u;e.__ngNextListenerFn__=o,u.__ngLastListenerFn__=o,l=!0}else{let o=ro(e,n),c=r?r(o):o;r||(s.__ngNativeEl__=o);let l=i.listen(c,a,s);pm(a)||hm(r?t=>r(to(t[e.index])):e.index,t,n,a,s,l,!1)}return l}function pm(e){return e.startsWith(`animation`)||e.startsWith(`transition`)}function mm(e,t,n,r){let i=e.cleanup;if(i!=null)for(let e=0;er?n[r]:null}typeof a==`string`&&(e+=2)}return null}function hm(e,t,n,r,i,a,o){let s=t.firstCreatePass?So(t):null,c=xo(n),l=c.length;c.push(i,a),s&&s.push(r,e,l,(l+1)*(o?-1:1))}function gm(e,t,n,r,i,a){let o=t[n],s=t[1],c=o[s.data[n].outputs[r]].subscribe(a);hm(e.index,s,t,i,a,c,!0)}var _m=Symbol(`BINDING`),vm=new vi(``);function ym(e,t,n){let r=n?e.styles:null,i=n?e.classes:null,a=0;if(t!==null)for(let e=0;e0&&(n.directiveToIndex=new Map);for(let c=0;c0;){let n=e[--t];if(typeof n==`number`&&n<0)return n}return 0}function Nm(e,t,n){if(n){if(t.exportAs)for(let r=0;r{let[n,r,i]=e[t],a={propName:n,templateName:t,isSignal:(r&Pf.SignalBased)!==0};return i&&(a.transform=i),a})}function Vm(e){return Object.keys(e).map(t=>({propName:e[t],templateName:t}))}function Hm(e,t,n){let r=t instanceof Aa?t:t?.injector;return r&&e.getStandaloneInjector!==null&&(r=e.getStandaloneInjector(r)||r),r?new rm(n,r):n}function Um(e){let t=e.get($p,null);if(t===null)throw new T(407,!1);return{rendererFactory:t,sanitizer:e.get(em,null),changeDetectionScheduler:e.get(ic,null),ngReflect:!1,tracingService:e.get(kd,null,{optional:!0})}}function Wm(e,t,n){let r=Km(e);return xu(t,r,r===`svg`?`svg`:r===`math`?eo:n)}function Gm(e){if((e&&`localName`in e&&typeof e.localName==`string`?e.localName:e?.tagName)?.toLowerCase()===`script`)throw new T(905,!1)}function Km(e){return(e.selectors[0][0]||`div`).toLowerCase()}var qm=class{componentDef;ngModule;selector;componentType;ngContentSelectors;isBoundToModule;cachedInputs=null;cachedOutputs=null;get inputs(){return this.cachedInputs??=Bm(this.componentDef.inputs),this.cachedInputs}get outputs(){return this.cachedOutputs??=Vm(this.componentDef.outputs),this.cachedOutputs}constructor(e,t){this.componentDef=e,this.ngModule=t,this.componentType=e.type,this.selector=Ku(e.selectors),this.ngContentSelectors=e.ngContentSelectors??[],this.isBoundToModule=!!t}create(e,t,n,r,i,a,o){Fc(Sc.DynamicComponentStart);let s=w(null);try{let s=this.componentDef,c=Hm(s,r||this.ngModule,e),l=Um(c),u=l.tracingService;return u&&u.componentCreate?u.componentCreate(tm(s),()=>this.createComponentRef(l,c,t,n,i,a,o)):this.createComponentRef(l,c,t,n,i,a,o)}finally{w(s)}}createComponentRef(e,t,n,r,i,a,o){let s=this.componentDef,c=Jm(r,s,a,i),l=e.rendererFactory.createRenderer(null,s),u=r?zf(l,r,s.encapsulation,t):Wm(s,l,o??null);Gm(u);let d=t.get(vm,null),f=Ym(u,()=>t.get(Ss,null)??Xl());d&&d.addHost(f);let p=a?.some(Zm)||i?.some(e=>typeof e!=`function`&&e.bindings.some(Zm)),m=Of(null,c,null,512|Af(s),null,null,e,l,t,null,ru(u,t,!0));d&&Rm&&f instanceof ShadowRoot&&vo(m,()=>{d.removeHost(f)}),m[27]=u,ns(m);let h=null;try{let e=Fm(27,m,2,`#host`,()=>c.directiveRegistry,!0,0);Ou(l,u,e),Wl(u,m),Lf(c,m,e),ou(c,e,m),Im(c,e),n!==void 0&&$m(e,this.ngContentSelectors,n),h=so(e.index,m),m[8]=h[8],rp(c,m,null)}catch(e){throw h!==null&&Hl(h),Hl(m),e}finally{Fc(Sc.DynamicComponentEnd),ss()}return new Qm(this.componentType,m,!!p)}};function Jm(e,t,n,r){let i=e?[`ng-version`,`22.1.7`]:qu(t.selectors[0]),a=null,o=null,s=0;if(n)for(let e of n)s+=e[_m].requiredVars,e.create&&(e.targetIdx=0,(a??=[]).push(e)),e.update&&(e.targetIdx=0,(o??=[]).push(e));if(r)for(let e=0;e{if(n&1&&e)for(let t of e)t.create();if(n&2&&t)for(let e of t)e.update()}}function Zm(e){let t=e[_m].kind;return t===`input`||t===`twoWay`}var Qm=class extends Qp{_rootLView;_hasInputBindings;instance;hostView;changeDetectorRef;componentType;location;previousInputValues=null;_tNode;constructor(e,t,n){super(),this._rootLView=t,this._hasInputBindings=n,this._tNode=io(t[1],27),this.location=jl(this._tNode,t),this.instance=so(this._tNode.index,t)[8],this.hostView=this.changeDetectorRef=new Rp(t,void 0),this.componentType=e}setInput(e,t){this._hasInputBindings;let n=this._tNode;if(this.previousInputValues??=new Map,this.previousInputValues.has(e)&&Object.is(this.previousInputValues.get(e),t))return;let r=this._rootLView;ep(n,r[1],r,e,t),this.previousInputValues.set(e,t),Ap(so(n.index,r),1)}get injector(){return new Tl(this._tNode,this._rootLView)}destroy(){this.hostView.destroy()}onDestroy(e){this.hostView.onDestroy(e)}};function $m(e,t,n){let r=e.projection=[];for(let e=0;e{class e{static __NG_ELEMENT_ID__=th}return e})();function th(){return ah(No(),O())}var nh=class e extends eh{_lContainer;_hostTNode;_hostLView;constructor(e,t,n){super(),this._lContainer=e,this._hostTNode=t,this._hostLView=n}get element(){return jl(this._hostTNode,this._hostLView)}get injector(){return new Tl(this._hostTNode,this._hostLView)}get parentInjector(){let e=pl(this._hostTNode,this._hostLView);if($c(e)){let t=nl(e,this._hostLView),n=el(e),r=t[1].data[n+8];return new Tl(r,t)}return new Tl(null,this._hostLView)}clear(){for(;this.length>0;)this.remove(this.length-1)}get(e){let t=rh(this._lContainer);return t!==null&&t[e]||null}get length(){return this._lContainer.length-10}createEmbeddedView(e,t,n){let r,i;typeof n==`number`?r=n:n!=null&&(r=n.index,i=n.injector);let a=Xp(this._lContainer,e.ssrId),o=e.createEmbeddedViewImpl(t||{},i,a);return this.insertImpl(o,r,op(this._hostTNode,a)),o}createComponent(e,t,n,r,i,a,o){let s,c=t||{};s=c.index,n=c.injector,r=c.projectableNodes,i=c.environmentInjector||c.ngModuleRef,a=c.directives,o=c.bindings;let l=new qm(Ei(e)),u=n||this.parentInjector;if(!i&&l.ngModule==null){let e=this.parentInjector.get(Aa,null);e&&(i=e)}let d=Ei(l.componentType??{}),f=Xp(this._lContainer,d?.id??null),p=f?.firstChild??null,m=l.create(u,r,p,i,a,o,this._getHostElementNamespace());return this.insertImpl(m.hostView,s,op(this._hostTNode,f)),m}_getHostElementNamespace(){if(this._hostTNode.type&2){let e=this._hostTNode.parent??this._hostLView[5];return e!==null&&e.type&2&&typeof e.value==`string`&&e.value.toLowerCase()===`foreignobject`?null:e?.namespace??null}return this._hostTNode.namespace}insert(e,t){return this.insertImpl(e,t,!0)}insertImpl(t,n,r){let i=t._lView;if(lo(i)){let n=this.indexOf(t);if(n!==-1)this.detach(n);else{let n=i[3],r=new e(n,n[5],n[3]);r.detach(r.indexOf(t))}}let a=this._adjustIndex(n),o=this._lContainer;return Np(o,i,a,r),t.attachToViewContainerRef(),na(ih(o),a,t),t}move(e,t){return this.insert(e,t)}indexOf(e){let t=rh(this._lContainer);return t===null?-1:t.indexOf(e)}remove(e){let t=this._adjustIndex(e,-1),n=Fp(this._lContainer,t);n&&(ra(ih(this._lContainer),t),of(n[1],n))}detach(e){let t=this._adjustIndex(e,-1),n=Fp(this._lContainer,t);return n&&ra(ih(this._lContainer),t)!=null?new Rp(n):null}_adjustIndex(e,t=0){return e??this.length+t}};function rh(e){return e[8]}function ih(e){return e[8]||=[]}function ah(e,t){let n,r=t[e.index];return Ka(r)?n=r:(n=jp(r,t,null,e),t[e.index]=n,Mf(t,n)),sh(n,t,e,r),new nh(n,e,t)}function oh(e,t){let n=e[11],r=n.createComment(``),i=ro(t,e);return Su(n,n.parentNode(i),r,n.nextSibling(i),!1),r}var sh=uh,ch=()=>!1;function lh(e,t,n){return ch(e,t,n)}function uh(e,t,n,r){if(e[7])return;let i;i=n.type&8?to(r):oh(t,n),e[7]=i}var dh=class e{queryList;matches=null;constructor(e){this.queryList=e}clone(){return new e(this.queryList)}setDirty(){this.queryList.setDirty()}},fh=class e{queries;constructor(e=[]){this.queries=e}createEmbeddedView(t){let n=t.queries;if(n!==null){let r=t.contentQueries===null?n.length:t.contentQueries[0],i=[];for(let e=0;e0)r.push(o[e/2]);else{let i=a[e+1],o=t[-n];for(let e=10;ee.trim())}function Eh(e,t,n){e.queries===null&&(e.queries=new mh),e.queries.track(new hh(t,n))}function Dh(e,t){return e.queries.getByIndex(t)}function Oh(e,t){let n=e[1],r=Dh(n,t);return r.crossesNgTemplate?xh(n,e,t,[]):bh(n,e,r,t)}function kh(e,t,n){let r,i=Mn(()=>{r._dirtyCounter();let n=Nh(r,e);if(t&&n===void 0)throw new T(-951,!1);return n});return r=i[dn],r._dirtyCounter=j(0),r._flatValue=void 0,i}function Ah(e){return kh(!0,!1,e)}function jh(e){return kh(!0,!0,e)}function Mh(e,t){let n=e[dn];n._lView=O(),n._queryIndex=t,n._queryList=Sh(n._lView,t),n._queryList.onDirty(()=>n._dirtyCounter.update(e=>e+1))}function Nh(e,t){let n=e._lView,r=e._queryIndex;if(n===void 0||r===void 0||n[2]&4)return t?void 0:ua;let i=Sh(n,r),a=Oh(n,r);return i.reset(a,Nl),t?i.first:i._changesDetected||e._flatValue===void 0?e._flatValue=i.toArray():e._flatValue}function Ph(e){return!!e&&typeof e.then==`function`}function Fh(e){return!!e&&typeof e.subscribe==`function`}var Ih=class{},Lh=class extends Ih{injector;instance=null;constructor(e){super();let t=new ja([...e.providers,{provide:Ih,useValue:this}],e.parent||ka(),e.debugName,new Set([`environment`]));this.injector=t,e.runEnvironmentInitializers&&t.resolveInjectorInitializers()}destroy(){this.injector.destroy()}onDestroy(e){this.injector.onDestroy(e)}};function Rh(e,t,n=null){return new Lh({providers:e,parent:t,debugName:n,runEnvironmentInitializers:!0}).injector}var zh=(()=>{class e{_injector;cachedInjectors=new Map;constructor(e){this._injector=e}getOrCreateStandaloneInjector(e){if(!e.standalone)return null;if(!this.cachedInjectors.has(e)){let t=ga(!1,e.type),n=t.length>0?Rh([t],this._injector,``):null;this.cachedInjectors.set(e,n)}return this.cachedInjectors.get(e)}ngOnDestroy(){try{for(let e of this.cachedInjectors.values())e!==null&&e.destroy()}finally{this.cachedInjectors.clear()}}static ɵprov=di({token:e,providedIn:`environment`,factory:()=>new e(qi(Aa))})}return e})();function Bh(e){return xc(()=>{let t=Kh(e),n={...t,decls:e.decls,vars:e.vars,template:e.template,consts:e.consts||null,ngContentSelectors:e.ngContentSelectors,onPush:e.changeDetection!==Ll.Eager,directiveDefs:null,pipeDefs:null,dependencies:t.standalone&&e.dependencies||null,getStandaloneInjector:t.standalone?e=>e.get(zh).getOrCreateStandaloneInjector(n):null,getExternalStyles:null,signals:e.signals??!1,data:e.data||{},encapsulation:e.encapsulation||su.Emulated,styles:e.styles||ua,_:null,schemas:e.schemas||null,tView:null,id:``};t.standalone&&jd(`NgStandalone`),qh(n);let r=e.dependencies;return n.directiveDefs=Jh(r,Vh),n.pipeDefs=Jh(r,Oi),n.id=Yh(n),n})}function Vh(e){return Ei(e)||Di(e)}function Hh(e,t){if(e==null)return la;let n={};for(let r in e)if(Object.hasOwn(e,r)){let i=e[r],a,o,s,c;Array.isArray(i)?(s=i[0],a=i[1],o=i[2]??a,c=i[3]||null):(a=i,o=i,s=Pf.None,c=null),n[a]=[r,s,c],t[a]=o}return n}function Uh(e){if(e==null)return la;let t={};for(let n in e)Object.hasOwn(e,n)&&(t[e[n]]=n);return t}function Wh(e){return xc(()=>{let t=Kh(e);return qh(t),t})}function Gh(e){return{type:e.type,name:e.name,factory:null,pure:e.pure!==!1,standalone:e.standalone??!0,onDestroy:e.type.prototype.ngOnDestroy||null}}function Kh(e){let t={};return{type:e.type,providersResolver:null,viewProvidersResolver:null,factory:null,hostBindings:e.hostBindings||null,hostVars:e.hostVars||0,hostAttrs:e.hostAttrs||null,contentQueries:e.contentQueries||null,declaredInputs:t,inputConfig:e.inputs||la,exportAs:e.exportAs||null,standalone:e.standalone??!0,signals:e.signals===!0,selectors:e.selectors||ua,viewQuery:e.viewQuery||null,features:e.features||null,setInput:null,resolveHostDirectives:null,hostDirectives:null,controlDef:null,signalFormsInputPresence:null,inputs:Hh(e.inputs,t),outputs:Uh(e.outputs),debugInfo:null}}function qh(e){e.features?.forEach(t=>t(e))}function Jh(e,t){return e?()=>{let n=typeof e==`function`?e():e,r=[];for(let e of n){let n=t(e);n!==null&&r.push(n)}return r}:null}function Yh(e){let t=0,n=typeof e.consts==`function`?``:e.consts,r=[e.selectors,e.ngContentSelectors,e.hostVars,e.hostAttrs,n,e.vars,e.decls,e.encapsulation,e.standalone,e.signals,e.exportAs,JSON.stringify(e.inputs),JSON.stringify(e.outputs),Object.getOwnPropertyNames(e.type.prototype),!!e.contentQueries,!!e.viewQuery];for(let e of r.join(`|`))t=Math.imul(31,t)+e.charCodeAt(0)<<0;return t+=2147483648,`c`+t}var Xh=new vi(``),Zh=(()=>{class e{resolve;reject;initialized=!1;done=!1;donePromise=new Promise((e,t)=>{this.resolve=e,this.reject=t});appInits=E(Xh,{optional:!0})??[];injector=E(xs);constructor(){}runInitializers(){if(this.initialized)return;let e=[];for(let t of this.appInits){let n=Ha(this.injector,t);if(Ph(n))e.push(n);else if(Fh(n)){let t=new Promise((e,t)=>{n.subscribe({complete:e,error:t})});e.push(t)}}let t=()=>{this.done=!0,this.resolve()};Promise.all(e).then(()=>{t()}).catch(e=>{this.reject(e)}),e.length===0&&t(),this.initialized=!0}static ɵfac=function(t){return new(t||e)};static ɵprov=kl({token:e,factory:e.ɵfac})}return e})();function Qh(e,t,n,r,i,a,o,s){if(n.firstCreatePass){e.mergedAttrs=Zc(e.mergedAttrs,e.attrs);let t=e.tView=Tf(2,e,i,a,o,n.directiveRegistry,n.pipeRegistry,null,n.schemas,n.consts,null);n.queries!==null&&(n.queries.template(n,e),t.queries=n.queries.embeddedTView(e))}s&&(e.flags|=s),Io(e,!1);let c=ng(n,t,e,r);_s()&&hf(n,t,c,e),Wl(c,t);let l=jp(c,t,c,e);t[r+27]=l,Mf(t,l),lh(l,e,t)}function $h(e,t,n,r,i,a,o,s,c,l,u){let d=n+27,f;return t.firstCreatePass?(f=Hp(t,d,4,o||null,s||null),Oo()&&xm(t,e,f,uo(t.consts,l),qf),Lc(t,f)):f=t.data[d],Qh(f,e,t,n,r,i,a,c),Ya(f)&&Lf(t,e,f),l!=null&&Rf(e,f,u),f}function eg(e,t,n,r,i,a,o,s,c,l,u){let d=n+27,f;if(t.firstCreatePass){if(f=Hp(t,d,4,o||null,s||null),l!=null){let e=uo(t.consts,l);f.localNames=[];for(let t=0;t{throw new T(600,``)})}var sg=10,cg=(()=>{class e{_runningTick=!1;_destroyed=!1;_destroyListeners=[];_views=[];internalErrorHandler=E(Js);afterRenderManager=E(Md);zonelessEnabled=E(ac);rootEffectScheduler=E(sc);dirtyFlags=0;tracingSnapshot=null;allTestViews=new Set;autoDetectTestViews=new Set;includeAllTestViews=!1;afterTick=new Zr;get allViews(){return[...(this.includeAllTestViews?this.allTestViews:this.autoDetectTestViews).keys(),...this._views]}get destroyed(){return this._destroyed}componentTypes=[];components=[];internalPendingTask=E(Ds);get isStable(){return this.internalPendingTask.hasPendingTasksObservable.pipe(ei(e=>!e))}constructor(){E(kd,{optional:!0})}whenStable(){let e;return new Promise(t=>{e=this.isStable.subscribe({next:e=>{e&&t()}})}).finally(()=>{e.unsubscribe()})}_injector=E(Aa);_rendererFactory=null;get injector(){return this._injector}bootstrap(e,t){return this.bootstrapImpl(e,t)}bootstrapImpl(e,t,n=xs.NULL){return this._injector.get(Fs).run(()=>{if(Fc(Sc.BootstrapComponentStart),!this._injector.get(Zh).done)throw new T(405,``);let r=Ei(e),i=this._injector.get(Ih),a=new qm(r,i);this.componentTypes.push(e);let{hostElement:o,directives:s,bindings:c}=lg(t),l=o||a.selector,u=a.create(n,[],l,i.injector,s,c),d=u.location.nativeElement,f=u.injector.get(ig,null);return f?.registerApplication(d),u.onDestroy(()=>{this.detachView(u.hostView),ug(this.components,u),f?.unregisterApplication(d)}),this._loadComponent(u),Fc(Sc.BootstrapComponentEnd,u),u})}tick(){this.zonelessEnabled||(this.dirtyFlags|=1),this._tick()}_tick(){Fc(Sc.ChangeDetectionStart),this.tracingSnapshot===null?this.tickImpl():this.tracingSnapshot.run(Od.CHANGE_DETECTION,this.tickImpl)}tickImpl=()=>{if(this._runningTick)throw Fc(Sc.ChangeDetectionEnd),new T(101,!1);let e=w(null);try{this._runningTick=!0,this.synchronize()}finally{this._runningTick=!1,this.tracingSnapshot?.dispose(),this.tracingSnapshot=null,w(e),this.afterTick.next(),Fc(Sc.ChangeDetectionEnd)}};synchronize(){this._rendererFactory===null&&!this._injector.destroyed&&(this._rendererFactory=this._injector.get($p,null,{optional:!0}));let e=0;for(;this.dirtyFlags!==0&&e++ho(e))){this.dirtyFlags|=2;return}this.dirtyFlags&=-8}attachView(e){let t=e;this._views.push(t),t.attachToAppRef(this)}detachView(e){let t=e;ug(this._views,t),t.detachFromAppRef()}_loadComponent(e){this.attachView(e.hostView);try{this.tick()}catch(e){this.internalErrorHandler(e)}this.components.push(e),this._injector.get(ag,[]).forEach(t=>t(e))}ngOnDestroy(){if(!this._destroyed)try{this._destroyListeners.forEach(e=>e()),this._views.slice().forEach(e=>e.destroy())}finally{this._destroyed=!0,this._views=[],this._destroyListeners=[]}}onDestroy(e){return this._destroyListeners.push(e),()=>ug(this._destroyListeners,e)}destroy(){if(this._destroyed)throw new T(406,!1);let e=this._injector;e.destroy&&!e.destroyed&&e.destroy()}get viewCount(){return this._views.length}static ɵfac=function(t){return new(t||e)};static ɵprov=kl({token:e,factory:e.ɵfac})}return e})();function lg(e){return e===void 0||typeof e==`string`||e instanceof Element?{hostElement:e}:e}function ug(e,t){let n=e.indexOf(t);n>-1&&e.splice(n,1)}function N(e,t,n,r){let i=O();return om(i,Go(),t)&&(Mo(),Jf(ds(),i,e,t,n,r)),N}function dg(e){if(jd(`NgAnimateEnter`),!fd)return dg;let t=O();if(pd(t))return dg;let n=No(),r=t[9].get(Fs);return Dd(Cd(t),n,()=>fg(t,n,e,r)),Wd(t[9]),Gd(t[9],Cd(t)),dg}function fg(e,t,n,r){let i=ro(t,e),a=e[11],o=wd(n),s=[],c=!1,l=e=>{if(Td(e)!==i)return;let t=e instanceof AnimationEvent?`animationend`:`transitionend`;r.runOutsideAngular(()=>{a.listen(i,t,u)})},u=e=>{Td(e)===i&&(Ed(e,i)&&(c=!0),pg(e,i,a))};if(o&&o.length>0){r.runOutsideAngular(()=>{s.push(a.listen(i,`animationstart`,l)),s.push(a.listen(i,`transitionstart`,l))}),md(i,o,s);for(let e of o)a.addClass(i,e);r.runOutsideAngular(()=>{requestAnimationFrame(()=>{if(!c&&(sd(i,_d,fd),!_d.has(i))){for(let e of o)a.removeClass(i,e);hd(i)}})})}}function pg(e,t,n){let r=gd.get(t);if(Td(e)===t&&r&&Ed(e,t)){e.stopPropagation();for(let e of r.classList)n.removeClass(t,e);hd(t)}}var mg=class{destroy(e){}updateValue(e,t){}swap(e,t){let n=Math.min(e,t),r=Math.max(e,t),i=this.detach(r);if(r-n>1){let e=this.detach(n);this.attach(n,i),this.attach(r,e)}else this.attach(n,i)}move(e,t){this.attach(t,this.detach(e))}};function hg(e,t,n,r,i){return e===n&&Object.is(t,r)?1:Object.is(i(e,t),i(n,r))?-1:0}function gg(e,t,n,r){let i,a,o=0,s=e.length-1;if(Array.isArray(t)){w(r);let c=t.length-1;for(w(null);o<=s&&o<=c;){let r=e.at(o),l=t[o],u=hg(o,r,o,l,n);if(u!==0){u<0&&e.updateValue(o,l),o++;continue}let d=e.at(s),f=t[c],p=hg(s,d,c,f,n);if(p!==0){p<0&&e.updateValue(s,f),s--,c--;continue}let m=n(o,r),h=n(s,d),g=n(o,l);if(Object.is(g,h)){let t=n(c,f);Object.is(t,m)?(e.swap(o,s),e.updateValue(s,f),c--,s--):e.move(s,o),e.updateValue(o,l),o++;continue}if(i??=new bg,a??=yg(e,o,s,n),_g(e,i,o,g))e.updateValue(o,l),o++,s++;else if(a.has(g))i.set(m,e.detach(o)),s--;else{let n=e.create(o,t[o]);e.attach(o,n),o++,s++}}for(;o<=c;)vg(e,i,n,o,t[o]),o++}else if(t!=null){w(r);let c=t[Symbol.iterator]();w(null);let l=c.next();for(;!l.done&&o<=s;){let t=e.at(o),r=l.value,u=hg(o,t,o,r,n);if(u!==0)u<0&&e.updateValue(o,r),o++,l=c.next();else{i??=new bg,a??=yg(e,o,s,n);let u=n(o,r);if(_g(e,i,o,u))e.updateValue(o,r),o++,s++,l=c.next();else if(!a.has(u))e.attach(o,e.create(o,r)),o++,s++,l=c.next();else{let r=n(o,t);i.set(r,e.detach(o)),s--}}}for(;!l.done;)vg(e,i,n,e.length,l.value),l=c.next()}for(;o<=s;)e.destroy(e.detach(s--));i?.forEach(t=>{e.destroy(t)})}function _g(e,t,n,r){return t!==void 0&&t.has(r)?(e.attach(n,t.get(r)),t.delete(r),!0):!1}function vg(e,t,n,r,i){if(_g(e,t,r,n(r,i)))e.updateValue(r,i);else{let t=e.create(r,i);e.attach(r,t)}}function yg(e,t,n,r){let i=new Set;for(let a=t;a<=n;a++)i.add(r(a,e.at(a)));return i}var bg=class{kvMap=new Map;_vMap=void 0;has(e){return this.kvMap.has(e)}delete(e){if(!this.has(e))return!1;let t=this.kvMap.get(e);return this._vMap!==void 0&&this._vMap.has(t)?(this.kvMap.set(e,this._vMap.get(t)),this._vMap.delete(t)):this.kvMap.delete(e),!0}get(e){return this.kvMap.get(e)}set(e,t){if(this.kvMap.has(e)){let n=this.kvMap.get(e);this._vMap===void 0&&(this._vMap=new Map);let r=this._vMap;for(;r.has(n);)n=r.get(n);r.set(n,t)}else this.kvMap.set(e,t)}forEach(e){for(let[t,n]of this.kvMap)if(e(n,t),this._vMap!==void 0){let r=this._vMap;for(;r.has(n);)n=r.get(n),e(n,t)}}};function P(e,t,n,r,i,a,o,s){jd(`NgControlFlow`);let c=O(),l=Mo();return eg(c,l,e,t,n,r,i,uo(l.consts,a),256,o,s),xg}function xg(e,t,n,r,i,a,o,s){jd(`NgControlFlow`);let c=O(),l=Mo();return eg(c,l,e,t,n,r,i,uo(l.consts,a),512,o,s),xg}function F(e,t){jd(`NgControlFlow`);let n=O(),r=Go(),i=n[r]===Ju?-1:n[r],a=i===-1?void 0:Dg(n,27+i);if(om(n,r,e)){let r=w(null);try{if(a!==void 0&&Pp(a,0),e!==-1){let r=27+e,i=Dg(n,r),a=Mg(n[1],r),o=Zp(i,a,n);Np(i,ap(n,a,t,{dehydratedView:o}),0,op(a,o))}}finally{w(r)}}else if(a!==void 0){let e=Mp(a,0);e!==void 0&&(e[8]=t)}}var Sg=class{lContainer;$implicit;$index;constructor(e,t,n){this.lContainer=e,this.$implicit=t,this.$index=n}get $count(){return this.lContainer.length-10}};function Cg(e){return e}function wg(e,t){return t}var Tg=class{hasEmptyBlock;trackByFn;liveCollection;constructor(e,t,n){this.hasEmptyBlock=e,this.trackByFn=t,this.liveCollection=n}};function I(e,t,n,r,i,a,o,s,c,l,u,d,f){jd(`NgControlFlow`);let p=O(),m=Mo(),h=c!==void 0,g=O(),_=new Tg(h,s?o.bind(g[15][8]):o);g[27+e]=_,eg(p,m,e+1,t,n,r,i,uo(m.consts,a),256),h&&eg(p,m,e+2,c,l,u,d,uo(m.consts,f),512)}var Eg=class extends mg{lContainer;hostLView;templateTNode;operationsCounter=void 0;needsIndexUpdate=!1;constructor(e,t,n){super(),this.lContainer=e,this.hostLView=t,this.templateTNode=n}get length(){return this.lContainer.length-10}at(e){return this.getLView(e)[8].$implicit}attach(e,t){let n=t[6];this.needsIndexUpdate||=e!==this.length,Np(this.lContainer,t,e,op(this.templateTNode,n)),Og(this.lContainer,e)}detach(e){return this.needsIndexUpdate||=e!==this.length-1,kg(this.lContainer,e),Ag(this.lContainer,e)}create(e,t){let n=Xp(this.lContainer,this.templateTNode.tView.ssrId);return ap(this.hostLView,this.templateTNode,new Sg(this.lContainer,t,e),{dehydratedView:n})}destroy(e){of(e[1],e)}updateValue(e,t){this.getLView(e)[8].$implicit=t}reset(){this.needsIndexUpdate=!1}updateIndexes(){if(this.needsIndexUpdate)for(let e=0;e0){let e=n[9];Hd(e,r),ld.delete(n[19]),r.detachedLeaveAnimationFns=void 0}}function kg(e,t){if(e.length<=10)return;let n=e[10+t],r=n?n[26]:void 0;r&&r.leave&&r.leave.size>0&&(r.detachedLeaveAnimationFns=[])}function Ag(e,t){return Fp(e,t)}function jg(e,t){return Mp(e,t)}function Mg(e,t){return io(e,t)}function R(e,t,n){let r=O();return om(r,Go(),t)&&(Mo(),Vf(ds(),r,e,t,r[11],n)),R}function Ng(e,t,n,r,i){ep(t,e,n,i?`class`:`style`,r)}function z(e,t,n,r){let i=O(),a=i[1],o=e+27,s=a.firstCreatePass?Fm(o,i,2,t,qf,Oo(),n,r):a.data[o];if(Ja(s)){let n=i[10].tracingService;if(n&&n.componentCreate){let o=a.data[s.directiveStart+s.componentOffset];return n.componentCreate(tm(o),()=>(Pg(e,t,i,s,r),z))}}return Pg(e,t,i,s,r),z}function Pg(e,t,n,r,i){if(Zf(r,n,e,t,Ig),Ya(r)){let e=n[1];Lf(e,n,r),ou(e,r,n)}i!=null&&Rf(n,r)}function B(){let e=Mo(),t=Qf(No());return e.firstCreatePass&&Im(e,t),Ao(t)&&jo(),Do(),t.classesWithoutHost!=null&&Kc(t)&&Ng(e,t,O(),t.classesWithoutHost,!0),t.stylesWithoutHost!=null&&qc(t)&&Ng(e,t,O(),t.stylesWithoutHost,!1),B}function V(e,t,n,r){return z(e,t,n,r),B(),V}function H(e,t,n,r){let i=O(),a=i[1],o=e+27,s=a.firstCreatePass?Lm(o,a,2,t,n,r):a.data[o];return Zf(s,i,e,t,Ig),r!=null&&Rf(i,s),H}function U(){return Ao(Qf(No()))&&jo(),Do(),U}function Fg(e,t,n,r){return H(e,t,n,r),U(),Fg}var Ig=(e,t,n,r,i)=>(vs(!0),xu(t[11],r,hs()));function Lg(e,t,n){let r=O(),i=r[1],a=e+27,o=i.firstCreatePass?Fm(a,r,8,`ng-container`,qf,Oo(),t,n):i.data[a];if(Zf(o,r,e,`ng-container`,Bg),Ya(o)){let e=r[1];Lf(e,r,o),ou(e,o,r)}return n!=null&&Rf(r,o),Lg}function Rg(){let e=Mo(),t=Qf(No());return e.firstCreatePass&&Im(e,t),Rg}function zg(e,t,n){return Lg(e,t,n),Rg(),zg}var Bg=(e,t,n,r,i)=>(vs(!0),bu(t[11],``));function W(){return O()}function Vg(e,t,n){let r=O();return om(r,Go(),t)&&(Mo(),Hf(ds(),r,e,t,r[11],n)),Vg}var Hg=void 0;function Ug(e){let t=Math.floor(Math.abs(e)),n=e.toString().replace(/^[^.]*\.?/,``).length;return t===1&&n===0?1:5}var Wg=[`en`,[[`a`,`p`],[`AM`,`PM`]],[[`AM`,`PM`]],[[`S`,`M`,`T`,`W`,`T`,`F`,`S`],[`Sun`,`Mon`,`Tue`,`Wed`,`Thu`,`Fri`,`Sat`],[`Sunday`,`Monday`,`Tuesday`,`Wednesday`,`Thursday`,`Friday`,`Saturday`],[`Su`,`Mo`,`Tu`,`We`,`Th`,`Fr`,`Sa`]],Hg,[[`J`,`F`,`M`,`A`,`M`,`J`,`J`,`A`,`S`,`O`,`N`,`D`],[`Jan`,`Feb`,`Mar`,`Apr`,`May`,`Jun`,`Jul`,`Aug`,`Sep`,`Oct`,`Nov`,`Dec`],[`January`,`February`,`March`,`April`,`May`,`June`,`July`,`August`,`September`,`October`,`November`,`December`]],Hg,[[`B`,`A`],[`BC`,`AD`],[`Before Christ`,`Anno Domini`]],0,[6,0],[`M/d/yy`,`MMM d, y`,`MMMM d, y`,`EEEE, MMMM d, y`],[`h:mm a`,`h:mm:ss a`,`h:mm:ss a z`,`h:mm:ss a zzzz`],[`{1}, {0}`,Hg,Hg,Hg],[`.`,`,`,`;`,`%`,`+`,`-`,`E`,`×`,`‰`,`∞`,`NaN`,`:`],[`#,##0.###`,`#,##0%`,`¤#,##0.00`,`#E0`],`USD`,`$`,`US Dollar`,{},`ltr`,Ug],Gg=Object.create(null);function Kg(e){let t=Yg(e),n=qg(t);if(n)return n;let r=t.split(`-`)[0];if(n=qg(r),n)return n;if(r===`en`)return Wg;throw new T(701,!1)}function qg(e){if(!(e in Gg)){let t=Hi.ng&&Hi.ng.common&&Hi.ng.common.locales&&Hi.ng.common.locales[e];return t!==void 0&&(Gg[e]=t),t}return Gg[e]}var Jg={LocaleId:0,DayPeriodsFormat:1,DayPeriodsStandalone:2,DaysFormat:3,DaysStandalone:4,MonthsFormat:5,MonthsStandalone:6,Eras:7,FirstDayOfWeek:8,WeekendRange:9,DateFormat:10,TimeFormat:11,DateTimeFormat:12,NumberSymbols:13,NumberFormats:14,CurrencyCode:15,CurrencySymbol:16,CurrencyName:17,Currencies:18,Directionality:19,PluralCase:20,ExtraData:21};function Yg(e){return e.toLowerCase().replace(/_/g,`-`)}var Xg=`en-US`;function Zg(e){typeof e==`string`&&e.toLowerCase().replace(/_/g,`-`)}function G(e,t,n){let r=O(),i=Mo(),a=No();return $g(i,r,r[11],a,e,t,n),G}function Qg(e,t,n){let r=O(),i=Mo(),a=No();return(a.type&3||n)&&fm(a,i,r,n,r[11],e,t,um(a,r,t)),Qg}function $g(e,t,n,r,i,a,o){let s=!0,c=null;if((r.type&3||o)&&(c??=um(r,t,a),fm(r,e,t,o,n,i,a,c)&&(s=!1)),s){let e=r.outputs?.[i],n=r.hostDirectiveOutputs?.[i];if(n&&n.length)for(let e=0;e>17&32767}function a_(e){return(e&2)==2}function o_(e,t){return e&131071|t<<17}function s_(e){return e|2}function c_(e){return(e&131068)>>2}function l_(e,t){return e&-131069|t<<2}function u_(e){return(e&1)==1}function d_(e){return e|1}function f_(e,t,n,r,i,a){let o=a?t.classBindings:t.styleBindings,s=i_(o),c=c_(o);e[r]=n;let l=!1,u;if(Array.isArray(n)){let e=n;u=e[1],(u===null||sa(e,u)>0)&&(l=!0)}else u=n;if(i){if(c!==0){let t=i_(e[s+1]);e[r+1]=r_(t,s),t!==0&&(e[t+1]=l_(e[t+1],r)),e[s+1]=o_(e[s+1],r)}else e[r+1]=r_(s,0),s!==0&&(e[s+1]=l_(e[s+1],r)),s=r}else e[r+1]=r_(c,0),s===0?s=r:e[c+1]=l_(e[c+1],r),c=r;l&&(e[r+1]=s_(e[r+1])),m_(e,u,r,!0),m_(e,u,r,!1),p_(t,u,e,r,a),o=r_(s,c),a?t.classBindings=o:t.styleBindings=o}function p_(e,t,n,r,i){let a=i?e.residualClasses:e.residualStyles;a!=null&&typeof t==`string`&&sa(a,t)>=0&&(n[r+1]=d_(n[r+1]))}function m_(e,t,n,r){let i=e[n+1],a=t===null,o=r?i_(i):c_(i),s=!1;for(;o!==0&&(s===!1||a);){let n=e[o],i=e[o+1];h_(n,t)&&(s=!0,e[o+1]=r?d_(i):s_(i)),o=r?i_(i):c_(i)}s&&(e[n+1]=r?s_(i):d_(i))}function h_(e,t){return e===null||t==null||(Array.isArray(e)?e[1]:e)===t?!0:Array.isArray(e)&&typeof t==`string`?sa(e,t)>=0:!1}var g_={textEnd:0,key:0,keyEnd:0,value:0,valueEnd:0};function __(e){return e.substring(g_.key,g_.keyEnd)}function v_(e){return b_(e),y_(e,x_(e,0,g_.textEnd))}function y_(e,t){let n=g_.textEnd;return n===t?-1:(t=g_.keyEnd=S_(e,g_.key=t,n),x_(e,t,n))}function b_(e){g_.key=0,g_.keyEnd=0,g_.value=0,g_.valueEnd=0,g_.textEnd=e.length}function x_(e,t,n){for(;t32;)t++;return t}function C_(e,t,n){return E_(e,t,n,!1),C_}function q(e,t){return E_(e,t,null,!0),q}function w_(e){D_(L_,T_,e,!0)}function T_(e,t){for(let n=v_(t);n>=0;n=y_(t,n))aa(e,__(t),!0)}function E_(e,t,n,r){let i=O(),a=Mo(),o=Ko(2);if(a.firstUpdatePass&&k_(a,e,o,r),t!==Ju&&om(i,o,t)){let s=a.data[ls()];z_(a,s,i,i[11],e,i[o+1]=H_(t,n),r,o)}}function D_(e,t,n,r){let i=Mo(),a=Ko(2);i.firstUpdatePass&&k_(i,null,a,r);let o=O();if(n!==Ju&&om(o,a,n)){let s=i.data[ls()];if(U_(s,r)&&!O_(i,a)){let e=r?s.classesWithoutHost:s.stylesWithoutHost;e!==null&&(n=oi(e,n||``)),Ng(i,s,o,n,r)}else R_(i,s,o,o[11],o[a+1],o[a+1]=I_(e,t,n),r,a)}}function O_(e,t){return t>=e.expandoStartIndex}function k_(e,t,n,r){let i=e.data;if(i[n+1]===null){let a=i[ls()],o=O_(e,n);U_(a,r)&&t===null&&!o&&(t=!1),t=A_(i,a,t,r),f_(i,a,t,n,o,r)}}function A_(e,t,n,r){let i=Zo(e),a=r?t.residualClasses:t.residualStyles;if(i===null)(r?t.classBindings:t.styleBindings)===0&&(n=P_(null,e,t,n,r),n=F_(n,t.attrs,r),a=null);else{let o=t.directiveStylingLast;if(o===-1||e[o]!==i){if(n=P_(i,e,t,n,r),a===null){let n=j_(e,t,r);n!==void 0&&Array.isArray(n)&&(n=P_(null,e,t,n[1],r),n=F_(n,t.attrs,r),M_(e,t,r,n))}else a=N_(e,t,r)}}return a!==void 0&&(r?t.residualClasses=a:t.residualStyles=a),n}function j_(e,t,n){let r=n?t.classBindings:t.styleBindings;if(c_(r)!==0)return e[i_(r)]}function M_(e,t,n,r){let i=n?t.classBindings:t.styleBindings;e[i_(i)]=r}function N_(e,t,n){let r,i=t.directiveEnd;for(let a=1+t.directiveStylingLast;a0;){let t=e[i],a=Array.isArray(t),c=a?t[1]:t,l=c===null,u=n[i+1];u===Ju&&(u=l?ua:void 0);let d=l?oa(u,r):c===r?u:void 0;if(a&&!V_(d)&&(d=oa(t,r)),V_(d)&&(s=d,o))return s;let f=e[i+1];i=o?i_(f):c_(f)}if(t!==null){let e=a?t.residualClasses:t.residualStyles;e!=null&&(s=oa(e,r))}return s}function V_(e){return e!==void 0}function H_(e,t){return e==null||e===``||(typeof t==`string`?e=lu(e)+t:typeof e==`object`&&(e=ai(lu(e)))),e}function U_(e,t){return!!(e.flags&(t?8:16))}function J(e,t=``){let n=O(),r=Mo(),i=e+27,a=r.firstCreatePass?Hp(r,i,1,t,null):r.data[i],o=W_(r,n,a,t);n[i]=o,_s()&&hf(r,n,o,a),Io(a,!1)}var W_=(e,t,n,r)=>(vs(!0),vu(t[11],r));function G_(e,t,n,r=``){return om(e,Go(),n)?t+Ai(n)+r:Ju}function K_(e,t,n,r,i,a=``){let o=sm(e,Uo(),n,i);return Ko(2),o?t+Ai(n)+r+Ai(i)+a:Ju}function q_(e,t,n,r,i,a,o,s=``){let c=cm(e,Uo(),n,i,o);return Ko(3),c?t+Ai(n)+r+Ai(i)+a+Ai(o)+s:Ju}function J_(e,t,n,r,i,a,o,s,c,l=``){let u=lm(e,Uo(),n,i,o,c);return Ko(4),u?t+Ai(n)+r+Ai(i)+a+Ai(o)+s+Ai(c)+l:Ju}function Y(e){return X(``,e),Y}function X(e,t,n){let r=O(),i=G_(r,e,t,n);return i!==Ju&&Z_(r,ls(),i),X}function Z(e,t,n,r,i){let a=O(),o=K_(a,e,t,n,r,i);return o!==Ju&&Z_(a,ls(),o),Z}function Y_(e,t,n,r,i,a,o){let s=O(),c=q_(s,e,t,n,r,i,a,o);return c!==Ju&&Z_(s,ls(),c),Y_}function X_(e,t,n,r,i,a,o,s,c){let l=O(),u=J_(l,e,t,n,r,i,a,o,s,c);return u!==Ju&&Z_(l,ls(),u),X_}function Z_(e,t,n){let r=no(t,e);yu(e[11],r,n)}function Q_(e,t,n){vc(t)&&(t=t());let r=O();return om(r,Go(),t)&&(Mo(),Vf(ds(),r,e,t,r[11],n)),Q_}function $_(e,t){let n=vc(e);return n&&e.set(t),n}function ev(e,t){let n=O(),r=Mo(),i=No();return $g(r,n,n[11],i,e,t),ev}var tv={};function nv(e){jd(`NgLet`);let t=Mo(),n=O(),r=e+27;return Io(Hp(t,r,128,null,null),!1),oo(t,n,r,tv),nv}function rv(e){return oo(Mo(),O(),ls(),e),e}function iv(e){let t=ao(zo(),27+e);if(t===tv)throw new T(314,!1);return t}function av(e,t){let n=Ho()+e,r=O();return r[n]===Ju?im(r,n,t()):am(r,n)}function ov(e,t,n){return cv(O(),Ho(),e,t,n)}function sv(e,t){let n=e[t];return n===Ju?void 0:n}function cv(e,t,n,r,i,a){let o=t+n;return om(e,o,i)?im(e,o+1,a?r.call(a,i):r(i)):sv(e,o+1)}function lv(e,t,n,r,i,a,o){let s=t+n;return sm(e,s,i,a)?im(e,s+2,o?r.call(o,i,a):r(i,a)):sv(e,s+2)}function uv(e,t){let n=Mo(),r,i=e+27;n.firstCreatePass?(r=dv(t,n.pipeRegistry),n.data[i]=r,r.onDestroy&&(n.destroyHooks??=[]).push(i,r.onDestroy)):r=n.data[i];let a=r.factory||(r.factory=Qi(r.type,!0)),o=Bi(bm);try{let e=il(!1),t=a();return il(e),oo(n,O(),i,t),t}finally{Bi(o)}}function dv(e,t){if(t)for(let n=t.length-1;n>=0;n--){let r=t[n];if(e===r.name)return r}}function fv(e,t,n){let r=e+27,i=O(),a=ao(i,r);return mv(i,r)?cv(i,Ho(),t,a.transform,n,a):a.transform(n)}function pv(e,t,n,r){let i=e+27,a=O(),o=ao(a,i);return mv(a,i)?lv(a,Ho(),t,o.transform,n,r,o):o.transform(n,r)}function mv(e,t){return e[1].data[t].pure}function hv(e,t){return Vp(e,t)}var gv=(()=>{class e{applicationErrorHandler=E(Js);appRef=E(cg);taskService=E(Ds);ngZone=E(Fs);zonelessEnabled=E(ac);tracing=E(kd,{optional:!0});zoneIsDefined=typeof Zone<`u`&&!!Zone.root.run;schedulerTickApplyArgs=[{data:{__scheduler_tick__:!0}}];subscriptions=new hr;angularZoneId=this.zoneIsDefined?this.ngZone._inner?.get(Ns):null;scheduleInRootZone=!this.zonelessEnabled&&this.zoneIsDefined&&(E(oc,{optional:!0})??!1);cancelScheduledCallback=null;useMicrotaskScheduler=!1;runningTick=!1;pendingRenderTaskId=null;constructor(){this.subscriptions.add(this.appRef.afterTick.subscribe(()=>{let e=this.taskService.add();if(!this.runningTick&&(this.cleanup(),!this.zonelessEnabled||this.appRef.includeAllTestViews)){this.taskService.remove(e);return}this.switchToMicrotaskScheduler(),this.taskService.remove(e)})),this.subscriptions.add(this.ngZone.onUnstable.subscribe(()=>{this.runningTick||this.cleanup()}))}switchToMicrotaskScheduler(){this.ngZone.runOutsideAngular(()=>{let e=this.taskService.add();this.useMicrotaskScheduler=!0,queueMicrotask(()=>{this.useMicrotaskScheduler=!1,this.taskService.remove(e)})})}notify(e){if(!this.zonelessEnabled&&e===5)return;switch(e){case 0:case 2:this.appRef.dirtyFlags|=2;break;case 3:case 4:case 5:case 1:this.appRef.dirtyFlags|=4;break;case 6:this.appRef.dirtyFlags|=2;break;case 12:this.appRef.dirtyFlags|=16;break;case 13:this.appRef.dirtyFlags|=2;break;case 11:break;default:this.appRef.dirtyFlags|=8}if(this.appRef.tracingSnapshot=this.tracing?.snapshot(this.appRef.tracingSnapshot)??null,!this.shouldScheduleTick())return;let t=this.useMicrotaskScheduler?js:As;this.pendingRenderTaskId=this.taskService.add(),this.cancelScheduledCallback=this.scheduleInRootZone?Zone.root.run(()=>t(()=>this.tick())):this.ngZone.runOutsideAngular(()=>t(()=>this.tick()))}shouldScheduleTick(){return!(this.appRef.destroyed||this.pendingRenderTaskId!==null||this.runningTick||this.appRef._runningTick||!this.zonelessEnabled&&this.zoneIsDefined&&Zone.current.get(`isAngularZone_ID`+this.angularZoneId))}tick(){if(this.runningTick||this.appRef.destroyed)return;if(this.appRef.dirtyFlags===0){this.cleanup();return}!this.zonelessEnabled&&this.appRef.dirtyFlags&7&&(this.appRef.dirtyFlags|=1);let e=this.taskService.add();try{this.ngZone.run(()=>{this.runningTick=!0,this.appRef._tick()},void 0,this.schedulerTickApplyArgs)}catch(e){this.applicationErrorHandler(e)}finally{this.taskService.remove(e),this.cleanup()}}ngOnDestroy(){this.subscriptions.unsubscribe(),this.cleanup()}cleanup(){if(this.runningTick=!1,this.cancelScheduledCallback?.(),this.cancelScheduledCallback=null,this.pendingRenderTaskId!==null){let e=this.pendingRenderTaskId;this.pendingRenderTaskId=null,this.taskService.remove(e)}}static ɵfac=function(t){return new(t||e)};static ɵprov=kl({token:e,factory:e.ɵfac})}return e})();function _v(){return[{provide:ic,useExisting:gv},{provide:Fs,useClass:Us},{provide:ac,useValue:!0}]}function vv(){return typeof $localize<`u`&&$localize.locale||`en-US`}var yv=new vi(``,{factory:()=>E(yv,{optional:!0,skipSelf:!0})||vv()}),bv=class{destroyed=!1;listeners=null;errorHandler=E(qs,{optional:!0});isEmitting=!1;hasNullListeners=!1;destroyRef=E(Cs);constructor(){this.destroyRef.onDestroy(()=>{this.destroyed=!0,this.listeners=null})}subscribe(e){if(this.destroyed)throw new T(953,!1);return(this.listeners??=[]).push(e),{unsubscribe:()=>{let t=this.listeners?this.listeners.indexOf(e):-1;t>-1&&(this.isEmitting?(this.hasNullListeners=!0,this.listeners[t]=null):this.listeners.splice(t,1))}}}emit(e){if(this.destroyed){console.warn(ri(953,!1));return}if(this.listeners===null)return;this.isEmitting=!0;let t=w(null);try{for(let t of this.listeners)try{t!==null&&t(e)}catch(e){this.errorHandler?.handleError(e)}}finally{this.hasNullListeners&&(this.hasNullListeners=!1,this.listeners&&xv(this.listeners)),w(t),this.isEmitting=!1}}};function xv(e){let t=e.length-1;for(;t>-1;)e[t]===null&&e.splice(t,1),t--}function Q(e,t){return Mn(e,t?.equal)}function Sv(e){return ar(e)}(class e extends Error{_brand;constructor(e){super(e)}static IDLE=new e(`IDLE`);static LOADING=new e(`LOADING`)});var Cv=e=>e;function wv(e,t){return typeof e==`function`?Tv(tr(e,Cv,t?.equal),t?.debugName,t?.set):Tv(tr(e.source,e.computation,e.equal),e.debugName,e.set)}function Tv(e,t,n){let r=e[dn],i=e;if(n!==void 0){let t=e=>nr(r,e);i.set=e=>n(e,t),i.update=r=>n(r(Sv(e)),t)}else i.set=e=>nr(r,e),i.update=e=>rr(r,e);return i.asReadonly=Xs.bind(e),i}function Ev(e,t){let n=Object.create(bc);n.value=e,n.transformFn=t?.transform;function r(){if(mn(n),n.value===yc)throw new T(-950,null);return n.value}return r[dn]=n,r}function Dv(e){return new bv}function Ov(e,t){return Ev(e,t)}function kv(e){return Ev(yc,e)}var $=(Ov.required=kv,Ov);function Av(e,t){let n=Object.create(bc),r=new bv;n.value=e;function i(){return mn(n),jv(n.value),n.value}return i[dn]=n,i.asReadonly=Xs.bind(i),i.set=e=>{n.equal(n.value,e)||(Wn(n,e),r.emit(e))},i.update=e=>{jv(n.value),i.set(e(n.value))},i.subscribe=r.subscribe.bind(r),i.destroyRef=r.destroyRef,i}function jv(e){if(e===yc)throw new T(952,!1)}function Mv(e,t){return Av(e,t)}function Nv(e){return Av(yc,e)}var Pv=(Mv.required=Nv,Mv);function Fv(e,t){return Ah(t)}function Iv(e,t){return jh(t)}var Lv=(Fv.required=Iv,Fv),Rv=new vi(``),zv=new vi(``);function Bv(e){return!e.moduleRef}function Vv(e){let t=Bv(e)?e.r3Injector:e.moduleRef.injector,n=t.get(Fs);return n.run(()=>{Bv(e)?e.r3Injector.resolveInjectorInitializers():e.moduleRef.resolveInjectorInitializers();let r=t.get(Js),i;if(n.runOutsideAngular(()=>{i=n.onError.subscribe({next:r})}),Bv(e)){let n=()=>t.destroy(),r=e.platformInjector.get(Rv);r.add(n),t.onDestroy(()=>{i.unsubscribe(),r.delete(n)})}else{let t=()=>e.moduleRef.destroy(),n=e.platformInjector.get(Rv);n.add(t),e.moduleRef.onDestroy(()=>{ug(e.allPlatformModules,e.moduleRef),i.unsubscribe(),n.delete(t)})}return Uv(r,n,()=>{let n=t.get(Ds),r=n.add(),i=t.get(Zh);return i.runInitializers(),i.donePromise.then(()=>{if(Zg(t.get(yv,Xg)||`en-US`),!t.get(zv,!0))return Bv(e)?t.get(cg):(e.allPlatformModules.push(e.moduleRef),e.moduleRef);if(Bv(e)){let n=t.get(cg);return e.rootComponent!==void 0&&n.bootstrap(e.rootComponent),n}return Hv?.(e.moduleRef,e.allPlatformModules),e.moduleRef}).finally(()=>void n.remove(r))})})}var Hv;function Uv(e,t,n){try{let r=n();return Ph(r)?r.catch(n=>{throw t.runOutsideAngular(()=>e(n)),n}):r}catch(n){throw t.runOutsideAngular(()=>e(n)),n}}var Wv=null;function Gv(e=[],t){return xs.create({name:t,providers:[{provide:Ta,useValue:`platform`},{provide:Rv,useValue:new Set([()=>Wv=null])},...e]})}function Kv(e=[]){if(Wv)return Wv;let t=Gv(e);return Wv=t,og(),qv(t),t}function qv(e){let t=e.get($s,null);Ha(e,()=>{t?.forEach(e=>e())})}function Jv(e){let{rootComponent:t,appProviders:n,platformProviders:r,platformRef:i}=e;Fc(Sc.BootstrapApplicationStart);try{let e=i?.injector??Kv(r);return Vv({r3Injector:new Lh({providers:[_v(),Ys,...n||[]],parent:e,debugName:``,runEnvironmentInitializers:!1}).injector,platformInjector:e,rootComponent:t})}catch(e){return Promise.reject(e)}finally{Fc(Sc.BootstrapApplicationEnd)}}var Yv=Symbol(`NOT_SET`),Xv=new Set,Zv={...Kn,kind:`afterRenderEffectPhase`,consumerIsAlwaysLive:!0,consumerAllowSignalWrites:!0,value:Yv,cleanup:null,consumerMarkedDirty(){if(this.sequence.impl.executing){if(this.sequence.lastPhase===null||this.sequence.lastPhase(mn(r),r.value),r.signal[dn]=r,r.registerCleanupFn=e=>(r.cleanup??=new Set).add(e),this.nodes[e]=r,this.hooks[e]=e=>r.phaseFn(e)}}afterRun(){super.afterRun(),this.lastPhase=null}destroy(){if(this.onDestroyFns!==null)for(let e of this.onDestroyFns)e();super.destroy();for(let e of this.nodes)if(e)try{for(let t of e.cleanup??Xv)t()}finally{En(e)}}};function $v(e,t){let n=t?.injector??E(xs),r=n.get(ic),i=n.get(Md),a=n.get(kd,null,{optional:!0});i.impl??=n.get(Pd);let o=e;typeof o==`function`&&(o={mixedReadWrite:e});let s=n.get(nc,null,{optional:!0}),c=new Qv(i.impl,[o.earlyRead,o.write,o.mixedReadWrite,o.read],s?.view,r,n,a?.snapshot(null));return i.impl.register(c),c}var ey=null;function ty(){return ey}function ny(e){ey??=e}var ry=class{},iy=(function(e){return e[e.Format=0]=`Format`,e[e.Standalone=1]=`Standalone`,e})(iy||{}),ay=(function(e){return e[e.Narrow=0]=`Narrow`,e[e.Abbreviated=1]=`Abbreviated`,e[e.Wide=2]=`Wide`,e[e.Short=3]=`Short`,e})(ay||{}),oy=(function(e){return e[e.Short=0]=`Short`,e[e.Medium=1]=`Medium`,e[e.Long=2]=`Long`,e[e.Full=3]=`Full`,e})(oy||{}),sy={Decimal:0,Group:1,List:2,PercentSign:3,PlusSign:4,MinusSign:5,Exponential:6,SuperscriptingExponent:7,PerMille:8,Infinity:9,NaN:10,TimeSeparator:11,CurrencyDecimal:12,CurrencyGroup:13};function cy(e){return Kg(e)[Jg.LocaleId]}function ly(e,t,n){let r=Kg(e);return by(by([r[Jg.DayPeriodsFormat],r[Jg.DayPeriodsStandalone]],t),n)}function uy(e,t,n){let r=Kg(e);return by(by([r[Jg.DaysFormat],r[Jg.DaysStandalone]],t),n)}function dy(e,t,n){let r=Kg(e);return by(by([r[Jg.MonthsFormat],r[Jg.MonthsStandalone]],t),n)}function fy(e,t){let n=Kg(e)[Jg.Eras];return by(n,t)}function py(e,t){return by(Kg(e)[Jg.DateFormat],t)}function my(e,t){return by(Kg(e)[Jg.TimeFormat],t)}function hy(e,t){let n=Kg(e)[Jg.DateTimeFormat];return by(n,t)}function gy(e,t){let n=Kg(e),r=n[Jg.NumberSymbols][t];if(r===void 0){if(t===sy.CurrencyDecimal)return n[Jg.NumberSymbols][sy.Decimal];if(t===sy.CurrencyGroup)return n[Jg.NumberSymbols][sy.Group]}return r}function _y(e){if(!e[Jg.ExtraData])throw new T(2303,!1)}function vy(e){let t=Kg(e);return _y(t),(t[Jg.ExtraData][2]||[]).map(e=>typeof e==`string`?xy(e):[xy(e[0]),xy(e[1])])}function yy(e,t,n){let r=Kg(e);return _y(r),by(by([r[Jg.ExtraData][0],r[Jg.ExtraData][1]],t)||[],n)||[]}function by(e,t){for(let n=t;n>-1;n--)if(e[n]!==void 0)return e[n];throw new T(2304,!1)}function xy(e){let[t,n]=e.split(`:`);return{hours:+t,minutes:+n}}var Sy=/^(\d{4,})-?(\d\d)-?(\d\d)(?:T(\d\d)(?::?(\d\d)(?::?(\d\d)(?:\.(\d+))?)?)?(Z|([+-])(\d\d):?(\d\d))?)?$/,Cy=Object.create(null),wy=/((?:[^BEGHLMOSWYZabcdhmswyz']+)|(?:'(?:[^']|'')*')|(?:G{1,5}|y{1,4}|Y{1,4}|M{1,5}|L{1,5}|w{1,2}|W{1}|d{1,2}|E{1,6}|c{1,6}|a{1,5}|b{1,5}|B{1,5}|h{1,2}|H{1,2}|m{1,2}|s{1,2}|S{1,3}|z{1,4}|Z{1,5}|O{1,4}))([\s\S]*)/,Ty=256;function Ey(e,t,n,r){let i=Yy(e);Dy(t),t=ky(n,t)||t;let a=[],o;for(;t;)if(o=wy.exec(t),o){a=a.concat(o.slice(1));let e=a.pop();if(!e)break;t=e}else{a.push(t);break}let s=i.getTimezoneOffset();r&&(s=Ky(r,s),i=Jy(i,r));let c=``;return a.forEach(e=>{let t=Gy(e);c+=t?t(i,n,s):e===`''`?`'`:e.replace(/(^'|'$)/g,``).replace(/''/g,`'`)}),c}function Dy(e){if(e.length>Ty)throw new T(2300,!1)}function Oy(e,t,n){let r=new Date(0);return r.setFullYear(e,t,n),r.setHours(0,0,0),r}function ky(e,t){let n=cy(e);if(Cy[n]??=Object.create(null),Cy[n][t])return Cy[n][t];let r=``;switch(t){case`shortDate`:r=py(e,oy.Short);break;case`mediumDate`:r=py(e,oy.Medium);break;case`longDate`:r=py(e,oy.Long);break;case`fullDate`:r=py(e,oy.Full);break;case`shortTime`:r=my(e,oy.Short);break;case`mediumTime`:r=my(e,oy.Medium);break;case`longTime`:r=my(e,oy.Long);break;case`fullTime`:r=my(e,oy.Full);break;case`short`:let t=ky(e,`shortTime`),n=ky(e,`shortDate`);r=Ay(hy(e,oy.Short),[t,n]);break;case`medium`:let i=ky(e,`mediumTime`),a=ky(e,`mediumDate`);r=Ay(hy(e,oy.Medium),[i,a]);break;case`long`:let o=ky(e,`longTime`),s=ky(e,`longDate`);r=Ay(hy(e,oy.Long),[o,s]);break;case`full`:let c=ky(e,`fullTime`),l=ky(e,`fullDate`);r=Ay(hy(e,oy.Full),[c,l])}return r&&(Cy[n][t]=r),r}function Ay(e,t){return t&&(e=e.replace(/\{([^}]+)}/g,function(e,n){return Object.hasOwn(t,n)?t[n]:e})),e}function jy(e,t,n=`-`,r,i){let a=``;(e<0||i&&e<=0)&&(i?e=-e+1:(e=-e,a=n));let o=String(e);for(;o.length0||s>-n)&&(s+=n),e===3)s===0&&n===-12&&(s=12);else if(e===6)return My(s,t);let c=gy(o,sy.MinusSign);return jy(s,t,c,r,i)}}function Py(e,t){switch(e){case 0:return t.getFullYear();case 1:return t.getMonth();case 2:return t.getDate();case 3:return t.getHours();case 4:return t.getMinutes();case 5:return t.getSeconds();case 6:return t.getMilliseconds();case 7:return t.getDay();default:throw new T(2301,!1)}}function Fy(e,t,n=iy.Format,r=!1){return function(i,a){return Iy(i,a,e,t,n,r)}}function Iy(e,t,n,r,i,a){switch(n){case 2:return dy(t,i,r)[e.getMonth()];case 1:return uy(t,i,r)[e.getDay()];case 0:let n=e.getHours(),o=e.getMinutes();if(a){let e=vy(t),a=yy(t,i,r),s=e.findIndex(e=>{if(Array.isArray(e)){let[t,r]=e,i=n>=t.hours&&o>=t.minutes,a=n0?Math.floor(i/60):Math.ceil(i/60);switch(e){case 0:return(i>=0?`+`:``)+jy(o,2,a)+jy(Math.abs(i%60),2,a);case 1:return`GMT`+(i>=0?`+`:``)+jy(o,1,a);case 2:return`GMT`+(i>=0?`+`:``)+jy(o,2,a)+`:`+jy(Math.abs(i%60),2,a);case 3:return r===0?`Z`:(i>=0?`+`:``)+jy(o,2,a)+`:`+jy(Math.abs(i%60),2,a);default:throw new T(2310,!1)}}}var Ry=0,zy=4;function By(e){let t=Oy(e,Ry,1).getDay();return Oy(e,0,1+(t<=zy?zy:11)-t)}function Vy(e){let t=e.getDay(),n=t===0?-3:zy-t;return Oy(e.getFullYear(),e.getMonth(),e.getDate()+n)}function Hy(e,t=!1){return function(n,r){let i;if(t){let e=new Date(n.getFullYear(),n.getMonth(),1).getDay()-1,t=n.getDate();i=1+Math.floor((t+e)/7)}else{let e=Vy(n),t=By(e.getFullYear()),r=e.getTime()-t.getTime();i=1+Math.round(r/6048e5)}return jy(i,e,gy(r,sy.MinusSign))}}function Uy(e,t=!1){return function(n,r){return jy(Vy(n).getFullYear(),e,gy(r,sy.MinusSign),t)}}var Wy=Object.create(null);function Gy(e){if(Wy[e])return Wy[e];let t;switch(e){case`G`:case`GG`:case`GGG`:t=Fy(3,ay.Abbreviated);break;case`GGGG`:t=Fy(3,ay.Wide);break;case`GGGGG`:t=Fy(3,ay.Narrow);break;case`y`:t=Ny(0,1,0,!1,!0);break;case`yy`:t=Ny(0,2,0,!0,!0);break;case`yyy`:t=Ny(0,3,0,!1,!0);break;case`yyyy`:t=Ny(0,4,0,!1,!0);break;case`Y`:t=Uy(1);break;case`YY`:t=Uy(2,!0);break;case`YYY`:t=Uy(3);break;case`YYYY`:t=Uy(4);break;case`M`:case`L`:t=Ny(1,1,1);break;case`MM`:case`LL`:t=Ny(1,2,1);break;case`MMM`:t=Fy(2,ay.Abbreviated);break;case`MMMM`:t=Fy(2,ay.Wide);break;case`MMMMM`:t=Fy(2,ay.Narrow);break;case`LLL`:t=Fy(2,ay.Abbreviated,iy.Standalone);break;case`LLLL`:t=Fy(2,ay.Wide,iy.Standalone);break;case`LLLLL`:t=Fy(2,ay.Narrow,iy.Standalone);break;case`w`:t=Hy(1);break;case`ww`:t=Hy(2);break;case`W`:t=Hy(1,!0);break;case`d`:t=Ny(2,1);break;case`dd`:t=Ny(2,2);break;case`c`:case`cc`:t=Ny(7,1);break;case`ccc`:t=Fy(1,ay.Abbreviated,iy.Standalone);break;case`cccc`:t=Fy(1,ay.Wide,iy.Standalone);break;case`ccccc`:t=Fy(1,ay.Narrow,iy.Standalone);break;case`cccccc`:t=Fy(1,ay.Short,iy.Standalone);break;case`E`:case`EE`:case`EEE`:t=Fy(1,ay.Abbreviated);break;case`EEEE`:t=Fy(1,ay.Wide);break;case`EEEEE`:t=Fy(1,ay.Narrow);break;case`EEEEEE`:t=Fy(1,ay.Short);break;case`a`:case`aa`:case`aaa`:t=Fy(0,ay.Abbreviated);break;case`aaaa`:t=Fy(0,ay.Wide);break;case`aaaaa`:t=Fy(0,ay.Narrow);break;case`b`:case`bb`:case`bbb`:t=Fy(0,ay.Abbreviated,iy.Standalone,!0);break;case`bbbb`:t=Fy(0,ay.Wide,iy.Standalone,!0);break;case`bbbbb`:t=Fy(0,ay.Narrow,iy.Standalone,!0);break;case`B`:case`BB`:case`BBB`:t=Fy(0,ay.Abbreviated,iy.Format,!0);break;case`BBBB`:t=Fy(0,ay.Wide,iy.Format,!0);break;case`BBBBB`:t=Fy(0,ay.Narrow,iy.Format,!0);break;case`h`:t=Ny(3,1,-12);break;case`hh`:t=Ny(3,2,-12);break;case`H`:t=Ny(3,1);break;case`HH`:t=Ny(3,2);break;case`m`:t=Ny(4,1);break;case`mm`:t=Ny(4,2);break;case`s`:t=Ny(5,1);break;case`ss`:t=Ny(5,2);break;case`S`:t=Ny(6,1);break;case`SS`:t=Ny(6,2);break;case`SSS`:t=Ny(6,3);break;case`Z`:case`ZZ`:case`ZZZ`:t=Ly(0);break;case`ZZZZZ`:t=Ly(3);break;case`O`:case`OO`:case`OOO`:case`z`:case`zz`:case`zzz`:t=Ly(1);break;case`OOOO`:case`ZZZZ`:case`zzzz`:t=Ly(2);break;default:return null}return Wy[e]=t,t}function Ky(e,t){e=e.replace(/:/g,``);let n=Date.parse(`Jan 01, 1970 00:00:00 `+e)/6e4;return isNaN(n)?t:n}function qy(e,t){return e=new Date(e.getTime()),e.setMinutes(e.getMinutes()+t),e}function Jy(e,t,n){let r=e.getTimezoneOffset();return qy(e,-1*(Ky(t,r)-r))}function Yy(e){if(Zy(e))return e;if(typeof e==`number`&&!isNaN(e))return new Date(e);if(typeof e==`string`){if(e=e.trim(),/^(\d{4}(-\d{1,2}(-\d{1,2})?)?)$/.test(e)){let[t,n=1,r=1]=e.split(`-`).map(e=>+e);return Oy(t,n-1,r)}let t=parseFloat(e);if(!isNaN(e-t))return new Date(t);let n;if(n=e.match(Sy))return Xy(n)}let t=new Date(e);if(!Zy(t))throw new T(2311,!1);return t}function Xy(e){let t=new Date(0),n=0,r=0,i=e[8]?t.setUTCFullYear:t.setFullYear,a=e[8]?t.setUTCHours:t.setHours;e[9]&&(n=Number(e[9]+e[10]),r=Number(e[9]+e[11])),i.call(t,Number(e[1]),Number(e[2])-1,Number(e[3]));let o=Number(e[4]||0)-n,s=Number(e[5]||0)-r,c=Number(e[6]||0),l=Math.floor(parseFloat(`0.`+(e[7]||0))*1e3);return a.call(t,o,s,c,l),t}function Zy(e){return e instanceof Date&&!isNaN(e.valueOf())}var Qy=(()=>{class e{_viewContainerRef;_viewRef=null;ngTemplateOutletContext=null;ngTemplateOutlet=null;ngTemplateOutletInjector=null;injector=E(xs);constructor(e){this._viewContainerRef=e}ngOnChanges(e){if(this._shouldRecreateView(e)){let e=this._viewContainerRef;if(this._viewRef&&e.remove(e.indexOf(this._viewRef)),!this.ngTemplateOutlet){this._viewRef=null;return}let t=this._createContextForwardProxy();this._viewRef=e.createEmbeddedView(this.ngTemplateOutlet,t,{injector:this._getInjector()})}}_getInjector(){return this.ngTemplateOutletInjector===`outlet`?this.injector:this.ngTemplateOutletInjector??void 0}_shouldRecreateView(e){return!!e.ngTemplateOutlet||!!e.ngTemplateOutletInjector}_createContextForwardProxy(){return new Proxy({},{set:(e,t,n)=>this.ngTemplateOutletContext?Reflect.set(this.ngTemplateOutletContext,t,n):!1,get:(e,t,n)=>{if(this.ngTemplateOutletContext)return Reflect.get(this.ngTemplateOutletContext,t,n)}})}static ɵfac=function(t){return new(t||e)(bm(eh))};static ɵdir=Wh({type:e,selectors:[[``,`ngTemplateOutlet`,``]],inputs:{ngTemplateOutletContext:`ngTemplateOutletContext`,ngTemplateOutlet:`ngTemplateOutlet`,ngTemplateOutletInjector:`ngTemplateOutletInjector`},features:[Ec]})}return e})();function $y(e,t){return new T(2100,!1)}var eb=`mediumDate`,tb=new vi(``),nb=new vi(``),rb=(()=>{class e{locale;defaultTimezone;defaultOptions;constructor(e,t,n){this.locale=e,this.defaultTimezone=t,this.defaultOptions=n}transform(t,n,r,i){if(t==null||t===``||t!==t)return null;try{let e=n??this.defaultOptions?.dateFormat??eb,a=r??this.defaultOptions?.timezone??this.defaultTimezone??void 0;return Ey(t,e,i||this.locale,a)}catch(t){throw $y(e,t.message)}}static ɵfac=function(t){return new(t||e)(bm(yv,16),bm(tb,24),bm(nb,24))};static ɵpipe=Gh({name:`date`,type:e,pure:!0})}return e})(),ib=(()=>{class e{transform(e){return JSON.stringify(e,null,2)}static ɵfac=function(t){return new(t||e)};static ɵpipe=Gh({name:`json`,type:e,pure:!1})}return e})();function ab(e,t){t=encodeURIComponent(t);for(let n of e.split(`;`)){let e=n.indexOf(`=`),[r,i]=e==-1?[n,``]:[n.slice(0,e),n.slice(e+1)];if(r.trim()!==t)continue;let a=i;try{a=decodeURIComponent(i)}catch{}return a.length>1&&a[0]===`"`&&a[a.length-1]===`"`&&(a=a.slice(1,-1)),a}return null}var ob=`browser`,sb=class{_doc;constructor(e){this._doc=e}manager},cb=(()=>{class e extends sb{constructor(e){super(e)}supports(e){return!0}addEventListener(e,t,n,r){return e.addEventListener(t,n,r),()=>this.removeEventListener(e,t,n,r)}removeEventListener(e,t,n,r){return e.removeEventListener(t,n,r)}static ɵfac=function(t){return new(t||e)(qi(Ss))};static ɵprov=di({token:e,factory:e.ɵfac})}return e})(),lb=new vi(``),ub=(()=>{class e{_zone;_plugins;_eventNameToPlugin=new Map;constructor(e,t){this._zone=t,e.forEach(e=>{e.manager=this});let n=e.filter(e=>!(e instanceof cb));this._plugins=n.slice().reverse();let r=e.find(e=>e instanceof cb);r&&this._plugins.push(r)}addEventListener(e,t,n,r){return this._findPluginFor(t).addEventListener(e,t,n,r)}getZone(){return this._zone}_findPluginFor(e){let t=this._eventNameToPlugin.get(e);if(t)return t;if(t=this._plugins.find(t=>t.supports(e)),!t)throw new T(-5101,!1);return this._eventNameToPlugin.set(e,t),t}static ɵfac=function(t){return new(t||e)(qi(lb),qi(Fs))};static ɵprov=di({token:e,factory:e.ɵfac})}return e})(),db=`ng-app-id`;function fb(e){for(let t of e)t.remove()}function pb(e,t){let n=t.createElement(`style`);return n.textContent=e,n}function mb(e,t,n,r){let i=e.head?.querySelectorAll(`style[${db}="${t}"],link[${db}="${t}"]`);if(!i||i.length===0)return!1;for(let e of i)e.removeAttribute(db),e instanceof HTMLLinkElement?r.set(e.href.slice(e.href.lastIndexOf(`/`)+1),{usage:0,elements:[e]}):e.textContent&&n.set(e.textContent,{usage:0,elements:[e]});return!0}function hb(e,t){let n=t.createElement(`link`);return n.setAttribute(`rel`,`stylesheet`),n.setAttribute(`href`,e),n}var gb=(()=>{class e{doc;appId;nonce;inline=new Map;external=new Map;hosts=new Set;constructor(e,t,n,r={}){this.doc=e,this.appId=t,this.nonce=n,mb(e,t,this.inline,this.external)&&this.hosts.add(e.head)}addStyles(e,t){for(let t of e)this.addUsage(t,this.inline,pb);t?.forEach(e=>this.addUsage(e,this.external,hb))}removeStyles(e,t){for(let t of e)this.removeUsage(t,this.inline);t?.forEach(e=>this.removeUsage(e,this.external))}addUsage(e,t,n){let r=t.get(e);r?r.usage++:t.set(e,{usage:1,elements:[...this.hosts].map(t=>this.addElement(t,n(e,this.doc)))})}removeUsage(e,t){let n=t.get(e);n&&(n.usage--,n.usage<=0&&(fb(n.elements),t.delete(e)))}ngOnDestroy(){for(let[,{elements:e}]of[...this.inline,...this.external])fb(e);this.hosts.clear()}addHost(e){if(!this.hosts.has(e)){this.hosts.add(e);for(let[t,{elements:n}]of this.inline)n.push(this.addElement(e,pb(t,this.doc)));for(let[t,{elements:n}]of this.external)n.push(this.addElement(e,hb(t,this.doc)))}}removeHost(e){this.hosts.delete(e);for(let t of[...this.inline.values(),...this.external.values()]){let n=[];for(let r of t.elements)r.parentNode===e?r.remove():n.push(r);t.elements=n}}addElement(e,t){return this.nonce&&t.setAttribute(`nonce`,this.nonce),e.appendChild(t)}static ɵfac=function(t){return new(t||e)(qi(Ss),qi(Zs),qi(tc,8),qi(ec))};static ɵprov=di({token:e,factory:e.ɵfac})}return e})(),_b={svg:`http://www.w3.org/2000/svg`,xhtml:`http://www.w3.org/1999/xhtml`,xlink:`http://www.w3.org/1999/xlink`,xml:`http://www.w3.org/XML/1998/namespace`,xmlns:`http://www.w3.org/2000/xmlns/`,math:`http://www.w3.org/1998/Math/MathML`},vb=/%COMP%/g,yb=`%COMP%`,bb=`_nghost-${yb}`,xb=`_ngcontent-${yb}`,Sb=!0,Cb=new vi(``,{factory:()=>Sb}),wb=new vi(``);function Tb(e){return xb.replace(vb,e)}function Eb(e){return bb.replace(vb,e)}function Db(e,t){return t.map(t=>t.replace(vb,e))}var Ob=(()=>{class e{eventManager;sharedStylesHost;appId;removeStylesOnCompDestroy;doc;ngZone;nonce;tracingService;rendererByCompId=new Map;defaultRenderer;cssVarNamespace;constructor(e,t,n,r,i,a,o=null,s=null,c=null){this.eventManager=e,this.sharedStylesHost=t,this.appId=n,this.removeStylesOnCompDestroy=r,this.doc=i,this.ngZone=a,this.nonce=o,this.tracingService=s,this.cssVarNamespace=c??``,this.defaultRenderer=new kb(e,i,a,this.tracingService,this.cssVarNamespace)}createRenderer(e,t){if(!e||!t)return this.defaultRenderer;let n=this.getOrCreateRenderer(e,t);return n instanceof Nb?n.applyToHost(e):n instanceof Mb&&n.applyStyles(),n}getOrCreateRenderer(e,t){let n=this.rendererByCompId,r=n.get(t.id);if(!r){let i=this.doc,a=this.ngZone,o=this.eventManager,s=this.sharedStylesHost,c=this.removeStylesOnCompDestroy,l=this.tracingService;switch(t.encapsulation){case su.Emulated:r=new Nb(o,s,t,this.appId,c,i,a,l,this.cssVarNamespace);break;case su.ShadowDom:return new jb(o,e,t,i,a,this.nonce,l,this.cssVarNamespace,s);case su.ExperimentalIsolatedShadowDom:return new jb(o,e,t,i,a,this.nonce,l,this.cssVarNamespace);default:r=new Mb(o,s,t,c,i,a,l,this.cssVarNamespace)}n.set(t.id,r)}return r}ngOnDestroy(){this.rendererByCompId.clear()}componentReplaced(e){this.rendererByCompId.delete(e)}static ɵfac=function(t){return new(t||e)(qi(ub),qi(vm),qi(Zs),qi(Cb),qi(Ss),qi(Fs),qi(tc),qi(kd,8),qi(wb,8))};static ɵprov=di({token:e,factory:e.ɵfac})}return e})(),kb=class{eventManager;doc;ngZone;tracingService;cssVarNamespace;data=Object.create(null);throwOnSyntheticProps=!0;constructor(e,t,n,r,i=``){this.eventManager=e,this.doc=t,this.ngZone=n,this.tracingService=r,this.cssVarNamespace=i}destroy(){}destroyNode=null;createElement(e,t){return t?this.doc.createElementNS(_b[t]||t,e):this.doc.createElement(e)}createComment(e){return this.doc.createComment(e)}createText(e){return this.doc.createTextNode(e)}appendChild(e,t){(Ab(e)?e.content:e).appendChild(t)}insertBefore(e,t,n){if(e){let r=Ab(e)?e.content:e;if(n!=null&&n.parentNode!==r)throw new T(-5106,!1);r.insertBefore(t,n)}}removeChild(e,t){t.remove()}selectRootElement(e,t){let n=typeof e==`string`?this.doc.querySelector(e):e;if(!n)throw new T(-5104,!1);return t||(n.textContent=``),n}parentNode(e){return e.parentNode}nextSibling(e){return e.nextSibling}setAttribute(e,t,n,r){if(r){t=r+`:`+t;let i=_b[r];i?e.setAttributeNS(i,t,n):e.setAttribute(t,n)}else e.setAttribute(t,n)}removeAttribute(e,t,n){if(n){let r=_b[n];r?e.removeAttributeNS(r,t):e.removeAttribute(`${n}:${t}`)}else e.removeAttribute(t)}addClass(e,t){e.classList.add(t)}removeClass(e,t){e.classList.remove(t)}setStyle(e,t,n,r){let i=t.startsWith(`--`);i&&(t=t.replace(`%NS%`,this.cssVarNamespace)),i||r&(Yu.DashCase|Yu.Important)?e.style.setProperty(t,n,r&Yu.Important?`important`:``):e.style[t]=n}removeStyle(e,t,n){let r=t.startsWith(`--`);r&&(t=t.replace(`%NS%`,this.cssVarNamespace)),r||n&Yu.DashCase?e.style.removeProperty(t):e.style[t]=``}setProperty(e,t,n){e!=null&&(e[t]=n)}setValue(e,t){e.nodeValue=t}listen(e,t,n,r){if(typeof e==`string`&&(e=ty().getGlobalEventTarget(this.doc,e),!e))throw new T(-5102,!1);let i=this.decoratePreventDefault(n);return this.tracingService?.wrapEventListener&&(i=this.tracingService.wrapEventListener(e,t,i)),this.eventManager.addEventListener(e,t,i,r)}decoratePreventDefault(e){return t=>{if(t===`__ngUnwrap__`)return e;e(t)===!1&&t.preventDefault()}}};function Ab(e){return e.tagName===`TEMPLATE`&&e.content!==void 0}var jb=class extends kb{hostEl;sharedStylesHost;shadowRoot;constructor(e,t,n,r,i,a,o,s,c){super(e,r,i,o,s),this.hostEl=t,this.sharedStylesHost=c,this.shadowRoot=t.attachShadow({mode:`open`}),this.sharedStylesHost&&this.sharedStylesHost.addHost(this.shadowRoot);let l=n.styles;l=Db(n.id,l).map(e=>e.replace(/%NS%/g,s));for(let e of l){let t=document.createElement(`style`);a&&t.setAttribute(`nonce`,a),t.textContent=e,this.shadowRoot.appendChild(t)}let u=n.getExternalStyles?.();if(u)for(let e of u){let t=hb(e,r);a&&t.setAttribute(`nonce`,a),this.shadowRoot.appendChild(t)}}nodeOrShadowRoot(e){return e===this.hostEl?this.shadowRoot:e}appendChild(e,t){return super.appendChild(this.nodeOrShadowRoot(e),t)}insertBefore(e,t,n){return super.insertBefore(this.nodeOrShadowRoot(e),t,n)}removeChild(e,t){return super.removeChild(null,t)}parentNode(e){return this.nodeOrShadowRoot(super.parentNode(this.nodeOrShadowRoot(e)))}destroy(){this.sharedStylesHost&&this.sharedStylesHost.removeHost(this.shadowRoot)}},Mb=class extends kb{sharedStylesHost;removeStylesOnCompDestroy;styles;styleUrls;constructor(e,t,n,r,i,a,o,s,c){super(e,i,a,o,s),this.sharedStylesHost=t,this.removeStylesOnCompDestroy=r;let l=n.styles,u=c?Db(c,l):l;this.styles=u.map(e=>e.replace(/%NS%/g,s)),this.styleUrls=n.getExternalStyles?.(c)}applyStyles(){this.sharedStylesHost.addStyles(this.styles,this.styleUrls)}destroy(){this.removeStylesOnCompDestroy&&ld.size===0&&this.sharedStylesHost.removeStyles(this.styles,this.styleUrls)}},Nb=class extends Mb{contentAttr;hostAttr;constructor(e,t,n,r,i,a,o,s,c){let l=r+`-`+n.id;super(e,t,n,i,a,o,s,c,l),this.contentAttr=Tb(l),this.hostAttr=Eb(l)}applyToHost(e){this.applyStyles(),this.setAttribute(e,this.hostAttr,``)}createElement(e,t){let n=super.createElement(e,t);return super.setAttribute(n,this.contentAttr,``),n}},Pb=class e extends ry{supportsDOMEvents=!0;static makeCurrent(){ny(new e)}onAndCancel(e,t,n,r){return e.addEventListener(t,n,r),()=>{e.removeEventListener(t,n,r)}}dispatchEvent(e,t){e.dispatchEvent(t)}remove(e){e.remove()}createElement(e,t){return t||=this.getDefaultDocument(),t.createElement(e)}createHtmlDocument(){return document.implementation.createHTMLDocument(`fakeTitle`)}getDefaultDocument(){return document}isElementNode(e){return e.nodeType===Node.ELEMENT_NODE}isShadowRoot(e){return e instanceof DocumentFragment}getGlobalEventTarget(e,t){return t===`window`?window:t===`document`?e:t===`body`?e.body:null}getBaseHref(e){let t=Ib();return t==null?null:Lb(t)}resetBaseElement(){Fb=null}getUserAgent(){return window.navigator.userAgent}getCookie(e){return ab(document.cookie,e)}},Fb=null;function Ib(){return Fb||=document.head.querySelector(`base`),Fb?Fb.getAttribute(`href`):null}function Lb(e){return new URL(e,document.baseURI).pathname}var Rb=[`alt`,`control`,`meta`,`shift`],zb={"\b":`Backspace`," ":`Tab`,"":`Delete`,"\x1B":`Escape`,Del:`Delete`,Esc:`Escape`,Left:`ArrowLeft`,Right:`ArrowRight`,Up:`ArrowUp`,Down:`ArrowDown`,Menu:`ContextMenu`,Scroll:`ScrollLock`,Win:`OS`},Bb={alt:e=>e.altKey,control:e=>e.ctrlKey,meta:e=>e.metaKey,shift:e=>e.shiftKey},Vb=(()=>{class e extends sb{constructor(e){super(e)}supports(t){return e.parseEventName(t)!=null}addEventListener(t,n,r,i){let a=e.parseEventName(n),o=e.eventCallback(a.fullKey,r,this.manager.getZone());return this.manager.getZone().runOutsideAngular(()=>ty().onAndCancel(t,a.domEventName,o,i))}static parseEventName(t){let n=t.toLowerCase().split(`.`),r=n.shift();if(n.length===0||r!==`keydown`&&r!==`keyup`)return null;let i=e._normalizeKey(n.pop()),a=``,o=n.indexOf(`code`);if(o>-1&&(n.splice(o,1),a=`code.`),Rb.forEach(e=>{let t=n.indexOf(e);t>-1&&(n.splice(t,1),a+=e+`.`)}),a+=i,n.length!=0||i.length===0)return null;let s={};return s.domEventName=r,s.fullKey=a,s}static matchEventFullKeyCode(e,t){let n=zb[e.key]||e.key,r=``;return t.indexOf(`code.`)>-1&&(n=e.code,r=`code.`),n==null||!n?!1:(n=n.toLowerCase(),n===` `?n=`space`:n===`.`&&(n=`dot`),Rb.forEach(t=>{if(t!==n){let n=Bb[t];n(e)&&(r+=t+`.`)}}),r+=n,r===t)}static eventCallback(t,n,r){return i=>{e.matchEventFullKeyCode(i,t)&&r.runGuarded(()=>n(i))}}static _normalizeKey(e){return e===`esc`?`escape`:e}static ɵfac=function(t){return new(t||e)(qi(Ss))};static ɵprov=di({token:e,factory:e.ɵfac})}return e})();async function Hb(e,t,n){return Jv({rootComponent:e,...Ub(t,n)})}function Ub(e,t){return{platformRef:t?.platformRef,appProviders:[...Jb,...e?.providers??[]],platformProviders:qb}}function Wb(){Pb.makeCurrent()}function Gb(){return new qs}function Kb(){return Yl(document),document}var qb=[{provide:ec,useValue:ob},{provide:$s,useValue:Wb,multi:!0},{provide:Ss,useFactory:Kb}],Jb=[{provide:Ta,useValue:`root`},{provide:qs,useFactory:Gb},{provide:lb,useClass:cb,multi:!0},{provide:lb,useClass:Vb,multi:!0},Ob,{provide:vm,useClass:gb},{provide:gb,useExisting:vm},ub,{provide:$p,useExisting:Ob},[]];function Yb(e,t){let n=`\x1B[${e}m`,r=`\x1B[${t}m`;return((e,...t)=>{if(Array.isArray(e)&&`raw`in e){let i=e,a=``;for(let e=0;e{let r=new $b({code:i,why:Zb(a.why,e),fix:Zb(a.fix,e),docs:o,cause:e.cause,sources:e.sources,data:Zb(a.data,e)},s);for(let e of t)e(r,n);return r};n[i]=s}return n}function nx(e){return t=>{let n=`${e.bold(e.red(`[${t.name}]`))} ${t.message}`,r=[];return t.fix&&r.push(`${e.dim(`fix:`)} ${t.fix}`),t.sources?.length&&r.push(`${e.dim(`sources:`)} ${t.sources.join(`, `)}`),t.docs&&r.push(`${e.dim(`see:`)} ${e.cyan(t.docs)}`),r.length===0?n:[n,...r.map((t,n)=>`${e.dim(n{e=n,t=r}),resolve:e,reject:t}}var cx=Math.random.bind(Math),lx=`useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict`;function ux(e=21){let t=``,n=e;for(;n--;)t+=lx[cx()*64|0];return t}var dx=6e4,fx=e=>e,px=fx,{clearTimeout:mx,setTimeout:hx}=globalThis;function gx(e,t){let{post:n,on:r,off:i=()=>{},eventNames:a=[],serialize:o=fx,deserialize:s=px,resolver:c,bind:l=`rpc`,timeout:u=dx,proxify:d=!0}=t,f=!1,p=new Map,m,h;async function g(e,r,i,a){if(f)throw Error(`[birpc] rpc is closed, cannot call "${e}"`);let s={m:e,a:r,t:`q`};a&&(s.o=!0);let c=async e=>n(o(e));if(i){await c(s);return}if(m)try{await m}finally{m=void 0}let{promise:l,resolve:d,reject:g}=sx(),_=ux();s.i=_;let ee;async function v(n=s){return u>=0&&(ee=hx(()=>{try{if(t.onTimeoutError?.call(h,e,r)!==!0)throw Error(`[birpc] timeout on calling "${e}"`)}catch(e){g(e)}p.delete(_)},u),typeof ee==`object`&&(ee=ee.unref?.())),p.set(_,{resolve:d,reject:g,timeoutId:ee,method:e}),await c(n),l}try{t.onRequest?await t.onRequest.call(h,s,v,d):await v()}catch(e){if(t.onGeneralError?.call(h,e)!==!0)throw e;return}finally{mx(ee),p.delete(_)}return l}let _={$call:(e,...t)=>g(e,t,!1),$callOptional:(e,...t)=>g(e,t,!1,!0),$callEvent:(e,...t)=>g(e,t,!0),$callRaw:e=>g(e.method,e.args,e.event,e.optional),$rejectPendingCalls:v,get $closed(){return f},get $meta(){return t.meta},$close:ee,$functions:e};h=d?new Proxy({},{get(t,n){if(Object.hasOwn(_,n))return _[n];if(n===`then`&&!a.includes(`then`)&&!(`then`in e))return;let r=(...e)=>g(n,e,!0);if(a.includes(n))return r.asEvent=r,r;let i=(...e)=>g(n,e,!1);return i.asEvent=r,i}}):_;function ee(e){f=!0,p.forEach(({reject:t,method:n})=>{let r=Error(`[birpc] rpc is closed, cannot call "${n}"`);if(e)return e.cause??=r,t(e);t(r)}),p.clear(),i(te)}function v(e){let t=Array.from(p.values()).map(({method:t,reject:n})=>e?e({method:t,reject:n}):n(Error(`[birpc]: rejected pending call "${t}".`)));return p.clear(),t}async function te(r,...i){let a;try{a=s(r)}catch(e){if(t.onGeneralError?.call(h,e)!==!0)throw e;return}if(a.t===`q`){let{m:r,a:s,o:u}=a,d,f,p=await(c?c.call(h,r,e[r]):e[r]);if(u&&(p||=()=>void 0),!p)f=Error(`[birpc] function "${r}" not found`);else try{d=await p.apply(l===`rpc`?h:e,s)}catch(e){f=e}if(a.i){if(f&&t.onFunctionError&&t.onFunctionError.call(h,f,r,s)===!0)return;if(!f)try{await n(o({t:`s`,i:a.i,r:d}),...i);return}catch(e){if(f=e,t.onGeneralError?.call(h,e,r,s)!==!0)throw e}try{await n(o({t:`s`,i:a.i,e:f}),...i)}catch(e){if(t.onGeneralError?.call(h,e,r,s)!==!0)throw e}}}else{let{i:e,r:t,e:n}=a,r=p.get(e);r&&(mx(r.timeoutId),n?r.reject(n):r.resolve(t)),p.delete(e)}}return m=r(te),h}function _x(e,t){return t.safety?t.safety:e===`static`||e===`query`||e==null?`read`:`action`}var vx=Object.freeze({type:`object`,additionalProperties:!0});function yx(e){let t=e[`~standard`];if(t.jsonSchema)try{return t.jsonSchema.input({target:`draft-2020-12`})}catch{return vx}return vx}function bx(e){if(!e||e.length===0)return{type:`object`,properties:{}};let t={},n=[];for(let r=0;rn[`arg${t}`]);if(`arg0`in n){let e=[];for(;`arg${e.length}`in n;)e.push(n[`arg${e.length}`]);return e}return Object.keys(n).length===0?[]:void 0}function Sx(e,t){return xx(e,t)??[e]}function Cx(e){return typeof e==`string`?`'${e}'`:new Dx().serialize(e)}var wx=` _-,;:!?.'"()[]{}@*/\\&#%\`^+<=>|~$0123456789abcdefghijklmnopqrstuvwxyz`,Tx=(function(){let e=new Uint8Array(128);for(let t=0;t<69;t++)e[wx.charCodeAt(t)]=t+1;for(let t=65;t<=90;t++)e[t]=e[t+32];return e})();function Ex(e,t){if(e===t)return 0;let n=Math.min(e.length,t.length),r=0;for(let i=0;ia?-1:1)}return e.length===t.length?r:e.lengththis.compare(e[0],t[0])),r=`${e}{`;for(let e=0;ethis.compare(e,t)))}`}$Map(e){return this.serializeObjectEntries(`Map`,e.entries())}}for(let t of[`Error`,`RegExp`,`URL`])e.prototype[`$`+t]=function(e){return`${t}(${e})`};for(let t of[`Int8Array`,`Uint8Array`,`Uint8ClampedArray`,`Int16Array`,`Uint16Array`,`Int32Array`,`Uint32Array`,`Float32Array`,`Float64Array`])e.prototype[`$`+t]=function(e){return`${t}[${e.join(`,`)}]`};for(let t of[`BigInt64Array`,`BigUint64Array`])e.prototype[`$`+t]=function(e){return`${t}[${e.join(`n,`)}${e.length>0?`n`:``}]`};return e})(),Ox=[1779033703,-1150833019,1013904242,-1521486534,1359893119,-1694144372,528734635,1541459225],kx=[1116352408,1899447441,-1245643825,-373957723,961987163,1508970993,-1841331548,-1424204075,-670586216,310598401,607225278,1426881987,1925078388,-2132889090,-1680079193,-1046744716,-459576895,-272742522,264347078,604807628,770255983,1249150122,1555081692,1996064986,-1740746414,-1473132947,-1341970488,-1084653625,-958395405,-710438585,113926993,338241895,666307205,773529912,1294757372,1396182291,1695183700,1986661051,-2117940946,-1838011259,-1564481375,-1474664885,-1035236496,-949202525,-778901479,-694614492,-200395387,275423344,430227734,506948616,659060556,883997877,958139571,1322822218,1537002063,1747873779,1955562222,2024104815,-2067236844,-1933114872,-1866530822,-1538233109,-1090935817,-965641998],Ax=`ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_`,jx=[],Mx=class{_data=new Nx;_hash=new Nx([...Ox]);_nDataBytes=0;_minBufferSize=0;finalize(e){e&&this._append(e);let t=this._nDataBytes*8,n=this._data.sigBytes*8;return this._data.words[n>>>5]|=128<<24-n%32,this._data.words[(n+64>>>9<<4)+14]=Math.floor(t/4294967296),this._data.words[(n+64>>>9<<4)+15]=t,this._data.sigBytes=this._data.words.length*4,this._process(),this._hash}_doProcessBlock(e,t){let n=this._hash.words,r=n[0],i=n[1],a=n[2],o=n[3],s=n[4],c=n[5],l=n[6],u=n[7];for(let n=0;n<64;n++){if(n<16)jx[n]=e[t+n]|0;else{let e=jx[n-15],t=(e<<25|e>>>7)^(e<<14|e>>>18)^e>>>3,r=jx[n-2],i=(r<<15|r>>>17)^(r<<13|r>>>19)^r>>>10;jx[n]=t+jx[n-7]+i+jx[n-16]}let d=s&c^~s&l,f=r&i^r&a^i&a,p=(r<<30|r>>>2)^(r<<19|r>>>13)^(r<<10|r>>>22),m=(s<<26|s>>>6)^(s<<21|s>>>11)^(s<<7|s>>>25),h=u+m+d+kx[n]+jx[n],g=p+f;u=l,l=c,c=s,s=o+h|0,o=a,a=i,i=r,r=h+g|0}n[0]=n[0]+r|0,n[1]=n[1]+i|0,n[2]=n[2]+a|0,n[3]=n[3]+o|0,n[4]=n[4]+s|0,n[5]=n[5]+c|0,n[6]=n[6]+l|0,n[7]=n[7]+u|0}_append(e){typeof e==`string`&&(e=Nx.fromUtf8(e)),this._data.concat(e),this._nDataBytes+=e.sigBytes}_process(e){let t,n=this._data.sigBytes/64;n=e?Math.ceil(n):Math.max((n|0)-this._minBufferSize,0);let r=n*16,i=Math.min(r*4,this._data.sigBytes);if(r){for(let e=0;e>>2]|=(n.charCodeAt(e)&255)<<24-e%4*8;return new e(i,r)}toBase64(){let e=[];for(let t=0;t>>2]>>>24-t%4*8&255,r=this.words[t+1>>>2]>>>24-(t+1)%4*8&255,i=this.words[t+2>>>2]>>>24-(t+2)%4*8&255,a=n<<16|r<<8|i;for(let n=0;n<4&&t*8+n*6>>6*(3-n)&63))}return e.join(``)}concat(e){if(this.words[this.sigBytes>>>2]&=4294967295<<32-this.sigBytes%4*8,this.words.length=Math.ceil(this.sigBytes/4),this.sigBytes%4)for(let t=0;t>>2]>>>24-t%4*8&255;this.words[this.sigBytes+t>>>2]|=n<<24-(this.sigBytes+t)%4*8}else for(let t=0;t>>2]=e.words[t>>>2];this.sigBytes+=e.sigBytes}};function Px(e){return new Mx().finalize(e).toBase64()}function Fx(e){return Px(Cx(e))}function Ix(e){return Fx(e)}function Lx(){let e={};function t(t,...n){let r=e[t]||[];for(let e=0,t=r.length;e{e[t]=e[t]?.filter(e=>n!==e)}}function i(e,t){let n=r(e,((...e)=>(n(),t(...e))));return n}return{_listeners:e,emit:t,emitOnce:n,on:r,once:i}}var Rx=/^[\w+.-]{2,}:\/\//;function zx(e){return e.endsWith(`/`)?e:`${e}/`}function Bx(e){return(e.endsWith(`/`)?e.slice(0,-1):e)||`/`}function Vx(e,...t){let n=e;for(let e of t)e&&e!==`/`&&(n=n?zx(n)+e.replace(/^\.?\//,``):e);return n}function Hx(e,t){if(!t||t===`/`||Rx.test(e))return e;let n=Bx(t);return e.startsWith(n)?e:Vx(n,e)}function Ux(e,t){let n=e.match(Rx);return t+(n?e.slice(n[0].length):e)}var Wx=`useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict`;function Gx(e=21){let t=``,n=e;for(;n--;)t+=Wx[Math.random()*64|0];return t}var Kx=Symbol.for(`immer-nothing`),qx=Symbol.for(`immer-draftable`),Jx=Symbol.for(`immer-state`),Yx=[function(e){return`The plugin for '${e}' has not been loaded into Immer. To enable the plugin, import and call \`enable${e}()\` when initializing your application.`},function(e){return`produce can only be called on things that are draftable: plain objects, arrays, Map, Set or classes that are marked with '[immerable]: true'. Got '${e}'`},`This object has been frozen and should not be mutated`,function(e){return`Cannot use a proxy that has been revoked. Did you pass an object from inside an immer function to an async process? `+e},`An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft.`,`Immer forbids circular references`,"The first or second argument to `produce` must be a function","The third argument to `produce` must be a function or undefined","First argument to `createDraft` must be a plain object, an array, or an immerable object","First argument to `finishDraft` must be a draft returned by `createDraft`",function(e){return`'current' expects a draft, got: ${e}`},`Object.defineProperty() cannot be used on an Immer draft`,`Object.setPrototypeOf() cannot be used on an Immer draft`,`Immer only supports deleting array indices`,`Immer only supports setting array indices and the 'length' property`,function(e){return`'original' expects a draft, got: ${e}`}];function Xx(e,...t){{let n=Yx[e],r=bS(n)?n.apply(null,t):n;throw Error(`[Immer] ${r}`)}}var Zx=Object,Qx=Zx.getPrototypeOf,$x=`constructor`,eS=`prototype`,tS=`configurable`,nS=`enumerable`,rS=`writable`,iS=`value`,aS=e=>!!e&&!!e[Jx];function oS(e){return e?lS(e)||gS(e)||!!e[qx]||!!e[$x]?.[qx]||_S(e)||vS(e):!1}var sS=Zx[eS][$x].toString(),cS=new WeakMap;function lS(e){if(!e||!yS(e))return!1;let t=Qx(e);if(t===null||t===Zx[eS])return!0;let n=Zx.hasOwnProperty.call(t,$x)&&t[$x];if(n===Object)return!0;if(!bS(n))return!1;let r=cS.get(n);return r===void 0&&(r=Function.toString.call(n),cS.set(n,r)),r===sS}function uS(e,t,n=!0){dS(e)===0?(n?Reflect.ownKeys(e):Zx.keys(e)).forEach(n=>{t(n,e[n],e)}):e.forEach((n,r)=>t(r,n,e))}function dS(e){let t=e[Jx];return t?t.type_:gS(e)?1:_S(e)?2:vS(e)?3:0}var fS=(e,t,n=dS(e))=>n===2?e.has(t):Zx[eS].hasOwnProperty.call(e,t),pS=(e,t,n=dS(e))=>n===2?e.get(t):e[t],mS=(e,t,n,r=dS(e))=>{r===2?e.set(t,n):r===3?e.add(n):e[t]=n};function hS(e,t){return e===t?e!==0||1/e==1/t:e!==e&&t!==t}var gS=Array.isArray,_S=e=>e instanceof Map,vS=e=>e instanceof Set,yS=e=>typeof e==`object`,bS=e=>typeof e==`function`,xS=e=>typeof e==`boolean`;function SS(e){let t=+e;return Number.isInteger(t)&&String(t)===e}var CS=e=>yS(e)?e?.[Jx]:null,wS=e=>e.copy_||e.base_,TS=e=>e.modified_?e.copy_:e.base_;function ES(e,t){if(_S(e))return new Map(e);if(vS(e))return new Set(e);if(gS(e))return Array[eS].slice.call(e);let n=lS(e);if(t===!0||t===`class_only`&&!n){let t=Zx.getOwnPropertyDescriptors(e);delete t[Jx];let n=Reflect.ownKeys(t);for(let r=0;r1&&Zx.defineProperties(e,{set:kS,add:kS,clear:kS,delete:kS}),Zx.freeze(e),t&&uS(e,(e,t)=>{DS(t,!0)},!1),e)}function OS(){Xx(2)}var kS={[iS]:OS};function AS(e){return e===null||!yS(e)||Zx.isFrozen(e)}var jS=`MapSet`,MS=`Patches`,NS=`ArrayMethods`,PS={};function FS(e){let t=PS[e];return t||Xx(0,e),t}var IS=e=>!!PS[e];function LS(e,t){PS[e]||(PS[e]=t)}var RS,zS=()=>RS,BS=(e,t)=>({drafts_:[],parent_:e,immer_:t,canAutoFreeze_:!0,unfinalizedDrafts_:0,handledSet_:new Set,processedForPatches_:new Set,mapSetPlugin_:IS(jS)?FS(jS):void 0,arrayMethodsPlugin_:IS(NS)?FS(NS):void 0});function VS(e,t){t&&(e.patchPlugin_=FS(MS),e.patches_=[],e.inversePatches_=[],e.patchListener_=t)}function HS(e){US(e),e.drafts_.forEach(GS),e.drafts_=null}function US(e){e===RS&&(RS=e.parent_)}var WS=e=>RS=BS(RS,e);function GS(e){let t=e[Jx];t.type_===0||t.type_===1?t.revoke_():t.revoked_=!0}function KS(e,t){t.unfinalizedDrafts_=t.drafts_.length;let n=t.drafts_[0];if(e!==void 0&&e!==n){n[Jx].modified_&&(HS(t),Xx(4)),oS(e)&&(e=qS(t,e));let{patchPlugin_:r}=t;r&&r.generateReplacementPatches_(n[Jx].base_,e,t)}else e=qS(t,n);return JS(t,e,!0),HS(t),t.patches_&&t.patchListener_(t.patches_,t.inversePatches_),e===Kx?void 0:e}function qS(e,t){if(AS(t))return t;let n=t[Jx];if(!n)return nC(t,e.handledSet_,e);if(!XS(n,e))return t;if(!n.modified_)return n.base_;if(!n.finalized_){let{callbacks_:t}=n;if(t)for(;t.length>0;)t.pop()(e);eC(n,e)}return n.copy_}function JS(e,t,n=!1){!e.parent_&&e.immer_.autoFreeze_&&e.canAutoFreeze_&&DS(t,n)}function YS(e){e.finalized_=!0,e.scope_.unfinalizedDrafts_--}var XS=(e,t)=>e.scope_===t,ZS=[];function QS(e,t,n,r){let i=wS(e),a=e.type_;if(r!==void 0&&pS(i,r,a)===t){mS(i,r,n,a);return}if(!e.draftLocations_){let t=e.draftLocations_=new Map;uS(i,(e,n)=>{if(aS(n)){let r=t.get(n)||[];r.push(e),t.set(n,r)}})}let o=e.draftLocations_.get(t)??ZS;for(let e of o)mS(i,e,n,a)}function $S(e,t,n){e.callbacks_.push(function(r){let i=t;if(!i||!XS(i,r))return;r.mapSetPlugin_?.fixSetContents(i);let a=TS(i);QS(e,i.draft_??i,a,n),eC(i,r)})}function eC(e,t){if(e.modified_&&!e.finalized_&&(e.type_===3||e.type_===1&&e.allIndicesReassigned_||(e.assigned_?.size??0)>0)){let{patchPlugin_:n}=t;if(n){let r=n.getPath(e);r&&n.generatePatches_(e,r,t)}YS(e)}}function tC(e,t,n){let{scope_:r}=e;if(aS(n)){let i=n[Jx];XS(i,r)&&i.callbacks_.push(function(){dC(e),QS(e,n,TS(i),t)})}else oS(n)&&e.callbacks_.push(function(){let i=wS(e);e.type_===3?i.has(n)&&nC(n,r.handledSet_,r):pS(i,t,e.type_)===n&&r.drafts_.length>1&&(e.assigned_.get(t)??!1)===!0&&e.copy_&&nC(pS(e.copy_,t,e.type_),r.handledSet_,r)})}function nC(e,t,n){return!n.immer_.autoFreeze_&&n.unfinalizedDrafts_<1||aS(e)||t.has(e)||!oS(e)||AS(e)?e:(t.add(e),uS(e,(r,i)=>{if(aS(i)){let t=i[Jx];XS(t,n)&&(mS(e,r,TS(t),e.type_),YS(t))}else oS(i)&&nC(i,t,n)}),e)}function rC(e,t){let n=gS(e),r={type_:+!!n,scope_:t?t.scope_:zS(),modified_:!1,finalized_:!1,assigned_:void 0,parent_:t,base_:e,draft_:null,copy_:null,revoke_:null,isManual_:!1,callbacks_:void 0},i=r,a=iC;n&&(i=[r],a=aC);let{revoke:o,proxy:s}=Proxy.revocable(i,a);return r.draft_=s,r.revoke_=o,[s,r]}var iC={get(e,t){if(t===Jx)return e;let n=e.scope_.arrayMethodsPlugin_,r=e.type_===1&&typeof t==`string`;if(r&&n?.isArrayOperationMethod(t))return n.createMethodInterceptor(e,t);let i=wS(e);if(!fS(i,t,e.type_))return cC(e,i,t);let a=i[t];if(e.finalized_||!oS(a)||r&&e.operationMethod&&n?.isMutatingArrayMethod(e.operationMethod)&&SS(t))return a;if(a===oC(e.base_,t)||sC(e,t,a)){dC(e);let n=e.type_===1?+t:t,r=pC(e.scope_,a,e,n);return e.copy_[n]=r}return a},has(e,t){return t in wS(e)},ownKeys(e){return Reflect.ownKeys(wS(e))},set(e,t,n){let r=lC(wS(e),t);if(r?.set)return r.set.call(e.draft_,n),!0;if(!e.modified_){let r=oC(wS(e),t),i=r?.[Jx];if(i&&i.base_===n)return e.copy_[t]=n,e.assigned_.set(t,!1),!0;if(hS(n,r)&&(n!==void 0||fS(e.base_,t,e.type_)))return!0;dC(e),uC(e)}return e.copy_[t]===n&&(n!==void 0||fS(e.copy_,t,e.type_))||Number.isNaN(n)&&Number.isNaN(e.copy_[t])?!0:(e.copy_[t]=n,e.assigned_.set(t,!0),tC(e,t,n),!0)},deleteProperty(e,t){return dC(e),oC(e.base_,t)!==void 0||t in e.base_?(e.assigned_.set(t,!1),uC(e)):e.assigned_.delete(t),e.copy_&&delete e.copy_[t],!0},getOwnPropertyDescriptor(e,t){let n=wS(e),r=Reflect.getOwnPropertyDescriptor(n,t);return r&&{[rS]:!0,[tS]:e.type_!==1||t!==`length`,[nS]:r[nS],[iS]:n[t]}},defineProperty(){Xx(11)},getPrototypeOf(e){return Qx(e.base_)},setPrototypeOf(){Xx(12)}},aC={};for(let e in iC){let t=iC[e];aC[e]=function(){let e=arguments;return e[0]=e[0][0],t.apply(this,e)}}aC.deleteProperty=function(e,t){return isNaN(parseInt(t))&&Xx(13),aC.set.call(this,e,t,void 0)},aC.set=function(e,t,n){return t!==`length`&&isNaN(parseInt(t))&&Xx(14),iC.set.call(this,e[0],t,n,e[0])};function oC(e,t){let n=e[Jx];return(n?wS(n):e)[t]}function sC(e,t,n){return e.type_!==1||!e.allIndicesReassigned_||e.assigned_?.get(t)||!oS(n)||n[Jx]?!1:e.baseRefs_.has(n)}function cC(e,t,n){let r=lC(t,n);return r?iS in r?r[iS]:r.get?.call(e.draft_):void 0}function lC(e,t){if(!(t in e))return;let n=Qx(e);for(;n;){let e=Object.getOwnPropertyDescriptor(n,t);if(e)return e;n=Qx(n)}}function uC(e){e.modified_||(e.modified_=!0,e.parent_&&uC(e.parent_))}function dC(e){e.copy_||=(e.assigned_=new Map,ES(e.base_,e.scope_.immer_.useStrictShallowCopy_))}var fC=class{constructor(e){this.autoFreeze_=!0,this.useStrictShallowCopy_=!1,this.useStrictIteration_=!1,this.produce=(e,t,n)=>{if(bS(e)&&!bS(t)){let n=t;t=e;let r=this;return function(e=n,...i){return r.produce(e,e=>t.call(this,e,...i))}}bS(t)||Xx(6),n!==void 0&&!bS(n)&&Xx(7);let r;if(oS(e)){let i=WS(this),a=pC(i,e,void 0),o=!0;try{r=t(a),o=!1}finally{o?HS(i):US(i)}return VS(i,n),KS(r,i)}if(!e||!yS(e)){if(r=t(e),r===void 0&&(r=e),r===Kx&&(r=void 0),this.autoFreeze_&&DS(r,!0),n){let t=[],i=[];FS(MS).generateReplacementPatches_(e,r,{patches_:t,inversePatches_:i}),n(t,i)}return r}Xx(1,e)},this.produceWithPatches=(e,t)=>{if(bS(e))return(t,...n)=>this.produceWithPatches(t,t=>e(t,...n));let n,r;return[this.produce(e,t,(e,t)=>{n=e,r=t}),n,r]},xS(e?.autoFreeze)&&this.setAutoFreeze(e.autoFreeze),xS(e?.useStrictShallowCopy)&&this.setUseStrictShallowCopy(e.useStrictShallowCopy),xS(e?.useStrictIteration)&&this.setUseStrictIteration(e.useStrictIteration)}createDraft(e){oS(e)||Xx(8),aS(e)&&(e=mC(e));let t=WS(this),n=pC(t,e,void 0);return n[Jx].isManual_=!0,US(t),n}finishDraft(e,t){let n=e&&e[Jx];(!n||!n.isManual_)&&Xx(9);let{scope_:r}=n;return VS(r,t),KS(void 0,r)}setAutoFreeze(e){this.autoFreeze_=e}setUseStrictShallowCopy(e){this.useStrictShallowCopy_=e}setUseStrictIteration(e){this.useStrictIteration_=e}shouldUseStrictIteration(){return this.useStrictIteration_}applyPatches(e,t){let n;for(n=t.length-1;n>=0;n--){let r=t[n];if(r.path.length===0&&r.op===`replace`){e=r.value;break}}n>-1&&(t=t.slice(n+1));let r=FS(MS).applyPatches_;return aS(e)?r(e,t):this.produce(e,e=>r(e,t))}};function pC(e,t,n,r){let[i,a]=_S(t)?FS(jS).proxyMap_(t,n):vS(t)?FS(jS).proxySet_(t,n):rC(t,n);return(n?.scope_??zS()).drafts_.push(i),a.callbacks_=n?.callbacks_??[],a.key_=r,n&&r!==void 0?$S(n,a,r):a.callbacks_.push(function(e){e.mapSetPlugin_?.fixSetContents(a);let{patchPlugin_:t}=e;a.modified_&&t&&t.generatePatches_(a,[],e)}),i}function mC(e){return aS(e)||Xx(10,e),hC(e)}function hC(e){if(!oS(e)||AS(e))return e;let t=e[Jx],n,r=!0;if(t){if(!t.modified_)return t.base_;t.finalized_=!0,n=ES(e,t.scope_.immer_.useStrictShallowCopy_),r=t.scope_.immer_.shouldUseStrictIteration()}else n=ES(e,!0);return uS(n,(e,t)=>{mS(n,e,hC(t))},r),t&&(t.finalized_=!1),n}function gC(){Yx.push(`Sets cannot have "replace" patches.`,function(e){return`Unsupported patch operation: `+e},function(e){return`Cannot apply patch, path doesn't resolve: `+e},`Patching reserved attributes like __proto__, prototype and constructor is not allowed`);function e(n,r=[]){if(n.key_!==void 0){let e=n.parent_.copy_??n.parent_.base_,t=CS(pS(e,n.key_)),i=pS(e,n.key_);if(i===void 0||i!==n.draft_&&i!==n.base_&&i!==n.copy_||t!=null&&t.base_!==n.base_)return null;let a=n.parent_.type_===3,o;if(a){let e=n.parent_;o=Array.from(e.drafts_.keys()).indexOf(n.key_)}else o=n.key_;if(!(a&&e.size>o||fS(e,o)))return null;r.push(o)}if(n.parent_)return e(n.parent_,r);r.reverse();try{t(n.copy_,r)}catch{return null}return r}function t(e,t){let n=e;for(let e=0;e{let u=pS(o,e,c),f=pS(s,e,c),p=l?fS(o,e)?n:`add`:r;if(u===f&&p===n)return;let m=t.concat(e);i.push(p===r?{op:p,path:m}:{op:p,path:m,value:d(f)}),a.push(p===`add`?{op:r,path:m}:p===r?{op:`add`,path:m,value:d(u)}:{op:n,path:m,value:d(u)})})}function s(e,t,n,i){let{base_:a,copy_:o}=e,s=0;a.forEach(e=>{if(!o.has(e)){let a=t.concat([s]);n.push({op:r,path:a,value:e}),i.unshift({op:`add`,path:a,value:e})}s++}),s=0,o.forEach(e=>{if(!a.has(e)){let a=t.concat([s]);n.push({op:`add`,path:a,value:e}),i.unshift({op:r,path:a,value:e})}s++})}function c(e,t,r){let{patches_:i,inversePatches_:a}=r;i.push({op:n,path:[],value:t===Kx?void 0:t}),a.push({op:n,path:[],value:e})}function l(e,t){return t.forEach(t=>{let{path:i,op:a}=t,o=e;for(let e=0;e[e,u(t)]));if(vS(e))return new Set(Array.from(e).map(u));let t=Object.create(Qx(e));for(let n in e)t[n]=u(e[n]);return fS(e,qx)&&(t[qx]=e[qx]),t}function d(e){return aS(e)?u(e):e}LS(MS,{applyPatches_:l,generatePatches_:i,generateReplacementPatches_:c,getPath:e})}globalThis.Iterator?.from;var _C=new fC,vC=_C.produce,yC=_C.produceWithPatches.bind(_C),bC=_C.applyPatches.bind(_C),xC=1e3;function SC(e,t){if(e.add(t),e.size>xC){let t=e.values().next().value;t!==void 0&&e.delete(t)}}function CC(e){let{enablePatches:t=!1}=e;t&&gC();let n=Lx(),r=e.initialValue,i=new Set;return{on:n.on,value:()=>r,patch:(e,t=Gx())=>{i.has(t)||(gC(),r=bC(r,e),SC(i,t),n.emit(`updated`,r,void 0,t))},mutate:(e,a=Gx())=>{if(!i.has(a)){if(SC(i,a),t){let[t,i]=yC(r,e);if(t===r)return;r=t,n.emit(`updated`,r,i,a)}else{let t=vC(r,e);if(t===r)return;r=t,n.emit(`updated`,r,void 0,a)}}},syncIds:i}}var wC=typeof self==`object`?self:globalThis,TC=new Set([`Error`,`EvalError`,`RangeError`,`ReferenceError`,`SyntaxError`,`TypeError`,`URIError`,`AggregateError`]),EC=new Set([`Boolean`,`Number`,`String`,`Int8Array`,`Uint8Array`,`Uint8ClampedArray`,`Int16Array`,`Uint16Array`,`Int32Array`,`Uint32Array`,`Float16Array`,`Float32Array`,`Float64Array`,`BigInt64Array`,`BigUint64Array`]);function DC(e,t){let n=(t,n)=>(e.set(n,t),t),r=i=>{if(e.has(i))return e.get(i);let[a,o]=t[i];switch(a){case 0:case-1:return n(o,i);case 1:{let e=n([],i);for(let t of o)e.push(r(t));return e}case 2:{let e=n({},i);for(let[t,n]of o)e[r(t)]=r(n);return e}case 3:return n(new Date(o),i);case 4:{let{source:e,flags:t}=o;return n(new RegExp(e,t),i)}case 5:{let e=n(new Map,i);for(let[t,n]of o)e.set(r(t),r(n));return e}case 6:{let e=n(new Set,i);for(let t of o)e.add(r(t));return e}case 7:{let{name:e,message:t}=o,r=TC.has(e)?wC[e]:void 0;return n(new(r??wC.Error)(t),i)}case 8:return n(BigInt(o),i);case`BigInt`:return n(Object(BigInt(o)),i);case`ArrayBuffer`:return n(new Uint8Array(o).buffer,o);case`DataView`:{let{buffer:e}=new Uint8Array(o);return n(new DataView(e),o)}}if(typeof a==`string`&&EC.has(a))return n(new wC[a](o),i);throw TypeError(`unable to deserialize unsafe or unknown type: ${String(a)}`)};return r}function OC(e){return DC(new Map,e)(0)}var kC=``,{toString:AC}={},{keys:jC}=Object;function MC(e){let t=typeof e;if(t!==`object`||!e)return[0,t];let n=AC.call(e).slice(8,-1);switch(n){case`Array`:return[1,kC];case`Object`:return[2,kC];case`Date`:return[3,kC];case`RegExp`:return[4,kC];case`Map`:return[5,kC];case`Set`:return[6,kC];case`DataView`:return[1,n]}return n.includes(`Array`)?[1,n]:n.includes(`Error`)?[7,n]:[2,n]}function NC([e,t]){return e===0&&(t===`function`||t===`symbol`)}function PC(e,t,n,r){let i=(e,t)=>{let i=r.push(e)-1;return n.set(t,i),i},a=r=>{if(n.has(r))return n.get(r);let[o,s]=MC(r);switch(o){case 0:{let t=r;switch(s){case`bigint`:o=8,t=r.toString();break;case`function`:case`symbol`:if(e)throw TypeError(`unable to serialize ${s}`);t=null;break;case`undefined`:return i([-1],r)}return i([o,t],r)}case 1:{if(s){let e=r;return s===`DataView`?e=new Uint8Array(r.buffer):s===`ArrayBuffer`&&(e=new Uint8Array(r)),i([s,[...e]],r)}let e=[],t=i([o,e],r);for(let t of r)e.push(a(t));return t}case 2:{if(s)switch(s){case`BigInt`:return i([s,r.toString()],r);case`Boolean`:case`Number`:case`String`:return i([s,r.valueOf()],r)}if(t&&`toJSON`in r)return a(r.toJSON());let n=[],c=i([o,n],r);for(let t of jC(r))(e||!NC(MC(r[t])))&&n.push([a(t),a(r[t])]);return c}case 3:return i([o,r.toISOString()],r);case 4:{let{source:e,flags:t}=r;return i([o,{source:e,flags:t}],r)}case 5:{let t=[],n=i([o,t],r);for(let[n,i]of r)(e||!(NC(MC(n))||NC(MC(i))))&&t.push([a(n),a(i)]);return n}case 6:{let t=[],n=i([o,t],r);for(let n of r)(e||!NC(MC(n)))&&t.push(a(n));return n}}let{message:c}=r;return i([o,{name:s,message:c}],r)};return a}function FC(e,t={}){let n=[];return PC(!(t.json||t.lossy),!!t.json,new Map,n)(e),n}var{parse:IC,stringify:LC}=JSON,RC={json:!0,lossy:!0};function zC(e){return OC(IC(e))}function BC(e){return LC(FC(e,RC))}function VC(e){return OC(e)}function HC(e){return BC(e)}function UC(e){return zC(e)}var WC=256,GC=class extends Error{name=`StreamClosedError`};function KC(e={}){let t=e.id??Gx(),n=Math.max(0,e.replayWindow??0),r=Lx(),i=new AbortController,a=[],o=!1,s=0;function c(e){if(o)throw new GC(`Cannot write to a closed stream "${t}"`);s+=1,n>0&&(a.push({seq:s,chunk:e}),a.length>n&&(a.length-n===1?a.shift():a.splice(0,a.length-n))),r.emit(`chunk`,s,e)}function l(e){if(o)return;o=!0;let t=JC(e);i.abort(e),r.emit(`end`,t)}function u(){o||(o=!0,i.signal.aborted||i.abort(`stream closed`),r.emit(`end`,void 0))}function d(e){o||i.signal.aborted||i.abort(e??`aborted`)}let f=new WritableStream({write(e){c(e)},close(){u()},abort(e){l(e)}});return{id:t,signal:i.signal,get closed(){return o},get lastSeq(){return s},write:c,error:l,close:u,abort:d,writable:f,events:r,buffer:a}}function qC(e={}){let t=e.id??Gx(),n=Math.max(1,e.highWaterMark??WC),r=[],i=0,a=!1,o=!1,s,c,l,u;function d(){if(c){if(r.length>0){let e=r.shift(),t=c;c=void 0,t.resolve({value:e,done:!1});return}if(a){let e=c;if(c=void 0,s){let t=Error(s.message);t.name=s.name,e.reject(t)}else e.resolve({value:void 0,done:!0})}}}function f(){if(l){for(;r.length>0;){let e=r.shift();try{l.enqueue(e)}catch{break}}if(a&&l){try{if(s){let e=Error(s.message);e.name=s.name,l.error(e)}else l.close()}catch{}l=void 0}}}function p(t,s){if(!(a||o)&&!(t<=i)){if(i=t,r.push(s),r.length>n){let t=r.length-n;r.splice(0,t),e.onOverflow?.(t)}d(),u&&f()}}function m(e){a||(a=!0,s=e,d(),u&&f())}function h(){o||a||(o=!0,e.onCancel?.(),m(void 0))}function g(){return u||(u=new ReadableStream({start(e){l=e,f()},cancel(){h()}}),u)}return{id:t,get cancelled(){return o},get done(){return a},get lastSeenSeq(){return i},get readable(){return g()},cancel:h,_push:p,_end:m,[Symbol.asyncIterator](){return{next(){if(r.length>0)return Promise.resolve({value:r.shift(),done:!1});if(a){if(s){let e=Error(s.message);return e.name=s.name,Promise.reject(e)}return Promise.resolve({value:void 0,done:!0})}return new Promise((e,t)=>{c={resolve:e,reject:t}})},return(){return h(),Promise.resolve({value:void 0,done:!0})}}}}}function JC(e){if(e instanceof Error)return{name:e.name||`Error`,message:e.message};if(typeof e==`string`)return{name:`Error`,message:e};try{return{name:`Error`,message:JSON.stringify(e)}}catch{return{name:`Error`,message:String(e)}}}var YC=128;function XC(e){return e.replace(/[^\w-]+/g,`_`).slice(0,YC)}var ZC=`modulepreload`,QC=function(e,t){return new URL(e,t).href},$C={},ew=function(e,t,n){let r=Promise.resolve();if(t&&t.length>0){let e=document.getElementsByTagName(`link`),i=document.querySelector(`meta[property=csp-nonce]`),a=i?.nonce||i?.getAttribute(`nonce`);function o(e){return Promise.all(e.map(e=>Promise.resolve(e).then(e=>({status:`fulfilled`,value:e}),e=>({status:`rejected`,reason:e}))))}function s(e){return import.meta.resolve?import.meta.resolve(e):new URL(e,import.meta.url).href}r=o(t.map(t=>{if(t=QC(t,n),t=s(t),t in $C)return;$C[t]=!0;let r=t.endsWith(`.css`);for(let n=e.length-1;n>=0;n--){let i=e[n];if(i.href===t&&(!r||i.rel===`stylesheet`))return}let i=document.createElement(`link`);if(i.rel=r?`stylesheet`:ZC,r||(i.as=`script`),i.crossOrigin=``,i.href=t,a&&i.setAttribute(`nonce`,a),document.head.appendChild(i),r)return new Promise((e,n)=>{i.addEventListener(`load`,e),i.addEventListener(`error`,()=>n(Error(`Unable to preload CSS for ${t}`)))})}).filter(e=>e!==void 0))}function i(e){let t=new Event(`vite:preloadError`,{cancelable:!0});if(t.payload=e,window.dispatchEvent(t),!t.defaultPrevented)throw e}return r.then(t=>{for(let e of t||[])e.status===`rejected`&&i(e.reason);return e().catch(i)})},tw=`__connection.json`,nw=`__DEVFRAME_CONNECTION__`,rw=`x-birpc-session`,iw=`__rpc-dump/index.json`,aw=`devframe:services`,ow=`devframe_otp`,sw=`devframe_auth_token`;rx.postMessage.remoteAssetsError;var cw=class{cacheMap=new Map;options;keySerializer;constructor(e){this.options=e,this.keySerializer=e.keySerializer||(e=>Ix(e))}updateOptions(e){this.options={...this.options,...e}}cached(e,t){let n=this.cacheMap.get(e);if(n)return n.get(this.keySerializer(t))}has(e,t){return this.cacheMap.get(e)?.has(this.keySerializer(t))??!1}apply(e,t){let n=this.cacheMap.get(e.m)||new Map;n.set(this.keySerializer(e.a),t),this.cacheMap.set(e.m,n)}validate(e){return this.options.functions.includes(e)}clear(e){e?this.cacheMap.delete(e):this.cacheMap.clear()}},lw=ox({docsBase:`https://devfra.me/errors`,codes:{DF0019:{why:e=>`RPC function "${e.name}" has \`agent\` set but \`jsonSerializable\` is \`false\`; MCP requires JSON-serializable data.`,fix:"Remove `jsonSerializable: false`, or remove `agent` to keep it RPC-only."},DF0020:{why:e=>`RPC function "${e.name}" declares \`jsonSerializable: true\` but the value at "${e.path}" is a ${e.type}.`,fix:"Either drop `jsonSerializable: true` (falls back to structured-clone) or change the value to a JSON-safe shape."},DF0021:{why:e=>`RPC function "${e.name}" is already registered`,fix:"Use the `force` parameter to overwrite an existing registration."},DF0022:{why:e=>`RPC function "${e.name}" is not registered. Use register() to add new functions.`},DF0023:{why:e=>`RPC function "${e.name}" is not registered`},DF0024:{why:e=>`Either handler or setup function must be provided for RPC function "${e.name}"`},DF0025:{why:e=>`Function "${e.name}" not found in dump store`},DF0026:{why:e=>`No dump match for "${e.name}" with args: ${e.args}`},DF0027:{why:e=>`Function "${e.name}" with type "${e.type}" cannot have dump configuration. Only "static" and "query" types support dumps.`},DF0028:{why:e=>`Function "${e.name}" with type "${e.type}" cannot use \`snapshot: true\`. Only "query" functions support this sugar; "static" functions have equivalent default behavior already.`,fix:"Remove `snapshot: true`, or change the function type to `query`."},DF0043:{why:e=>`RPC function "${e.name}" received an invalid argument at position ${e.index}: ${e.issues}`,fix:"Pass a value that satisfies the `args` schema declared for this function."},DF0044:{why:e=>`RPC function "${e.name}" returned a value that failed its \`returns\` schema: ${e.issues}`,fix:"Make the handler return a value that satisfies the `returns` schema, or relax the schema."}}});function uw(e){if(e.agent&&e.jsonSerializable===!1)throw lw.DF0019({name:e.name});e.agent&&!e.jsonSerializable&&(e.jsonSerializable=!0)}async function dw(e,t){let n=e[`~standard`].validate(t);return n instanceof Promise?await n:n}function fw(e){return e.map(e=>{let t=e.path?.map(e=>typeof e==`object`?e.key:e).join(`.`);return t?`${t}: ${e.message}`:e.message}).join(`; `)}async function pw(e,t,n){let r=n.slice();if(!t||t.length===0)return r;for(let r=0;r{n.get(t)===r&&n.delete(t)}),n.set(t,r)),await r}if(!e.__promise){let n=Promise.resolve(e.setup(t));n.catch(()=>{e.__promise===n&&(e.__promise=void 0)}),e.__promise=n}return await e.__promise}async function gw(e,t){let n=e.handler;if(!n){let r=await hw(e,t);if(!r.handler)throw lw.DF0024({name:e.name});n=r.handler}let r=e.args,i=e.returns;if(!r&&!i)return n;let a=n;return async(...t)=>{let n=await pw(e.name,r,t),o=await a(...n);return await mw(e.name,i,o)}}var _w=class{context;definitions=new Map;functions;_onChanged=[];constructor(e){this.context=e;let t=this.definitions,n=this;this.functions=new Proxy({},{get(e,r){let i=t.get(r);if(i)return gw(i,n.context)},has(e,n){return t.has(n)},getOwnPropertyDescriptor(e,n){return{value:t.get(n)?.handler,configurable:!0,enumerable:!0}},ownKeys(){return Array.from(t.keys())}})}register(e,t=!1){if(this.definitions.has(e.name)&&!t)throw lw.DF0021({name:e.name});uw(e),this.definitions.set(e.name,e),this._onChanged.forEach(t=>t(e.name))}update(e,t=!1){if(!this.definitions.has(e.name)&&!t)throw lw.DF0022({name:e.name});uw(e),this.definitions.set(e.name,e),this._onChanged.forEach(t=>t(e.name))}onChanged(e){return this._onChanged.push(e),()=>{let t=this._onChanged.indexOf(e);t!==-1&&this._onChanged.splice(t,1)}}async getHandler(e){return await gw(this.definitions.get(e),this.context)}getSchema(e){let t=this.definitions.get(e);if(!t)throw lw.DF0023({name:String(e)});return{args:t.args,returns:t.returns}}has(e){return this.definitions.has(e)}get(e){return this.definitions.get(e)}list(){return Array.from(this.definitions.keys())}};function vw(e,t=``){return JSON.stringify(e,function(e,n){let r=this,i=r==null?n:r[e];if(i===void 0){if(Array.isArray(r))throw bw(t,`undefined`,r,e);return n}return i!==null&&yw(i,r,e,t),n})}function yw(e,t,n,r){if(typeof e==`bigint`)throw bw(r,`BigInt`,t,n);if(typeof e!=`object`)return;if(e instanceof Map)throw bw(r,`Map`,t,n);if(e instanceof Set)throw bw(r,`Set`,t,n);if(e instanceof Date)throw bw(r,`Date`,t,n);if(Array.isArray(e))return;let i=Object.getPrototypeOf(e);if(i!==null&&i!==Object.prototype)throw bw(r,e.constructor?.name??`class instance`,t,n)}function bw(e,t,n,r){let i=xw(n,r);return lw.DF0020({name:e||``,type:t,path:i})}function xw(e,t){return Array.isArray(e)?`[${t}]`:t===``?``:t}var Sw=`__DEVFRAME_CONNECTION_META__`,Cw=`__DEVFRAME_CONNECTION_AUTH_TOKEN__`;function ww(e){let t=[()=>window?.[e],()=>globalThis?.[e],()=>parent.window?.[e]];for(let e of t)try{let t=e();if(t)return t}catch{}}function Tw(){return ww(nw)}function Ew(){return ww(Sw)}function Dw(e){if(e)return e;try{let e=localStorage.getItem(Cw);if(e)return e}catch{}return ww(Cw)}function Ow(e){globalThis[nw]=e,globalThis[Sw]={...e.connectionMeta,baseUrl:e.metaBaseUrl},e.authToken&&kw(e.authToken)}function kw(e){try{localStorage.setItem(Cw,e)}catch{}globalThis[Cw]=e;let t=Tw();t&&(globalThis[nw]={...t,authToken:e})}function Aw(e){let t=Hx(tw,e);try{return new URL(t,globalThis.location?.href).href}catch{return t}}function jw(e,t){return t&&t!==e.authToken?{...e,authToken:t}:e}function Mw(){let e=Tw();if(e)return jw(e,Dw()??e.authToken??e.connectionMeta.authToken);let t=Ew();if(t)return{connectionMeta:t,metaBaseUrl:t.baseUrl??Aw(`./`),authToken:Dw(t.authToken)}}async function Nw(e={}){if(e.connection){let t=jw(e.connection,Dw(e.authToken??e.connection.authToken??e.connection.connectionMeta.authToken));return Ow(t),t}let t=Array.isArray(e.baseURL)?e.baseURL:[e.baseURL??`./`];if(e.connectionMeta){let n={connectionMeta:e.connectionMeta,metaBaseUrl:Aw(t[0]??`./`),authToken:Dw(e.authToken??e.connectionMeta.authToken)};return Ow(n),n}let n=Mw();if(n){let t=jw(n,Dw(e.authToken??n.authToken??n.connectionMeta.authToken));return Ow(t),t}let r=[];for(let n of t){let t=Hx(tw,n),i=Aw(n);try{let n=await fetch(t);if(!n.ok)throw Error(`Failed to fetch connection meta from ${i}: ${n.status}`);let r=await n.json(),a=n.url||i,o={connectionMeta:r,metaBaseUrl:r.baseUrl?new URL(r.baseUrl,a).href:a,authToken:Dw(e.authToken??r.authToken)};return Ow(o),o}catch(e){r.push(e)}}throw Error(`Failed to get connection meta from ${t.join(`, `)}`,{cause:r})}var Pw=class extends Error{name=`DevframeConnectionError`;kind;constructor(e,t,n){super(t,n),this.kind=e}};function Fw(e=ow){try{let t=globalThis.location?.hash?.replace(/^#/,``)??``;return new URLSearchParams(t).get(e)||void 0}catch{return}}function Iw(e){try{let t=new URL(globalThis.location.href),n=new URLSearchParams(t.hash.replace(/^#/,``));if(!n.has(e))return;n.delete(e),t.hash=n.toString(),globalThis.history?.replaceState(globalThis.history.state,``,t.href)}catch{}}function Lw(e=ow){let t=Fw(e);return t&&Iw(e),t}async function Rw(e,t={}){let n=Lw(t.param??`devframe_otp`);return n?e.isTrusted?!0:e.requestTrustWithCode(n):!1}function zw(e){let t={},n=new WeakMap,r,i=()=>(r??=e.sharedState.get(aw,{initialValue:{}}).then(e=>(t=e.value(),e.on(`updated`,e=>{t=e}),e)),r);return i(),{state:i,has:e=>e in t,keys:()=>Object.keys(t),get:r=>{let i=t[r];if(!i)return;let a=n.get(i);return a||(a={...i,rpc:e.scope(i.scope).rpc},n.set(i,a)),a}}}function Bw(e){let t=new Map,n=new Map,r=new Map,i=new Set,a=e.connectionMeta.backend===`static`;function o(e,t){let n=r.get(e);return n&&typeof n==`object`&&!Array.isArray(n)&&typeof t==`object`&&!Array.isArray(t)?{...n,...t}:t}e.client.register({name:rx.broadcast.clientStateUpdated,type:`event`,handler:(e,n,r)=>{let i=t.get(e);i&&!i.syncIds.has(r)&&i.mutate(()=>o(e,n),r)}}),e.client.register({name:rx.broadcast.clientStatePatch,type:`event`,handler:(e,n,r)=>{let i=t.get(e);i&&!i.syncIds.has(r)&&i.patch(n,r)}});function s(t,n){let r=[];return r.push(n.on(`updated`,(n,r,i)=>{a||(r?e.callEvent(`devframe:rpc:server-state:patch`,t,r,i):e.callEvent(`devframe:rpc:server-state:set`,t,n,i))})),()=>{for(let e of r)e()}}return{keys:()=>Array.from(t.keys()),onKeyAdded(e){return i.add(e),()=>{i.delete(e)}},delete(e){let i=n.get(e);n.delete(e);let a=t.delete(e);return r.delete(e),i?.(),a},get:async(c,l)=>{if(l?.initialValue!==void 0&&r.set(c,l.initialValue),t.has(c))return t.get(c);let u=CC({initialValue:l?.initialValue,enablePatches:!1});async function d(){if(a||e.callEvent(`devframe:rpc:server-state:subscribe`,c),l?.initialValue!==void 0){t.set(c,u);for(let e of i)e(c);return e.call(`devframe:rpc:server-state:get`,c).then(e=>{e!==void 0&&u.mutate(()=>o(c,e))}).catch(e=>{console.error(`Error getting server state`,e)}),n.set(c,s(c,u)),u}{let r=await e.call(`devframe:rpc:server-state:get`,c);u.mutate(()=>o(c,r)),t.set(c,u);for(let e of i)e(c);return n.set(c,s(c,u)),u}}return new Promise(t=>{if(e.isTrusted)d().then(t);else{t(u);let n=!1;e.events.on(rx.client.isTrustedUpdated,e=>{e&&!n&&(n=!0,d())})}})}}}var Vw=new Map;function Hw(e=Vw){let t=new Map;return{serialize:n=>{let r;return n.t===`q`?r=n.m:(r=t.get(n.i),t.delete(n.i)),!(n.t===`s`&&`e`in n)&&r&&e.get(r)?.jsonSerializable===!0?vw(n,r??``):`s:${HC(n)}`},deserialize:e=>{let n=e.startsWith(`s:`)?UC(e.slice(2)):JSON.parse(e);return n.t===`q`&&n.i&&n.m&&t.set(n.i,n.m),n}}}function Uw(){}function Ww(e){let t=e.search(/\n\n|\r\n\r\n/);if(!(t<0))return{frame:e.slice(0,t),rest:e.slice(t+(e[t]===`\r`?4:2))}}function Gw(e){let t=`message`,n=[];for(let r of e.split(/\r?\n/))r.startsWith(`:`)||(r.startsWith(`event:`)?t=r.slice(6).trimStart():r.startsWith(`data:`)&&n.push(r.slice(5).replace(/^ /,``)));return{event:t,data:n}}function Kw(e){let{onConnected:t=Uw,onError:n=Uw,onDisconnected:r=Uw,definitions:i,fetch:a=globalThis.fetch.bind(globalThis)}=e,o=e.url;e.authToken&&(o=`${o}${o.includes(`?`)?`&`:`?`}${sw}=${encodeURIComponent(e.authToken)}`);let s=Hw(i),c=new AbortController,l=!1,u,d,f,p,m=new Promise((e,t)=>{f=e,p=t});m.catch(()=>{});function h(e){l||(l=!0,p(e),n(e),r())}function g(){l||(l=!0,p(Error(`Devframe SSE stream closed`)),r())}function _(e,n){if(e===`session`){f(n),t();return}u?.(n)}async function ee(e){let t=e.getReader();d=t;let n=new TextDecoder,r=``;for(;;){let{done:e,value:i}=await t.read();if(e)break;for(r+=n.decode(i,{stream:!0});;){let e=Ww(r);if(!e)break;r=e.rest;let{event:t,data:n}=Gw(e.frame);n.length>0&&_(t,n.join(` +`))}}g()}return(async()=>{try{let e=await a(o,{headers:{accept:`text/event-stream`},signal:c.signal});if(!e.ok||!e.body)throw Error(`Devframe SSE stream request failed: ${e.status}`);await ee(e.body)}catch(e){if(c.signal.aborted){g();return}h(e instanceof Error?e:Error(String(e)))}})(),{close:()=>{l=!0,c.abort(),d?.cancel().catch(()=>{})},on:e=>{u=e},post:async e=>{let t;try{t=await m}catch{return}if(l){n(Error(`Devframe SSE channel is closed; message dropped`));return}try{let n=await a(o,{method:`POST`,headers:{"content-type":`text/plain; charset=utf-8`,[rw]:t},body:e});if(n.status===200){let e=await n.text();e&&u?.(e);return}if(!n.ok)throw Error(`Devframe SSE POST failed: ${n.status}`)}catch(e){n(e instanceof Error?e:Error(String(e)))}},serialize:s.serialize,deserialize:s.deserialize}}function qw(e,t){let{channel:n,rpcOptions:r={}}=t;return gx(e,{...n,timeout:-1,...r,proxify:!1})}function Jw(e){let{transport:t,authToken:n,connectionMeta:r,events:i,clientRpc:a,rpcOptions:o={},callTimeout:s=0}=e,c=!1,l=`connecting`,u=null,d=Promise.withResolvers();function f(e,t=null){if(t?u=t:e===`connected`&&(u=null),e===l)return;let n=l;l=e,i.emit(rx.client.connectionStatus,e,n)}let p=new Set;function m(e){for(let t of[...p])t.reject(e)}function h(){return l===`disconnected`||l===`error`?new Pw(`connection`,`[devframe] Not connected to the devframe server`,{cause:u??void 0}):l===`unauthorized`?new Pw(`auth`,`[devframe] Not authorized by the devframe server`,{cause:u??void 0}):null}function g(e,t){return new Promise((n,r)=>{let a=!1,o,c={reject(e){a||(l(),i.emit(rx.client.error,e,t),r(e))}};function l(){a=!0,p.delete(c),o&&clearTimeout(o)}p.add(c),s>0&&(o=setTimeout(()=>{c.reject(new Pw(`timeout`,`[devframe] RPC call "${t}" timed out after ${s}ms`))},s)),e.then(e=>{a||(l(),n(e))},e=>{if(a)return;l();let n=e instanceof Error?e:Error(String(e));i.emit(rx.client.error,n,t),r(n)})})}let _=new Map;for(let e of r.jsonSerializableMethods??[])_.set(e,{jsonSerializable:!0});let ee=e.createChannel({definitions:_,onError(e){f(`error`,e),i.emit(rx.client.connectionError,e),m(new Pw(`connection`,`[devframe] Connection to the devframe server failed`,{cause:e}))},onDisconnected(){l!==`error`&&f(`disconnected`),m(new Pw(`connection`,`[devframe] Disconnected from the devframe server`,{cause:u??void 0}))}}),v=qw(a.functions,{channel:ee,rpcOptions:o});a.register({name:rx.broadcast.authRevoked,type:`event`,handler:()=>{c=!1;let e=new Pw(`auth`,`[devframe] The devframe server revoked this client's trust`);f(`unauthorized`,e),i.emit(rx.client.connectionError,e),m(e),i.emit(rx.client.isTrustedUpdated,!1)}});let te=n;async function ne(e){te=e;let t=await v.$call(`anonymous:devframe:auth`,{authToken:e,ua:navigator.userAgent,origin:location.origin});if(c=t.isTrusted,c)d.resolve(!0),f(`connected`);else{let e=new Pw(`auth`,`[devframe] The devframe server refused this client's credentials`);f(`unauthorized`,e),i.emit(rx.client.connectionError,e)}return i.emit(rx.client.isTrustedUpdated,c),t.isTrusted}async function re(e){let t=(await v.$call(`anonymous:devframe:auth:exchange`,{code:e,ua:navigator.userAgent,origin:location.origin}))?.authToken??null;return t&&(te=t,c=!0,d.resolve(!0),f(`connected`),i.emit(rx.client.isTrustedUpdated,!0)),t}async function ie(e={}){await v.$call(`anonymous:devframe:auth:request-code`,{ua:navigator.userAgent,origin:location.origin,...e.reissue?{reissue:!0}:{}})}async function ae(){return c?!0:ne(te??``)}async function oe(e=6e4){if(c&&d.resolve(!0),e<=0)return d.promise;let t;try{return await Promise.race([d.promise,new Promise((n,r)=>{t=setTimeout(()=>{r(Error(`[devframe] Timeout waiting for rpc to be trusted`))},e)})]),c}finally{clearTimeout(t)}}return{transport:t,get isTrusted(){return c},get status(){return l},get connectionError(){return u},requestTrust:ae,requestTrustWithToken:ne,requestTrustWithCode:re,requestAuthCode:ie,ensureTrusted:oe,call:(...e)=>{let t=String(e[0]),n=h();return n?(i.emit(rx.client.error,n,t),Promise.reject(n)):g(v.$call(...e),t)},callEvent:(...e)=>{let t=h();if(t){i.emit(rx.client.error,t,String(e[0]));return}return v.$callEvent(...e)},callOptional:(...e)=>{let t=String(e[0]),n=h();return n?(i.emit(rx.client.error,n,t),Promise.reject(n)):g(v.$callOptional(...e),t)},close:()=>{ee.close()}}}function Yw(e,t,n){let r=(()=>{try{return new URL(t,n.href)}catch{return new URL(n.href)}})();if(e&&typeof e==`object`){if(e.host!=null||e.port!=null){let t=e.host??`${r.hostname}:${e.port}`;return new URL(e.path??`/`,`${r.protocol}//${t}`).href}return new URL(e.path??``,r).href}let i=e??``;return/^https?:\/\//i.test(i)?i:new URL(i,r).href}function Xw(e){let{authToken:t,connectionMeta:n,metaBaseUrl:r,events:i,clientRpc:a,rpcOptions:o={},sseOptions:s={},callTimeout:c=0}=e,l=Yw(n.sse,r??`./`,location);return Jw({transport:`sse`,authToken:t,connectionMeta:n,events:i,clientRpc:a,rpcOptions:o,callTimeout:c,createChannel:e=>Kw({url:l,authToken:t,definitions:e.definitions,...s,onConnected(){s.onConnected?.()},onError(t){e.onError(t),s.onError?.(t)},onDisconnected(){e.onDisconnected(),s.onDisconnected?.()}})})}function Zw(e){let{name:t,message:n,cause:r,...i}=e,a=r instanceof Error?r:Qw(r)?Zw(r):r,o=a===void 0?Error(n):Error(n,{cause:a});return o.name=t,Object.assign(o,i),o}function Qw(e){return typeof e==`object`&&!!e&&typeof e.message==`string`&&typeof e.name==`string`}function $w(e){return typeof e==`object`&&!!e&&e.type===`static`&&typeof e.path==`string`}function eT(e){return typeof e==`object`&&!!e&&e.type===`query`&&typeof e.records==`object`&&e.records!==null}function tT(e){return typeof e==`object`&&!!e&&(`output`in e||`error`in e)}function nT(e){if(e.error)throw Zw(e.error);return e.output}function rT(e){return e.some(e=>e!=null)}function iT(e){return typeof e==`object`&&e&&`serialization`in e&&`data`in e?e.data:e}function aT(e,t){let n=new Map,r=new Map;function i(e,t){return t===`structured-clone`&&Array.isArray(e)?VC(e):e}function a(e,t){return i(iT(e),t)}async function o(e){n.has(e.path)||n.set(e.path,t(e.path).then(t=>a(t,e.serialization)));let r=await n.get(e.path);return tT(r)?nT(r):r}async function s(e,n){return r.has(e)||r.set(e,t(e).then(e=>a(e,n))),await r.get(e)}async function c(t,n){if(!(t in e))throw Error(`[devframe-rpc] Function "${t}" not found in dump store`);let r=e[t];if($w(r)){if(rT(n))throw Error(`[devframe-rpc] No dump match for "${t}" with args: ${JSON.stringify(n)}`);return await o(r)}if(eT(r)){let e=Ix(n),i=r.records[e];if(i)return nT(await s(i,r.serialization));if(r.fallback)return nT(await s(r.fallback,r.serialization));throw Error(`[devframe-rpc] No dump match for "${t}" with args: ${JSON.stringify(n)}`)}if(!rT(n))return r;throw Error(`[devframe-rpc] No dump match for "${t}" with args: ${JSON.stringify(n)}`)}return{call:async(e,t)=>await c(e,t),callOptional:async(t,n)=>{if(t in e)return await c(t,n)},callEvent:async(e,t)=>{}}}async function oT(e){let t=aT(await e.fetchJsonFromBases(iw),e.fetchJsonFromBases);return{transport:`static`,isTrusted:!0,status:`connected`,connectionError:null,requestTrust:async()=>!0,requestTrustWithToken:async()=>!0,requestTrustWithCode:async()=>null,requestAuthCode:async()=>{},ensureTrusted:async()=>!0,call:(...e)=>t.call(e[0],e.slice(1)),callEvent:(...e)=>t.callEvent(e[0],e.slice(1)),callOptional:(...e)=>t.callOptional(e[0],e.slice(1)),close:()=>{}}}var sT=``;function cT(e,t){return`${e}${sT}${t}`}function lT(e){let t=new Map,n=new Map;e.client.register({name:rx.broadcast.streamingChunk,type:`event`,handler(e,n,r,i){t.get(cT(e,n))?._push(r,i)}}),e.client.register({name:rx.broadcast.streamingEnd,type:`event`,handler(e,n,r){let i=cT(e,n),a=t.get(i);a&&(a._end(r),t.delete(i))}}),e.client.register({name:rx.broadcast.streamingUploadCancel,type:`event`,handler(e,t){let r=cT(e,t),i=n.get(r);i&&(i.abort(`server cancelled upload`),n.delete(r))}}),e.events.on(rx.client.isTrustedUpdated,n=>{if(n)for(let[n,r]of t){if(r.cancelled||r.done)continue;let t=n.indexOf(sT);if(t<0)continue;let i=n.slice(0,t),a=n.slice(t+1);e.callEvent(`devframe:streaming:subscribe`,i,a,{afterSeq:r.lastSeenSeq})}});function r(n,r,i={}){let a=cT(n,r),o=t.get(a);if(o)return o;let s=qC({id:r,highWaterMark:i.highWaterMark,onOverflow(e){console.warn(`[devframe] DF0029: Stream "${n}#${r}" dropped ${e} chunk(s) after exceeding the client high-water mark.`)},onCancel(){e.callEvent(`devframe:streaming:cancel`,n,r),t.delete(a)}});if(t.set(a,s),e.isTrusted)e.callEvent(`devframe:streaming:subscribe`,n,r,{afterSeq:0});else{let i=e.events.on(rx.client.isTrustedUpdated,o=>{o&&(i(),t.has(a)&&!s.cancelled&&!s.done&&e.callEvent(`devframe:streaming:subscribe`,n,r,{afterSeq:s.lastSeenSeq}))})}return s}function i(t,r){let i=cT(t,r),a=n.get(i);if(a)return a;let o=KC({id:r});return o.events.on(`chunk`,(n,i)=>{e.callEvent(`devframe:streaming:upload-chunk`,t,r,n,i)}),o.events.on(`end`,a=>{e.callEvent(`devframe:streaming:upload-end`,t,r,a),n.delete(i)}),n.set(i,o),o}return{subscribe:r,upload:i}}function uT(){}var dT=new Map;function fT(e){let t=e.url;e.authToken&&(t=`${t}?${sw}=${encodeURIComponent(e.authToken)}`);let n=new WebSocket(t),{onConnected:r=uT,onError:i=uT,onDisconnected:a=uT,definitions:o=dT}=e;n.addEventListener(`open`,e=>{r(e)}),n.addEventListener(`error`,e=>{let t=e instanceof Error?e:Error(e.type);i(t)}),n.addEventListener(`close`,e=>{a(e)});let s=Hw(o);return{close:()=>{n.close()},on:e=>{n.addEventListener(`message`,t=>{e(t.data)})},post:e=>{if(n.readyState===WebSocket.OPEN){n.send(e);return}if(n.readyState===WebSocket.CONNECTING){let t=()=>{i(),n.readyState===WebSocket.OPEN&&n.send(e)},r=()=>i();function i(){n.removeEventListener(`open`,t),n.removeEventListener(`close`,r)}n.addEventListener(`open`,t),n.addEventListener(`close`,r);return}i(Error(`Devframe WebSocket is not open; message dropped`))},serialize:s.serialize,deserialize:s.deserialize}}function pT(e,t,n){let r=(()=>{try{return new URL(t,n.href)}catch{return new URL(n.href)}})(),i=r.protocol===`https:`?`wss:`:`ws:`;if(e&&typeof e==`object`){if(e.host!=null||e.port!=null){let t=e.host??`${r.hostname}:${e.port}`,n=new URL(e.path??`/`,`${i}//${t}`);return n.protocol=i,n.href}let t=new URL(e.path??``,r);return t.protocol=i,t.href}if(typeof e==`number`)return`${i}//${r.hostname}:${e}`;let a=e??``;if(/^wss?:\/\//i.test(a))return a;if(/^https?:\/\//i.test(a))return Ux(a,/^https/i.test(a)?`wss://`:`ws://`);let o=new URL(a,r);return o.protocol=i,o.href}function mT(e){let{authToken:t,connectionMeta:n,metaBaseUrl:r,events:i,clientRpc:a,rpcOptions:o={},wsOptions:s={},callTimeout:c=0}=e,l=pT(n.websocket,r??`./`,location);return Jw({transport:`websocket`,authToken:t,connectionMeta:n,events:i,clientRpc:a,rpcOptions:o,callTimeout:c,createChannel:e=>fT({url:l,authToken:t,definitions:e.definitions,...s,onConnected(e){s.onConnected?.(e)},onError(t){e.onError(t),s.onError?.(t)},onDisconnected(t){e.onDisconnected(),s.onDisconnected?.(t)}})})}function hT(e){return e.includes(`:`)}function gT(e,t){return hT(t)?t:`${e}:${t}`}function _T(e){return{async get(t){return(await e()).value()[t]},async set(t,n){(await e()).mutate(e=>{e[t]=n})},async delete(t){(await e()).mutate(e=>{delete e[t]})},async all(){return(await e()).value()},async onChange(t){return(await e()).on(`updated`,e=>t(e))}}}function vT(e,t,n){let r=`devframe:settings:${n}:${t}`,i;function a(){return i||=e.sharedState.get(r,{initialValue:{}}),i}return _T(a)}function yT(e,t){return{global:vT(e,t,`global`),project:vT(e,t,`project`)}}function bT(e,t){return{namespace:t,base:e,rpc:{namespace:t,register(n){if(hT(n.name))throw Error(`[devframe] Scoped client RPC registration for namespace "${t}" received an already-namespaced function name "${n.name}". Pass a bare name without a ":" separator.`);e.client.register({...n,name:`${t}:${n.name}`})},call:((n,...r)=>e.call(gT(t,n),...r)),callEvent:((n,...r)=>e.callEvent(gT(t,n),...r)),callOptional:((n,...r)=>e.callOptional(gT(t,n),...r)),sharedState:((n,r)=>e.sharedState.get(gT(t,n),r)),streaming:{subscribe:(n,r,i)=>e.streaming.subscribe(gT(t,n),r,i),upload:(n,r)=>e.streaming.upload(gT(t,n),r)}},settings:yT(e,t),scope:e.scope}}function xT(){if(typeof document<`u`){let e=document.modelContext;if(e)return e}if(typeof navigator<`u`){let e=navigator.modelContext;if(e)return e}}function ST(e,t={}){let n=t.modelContext??xT();if(!n)return()=>{};let r=n,i=new Map,a=new Map;function o(t,n){let o=XC(t.name),s=a.get(o);if(s&&s!==t.name){console.warn(`[devframe] WebMCP tool name "${o}" (from "${t.name}") collides with "${s}"; keeping the first registration.`);return}let c=new AbortController,l=_x(t.type,n),u=r.registerTool({name:o,description:n.description,inputSchema:bx(t.args),annotations:{title:n.title??t.name,readOnlyHint:l===`read`,destructiveHint:l===`destructive`},execute:n=>CT(t,e.context,n)},{signal:c.signal});u&&`then`in u&&u.then(()=>{},()=>{}),a.set(o,t.name),i.set(t.name,()=>{c.abort(),u&&`unregister`in u&&typeof u.unregister==`function`&&u.unregister(),a.delete(o)})}function s(t){let n=t?[t]:[...e.definitions.keys()];for(let t of n){i.get(t)?.(),i.delete(t);let n=e.definitions.get(t),r=n?.agent;n&&r&&o(n,r)}}s();let c=e.onChanged(e=>s(e));return()=>{c();for(let e of i.values())e();i.clear()}}async function CT(e,t,n){try{let r=Sx(n,e.args?.length);return{content:[{type:`text`,text:wT(await(await gw(e,t))(...r))}]}}catch(e){return{isError:!0,content:[{type:`text`,text:TT(e)}]}}}function wT(e){return e===void 0?`undefined`:typeof e==`string`?e:JSON.stringify(e,null,2)}function TT(e){if(!(e instanceof Error))return String(e);let t=e.cause instanceof Error?` (cause: ${e.cause.message})`:``;return`${e.name}: ${e.message}${t}`}function ET(e,t){if(t.backend===`static`)return`static`;let n=t.websocket!==void 0,r=t.sse!==void 0;if(e===`websocket`){if(!n)throw Error(`[devframe] transport: 'websocket' was requested, but this server does not advertise a WebSocket endpoint`);return`websocket`}if(e===`sse`){if(!r)throw Error(`[devframe] transport: 'sse' was requested, but this server does not advertise an SSE endpoint`);return`sse`}if(t.backend===`sse`&&r)return`sse`;if(n)return`websocket`;if(r)return`sse`;throw Error(`[devframe] This server advertises no RPC transport (backend "none"), so there is nothing to connect to. Enable the WebSocket or SSE endpoint on the server, or use its static/MCP surfaces instead.`)}async function DT(e={}){let{baseURL:t=`./`,rpcOptions:n={},cacheOptions:r=!1}=e,i=Lx(),a=Array.isArray(t)?t:[t],o=await Nw(e),{connectionMeta:s,metaBaseUrl:c,authToken:l}=o,u=a[0]??`./`;try{u=new URL(`.`,c).href}catch{}let d=new cw({functions:[],...typeof e.cacheOptions==`object`?e.cacheOptions:{}}),f={rpc:void 0},p=new _w(f),m=e.webmcp===!1?void 0:ST(p),h,g=!1;async function _(e){let t=[u,...a.filter(e=>e!==u)].filter(e=>e!=null),n=[];for(let r of t)try{return await fetch(Hx(e,r)).then(t=>{if(!t.ok)throw Error(`Failed to fetch ${e} from ${r}: ${t.status}`);return t.json()})}catch(e){n.push(e)}throw Error(`Failed to load ${e} from ${t.join(`, `)}`,{cause:n})}let ee={authToken:l,connectionMeta:s,metaBaseUrl:c,events:i,clientRpc:p,callTimeout:e.callTimeout,rpcOptions:{...n,async onRequest(e,t,i){if(await n.onRequest?.call(this,e,t,i),r&&d?.validate(e.m)){if(d.has(e.m,e.a))return i(d.cached(e.m,e.a));let n=await t(e);d.apply(e,n)}else await t(e)}}},v=ET(e.transport??`auto`,s),te=v===`static`?await oT({fetchJsonFromBases:_}):v===`sse`?Xw({...ee,sseOptions:e.sseOptions}):mT({...ee,wsOptions:e.wsOptions}),ne;try{ne=new BroadcastChannel(`devframe-auth`)}catch{}let re,ie=!1;function ae(e){return((...t)=>ie||!re?e(...t):re.then(()=>e(...t)))}function oe(){g=!0;try{h?.(),m?.()}finally{try{ne?.close()}finally{te.close?.()}}}let se={events:i,get isTrusted(){return te.isTrusted},get status(){return te.status},get connectionError(){return te.connectionError},get transport(){return te.transport??v},get connection(){return o},connectionMeta:s,ensureTrusted:te.ensureTrusted,requestTrust:te.requestTrust,requestTrustWithToken:async e=>(kw(e),o={...o,authToken:e},te.requestTrustWithToken(e)),requestTrustWithCode:async e=>{let t=await te.requestTrustWithCode(e);if(!t)return!1;kw(t),o={...o,authToken:t};try{ne?.postMessage({type:`auth-update`,authToken:t})}catch{}return!0},requestAuthCode:e=>te.requestAuthCode(e),call:ae(te.call),callEvent:ae(te.callEvent),callOptional:ae(te.callOptional),client:p,sharedState:void 0,services:void 0,streaming:void 0,cacheManager:d,scope:void 0,close:oe};se.sharedState=Bw(se),se.streaming=lT(se),se.services=zw(se);let ce=new Map;se.scope=(e=>{if(!e)return se;let t=ce.get(e);return t||(t=bT(se,e),ce.set(e,t)),t}),f.rpc=se;function le(){try{return typeof window<`u`&&window.self===window.top}catch{return!1}}async function ue(){if(e.simpleAuth!==!1&&le()&&typeof globalThis.prompt==`function`)for(await se.requestAuthCode().catch(()=>{});!se.isTrusted;){let e=globalThis.prompt(`devframe: enter the authentication code shown in your terminal`);if(e==null)return;let t=e.trim();if(t&&await se.requestTrustWithCode(t))return}}async function de(){let t=await te.requestTrust(),n=e.otpParam??`devframe_otp`,r=n?await Rw(se,{param:n}):!1;t||r||se.isTrusted||await ue()}return re=de().then(()=>{ie=!0},()=>{ie=!0}),s.mcp&&ew(async()=>{let{setupBrowserAgentRpcBridge:e}=await import(`./browser-agent-rpc-BXhoSh1z-Cfmnc8tc.js`);return{setupBrowserAgentRpcBridge:e}},[],import.meta.url).then(({setupBrowserAgentRpcBridge:e})=>{g||(h=e(se))}).catch(()=>{}),ne&&(ne.onmessage=e=>{e.data?.type===`auth-update`&&e.data.authToken&&se.requestTrustWithToken(e.data.authToken)}),se}var OT=DT,kT=[`components`,`injectors`,`signals`,`ngrx`,`forms`,`router`,`pipes`,`http`,`analog`],AT=[`forms`,`router`,`ngrx`,`http`,`analog`],jT={refreshMs:{default:3e3,min:500,max:8e3},navigations:{default:50,min:5,max:500},formTimeline:{default:200,min:10,max:2e3},httpCalls:{default:200,min:10,max:2e3},changeLog:{default:200,min:10,max:2e3},cdCycles:{default:200,min:10,max:2e3}},MT=`ng-devtools`;function NT(e){return e&&typeof e==`object`&&!Array.isArray(e)?e:{}}function PT(e,t){return typeof e==`boolean`?e:t}var FT=100,IT=100;function LT(e){if(!Array.isArray(e))return[];let t=e.filter(e=>typeof e==`string`).map(e=>e.trim()).filter(e=>e&&e.length<=IT);return[...new Set(t)].slice(0,FT)}function RT(e,t){let{default:n,min:r,max:i}=jT[t];return typeof e!=`number`||!Number.isFinite(e)?n:Math.min(i,Math.max(r,Math.round(e)))}function zT(e,t){return Object.fromEntries(e.map(e=>[e,t(e)]))}function BT(e){let t=NT(e),n=NT(t.agent),r=NT(t.inspectors),i=NT(n.tools),a=NT(t.actions),o=PT(t.actions,!0),s=NT(t.redaction),c=NT(t.limits),l=zT(kT,e=>PT(r[e],!0));return{inspectors:l,agent:{readOnly:PT(n.readOnly,!1),tools:zT(kT,e=>l[e]&&PT(i[e],!0))},actions:zT(AT,e=>l[e]&&PT(a[e],o)),redaction:{secretNames:LT(s.secretNames),unmask:LT(s.unmask)},limits:Object.fromEntries(Object.keys(jT).map(e=>[e,RT(c[e],e)]))}}function VT(e){let t=e?.configs;return BT(t?.[MT])}function HT(e){return`${{forms:`Writing to forms`,router:`Navigating`,ngrx:`Restoring NgRx state`,http:`Changing HTTP mock rules and clearing HTTP calls`,analog:`Calling API routes`}[e]} is turned off in the devtools config (actions.${e}).`}var UT={components:`Components`,injectors:`Injectors`,signals:`Signals`,ngrx:`NgRx`,forms:`Forms`,router:`Router`,pipes:`Pipes`,http:`HTTP`,analog:`Analog`},WT={forms:`Form writes`,router:`Navigation`,ngrx:`NgRx restore`,http:`HTTP mocking`,analog:`Analog API calls`},GT={refreshMs:e=>`poll every ${e} ms`,navigations:e=>`${e} navigations`,formTimeline:e=>`${e} form events`,httpCalls:e=>`${e} HTTP calls`,changeLog:e=>`${e} NgRx changes`,cdCycles:e=>`${e} change detection cycles`};function KT(e){let t=[],n=(e,n)=>{n.length&&t.push({label:e,value:n.join(`, `)})},r=kT.filter(t=>e.inspectors[t]);return n(`Inspectors off`,kT.filter(t=>!e.inspectors[t]).map(e=>UT[e])),n(`Agent`,e.agent.readOnly?[`Read-only`]:[]),n(`Hidden from the agent`,r.filter(t=>!e.agent.tools[t]).map(e=>UT[e])),n(`Blocked actions`,AT.filter(t=>e.inspectors[t]&&!e.actions[t]).map(e=>WT[e])),n(`Extra secret names`,e.redaction.secretNames),n(`Unmasked names`,e.redaction.unmask),n(`Limits`,Object.keys(jT).filter(t=>e.limits[t]!==jT[t].default).map(t=>GT[t](e.limits[t]))),t}var qT=`ng-devtools-page-id`;function JT(){try{return new URLSearchParams(location.search).get(`pageId`)||(window.top===window?null:sessionStorage.getItem(qT)||null)}catch{return null}}function YT(e,t){if(t.chosen&&e[t.chosen])return t.chosen;if(t.host)return t.host;if(t.previous&&e[t.previous])return t.previous;let n=null;for(let t of Object.values(e))(!n||t.reportedAt>n.reportedAt)&&(n=t);return n?.pageId??null}function XT(e,t){return e?t?e.pages?.[t]??null:e:null}function ZT(e,t){return e?t?e.pages?.[t]??null:e.graph??null:null}function QT(e,t,n){return e?e.scope(`ng-devtools`).rpc.call(t,...n===void 0?[]:[n]):Promise.resolve(null)}function $T(e,t,n){return QT(e,t,n).then(e=>e,()=>null)}function eE(e){return e?.connectionMeta.backend===`static`}function tE(e){return VT(e?.connectionMeta)}function nE(e,t){return tE(e).actions[t]}var rE={components:`components`,routes:`router`,signals:`signals`,injectors:`injectors`,store:`ngrx`,forms:`forms`,pipes:`pipes`,network:`http`,analog:`analog`};function iE(e,t){let n=rE[e];return!n||t.inspectors[n]}function aE(e,t){e&1&&(fs(),Fg(0,`rect`,3)(1,`rect`,4)(2,`rect`,5)(3,`rect`,6))}function oE(e,t){e&1&&(fs(),Fg(0,`path`,7)(1,`path`,8)(2,`path`,9))}function sE(e,t){e&1&&(fs(),Fg(0,`circle`,10)(1,`path`,11)(2,`circle`,12))}function cE(e,t){e&1&&(fs(),Fg(0,`path`,1))}function lE(e,t){e&1&&(fs(),Fg(0,`path`,13)(1,`path`,14)(2,`path`,15)(3,`path`,16))}function uE(e,t){e&1&&(fs(),Fg(0,`ellipse`,17)(1,`path`,18)(2,`path`,19))}function dE(e,t){e&1&&(fs(),Fg(0,`rect`,20)(1,`path`,21)(2,`path`,22)(3,`path`,23))}function fE(e,t){e&1&&(fs(),Fg(0,`circle`,24)(1,`path`,25)(2,`path`,26))}function pE(e,t){e&1&&(fs(),Fg(0,`path`,27)(1,`path`,28)(2,`path`,29)(3,`path`,30)(4,`circle`,31))}function mE(e,t){e&1&&(fs(),Fg(0,`path`,2))}var hE=class e{name=$.required();static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-tab-icon`]],inputs:{name:[1,`name`]},decls:11,vars:1,consts:[[`viewBox`,`0 0 24 24`,`width`,`16`,`height`,`16`,`fill`,`none`,`stroke`,`currentColor`,`stroke-width`,`1.8`,`stroke-linecap`,`round`,`stroke-linejoin`,`round`,`aria-hidden`,`true`],[`d`,`M22 12h-4l-3 9L9 3l-3 9H2`],[`d`,`m8 3 4 8 5-5 5 15H2L8 3z`],[`x`,`3`,`y`,`3`,`width`,`7`,`height`,`9`,`rx`,`1.5`],[`x`,`14`,`y`,`3`,`width`,`7`,`height`,`5`,`rx`,`1.5`],[`x`,`14`,`y`,`12`,`width`,`7`,`height`,`9`,`rx`,`1.5`],[`x`,`3`,`y`,`16`,`width`,`7`,`height`,`5`,`rx`,`1.5`],[`d`,`M12 2 3 7l9 5 9-5-9-5Z`],[`d`,`m3 12 9 5 9-5`],[`d`,`m3 17 9 5 9-5`],[`cx`,`6`,`cy`,`19`,`r`,`3`],[`d`,`M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15`],[`cx`,`18`,`cy`,`5`,`r`,`3`],[`d`,`M12 22v-5`],[`d`,`M9 8V2`],[`d`,`M15 8V2`],[`d`,`M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z`],[`cx`,`12`,`cy`,`5`,`rx`,`9`,`ry`,`3`],[`d`,`M3 5v14a9 3 0 0 0 18 0V5`],[`d`,`M3 12a9 3 0 0 0 18 0`],[`x`,`3`,`y`,`4`,`width`,`18`,`height`,`16`,`rx`,`2`],[`d`,`M7 9h10`],[`d`,`M7 13h6`],[`d`,`M7 17h8`],[`cx`,`12`,`cy`,`12`,`r`,`9`],[`d`,`M3 12h18`],[`d`,`M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18Z`],[`d`,`M4 7h10`],[`d`,`M4 17h6`],[`d`,`m14 13 4 4-4 4`],[`d`,`M10 17h8`],[`cx`,`18`,`cy`,`7`,`r`,`3`]],template:function(e,t){if(e&1&&(fs(),H(0,`svg`,0),P(1,aE,4,0)(2,oE,3,0)(3,sE,3,0)(4,cE,1,0,`:svg:path`,1)(5,lE,4,0)(6,uE,3,0)(7,dE,4,0)(8,fE,3,0)(9,pE,5,0)(10,mE,1,0,`:svg:path`,2),U()),e&2){let e;M(),F((e=t.name())===`dashboard`?1:e===`components`?2:e===`routes`?3:e===`signals`?4:e===`injectors`?5:e===`store`?6:e===`forms`?7:e===`network`?8:e===`pipes`?9:e===`analog`?10:-1)}},styles:[`[_nghost-%COMP%] { + display: inline-flex; + flex-shrink: 0; +}`]})},gE=(e,t)=>t.tab,_E=(e,t)=>t.label;function vE(e,t){e&1&&J(0),e&2&&X(` `,K().meta()?.projectName,` `)}function yE(e,t){e&1&&J(0,` Project details unavailable `)}function bE(e,t){e&1&&J(0,` Loading… `)}function xE(e,t){e&1&&(J(0,` Run `),z(1,`code`),J(2,`ng-devtools build`),B(),J(3,` again to rebuild the report. `))}function SE(e,t){e&1&&J(0,` Check that the dev server is running, then reload the panel. `)}function CE(e,t){if(e&1&&(z(0,`p`,4),P(1,xE,4,0)(2,SE,1,0),B()),e&2){let e=K();M(),F(e.staticReport()?1:2)}}function wE(e,t){e&1&&(z(0,`li`,6)(1,`span`),J(2,`Analog`),B(),J(3),B()),e&2&&(M(3),Y(t))}function TE(e,t){if(e&1&&(z(0,`span`,17),J(1),B(),z(2,`span`,18),J(3),B()),e&2){let e=K().$implicit,t=K();M(),Y(t.cards()[e.tab]?.value),M(2),Y(t.cards()[e.tab]?.sub)}}function EE(e,t){e&1&&(z(0,`span`,19),J(1,`–`),B(),z(2,`span`,18),J(3,`Count unavailable`),B())}function DE(e,t){e&1&&(V(0,`span`,20),z(1,`span`,18),J(2,`Counting…`),B())}function OE(e,t){if(e&1){let e=W();z(0,`button`,11),G(`click`,function(){let t=k(e).$implicit;return A(K().navigate.emit(t.tab))}),z(1,`span`,12)(2,`span`,13),V(3,`app-tab-icon`,14),B(),z(4,`span`,15),J(5,`→`),B()(),z(6,`span`,16),J(7),B(),P(8,TE,4,2)(9,EE,4,0)(10,DE,3,0),B()}if(e&2){let e,n=t.$implicit,r=t.$index,i=K().stateOf(n.tab);C_(`animation-delay`,60*r,`ms`),N(`aria-busy`,i===`loading`),M(3),R(`name`,n.tab),M(4),Y(n.label),M(),F((e=i)===`ready`?8:e===`error`?9:10)}}function kE(e,t){if(e&1&&(z(0,`div`)(1,`dt`),J(2),B(),z(3,`dd`),J(4),B()()),e&2){let e=t.$implicit;M(2),Y(e.label),M(2),Y(e.value)}}function AE(e,t){if(e&1&&(z(0,`dl`),I(1,kE,5,2,`div`,null,_E),B()),e&2){let e=K();M(),L(e.configItems())}}function jE(e,t){e&1&&(z(0,`p`),J(1,`Defaults`),B())}var ME=[{tab:`components`,label:`Components`},{tab:`routes`,label:`Routes`},{tab:`signals`,label:`Signals`},{tab:`injectors`,label:`Injectors`},{tab:`store`,label:`NgRx declarations`},{tab:`pipes`,label:`Pipes`}],NE=new Set([`signal`,`computed`,`linkedSignal`,`effect`]),PE={action:[`action`,`actions`],reducer:[`reducer`,`reducers`],effect:[`effect`,`effects`],selector:[`selector`,`selectors`],feature:[`feature`,`features`],"store-setup":[`setup call`,`setup calls`],"signal-store":[`signal store`,`signal stores`],"signal-state":[`signal state`,`signal states`],"signal-method":[`signal method`,`signal methods`]};function FE(e,t,n){return`${e} ${e===1?t:n}`}function IE(e,t){for(let n of e??[])t(n),IE(n.children,t)}function LE(e){if(!e.some(e=>e.kind))return{value:e.length,sub:`discovered in source`};let t=e.filter(e=>e.kind===`directive`).length;return{value:e.length-t,sub:`components · ${FE(t,`directive`,`directives`)}`}}function RE(e){if(!e.some(e=>e.kind))return{value:e.length,sub:`route entries in source`};let t=e.filter(e=>e.kind===`redirect`).length;return{value:new Set(e.filter(e=>e.kind===`page`).map(e=>e.fullPath??e.path??``)).size,sub:`navigable paths · ${FE(t,`redirect`,`redirects`)}`}}function zE(e){let t=new Map;for(let n of e)n.kind&&t.set(n.kind,(t.get(n.kind)??0)+1);if(!t.size)return{value:e.length,sub:`declarations in source`};let n=[...t].sort((e,t)=>t[1]-e[1]).map(([e,t])=>{let[n,r]=PE[e]??[e,e];return FE(t,n,r)});return{value:e.length,sub:n.join(` · `)}}var BE=class e{rpc=$(null);navigate=Dv();staticReport=Q(()=>eE(this.rpc()));meta=j(null);config=Q(()=>tE(this.rpc()));stats=Q(()=>ME.filter(e=>iE(e.tab,this.config())));configItems=Q(()=>KT(this.config()));metaState=j(`loading`);states=j({});rows=j({});injectorTree=j(null);signalGraph=j(null);pageId=JT();destroyRef=E(Cs);stopLive=[];liveInjectors=Q(()=>{let e=XT(this.injectorTree(),this.pageId);if(!e?.roots?.length)return null;let t=0,n=0,r=e=>{t++,n+=e.providers?.length??0};return IE(e.roots,r),IE(e.environment,r),{injectors:t,providers:n}});liveSignals=Q(()=>{let e=ZT(this.signalGraph(),this.pageId);return e?.nodes?.length?e.nodes.filter(e=>NE.has(e.kind??``)).length:null});cards=Q(()=>{let e=this.rows(),t={};if(e.components&&(t.components=LE(e.components)),e.routes&&(t.routes=RE(e.routes)),e.store&&(t.store=zE(e.store)),e.pipes){let n=e.pipes.filter(e=>e.builtin).length;t.pipes={value:e.pipes.length-n,sub:n?`custom pipes · ${n} built-in in use`:`custom pipes in source`}}let n=this.liveSignals();n===null?e.signals&&(t.signals={value:e.signals.length,sub:`signal declarations in source`}):t.signals={value:n,sub:e.signals?`live on the page · ${e.signals.length} declared in source`:`live on the page`};let r=this.liveInjectors();return r?t.injectors={value:r.injectors,sub:`live injectors · ${FE(r.providers,`provider`,`providers`)}`}:e.injectors&&(t.injectors={value:e.injectors.filter(e=>e.type!==`injection`).length,sub:`provider declarations in source`}),t});constructor(){uc(()=>{let e=this.rpc();if(!e)return;let t=e.scope(`ng-devtools`);this.metaState.set(`loading`),this.states.set({}),this.rows.set({}),t.rpc.call(`build-meta`).then(e=>{this.meta.set(e),this.metaState.set(`ready`)}).catch(()=>this.metaState.set(`error`));let n=tE(e),r=e=>iE(e,n);r(`components`)&&this.load(t.rpc.call(`get-components`),`components`),r(`routes`)&&this.load(t.rpc.call(`get-routes`),`routes`),r(`signals`)&&this.load(t.rpc.call(`get-signals`),`signals`),r(`injectors`)&&this.load(t.rpc.call(`get-providers`),`injectors`),r(`store`)&&this.load(t.rpc.call(`get-ngrx-store`),`store`),r(`pipes`)&&this.load(t.rpc.call(`get-pipes`),`pipes`),this.watchLive(e,n)}),this.destroyRef.onDestroy(()=>this.unwatch())}stateOf(e){return(e===`signals`?this.liveSignals():e===`injectors`?this.liveInjectors():null)===null?this.states()[e]??`loading`:`ready`}load(e,t){let n=e=>this.states.update(n=>({...n,[t]:e}));e.then(e=>{this.rows.update(n=>({...n,[t]:Array.isArray(e)?e:[]})),n(`ready`)}).catch(()=>n(`error`))}async watchLive(e,t){this.unwatch();let n=e.scope(`ng-devtools`).rpc,r=async(t,r)=>{try{let i=await n.sharedState(t);if(this.destroyRef.destroyed||this.rpc()!==e)return;r(i.value()),this.stopLive.push(i.on(`updated`,e=>r(e)))}catch{r(null)}};await Promise.all([t.inspectors.injectors&&r(`injector-tree`,e=>this.injectorTree.set(e)),t.inspectors.signals&&r(`signal-graph`,e=>this.signalGraph.set(e))])}unwatch(){for(let e of this.stopLive.splice(0))e()}static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-dashboard`]],inputs:{rpc:[1,`rpc`]},outputs:{navigate:`navigate`},decls:31,vars:12,consts:[[`aria-labelledby`,`project-title`,1,`project`],[1,`project-head`],[1,`eyebrow`],[`id`,`project-title`],[1,`hint`],[1,`chips`],[1,`analog`],[1,`grid`],[`type`,`button`,1,`stat`,3,`animation-delay`],[`aria-labelledby`,`config-title`,1,`config`],[`id`,`config-title`],[`type`,`button`,1,`stat`,3,`click`],[1,`top`],[1,`icon`],[3,`name`],[`aria-hidden`,`true`,1,`go`],[1,`label`],[1,`big`],[1,`sub`],[1,`big`,`muted`],[`aria-hidden`,`true`,1,`big`,`skeleton`]],template:function(e,t){if(e&1&&(z(0,`section`,0)(1,`div`,1)(2,`p`,2),J(3,`Project`),B(),z(4,`h2`,3),P(5,vE,1,1)(6,yE,1,0)(7,bE,1,0),B(),P(8,CE,3,1,`p`,4),B(),z(9,`ul`,5)(10,`li`)(11,`span`),J(12,`Angular`),B(),J(13),B(),z(14,`li`)(15,`span`),J(16,`TypeScript`),B(),J(17),B(),z(18,`li`)(19,`span`),J(20,`SSR`),B(),J(21),B(),P(22,wE,4,1,`li`,6),B()(),z(23,`div`,7),I(24,OE,11,6,`button`,8,gE),B(),z(26,`section`,9)(27,`h2`,10),J(28,`Configuration`),B(),P(29,AE,3,0,`dl`)(30,jE,2,0,`p`),B()),e&2){let e,n;N(`aria-busy`,t.metaState()===`loading`),M(4),q(`muted`,t.metaState()!==`ready`),M(),F((e=t.metaState())===`ready`?5:e===`error`?6:7),M(3),F(t.metaState()===`error`?8:-1),M(),q(`pending`,t.metaState()===`loading`),M(4),Y(t.meta()?.angularVersion??`…`),M(4),Y(t.meta()?.typescript??`…`),M(4),Y(t.meta()?t.meta()?.ssr?`On`:`Off`:`…`),M(),F((n=t.meta()?.analog)?22:-1,n),M(2),L(t.stats()),M(5),F(t.configItems().length?29:30)}},dependencies:[hE],styles:[`[_nghost-%COMP%] { + display: block; + max-width: 1200px; +} + +.project[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + align-items: flex-end; + justify-content: space-between; + gap: 16px 24px; + margin-bottom: 16px; + padding: 24px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: radial-gradient(420px 180px at 100% 0%, var(--%NS%accent-soft), transparent 70%), linear-gradient(180deg, var(--%NS%surface-2), var(--%NS%surface)); + box-shadow: var(--%NS%shadow); +} + +.project-head[_ngcontent-%COMP%] { + flex: 1 1 240px; + min-width: 0; +} + +.eyebrow[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + margin: 0 0 4px; + color: var(--%NS%accent); +} + +h2[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-strong); + font-size: 24px; + line-height: 1.25; + letter-spacing: -0.02em; + overflow-wrap: anywhere; +} + +h2.muted[_ngcontent-%COMP%] { + color: var(--%NS%text-2); + font-weight: 600; +} + +.hint[_ngcontent-%COMP%] { + margin: 8px 0 0; + color: var(--%NS%text-2); + font-size: 13px; + line-height: 1.5; +} + +.chips[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 8px; + min-width: 0; + margin: 0; + padding: 0; + list-style: none; +} + +.chips[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + gap: 8px; + height: 28px; + max-width: 100%; + padding: 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: 99px; + background: var(--%NS%bg); + color: var(--%NS%text-strong); + font-size: 12px; + font-weight: 600; + font-variant-numeric: tabular-nums; + white-space: nowrap; +} + +.chips[_ngcontent-%COMP%] span[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-weight: 500; +} + +.chips.pending[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { + color: var(--%NS%text-3); +} + +.chips[_ngcontent-%COMP%] .analog[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, #dd0330 55%, transparent); +} + +.grid[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); + gap: 12px; +} + +.stat[_ngcontent-%COMP%] { + display: flex; + flex-direction: column; + align-items: flex-start; + min-width: 0; + padding: 16px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + color: inherit; + text-align: left; + font: inherit; + cursor: pointer; + animation: enter 0.4s var(--%NS%ease) both; + transition: border-color 0.2s var(--%NS%ease), transform 0.2s var(--%NS%ease), background-color 0.2s var(--%NS%ease), box-shadow 0.2s var(--%NS%ease); +} + +.stat[_ngcontent-%COMP%]:hover { + border-color: var(--%NS%accent-line); + background: var(--%NS%surface-2); + box-shadow: var(--%NS%shadow); + transform: translateY(-2px); +} + +.stat[_ngcontent-%COMP%]:active { + transform: translateY(0); + background: var(--%NS%surface-3); +} + +.stat[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.top[_ngcontent-%COMP%] { + display: flex; + align-items: center; + justify-content: space-between; + align-self: stretch; + margin-bottom: 12px; +} + +.icon[_ngcontent-%COMP%] { + display: grid; + place-items: center; + width: 32px; + height: 32px; + border: 1px solid var(--%NS%accent-line); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%accent-soft); + color: var(--%NS%accent); +} + +.go[_ngcontent-%COMP%] { + display: grid; + place-items: center; + width: 24px; + height: 24px; + color: var(--%NS%text-3); + transition: transform 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease); +} + +.stat[_ngcontent-%COMP%]:hover .go[_ngcontent-%COMP%], +.stat[_ngcontent-%COMP%]:focus-visible .go[_ngcontent-%COMP%] { + color: var(--%NS%accent); + transform: translateX(3px); +} + +.label[_ngcontent-%COMP%] { + max-width: 100%; + overflow: hidden; + color: var(--%NS%text-2); + font-size: 13px; + font-weight: 500; + line-height: 16px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.big[_ngcontent-%COMP%] { + margin: 4px 0; + color: var(--%NS%text-strong); + font-size: 32px; + font-weight: 750; + line-height: 40px; + letter-spacing: -0.03em; + font-variant-numeric: tabular-nums; +} + +.big.muted[_ngcontent-%COMP%] { + color: var(--%NS%text-3); +} + +.skeleton[_ngcontent-%COMP%] { + display: block; + width: 56px; + height: 32px; + margin-block: 8px; + border-radius: var(--%NS%radius-sm); + background: linear-gradient(90deg, var(--%NS%surface-2), var(--%NS%surface-3), var(--%NS%surface-2)) 0 0/200% 100%; + animation: _ngcontent-%COMP%_shimmer 1.4s linear infinite; +} + +.sub[_ngcontent-%COMP%] { + max-width: 100%; + color: var(--%NS%text-3); + font-size: 12px; + line-height: 16px; +} + +.config[_ngcontent-%COMP%] { + margin-top: 16px; + padding: 16px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); +} + +.config[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + margin: 0 0 8px; + color: var(--%NS%text-2); +} + +.config[_ngcontent-%COMP%] p[_ngcontent-%COMP%], +.config[_ngcontent-%COMP%] dl[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text); + font-size: 13px; + line-height: 1.5; +} + +.config[_ngcontent-%COMP%] dl[_ngcontent-%COMP%] { + display: grid; + gap: 4px; +} + +.config[_ngcontent-%COMP%] dl[_ngcontent-%COMP%] div[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 4px 8px; +} + +.config[_ngcontent-%COMP%] dt[_ngcontent-%COMP%] { + color: var(--%NS%text-2); +} + +.config[_ngcontent-%COMP%] dt[_ngcontent-%COMP%]::after { + content: ":"; +} + +.config[_ngcontent-%COMP%] dd[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-strong); + overflow-wrap: anywhere; +} + +@keyframes _ngcontent-%COMP%_shimmer { + to { + background-position: -200% 0; + } +} +@media (max-width: 480px) { + .project[_ngcontent-%COMP%] { + padding: 16px; + } + h2[_ngcontent-%COMP%] { + font-size: 20px; + } + .stat[_ngcontent-%COMP%] { + padding: 12px; + } + .big[_ngcontent-%COMP%] { + font-size: 28px; + line-height: 36px; + } +} +@media (prefers-reduced-motion: reduce) { + .stat[_ngcontent-%COMP%], + .stat[_ngcontent-%COMP%]:hover, + .stat[_ngcontent-%COMP%]:active { + transform: none; + } + .stat[_ngcontent-%COMP%]:hover .go[_ngcontent-%COMP%] { + transform: none; + } + .skeleton[_ngcontent-%COMP%] { + animation: none; + } +}`]})},VE=[`trigger`],HE=[`list`],UE=(e,t)=>t.value;function WE(e,t){if(e&1&&(H(0,`span`,4),J(1),U()),e&2){let e=K();M(),Y(e.current().hint)}}function GE(e,t){if(e&1&&(H(0,`span`,15),J(1),U()),e&2){let e=K().$implicit;M(),Y(e.hint)}}function KE(e,t){if(e&1){let e=W();H(0,`li`,11),Qg(`pointerenter`,function(){let t=k(e).$index;return A(K(2).active.set(t))})(`pointerdown`,function(e){return e.preventDefault()})(`click`,function(){let t=k(e).$index;return A(K(2).choose(t))}),fs(),H(1,`svg`,12),Fg(2,`path`,13),U(),ps(),H(3,`span`,14),J(4),U(),P(5,GE,2,1,`span`,15),U()}if(e&2){let e=t.$implicit,n=t.$index,r=K(2);q(`active`,n===r.active())(`selected`,e.value===r.value()),N(`id`,r.uid+`-opt-`+n)(`aria-selected`,e.value===r.value())(`aria-disabled`,e.disabled||null),M(4),Y(e.label),M(),F(e.hint?5:-1)}}function qE(e,t){if(e&1&&(H(0,`li`,10),J(1),U()),e&2){let e=K(2);M(),Y(e.emptyText())}}function JE(e,t){if(e&1&&(H(0,`ul`,8,1),dg(`list-in`),I(2,KE,6,9,`li`,9,UE,!1,qE,2,1,`li`,10),U()),e&2){let e=K();q(`up`,e.dropUp()),N(`id`,e.uid+`-list`)(`aria-labelledby`,e.labelledBy()||e.uid+`-trigger`),M(2),L(e.options())}}var YE=0,XE=class e{options=$.required();value=Pv(null);placeholder=$(`Select…`);ariaLabel=$(``);labelledBy=$(``);disabled=$(!1);emptyText=$(`Nothing to choose`);uid=`app-select-${++YE}`;open=j(!1);active=j(-1);dropUp=j(!1);current=Q(()=>this.options().find(e=>e.value===this.value())??null);host=E(Ml);injector=E(xs);trigger=Lv.required(`trigger`);list=Lv(`list`);typed=``;typedAt=0;toggle(){this.open()?this.close():this.show()}choose(e){let t=this.options()[e];t&&!t.disabled&&(this.value.set(t.value),this.close(),this.trigger().nativeElement.focus())}onKey(e){let t=this.options(),n=this.open();switch(e.key){case`ArrowDown`:case`ArrowUp`:if(e.preventDefault(),!n){this.show();return}this.move(e.key===`ArrowDown`?1:-1);return;case`Home`:case`End`:if(!n)return;e.preventDefault(),this.setActive(e.key===`Home`?this.firstEnabled(0,1):this.firstEnabled(t.length-1,-1));return;case`Enter`:case` `:e.preventDefault(),n&&this.active()>=0?this.choose(this.active()):this.show();return;case`Escape`:if(!n)return;e.preventDefault(),e.stopPropagation(),this.close();return;case`Tab`:n&&this.close();return;default:e.key.length===1&&!e.metaKey&&!e.ctrlKey&&!e.altKey&&this.typeAhead(e.key)}}onBlur(e){let t=e.relatedTarget;t&&this.host.nativeElement.contains(t)||this.close()}onOutside(e){this.open()&&!this.host.nativeElement.contains(e.target)&&this.close()}show(){if(this.disabled())return;let e=this.host.nativeElement.getBoundingClientRect(),t=window.innerHeight-e.bottom;this.dropUp.set(t<220&&e.top>t);let n=this.options().findIndex(e=>e.value===this.value());this.open.set(!0),this.setActive(n>=0?n:this.firstEnabled(0,1))}close(){this.open.set(!1),this.active.set(-1)}move(e){let t=this.firstEnabled(this.active()+e,e);t>=0&&this.setActive(t)}firstEnabled(e,t){let n=this.options();for(let r=e;r>=0&&r{(this.list()?.nativeElement.querySelector(`#${this.uid}-opt-${e}`))?.scrollIntoView({block:`nearest`})},{injector:this.injector})}typeAhead(e){let t=performance.now();this.typed=t-this.typedAt>600?e.toLowerCase():this.typed+e.toLowerCase(),this.typedAt=t;let n=this.options().findIndex(e=>!e.disabled&&e.label.toLowerCase().startsWith(this.typed));n<0||(this.open()?this.setActive(n):this.value.set(this.options()[n].value))}static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-select`]],viewQuery:function(e,t){e&1&&e_(t.trigger,VE,5)(t.list,HE,5),e&2&&t_(2)},hostAttrs:[1,`app-select`],hostVars:2,hostBindings:function(e,t){e&1&&G(`pointerdown`,function(e){return t.onOutside(e)},Mu),e&2&&q(`open`,t.open())},inputs:{options:[1,`options`],value:[1,`value`],placeholder:[1,`placeholder`],ariaLabel:[1,`ariaLabel`],labelledBy:[1,`labelledBy`],disabled:[1,`disabled`],emptyText:[1,`emptyText`]},outputs:{value:`valueChange`},decls:8,vars:12,consts:[[`trigger`,``],[`list`,``],[`type`,`button`,`role`,`combobox`,`aria-haspopup`,`listbox`,1,`trigger`,3,`click`,`keydown`,`blur`,`disabled`],[1,`value`],[1,`value-hint`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`chevron`],[`d`,`m6 9 6 6 6-6`],[`role`,`listbox`,`tabindex`,`-1`,1,`list`,3,`up`],[`role`,`listbox`,`tabindex`,`-1`,1,`list`],[`role`,`option`,3,`active`,`selected`],[`role`,`option`,`aria-disabled`,`true`,1,`empty`],[`role`,`option`,3,`pointerenter`,`pointerdown`,`click`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`check`],[`d`,`m5 12 5 5 9-10`],[1,`label`],[1,`hint`]],template:function(e,t){e&1&&(H(0,`button`,2,0),Qg(`click`,function(){return t.toggle()})(`keydown`,function(e){return t.onKey(e)})(`blur`,function(e){return t.onBlur(e)}),H(2,`span`,3),J(3),U(),P(4,WE,2,1,`span`,4),fs(),H(5,`svg`,5),Fg(6,`path`,6),U()(),P(7,JE,5,5,`ul`,7)),e&2&&(Vg(`disabled`,t.disabled()),N(`id`,t.uid+`-trigger`)(`aria-controls`,t.uid+`-list`)(`aria-expanded`,t.open())(`aria-label`,t.ariaLabel()||null)(`aria-labelledby`,t.labelledBy()||null)(`aria-activedescendant`,t.open()&&t.active()>=0?t.uid+`-opt-`+t.active():null),M(2),q(`placeholder`,!t.current()),M(),X(` `,t.current()?.label??t.placeholder(),` `),M(),F(t.current()?.hint?4:-1),M(3),F(t.open()?7:-1))},styles:[`[_nghost-%COMP%] { + position: relative; + display: inline-flex; + min-width: 0; + vertical-align: middle; +} + +.trigger[_ngcontent-%COMP%] { + display: flex; + align-items: center; + gap: 8px; + width: 100%; + min-width: 0; + height: var(--%NS%control-h, 34px); + padding: 0 10px 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%bg); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + text-align: left; + cursor: pointer; + transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease), background-color 150ms var(--%NS%ease); +} + +.trigger[_ngcontent-%COMP%]:hover:not(:disabled) { + border-color: color-mix(in srgb, var(--%NS%border-strong) 55%, var(--%NS%text-3)); +} + +.trigger[_ngcontent-%COMP%]:focus-visible, +.open[_nghost-%COMP%] .trigger[_ngcontent-%COMP%] { + outline: none; + border-color: var(--%NS%accent); + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +.trigger[_ngcontent-%COMP%]:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.value[_ngcontent-%COMP%] { + flex: 1 1 auto; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.value.placeholder[_ngcontent-%COMP%] { + color: var(--%NS%text-3); +} + +.value-hint[_ngcontent-%COMP%] { + flex: 0 1 auto; + min-width: 0; + overflow: hidden; + color: var(--%NS%text-3); + font-size: 12px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.chevron[_ngcontent-%COMP%] { + flex: none; + width: 14px; + height: 14px; + fill: none; + stroke: var(--%NS%text-3); + stroke-width: 2.2; + stroke-linecap: round; + stroke-linejoin: round; + transition: transform 150ms var(--%NS%ease); +} + +.open[_nghost-%COMP%] .chevron[_ngcontent-%COMP%] { + transform: rotate(180deg); + stroke: var(--%NS%accent); +} + +.list[_ngcontent-%COMP%] { + position: absolute; + top: calc(100% + 6px); + left: 0; + z-index: 50; + box-sizing: border-box; + min-width: 100%; + max-width: min(480px, 100vw - 24px); + max-height: 280px; + margin: 0; + padding: 4px; + overflow: auto; + list-style: none; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.2); + overscroll-behavior: contain; +} + +.list.up[_ngcontent-%COMP%] { + top: auto; + bottom: calc(100% + 6px); +} + +.list-in[_ngcontent-%COMP%] { + animation: _ngcontent-%COMP%_list-in 140ms var(--%NS%ease) both; +} + +@keyframes _ngcontent-%COMP%_list-in { + from { + opacity: 0; + transform: translateY(-4px) scale(0.98); + } +} +li[_ngcontent-%COMP%] { + display: flex; + align-items: center; + gap: 8px; + min-height: 32px; + padding: 0 10px 0 8px; + border-radius: 6px; + color: var(--%NS%text); + font-size: 13px; + cursor: pointer; + white-space: nowrap; +} + +li.active[_ngcontent-%COMP%] { + background: var(--%NS%surface-3); +} + +li.selected[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-weight: 600; +} + +li[aria-disabled=true][_ngcontent-%COMP%] { + color: var(--%NS%text-3); + cursor: default; +} + +.check[_ngcontent-%COMP%] { + flex: none; + width: 14px; + height: 14px; + fill: none; + stroke: var(--%NS%accent); + stroke-width: 2.4; + stroke-linecap: round; + stroke-linejoin: round; + visibility: hidden; +} + +li.selected[_ngcontent-%COMP%] .check[_ngcontent-%COMP%] { + visibility: visible; +} + +.label[_ngcontent-%COMP%] { + flex: 1 1 auto; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; +} + +.hint[_ngcontent-%COMP%] { + flex: none; + max-width: 50%; + overflow: hidden; + color: var(--%NS%text-3); + font-size: 12px; + font-weight: 400; + text-overflow: ellipsis; +} + +.empty[_ngcontent-%COMP%] { + justify-content: center; +} + +@media (prefers-reduced-motion: reduce) { + .list-in[_ngcontent-%COMP%] { + animation: none; + } + .chevron[_ngcontent-%COMP%] { + transition: none; + } +}`]})};function ZE(e,t){let n=t.trim().toLowerCase();if(!n)return{nodes:e,matches:0};let r=0,i=e=>e.name.toLowerCase().includes(n)||e.tag.toLowerCase().includes(n)||!!e.directives?.some(e=>e.toLowerCase().includes(n)),a=e=>e.flatMap(e=>{let t=i(e);t&&r++;let n=a(e.children);return t||n.length?[{...e,children:n}]:[]});return{nodes:a(e),matches:r}}function QE(e,t,n){return n?`${t} of ${e}`:`${e} ${e===1?`instance`:`instances`}`}function $E(e,t,n){return n.trim()?t?`${t} of ${e} ${e===1?`instance`:`instances`} match.`:`No components match.`:``}function eD(e,t){let n=t?.detail?.id??null,r=t?.pageId??null;if(r!==e.pageId)return{pageId:r,selectedId:n,detailId:n,destroyed:null};let i=e.selectedId;return n&&n!==e.detailId&&n!==i&&(i=n),i&&t&&!t.truncated&&!tD(t.roots,i)?{pageId:r,selectedId:null,detailId:n,destroyed:i}:{pageId:r,selectedId:i,detailId:n,destroyed:null}}function tD(e,t){return e.some(e=>e.id===t||tD(e.children,t))}function nD(e,t,n){let r=e.indexOf(n);if(r<0)return null;for(let n=r+1;n=0;n--)if(t.has(e[n]))return e[n];return null}function rD(e){return new Date(e).toLocaleTimeString()}function iD(e,t){if(e&1&&(H(0,`p`,0),J(1),H(2,`code`),J(3),U(),J(4,` to keep more. `),H(5,`a`,1),J(6,`About limits`),U()()),e&2){let e=K();M(),X_(` Showing the latest `,e.max(),` `,e.what(),`. `,e.dropped(),` older `,e.dropped()===1?`entry was`:`entries were`,` dropped. Raise `),M(2),X(`limits.`,e.limit()),M(2),Vg(`href`,e.docsUrl,ku)}}var aD=`https://github.com/santoshyadavdev/angular-devtools/blob/main/apps/docs/src/content/getting-started/configuration.md#limits`,oD=class e{dropped=$(0);max=$.required();what=$.required();limit=$.required();docsUrl=aD;static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-limit-note`]],inputs:{dropped:[1,`dropped`],max:[1,`max`],what:[1,`what`],limit:[1,`limit`]},decls:1,vars:1,consts:[[1,`note`],[`target`,`_blank`,`rel`,`noopener noreferrer`,3,`href`]],template:function(e,t){e&1&&P(0,iD,7,6,`p`,0),e&2&&F(t.dropped()>0?0:-1)},styles:[`[_nghost-%COMP%] { + display: block; +} + +.note[_ngcontent-%COMP%] { + margin: 0 0 12px; + padding: 8px 12px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface); + color: var(--%NS%text-2); + line-height: 1.5; +} + +code[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); + color: var(--%NS%text); +} + +a[_ngcontent-%COMP%] { + color: var(--%NS%accent); + border-radius: 2px; +} + +a[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +}`]})},sD=(e,t)=>t.name,cD=(e,t)=>t.id;function lD(e,t){if(e&1){let e=W();z(0,`button`,12),G(`click`,function(){return k(e),A(K().clear())}),J(1,`Clear`),B()}}function uD(e,t){e&1&&(z(0,`p`,8),J(1,`This page can't record change detection. It needs Angular 20 or later.`),B())}function dD(e,t){if(e&1&&(z(0,`tr`)(1,`td`,16),J(2),B(),z(3,`td`,17),J(4),B(),z(5,`td`,17),J(6),B(),z(7,`td`,17),J(8),B()()),e&2){let e=t.$implicit,n=K(2);M(2),Y(e.name),M(2),Y(e.checks),M(2),Y(n.ms(e.ms)),M(2),Y(n.ms(e.maxMs))}}function fD(e,t){if(e&1&&(z(0,`span`,19),J(1,`after `),z(2,`span`,16),J(3),B()()),e&2){let e=K().$implicit;M(3),Y(e.trigger)}}function pD(e,t){if(e&1&&(z(0,`span`,20),J(1,` slowest `),z(2,`span`,16),J(3),B(),J(4),B()),e&2){let e=t,n=K(3);M(3),Y(e.name),M(),X(` `,n.ms(e.ms),` `)}}function mD(e,t){if(e&1&&(z(0,`li`)(1,`span`,18),J(2),B(),z(3,`span`,16),J(4),B(),z(5,`span`),J(6),B(),P(7,fD,4,1,`span`,19),P(8,pD,5,2,`span`,20),B()),e&2){let e,n=t.$implicit,r=K(2);M(2),Y(r.clock(n.at)),M(2),Y(r.ms(n.ms)),M(2),X_(` `,n.checks,` `,n.checks===1?`check`:`checks`,`, `,n.passes,` `,n.passes===1?`pass`:`passes`,` `),M(),F(n.trigger?7:-1),M(),F((e=n.components[0])?8:-1,e)}}function hD(e,t){if(e&1&&(z(0,`div`,10)(1,`div`)(2,`h3`),J(3,`Slowest components`),B(),z(4,`table`)(5,`thead`)(6,`tr`)(7,`th`,13),J(8,`Component`),B(),z(9,`th`,14),J(10,`Checks`),B(),z(11,`th`,14),J(12,`Self time`),B(),z(13,`th`,14),J(14,`Slowest`),B()()(),z(15,`tbody`),I(16,dD,9,4,`tr`,null,sD),B()()(),z(18,`div`)(19,`h3`),J(20,`Latest cycles`),B(),z(21,`ol`,15),I(22,mD,9,8,`li`,null,cD),B()()()),e&2){let e=K();M(16),L(e.slowest()),M(6),L(e.latest())}}function gD(e,t){e&1&&(z(0,`p`,11),J(1,`Use the app. Cycles show up here as Angular runs change detection.`),B())}var _D=10,vD=class e{page=$(null);pageId=$(null);rpc=$(null);message=j(``);recording=Q(()=>this.page()?.recording===!0);cycles=Q(()=>this.page()?.cycles??[]);maxCycles=Q(()=>tE(this.rpc()).limits.cdCycles);slowest=Q(()=>[...this.page()?.components??[]].sort((e,t)=>t.ms-e.ms).slice(0,_D));latest=Q(()=>this.cycles().slice(-30).reverse());status=Q(()=>{if(this.message())return this.message();let e=this.cycles().length;return this.recording()?`Recording. ${e} ${e===1?`cycle`:`cycles`} so far.`:e?`${e} ${e===1?`cycle`:`cycles`} recorded.`:``});ms(e){return`${e<10?e.toFixed(2):Math.round(e)} ms`}clock(e){return rD(e)}async toggle(){await this.send({on:!this.recording()},this.recording()?``:`Starting…`)}async clear(){await this.send({clear:!0},``)}async send(e,t){this.message.set(t);try{await QT(this.rpc(),`request-change-detection-record`,{pageId:this.pageId(),...e}),this.message.set(``)}catch{this.message.set(`Could not reach the page.`)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-cd-recording`]],inputs:{page:[1,`page`],pageId:[1,`pageId`],rpc:[1,`rpc`]},decls:16,vars:10,consts:[[`aria-labelledby`,`cd-heading`,1,`cd`],[1,`cd-head`],[`id`,`cd-heading`],[`type`,`button`,3,`click`,`disabled`],[`aria-hidden`,`true`,1,`dot`],[`type`,`button`],[`role`,`status`,1,`status`],[1,`hint`],[1,`note`],[`what`,`cycles`,`limit`,`cdCycles`,3,`dropped`,`max`],[1,`cd-grid`],[1,`empty`],[`type`,`button`,3,`click`],[`scope`,`col`],[`scope`,`col`,1,`num`],[`aria-label`,`Latest change detection cycles, newest first`,1,`cycles`],[1,`mono`],[1,`num`],[1,`when`],[1,`trigger`],[1,`top`]],template:function(e,t){e&1&&(z(0,`section`,0)(1,`div`,1)(2,`h2`,2),J(3,`Change detection`),B(),z(4,`button`,3),G(`click`,function(){return t.toggle()}),V(5,`span`,4),J(6),B(),P(7,lD,2,0,`button`,5),z(8,`p`,6),J(9),B()(),z(10,`p`,7),J(11,` Records each change detection cycle with Angular's profiler: how long it took, how many components it checked and the output that ran before it. Tree rows show how often each instance was checked. Times come from a development build. `),B(),P(12,uD,2,0,`p`,8),V(13,`app-limit-note`,9),P(14,hD,24,0,`div`,10)(15,gD,2,0,`p`,11),B()),e&2&&(M(4),q(`on`,t.recording()),R(`disabled`,!t.pageId()),M(2),X(` `,t.recording()?`Stop recording`:`Record`,` `),M(),F(t.cycles().length?7:-1),M(2),Y(t.status()),M(3),F(t.page()?.supported===!1?12:-1),M(),R(`dropped`,t.page()?.dropped??0)(`max`,t.maxCycles()),M(),F(t.slowest().length?14:t.recording()?15:-1))},dependencies:[oD],styles:[`[_nghost-%COMP%] { + display: block; + margin-top: 16px; +} + +.cd[_ngcontent-%COMP%] { + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + padding: 12px 14px; +} + +.cd-head[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px 12px; +} + +h2[_ngcontent-%COMP%] { + margin: 0; + font-size: 14px; + color: var(--%NS%text-strong); +} + +h3[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + margin: 12px 0 6px; +} + +button[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + gap: 8px; + height: var(--%NS%control-h); + padding: 0 12px; + background: var(--%NS%surface-2); + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + color: var(--%NS%text); + cursor: pointer; + font: inherit; + font-size: 13px; +} + +button[_ngcontent-%COMP%]:hover:not(:disabled) { + background: var(--%NS%surface-3); + border-color: var(--%NS%accent-line); +} + +button[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +button[_ngcontent-%COMP%]:disabled { + cursor: not-allowed; + opacity: 0.6; +} + +.dot[_ngcontent-%COMP%] { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--%NS%text-3); +} + +button.on[_ngcontent-%COMP%] .dot[_ngcontent-%COMP%] { + background: var(--%NS%danger); +} + +.status[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-2); + font-size: 12px; +} + +.hint[_ngcontent-%COMP%], +.note[_ngcontent-%COMP%], +.empty[_ngcontent-%COMP%] { + margin: 8px 0; + color: var(--%NS%text-2); + line-height: 1.5; +} + +.cd-grid[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: 0 16px; +} + +@media (min-width: 880px) { + .cd-grid[_ngcontent-%COMP%] { + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + } +} +table[_ngcontent-%COMP%] { + width: 100%; + border-collapse: collapse; + font-size: 12px; +} + +th[_ngcontent-%COMP%], +td[_ngcontent-%COMP%] { + padding: 4px 6px; + border-bottom: 1px solid var(--%NS%border); + text-align: left; +} + +th[_ngcontent-%COMP%] { + color: var(--%NS%text-2); + font-weight: 500; +} + +td.mono[_ngcontent-%COMP%] { + overflow-wrap: anywhere; +} + +.num[_ngcontent-%COMP%] { + text-align: right; + font-variant-numeric: tabular-nums; +} + +.mono[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); +} + +.cycles[_ngcontent-%COMP%] { + margin: 0; + padding: 0; + list-style: none; + font-size: 12px; +} + +.cycles[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 4px 10px; + padding: 4px 0; + border-bottom: 1px solid var(--%NS%border); + color: var(--%NS%text); +} + +.when[_ngcontent-%COMP%], +.trigger[_ngcontent-%COMP%], +.top[_ngcontent-%COMP%] { + color: var(--%NS%text-2); +} + +.trigger[_ngcontent-%COMP%] .mono[_ngcontent-%COMP%], +.top[_ngcontent-%COMP%] .mono[_ngcontent-%COMP%] { + overflow-wrap: anywhere; +}`]})},yD=()=>[],bD=(e,t)=>t.node.id,xD=(e,t)=>t.outlet+t.route,SD=(e,t)=>t.formId,CD=(e,t)=>t.name+e,wD=(e,t)=>t.name,TD=(e,t)=>t.token+e,ED=(e,t)=>t.id;function DD(e,t){return this.sourceKey(t)}function OD(e,t){if(e&1){let e=W();z(0,`span`,23),J(1,`Page`),B(),z(2,`app-select`,24),G(`valueChange`,function(t){return k(e),A(K(2).selectPage(t))}),B()}if(e&2){let e=K(2);M(2),R(`options`,e.pageOptions())(`value`,e.page()?.pageId??null)}}function kD(e,t){if(e&1&&(z(0,`p`,12),J(1),B()),e&2){let e=K(2);M(),Y(e.pickMessage())}}function AD(e,t){e&1&&(z(0,`p`,13),J(1,`The page has more components than the tree shows.`),B())}function jD(e,t){if(e&1){let e=W();z(0,`div`,16)(1,`p`,25),J(2),B(),z(3,`button`,26),G(`click`,function(){return k(e),A(K(2).setFilter(``))}),J(4,`Clear filter`),B()()}if(e&2){let e=K(2);M(2),X(`No components match “`,e.filter().trim(),`”`)}}function MD(e,t){if(e&1){let e=W();z(0,`span`,35),G(`click`,function(t){k(e);let n=K().$implicit;return A(K(2).toggle(n.node.id,t))}),fs(),z(1,`svg`,36),V(2,`path`,37),B()()}if(e&2){let e=K().$implicit;q(`open`,e.expanded)}}function ND(e,t){e&1&&V(0,`span`,29)}function PD(e,t){if(e&1&&(z(0,`span`,32),J(1),B()),e&2){let e=t.$implicit;M(),Y(e.route||`/`)}}function FD(e,t){if(e&1&&(z(0,`span`,33),J(1),z(2,`span`,15),J(3),B()()),e&2){let e=t;M(),X(` `,e),M(2),X(` `,e===1?`check`:`checks`,` while recording`)}}function ID(e,t){if(e&1&&(z(0,`span`,34),J(1),z(2,`span`,15),J(3),B()()),e&2){let e=K().$implicit;N(`title`,e.node.directives.join(`, `)),M(),X(` +`,e.node.directives.length,` `),M(2),X(` `,e.node.directives.length===1?`directive`:`directives`,` `)}}function LD(e,t){if(e&1){let e=W();z(0,`div`,27),G(`click`,function(){let t=k(e).$implicit;return A(K(2).select(t.node.id))})(`focus`,function(){let t=k(e).$implicit,n=K(2);return n.focusId.set(t.node.id),A(n.highlight(t.node.id))})(`blur`,function(){return k(e),A(K(2).highlight(null))})(`mouseenter`,function(){let t=k(e).$implicit;return A(K(2).highlight(t.node.id))})(`mouseleave`,function(){return k(e),A(K(2).highlight(null))}),P(1,MD,3,2,`span`,28)(2,ND,1,0,`span`,29),z(3,`span`,30),J(4),B(),z(5,`span`,31),J(6),B(),I(7,PD,2,1,`span`,32,xD),P(9,FD,4,2,`span`,33),P(10,ID,4,3,`span`,34),B()}if(e&2){let e,n=t.$implicit,r=K(2);C_(`--%NS%depth`,n.depth),q(`selected`,r.selectedId()===n.node.id),N(`aria-level`,n.depth+1)(`aria-expanded`,n.hasChildren?n.expanded:null)(`aria-selected`,r.selectedId()===n.node.id)(`tabindex`,r.rovingId()===n.node.id?0:-1)(`data-id`,n.node.id),M(),F(n.hasChildren?1:2),M(3),Y(n.node.name),M(2),X(`<`,n.node.tag,`>`),M(),L(r.routedById().get(n.node.id)??av(14,yD)),M(2),F((e=r.cdHosts()[n.node.id])?9:-1,e),M(),F(n.node.directives?.length?10:-1)}}function RD(e,t){if(e&1){let e=W();z(0,`button`,46),G(`click`,function(){let t=k(e).$implicit;return A(K(5).showForm.emit(t.formId))}),J(1),B()}if(e&2){let e=t.$implicit;M(),X(` Show `,e.label,` in Forms `)}}function zD(e,t){if(e&1&&(z(0,`div`,44),I(1,RD,2,1,`button`,45,SD),B()),e&2){let e=K(),t=K(3);M(),L(t.formsIn(e.file))}}function BD(e,t){if(e&1&&(z(0,`p`,43),J(1),B(),P(2,zD,3,0,`div`,44)),e&2){let e=t,n=K(3);M(),Z(``,e.file,`:`,e.line),M(),F(n.formsIn(e.file).length?2:-1)}}function VD(e,t){if(e&1&&(z(0,`dt`),J(1,`Routed`),B(),z(2,`dd`,48),J(3),B()),e&2){let e=t.$implicit;M(3),Z(``,e.route||`/`,` in outlet `,e.outlet)}}function HD(e,t){if(e&1&&(z(0,`span`,57),J(1),B()),e&2){let e=K().$implicit;M(),X(`(`,e.prop,`)`)}}function UD(e,t){if(e&1&&(z(0,`li`,55)(1,`span`,56),J(2),P(3,HD,2,1,`span`,57),B(),z(4,`pre`),J(5),uv(6,`json`),B()()),e&2){let e=t.$implicit;M(2),X(` `,e.name,` `),M(),F(e.prop===e.name?-1:3),M(2),Y(fv(6,3,e.value))}}function WD(e,t){if(e&1&&(z(0,`ul`,51),I(1,UD,7,5,`li`,55,wD),B()),e&2){let e=K();M(),L(e.inputs)}}function GD(e,t){e&1&&(z(0,`p`,52),J(1,`No inputs.`),B())}function KD(e,t){if(e&1&&(z(0,`li`,59)(1,`span`,48),J(2),B(),z(3,`span`,60),J(4),B()()),e&2){let e=t.$implicit;q(`on`,e.listened),M(2),Y(e.name),M(2),Y(e.listened?`listened`:`no listener`)}}function qD(e,t){if(e&1&&(z(0,`ul`,53),I(1,KD,5,4,`li`,58,wD),B()),e&2){let e=K();M(),L(e.outputs)}}function JD(e,t){e&1&&(z(0,`p`,52),J(1,`No outputs.`),B())}function YD(e,t){if(e&1&&(z(0,`span`,61),J(1),B()),e&2){let e=K().$implicit;M(),Y(e.kind)}}function XD(e,t){if(e&1&&(z(0,`li`,55)(1,`span`,56),J(2),P(3,YD,2,1,`span`,61),B(),z(4,`pre`),J(5),uv(6,`json`),B()()),e&2){let e=t.$implicit;M(2),X(` `,e.name,` `),M(),F(e.kind?3:-1),M(2),Y(fv(6,3,e.value))}}function ZD(e,t){if(e&1&&(z(0,`ul`,51),I(1,XD,7,5,`li`,55,wD),B()),e&2){let e=K();M(),L(e.properties)}}function QD(e,t){e&1&&(z(0,`p`,52),J(1,`No other properties.`),B())}function $D(e,t){if(e&1&&(z(0,`li`,62),J(1),B()),e&2){let e=t.$implicit;M(),Y(e)}}function eO(e,t){if(e&1&&(z(0,`div`,49)(1,`h3`),J(2,` DOM listeners `),z(3,`span`,50),J(4),B()(),z(5,`ul`,53),I(6,$D,2,1,`li`,62,wg),B()()),e&2){let e=K();M(4),Y(e.listeners.length),M(2),L(e.listeners)}}function tO(e,t){if(e&1&&(z(0,`li`,55)(1,`span`,56),J(2),B(),z(3,`pre`),J(4),uv(5,`json`),B()()),e&2){let e=t.$implicit;M(2),Y(e.name),M(2),Y(fv(5,2,e.value))}}function nO(e,t){if(e&1&&(z(0,`ul`,51),I(1,tO,6,4,`li`,55,wD),B()),e&2){let e=K().$implicit;M(),L(e.inputs)}}function rO(e,t){if(e&1&&(z(0,`li`,59)(1,`span`,48),J(2),B(),z(3,`span`,60),J(4),B()()),e&2){let e=t.$implicit;q(`on`,e.listened),M(2),Y(e.name),M(2),Y(e.listened?`listened`:`no listener`)}}function iO(e,t){if(e&1&&(z(0,`ul`,53),I(1,rO,5,4,`li`,58,wD),B()),e&2){let e=K().$implicit;M(),L(e.outputs)}}function aO(e,t){e&1&&(z(0,`p`,52),J(1,`No inputs or outputs.`),B())}function oO(e,t){if(e&1&&(z(0,`div`,49)(1,`h3`)(2,`span`,48),J(3),B(),z(4,`span`,61),J(5,`directive on host`),B()(),P(6,nO,3,0,`ul`,51),P(7,iO,3,0,`ul`,53),P(8,aO,2,0,`p`,52),B()),e&2){let e=t.$implicit;M(3),Y(e.name),M(3),F(e.inputs.length?6:-1),M(),F(e.outputs.length?7:-1),M(),F(!e.inputs.length&&!e.outputs.length?8:-1)}}function sO(e,t){if(e&1&&(z(0,`span`,61),J(1),B()),e&2){let e=t.$implicit;M(),Y(e)}}function cO(e,t){if(e&1&&(z(0,`span`,65),J(1,`from `),z(2,`span`,48),J(3),B()()),e&2){let e=K().$implicit;M(3),Y(e.providedByName??`an injector`)}}function lO(e,t){e&1&&(z(0,`span`,66),J(1,`not provided`),B())}function uO(e,t){if(e&1&&(z(0,`li`,63)(1,`span`,64),J(2),B(),I(3,sO,2,1,`span`,61,wg),P(5,cO,4,1,`span`,65)(6,lO,2,0,`span`,66),B()),e&2){let e=t.$implicit;M(2),Y(e.token),M(),L(e.flags),M(2),F(e.providedBy?5:6)}}function dO(e,t){if(e&1&&(z(0,`ul`,54),I(1,uO,7,2,`li`,63,TD),B()),e&2){let e=K();M(),L(e.dependencies)}}function fO(e,t){e&1&&(z(0,`p`,52),J(1,`Nothing is injected through the constructor or inject().`),B())}function pO(e,t){if(e&1&&(z(0,`dl`,47)(1,`dt`),J(2,`Change detection`),B(),z(3,`dd`),J(4),B(),z(5,`dt`),J(6,`Encapsulation`),B(),z(7,`dd`),J(8),B(),z(9,`dt`),J(10,`Host path`),B(),z(11,`dd`,48),J(12),B(),I(13,VD,4,2,null,null,xD),B(),z(15,`div`,49)(16,`h3`),J(17,` Inputs `),z(18,`span`,50),J(19),B()(),P(20,WD,3,0,`ul`,51)(21,GD,2,0,`p`,52),B(),z(22,`div`,49)(23,`h3`),J(24,` Outputs `),z(25,`span`,50),J(26),B()(),P(27,qD,3,0,`ul`,53)(28,JD,2,0,`p`,52),B(),z(29,`div`,49)(30,`h3`),J(31,` Properties `),z(32,`span`,50),J(33),B()(),P(34,ZD,3,0,`ul`,51)(35,QD,2,0,`p`,52),B(),P(36,eO,8,1,`div`,49),I(37,oO,9,4,`div`,49,CD),z(39,`div`,49)(40,`h3`),J(41,` Injected `),z(42,`span`,50),J(43),B()(),P(44,dO,3,0,`ul`,54)(45,fO,2,0,`p`,52),B()),e&2){let e=t,n=K(),r=K(2);M(4),Y(e.changeDetection??`Unknown`),M(4),Y(e.encapsulation??`Unknown`),M(4),Y(e.path),M(),L(r.routedById().get(n.id)??av(12,yD)),M(6),Y(e.inputs.length),M(),F(e.inputs.length?20:21),M(6),Y(e.outputs.length),M(),F(e.outputs.length?27:28),M(6),Y(e.properties?.length??0),M(),F(e.properties?.length?34:35),M(2),F(e.listeners.length?36:-1),M(),L(e.directives),M(6),Y(e.dependencies.length),M(),F(e.dependencies.length?44:45)}}function mO(e,t){e&1&&(z(0,`div`,42),V(1,`span`,67),z(2,`p`,68),J(3,`Reading live values from the page…`),B()())}function hO(e,t){if(e&1&&(z(0,`section`,19)(1,`header`,38)(2,`span`,39),J(3,`component`),B(),z(4,`h2`,40),J(5),B(),z(6,`span`,41),J(7),B(),P(8,BD,3,3),B(),P(9,pO,46,13)(10,mO,4,0,`div`,42),B()),e&2){let e,n,r=t,i=K(2);M(5),Y(r.name),M(2),X(`<`,r.tag,`>`),M(),F((e=i.sourceFor(r))?8:-1,e),M(),F((n=i.detail())?9:10,n)}}function gO(e,t){e&1&&(z(0,`p`,25),J(1,`The selected component was destroyed`),B(),z(2,`p`,68)(3,`span`,48),J(4),B(),J(5,` is no longer on the page. Select another component to see its live values. `),B()),e&2&&(M(4),Y(t))}function _O(e,t){e&1&&(z(0,`p`,68),J(1,` Select a component to see its live inputs, properties, outputs, change detection and injected services. `),B())}function vO(e,t){if(e&1&&(z(0,`div`,20),P(1,gO,6,1)(2,_O,2,0,`p`,68),B()),e&2){let e,t=K(2);M(),F((e=t.destroyed())?1:2,e)}}function yO(e,t){e&1&&(z(0,`span`,61),J(1,`hydrate never`),B())}function bO(e,t){if(e&1&&(z(0,`span`,61),J(1),B()),e&2){let e=K().$implicit;M(),Y(e.hydration)}}function xO(e,t){if(e&1){let e=W();z(0,`li`)(1,`button`,71),G(`click`,function(){let t=k(e).$implicit;return A(K(3).showOwner(t))})(`focus`,function(){let t=k(e).$implicit;return A(K(3).highlightBlock(t))})(`blur`,function(){return k(e),A(K(3).highlight(null))})(`mouseenter`,function(){let t=k(e).$implicit;return A(K(3).highlightBlock(t))})(`mouseleave`,function(){return k(e),A(K(3).highlight(null))}),z(2,`span`,30),J(3),B(),z(4,`span`,72),J(5),B(),P(6,yO,2,0,`span`,61)(7,bO,2,1,`span`,61),z(8,`span`,73),J(9),B()()()}if(e&2){let e=t.$implicit;M(),R(`disabled`,!e.owner),M(2),Y(e.owner?.name??`Unknown component`),M(),w_(`state-`+e.state),M(),Y(e.state),M(),F(e.hydrateNever?6:e.hydration===`not-configured`?-1:7),M(3),Y(e.triggers.join(`, `)||`no triggers`)}}function SO(e,t){if(e&1&&(z(0,`section`,21)(1,`h2`,69),J(2,` Defer blocks `),z(3,`span`,50),J(4),B()(),z(5,`ul`,70),I(6,xO,10,7,`li`,null,ED),B()()),e&2){let e=K(2);M(4),Y(e.deferBlocks().length),M(2),L(e.deferBlocks())}}function CO(e,t){if(e&1&&V(0,`app-cd-recording`,22),e&2){let e=K(2);R(`page`,e.cdPage())(`pageId`,e.page().pageId)(`rpc`,e.rpc())}}function wO(e,t){if(e&1){let e=W();z(0,`p`,0),J(1,` Every component instance on the page, in the order Angular rendered them. Hover a row to highlight its host in the page, and select it to read its live inputs, properties, outputs and injected services. `),B(),z(2,`div`,1)(3,`div`,2),fs(),z(4,`svg`,3),V(5,`circle`,4)(6,`path`,5),B(),ps(),z(7,`input`,6),G(`input`,function(t){return k(e),A(K().setFilter(t.target.value))})(`keydown.escape`,function(){return k(e),A(K().setFilter(``))}),B()(),P(8,OD,3,2),z(9,`span`,7),J(10),B(),z(11,`button`,8),G(`click`,function(){k(e);let t=K();return A(t.picking()?t.cancelPick():t.pick())}),fs(),z(12,`svg`,9),V(13,`path`,10),B(),J(14),B()(),ps(),z(15,`p`,11),J(16),B(),P(17,kD,2,1,`p`,12),P(18,AD,2,0,`p`,13),z(19,`div`,14)(20,`div`)(21,`h2`,15),J(22,`Component tree`),B(),P(23,jD,5,1,`div`,16),z(24,`div`,17),G(`keydown`,function(t){return k(e),A(K().onTreeKey(t))}),I(25,LD,11,15,`div`,18,bD),B()(),P(27,hO,11,4,`section`,19)(28,vO,3,1,`div`,20),B(),P(29,SO,8,1,`section`,21),P(30,CO,1,3,`app-cd-recording`,22)}if(e&2){let e,t=K();M(7),R(`value`,t.filter()),M(),F(t.pageOptions().length>1?8:-1),M(2),Y(t.countLabel()),M(),q(`on`,t.picking()),M(3),X(` `,t.picking()?`Cancel pick`:`Pick component on page`,` `),M(2),Y(t.announcement()),M(),F(t.pickMessage()?17:-1),M(),F(t.page().truncated?18:-1),M(5),F(t.rows().length?-1:23),M(),R(`hidden`,!t.rows().length),M(),L(t.rows()),M(2),F((e=t.selectedNode())?27:28,e),M(2),F(t.deferBlocks().length?29:-1),M(),F(t.staticReport()?-1:30)}}function TO(e,t){e&1&&(z(0,`p`,74),J(1,` The page reported no component instances. The live tree needs a development build with Angular's debug API. Showing what the source declares instead. `),B())}function EO(e,t){e&1&&(z(0,`p`,13),J(1,` No page is connected, so this lists what the source declares. Open the app in a browser with the devtools connected to see each rendered instance. `),B())}function DO(e,t){if(e&1&&J(0),e&2){let e=K(3);Z(` `,e.filteredSource().length,` of `,e.source().length,` `)}}function OO(e,t){if(e&1&&J(0),e&2){let e=K(3);X_(` `,e.sourceCounts().components,` `,e.sourceCounts().components===1?`component`:`components`,` · `,e.sourceCounts().directives,` `,e.sourceCounts().directives===1?`directive`:`directives`,` `)}}function kO(e,t){if(e&1&&(z(0,`span`,76),P(1,DO,1,2)(2,OO,1,4),B()),e&2){let e=K(2);M(),F(e.filter().trim()?1:2)}}function AO(e,t){e&1&&(z(0,`div`,80),V(1,`span`,67),z(2,`p`,25),J(3,`Scanning components…`),B()())}function jO(e,t){e&1&&(J(0,` Run `),z(1,`code`),J(2,`ng-devtools build`),B(),J(3,` again to rebuild the report. `))}function MO(e,t){e&1&&J(0,` Check that the dev server is running, then try again. `)}function NO(e,t){if(e&1){let e=W();z(0,`div`,81)(1,`p`,25),J(2,`Could not load components`),B(),z(3,`p`,68),P(4,jO,4,0)(5,MO,1,0),B(),z(6,`button`,26),G(`click`,function(){return k(e),A(K(2).refresh())}),J(7,`Retry`),B()()}if(e&2){let e=K(2);M(4),F(e.staticReport()?4:5)}}function PO(e,t){e&1&&(z(0,`div`,72)(1,`p`,25),J(2,`No components found`),B(),z(3,`p`,68),J(4,`No @Component or @Directive was found in the source.`),B()())}function FO(e,t){if(e&1){let e=W();z(0,`div`,72)(1,`p`,25),J(2),B(),z(3,`button`,26),G(`click`,function(){return k(e),A(K(2).filter.set(``))}),J(4,`Clear filter`),B()()}if(e&2){let e=K(2);M(2),X(`No components match “`,e.filter().trim(),`”`)}}function IO(e,t){if(e&1&&J(0),e&2){let e=K().$implicit;X(` `,K(3).bareName(e.className),` · `)}}function LO(e,t){if(e&1&&(z(0,`dt`),J(1,`Change detection`),B(),z(2,`dd`),J(3),B()),e&2){let e=K(2).$implicit;M(3),Y(e.changeDetection??`Unknown`)}}function RO(e,t){if(e&1){let e=W();z(0,`button`,46),G(`click`,function(){let t=k(e).$implicit;return A(K(5).showForm.emit(t.formId))}),J(1),B()}if(e&2){let e=t.$implicit;M(),X(` Show `,e.label,` in Forms `)}}function zO(e,t){if(e&1&&(z(0,`div`,91)(1,`dl`,47)(2,`dt`),J(3,`Class`),B(),z(4,`dd`,48),J(5),B(),z(6,`dt`),J(7,`File`),B(),z(8,`dd`,48),J(9),B(),z(10,`dt`),J(11,`Standalone`),B(),z(12,`dd`),J(13),B(),P(14,LO,4,1),z(15,`dt`),J(16,`Inputs`),B(),z(17,`dd`,48),J(18),B(),z(19,`dt`),J(20,`Outputs`),B(),z(21,`dd`,48),J(22),B()(),I(23,RO,2,1,`button`,45,SD),B()),e&2){let e=K(),t=e.$implicit,n=e.$index,r=K(3);R(`id`,`ct-source-`+n),M(5),Y(r.bareName(t.className)),M(4),Z(``,t.file,`:`,t.line),M(4),Y(t.isStandalone?`Yes`:`No`),M(),F(t.kind===`component`?14:-1),M(4),Y(t.inputs.join(`, `)||`None`),M(4),Y(t.outputs.join(`, `)||`None`),M(),L(r.formsIn(t.file))}}function BO(e,t){if(e&1){let e=W();z(0,`li`,84)(1,`button`,85),G(`click`,function(){let t=k(e).$implicit,n=K(3);return A(n.openKey.set(n.openKey()===n.sourceKey(t)?null:n.sourceKey(t)))}),z(2,`span`,86),J(3),B(),z(4,`span`,87)(5,`span`,88),J(6),B(),z(7,`span`,89),P(8,IO,1,1),J(9),B()(),fs(),z(10,`svg`,90),V(11,`path`,37),B()(),P(12,zO,25,8,`div`,91),B()}if(e&2){let e=t.$implicit,n=t.$index,r=K(3);q(`expanded`,r.openKey()===r.sourceKey(e)),M(),N(`aria-expanded`,r.openKey()===r.sourceKey(e))(`aria-controls`,r.openKey()===r.sourceKey(e)?`ct-source-`+n:null),M(),q(`directive`,e.kind===`directive`),M(),Y(e.kind),M(3),Y(r.sourceLabel(e)),M(2),F(e.selector?8:-1),M(),Z(` `,e.file,`:`,e.line,` `),M(3),F(r.openKey()===r.sourceKey(e)?12:-1)}}function VO(e,t){if(e&1&&(z(0,`ul`,82),I(1,BO,13,12,`li`,83,DD,!0),B()),e&2){let e=K(2);M(),L(e.filteredSource())}}function HO(e,t){if(e&1){let e=W();P(0,TO,2,0,`p`,74)(1,EO,2,0,`p`,13),z(2,`div`,1)(3,`div`,2),fs(),z(4,`svg`,3),V(5,`circle`,4)(6,`path`,5),B(),ps(),z(7,`input`,75),G(`input`,function(t){return k(e),A(K().filter.set(t.target.value))})(`keydown.escape`,function(){return k(e),A(K().filter.set(``))}),B()(),P(8,kO,3,1,`span`,76),z(9,`button`,77),G(`click`,function(){return k(e),A(K().refresh())}),fs(),z(10,`svg`,9),V(11,`path`,78)(12,`path`,79),B(),J(13,` Refresh `),B()(),P(14,AO,4,0,`div`,80)(15,NO,8,1,`div`,81)(16,PO,5,0,`div`,72)(17,FO,5,1,`div`,72)(18,VO,3,0,`ul`,82)}if(e&2){let e=K();F(+!e.page()),M(7),R(`value`,e.filter()),M(),F(e.source().length?8:-1),M(),q(`spinning`,e.loading()),N(`aria-busy`,e.loading()),M(5),F(e.loading()&&!e.source().length?14:e.error()&&!e.source().length?15:e.source().length?e.filteredSource().length?18:17:16)}}function UO(e){return e.replace(/^_(?=[A-Z])/,``)}var WO=class e{rpc=$(null);staticReport=Q(()=>eE(this.rpc()));focus=$(null);showForm=Dv();focusHandled=Dv();filter=j(``);loading=j(!1);error=j(!1);source=j([]);formOwners=j([]);pages=j({});chosenPageId=j(null);selectedId=j(null);destroyed=j(null);announcement=j(``);picking=j(!1);pickMessage=j(``);focusId=j(null);collapsed=j(new Set);openKey=j(null);outlets=j([]);pageId=JT();destroyRef=E(Cs);injector=E(xs);host=E(Ml);cleanups=[];selection={pageId:null,detailId:null};shownPageId=wv({source:()=>({pages:this.pages(),chosen:this.chosenPageId()}),computation:({pages:e,chosen:t},n)=>YT(e,{chosen:t,host:this.pageId,previous:n?.value??null})});page=Q(()=>{let e=this.shownPageId();return e?this.pages()[e]??null:null});pageOptions=Q(()=>Object.values(this.pages()).map(e=>({value:e.pageId,label:e.title||e.url||`Page ${e.pageId}`,hint:e.url})));live=Q(()=>(this.page()?.roots.length??0)>0);cdPages=j({});cdPage=Q(()=>{let e=this.page()?.pageId;return e?this.cdPages()[e]??null:null});cdHosts=Q(()=>this.cdPage()?.hosts??{});index=Q(()=>{let e=new Map,t=new Map,n=(r,i)=>{for(let a of r)e.set(a.id,a),i&&t.set(a.id,i),n(a.children,a.id)};return n(this.page()?.roots??[],null),{map:e,parents:t}});query=Q(()=>this.filter().trim().toLowerCase());filtered=Q(()=>ZE(this.page()?.roots??[],this.query()));deferBlocks=Q(()=>this.page()?.deferBlocks??[]);countLabel=Q(()=>QE(this.page()?.count??0,this.filtered().matches,!!this.query()));rows=Q(()=>{let e=[],t=this.collapsed(),n=!!this.query(),r=(i,a)=>{for(let o of i){let i=n||!t.has(o.id);e.push({node:o,depth:a,hasChildren:o.children.length>0,expanded:i}),i&&r(o.children,a+1)}};return r(this.filtered().nodes,0),e});selectedNode=Q(()=>{let e=this.selectedId();return e?this.index().map.get(e)??null:null});detail=Q(()=>{let e=this.page()?.detail;return e&&e.id===this.selectedId()?e:null});rovingId=Q(()=>{let e=this.rows(),t=new Set(e.map(e=>e.node.id)),n=this.focusId();if(n&&t.has(n))return n;let r=this.selectedId();return r&&t.has(r)?r:e[0]?.node.id??null});routedById=Q(()=>{let e=new Map,t=n=>{for(let r of n){if(r.activated&&r.devtoolsId){let t=e.get(r.devtoolsId)??[];t.push({route:r.route??``,outlet:r.outlet}),e.set(r.devtoolsId,t)}r.children&&t(r.children)}};return t(this.outlets()),e});sourceByClass=Q(()=>{let e=new Map;for(let t of this.source()){let n=UO(t.className);e.set(n,[...e.get(n)??[],t])}return e});filteredSource=Q(()=>{let e=this.query(),t=this.source();return e?t.filter(t=>t.selector.toLowerCase().includes(e)||t.className.toLowerCase().includes(e)||t.file.toLowerCase().includes(e)):t});sourceCounts=Q(()=>{let e=this.source().filter(e=>e.kind===`component`).length;return{components:e,directives:this.source().length-e}});constructor(){uc(()=>{let e=this.rpc();e&&(this.refresh(),this.watch(e))}),uc(()=>{let e=this.focus();e&&this.live()&&Sv(()=>{this.index().map.has(e.id)&&this.reveal(e.id),this.focusHandled.emit()})}),this.destroyRef.onDestroy(()=>{this.highlight(null);for(let e of this.cleanups.splice(0))e()})}async watch(e){for(let e of this.cleanups.splice(0))e();let t=e.scope(`ng-devtools`);try{let e=await t.rpc.sharedState(`component-tree`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e?.pages;this.applyPages(t&&typeof t==`object`?t:{})};n(e.value()),this.cleanups.push(e.on(`updated`,n))}catch{this.applyPages({})}try{let e=await t.rpc.sharedState(`change-detection`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e?.pages;this.cdPages.set(t&&typeof t==`object`?t:{})};n(e.value()),this.cleanups.push(e.on(`updated`,n))}catch{this.cdPages.set({})}try{let e=await t.rpc.sharedState(`router`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e?.pages??[],n=this.pageId?t.find(e=>e.pageId===this.pageId):t.find(e=>e.snapshot)??t[0];this.outlets.set(n?.outlets??[])};n(e.value()),this.cleanups.push(e.on(`updated`,n))}catch{this.outlets.set([])}}async refresh(){let e=this.rpc();if(!e)return;this.loading.set(!0);let t=e.scope(`ng-devtools`);try{this.source.set(await t.rpc.call(`get-components`)),this.error.set(!1)}catch{this.error.set(!0)}finally{this.loading.set(!1)}let n=await t.rpc.call(`forms-owners`).catch(()=>[]);this.formOwners.set(n??[])}formsIn(e){return this.formOwners().filter(t=>t.file===e)}sourceFor(e){let t=(this.sourceByClass().get(UO(e.name))??[]).filter(e=>e.kind===`component`);return t.find(t=>t.selector===e.tag)??t[0]??null}sourceKey(e){return`${e.file}#${e.className}`}sourceLabel(e){return e.selector?e.kind===`component`&&/^[a-z][\w-]*$/i.test(e.selector)?`<${e.selector}>`:e.selector:UO(e.className)}bareName(e){return UO(e)}applyPages(e){let t=document.activeElement,n=t instanceof HTMLElement&&this.host.nativeElement.contains(t)?t.closest(`.row`)?.dataset.id??null:null,r=n?this.rows().map(e=>e.node.id):[],i=this.index().map;if(this.pages.set(e),this.syncSelection(i),!n)return;let a=new Set(this.rows().map(e=>e.node.id));if(a.has(n))return;let o=nD(r,a,n);o&&(this.focusId.set(o),Id(()=>this.rowElement(o)?.focus(),{injector:this.injector}))}syncSelection(e=this.index().map){let t=this.page(),n=eD({...this.selection,selectedId:this.selectedId()},t?{pageId:t.pageId,roots:t.roots,detail:t.detail,truncated:t.truncated}:null),r=n.destroyed?e.get(n.destroyed)?.name:void 0;this.selection={pageId:n.pageId,detailId:n.detailId},n.selectedId!==this.selectedId()&&this.selectedId.set(n.selectedId),n.selectedId&&this.destroyed.set(null),n.destroyed&&(this.destroyed.set(r??`The component`),this.announcement.set(`The selected component was destroyed.`),this.sendSelection(null))}selectPage(e){e&&(this.chosenPageId.set(e),this.destroyed.set(null),this.syncSelection())}setFilter(e){this.filter.set(e);let{matches:t}=this.filtered();this.announcement.set($E(this.page()?.count??0,t,e))}async pick(){let e=this.rpc();if(!e||this.picking())return;this.picking.set(!0),this.say(`Click a component in the app. Press Escape to cancel.`);let t=await e.scope(`ng-devtools`).rpc.call(`request-component-pick`,{pageId:this.page()?.pageId}).catch(()=>({ok:!1,error:`Could not reach the devtools server.`}));if(this.picking.set(!1),!t?.ok||!t.id){this.say(t?.error??`No component was picked.`);return}t.pageId&&t.pageId!==this.page()?.pageId&&this.selectPage(t.pageId),this.say(`Picked ${t.name??`a component`}.`),this.destroyed.set(null),this.index().map.has(t.id)?this.reveal(t.id):this.selectedId.set(t.id)}cancelPick(){let e=this.rpc();e&&this.picking()&&e.scope(`ng-devtools`).rpc.call(`cancel-component-pick`,{pageId:this.page()?.pageId}).catch(()=>{})}say(e){this.pickMessage.set(e),this.announcement.set(e)}sendSelection(e){let t=this.rpc();t&&t.scope(`ng-devtools`).rpc.call(`select-component`,{pageId:this.page()?.pageId,id:e}).catch(()=>{})}rowElement(e){return this.host.nativeElement.querySelector(`.row[data-id="${CSS.escape(e)}"]`)}select(e){let t=this.selectedId()===e?null:e;this.selectedId.set(t),this.destroyed.set(null),this.focusId.set(e),this.sendSelection(t)}reveal(e){let{parents:t}=this.index();this.collapsed.update(n=>{let r=new Set(n);for(let n=t.get(e);n;n=t.get(n))r.delete(n);return r}),this.rows().some(t=>t.node.id===e)||this.setFilter(``),this.selectedId()!==e&&this.select(e),Id(()=>document.querySelector(`.row[data-id="${CSS.escape(e)}"]`)?.scrollIntoView({block:`nearest`}),{injector:this.injector})}toggle(e,t){t?.stopPropagation(),!this.query()&&this.collapsed.update(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})}highlight(e){let t=this.rpc();if(!t)return;let n=e?{pageId:this.page()?.pageId,id:e}:null;t.scope(`ng-devtools`).rpc.call(`request-page-highlight`,n).catch(()=>{})}highlightBlock(e){this.highlight(e.rootIds[0]??e.owner?.id??null)}showOwner(e){e.owner&&this.index().map.has(e.owner.id)&&this.reveal(e.owner.id)}onTreeKey(e){let t=this.rows();if(!t.length)return;let n=t.findIndex(e=>e.node.id===this.rovingId()),r=Math.max(n,0),i=t[r],a=-1;switch(e.key){case`ArrowDown`:a=Math.min(r+1,t.length-1);break;case`ArrowUp`:a=Math.max(r-1,0);break;case`Home`:a=0;break;case`End`:a=t.length-1;break;case`ArrowRight`:i.hasChildren&&!i.expanded?this.toggle(i.node.id):i.hasChildren&&(a=r+1);break;case`ArrowLeft`:if(i.hasChildren&&i.expanded&&!this.query())this.toggle(i.node.id);else{let e=this.index().parents.get(i.node.id);a=t.findIndex(t=>t.node.id===e)}break;case`Enter`:case` `:this.select(i.node.id);break;default:return}if(e.preventDefault(),a>=0){let e=t[a].node.id;this.focusId.set(e),queueMicrotask(()=>{let t=document.querySelector(`.row[data-id="${CSS.escape(e)}"]`);t?.focus(),t?.scrollIntoView({block:`nearest`})})}}static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-component-tree`]],hostBindings:function(e,t){e&1&&G(`keydown.escape`,function(){return t.cancelPick()})},inputs:{rpc:[1,`rpc`],focus:[1,`focus`]},outputs:{showForm:`showForm`,focusHandled:`focusHandled`},decls:2,vars:1,consts:[[1,`intro`],[1,`toolbar`],[1,`search`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`search-icon`],[`cx`,`11`,`cy`,`11`,`r`,`7`],[`d`,`m20 20-3.5-3.5`],[`type`,`search`,`placeholder`,`Filter by class, tag or directive…`,`aria-label`,`Filter components by class, tag or directive`,`autocomplete`,`off`,`spellcheck`,`false`,3,`input`,`keydown.escape`,`value`],[1,`count`],[`type`,`button`,1,`pick`,3,`click`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`d`,`M4 4l6.5 16 2.3-6.7L19.5 11z`],[`role`,`status`,1,`sr-only`],[1,`pick-message`],[1,`notice`],[1,`layout`],[1,`sr-only`],[1,`state`,`compact`,`tree`],[`role`,`tree`,`aria-label`,`Component instances`,1,`tree`,3,`keydown`,`hidden`],[`role`,`treeitem`,1,`row`,3,`selected`,`--%NS%depth`],[`aria-labelledby`,`ct-detail-title`,1,`detail`],[1,`detail`,`placeholder`],[`aria-labelledby`,`ct-defer-title`,1,`defer`],[3,`page`,`pageId`,`rpc`],[`id`,`ct-page-label`,1,`sr-only`],[`labelledBy`,`ct-page-label`,1,`page-select`,3,`valueChange`,`options`,`value`],[1,`state-title`],[`type`,`button`,3,`click`],[`role`,`treeitem`,1,`row`,3,`click`,`focus`,`blur`,`mouseenter`,`mouseleave`],[`aria-hidden`,`true`,1,`twisty`,3,`open`],[`aria-hidden`,`true`,1,`twisty-space`],[1,`name`,`mono`],[1,`tag`,`mono`],[1,`routed`],[1,`checks`],[1,`dirs`],[`aria-hidden`,`true`,1,`twisty`,3,`click`],[`viewBox`,`0 0 24 24`],[`d`,`m9 6 6 6-6 6`],[1,`detail-head`],[1,`badge`],[`id`,`ct-detail-title`,1,`mono`],[1,`mono`,`muted`],[`role`,`status`,1,`state`,`compact`],[1,`where`,`mono`],[1,`actions`],[`type`,`button`,1,`show-form`],[`type`,`button`,1,`show-form`,3,`click`],[1,`facts`],[1,`mono`],[1,`block`],[1,`pill`],[1,`props`],[1,`empty-line`],[1,`chips`],[1,`deps`],[1,`prop`],[1,`prop-name`,`mono`],[1,`muted`],[1,`chip`,3,`on`],[1,`chip`],[1,`chip-note`],[1,`flag`],[1,`chip`,`mono`],[1,`dep`],[1,`token`,`mono`],[1,`from`],[1,`from`,`missing`],[`aria-hidden`,`true`,1,`spinner`],[1,`state-hint`],[`id`,`ct-defer-title`,1,`defer-title`],[1,`defer-list`],[`type`,`button`,1,`defer-row`,3,`click`,`focus`,`blur`,`mouseenter`,`mouseleave`,`disabled`],[1,`state`],[1,`triggers`,`mono`],[`role`,`status`,1,`notice`],[`type`,`search`,`placeholder`,`Filter by selector, class or file…`,`aria-label`,`Filter components by selector, class or file`,`autocomplete`,`off`,`spellcheck`,`false`,3,`input`,`keydown.escape`,`value`],[`aria-live`,`polite`,1,`count`],[`type`,`button`,1,`refresh`,3,`click`],[`d`,`M20 12a8 8 0 1 1-2.34-5.66`],[`d`,`M20 4v5h-5`],[`role`,`status`,1,`state`],[`role`,`alert`,1,`state`],[`role`,`list`,1,`source-list`],[1,`source-item`,3,`expanded`],[1,`source-item`],[`type`,`button`,1,`source-toggle`,3,`click`],[1,`kind-flag`],[1,`row-main`],[1,`selector`,`mono`],[1,`file`,`mono`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`chevron`],[1,`inline-detail`,3,`id`]],template:function(e,t){e&1&&P(0,wO,31,14)(1,HO,19,7),e&2&&F(+!t.live())},dependencies:[XE,vD,ib],styles:[`[_nghost-%COMP%] { + display: block; + color: var(--%NS%text); + font-size: 13px; +} + +.mono[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); +} + +.muted[_ngcontent-%COMP%] { + color: var(--%NS%text-2); +} + +.intro[_ngcontent-%COMP%] { + max-width: 720px; + margin: 0 0 12px; + color: var(--%NS%text-2); + line-height: 1.5; +} + +.notice[_ngcontent-%COMP%] { + margin: 0 0 12px; + padding: 10px 12px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface); + color: var(--%NS%text-2); + line-height: 1.5; +} + +.toolbar[_ngcontent-%COMP%] { + position: sticky; + top: 0; + z-index: 2; + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px 12px; + margin: 0 0 12px; + padding: 8px; + background: color-mix(in srgb, var(--%NS%surface) 85%, transparent); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); +} + +.search[_ngcontent-%COMP%] { + position: relative; + flex: 1 1 220px; + min-width: 0; +} + +.search-icon[_ngcontent-%COMP%] { + position: absolute; + top: 50%; + left: 12px; + width: 14px; + height: 14px; + transform: translateY(-50%); + fill: none; + stroke: var(--%NS%text-3); + stroke-width: 2.2; + stroke-linecap: round; + pointer-events: none; +} + +.search[_ngcontent-%COMP%]:focus-within .search-icon[_ngcontent-%COMP%] { + stroke: var(--%NS%accent); +} + +input[type=search][_ngcontent-%COMP%] { + width: 100%; + height: 34px; + padding: 0 12px 0 34px; + background: var(--%NS%bg); + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + color: var(--%NS%text); + font: inherit; + font-size: 13px; +} + +input[type=search][_ngcontent-%COMP%]::placeholder { + color: var(--%NS%text-3); +} + +input[type=search][_ngcontent-%COMP%]:focus-visible { + outline: none; + border-color: var(--%NS%accent); + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +.count[_ngcontent-%COMP%] { + flex: none; + color: var(--%NS%text-2); + font-size: 12px; + font-variant-numeric: tabular-nums; + white-space: nowrap; +} + +button[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + height: 34px; + padding: 0 14px; + background: var(--%NS%surface-2); + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + color: var(--%NS%text); + cursor: pointer; + font: inherit; + font-size: 13px; + font-weight: 500; + transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease); +} + +button[_ngcontent-%COMP%]:hover { + background: var(--%NS%surface-3); + border-color: var(--%NS%accent-line); +} + +button[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +button[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] { + flex: none; + width: 14px; + height: 14px; + fill: none; + stroke: currentColor; + stroke-width: 2.2; + stroke-linecap: round; + stroke-linejoin: round; +} + +.refresh.spinning[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] { + animation: spin 0.8s linear infinite; +} + +.page-select[_ngcontent-%COMP%] { + flex: 0 1 220px; + min-width: 0; +} + +.pick.on[_ngcontent-%COMP%] { + background: var(--%NS%accent-soft); + border-color: var(--%NS%accent-line); + color: var(--%NS%text-strong); +} + +.defer[_ngcontent-%COMP%] { + margin-top: 16px; +} + +.defer-title[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + display: flex; + align-items: center; + gap: 6px; + margin: 0 0 8px; +} + +.defer-list[_ngcontent-%COMP%] { + display: grid; + gap: 6px; + margin: 0; + padding: 0; + list-style: none; +} + +.defer-row[_ngcontent-%COMP%] { + justify-content: flex-start; + flex-wrap: wrap; + width: 100%; + height: auto; + min-height: var(--%NS%control-h); + padding: 6px 12px; + background: var(--%NS%surface); + border-color: var(--%NS%border); + text-align: left; +} + +.defer-row[_ngcontent-%COMP%]:disabled { + cursor: default; +} + +.state[_ngcontent-%COMP%] { + padding: 0 8px; + border-radius: 99px; + background: var(--%NS%surface-3); + color: var(--%NS%text-2); + font-size: 11px; + line-height: 18px; +} + +.state-complete[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); + color: var(--%NS%ok); +} + +.state-error[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + color: var(--%NS%danger); +} + +.state-loading[_ngcontent-%COMP%], +.state-placeholder[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); + background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); + color: var(--%NS%warn); +} + +.triggers[_ngcontent-%COMP%] { + min-width: 0; + color: var(--%NS%text-2); + font-size: 12px; + overflow: hidden; + min-width: 0; + text-overflow: ellipsis; + white-space: nowrap; +} + +.pick-message[_ngcontent-%COMP%] { + margin: 0 0 12px; + color: var(--%NS%text-2); + line-height: 1.5; +} + +.layout[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: 12px; + align-items: start; +} + +@media (min-width: 880px) { + .layout[_ngcontent-%COMP%] { + grid-template-columns: minmax(0, 1fr) minmax(340px, 44%); + } + .detail[_ngcontent-%COMP%] { + position: sticky; + top: 64px; + max-height: calc(100vh - 150px); + overflow: auto; + } +} +.tree[_ngcontent-%COMP%] { + min-width: 0; + padding: 6px; + background: var(--%NS%surface); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + animation: enter 0.35s var(--%NS%ease) both; +} + +.row[_ngcontent-%COMP%] { + position: relative; + display: flex; + align-items: center; + gap: 6px; + min-height: 32px; + padding: 0 8px 0 calc(4px + var(--%NS%depth, 0) * 18px); + border-radius: var(--%NS%radius-sm); + cursor: pointer; + transition: background-color 120ms var(--%NS%ease); +} + +.row[_ngcontent-%COMP%]::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 14px; + width: calc(var(--%NS%depth, 0) * 18px); + background: repeating-linear-gradient(to right, var(--%NS%border) 0 1px, transparent 1px 18px); + pointer-events: none; +} + +.row[_ngcontent-%COMP%]:hover { + background: var(--%NS%surface-2); +} + +.row[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: -2px; +} + +.row.selected[_ngcontent-%COMP%] { + background: var(--%NS%accent-soft); + box-shadow: inset 2px 0 0 var(--%NS%accent); +} + +.twisty[_ngcontent-%COMP%], +.twisty-space[_ngcontent-%COMP%] { + flex: none; + width: 20px; + height: 20px; +} + +.twisty[_ngcontent-%COMP%] { + display: grid; + place-items: center; + border-radius: 4px; + color: var(--%NS%text-3); +} + +.twisty[_ngcontent-%COMP%]:hover { + color: var(--%NS%text); + background: var(--%NS%surface-3); +} + +.twisty[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] { + width: 14px; + height: 14px; + fill: none; + stroke: currentColor; + stroke-width: 2.2; + stroke-linecap: round; + stroke-linejoin: round; + transition: transform 150ms var(--%NS%ease); +} + +.twisty.open[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] { + transform: rotate(90deg); +} + +.name[_ngcontent-%COMP%] { + min-width: 0; + color: var(--%NS%text-strong); + font-size: 12px; + font-weight: 600; + overflow: hidden; + min-width: 0; + text-overflow: ellipsis; + white-space: nowrap; +} + +.tag[_ngcontent-%COMP%] { + flex: 0 1 auto; + min-width: 0; + color: var(--%NS%text-2); + font-size: 12px; + overflow: hidden; + min-width: 0; + text-overflow: ellipsis; + white-space: nowrap; +} + +.routed[_ngcontent-%COMP%] { + flex: none; + max-width: 40%; + padding: 0 8px; + border: 1px solid var(--%NS%accent-line); + border-radius: 99px; + background: var(--%NS%accent-soft); + color: var(--%NS%accent); + font-family: var(--%NS%font-mono); + font-size: 11px; + line-height: 18px; + overflow: hidden; + min-width: 0; + text-overflow: ellipsis; + white-space: nowrap; +} + +.checks[_ngcontent-%COMP%] { + flex: none; + margin-left: auto; + padding: 0 7px; + border-radius: 99px; + background: var(--%NS%accent-soft); + color: var(--%NS%text); + font-size: 11px; + line-height: 18px; + font-variant-numeric: tabular-nums; +} + +.checks[_ngcontent-%COMP%] + .dirs[_ngcontent-%COMP%] { + margin-left: 0; +} + +.dirs[_ngcontent-%COMP%] { + flex: none; + margin-left: auto; + padding: 0 7px; + border-radius: 99px; + background: var(--%NS%surface-3); + color: var(--%NS%text-2); + font-size: 11px; + line-height: 18px; +} + +.detail[_ngcontent-%COMP%] { + min-width: 0; + background: var(--%NS%surface); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + animation: enter 0.35s var(--%NS%ease) both; +} + +.detail.placeholder[_ngcontent-%COMP%] { + padding: 24px 16px; + border-style: dashed; + text-align: center; +} + +.detail-head[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 6px 10px; + padding: 14px 16px; + border-bottom: 1px solid var(--%NS%border); +} + +.detail-head[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] { + min-width: 0; + margin: 0; + color: var(--%NS%text-strong); + font-size: 15px; + font-weight: 600; + overflow-wrap: anywhere; +} + +.where[_ngcontent-%COMP%] { + width: 100%; + margin: 0; + color: var(--%NS%text-2); + font-size: 12px; + overflow-wrap: anywhere; +} + +.badge[_ngcontent-%COMP%] { + padding: 2px 8px; + border-radius: 99px; + border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent); + background: color-mix(in srgb, var(--%NS%accent) 12%, transparent); + color: var(--%NS%accent); + font-size: 10px; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; +} + +.actions[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 8px; + width: 100%; +} + +.show-form[_ngcontent-%COMP%] { + background: var(--%NS%accent); + border-color: var(--%NS%accent); + color: var(--%NS%accent-ink); + font-weight: 600; +} + +.show-form[_ngcontent-%COMP%]:hover { + background: var(--%NS%accent-hover); + border-color: var(--%NS%accent-hover); +} + +.facts[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + gap: 8px 16px; + margin: 0; + padding: 14px 16px; + border-bottom: 1px solid var(--%NS%border); +} + +.facts[_ngcontent-%COMP%] dt[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + align-self: center; +} + +.facts[_ngcontent-%COMP%] dd[_ngcontent-%COMP%] { + min-width: 0; + margin: 0; + color: var(--%NS%text); + overflow-wrap: anywhere; +} + +.block[_ngcontent-%COMP%] { + padding: 14px 16px; + border-bottom: 1px solid var(--%NS%border); +} + +.block[_ngcontent-%COMP%]:last-child { + border-bottom: 0; +} + +h3[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + display: flex; + align-items: center; + gap: 6px; + margin: 0 0 8px; +} + +.pill[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 18px; + height: 16px; + padding: 0 5px; + border-radius: 99px; + background: var(--%NS%surface-3); + color: var(--%NS%text-2); + font-size: 10px; + font-weight: 600; + letter-spacing: 0; +} + +.props[_ngcontent-%COMP%], +.deps[_ngcontent-%COMP%], +.chips[_ngcontent-%COMP%] { + display: grid; + gap: 6px; + margin: 0; + padding: 0; + list-style: none; +} + +.chips[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; +} + +.prop[_ngcontent-%COMP%], +.dep[_ngcontent-%COMP%] { + min-width: 0; + padding: 8px 10px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%bg); +} + +.prop-name[_ngcontent-%COMP%] { + display: block; + margin-bottom: 4px; + color: var(--%NS%text-strong); + font-size: 12px; + font-weight: 600; +} + +pre[_ngcontent-%COMP%] { + max-height: 200px; + margin: 0; + overflow: auto; + color: var(--%NS%text); + font-family: var(--%NS%font-mono); + font-size: 12px; + line-height: 1.5; + white-space: pre-wrap; + overflow-wrap: anywhere; +} + +.chip[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 2px 10px; + border: 1px solid var(--%NS%border-strong); + border-radius: 99px; + color: var(--%NS%text); + font-size: 12px; +} + +.chip.on[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); + color: var(--%NS%ok); +} + +.chip-note[_ngcontent-%COMP%] { + color: var(--%NS%text-2); + font-size: 11px; +} + +.chip.on[_ngcontent-%COMP%] .chip-note[_ngcontent-%COMP%] { + color: inherit; +} + +.dep[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 6px 8px; +} + +.token[_ngcontent-%COMP%] { + min-width: 0; + color: var(--%NS%text-strong); + font-size: 12px; + font-weight: 600; + overflow-wrap: anywhere; +} + +.flag[_ngcontent-%COMP%] { + padding: 0 6px; + border: 1px solid var(--%NS%border-strong); + border-radius: 5px; + color: var(--%NS%text-2); + font-family: var(--%NS%font-mono); + font-size: 10px; + font-weight: 400; + letter-spacing: 0; + line-height: 16px; + text-transform: none; +} + +.from[_ngcontent-%COMP%] { + margin-left: auto; + color: var(--%NS%text-2); + font-size: 12px; +} + +.from[_ngcontent-%COMP%] .mono[_ngcontent-%COMP%] { + color: var(--%NS%text); +} + +.from.missing[_ngcontent-%COMP%] { + color: var(--%NS%warn); +} + +.empty-line[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-2); +} + +.state[_ngcontent-%COMP%] { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + padding: 40px 16px; + text-align: center; + background: var(--%NS%surface); + border: 1px dashed var(--%NS%border-strong); + border-radius: var(--%NS%radius); +} + +.state.compact[_ngcontent-%COMP%] { + padding: 24px 12px; + border: 0; + background: none; +} + +.state-title[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-strong); + font-size: 14px; + font-weight: 600; + overflow-wrap: anywhere; +} + +.state-hint[_ngcontent-%COMP%] { + max-width: 440px; + margin: 0 auto; + color: var(--%NS%text-2); + line-height: 1.5; +} + +.spinner[_ngcontent-%COMP%] { + width: 20px; + height: 20px; + border: 2px solid var(--%NS%border-strong); + border-top-color: var(--%NS%accent); + border-radius: 50%; + animation: spin 0.8s linear infinite; +} + +@media (prefers-reduced-motion: reduce) { + .spinner[_ngcontent-%COMP%], + .refresh.spinning[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] { + animation: none; + } +} +.source-list[_ngcontent-%COMP%] { + display: flex; + flex-direction: column; + gap: 8px; + margin: 0; + padding: 0; + list-style: none; +} + +.source-item[_ngcontent-%COMP%] { + min-width: 0; + background: var(--%NS%surface); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + overflow: hidden; +} + +.source-item.expanded[_ngcontent-%COMP%] { + border-color: var(--%NS%accent-line); + box-shadow: inset 2px 0 0 var(--%NS%accent); +} + +.source-toggle[_ngcontent-%COMP%] { + justify-content: flex-start; + gap: 12px; + width: 100%; + height: auto; + min-height: 52px; + padding: 10px 16px; + background: none; + border: 0; + border-radius: 0; + text-align: left; +} + +.source-toggle[_ngcontent-%COMP%]:hover { + background: var(--%NS%surface-2); +} + +.source-toggle[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: -2px; +} + +.kind-flag[_ngcontent-%COMP%] { + flex: none; + padding: 1px 8px; + border-radius: 99px; + border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent); + background: color-mix(in srgb, var(--%NS%accent) 12%, transparent); + color: var(--%NS%accent); + font-size: 10px; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; +} + +.kind-flag.directive[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); + color: var(--%NS%ok); +} + +.row-main[_ngcontent-%COMP%] { + display: flex; + flex: 1; + flex-direction: column; + gap: 2px; + min-width: 0; +} + +.selector[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-weight: 600; + overflow-wrap: anywhere; +} + +.file[_ngcontent-%COMP%] { + color: var(--%NS%text-2); + font-size: 12px; + overflow: hidden; + min-width: 0; + text-overflow: ellipsis; + white-space: nowrap; +} + +.chevron[_ngcontent-%COMP%] { + flex: none; + width: 16px; + height: 16px; + fill: none; + stroke: var(--%NS%text-3); + stroke-width: 2.2; + transition: transform 200ms var(--%NS%ease); +} + +.expanded[_ngcontent-%COMP%] .chevron[_ngcontent-%COMP%] { + transform: rotate(90deg); + stroke: var(--%NS%accent); +} + +.inline-detail[_ngcontent-%COMP%] { + padding: 0 0 12px; + border-top: 1px solid var(--%NS%border); +} + +.inline-detail[_ngcontent-%COMP%] .facts[_ngcontent-%COMP%] { + border-bottom: 0; +} + +.inline-detail[_ngcontent-%COMP%] .show-form[_ngcontent-%COMP%] { + margin: 0 16px; +}`]})};function GO(e){return e.line?`${e.file}:${e.line}`:e.file}function KO(e,t){let n=t.filter(t=>t.fullPath===e.fullPath&&t.redirectTo!==void 0==(e.redirectTo!==void 0));return n.find(t=>!!e.component&&t.component===e.component)??n.find(t=>!t.component||!e.component)}var qO=$T;function JO(e,t,n){return qO(e,`request-router-action`,{pageId:t,request:n})}function YO(e){return e===`succeeded`?`good`:e===`redirected`||e===`pending`||e===`skipped`?`warn`:e===`cancelled`||e===`failed`?`bad`:``}var XO=()=>[],ZO=(e,t)=>t[0],QO=(e,t)=>t.input;function $O(e,t){if(e&1&&(H(0,`p`,3),J(1,` The browser shows `),H(2,`code`),J(3),U(),J(4,`, not the router URL (skipLocationChange, browserUrl, a failed navigation or code that changed history). `),U()),e&2){let e=K();M(3),Y(e.browserUrl)}}function ek(e,t){if(e&1&&(H(0,`p`,12),J(1),U()),e&2){let e=K(3);M(),Y(e.navigationOff)}}function tk(e,t){if(e&1){let e=W();H(0,`div`,8),Fg(1,`span`,9),H(2,`span`,10),J(3,`Navigating to `),H(4,`code`),J(5),U(),J(6),U(),H(7,`button`,11),Qg(`click`,function(){return k(e),A(K(2).abort())}),J(8,` Abort `),U()(),P(9,ek,2,1,`p`,12)}if(e&2){let e=t,n=K(2);M(5),Y(e.url),M(),X(` (#`,e.id,`)`),M(),Vg(`disabled`,!n.navigationAllowed()),N(`aria-describedby`,n.navigationAllowed()?null:`route-current-writes-off`),M(2),F(n.navigationAllowed()?-1:9)}}function nk(e,t){if(e&1&&(H(0,`p`,4),J(1),U()),e&2){let e=K(2);M(),Y(e.message())}}function rk(e,t){if(e&1&&(H(0,`dt`),J(1,`Document title`),U(),H(2,`dd`),J(3),U()),e&2){let e=K();M(3),Y(e.title)}}function ik(e,t){if(e&1&&(H(0,`dt`),J(1,`Query params`),U(),H(2,`dd`)(3,`code`),J(4),uv(5,`json`),U()()),e&2){let e=K();M(4),Y(fv(5,1,e.queryParams))}}function ak(e,t){if(e&1&&(H(0,`dt`),J(1,`Fragment`),U(),H(2,`dd`)(3,`code`),J(4),U()()),e&2){let e=K();M(4),Y(e.fragment)}}function ok(e,t){if(e&1&&(H(0,`span`,14),J(1),U()),e&2){let e=K().$implicit;M(),Y(e.route.outlet)}}function sk(e,t){e&1&&(H(0,`span`,14),J(1,`lazy`),U())}function ck(e,t){if(e&1&&(H(0,`div`,15),J(1),U()),e&2){let e=K().$implicit;M(),Z(` title `,e.route.title,``,e.route.ownTitle===!1?` (inherited)`:``,` `)}}function lk(e,t){if(e&1&&(H(0,`code`,16),J(1),U()),e&2){let e=K().$implicit;M(),Y(e.route.component)}}function uk(e,t){e&1&&(H(0,`span`,19),J(1,`–`),U(),H(2,`span`,20),J(3,`none`),U())}function dk(e,t){e&1&&(H(0,`span`,14),J(1,`inherited`),U())}function fk(e,t){if(e&1&&(H(0,`div`,17)(1,`code`),J(2),uv(3,`json`),U(),P(4,dk,2,0,`span`,14),U()),e&2){let e=t.$implicit,n=K().$implicit;M(2),Z(``,e[0],`: `,fv(3,3,e[1])),M(2),F(n.route.paramSources?.[e[0]]===`inherited`?4:-1)}}function pk(e,t){e&1&&(H(0,`span`,19),J(1,`–`),U(),H(2,`span`,20),J(3,`none`),U())}function mk(e,t){e&1&&(H(0,`span`,14),J(1),U()),e&2&&(M(),Y(t))}function hk(e,t){if(e&1&&(H(0,`div`,18)(1,`code`),J(2),uv(3,`json`),U(),P(4,mk,2,1,`span`,14),U()),e&2){let e,n=t.$implicit,r=K().$implicit;M(2),Z(``,n[0],`: `,fv(3,3,n[1])),M(2),F((e=r.route.dataSources?.[n[0]])?4:-1,e)}}function gk(e,t){e&1&&(H(0,`span`,19),J(1,`–`),U(),H(2,`span`,20),J(3,`none`),U())}function _k(e,t){if(e&1&&(H(0,`span`,14),J(1),U()),e&2){let e=t.$implicit;M(),Y(e)}}function vk(e,t){if(e&1&&(H(0,`span`,14),J(1),U()),e&2){let e=t.$implicit;M(),X(`resolve `,e)}}function yk(e,t){e&1&&(H(0,`span`,19),J(1,`–`),U(),H(2,`span`,20),J(3,`none`),U())}function bk(e,t){if(e&1&&(H(0,`tr`)(1,`td`,13),J(2),P(3,ok,2,1,`span`,14),P(4,sk,2,0,`span`,14),P(5,ck,2,2,`div`,15),U(),H(6,`td`),P(7,lk,2,1,`code`,16)(8,uk,4,0),U(),H(9,`td`),I(10,fk,5,5,`div`,17,ZO,!1,pk,4,0),U(),H(13,`td`),I(14,hk,5,5,`div`,18,ZO,!1,gk,4,0),U(),H(17,`td`),I(18,_k,2,1,`span`,14,wg),I(20,vk,2,1,`span`,14,wg),P(22,yk,4,0),U()()),e&2){let e=t.$implicit,n=K(2);M(),C_(`padding-left`,14+e.depth*16,`px`),M(),X(` `,e.depth===0&&!e.route.path?`(root)`:`/`+e.route.path,` `),M(),F(e.route.outlet===`primary`?-1:3),M(),F(e.route.lazy?4:-1),M(),F(e.route.title?5:-1),M(2),F(e.route.component?7:8),M(3),L(n.entries(e.route.params)),M(4),L(n.entries(e.route.data)),M(4),L(n.guardList(e.route)),M(2),L(e.route.resolvers??av(10,XO)),M(2),F(!n.guardList(e.route).length&&!e.route.resolvers?.length?22:-1)}}function xk(e,t){if(e&1&&(H(0,`code`),J(1),U(),J(2,` for `),H(3,`code`),J(4),U()),e&2){let e=K().$implicit;M(),Y(e.outlet.component??`?`),M(3),Y(e.outlet.route??`?`)}}function Sk(e,t){e&1&&(H(0,`span`,23),J(1,`not activated`),U())}function Ck(e,t){e&1&&(H(0,`span`,14),J(1,`detached by reuse strategy`),U())}function wk(e,t){if(e&1&&(H(0,`span`,14),J(1),U()),e&2){let e=t.$implicit;M(),Z(`input `,e.input,` ← `,e.source)}}function Tk(e,t){if(e&1&&(H(0,`li`)(1,`span`,14),J(2),U(),P(3,xk,5,2)(4,Sk,2,0,`span`,23),P(5,Ck,2,0,`span`,14),I(6,wk,2,2,`span`,14,QO),U()),e&2){let e=t.$implicit,n=K(3);C_(`padding-left`,10+e.depth*16,`px`),M(2),Y(e.outlet.outlet),M(),F(e.outlet.activated?3:4),M(2),F(e.outlet.detached?5:-1),M(),L(n.boundInputs(e.outlet))}}function Ek(e,t){if(e&1&&(H(0,`h3`),J(1,`Outlets`),U(),H(2,`ul`,21),I(3,Tk,8,5,`li`,22,Cg),U()),e&2){let e=K(2);M(3),L(e.outletRows())}}function Dk(e,t){if(e&1&&(H(0,`p`,1)(1,`span`,2),J(2,`URL`),U(),H(3,`code`),J(4),U()(),P(5,$O,5,1,`p`,3),P(6,tk,10,5),P(7,nk,2,1,`p`,4),H(8,`dl`,5),P(9,rk,4,1),P(10,ik,6,3),P(11,ak,5,1),U(),H(12,`h3`),J(13,`Active routes`),U(),H(14,`div`,6)(15,`table`)(16,`thead`)(17,`tr`)(18,`th`,7),J(19,`Route`),U(),H(20,`th`,7),J(21,`Component`),U(),H(22,`th`,7),J(23,`Params`),U(),H(24,`th`,7),J(25,`Data`),U(),H(26,`th`,7),J(27,`Guards and resolvers`),U()()(),H(28,`tbody`),I(29,bk,23,11,`tr`,null,Cg),U()()(),P(31,Ek,5,0)),e&2){let e,n=t,r=K();M(4),Y(n.url),M(),F(n.urlDrift&&n.browserUrl?5:-1),M(),F((e=n.pending)?6:-1,e),M(),F(r.message()?7:-1),M(2),F(n.title?9:-1),M(),F(r.hasKeys(n.queryParams)?10:-1),M(),F(n.fragment?11:-1),M(18),L(r.rows()),M(2),F(r.outletRows().length?31:-1)}}function Ok(e,t){e&1&&(H(0,`div`,0)(1,`p`,24),J(2,`This page reports no Router.`),U(),H(3,`p`,23),J(4,` Add `),H(5,`code`),J(6,`provideRouter()`),U(),J(7,` to the app config and navigate once to see the active routes here. `),U()())}var kk=class e{page=$.required();rpc=$(null);navigationAllowed=Q(()=>nE(this.rpc(),`router`));navigationOff=HT(`router`);message=j(``);rows=Q(()=>{let e=[],t=(n,r)=>{e.push({route:n,depth:r});for(let e of n.children)t(e,r+1)},n=this.page().snapshot?.root;return n&&t(n,0),e});outletRows=Q(()=>{let e=[],t=(n,r)=>{for(let i of n)e.push({outlet:i,depth:r}),i.children&&t(i.children,r+1)};return t(this.page().outlets??[],0),e});hasKeys(e){return Object.keys(e).length>0}entries(e){return Object.entries(e)}guardList(e){return Object.entries(e.guards??{}).flatMap(([e,t])=>t.map(t=>`${e} ${t}`))}boundInputs(e){return(e.inputs??[]).filter(e=>e.source!==`unset`)}async abort(){let e=await JO(this.rpc(),this.page().pageId,{action:`abort`});this.message.set(e?.error?String(e.error):`Aborted navigation #${e?.aborted}`)}static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-route-current`]],inputs:{page:[1,`page`],rpc:[1,`rpc`]},decls:2,vars:1,consts:[[1,`empty`],[1,`url`],[1,`url-label`],[`role`,`note`,1,`note`],[`role`,`status`,1,`muted`],[1,`facts`],[`role`,`region`,`aria-label`,`Active routes`,`tabindex`,`0`,1,`table-scroll`],[`scope`,`col`],[`role`,`status`,1,`pending`],[`aria-hidden`,`true`,1,`pulse`],[1,`pending-text`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`id`,`route-current-writes-off`,1,`muted`],[1,`path`],[1,`tag`],[1,`sub`],[1,`component`],[1,`entry`],[1,`entry`,`data`],[`aria-hidden`,`true`,1,`nil`],[1,`visually-hidden`],[1,`outlets`],[3,`padding-left`],[1,`muted`],[1,`empty-title`]],template:function(e,t){if(e&1&&P(0,Dk,32,8)(1,Ok,8,0,`div`,0),e&2){let e;F((e=t.page().snapshot)?0:1,e)}},dependencies:[ib],styles:[`.muted[_ngcontent-%COMP%] { + color: var(--%NS%text-2); + font-size: 13px; + line-height: 1.5; +} + +.nil[_ngcontent-%COMP%] { + color: var(--%NS%text-3); +} + +code[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); + font-size: 12.5px; + color: var(--%NS%text); + overflow-wrap: anywhere; +} + +.tag[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + max-width: 100%; + min-height: 20px; + margin: 2px 4px 2px 0; + padding: 0 8px; + border: 1px solid var(--%NS%border); + border-radius: 99px; + background: var(--%NS%surface-2); + color: var(--%NS%text); + font-family: var(--%NS%font-mono); + font-size: 11.5px; + line-height: 1.4; + vertical-align: middle; + overflow-wrap: anywhere; + white-space: normal; +} + +.badge[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + min-height: 20px; + padding: 0 8px; + border: 1px solid var(--%NS%border-strong); + border-radius: 99px; + background: var(--%NS%surface-2); + color: var(--%NS%text); + font-size: 11px; + font-weight: 600; + line-height: 1.4; + white-space: nowrap; + vertical-align: middle; +} + +.badge[data-tone=good][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); + color: var(--%NS%ok); +} + +.badge[data-tone=warn][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); + background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); + color: var(--%NS%warn); +} + +.badge[data-tone=bad][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + color: var(--%NS%danger); +} + +button.small[_ngcontent-%COMP%] { + display: inline-flex; + flex: none; + align-items: center; + justify-content: center; + gap: 6px; + height: 34px; + padding: 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + font-weight: 500; + white-space: nowrap; + cursor: pointer; + transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease); +} + +button.small[_ngcontent-%COMP%]:hover:not(:disabled) { + background: var(--%NS%surface-3); + border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%border-strong)); +} + +button.small[_ngcontent-%COMP%]:active:not(:disabled) { + transform: translateY(1px); +} + +button.small[_ngcontent-%COMP%]:disabled { + opacity: 0.55; + cursor: not-allowed; +} + +button.small.primary[_ngcontent-%COMP%] { + border-color: var(--%NS%accent); + background: var(--%NS%accent); + color: var(--%NS%accent-ink); + font-weight: 600; +} + +button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) { + border-color: var(--%NS%accent-hover); + background: var(--%NS%accent-hover); +} + +button.small[_ngcontent-%COMP%]:focus-visible, +.table-scroll[_ngcontent-%COMP%]:focus-visible, +input[type=checkbox][_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +input.field[_ngcontent-%COMP%], +select[_ngcontent-%COMP%] { + height: 34px; + padding: 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background-color: var(--%NS%bg); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease); +} + +input.field[_ngcontent-%COMP%] { + text-overflow: ellipsis; +} + +input.field[_ngcontent-%COMP%]::placeholder { + color: var(--%NS%text-3); +} + +input.field[_ngcontent-%COMP%]:hover:not(:focus), +select[_ngcontent-%COMP%]:hover:not(:focus) { + border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%border-strong)); +} + +input.field[_ngcontent-%COMP%]:focus-visible, +select[_ngcontent-%COMP%]:focus-visible { + outline: none; + border-color: var(--%NS%accent); + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +.note[_ngcontent-%COMP%] { + margin: 0; + padding: 10px 14px; + border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent); + border-radius: var(--%NS%radius-sm); + background: color-mix(in srgb, var(--%NS%warn) 10%, transparent); + color: var(--%NS%text); + font-size: 13px; + line-height: 1.5; +} + +.empty[_ngcontent-%COMP%] { + display: grid; + gap: 6px; + justify-items: center; + margin: 0; + padding: 40px 24px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + text-align: center; + animation: enter 0.35s var(--%NS%ease) both; +} + +.empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { + margin: 0; + max-width: 480px; + line-height: 1.6; +} + +.empty-title[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-size: 14px; + font-weight: 600; +} + +.empty[_ngcontent-%COMP%] .small[_ngcontent-%COMP%] { + margin-top: 8px; +} + +.facts[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + align-items: baseline; + gap: 8px 24px; + margin: 0; + padding: 14px 16px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + font-size: 13px; +} + +.facts[_ngcontent-%COMP%]:empty { + display: none; +} + +dt[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +dd[_ngcontent-%COMP%] { + min-width: 0; + margin: 0; + color: var(--%NS%text); + overflow-wrap: anywhere; + font-variant-numeric: tabular-nums; +} + +.table-scroll[_ngcontent-%COMP%] { + overflow-x: auto; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + box-shadow: var(--%NS%shadow); + animation: enter 0.35s var(--%NS%ease) both; +} + +table[_ngcontent-%COMP%] { + width: 100%; + border-collapse: collapse; + font-size: 13px; + font-variant-numeric: tabular-nums; +} + +th[_ngcontent-%COMP%] { + padding: 10px 14px; + border-bottom: 1px solid var(--%NS%border); + background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface)); + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.06em; + text-align: left; + text-transform: uppercase; + white-space: nowrap; +} + +td[_ngcontent-%COMP%] { + padding: 10px 14px; + border-bottom: 1px solid var(--%NS%border); + color: var(--%NS%text); + line-height: 1.5; + vertical-align: top; + transition: background-color 0.15s var(--%NS%ease); +} + +tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child td[_ngcontent-%COMP%] { + border-bottom: none; +} + +tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover td[_ngcontent-%COMP%] { + background: var(--%NS%surface-2); +} + +.path[_ngcontent-%COMP%] { + color: var(--%NS%accent); + font-family: var(--%NS%font-mono); + font-size: 12.5px; + white-space: nowrap; +} + +h3[_ngcontent-%COMP%] { + margin: 8px 0 -4px; + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +@media (max-width: 480px) { + .facts[_ngcontent-%COMP%] { + grid-template-columns: minmax(0, 1fr); + gap: 2px; + } + .facts[_ngcontent-%COMP%] dd[_ngcontent-%COMP%] + dt[_ngcontent-%COMP%] { + margin-top: 8px; + } +} +[_nghost-%COMP%] { + display: grid; + gap: 16px; + min-width: 0; +} + +.url[_ngcontent-%COMP%] { + display: flex; + align-items: baseline; + gap: 12px; + min-width: 0; + margin: 0; + padding: 12px 16px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + box-shadow: var(--%NS%shadow); +} + +.url-label[_ngcontent-%COMP%] { + flex: none; + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.url[_ngcontent-%COMP%] code[_ngcontent-%COMP%] { + min-width: 0; + color: var(--%NS%accent); + font-size: 14px; + font-weight: 500; +} + +.pending[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 8px 12px; + align-items: center; + padding: 6px 6px 6px 14px; + border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent); + border-radius: var(--%NS%radius-sm); + background: color-mix(in srgb, var(--%NS%warn) 10%, transparent); + color: var(--%NS%warn); + font-size: 13px; +} + +.pending-text[_ngcontent-%COMP%] { + flex: 1 1 200px; + min-width: 0; +} + +.pending[_ngcontent-%COMP%] code[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); +} + +.pulse[_ngcontent-%COMP%] { + flex: none; + width: 8px; + height: 8px; + border-radius: 99px; + background: var(--%NS%warn); + animation: _ngcontent-%COMP%_pulse 1.2s ease-in-out infinite; +} + +@keyframes _ngcontent-%COMP%_pulse { + 50% { + opacity: 0.35; + } +} +@media (prefers-reduced-motion: reduce) { + .pulse[_ngcontent-%COMP%] { + animation: none; + } +} +.sub[_ngcontent-%COMP%] { + margin-top: 4px; + color: var(--%NS%text-2); + font-family: var(--%NS%font-sans); + font-size: 12px; + white-space: normal; +} + +.component[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); +} + +.entry[_ngcontent-%COMP%] + .entry[_ngcontent-%COMP%] { + margin-top: 2px; +} + +.data[_ngcontent-%COMP%] { + max-width: 360px; +} + +.outlets[_ngcontent-%COMP%] { + display: grid; + gap: 2px; + margin: 0; + padding: 6px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + color: var(--%NS%text); + font-size: 13px; + list-style: none; + animation: enter 0.35s var(--%NS%ease) both; +} + +.outlets[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { + padding-top: 6px; + padding-right: 10px; + padding-bottom: 6px; + border-radius: var(--%NS%radius-sm); + line-height: 1.8; + overflow-wrap: anywhere; + transition: background-color 0.15s var(--%NS%ease); +} + +.outlets[_ngcontent-%COMP%] li[_ngcontent-%COMP%]:hover { + background: var(--%NS%surface-2); +}`]})};function Ak(e,t){if(e&1&&(H(0,`span`,8),J(1),U()),e&2){let e=K(2);M(),X(``,e.counts().error,` error(s)`)}}function jk(e,t){if(e&1&&(H(0,`span`,9),J(1),U()),e&2){let e=K(2);M(),X(``,e.counts().warning,` warning(s)`)}}function Mk(e,t){if(e&1&&(H(0,`span`,10),J(1),U()),e&2){let e=K(2);M(),X(``,e.counts().info,` info`)}}function Nk(e,t){if(e&1&&(H(0,`span`,3),P(1,Ak,2,1,`span`,8),P(2,jk,2,1,`span`,9),P(3,Mk,2,1,`span`,10),U()),e&2){let e=K();M(),F(e.counts().error?1:-1),M(),F(e.counts().warning?2:-1),M(),F(e.counts().info?3:-1)}}function Pk(e,t){if(e&1){let e=W();H(0,`div`,4)(1,`p`,11),J(2,`The route checks could not run.`),U(),H(3,`p`,2),J(4,`The DevTools server did not answer. Check that it is still running.`),U(),H(5,`button`,1),Qg(`click`,function(){return k(e),A(K().run())}),J(6,`Retry`),U()()}}function Fk(e,t){e&1&&(H(0,`p`,5),J(1,`Checking…`),U())}function Ik(e,t){e&1&&J(0,` This page runs in events-only mode: it has no debug utils (a production build or an unusual setup), so it cannot report its route config. `)}function Lk(e,t){e&1&&J(0,` The page has not reported its route config yet. It appears after the app finishes bootstrapping. `)}function Rk(e,t){e&1&&J(0,` No page with a router is connected. `)}function zk(e,t){if(e&1&&(H(0,`div`,6)(1,`p`,11),J(2,`No checks ran.`),U(),H(3,`p`,2),P(4,Ik,1,0)(5,Lk,1,0)(6,Rk,1,0),U()()),e&2){let e;M(4),F((e=t)===`events-only`?4:e===`no-config`?5:6)}}function Bk(e,t){if(e&1&&(H(0,`li`)(1,`div`,12)(2,`span`,10),J(3),U(),H(4,`code`,13),J(5),U(),H(6,`code`,14),J(7),U()(),H(8,`p`,15),J(9),U(),H(10,`p`,16)(11,`span`,17),J(12,`Fix`),U(),H(13,`span`,18),J(14),H(15,`span`,2),J(16),U()()()()),e&2){let e=t.$implicit,n=K(2);N(`data-severity`,e.severity),M(2),N(`data-tone`,n.severityTone(e.severity)),M(),Y(e.severity),M(2),Y(e.rule),M(2),Y(e.route),M(2),Y(e.message),M(5),X(``,e.fix,` `),M(2),X(`(Angular `,e.angular===`throws`?`throws`:e.angular===`warns`?`warns`:`does not warn`,`)`)}}function Vk(e,t){if(e&1&&(H(0,`ul`,7),I(1,Bk,17,8,`li`,null,Cg),U()),e&2){let e=K();N(`aria-busy`,e.checking()),M(),L(e.findings())}}function Hk(e,t){e&1&&(H(0,`div`,6)(1,`span`,19),fs(),H(2,`svg`,20),Fg(3,`path`,21),U()(),ps(),H(4,`p`,11),J(5,`No route config problems found.`),U(),H(6,`p`,2),J(7,`The check runs again after each navigation or config change.`),U()())}var Uk=class e{page=$.required();rpc=$(null);result=j(null);failed=j(!1);checking=j(!1);findings=Q(()=>{let e=this.result();return e?.checked?e.findings:[]});notChecked=Q(()=>{let e=this.result();return e&&!e.checked?e.reason:null});counts=Q(()=>{let e={error:0,warning:0,info:0};for(let t of this.findings())e[t.severity]++;return e});key=Q(()=>{let e=this.page(),t=e.navigations[e.navigations.length-1];return`${e.pageId}:${e.generation}:${t?.id}:${t?.outcome}`});seq=0;checkedPage=null;constructor(){uc(()=>{this.key(),Sv(()=>void this.run())})}severityTone(e){return e===`error`?`bad`:e===`warning`?`warn`:``}async run(){let e=++this.seq,t=this.page().pageId;t!==this.checkedPage&&this.result.set(null),this.checking.set(!0);let n=await qO(this.rpc(),`router-lint`,t);e===this.seq&&(this.checking.set(!1),this.failed.set(!n),n&&(this.result.set(n),this.checkedPage=t))}static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-route-lint`]],inputs:{page:[1,`page`],rpc:[1,`rpc`]},decls:11,vars:4,consts:[[1,`toolbar`],[`type`,`button`,1,`small`,3,`click`],[1,`muted`],[1,`summary`],[`role`,`alert`,1,`empty`],[`role`,`status`,1,`muted`,`empty`],[1,`empty`],[1,`findings`],[`data-tone`,`bad`,1,`badge`],[`data-tone`,`warn`,1,`badge`],[1,`badge`],[1,`empty-title`],[1,`head`],[1,`rule`],[1,`route`],[1,`message`],[1,`fix`],[1,`fix-label`],[1,`fix-text`],[`aria-hidden`,`true`,1,`ok-mark`],[`width`,`16`,`height`,`16`,`viewBox`,`0 0 24 24`,`fill`,`none`,`stroke`,`currentColor`,`stroke-width`,`2.5`,`stroke-linecap`,`round`,`stroke-linejoin`,`round`],[`d`,`M20 6 9 17l-5-5`]],template:function(e,t){if(e&1&&(H(0,`div`,0)(1,`button`,1),Qg(`click`,function(){return t.run()}),J(2),U(),H(3,`span`,2),J(4,`Checks the live config, links and recent navigations. Lazy routes that have not loaded are skipped.`),U(),P(5,Nk,4,3,`span`,3),U(),P(6,Pk,7,0,`div`,4)(7,Fk,2,0,`p`,5)(8,zk,7,1,`div`,6)(9,Vk,3,1,`ul`,7)(10,Hk,8,0,`div`,6)),e&2){let e;M(),N(`aria-busy`,t.checking()),M(),X(` `,t.checking()?`Checking…`:`Check again`,` `),M(3),F(t.result()?.checked&&t.findings().length?5:-1),M(),F(t.failed()?6:t.result()?(e=t.notChecked())?8:t.findings().length?9:10:7,e)}},styles:[`.muted[_ngcontent-%COMP%] { + color: var(--%NS%text-2); + font-size: 13px; + line-height: 1.5; +} + +.nil[_ngcontent-%COMP%] { + color: var(--%NS%text-3); +} + +code[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); + font-size: 12.5px; + color: var(--%NS%text); + overflow-wrap: anywhere; +} + +.tag[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + max-width: 100%; + min-height: 20px; + margin: 2px 4px 2px 0; + padding: 0 8px; + border: 1px solid var(--%NS%border); + border-radius: 99px; + background: var(--%NS%surface-2); + color: var(--%NS%text); + font-family: var(--%NS%font-mono); + font-size: 11.5px; + line-height: 1.4; + vertical-align: middle; + overflow-wrap: anywhere; + white-space: normal; +} + +.badge[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + min-height: 20px; + padding: 0 8px; + border: 1px solid var(--%NS%border-strong); + border-radius: 99px; + background: var(--%NS%surface-2); + color: var(--%NS%text); + font-size: 11px; + font-weight: 600; + line-height: 1.4; + white-space: nowrap; + vertical-align: middle; +} + +.badge[data-tone=good][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); + color: var(--%NS%ok); +} + +.badge[data-tone=warn][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); + background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); + color: var(--%NS%warn); +} + +.badge[data-tone=bad][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + color: var(--%NS%danger); +} + +button.small[_ngcontent-%COMP%] { + display: inline-flex; + flex: none; + align-items: center; + justify-content: center; + gap: 6px; + height: 34px; + padding: 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + font-weight: 500; + white-space: nowrap; + cursor: pointer; + transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease); +} + +button.small[_ngcontent-%COMP%]:hover:not(:disabled) { + background: var(--%NS%surface-3); + border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%border-strong)); +} + +button.small[_ngcontent-%COMP%]:active:not(:disabled) { + transform: translateY(1px); +} + +button.small[_ngcontent-%COMP%]:disabled { + opacity: 0.55; + cursor: not-allowed; +} + +button.small.primary[_ngcontent-%COMP%] { + border-color: var(--%NS%accent); + background: var(--%NS%accent); + color: var(--%NS%accent-ink); + font-weight: 600; +} + +button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) { + border-color: var(--%NS%accent-hover); + background: var(--%NS%accent-hover); +} + +button.small[_ngcontent-%COMP%]:focus-visible, +.table-scroll[_ngcontent-%COMP%]:focus-visible, +input[type=checkbox][_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +input.field[_ngcontent-%COMP%], +select[_ngcontent-%COMP%] { + height: 34px; + padding: 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background-color: var(--%NS%bg); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease); +} + +input.field[_ngcontent-%COMP%] { + text-overflow: ellipsis; +} + +input.field[_ngcontent-%COMP%]::placeholder { + color: var(--%NS%text-3); +} + +input.field[_ngcontent-%COMP%]:hover:not(:focus), +select[_ngcontent-%COMP%]:hover:not(:focus) { + border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%border-strong)); +} + +input.field[_ngcontent-%COMP%]:focus-visible, +select[_ngcontent-%COMP%]:focus-visible { + outline: none; + border-color: var(--%NS%accent); + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +.note[_ngcontent-%COMP%] { + margin: 0; + padding: 10px 14px; + border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent); + border-radius: var(--%NS%radius-sm); + background: color-mix(in srgb, var(--%NS%warn) 10%, transparent); + color: var(--%NS%text); + font-size: 13px; + line-height: 1.5; +} + +.empty[_ngcontent-%COMP%] { + display: grid; + gap: 6px; + justify-items: center; + margin: 0; + padding: 40px 24px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + text-align: center; + animation: enter 0.35s var(--%NS%ease) both; +} + +.empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { + margin: 0; + max-width: 480px; + line-height: 1.6; +} + +.empty-title[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-size: 14px; + font-weight: 600; +} + +.empty[_ngcontent-%COMP%] .small[_ngcontent-%COMP%] { + margin-top: 8px; +} + +.facts[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + align-items: baseline; + gap: 8px 24px; + margin: 0; + padding: 14px 16px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + font-size: 13px; +} + +.facts[_ngcontent-%COMP%]:empty { + display: none; +} + +dt[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +dd[_ngcontent-%COMP%] { + min-width: 0; + margin: 0; + color: var(--%NS%text); + overflow-wrap: anywhere; + font-variant-numeric: tabular-nums; +} + +.table-scroll[_ngcontent-%COMP%] { + overflow-x: auto; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + box-shadow: var(--%NS%shadow); + animation: enter 0.35s var(--%NS%ease) both; +} + +table[_ngcontent-%COMP%] { + width: 100%; + border-collapse: collapse; + font-size: 13px; + font-variant-numeric: tabular-nums; +} + +th[_ngcontent-%COMP%] { + padding: 10px 14px; + border-bottom: 1px solid var(--%NS%border); + background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface)); + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.06em; + text-align: left; + text-transform: uppercase; + white-space: nowrap; +} + +td[_ngcontent-%COMP%] { + padding: 10px 14px; + border-bottom: 1px solid var(--%NS%border); + color: var(--%NS%text); + line-height: 1.5; + vertical-align: top; + transition: background-color 0.15s var(--%NS%ease); +} + +tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child td[_ngcontent-%COMP%] { + border-bottom: none; +} + +tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover td[_ngcontent-%COMP%] { + background: var(--%NS%surface-2); +} + +.path[_ngcontent-%COMP%] { + color: var(--%NS%accent); + font-family: var(--%NS%font-mono); + font-size: 12.5px; + white-space: nowrap; +} + +h3[_ngcontent-%COMP%] { + margin: 8px 0 -4px; + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +@media (max-width: 480px) { + .facts[_ngcontent-%COMP%] { + grid-template-columns: minmax(0, 1fr); + gap: 2px; + } + .facts[_ngcontent-%COMP%] dd[_ngcontent-%COMP%] + dt[_ngcontent-%COMP%] { + margin-top: 8px; + } +} +[_nghost-%COMP%] { + display: grid; + gap: 12px; + min-width: 0; +} + +.toolbar[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 8px 12px; + align-items: center; + padding: 8px 12px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); +} + +.toolbar[_ngcontent-%COMP%] .muted[_ngcontent-%COMP%] { + flex: 1 1 240px; + font-size: 12px; +} + +.summary[_ngcontent-%COMP%] { + display: inline-flex; + flex-wrap: wrap; + gap: 6px; + font-variant-numeric: tabular-nums; +} + +.ok-mark[_ngcontent-%COMP%] { + display: grid; + place-items: center; + width: 32px; + height: 32px; + margin-bottom: 4px; + border: 1px solid color-mix(in srgb, var(--%NS%ok) 30%, transparent); + border-radius: 99px; + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); + color: var(--%NS%ok); +} + +.findings[_ngcontent-%COMP%] { + display: grid; + gap: 8px; + margin: 0; + padding: 0; + list-style: none; +} + +.findings[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { + padding: 12px 16px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + color: var(--%NS%text); + font-size: 13px; + line-height: 1.5; + animation: enter 0.35s var(--%NS%ease) both; + transition: border-color 0.15s var(--%NS%ease); +} + +.findings[_ngcontent-%COMP%] li[_ngcontent-%COMP%]:hover { + border-color: var(--%NS%border-strong); +} + +.findings[_ngcontent-%COMP%] li[data-severity=error][_ngcontent-%COMP%] { + box-shadow: inset 3px 0 0 var(--%NS%danger); +} + +.findings[_ngcontent-%COMP%] li[data-severity=warning][_ngcontent-%COMP%] { + box-shadow: inset 3px 0 0 var(--%NS%warn); +} + +.head[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: center; + min-width: 0; +} + +.rule[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-weight: 500; +} + +.route[_ngcontent-%COMP%] { + color: var(--%NS%accent); +} + +.message[_ngcontent-%COMP%] { + margin: 8px 0 0; +} + +.fix[_ngcontent-%COMP%] { + display: flex; + gap: 10px; + align-items: baseline; + margin: 10px 0 0; + padding: 8px 12px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + color: var(--%NS%text); +} + +.fix-label[_ngcontent-%COMP%] { + flex: none; + color: var(--%NS%accent); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.fix-text[_ngcontent-%COMP%] { + min-width: 0; + overflow-wrap: anywhere; +} + +.fix[_ngcontent-%COMP%] .muted[_ngcontent-%COMP%] { + font-size: 12px; +}`]})},Wk=(e,t)=>t.name,Gk=(e,t)=>t[0];function Kk(e,t){e&1&&(H(0,`p`,1),J(1,` Events-only mode: this build has no debug utils (production build or unusual setup), so the route config, lint and actions are limited. `),U())}function qk(e,t){if(e&1&&(H(0,`dt`),J(1,`Angular`),U(),H(2,`dd`),J(3),U()),e&2){let e=K();M(3),Y(e.angularVersion)}}function Jk(e,t){if(e&1&&(H(0,`dt`),J(1,`Base href`),U(),H(2,`dd`)(3,`code`),J(4),U()()),e&2){let e=K();M(4),Y(e.baseHref)}}function Yk(e,t){if(e&1&&(H(0,`dt`),J(1,`Hydration`),U(),H(2,`dd`),J(3),U()),e&2){let e=K();M(3),X(``,e.hydrated,` component(s) hydrated from server HTML`)}}function Xk(e,t){if(e&1&&(H(0,`tr`)(1,`td`,5)(2,`code`),J(3),U()(),H(4,`td`)(5,`code`),J(6),U()(),H(7,`td`,6)(8,`span`,7),J(9),U()()()),e&2){let e=t.$implicit;M(3),Y(e.name),M(3),Y(e.value),M(2),N(`data-tone`,e.set?`warn`:``),M(),Y(e.set?`set`:`default`)}}function Zk(e,t){if(e&1&&(H(0,`li`)(1,`span`,7),J(2),U()()),e&2){let e=t.$implicit;M(),N(`data-tone`,e[1]===`off`?``:`good`),M(),Z(``,e[0],`: `,e[1])}}function Qk(e,t){if(e&1&&(H(0,`h3`),J(1,`Features`),U(),H(2,`ul`,8),I(3,Zk,3,3,`li`,null,Gk),U()),e&2){let e=K(),t=K();M(3),L(t.entries(e.features))}}function $k(e,t){if(e&1&&(H(0,`dt`),J(1),U(),H(2,`dd`)(3,`code`),J(4),U()()),e&2){let e=t.$implicit;M(),Y(e[0]),M(3),Y(e[1])}}function eA(e,t){if(e&1&&(H(0,`h3`),J(1,`Strategies`),U(),H(2,`dl`,2),I(3,$k,5,2,null,null,Gk),U()),e&2){let e=K(),t=K();M(3),L(t.entries(e.strategies))}}function tA(e,t){if(e&1&&(P(0,Kk,2,0,`p`,1),H(1,`dl`,2)(2,`dt`),J(3,`Set up with`),U(),H(4,`dd`),J(5),U(),P(6,qk,4,1),P(7,Jk,5,1),P(8,Yk,4,1),U(),H(9,`h3`),J(10,`Options`),U(),H(11,`div`,3)(12,`table`)(13,`thead`)(14,`tr`)(15,`th`,4),J(16,`Option`),U(),H(17,`th`,4),J(18,`Value`),U(),H(19,`th`,4),J(20,`Source`),U()()(),H(21,`tbody`),I(22,Xk,10,4,`tr`,null,Wk),U()()(),P(24,Qk,5,0),P(25,eA,5,0)),e&2){let e=t,n=K();F(e.mode===`events-only`?0:-1),M(5),Z(` `,e.setupKind,``,e.routers>1?`, `+e.routers+` routers on the page`:``,` `),M(),F(e.angularVersion?6:-1),M(),F(e.baseHref?7:-1),M(),F(e.hydrated?8:-1),M(14),L(e.options),M(2),F(n.entries(e.features).length?24:-1),M(),F(n.entries(e.strategies).length?25:-1)}}function nA(e,t){e&1&&(H(0,`div`,0)(1,`p`,9),J(2,`The page has not reported its router setup yet.`),U(),H(3,`p`,10),J(4,` It appears after the app finishes bootstrapping. Reload the app if it stays empty. `),U()())}var rA=class e{page=$.required();entries(e){return Object.entries(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-route-setup`]],inputs:{page:[1,`page`]},decls:2,vars:1,consts:[[1,`empty`],[`role`,`note`,1,`note`],[1,`facts`],[`role`,`region`,`aria-label`,`Router options`,`tabindex`,`0`,1,`table-scroll`],[`scope`,`col`],[1,`name`],[1,`source`],[1,`badge`],[1,`chips`],[1,`empty-title`],[1,`muted`]],template:function(e,t){if(e&1&&P(0,tA,26,8)(1,nA,5,0,`div`,0),e&2){let e;F((e=t.page().setup)?0:1,e)}},styles:[`.muted[_ngcontent-%COMP%] { + color: var(--%NS%text-2); + font-size: 13px; + line-height: 1.5; +} + +.nil[_ngcontent-%COMP%] { + color: var(--%NS%text-3); +} + +code[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); + font-size: 12.5px; + color: var(--%NS%text); + overflow-wrap: anywhere; +} + +.tag[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + max-width: 100%; + min-height: 20px; + margin: 2px 4px 2px 0; + padding: 0 8px; + border: 1px solid var(--%NS%border); + border-radius: 99px; + background: var(--%NS%surface-2); + color: var(--%NS%text); + font-family: var(--%NS%font-mono); + font-size: 11.5px; + line-height: 1.4; + vertical-align: middle; + overflow-wrap: anywhere; + white-space: normal; +} + +.badge[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + min-height: 20px; + padding: 0 8px; + border: 1px solid var(--%NS%border-strong); + border-radius: 99px; + background: var(--%NS%surface-2); + color: var(--%NS%text); + font-size: 11px; + font-weight: 600; + line-height: 1.4; + white-space: nowrap; + vertical-align: middle; +} + +.badge[data-tone=good][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); + color: var(--%NS%ok); +} + +.badge[data-tone=warn][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); + background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); + color: var(--%NS%warn); +} + +.badge[data-tone=bad][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + color: var(--%NS%danger); +} + +button.small[_ngcontent-%COMP%] { + display: inline-flex; + flex: none; + align-items: center; + justify-content: center; + gap: 6px; + height: 34px; + padding: 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + font-weight: 500; + white-space: nowrap; + cursor: pointer; + transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease); +} + +button.small[_ngcontent-%COMP%]:hover:not(:disabled) { + background: var(--%NS%surface-3); + border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%border-strong)); +} + +button.small[_ngcontent-%COMP%]:active:not(:disabled) { + transform: translateY(1px); +} + +button.small[_ngcontent-%COMP%]:disabled { + opacity: 0.55; + cursor: not-allowed; +} + +button.small.primary[_ngcontent-%COMP%] { + border-color: var(--%NS%accent); + background: var(--%NS%accent); + color: var(--%NS%accent-ink); + font-weight: 600; +} + +button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) { + border-color: var(--%NS%accent-hover); + background: var(--%NS%accent-hover); +} + +button.small[_ngcontent-%COMP%]:focus-visible, +.table-scroll[_ngcontent-%COMP%]:focus-visible, +input[type=checkbox][_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +input.field[_ngcontent-%COMP%], +select[_ngcontent-%COMP%] { + height: 34px; + padding: 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background-color: var(--%NS%bg); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease); +} + +input.field[_ngcontent-%COMP%] { + text-overflow: ellipsis; +} + +input.field[_ngcontent-%COMP%]::placeholder { + color: var(--%NS%text-3); +} + +input.field[_ngcontent-%COMP%]:hover:not(:focus), +select[_ngcontent-%COMP%]:hover:not(:focus) { + border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%border-strong)); +} + +input.field[_ngcontent-%COMP%]:focus-visible, +select[_ngcontent-%COMP%]:focus-visible { + outline: none; + border-color: var(--%NS%accent); + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +.note[_ngcontent-%COMP%] { + margin: 0; + padding: 10px 14px; + border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent); + border-radius: var(--%NS%radius-sm); + background: color-mix(in srgb, var(--%NS%warn) 10%, transparent); + color: var(--%NS%text); + font-size: 13px; + line-height: 1.5; +} + +.empty[_ngcontent-%COMP%] { + display: grid; + gap: 6px; + justify-items: center; + margin: 0; + padding: 40px 24px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + text-align: center; + animation: enter 0.35s var(--%NS%ease) both; +} + +.empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { + margin: 0; + max-width: 480px; + line-height: 1.6; +} + +.empty-title[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-size: 14px; + font-weight: 600; +} + +.empty[_ngcontent-%COMP%] .small[_ngcontent-%COMP%] { + margin-top: 8px; +} + +.facts[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + align-items: baseline; + gap: 8px 24px; + margin: 0; + padding: 14px 16px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + font-size: 13px; +} + +.facts[_ngcontent-%COMP%]:empty { + display: none; +} + +dt[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +dd[_ngcontent-%COMP%] { + min-width: 0; + margin: 0; + color: var(--%NS%text); + overflow-wrap: anywhere; + font-variant-numeric: tabular-nums; +} + +.table-scroll[_ngcontent-%COMP%] { + overflow-x: auto; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + box-shadow: var(--%NS%shadow); + animation: enter 0.35s var(--%NS%ease) both; +} + +table[_ngcontent-%COMP%] { + width: 100%; + border-collapse: collapse; + font-size: 13px; + font-variant-numeric: tabular-nums; +} + +th[_ngcontent-%COMP%] { + padding: 10px 14px; + border-bottom: 1px solid var(--%NS%border); + background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface)); + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.06em; + text-align: left; + text-transform: uppercase; + white-space: nowrap; +} + +td[_ngcontent-%COMP%] { + padding: 10px 14px; + border-bottom: 1px solid var(--%NS%border); + color: var(--%NS%text); + line-height: 1.5; + vertical-align: top; + transition: background-color 0.15s var(--%NS%ease); +} + +tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child td[_ngcontent-%COMP%] { + border-bottom: none; +} + +tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover td[_ngcontent-%COMP%] { + background: var(--%NS%surface-2); +} + +.path[_ngcontent-%COMP%] { + color: var(--%NS%accent); + font-family: var(--%NS%font-mono); + font-size: 12.5px; + white-space: nowrap; +} + +h3[_ngcontent-%COMP%] { + margin: 8px 0 -4px; + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +@media (max-width: 480px) { + .facts[_ngcontent-%COMP%] { + grid-template-columns: minmax(0, 1fr); + gap: 2px; + } + .facts[_ngcontent-%COMP%] dd[_ngcontent-%COMP%] + dt[_ngcontent-%COMP%] { + margin-top: 8px; + } +} +[_nghost-%COMP%] { + display: grid; + gap: 16px; + min-width: 0; +} + +.name[_ngcontent-%COMP%] code[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); +} + +.source[_ngcontent-%COMP%] { + width: 1%; + white-space: nowrap; +} + +.chips[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin: 0; + padding: 0; + list-style: none; +} + +.chips[_ngcontent-%COMP%] .badge[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); + font-weight: 500; +} + +.facts[_ngcontent-%COMP%] code[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); +}`]})},iA=(e,t)=>t.id,aA=(e,t)=>t.phase;function oA(e,t){if(e&1&&(z(0,`p`,6),J(1),B()),e&2){let e=K();M(),Y(e.message())}}function sA(e,t){if(e&1&&(z(0,`p`,7),J(1),B()),e&2){let e=K();M(),Y(e.navigationOff)}}function cA(e,t){e&1&&(z(0,`span`,16),J(1,`→`),B(),z(2,`span`,17),J(3,`then`),B())}function lA(e,t){if(e&1&&(P(0,cA,4,0),z(1,`code`),J(2),B()),e&2){let e=t.$implicit,n=t.$index;F(n===0?-1:0),M(2),Y(e)}}function uA(e,t){if(e&1&&(z(0,`li`)(1,`code`),J(2),B(),z(3,`span`,16),J(4,` → `),B(),z(5,`span`,17),J(6,` to `),B(),z(7,`code`),J(8),B(),J(9),B()),e&2){let e=t.$implicit,n=K(3);M(2),Y(e.from),M(6),Y(e.to),M(),X(`: `,n.hopCause(e),` `)}}function dA(e,t){if(e&1&&(z(0,`div`,11)(1,`p`,12)(2,`span`,13),J(3),B(),I(4,lA,3,2,null,null,Cg),B(),z(6,`ol`,14),I(7,uA,10,3,`li`,null,Cg),B(),z(9,`p`,15),J(10),B()()),e&2){let e=t.$implicit,n=K(2);M(3),Y(n.loopTitle(e)),M(),L(e.cycle),M(3),L(e.hops),M(3),Y(n.loopMeta(e))}}function fA(e,t){if(e&1&&(z(0,`section`,9)(1,`h3`,10),J(2),B(),I(3,dA,11,2,`div`,11,Cg),B()),e&2){let e=K();M(2),X(` `,e.loops().length===1?`Loop detected`:e.loops().length+` loops detected`,` `),M(),L(e.loops())}}function pA(e,t){if(e&1&&(z(0,`span`),V(1,`i`),J(2),B()),e&2){let e=t.$implicit,n=K(2);M(),C_(`background`,n.color(e)),M(),Y(e)}}function mA(e,t){if(e&1&&(z(0,`time`),J(1),B()),e&2){let e=K().$implicit,t=K(2);M(),Y(t.time(e.startedAt))}}function hA(e,t){if(e&1&&(z(0,`span`,16),J(1,`→`),B(),z(2,`span`,17),J(3,`redirected to`),B(),z(4,`code`,25),J(5),B()),e&2){let e=K().$implicit;M(5),Y(e.finalUrl)}}function gA(e,t){if(e&1&&(z(0,`span`,28),J(1),B()),e&2){let e=K().$implicit;M(),Y(e.endedAt===void 0&&e.outcome!==`pending`?`before DevTools connected`:`started before DevTools connected`)}}function _A(e,t){if(e&1&&(z(0,`span`,29),J(1),B()),e&2){let e=K().$implicit;M(),X(``,e.phases?.total,`ms`)}}function vA(e,t){if(e&1&&(z(0,`span`,29),J(1),B()),e&2){let e=K().$implicit;M(),X(``,e.endedAt-e.startedAt,`ms`)}}function yA(e,t){e&1&&(z(0,`span`,30),J(1,`probe`),B())}function bA(e,t){if(e&1&&(z(0,`span`,13),J(1,`loop`),z(2,`span`,17),J(3),B()()),e&2){let e=t,n=K(3);M(3),Z(`: part of `,n.loopTitle(e),` `,e.cycle.join(` then `))}}function xA(e,t){if(e&1&&V(0,`span`),e&2){let e=t.$implicit,n=K(4);C_(`width`,e.width,`%`)(`background`,n.color(e.phase)),N(`title`,e.phase+` `+e.ms+`ms`)}}function SA(e,t){if(e&1&&(z(0,`div`,31),I(1,xA,1,5,`span`,36,aA),B()),e&2){let e=K().$implicit,t=K(2);N(`aria-label`,t.barLabel(e)),M(),L(t.bars(e))}}function CA(e,t){if(e&1&&(z(0,`dt`),J(1,`From`),B(),z(2,`dd`)(3,`code`),J(4),B()()),e&2){let e=K().$implicit;M(4),Y(e.from)}}function wA(e,t){if(e&1&&(z(0,`dt`),J(1,`Started by`),B(),z(2,`dd`),J(3),B()),e&2){let e=K().$implicit;M(3),Z(``,e.caller,` (`,e.trigger,`)`)}}function TA(e,t){if(e&1&&(z(0,`dt`),J(1,`Extras`),B(),z(2,`dd`),J(3),B()),e&2){let e=K().$implicit;M(3),Y(e.extras?.join(`, `))}}function EA(e,t){if(e&1&&(z(0,`dt`),J(1,`Redirect of`),B(),z(2,`dd`),J(3),B()),e&2){let e=K().$implicit;M(3),X(`#`,e.redirectedFrom)}}function DA(e,t){if(e&1&&(z(0,`div`),J(1,` This navigation: `),z(2,`code`),J(3),B(),J(4,` to `),z(5,`code`),J(6),B(),J(7),B()),e&2){let e=t.$implicit,n=K(4);M(3),Y(e.from),M(3),Y(e.to),M(),X(`, `,n.hopCause(e),` `)}}function OA(e,t){if(e&1&&(z(0,`dt`),J(1,`Loop`),B(),z(2,`dd`,37),J(3),I(4,DA,8,3,`div`,null,Cg),B()),e&2){let e=t,n=K().$implicit,r=K(2);M(3),X(` `,e.cycle.join(` → `),` `),M(),L(r.hopsOf(e,n))}}function kA(e,t){if(e&1&&(z(0,`dt`),J(1,`Redirects to`),B(),z(2,`dd`)(3,`code`),J(4),B(),J(5),B()),e&2){let e=K().$implicit;M(4),Y(e.redirectTo),M(),X(` (`,e.redirectKind,`) `)}}function AA(e,t){if(e&1&&(z(0,`dt`),J(1,`Guards`),B(),z(2,`dd`),J(3),B()),e&2){let e=K().$implicit,t=K(2);M(3),Z(``,e.guards.names.join(`, `)||`none`,`: `,t.guardResult(e))}}function jA(e,t){if(e&1&&(z(0,`div`)(1,`code`),J(2),B(),J(3),z(4,`code`),J(5),B(),J(6,`: `),z(7,`strong`),J(8),B(),J(9),B()),e&2){let e=t.$implicit,n=K(4);M(2),Y(e.guard),M(),X(` `,e.kind,` on `),M(2),Y(e.route),M(2),q(`bad`,n.isBad(e.result)),M(),Y(e.result),M(),X(` (`,e.ms,`ms) `)}}function MA(e,t){if(e&1&&(z(0,`dt`),J(1,`Runs`),B(),z(2,`dd`),I(3,jA,10,7,`div`,null,Cg),B()),e&2){let e=K().$implicit;M(3),L(e.runs)}}function NA(e,t){if(e&1&&J(0),e&2){let e=K(2).$implicit;X(` leaving `,e.checked.deactivate.join(`, `),`; `)}}function PA(e,t){if(e&1&&(z(0,`dt`),J(1,`Checked`),B(),z(2,`dd`),P(3,NA,1,1),J(4),B()),e&2){let e=K().$implicit;M(3),F(e.checked.deactivate.length?3:-1),M(),X(` entering `,e.checked.activate.join(`, `)||`nothing new`,` `)}}function FA(e,t){if(e&1&&(z(0,`dt`),J(1,`Resolvers`),B(),z(2,`dd`),J(3),B()),e&2){let e=K().$implicit;M(3),Y(e.resolvers?.names?.join(`, `))}}function IA(e,t){if(e&1&&(z(0,`dt`),J(1,`Lazy loaded`),B(),z(2,`dd`),J(3),B()),e&2){let e=K().$implicit;M(3),Y(e.lazyLoaded?.join(`, `))}}function LA(e,t){if(e&1&&(z(0,`dt`),J(1,`Reused`),B(),z(2,`dd`),J(3),B()),e&2){let e=K().$implicit;M(3),X(` `,e.reused?.join(`, `),` (component kept, only inputs and params change) `)}}function RA(e,t){if(e&1&&(z(0,`dt`),J(1,`HTTP`),B(),z(2,`dd`),J(3),B()),e&2){let e=K().$implicit;M(3),Z(``,e.requests.count,` request(s): `,e.requests.urls.join(`, `))}}function zA(e,t){if(e&1&&(z(0,`dt`),J(1,`Scroll`),B(),z(2,`dd`),J(3),B()),e&2){let e=K().$implicit;M(3),Y(e.scroll)}}function BA(e,t){if(e&1&&(z(0,`dt`),J(1,`Title after`),B(),z(2,`dd`),J(3),B()),e&2){let e=K().$implicit;M(3),Y(e.title)}}function VA(e,t){if(e&1&&(z(0,`dt`),J(1,`Warnings`),B(),z(2,`dd`),J(3),B()),e&2){let e=K().$implicit;M(3),Y(e.warnings?.join(` · `))}}function HA(e,t){if(e&1&&(z(0,`dt`),J(1,`Reason`),B(),z(2,`dd`,37),J(3),B()),e&2){let e=K().$implicit,t=K(2);M(3),Y(t.reasonText(e))}}function UA(e,t){if(e&1&&(z(0,`dt`),J(1,`Error`),B(),z(2,`dd`,37),J(3),B()),e&2){let e=K().$implicit;M(3),Y(e.errorCode)}}function WA(e,t){if(e&1&&(z(0,`dt`),J(1,`Error handler`),B(),z(2,`dd`),J(3),B()),e&2){let e=K().$implicit;M(3),Y(e.errorHandler)}}function GA(e,t){if(e&1&&(z(0,`dt`),J(1,`Earlier`),B(),z(2,`dd`),J(3),B()),e&2){let e=K().$implicit;M(3),X(``,e.earlier,` navigation(s) before DevTools connected`)}}function KA(e,t){if(e&1){let e=W();z(0,`li`)(1,`div`,23),P(2,mA,2,1,`time`),z(3,`span`,24),J(4),B(),z(5,`code`,25),J(6),B(),P(7,hA,6,1),z(8,`span`,26)(9,`span`,27),J(10),B(),P(11,gA,2,1,`span`,28)(12,_A,2,1,`span`,29)(13,vA,2,1,`span`,29),P(14,yA,2,0,`span`,30),P(15,bA,4,2,`span`,13),B()(),P(16,SA,3,1,`div`,31),z(17,`dl`,32),P(18,CA,5,1),P(19,wA,4,2),P(20,TA,4,1),P(21,EA,4,1),P(22,OA,6,1),P(23,kA,6,2),P(24,AA,4,2),P(25,MA,5,0),P(26,PA,5,2),P(27,FA,4,1),P(28,IA,4,1),P(29,LA,4,1),P(30,RA,4,2),P(31,zA,4,1),P(32,BA,4,1),P(33,VA,4,1),P(34,HA,4,1),P(35,UA,4,1),P(36,WA,4,1),P(37,GA,4,1),B(),z(38,`div`,33)(39,`button`,34),G(`click`,function(){let t=k(e).$implicit;return A(K(2).replay(t))}),J(40,` Replay `),B(),z(41,`button`,35),G(`click`,function(){let t=k(e).$implicit;return A(K(2).copy(t))}),J(42,` Copy repro `),B()()()}if(e&2){let e,n,r=t.$implicit,i=K(2);q(`in-loop`,!!i.loopOf(r)),M(2),F(r.beforeConnect?-1:2),M(2),X(`#`,r.id),M(2),Y(r.url),M(),F(r.finalUrl&&r.finalUrl!==r.url?7:-1),M(2),N(`data-tone`,i.tone(r.outcome)),M(),Y(r.outcome),M(),F(r.beforeConnect?11:r.phases?.total===void 0?r.endedAt===void 0?-1:13:12),M(3),F(r.probe?14:-1),M(),F((e=i.loopOf(r))?15:-1,e),M(),F(i.bars(r).length?16:-1),M(2),F(r.from?18:-1),M(),F(r.caller?19:-1),M(),F(r.extras?.length?20:-1),M(),F(r.redirectedFrom===void 0?-1:21),M(),F((n=i.loopOf(r))?22:-1,n),M(),F(r.redirectTo?23:-1),M(),F(r.guards&&(r.guards.names.length||r.guards.passed===!1)?24:-1),M(),F(r.runs?.length?25:-1),M(),F(r.checked&&(r.checked.activate.length||r.checked.deactivate.length)?26:-1),M(),F(r.resolvers?.names?.length?27:-1),M(),F(r.lazyLoaded?.length?28:-1),M(),F(r.reused?.length?29:-1),M(),F(r.requests?30:-1),M(),F(r.scroll?31:-1),M(),F(r.title?32:-1),M(),F(r.warnings?.length?33:-1),M(),F(r.reason||r.code?34:-1),M(),F(r.errorCode?35:-1),M(),F(r.errorHandler?36:-1),M(),F(r.earlier?37:-1),M(2),R(`disabled`,!i.navigationAllowed()),N(`aria-describedby`,i.navigationAllowed()?null:`route-timeline-writes-off`)(`aria-label`,`Replay navigation `+r.id),M(2),N(`aria-label`,`Copy repro for navigation `+r.id)}}function qA(e,t){if(e&1&&(z(0,`div`,18)(1,`span`,19),J(2),B(),z(3,`div`,20),I(4,pA,3,3,`span`,null,wg),B()(),z(6,`ol`,21),I(7,KA,43,36,`li`,22,iA),B()),e&2){let e=K();M(2),Z(``,e.items().length,` of `,e.page().navigations.length,` navigation(s)`),M(2),L(e.phases),M(3),L(e.items())}}function JA(e,t){if(e&1){let e=W();z(0,`div`,38)(1,`p`,39),J(2,`No navigations match the current filters.`),B(),z(3,`p`,28),J(4),B(),z(5,`button`,35),G(`click`,function(){k(e);let t=K(2),n=n_(2);return t.clearFilters(),A(n.focus())}),J(6,` Clear filters `),B()()}if(e&2){let e=K(2);M(4),X(` `,e.page().navigations.length,` navigation(s) are hidden. Clear the filters to see them. `)}}function YA(e,t){e&1&&(z(0,`div`,38)(1,`p`,39),J(2,`No navigations since DevTools connected.`),B(),z(3,`p`,28),J(4,`Earlier ones are not visible. Click a link in the app to record one.`),B()())}function XA(e,t){e&1&&P(0,JA,7,1,`div`,38)(1,YA,5,0,`div`,38),e&2&&F(+!K().page().navigations.length)}var ZA=[`recognize`,`guards`,`resolve`,`activate`],QA={recognize:`#60a5fa`,guards:`#f59e0b`,resolve:`#2dd4bf`,activate:`#34d399`},$A=class e{page=$.required();rpc=$(null);maxNavigations=Q(()=>tE(this.rpc()).limits.navigations);navigationAllowed=Q(()=>nE(this.rpc(),`router`));navigationOff=HT(`router`);phases=ZA;filter=j(``);onlyProblems=j(!1);message=j(``);loops=Q(()=>this.page().loops??[]);loopById=Q(()=>{let e=new Map;for(let t of this.loops())for(let n of t.ids)e.set(n,t);return e});items=Q(()=>{let e=this.filter().toLowerCase();return[...this.page().navigations].reverse().filter(t=>(!e||t.url.toLowerCase().includes(e)||!!t.finalUrl?.toLowerCase().includes(e))&&(!this.onlyProblems()||![`succeeded`,`pending`].includes(t.outcome)||this.loopById().has(t.id)))});loopOf(e){return this.loopById().get(e.id)}loopTitle(e){return e.kind===`burst`?`navigation loop`:`redirect loop`}hopsOf(e,t){return e.hops.filter(e=>e.id===t.id)}hopCause(e){return e.via===`navigate`?`#${e.id} started by ${e.by??`code`}`:`${e.via===`redirectTo`?`config`:`${e.via} redirect`}${e.by?` ${e.by}`:e.via===`redirectTo`?` redirectTo`:``} in #${e.id}`}loopMeta(e){let t=e.ids.length>1?`Navigations #${e.ids[0]} to #${e.ids[e.ids.length-1]}`:`Navigation #${e.ids[0]}`,n=e.bounces>1?`, came back ${e.bounces} times`:``,r=e.guards.length?` Guards involved: ${e.guards.join(`, `)}.`:``;return`${t}${n}; ${e.end}.${r}`}reasonText(e){return[e.code,e.reason].filter(Boolean).join(`: `)}clearFilters(){this.filter.set(``),this.onlyProblems.set(!1)}tone(e){return YO(e)}color(e){return QA[e]}bars(e){let t=e.phases?.total;return t?ZA.filter(t=>(e.phases?.[t]??0)>0).map(n=>({phase:n,ms:e.phases[n],width:Math.max(1,e.phases[n]/t*100)})):[]}barLabel(e){return`Phases: ${this.bars(e).map(e=>`${e.phase} ${e.ms}ms`).join(`, `)}`}guardResult(e){let t=e.guards?.passed;return t===!0?`passed`:t===!1?e.outcome===`redirected`?`redirected`:`blocked`:e.outcome===`pending`?`running`:`did not finish, navigation ${e.outcome}`}isBad(e){return e===`false`||/^(UrlTree|RedirectCommand|threw)/.test(e)}time=rD;async toggleInstrument(e){let t=e.target.checked,n=await JO(this.rpc(),this.page().pageId,{action:`instrument`,on:t});this.message.set(n?.error?String(n.error):t?`Recording each guard and resolver.`:`Stopped recording guards and resolvers.`)}async replay(e){this.message.set(`Replaying #${e.id}…`);let t=await JO(this.rpc(),this.page().pageId,{action:`replay`,id:e.id});if(!t||t.error){this.message.set(String(t?.error??`Replay failed.`));return}let n=t.replay;this.message.set(`Replay of #${e.id}: ${n?.outcome??`unknown`}${t.same?` (same as before)`:` (different from before)`}.`)}async copy(e){let t=await qO(this.rpc(),`router-export`,{pageId:this.page().pageId,id:e.id});if(!t){this.message.set(`Could not build the repro.`);return}try{await navigator.clipboard.writeText(t),this.message.set(`Copied a markdown repro of #${e.id}.`)}catch{this.message.set(`The clipboard is not available here.`)}}exportJson(){let e=new Blob([JSON.stringify(this.page().navigations,null,2)],{type:`application/json`}),t=URL.createObjectURL(e),n=document.createElement(`a`);n.href=t,n.download=`navigations-${this.page().pageId}.json`,n.click(),URL.revokeObjectURL(t)}static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-route-timeline`]],inputs:{page:[1,`page`],rpc:[1,`rpc`]},decls:17,vars:9,consts:[[`filterInput`,``],[1,`toolbar`],[`type`,`text`,`aria-label`,`Filter navigations by URL`,`placeholder`,`Filter by URL`,1,`field`,3,`input`,`value`],[1,`check`],[`type`,`checkbox`,3,`change`,`checked`],[`type`,`button`,1,`small`,`export`,3,`click`],[`role`,`status`,1,`message`],[`id`,`route-timeline-writes-off`,1,`message`],[`what`,`navigations`,`limit`,`navigations`,3,`dropped`,`max`],[`aria-labelledby`,`loops-heading`,1,`loops`],[`id`,`loops-heading`],[1,`loop`],[1,`chain`],[`data-tone`,`bad`,1,`badge`],[1,`hops`],[1,`muted`,`loop-meta`],[`aria-hidden`,`true`,1,`arrow`],[1,`visually-hidden`],[1,`meta-row`],[1,`muted`,`count`],[`aria-hidden`,`true`,1,`legend`],[1,`navs`],[3,`in-loop`],[1,`head`],[1,`id`],[1,`url`],[1,`meta`],[1,`badge`],[1,`muted`],[1,`muted`,`ms`],[1,`tag`],[`role`,`img`,1,`bar`],[1,`details`],[1,`actions`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`type`,`button`,1,`small`,3,`click`],[3,`width`,`background`],[1,`reason`],[1,`empty`],[1,`empty-title`]],template:function(e,t){e&1&&(z(0,`div`,1)(1,`input`,2,0),G(`input`,function(e){return t.filter.set(e.target.value)}),B(),z(3,`label`,3)(4,`input`,4),G(`change`,function(e){return t.onlyProblems.set(e.target.checked)}),B(),J(5,` Only problems `),B(),z(6,`label`,3)(7,`input`,4),G(`change`,function(e){return t.toggleInstrument(e)}),B(),J(8,` Record each guard and resolver `),B(),z(9,`button`,5),G(`click`,function(){return t.exportJson()}),J(10,`Export JSON`),B()(),P(11,oA,2,1,`p`,6),P(12,sA,2,1,`p`,7),V(13,`app-limit-note`,8),P(14,fA,5,1,`section`,9),P(15,qA,9,2)(16,XA,2,1)),e&2&&(M(),R(`value`,t.filter()),M(3),R(`checked`,t.onlyProblems()),M(3),R(`checked`,t.page().instrumented),M(4),F(t.message()?11:-1),M(),F(t.navigationAllowed()?-1:12),M(),R(`dropped`,t.page().dropped??0)(`max`,t.maxNavigations()),M(),F(t.loops().length?14:-1),M(),F(t.items().length?15:16))},dependencies:[oD],styles:[`.muted[_ngcontent-%COMP%] { + color: var(--%NS%text-2); + font-size: 13px; + line-height: 1.5; +} + +.nil[_ngcontent-%COMP%] { + color: var(--%NS%text-3); +} + +code[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); + font-size: 12.5px; + color: var(--%NS%text); + overflow-wrap: anywhere; +} + +.tag[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + max-width: 100%; + min-height: 20px; + margin: 2px 4px 2px 0; + padding: 0 8px; + border: 1px solid var(--%NS%border); + border-radius: 99px; + background: var(--%NS%surface-2); + color: var(--%NS%text); + font-family: var(--%NS%font-mono); + font-size: 11.5px; + line-height: 1.4; + vertical-align: middle; + overflow-wrap: anywhere; + white-space: normal; +} + +.badge[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + min-height: 20px; + padding: 0 8px; + border: 1px solid var(--%NS%border-strong); + border-radius: 99px; + background: var(--%NS%surface-2); + color: var(--%NS%text); + font-size: 11px; + font-weight: 600; + line-height: 1.4; + white-space: nowrap; + vertical-align: middle; +} + +.badge[data-tone=good][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); + color: var(--%NS%ok); +} + +.badge[data-tone=warn][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); + background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); + color: var(--%NS%warn); +} + +.badge[data-tone=bad][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + color: var(--%NS%danger); +} + +button.small[_ngcontent-%COMP%] { + display: inline-flex; + flex: none; + align-items: center; + justify-content: center; + gap: 6px; + height: 34px; + padding: 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + font-weight: 500; + white-space: nowrap; + cursor: pointer; + transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease); +} + +button.small[_ngcontent-%COMP%]:hover:not(:disabled) { + background: var(--%NS%surface-3); + border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%border-strong)); +} + +button.small[_ngcontent-%COMP%]:active:not(:disabled) { + transform: translateY(1px); +} + +button.small[_ngcontent-%COMP%]:disabled { + opacity: 0.55; + cursor: not-allowed; +} + +button.small.primary[_ngcontent-%COMP%] { + border-color: var(--%NS%accent); + background: var(--%NS%accent); + color: var(--%NS%accent-ink); + font-weight: 600; +} + +button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) { + border-color: var(--%NS%accent-hover); + background: var(--%NS%accent-hover); +} + +button.small[_ngcontent-%COMP%]:focus-visible, +.table-scroll[_ngcontent-%COMP%]:focus-visible, +input[type=checkbox][_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +input.field[_ngcontent-%COMP%], +select[_ngcontent-%COMP%] { + height: 34px; + padding: 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background-color: var(--%NS%bg); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease); +} + +input.field[_ngcontent-%COMP%] { + text-overflow: ellipsis; +} + +input.field[_ngcontent-%COMP%]::placeholder { + color: var(--%NS%text-3); +} + +input.field[_ngcontent-%COMP%]:hover:not(:focus), +select[_ngcontent-%COMP%]:hover:not(:focus) { + border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%border-strong)); +} + +input.field[_ngcontent-%COMP%]:focus-visible, +select[_ngcontent-%COMP%]:focus-visible { + outline: none; + border-color: var(--%NS%accent); + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +.note[_ngcontent-%COMP%] { + margin: 0; + padding: 10px 14px; + border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent); + border-radius: var(--%NS%radius-sm); + background: color-mix(in srgb, var(--%NS%warn) 10%, transparent); + color: var(--%NS%text); + font-size: 13px; + line-height: 1.5; +} + +.empty[_ngcontent-%COMP%] { + display: grid; + gap: 6px; + justify-items: center; + margin: 0; + padding: 40px 24px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + text-align: center; + animation: enter 0.35s var(--%NS%ease) both; +} + +.empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { + margin: 0; + max-width: 480px; + line-height: 1.6; +} + +.empty-title[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-size: 14px; + font-weight: 600; +} + +.empty[_ngcontent-%COMP%] .small[_ngcontent-%COMP%] { + margin-top: 8px; +} + +.facts[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + align-items: baseline; + gap: 8px 24px; + margin: 0; + padding: 14px 16px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + font-size: 13px; +} + +.facts[_ngcontent-%COMP%]:empty { + display: none; +} + +dt[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +dd[_ngcontent-%COMP%] { + min-width: 0; + margin: 0; + color: var(--%NS%text); + overflow-wrap: anywhere; + font-variant-numeric: tabular-nums; +} + +.table-scroll[_ngcontent-%COMP%] { + overflow-x: auto; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + box-shadow: var(--%NS%shadow); + animation: enter 0.35s var(--%NS%ease) both; +} + +table[_ngcontent-%COMP%] { + width: 100%; + border-collapse: collapse; + font-size: 13px; + font-variant-numeric: tabular-nums; +} + +th[_ngcontent-%COMP%] { + padding: 10px 14px; + border-bottom: 1px solid var(--%NS%border); + background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface)); + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.06em; + text-align: left; + text-transform: uppercase; + white-space: nowrap; +} + +td[_ngcontent-%COMP%] { + padding: 10px 14px; + border-bottom: 1px solid var(--%NS%border); + color: var(--%NS%text); + line-height: 1.5; + vertical-align: top; + transition: background-color 0.15s var(--%NS%ease); +} + +tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child td[_ngcontent-%COMP%] { + border-bottom: none; +} + +tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover td[_ngcontent-%COMP%] { + background: var(--%NS%surface-2); +} + +.path[_ngcontent-%COMP%] { + color: var(--%NS%accent); + font-family: var(--%NS%font-mono); + font-size: 12.5px; + white-space: nowrap; +} + +h3[_ngcontent-%COMP%] { + margin: 8px 0 -4px; + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +@media (max-width: 480px) { + .facts[_ngcontent-%COMP%] { + grid-template-columns: minmax(0, 1fr); + gap: 2px; + } + .facts[_ngcontent-%COMP%] dd[_ngcontent-%COMP%] + dt[_ngcontent-%COMP%] { + margin-top: 8px; + } +} +[_nghost-%COMP%] { + display: grid; + gap: 12px; + min-width: 0; +} + +.toolbar[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 8px 16px; + align-items: center; + padding: 8px 12px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + color: var(--%NS%text); + font-size: 13px; +} + +.toolbar[_ngcontent-%COMP%] .field[_ngcontent-%COMP%] { + flex: 1 1 200px; + min-width: 0; +} + +.export[_ngcontent-%COMP%] { + margin-left: auto; +} + +.check[_ngcontent-%COMP%] { + display: inline-flex; + gap: 8px; + align-items: center; + min-height: 34px; + color: var(--%NS%text-2); + cursor: pointer; + user-select: none; + transition: color 0.15s var(--%NS%ease); +} + +.check[_ngcontent-%COMP%]:hover { + color: var(--%NS%text); +} + +.check[_ngcontent-%COMP%] input[_ngcontent-%COMP%] { + flex: none; + width: 14px; + height: 14px; + margin: 0; + accent-color: var(--%NS%accent); + cursor: pointer; +} + +.message[_ngcontent-%COMP%] { + margin: 0; + padding: 8px 12px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + color: var(--%NS%text); + font-size: 13px; + overflow-wrap: anywhere; +} + +.meta-row[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 6px 16px; + align-items: center; + justify-content: space-between; + padding: 0 4px; +} + +.count[_ngcontent-%COMP%] { + font-size: 12px; + font-variant-numeric: tabular-nums; +} + +.legend[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 6px 16px; + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.legend[_ngcontent-%COMP%] span[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + gap: 6px; +} + +.legend[_ngcontent-%COMP%] i[_ngcontent-%COMP%] { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 99px; +} + +.navs[_ngcontent-%COMP%] { + display: grid; + gap: 8px; + margin: 0; + padding: 0; + list-style: none; +} + +.navs[_ngcontent-%COMP%] > li[_ngcontent-%COMP%] { + min-width: 0; + padding: 12px 16px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + font-size: 13px; + animation: enter 0.35s var(--%NS%ease) both; + transition: border-color 0.15s var(--%NS%ease); +} + +.navs[_ngcontent-%COMP%] > li[_ngcontent-%COMP%]:hover { + border-color: var(--%NS%border-strong); +} + +.head[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 6px 8px; + align-items: center; + min-width: 0; + font-variant-numeric: tabular-nums; +} + +.head[_ngcontent-%COMP%] .url[_ngcontent-%COMP%] { + min-width: 0; + color: var(--%NS%text-strong); + font-weight: 500; +} + +.id[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-family: var(--%NS%font-mono); + font-size: 12px; +} + +.arrow[_ngcontent-%COMP%] { + color: var(--%NS%text-3); +} + +.meta[_ngcontent-%COMP%] { + display: inline-flex; + flex-wrap: wrap; + gap: 6px 8px; + align-items: center; + margin-left: auto; +} + +.ms[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); + font-size: 12px; +} + +time[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-family: var(--%NS%font-mono); + font-size: 12px; + font-variant-numeric: tabular-nums; +} + +.bar[_ngcontent-%COMP%] { + display: flex; + gap: 2px; + height: 6px; + margin: 12px 0 4px; + overflow: hidden; + border-radius: 99px; + background: var(--%NS%surface-3); +} + +.bar[_ngcontent-%COMP%] span[_ngcontent-%COMP%] { + display: block; + min-width: 2px; +} + +.details[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + align-items: baseline; + gap: 6px 16px; + margin: 12px 0 0; + font-size: 12.5px; + line-height: 1.5; +} + +.details[_ngcontent-%COMP%]:empty { + display: none; +} + +.details[_ngcontent-%COMP%] dt[_ngcontent-%COMP%] { + letter-spacing: 0.06em; +} + +.reason[_ngcontent-%COMP%], +.bad[_ngcontent-%COMP%] { + color: var(--%NS%danger); +} + +.navs[_ngcontent-%COMP%] > li.in-loop[_ngcontent-%COMP%] { + box-shadow: inset 3px 0 0 var(--%NS%danger); +} + +.loops[_ngcontent-%COMP%] { + display: grid; + gap: 8px; + padding: 12px 16px; + border: 1px solid color-mix(in srgb, var(--%NS%danger) 35%, var(--%NS%border)); + border-radius: var(--%NS%radius); + background: color-mix(in srgb, var(--%NS%danger) 6%, var(--%NS%surface)); + color: var(--%NS%text); + font-size: 13px; + line-height: 1.5; +} + +.loops[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-strong); + font-size: 13px; + letter-spacing: normal; + text-transform: none; +} + +.loop[_ngcontent-%COMP%] + .loop[_ngcontent-%COMP%] { + padding-top: 8px; + border-top: 1px solid var(--%NS%border); +} + +.chain[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 4px 8px; + align-items: center; + margin: 0; +} + +.hops[_ngcontent-%COMP%] { + margin: 6px 0 0; + padding-left: 20px; +} + +.hops[_ngcontent-%COMP%] li[_ngcontent-%COMP%] + li[_ngcontent-%COMP%] { + margin-top: 2px; +} + +.loop-meta[_ngcontent-%COMP%] { + margin: 6px 0 0; + font-size: 12px; +} + +.actions[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 12px; + padding-top: 12px; + border-top: 1px solid var(--%NS%border); +} + +@media (max-width: 480px) { + .details[_ngcontent-%COMP%] { + grid-template-columns: minmax(0, 1fr); + gap: 2px; + } + .details[_ngcontent-%COMP%] dd[_ngcontent-%COMP%] + dt[_ngcontent-%COMP%] { + margin-top: 6px; + } + .export[_ngcontent-%COMP%] { + margin-left: 0; + } +}`]})},ej=()=>[],tj=(e,t)=>t.node.id;function nj(e,t){if(e&1&&(J(0,` with `),H(1,`code`),J(2),uv(3,`json`),U()),e&2){let e=K(2);M(2),Y(fv(3,1,e.params))}}function rj(e,t){if(e&1&&(H(0,`span`,15),J(1,`match`),U(),J(2,` Matches `),H(3,`code`,16),J(4),U(),P(5,nj,4,3)),e&2){let e=K(),t=K();M(4),Y(t.chainText(e)),M(),F(t.hasKeys(e.params)?5:-1)}}function ij(e,t){if(e&1&&(J(0,` Nearest: `),H(1,`code`),J(2),U()),e&2){let e=K(2);M(2),Y(e.nearest.join(`, `))}}function aj(e,t){if(e&1&&(H(0,`span`,17),J(1,`no match`),U(),J(2,` Matches no route (NG04002). `),P(3,ij,3,1)),e&2){let e=K();M(3),F(e.nearest.length?3:-1)}}function oj(e,t){if(e&1&&(H(0,`div`,14),J(1),U()),e&2){let e=t.$implicit;M(),Y(e)}}function sj(e,t){if(e&1&&(H(0,`div`,6),P(1,rj,6,2)(2,aj,4,1),I(3,oj,2,1,`div`,14,wg),U()),e&2){let e=t;N(`data-matched`,e.matched),M(),F(e.matched?1:2),M(2),L(e.notes)}}function cj(e,t){if(e&1&&(H(0,`p`,7),J(1),U()),e&2){let e=K();M(),Y(e.message())}}function lj(e,t){if(e&1&&(H(0,`p`,8),J(1),U()),e&2){let e=K();M(),Y(e.navigationOff)}}function uj(e,t){e&1&&J(0),e&2&&X(` `,t,` route(s) left out: the page lists at most 200 routes per level and 1000 in total. `)}function dj(e,t){if(e&1&&(H(0,`p`,11),J(1),P(2,uj,1,1),U()),e&2){let e,t=K();M(),Z(` Generation `,t.page().generation,` · `,t.rows().length,` route(s). Lazy routes show their children once loaded. `),M(),F((e=t.page().configTruncated)?2:-1,e)}}function fj(e,t){if(e&1&&(H(0,`div`,12)(1,`p`,18),J(2),U(),H(3,`p`,14),J(4),U()()),e&2){let e=K();M(2),X(` `,e.page().setup?.mode===`events-only`?`This build has no debug utils, so the live config cannot be read.`:`The page has not reported its route config yet.`,` `),M(2),X(` `,e.page().setup?.mode===`events-only`?`Run the app with the development build to inspect the live config.`:`It appears once the router initializes. Navigate in the app if it stays empty.`,` `)}}function pj(e,t){if(e&1){let e=W();H(0,`div`,12)(1,`p`,18),J(2,`No routes match the filter.`),U(),H(3,`p`,14),J(4,`Try a shorter path or a component name.`),U(),H(5,`button`,5),Qg(`click`,function(){k(e);let t=K(),n=n_(13);return t.filter.set(``),A(n.focus())}),J(6,` Clear filter `),U()()}}function mj(e,t){e&1&&(H(0,`span`,23),J(1,`active`),U())}function hj(e,t){if(e&1&&(H(0,`span`,23),J(1),U()),e&2){let e=K().$implicit;M(),X(`lazy `,e.node.lazy)}}function gj(e,t){if(e&1&&(H(0,`span`,23),J(1),U()),e&2){let e=K().$implicit;M(),X(`outlet `,e.node.outlet)}}function _j(e,t){if(e&1&&(H(0,`span`,24)(1,`span`,20),J(2,`declared in `),U(),J(3),U()),e&2){let e=K().$implicit;M(3),Y(e.source)}}function vj(e,t){if(e&1&&(H(0,`span`,25),J(1,`redirect `),H(2,`span`,29),J(3,`→`),U(),H(4,`code`),J(5),U()()),e&2){let e=K().$implicit;M(5),Y(e.node.redirectTo)}}function yj(e,t){if(e&1&&J(0),e&2){let e=K().$implicit;X(` `,e.node.component??(e.node.lazy===`unloaded`?`lazy, not loaded yet`:e.node.kind),` `)}}function bj(e,t){if(e&1&&(H(0,`span`,23),J(1),U()),e&2){let e=t.$implicit;M(),Y(e)}}function xj(e,t){if(e&1&&(H(0,`span`,23),J(1),U()),e&2){let e=t.$implicit;M(),X(`resolve `,e)}}function Sj(e,t){e&1&&(H(0,`span`,30),J(1,`–`),U(),H(2,`span`,20),J(3,`none`),U())}function Cj(e,t){if(e&1&&J(0),e&2){let e=K().$implicit;X(` `,e.node.title,` `)}}function wj(e,t){e&1&&(H(0,`span`,30),J(1,`–`),U(),H(2,`span`,20),J(3,`none`),U())}function Tj(e,t){if(e&1){let e=W();H(0,`input`,33),Qg(`input`,function(t){let n=k(e).$implicit,r=K(2).$implicit;return A(K(2).setParam(r.node.id,n,t.target.value))}),U()}if(e&2){let e=t.$implicit,n=K(2).$implicit;Vg(`placeholder`,e),N(`aria-label`,e+` for `+n.node.fullPath)}}function Ej(e,t){if(e&1){let e=W();I(0,Tj,1,2,`input`,31,wg),H(2,`button`,32),Qg(`click`,function(){k(e);let t=K().$implicit;return A(K(2).navigate(t.node))}),J(3,` Go `),U()}if(e&2){let e=K().$implicit,t=K(2);L(t.params(e.node)),M(2),Vg(`disabled`,!t.navigationAllowed()),N(`aria-describedby`,t.navigationAllowed()?null:`route-tree-writes-off`)(`aria-label`,`Navigate to `+e.node.fullPath)}}function Dj(e,t){if(e&1){let e=W();H(0,`button`,5),Qg(`click`,function(){k(e);let t=K().$implicit;return A(K(2).resolveLazy(t.node))}),J(1,` Read lazy `),U()}if(e&2){let e=K().$implicit;N(`aria-label`,`Read lazy routes of `+e.node.fullPath)}}function Oj(e,t){if(e&1&&(H(0,`tr`)(1,`td`,22),J(2),P(3,mj,2,0,`span`,23),P(4,hj,2,1,`span`,23),P(5,gj,2,1,`span`,23),P(6,_j,4,1,`span`,24),U(),H(7,`td`),P(8,vj,6,1,`span`,25)(9,yj,1,1),U(),H(10,`td`),I(11,bj,2,1,`span`,23,wg),I(13,xj,2,1,`span`,23,wg),P(15,Sj,4,0),U(),H(16,`td`),P(17,Cj,1,1)(18,wj,4,0),U(),H(19,`td`,26)(20,`div`,27),P(21,Ej,4,3),P(22,Dj,2,1,`button`,28),U()()()),e&2){let e=t.$implicit,n=K(2);q(`active`,n.isActive(e.node)),M(),C_(`padding-left`,14+e.depth*16,`px`),M(),X(` `,e.node.fullPath,` `),M(),F(n.isActive(e.node)?3:-1),M(),F(e.node.lazy?4:-1),M(),F(e.node.outlet?5:-1),M(),F(e.source?6:-1),M(2),F(e.node.redirectTo===void 0?9:8),M(3),L(n.guardList(e.node)),M(2),L(e.node.resolvers??av(14,ej)),M(2),F(!n.guardList(e.node).length&&!e.node.resolvers?.length?15:-1),M(2),F(e.node.title?17:18),M(4),F(n.canNavigate(e.node)?21:-1),M(),F(e.node.kind===`lazy`&&e.node.lazy===`unloaded`?22:-1)}}function kj(e,t){if(e&1&&(H(0,`div`,13)(1,`table`)(2,`thead`)(3,`tr`)(4,`th`,19),J(5,`Path`),U(),H(6,`th`,19),J(7,`Target`),U(),H(8,`th`,19),J(9,`Guards and resolvers`),U(),H(10,`th`,19),J(11,`Title`),U(),H(12,`th`,19)(13,`span`,20),J(14,`Actions`),U()()()(),H(15,`tbody`),I(16,Oj,23,15,`tr`,21,tj),U()()()),e&2){let e=K();M(16),L(e.rows())}}var Aj=class e{page=$.required();rpc=$(null);navigationAllowed=Q(()=>nE(this.rpc(),`router`));navigationOff=HT(`router`);sources=$([]);filter=j(``);testUrl=j(``);match=j(null);message=j(``);paramValues=new Map;active=Q(()=>new Set(this.page().activeIds??[]));rows=Q(()=>{let e=this.filter().toLowerCase(),t=this.sources(),n=[],r=(i,a)=>{for(let o of i){let i=KO(o,t),s=i&&GO(i);(!e||o.fullPath.toLowerCase().includes(e)||o.component?.toLowerCase().includes(e)||s?.toLowerCase().includes(e))&&n.push({node:o,depth:a,source:s}),o.children&&r(o.children,a+1)}};return r(this.page().config??[],0),n});hasKeys(e){return Object.keys(e).length>0}isActive(e){return this.active().has(e.id)}guardList(e){return Object.entries(e.guards??{}).flatMap(([e,t])=>t.map(t=>`${e} ${t}`))}params(e){return(e.fullPath.match(/:([A-Za-z0-9_]+)/g)??[]).map(e=>e.slice(1))}canNavigate(e){return e.redirectTo===void 0&&!e.outlet&&!e.fullPath.includes(`**`)&&(!!e.component||e.kind===`component`||e.kind===`lazy`)}setParam(e,t,n){this.paramValues.set(e,{...this.paramValues.get(e),[t]:n})}chainText(e){return e.chain.map(e=>e.fullPath).join(` → `)}async predict(){let e=this.testUrl().trim();e&&this.match.set(await qO(this.rpc(),`router-match`,{pageId:this.page().pageId,url:e}))}async probe(){let e=this.testUrl().trim();if(!e)return;this.message.set(`Running the real matcher in the app…`);let t=await JO(this.rpc(),this.page().pageId,{action:`probe`,url:e});if(!t||t.error){this.message.set(String(t?.error??`Probe failed.`));return}this.message.set(t.matched?`The app recognized ${e} and its canMatch guards passed. The probe stopped before canActivate guards and resolvers, so those did not run. See the probe entry in Navigations.`:typeof t.redirectedTo==`string`?`A canMatch guard or the navigation error handler redirected ${e} to ${t.redirectedTo}. The probe stopped that navigation before it rendered anything.`:`The app could not recognize ${e}: ${String(t.reason??``)}`)}async navigate(e){let t=this.paramValues.get(e.id)??{};this.message.set(`Navigating to ${e.fullPath}…`);let n=await JO(this.rpc(),this.page().pageId,{action:`navigate`,pattern:e.fullPath,params:t});this.message.set(!n||n.error?String(n?.error??`Navigation failed.`):`Navigation #${n.id}: ${n.outcome}${n.finalUrl?` at ${n.finalUrl}`:``}.`)}async resolveLazy(e){let t=await JO(this.rpc(),this.page().pageId,{action:`resolve-lazy`,id:e.id});if(!t||t.error){this.message.set(String(t?.error??`Could not read the lazy routes.`));return}let n=t.routes??[];this.message.set(`${e.fullPath} declares ${n.length} route(s): ${n.map(e=>`/${e.path}`).join(`, `)}. The router loads them for real on the first navigation that needs them.`)}static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-route-tree`]],inputs:{page:[1,`page`],rpc:[1,`rpc`],sources:[1,`sources`]},decls:18,vars:7,consts:[[`filterInput`,``],[1,`test`,3,`submit`],[`for`,`test-url`],[`id`,`test-url`,`type`,`text`,`placeholder`,`/users/42`,1,`field`,3,`input`,`value`],[`type`,`submit`,1,`small`,`primary`],[`type`,`button`,1,`small`,3,`click`],[`role`,`status`,1,`result`],[`role`,`status`,1,`message`],[`id`,`route-tree-writes-off`,1,`message`],[1,`filter-row`],[`type`,`text`,`aria-label`,`Filter routes`,`placeholder`,`Filter by path, component or file`,1,`field`,`filter`,3,`input`,`value`],[1,`muted`,`summary`],[1,`empty`],[`role`,`region`,`aria-label`,`Live route config`,`tabindex`,`0`,1,`table-scroll`],[1,`muted`],[`data-tone`,`good`,1,`badge`],[1,`chain`],[`data-tone`,`bad`,1,`badge`],[1,`empty-title`],[`scope`,`col`],[1,`visually-hidden`],[3,`active`],[1,`path`],[1,`tag`],[1,`src`],[1,`redirect`],[1,`actions`],[1,`actions-inner`],[`type`,`button`,1,`small`],[`aria-hidden`,`true`],[`aria-hidden`,`true`,1,`nil`],[`type`,`text`,1,`field`,`param`,3,`placeholder`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`type`,`text`,1,`field`,`param`,3,`input`,`placeholder`]],template:function(e,t){if(e&1){let e=W();H(0,`form`,1),Qg(`submit`,function(n){return k(e),n.preventDefault(),A(t.predict())}),H(1,`label`,2),J(2,`Test a URL`),U(),H(3,`input`,3),Qg(`input`,function(e){return t.testUrl.set(e.target.value)}),U(),H(4,`button`,4),J(5,`Predict`),U(),H(6,`button`,5),Qg(`click`,function(){return t.probe()}),J(7,`Probe in app`),U()(),P(8,sj,5,2,`div`,6),P(9,cj,2,1,`p`,7),P(10,lj,2,1,`p`,8),H(11,`div`,9)(12,`input`,10,0),Qg(`input`,function(e){return t.filter.set(e.target.value)}),U(),P(14,dj,3,3,`p`,11),U(),P(15,fj,5,2,`div`,12)(16,pj,7,0,`div`,12)(17,kj,18,0,`div`,13)}if(e&2){let e;M(3),Vg(`value`,t.testUrl()),M(5),F((e=t.match())?8:-1,e),M(),F(t.message()?9:-1),M(),F(t.navigationAllowed()?-1:10),M(2),Vg(`value`,t.filter()),M(2),F(t.page().config?14:-1),M(),F(t.page().config?t.rows().length?17:16:15)}},dependencies:[ib],styles:[`.muted[_ngcontent-%COMP%] { + color: var(--%NS%text-2); + font-size: 13px; + line-height: 1.5; +} + +.nil[_ngcontent-%COMP%] { + color: var(--%NS%text-3); +} + +code[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); + font-size: 12.5px; + color: var(--%NS%text); + overflow-wrap: anywhere; +} + +.tag[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + max-width: 100%; + min-height: 20px; + margin: 2px 4px 2px 0; + padding: 0 8px; + border: 1px solid var(--%NS%border); + border-radius: 99px; + background: var(--%NS%surface-2); + color: var(--%NS%text); + font-family: var(--%NS%font-mono); + font-size: 11.5px; + line-height: 1.4; + vertical-align: middle; + overflow-wrap: anywhere; + white-space: normal; +} + +.badge[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + min-height: 20px; + padding: 0 8px; + border: 1px solid var(--%NS%border-strong); + border-radius: 99px; + background: var(--%NS%surface-2); + color: var(--%NS%text); + font-size: 11px; + font-weight: 600; + line-height: 1.4; + white-space: nowrap; + vertical-align: middle; +} + +.badge[data-tone=good][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); + color: var(--%NS%ok); +} + +.badge[data-tone=warn][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); + background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); + color: var(--%NS%warn); +} + +.badge[data-tone=bad][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + color: var(--%NS%danger); +} + +button.small[_ngcontent-%COMP%] { + display: inline-flex; + flex: none; + align-items: center; + justify-content: center; + gap: 6px; + height: 34px; + padding: 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + font-weight: 500; + white-space: nowrap; + cursor: pointer; + transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease); +} + +button.small[_ngcontent-%COMP%]:hover:not(:disabled) { + background: var(--%NS%surface-3); + border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%border-strong)); +} + +button.small[_ngcontent-%COMP%]:active:not(:disabled) { + transform: translateY(1px); +} + +button.small[_ngcontent-%COMP%]:disabled { + opacity: 0.55; + cursor: not-allowed; +} + +button.small.primary[_ngcontent-%COMP%] { + border-color: var(--%NS%accent); + background: var(--%NS%accent); + color: var(--%NS%accent-ink); + font-weight: 600; +} + +button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) { + border-color: var(--%NS%accent-hover); + background: var(--%NS%accent-hover); +} + +button.small[_ngcontent-%COMP%]:focus-visible, +.table-scroll[_ngcontent-%COMP%]:focus-visible, +input[type=checkbox][_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +input.field[_ngcontent-%COMP%], +select[_ngcontent-%COMP%] { + height: 34px; + padding: 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background-color: var(--%NS%bg); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease); +} + +input.field[_ngcontent-%COMP%] { + text-overflow: ellipsis; +} + +input.field[_ngcontent-%COMP%]::placeholder { + color: var(--%NS%text-3); +} + +input.field[_ngcontent-%COMP%]:hover:not(:focus), +select[_ngcontent-%COMP%]:hover:not(:focus) { + border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%border-strong)); +} + +input.field[_ngcontent-%COMP%]:focus-visible, +select[_ngcontent-%COMP%]:focus-visible { + outline: none; + border-color: var(--%NS%accent); + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +.note[_ngcontent-%COMP%] { + margin: 0; + padding: 10px 14px; + border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent); + border-radius: var(--%NS%radius-sm); + background: color-mix(in srgb, var(--%NS%warn) 10%, transparent); + color: var(--%NS%text); + font-size: 13px; + line-height: 1.5; +} + +.empty[_ngcontent-%COMP%] { + display: grid; + gap: 6px; + justify-items: center; + margin: 0; + padding: 40px 24px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + text-align: center; + animation: enter 0.35s var(--%NS%ease) both; +} + +.empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { + margin: 0; + max-width: 480px; + line-height: 1.6; +} + +.empty-title[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-size: 14px; + font-weight: 600; +} + +.empty[_ngcontent-%COMP%] .small[_ngcontent-%COMP%] { + margin-top: 8px; +} + +.facts[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + align-items: baseline; + gap: 8px 24px; + margin: 0; + padding: 14px 16px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + font-size: 13px; +} + +.facts[_ngcontent-%COMP%]:empty { + display: none; +} + +dt[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +dd[_ngcontent-%COMP%] { + min-width: 0; + margin: 0; + color: var(--%NS%text); + overflow-wrap: anywhere; + font-variant-numeric: tabular-nums; +} + +.table-scroll[_ngcontent-%COMP%] { + overflow-x: auto; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + box-shadow: var(--%NS%shadow); + animation: enter 0.35s var(--%NS%ease) both; +} + +table[_ngcontent-%COMP%] { + width: 100%; + border-collapse: collapse; + font-size: 13px; + font-variant-numeric: tabular-nums; +} + +th[_ngcontent-%COMP%] { + padding: 10px 14px; + border-bottom: 1px solid var(--%NS%border); + background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface)); + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.06em; + text-align: left; + text-transform: uppercase; + white-space: nowrap; +} + +td[_ngcontent-%COMP%] { + padding: 10px 14px; + border-bottom: 1px solid var(--%NS%border); + color: var(--%NS%text); + line-height: 1.5; + vertical-align: top; + transition: background-color 0.15s var(--%NS%ease); +} + +tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child td[_ngcontent-%COMP%] { + border-bottom: none; +} + +tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover td[_ngcontent-%COMP%] { + background: var(--%NS%surface-2); +} + +.path[_ngcontent-%COMP%] { + color: var(--%NS%accent); + font-family: var(--%NS%font-mono); + font-size: 12.5px; + white-space: nowrap; +} + +h3[_ngcontent-%COMP%] { + margin: 8px 0 -4px; + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +@media (max-width: 480px) { + .facts[_ngcontent-%COMP%] { + grid-template-columns: minmax(0, 1fr); + gap: 2px; + } + .facts[_ngcontent-%COMP%] dd[_ngcontent-%COMP%] + dt[_ngcontent-%COMP%] { + margin-top: 8px; + } +} +[_nghost-%COMP%] { + display: grid; + gap: 12px; + min-width: 0; +} + +.test[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: center; + padding: 8px 12px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + box-shadow: var(--%NS%shadow); + color: var(--%NS%text); + font-size: 13px; +} + +.test[_ngcontent-%COMP%] label[_ngcontent-%COMP%] { + margin-right: 4px; + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + white-space: nowrap; +} + +.test[_ngcontent-%COMP%] input[_ngcontent-%COMP%] { + flex: 1 1 200px; + min-width: 0; + font-family: var(--%NS%font-mono); + font-size: 12.5px; +} + +.result[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 4px 8px; + align-items: center; + padding: 10px 14px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + color: var(--%NS%text); + font-size: 13px; + line-height: 1.5; + animation: enter 0.35s var(--%NS%ease) both; +} + +.result[data-matched=true][_ngcontent-%COMP%] { + box-shadow: inset 3px 0 0 var(--%NS%ok); +} + +.result[data-matched=false][_ngcontent-%COMP%] { + box-shadow: inset 3px 0 0 var(--%NS%danger); +} + +.result[_ngcontent-%COMP%] .muted[_ngcontent-%COMP%] { + flex-basis: 100%; + font-size: 12px; +} + +.chain[_ngcontent-%COMP%] { + color: var(--%NS%accent); +} + +.message[_ngcontent-%COMP%] { + margin: 0; + padding: 8px 12px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + color: var(--%NS%text); + font-size: 13px; + overflow-wrap: anywhere; +} + +.filter-row[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 8px 16px; + align-items: center; +} + +.filter[_ngcontent-%COMP%] { + flex: 0 1 320px; + min-width: 0; +} + +.summary[_ngcontent-%COMP%] { + flex: 1 1 240px; + margin: 0; + font-size: 12px; + font-variant-numeric: tabular-nums; +} + +td[_ngcontent-%COMP%] { + vertical-align: middle; +} + +.redirect[_ngcontent-%COMP%] { + color: var(--%NS%text-2); +} + +.src[_ngcontent-%COMP%] { + display: block; + margin-top: 2px; + color: var(--%NS%text-2); + font-family: var(--%NS%font-mono); + font-size: 11.5px; + overflow-wrap: anywhere; +} + +tr.active[_ngcontent-%COMP%] td[_ngcontent-%COMP%] { + background: var(--%NS%accent-soft); + color: var(--%NS%text-strong); +} + +tr.active[_ngcontent-%COMP%]:hover td[_ngcontent-%COMP%] { + background: color-mix(in srgb, var(--%NS%accent) 16%, transparent); +} + +tr.active[_ngcontent-%COMP%] td[_ngcontent-%COMP%]:first-child { + box-shadow: inset 3px 0 0 var(--%NS%accent); +} + +.actions[_ngcontent-%COMP%] { + width: 1%; + padding-top: 6px; + padding-bottom: 6px; + white-space: nowrap; +} + +.actions-inner[_ngcontent-%COMP%] { + display: flex; + gap: 6px; + align-items: center; + justify-content: flex-end; +} + +.param[_ngcontent-%COMP%] { + width: 96px; + font-family: var(--%NS%font-mono); + font-size: 12px; +} + +@media (max-width: 480px) { + .filter[_ngcontent-%COMP%] { + flex-basis: 100%; + } +}`]})},jj=(e,t)=>t.id;function Mj(e,t){if(e&1){let e=W();z(0,`div`,4)(1,`span`,5),J(2,`Page`),B(),z(3,`app-select`,6),G(`valueChange`,function(t){return k(e),A(K(2).pageId.set(t))}),B()()}if(e&2){let e=K(),t=K();M(3),R(`options`,t.pageOptions())(`value`,e.pageId)}}function Nj(e,t){e&1&&P(0,Mj,4,2,`div`,4),e&2&&F(K().pages().length>1?0:-1)}function Pj(e,t){if(e&1){let e=W();z(0,`div`,1)(1,`p`,7),J(2,`Could not load the live router state.`),B(),z(3,`p`,8),J(4,` Check that the dev server with ng-devtools is still running, then retry. `),B(),z(5,`button`,9),G(`click`,function(){return k(e),A(K().retry())}),J(6,`Retry`),B()()}}function Fj(e,t){e&1&&(z(0,`p`,2),J(1,`Loading the live router state…`),B())}function Ij(e,t){if(e&1&&(z(0,`span`,17),J(1),B(),z(2,`span`,18),J(3),B()),e&2){let e=K(3);M(),Y(e.problems()),M(2),X(`, `,e.problems(),` problem navigations`)}}function Lj(e,t){if(e&1){let e=W();z(0,`button`,16),G(`click`,function(){let t=k(e).$implicit;return A(K(2).selected.set(t.id))}),J(1),P(2,Ij,4,2),B()}if(e&2){let e=t.$implicit,n=K(2);R(`id`,`router-tab-`+e.id),N(`aria-selected`,e.id===n.selected())(`aria-controls`,`router-panel-`+e.id)(`tabindex`,e.id===n.selected()?0:-1),M(),X(` `,e.label,` `),M(),F(e.id===`navigations`&&n.problems()>0?2:-1)}}function Rj(e,t){if(e&1&&V(0,`app-route-current`,13),e&2){let e=K(),t=K();R(`page`,e)(`rpc`,t.rpc())}}function zj(e,t){if(e&1&&V(0,`app-route-timeline`,13),e&2){let e=K(),t=K();R(`page`,e)(`rpc`,t.rpc())}}function Bj(e,t){if(e&1&&V(0,`app-route-tree`,14),e&2){let e=K(),t=K();R(`page`,e)(`rpc`,t.rpc())(`sources`,t.sources())}}function Vj(e,t){e&1&&V(0,`app-route-setup`,15),e&2&&R(`page`,K())}function Hj(e,t){if(e&1&&V(0,`app-route-lint`,13),e&2){let e=K(),t=K();R(`page`,e)(`rpc`,t.rpc())}}function Uj(e,t){if(e&1){let e=W();z(0,`div`,10),G(`keydown`,function(t){return k(e),A(K().onKey(t))}),I(1,Lj,3,6,`button`,11,jj),B(),z(3,`div`,12),P(4,Rj,1,2,`app-route-current`,13)(5,zj,1,2,`app-route-timeline`,13)(6,Bj,1,3,`app-route-tree`,14)(7,Vj,1,1,`app-route-setup`,15)(8,Hj,1,2,`app-route-lint`,13),B()}if(e&2){let e,t=K();M(),L(t.tabs),M(2),R(`id`,`router-panel-`+t.selected()),N(`aria-labelledby`,`router-tab-`+t.selected()),M(),F((e=t.selected())===`current`?4:e===`navigations`?5:e===`routes`?6:e===`setup`?7:e===`lint`?8:-1)}}function Wj(e,t){e&1&&(z(0,`div`,3)(1,`p`,7),J(2,`No page is reporting router state yet.`),B(),z(3,`p`,8),J(4,` Open the app in a browser. This view updates as soon as a page connects. `),B()())}var Gj=[{id:`current`,label:`Current`},{id:`navigations`,label:`Navigations`},{id:`routes`,label:`Routes`},{id:`setup`,label:`Setup`},{id:`lint`,label:`Lint`}],Kj=class e{rpc=$(null);sources=$([]);tabs=Gj;selected=j(`current`);pages=j([]);hostPageId=JT();loading=j(!0);failed=j(!1);pageId=wv({source:this.pages,computation:(e,t)=>t?.value&&e.some(e=>e.pageId===t.value)?t.value:e.find(e=>e.pageId===this.hostPageId&&e.snapshot)?.pageId??e.find(e=>e.snapshot)?.pageId??e[0]?.pageId??null});unsubscribe=null;destroyRef=E(Cs);page=Q(()=>{let e=this.pages();return e.find(e=>e.pageId===this.pageId())??e[0]??null});problems=Q(()=>(this.page()?.navigations??[]).filter(e=>!e.probe&&[`failed`,`cancelled`,`redirected`].includes(e.outcome)).length);constructor(){uc(()=>{let e=this.rpc();e&&this.load(e)}),this.destroyRef.onDestroy(()=>this.unsubscribe?.())}async load(e){this.loading.set(!0),this.failed.set(!1);try{let t=await e.scope(`ng-devtools`).rpc.sharedState(`router`);if(this.destroyRef.destroyed)return;let n=e=>{this.pages.set(e?.pages??[])};n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.failed.set(!0)}finally{this.loading.set(!1)}}retry(){let e=this.rpc();e&&this.load(e)}pageOptions=Q(()=>this.pages().map(e=>({value:e.pageId,label:e.snapshot?.url??e.pageId,hint:e.pageId})));onKey(e){let t=this.tabs.map(e=>e.id),n=t.indexOf(this.selected()),r=n;if(e.key===`ArrowRight`)r=(n+1)%t.length;else if(e.key===`ArrowLeft`)r=(n-1+t.length)%t.length;else if(e.key===`Home`)r=0;else if(e.key===`End`)r=t.length-1;else return;e.preventDefault(),this.selected.set(t[r]);let i=e.currentTarget;queueMicrotask(()=>i.querySelector(`#router-tab-${t[r]}`)?.focus())}static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-live-route`]],inputs:{rpc:[1,`rpc`],sources:[1,`sources`]},decls:8,vars:2,consts:[[1,`section-head`],[`role`,`alert`,1,`empty`],[`role`,`status`,1,`muted`,`empty`],[1,`empty`],[1,`page-pick`],[`id`,`live-route-page-label`,1,`page-label`],[`labelledBy`,`live-route-page-label`,3,`valueChange`,`options`,`value`],[1,`empty-title`],[1,`muted`],[`type`,`button`,1,`retry`,3,`click`],[`role`,`tablist`,`aria-label`,`Router views`,1,`tabs`,3,`keydown`],[`type`,`button`,`role`,`tab`,3,`id`],[`role`,`tabpanel`,1,`panel`,3,`id`],[3,`page`,`rpc`],[3,`page`,`rpc`,`sources`],[3,`page`],[`type`,`button`,`role`,`tab`,3,`click`,`id`],[`aria-hidden`,`true`,1,`count`],[1,`visually-hidden`]],template:function(e,t){if(e&1&&(z(0,`div`,0)(1,`h2`),J(2,`Live router`),B(),P(3,Nj,1,1),B(),P(4,Pj,7,0,`div`,1)(5,Fj,2,0,`p`,2)(6,Uj,9,3)(7,Wj,5,0,`div`,3)),e&2){let e,n;M(3),F((e=t.page())?3:-1,e),M(),F(t.failed()?4:t.loading()?5:(n=t.page())?6:7,n)}},dependencies:[kk,Uk,rA,$A,Aj,XE],styles:[`[_nghost-%COMP%] { + display: grid; + gap: 16px; + min-width: 0; + margin-bottom: 32px; +} + +.section-head[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 8px 16px; + align-items: center; + justify-content: space-between; + min-height: 34px; +} + +h2[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.muted[_ngcontent-%COMP%] { + color: var(--%NS%text-2); + font-size: 13px; + line-height: 1.5; +} + +.empty[_ngcontent-%COMP%] { + display: grid; + gap: 6px; + justify-items: center; + margin: 0; + padding: 40px 24px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + text-align: center; + animation: enter 0.35s var(--%NS%ease) both; +} + +.empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { + margin: 0; + max-width: 480px; +} + +.empty-title[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-size: 14px; + font-weight: 600; +} + +.retry[_ngcontent-%COMP%] { + height: 34px; + margin-top: 8px; + padding: 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + font-weight: 500; + cursor: pointer; + transition: background-color 0.15s var(--%NS%ease); +} + +.retry[_ngcontent-%COMP%]:hover { + background: var(--%NS%surface-3); +} + +.retry[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.page-pick[_ngcontent-%COMP%] { + display: flex; + flex: 0 1 420px; + gap: 10px; + align-items: center; + min-width: 0; +} + +.page-label[_ngcontent-%COMP%] { + flex: none; + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.page-pick[_ngcontent-%COMP%] app-select[_ngcontent-%COMP%] { + flex: 1 1 auto; + width: 100%; +} + +.tabs[_ngcontent-%COMP%] { + display: flex; + justify-self: start; + max-width: 100%; + gap: 2px; + padding: 3px; + overflow-x: auto; + border: 1px solid var(--%NS%border); + border-radius: 10px; + background: var(--%NS%bg); +} + +[role=tab][_ngcontent-%COMP%] { + display: inline-flex; + flex: none; + align-items: center; + gap: 6px; + height: 26px; + padding: 0 12px; + border: none; + border-radius: 7px; + background: transparent; + color: var(--%NS%text-2); + font: inherit; + font-size: 13px; + font-weight: 500; + white-space: nowrap; + cursor: pointer; + transition: background-color 0.15s var(--%NS%ease), color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease); +} + +[role=tab][_ngcontent-%COMP%]:hover { + background: var(--%NS%surface-2); + color: var(--%NS%text); +} + +[role=tab][aria-selected=true][_ngcontent-%COMP%] { + background: var(--%NS%surface-3); + color: var(--%NS%text-strong); + box-shadow: inset 0 0 0 1px var(--%NS%border-strong); +} + +[role=tab][_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: -2px; +} + +.panel[_ngcontent-%COMP%] { + min-width: 0; + animation: enter 0.35s var(--%NS%ease) both; +} + +.count[_ngcontent-%COMP%] { + min-width: 18px; + padding: 0 6px; + border: 1px solid color-mix(in srgb, var(--%NS%danger) 30%, transparent); + border-radius: 99px; + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + color: var(--%NS%danger); + font-size: 11px; + font-weight: 600; + line-height: 16px; + text-align: center; + font-variant-numeric: tabular-nums; +}`]})};function qj(e,t){e&1&&J(0,` The Routes tab above shows what the router uses. `)}function Jj(e,t){if(e&1){let e=W();z(0,`button`,13),G(`click`,function(){k(e);let t=K();return A(t.expanded.set(!t.expanded()))}),J(1),B()}if(e&2){let e=K();N(`aria-expanded`,e.expanded()),M(),X(` `,e.expanded()?`Hide table`:`Show table`,` `)}}function Yj(e,t){e&1&&(J(0,` Run `),z(1,`code`),J(2,`ng-devtools build`),B(),J(3,` again to rebuild the report. `))}function Xj(e,t){e&1&&J(0,` Check that the dev server is running, then refresh. `)}function Zj(e,t){if(e&1&&(z(0,`div`,11)(1,`p`,14),J(2,`Could not scan the route files.`),B(),z(3,`p`,15),P(4,Yj,4,0)(5,Xj,1,0),B()()),e&2){let e=K();M(4),F(e.staticReport()?4:5)}}function Qj(e,t){e&1&&(z(0,`p`,12),J(1,`Scanning routes…`),B())}function $j(e,t){if(e&1){let e=W();z(0,`div`,16)(1,`p`,14),J(2,`No routes match the filter.`),B(),z(3,`p`,15),J(4,`Search by path, component, guard, title or file name.`),B(),z(5,`button`,10),G(`click`,function(){k(e);let t=K(2),n=n_(12);return t.filter.set(``),A(n.focus())}),J(6,` Clear filter `),B()()}}function eM(e,t){e&1&&(z(0,`div`,16)(1,`p`,14),J(2,`No routes found.`),B(),z(3,`p`,15),J(4,` Routes are read from `),z(5,`code`),J(6,`*.routes.ts`),B(),J(7,` and `),z(8,`code`),J(9,`*routing.module.ts`),B(),J(10,` files, the files they lazy load, plus Analog pages. Add one and refresh. `),B()())}function tM(e,t){e&1&&P(0,$j,7,0,`div`,16)(1,eM,11,0,`div`,16),e&2&&F(+!K().routes().length)}function nM(e,t){if(e&1&&(z(0,`span`,21),J(1),B()),e&2){let e=K().$implicit;M(),Y(e.kind)}}function rM(e,t){if(e&1&&(z(0,`span`,22)(1,`span`,25),J(2,`→`),B(),z(3,`span`,26),J(4,`redirects to`),B(),J(5),B()),e&2){let e=K().$implicit;M(5),X(` `,e.redirectTo)}}function iM(e,t){if(e&1&&(z(0,`code`,23),J(1),B()),e&2){let e=K().$implicit;M(),Y(e.component)}}function aM(e,t){e&1&&(z(0,`span`,27),J(1,`–`),B(),z(2,`span`,26),J(3,`none`),B())}function oM(e,t){if(e&1&&(z(0,`span`,21),J(1),B()),e&2){let e=t.$implicit;M(),Y(e)}}function sM(e,t){e&1&&(z(0,`span`,27),J(1,`–`),B(),z(2,`span`,26),J(3,`none`),B())}function cM(e,t){if(e&1&&J(0),e&2){let e=K().$implicit;X(` `,e.title,` `)}}function lM(e,t){e&1&&(z(0,`span`,27),J(1,`–`),B(),z(2,`span`,26),J(3,`none`),B())}function uM(e,t){if(e&1&&(z(0,`tr`)(1,`td`,20),J(2),P(3,nM,2,1,`span`,21),B(),z(4,`td`),P(5,rM,6,1,`span`,22)(6,iM,2,1,`code`,23)(7,aM,4,0),B(),z(8,`td`),I(9,oM,2,1,`span`,21,Cg,!1,sM,4,0),B(),z(12,`td`),P(13,cM,1,1)(14,lM,4,0),B(),z(15,`td`,24),J(16),B()()),e&2){let e=t.$implicit,n=K(2);M(2),X(` `,e.fullPath,` `),M(),F(e.kind===`page`?-1:3),M(2),F(e.redirectTo===void 0?e.component?6:7:5),M(4),L(n.checks(e)),M(4),F(e.title?13:14),M(3),Y(n.location(e))}}function dM(e,t){if(e&1&&(z(0,`p`,17),J(1),B(),z(2,`div`,18)(3,`table`)(4,`thead`)(5,`tr`)(6,`th`,19),J(7,`Path`),B(),z(8,`th`,19),J(9,`Component / Target`),B(),z(10,`th`,19),J(11,`Guards and resolvers`),B(),z(12,`th`,19),J(13,`Title`),B(),z(14,`th`,19),J(15,`Declared in`),B()()(),z(16,`tbody`),I(17,uM,17,6,`tr`,null,Cg),B()()()),e&2){let e=K();M(),Y_(` `,e.filtered().length,` of `,e.routes().length,` route entries, `,e.navigable(),` navigable `),M(16),L(e.filtered())}}var fM=class e{rpc=$(null);staticReport=Q(()=>eE(this.rpc()));routes=j([]);filter=j(``);loading=j(!1);error=j(!1);live=Lv(Kj);liveHasConfig=Q(()=>!!this.live()?.page()?.config);expanded=wv(()=>!this.liveHasConfig());navigable=Q(()=>this.filtered().filter(e=>e.kind===`page`).length);filtered=Q(()=>{let e=this.filter().toLowerCase().trim(),t=this.routes();return e?t.filter(t=>t.fullPath.toLowerCase().includes(e)||t.component&&t.component.toLowerCase().includes(e)||t.redirectTo&&t.redirectTo.toLowerCase().includes(e)||t.title&&t.title.toLowerCase().includes(e)||this.checks(t).some(t=>t.toLowerCase().includes(e))||t.file.toLowerCase().includes(e)):t});constructor(){uc(()=>{this.rpc()&&this.refresh()})}checks(e){return[...Object.entries(e.guards??{}).flatMap(([e,t])=>t.map(t=>`${e} ${t}`)),...(e.resolvers??[]).map(e=>`resolve ${e}`)]}location(e){return GO(e)}onFilterInput(e){let t=e.target;this.filter.set(t?.value??``)}async refresh(){let e=this.rpc();if(e){this.loading.set(!0),this.error.set(!1);try{let t=await e.scope(`ng-devtools`).rpc.call(`get-routes`);this.routes.set(t)}catch{this.error.set(!0)}finally{this.loading.set(!1)}}}static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-route-inspector`]],viewQuery:function(e,t){e&1&&e_(t.live,Kj,5),e&2&&t_()},inputs:{rpc:[1,`rpc`]},decls:19,vars:9,consts:[[`filterInput`,``],[3,`rpc`,`sources`],[`aria-labelledby`,`config-heading`,1,`config`],[1,`section-head`],[`id`,`config-heading`],[1,`muted`,`hint`],[`type`,`button`,`aria-controls`,`config-body`,1,`small`,`toggle`],[`id`,`config-body`,1,`config-body`,3,`hidden`],[1,`toolbar`],[`type`,`text`,`aria-label`,`Filter source routes`,`placeholder`,`Filter routes…`,1,`field`,3,`input`,`value`],[`type`,`button`,1,`small`,3,`click`],[`role`,`alert`,1,`empty`],[`role`,`status`,1,`muted`,`empty`],[`type`,`button`,`aria-controls`,`config-body`,1,`small`,`toggle`,3,`click`],[1,`empty-title`],[1,`muted`],[1,`empty`],[1,`muted`,`count`],[`role`,`region`,`aria-label`,`Source route config table`,`tabindex`,`0`,1,`table-scroll`],[`scope`,`col`],[1,`path`],[1,`tag`],[1,`redirect`],[1,`component`],[1,`file`],[`aria-hidden`,`true`],[1,`visually-hidden`],[`aria-hidden`,`true`,1,`nil`]],template:function(e,t){e&1&&(V(0,`app-live-route`,1),z(1,`section`,2)(2,`div`,3)(3,`h2`,4),J(4,`Source route config`),B(),z(5,`span`,5),J(6,` Read from your source files. `),P(7,qj,1,0),B(),P(8,Jj,2,2,`button`,6),B(),z(9,`div`,7)(10,`div`,8)(11,`input`,9,0),G(`input`,function(e){return t.onFilterInput(e)}),B(),z(13,`button`,10),G(`click`,function(){return t.refresh()}),J(14),B()(),P(15,Zj,6,1,`div`,11)(16,Qj,2,0,`p`,12)(17,tM,2,1)(18,dM,19,3),B()()),e&2&&(R(`rpc`,t.rpc())(`sources`,t.routes()),M(7),F(t.liveHasConfig()?7:-1),M(),F(t.liveHasConfig()?8:-1),M(),R(`hidden`,!t.expanded()),M(2),R(`value`,t.filter()),M(2),N(`aria-busy`,t.loading()),M(),X(` `,t.loading()?`Scanning…`:`Refresh`,` `),M(),F(t.error()?15:t.loading()&&t.routes().length===0?16:t.filtered().length===0?17:18))},dependencies:[Kj],styles:[`.muted[_ngcontent-%COMP%] { + color: var(--%NS%text-2); + font-size: 13px; + line-height: 1.5; +} + +.nil[_ngcontent-%COMP%] { + color: var(--%NS%text-3); +} + +code[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); + font-size: 12.5px; + color: var(--%NS%text); + overflow-wrap: anywhere; +} + +.tag[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + max-width: 100%; + min-height: 20px; + margin: 2px 4px 2px 0; + padding: 0 8px; + border: 1px solid var(--%NS%border); + border-radius: 99px; + background: var(--%NS%surface-2); + color: var(--%NS%text); + font-family: var(--%NS%font-mono); + font-size: 11.5px; + line-height: 1.4; + vertical-align: middle; + overflow-wrap: anywhere; + white-space: normal; +} + +.badge[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + min-height: 20px; + padding: 0 8px; + border: 1px solid var(--%NS%border-strong); + border-radius: 99px; + background: var(--%NS%surface-2); + color: var(--%NS%text); + font-size: 11px; + font-weight: 600; + line-height: 1.4; + white-space: nowrap; + vertical-align: middle; +} + +.badge[data-tone=good][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); + color: var(--%NS%ok); +} + +.badge[data-tone=warn][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); + background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); + color: var(--%NS%warn); +} + +.badge[data-tone=bad][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + color: var(--%NS%danger); +} + +button.small[_ngcontent-%COMP%] { + display: inline-flex; + flex: none; + align-items: center; + justify-content: center; + gap: 6px; + height: 34px; + padding: 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + font-weight: 500; + white-space: nowrap; + cursor: pointer; + transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease); +} + +button.small[_ngcontent-%COMP%]:hover:not(:disabled) { + background: var(--%NS%surface-3); + border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%border-strong)); +} + +button.small[_ngcontent-%COMP%]:active:not(:disabled) { + transform: translateY(1px); +} + +button.small[_ngcontent-%COMP%]:disabled { + opacity: 0.55; + cursor: not-allowed; +} + +button.small.primary[_ngcontent-%COMP%] { + border-color: var(--%NS%accent); + background: var(--%NS%accent); + color: var(--%NS%accent-ink); + font-weight: 600; +} + +button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) { + border-color: var(--%NS%accent-hover); + background: var(--%NS%accent-hover); +} + +button.small[_ngcontent-%COMP%]:focus-visible, +.table-scroll[_ngcontent-%COMP%]:focus-visible, +input[type=checkbox][_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +input.field[_ngcontent-%COMP%], +select[_ngcontent-%COMP%] { + height: 34px; + padding: 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background-color: var(--%NS%bg); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease); +} + +input.field[_ngcontent-%COMP%] { + text-overflow: ellipsis; +} + +input.field[_ngcontent-%COMP%]::placeholder { + color: var(--%NS%text-3); +} + +input.field[_ngcontent-%COMP%]:hover:not(:focus), +select[_ngcontent-%COMP%]:hover:not(:focus) { + border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%border-strong)); +} + +input.field[_ngcontent-%COMP%]:focus-visible, +select[_ngcontent-%COMP%]:focus-visible { + outline: none; + border-color: var(--%NS%accent); + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +.note[_ngcontent-%COMP%] { + margin: 0; + padding: 10px 14px; + border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent); + border-radius: var(--%NS%radius-sm); + background: color-mix(in srgb, var(--%NS%warn) 10%, transparent); + color: var(--%NS%text); + font-size: 13px; + line-height: 1.5; +} + +.empty[_ngcontent-%COMP%] { + display: grid; + gap: 6px; + justify-items: center; + margin: 0; + padding: 40px 24px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + text-align: center; + animation: enter 0.35s var(--%NS%ease) both; +} + +.empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { + margin: 0; + max-width: 480px; + line-height: 1.6; +} + +.empty-title[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-size: 14px; + font-weight: 600; +} + +.empty[_ngcontent-%COMP%] .small[_ngcontent-%COMP%] { + margin-top: 8px; +} + +.facts[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + align-items: baseline; + gap: 8px 24px; + margin: 0; + padding: 14px 16px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + font-size: 13px; +} + +.facts[_ngcontent-%COMP%]:empty { + display: none; +} + +dt[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +dd[_ngcontent-%COMP%] { + min-width: 0; + margin: 0; + color: var(--%NS%text); + overflow-wrap: anywhere; + font-variant-numeric: tabular-nums; +} + +.table-scroll[_ngcontent-%COMP%] { + overflow-x: auto; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + box-shadow: var(--%NS%shadow); + animation: enter 0.35s var(--%NS%ease) both; +} + +table[_ngcontent-%COMP%] { + width: 100%; + border-collapse: collapse; + font-size: 13px; + font-variant-numeric: tabular-nums; +} + +th[_ngcontent-%COMP%] { + padding: 10px 14px; + border-bottom: 1px solid var(--%NS%border); + background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface)); + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.06em; + text-align: left; + text-transform: uppercase; + white-space: nowrap; +} + +td[_ngcontent-%COMP%] { + padding: 10px 14px; + border-bottom: 1px solid var(--%NS%border); + color: var(--%NS%text); + line-height: 1.5; + vertical-align: top; + transition: background-color 0.15s var(--%NS%ease); +} + +tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child td[_ngcontent-%COMP%] { + border-bottom: none; +} + +tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover td[_ngcontent-%COMP%] { + background: var(--%NS%surface-2); +} + +.path[_ngcontent-%COMP%] { + color: var(--%NS%accent); + font-family: var(--%NS%font-mono); + font-size: 12.5px; + white-space: nowrap; +} + +h3[_ngcontent-%COMP%] { + margin: 8px 0 -4px; + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +@media (max-width: 480px) { + .facts[_ngcontent-%COMP%] { + grid-template-columns: minmax(0, 1fr); + gap: 2px; + } + .facts[_ngcontent-%COMP%] dd[_ngcontent-%COMP%] + dt[_ngcontent-%COMP%] { + margin-top: 8px; + } +} +[_nghost-%COMP%] { + display: block; + min-width: 0; +} + +.config[_ngcontent-%COMP%] { + display: grid; + gap: 12px; + min-width: 0; +} + +.section-head[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 4px 12px; + align-items: baseline; +} + +h2[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.hint[_ngcontent-%COMP%], +.count[_ngcontent-%COMP%] { + margin: 0; + font-size: 12px; + font-variant-numeric: tabular-nums; +} + +.count[_ngcontent-%COMP%] { + margin-bottom: -4px; + padding: 0 4px; +} + +.config-body[_ngcontent-%COMP%] { + display: grid; + gap: 12px; + min-width: 0; +} + +.config-body[hidden][_ngcontent-%COMP%] { + display: none; +} + +.toggle[_ngcontent-%COMP%] { + margin-left: auto; +} + +.toolbar[_ngcontent-%COMP%] { + display: flex; + gap: 8px; + align-items: center; +} + +.toolbar[_ngcontent-%COMP%] .field[_ngcontent-%COMP%] { + flex: 1; + min-width: 0; +} + +.component[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); +} + +.redirect[_ngcontent-%COMP%] { + color: var(--%NS%text-2); + font-family: var(--%NS%font-mono); + font-size: 12.5px; + overflow-wrap: anywhere; +} + +.file[_ngcontent-%COMP%] { + min-width: 160px; + color: var(--%NS%text-2); + font-family: var(--%NS%font-mono); + font-size: 12px; + overflow-wrap: anywhere; +}`]})},pM=e=>({id:e,label:`Status history`}),mM=e=>({id:e,label:`Value history`}),hM=(e,t)=>t.kind,gM=(e,t)=>t.name+t.file+t.line,_M=(e,t)=>t.epoch,vM=(e,t)=>t.id;function yM(e,t){if(e&1){let e=W();z(0,`div`,3)(1,`span`,10),J(2,`Graph of`),B(),z(3,`app-select`,11),G(`valueChange`,function(t){return k(e),A(K().pickComponent(t))}),B()()}if(e&2){let e=K();M(3),R(`options`,e.componentOptions())(`value`,e.pickerValue())}}function bM(e,t){if(e&1&&(z(0,`span`,14),J(1),B()),e&2){let e=K(2);M(),Y(e.sourceNote(e.graph().source))}}function xM(e,t){if(e&1&&(z(0,`p`,4)(1,`span`,12),J(2),B(),z(3,`span`,13),J(4),B(),P(5,bM,2,1,`span`,14),B()),e&2){let e=t,n=K();M(2),Y(e.name),M(2),Y(e.path),M(),F(n.graph().source?5:-1)}}function SM(e,t){if(e&1&&(z(0,`p`,4)(1,`span`,12),J(2),B(),z(3,`span`,14),J(4,`environment injector`),B()()),e&2){let e=K();M(2),Y(e.injectorLabel(t))}}function CM(e,t){e&1&&(z(0,`p`,5),J(1,` The picked component or injector is gone or has no signal graph, so this shows another one. `),B())}function wM(e,t){e&1&&J(0,` The effects registered on this injector and the signals they read. A signal that no effect reads is not part of the graph. Pick a kind to filter. `)}function TM(e,t){e&1&&J(0,` The live signal graph of one component. Only signals that its template or an effect has read appear here; a signal nothing has read yet is not part of the graph. Pick a kind to filter. `)}function EM(e,t){e&1&&J(0,` Every signal, computed and effect found in your source. Pick a kind to filter. `)}function DM(e,t){e&1&&(z(0,`p`,5),J(1,` The live signal graph needs Angular 20.1 or later. This list comes from a source scan. `),B())}function OM(e,t){if(e&1&&(z(0,`p`,5),J(1),B()),e&2){let e=K();M(),Z(` Showing `,e.graph().nodes.length,` of `,t,` signals. The rest and their edges are left out. `)}}function kM(e,t){if(e&1){let e=W();z(0,`button`,15),G(`click`,function(){let t=k(e).$implicit,n=K(2);return A(n.kind.set(n.kind()===t.kind?null:t.kind))}),V(1,`span`,18),z(2,`span`,19),J(3),B(),z(4,`span`,16),J(5),B()()}if(e&2){let e=t.$implicit,n=K(2);q(`active`,n.kind()===e.kind),N(`aria-pressed`,n.kind()===e.kind),M(),C_(`background`,n.kindColor(e.kind)),M(2),Y(e.kind),M(2),Y(e.count)}}function AM(e,t){if(e&1){let e=W();z(0,`div`,7)(1,`button`,15),G(`click`,function(){return k(e),A(K().kind.set(null))}),J(2,` All `),z(3,`span`,16),J(4),B()(),I(5,kM,6,7,`button`,17,hM),B()}if(e&2){let e=K();M(),q(`active`,!e.kind()),N(`aria-pressed`,!e.kind()),M(3),Y(e.kindTotal()),M(),L(e.kindCounts())}}function jM(e,t){e&1&&(z(0,`div`,8),V(1,`span`,20),z(2,`p`,21),J(3,`Scanning source for signals…`),B()())}function MM(e,t){e&1&&(z(0,`div`,9)(1,`p`,21),J(2,`No signals found.`),B(),z(3,`p`,22),J(4,` No `),z(5,`code`),J(6,`signal()`),B(),J(7,`, `),z(8,`code`),J(9,`computed()`),B(),J(10,` or `),z(11,`code`),J(12,`effect()`),B(),J(13,` calls were found in your source. To see the live graph, run Angular 20.1 or later with the overlay connected and select a component. `),B()())}function NM(e,t){if(e&1&&(z(0,`span`,32),J(1,`·`),B(),z(2,`span`),J(3),B()),e&2){let e=K().$implicit;M(3),X(`in <`,e.component,`>`)}}function PM(e,t){if(e&1&&(z(0,`div`,25)(1,`div`,27)(2,`span`,28),J(3),B(),z(4,`span`,29),J(5),B()(),z(6,`div`,30)(7,`span`,31),J(8),B(),P(9,NM,4,1),B()()),e&2){let e=t.$implicit,n=K(2);M(2),C_(`background`,n.kindColor(e.kind)),M(),Y(e.kind),M(2),Y(e.name),M(2),R(`title`,e.file+`:`+e.line),M(),Z(``,e.file,`:`,e.line),M(),F(e.component?9:-1)}}function FM(e,t){if(e&1){let e=W();z(0,`div`,26)(1,`p`,21),J(2,`No signals match.`),B(),z(3,`p`,22),J(4,`Try a different name or kind.`),B(),z(5,`button`,33),G(`click`,function(){return k(e),A(K(2).clearFilters())}),J(6,`Clear filters`),B()()}}function IM(e,t){if(e&1&&(z(0,`p`,23),J(1,`Signals from source scan (static analysis):`),B(),z(2,`div`,24),I(3,PM,10,8,`div`,25,gM,!1,FM,7,0,`div`,26),B()),e&2){let e=K();M(3),L(e.filteredSourceSignals())}}function LM(e,t){if(e&1&&(z(0,`span`,39),J(1),B()),e&2){let e=K().$implicit;M(),X(``,e.missed,` earlier not captured`)}}function RM(e,t){if(e&1&&(z(0,`li`)(1,`span`,37)(2,`time`),J(3),uv(4,`date`),B(),z(5,`span`,38),J(6),B(),z(7,`span`),J(8),B(),P(9,LM,2,1,`span`,39),B(),z(10,`pre`),J(11),uv(12,`json`),B()()),e&2){let e=t.$implicit,n=K(3);M(3),Y(pv(4,7,e.at,`HH:mm:ss.SSS`)),M(2),w_(`source-`+e.source),M(),Y(n.sourceLabel(e.source)),M(2),X(`epoch `,e.epoch),M(),F(e.missed?9:-1),M(2),Y(fv(12,10,e.value))}}function zM(e,t){if(e&1&&(z(0,`h4`,34),J(1),B(),z(2,`p`,35),J(3),B(),z(4,`ol`,36),I(5,RM,13,12,`li`,null,_M),B()),e&2){let e=K(),t=e.id,n=e.label,r=K();R(`id`,`history-heading-`+t),M(),Y(n),M(2),Y(r.historySummary(t)),M(),N(`aria-labelledby`,`history-heading-`+t),M(),L(r.selectedHistory())}}function BM(e,t){e&1&&P(0,zM,7,4),e&2&&F(K().selectedHistory().length?0:-1)}function VM(e,t){if(e&1&&(z(0,`span`,48),J(1),B()),e&2){let e=K().$implicit;w_(`tone-`+K(2).statusTone(e.status)),M(),Y(e.status)}}function HM(e,t){if(e&1&&(z(0,`span`,44),J(1),B()),e&2){let e=t;M(),Z(``,e,` `,e===1?`change`:`changes`)}}function UM(e,t){if(e&1&&(z(0,`span`,46),J(1),uv(2,`json`),B()),e&2){let e=K().$implicit;M(),Y(fv(2,1,e.error))}}function WM(e,t){if(e&1&&(z(0,`span`,46),J(1),uv(2,`json`),B()),e&2){let e=K().$implicit;M(),Y(fv(2,1,e.value))}}function GM(e,t){e&1&&(z(0,`p`,22),J(1,` This resource has no name. Pass `),z(2,`code`),J(3,`debugName`),B(),J(4,` to `),z(5,`code`),J(6,`resource()`),B(),J(7,` or `),z(8,`code`),J(9,`httpResource()`),B(),J(10,` to name it here. `),B())}function KM(e,t){if(e&1&&(z(0,`dt`),J(1,`Loading`),B(),z(2,`dd`),J(3),B()),e&2){let e=K(2).$implicit;M(3),Y(e.isLoading?`yes`:`no`)}}function qM(e,t){if(e&1&&(z(0,`dt`),J(1,`HTTP status`),B(),z(2,`dd`),J(3),B()),e&2){let e=K(2).$implicit;M(3),Y(e.statusCode)}}function JM(e,t){if(e&1&&(z(0,`dt`),J(1,`Params`),B(),z(2,`dd`)(3,`pre`,52),J(4),uv(5,`json`),B()()),e&2){let e=K(2).$implicit;M(3),N(`aria-label`,`Params of `+e.name),M(),Y(fv(5,2,e.params))}}function YM(e,t){if(e&1&&(z(0,`dt`),J(1,`Value`),B(),z(2,`dd`)(3,`pre`,52),J(4),uv(5,`json`),B()()),e&2){let e=K(2).$implicit;M(3),N(`aria-label`,`Value of `+e.name),M(),Y(fv(5,2,e.value))}}function XM(e,t){if(e&1&&(z(0,`dt`),J(1,`Error`),B(),z(2,`dd`)(3,`pre`,52),J(4),uv(5,`json`),B()()),e&2){let e=K(2).$implicit;M(3),N(`aria-label`,`Error of `+e.name),M(),Y(fv(5,2,e.error))}}function ZM(e,t){if(e&1&&(z(0,`li`)(1,`span`,53),J(2),B(),z(3,`span`,54),J(4),B()()),e&2){let e=t.$implicit,n=K(5);M(),C_(`background`,n.kindColor(e.kind)),M(),Y(e.kind),M(2),Y(e.label??e.id)}}function QM(e,t){if(e&1&&(z(0,`ul`,34),I(1,ZM,5,4,`li`,null,vM),B()),e&2){let e=K(2).$implicit,t=K(2);R(`id`,`resource-internals-`+e.id),M(),L(t.internalsOf(e))}}function $M(e,t){if(e&1){let e=W();z(0,`div`,47)(1,`h3`,49),J(2),B(),P(3,GM,11,0,`p`,22),z(4,`dl`)(5,`dt`),J(6,`Status`),B(),z(7,`dd`),J(8),B(),P(9,KM,4,1),P(10,qM,4,1),P(11,JM,6,4),P(12,YM,6,4),P(13,XM,6,4),B(),zg(14,50),z(15,`button`,51),G(`click`,function(){k(e);let t=K(3);return A(t.showInternals.set(!t.showInternals()))}),J(16),B(),P(17,QM,3,1,`ul`,34),B()}if(e&2){let e=K().$implicit,t=K(2),n=n_(17);R(`id`,`signal-detail-`+e.id),M(2),Y(e.name),M(),F(e.named?-1:3),M(5),Y(e.status??`unknown`),M(),F(e.isLoading===void 0?-1:9),M(),F(e.statusCode===void 0?-1:10),M(),F(e.params===void 0?-1:11),M(),F(e.value===void 0?-1:12),M(),F(e.error===void 0?-1:13),M(),R(`ngTemplateOutlet`,n)(`ngTemplateOutletContext`,ov(16,pM,e.id)),M(),N(`aria-expanded`,t.showInternals())(`aria-controls`,`resource-internals-`+e.id),M(),Z(` `,t.showInternals()?`Hide`:`Show`,` internal signals (`,e.nodeIds.length,`) `),M(),F(t.showInternals()?17:-1)}}function eN(e,t){if(e&1){let e=W();z(0,`li`)(1,`button`,42),G(`click`,function(){let t=k(e).$implicit;return A(K(2).select(t.id))}),z(2,`span`,27)(3,`span`,28),J(4,`resource`),B(),z(5,`span`,29),J(6),B(),P(7,VM,2,3,`span`,43),P(8,HM,2,2,`span`,44),V(9,`span`,45),B(),P(10,UM,3,3,`span`,46)(11,WM,3,3,`span`,46),B(),P(12,$M,18,18,`div`,47),B()}if(e&2){let e,n=t.$implicit,r=K(2);M(),q(`selected`,r.selectedId()===n.id),N(`aria-expanded`,r.selectedId()===n.id)(`aria-controls`,`signal-detail-`+n.id),M(2),C_(`background`,r.kindColor(`resource`)),M(3),Y(n.name),M(),F(n.status?7:-1),M(),F((e=n.changes)?8:-1,e),M(2),F(n.error===void 0?n.value===void 0?-1:11:10),M(2),F(r.selectedId()===n.id?12:-1)}}function tN(e,t){if(e&1&&(z(0,`h2`,40),J(1,`Resources`),B(),z(2,`ul`,41),I(3,eN,13,11,`li`,null,vM),B()),e&2){let e=K();M(3),L(e.filteredResources())}}function nN(e,t){if(e&1&&(z(0,`span`,44),J(1),B()),e&2){let e=t;M(),Z(``,e,` `,e===1?`change`:`changes`)}}function rN(e,t){if(e&1&&(z(0,`span`,46),J(1),uv(2,`json`),B()),e&2){let e=K().$implicit;M(),Y(fv(2,1,e.value))}}function iN(e,t){if(e&1&&(z(0,`span`,32),J(1,`·`),B(),z(2,`span`),J(3),B()),e&2){let e=K().$implicit,t=K(2);M(3),X(`Deps: `,t.getDependencies(e).length)}}function aN(e,t){if(e&1&&(z(0,`span`,32),J(1,`·`),B(),z(2,`span`),J(3),B()),e&2){let e=K().$implicit,t=K(2);M(3),X(`Consumers: `,t.getConsumers(e).length)}}function oN(e,t){if(e&1&&(z(0,`dt`),J(1,`Value`),B(),z(2,`dd`)(3,`pre`,52),J(4),uv(5,`json`),B()()),e&2){let e=K(4);M(3),N(`aria-label`,`Value of `+(e.selectedNode().label??`signal`)),M(),Y(fv(5,2,e.selectedNode().value))}}function sN(e,t){if(e&1&&(z(0,`li`)(1,`span`,53),J(2),B(),z(3,`span`,54),J(4),B()()),e&2){let e=t.$implicit,n=K(5);M(),C_(`background`,n.kindColor(e.kind)),M(),Y(e.kind),M(2),Y(e.label??e.id)}}function cN(e,t){if(e&1&&(z(0,`h4`),J(1,`Dependencies (producers)`),B(),z(2,`ul`),I(3,sN,5,4,`li`,null,vM),B()),e&2){let e=K(4);M(3),L(e.getDependencies(e.selectedNode()))}}function lN(e,t){if(e&1&&(z(0,`li`)(1,`span`,53),J(2),B(),z(3,`span`,54),J(4),B()()),e&2){let e=t.$implicit,n=K(5);M(),C_(`background`,n.kindColor(e.kind)),M(),Y(e.kind),M(2),Y(e.label??e.id)}}function uN(e,t){if(e&1&&(z(0,`h4`),J(1,`Consumers`),B(),z(2,`ul`),I(3,lN,5,4,`li`,null,vM),B()),e&2){let e=K(4);M(3),L(e.getConsumers(e.selectedNode()))}}function dN(e,t){if(e&1&&(z(0,`div`,47)(1,`h3`,49),J(2),B(),z(3,`dl`)(4,`dt`),J(5,`Kind`),B(),z(6,`dd`),J(7),B(),z(8,`dt`),J(9,`Epoch`),B(),z(10,`dd`),J(11),B(),P(12,oN,6,4),B(),P(13,cN,5,0),P(14,uN,5,0),zg(15,50),B()),e&2){let e=K().$implicit,t=K(2),n=n_(17);R(`id`,`signal-detail-`+e.id),M(2),Y(t.selectedNode().label??t.selectedNode().id),M(5),Y(t.selectedNode().kind),M(4),Y(t.selectedNode().epoch),M(),F(t.selectedNode().value===void 0?-1:12),M(),F(t.getDependencies(t.selectedNode()).length?13:-1),M(),F(t.getConsumers(t.selectedNode()).length?14:-1),M(),R(`ngTemplateOutlet`,n)(`ngTemplateOutletContext`,ov(9,mM,e.id))}}function fN(e,t){if(e&1){let e=W();z(0,`li`)(1,`button`,42),G(`click`,function(){let t=k(e).$implicit;return A(K(2).select(t.id))}),z(2,`span`,27)(3,`span`,28),J(4),B(),z(5,`span`,29),J(6),B(),P(7,nN,2,2,`span`,44),V(8,`span`,45),B(),P(9,rN,3,3,`span`,46),z(10,`span`,30)(11,`span`),J(12),B(),P(13,iN,4,1),P(14,aN,4,1),B()(),P(15,dN,16,11,`div`,47),B()}if(e&2){let e,n=t.$implicit,r=K(2);M(),q(`selected`,r.selectedId()===n.id),N(`aria-expanded`,r.selectedId()===n.id)(`aria-controls`,`signal-detail-`+n.id),M(2),C_(`background`,r.kindColor(n.kind)),M(),Y(n.kind),M(2),Y(n.label??`(unnamed)`),M(),F((e=r.changeCount(n.id))?7:-1,e),M(2),F(n.value===void 0?-1:9),M(3),X(`Epoch: `,n.epoch),M(),F(r.getDependencies(n).length?13:-1),M(),F(r.getConsumers(n).length?14:-1),M(),F(r.selectedId()===n.id&&r.selectedNode()?15:-1)}}function pN(e,t){if(e&1){let e=W();z(0,`button`,33),G(`click`,function(){return k(e),A(K(3).clearFilters())}),J(1,`Clear filters`),B()}}function mN(e,t){if(e&1&&(z(0,`li`,56)(1,`p`,21),J(2),B(),z(3,`p`,22),J(4),B(),P(5,pN,2,0,`button`,57),B()),e&2){let e=K(2);M(2),X(` `,e.visibleNodes().length?`No signals match.`:`No signals in this graph.`,` `),M(2),X(` `,e.visibleNodes().length?`Try a different name or kind.`:`Select a component that reads signals, or interact with the page to create some.`,` `),M(),F(e.visibleNodes().length?5:-1)}}function hN(e,t){if(e&1&&(z(0,`h2`,40),J(1,`Signals`),B(),z(2,`ul`,55),I(3,fN,16,14,`li`,null,vM,!1,mN,6,3,`li`,56),B()),e&2){let e=K();M(3),L(e.filteredNodes())}}var gN=`follow`,_N=`env:`,vN=50,yN={selected:`picked`,routed:`rendered by the router`,root:`first component with signals`},bN={write:`set`,sample:`sampled`,initial:`initial`},xN={resolved:`ok`,local:`ok`,loading:`warn`,reloading:`warn`,error:`danger`},SN={signal:`#facc15`,computed:`#60a5fa`,linkedSignal:`#34d399`,effect:`#fb923c`,template:`#94a3b8`,afterRenderEffectPhase:`#f472b6`,childSignalProp:`#fef08a`,"input (signal)":`#f59e0b`,"input.required (signal)":`#f59e0b`,"output (signal)":`#ec4899`,"model (signal)":`#14b8a6`,"model.required (signal)":`#14b8a6`,"viewChild (signal)":`#a3e635`,"viewChild.required (signal)":`#a3e635`,"viewChildren (signal)":`#a3e635`,"contentChild (signal)":`#fda4af`,"contentChild.required (signal)":`#fda4af`,"contentChildren (signal)":`#fda4af`,resource:`#06b6d4`,unknown:`var(--text-2)`},CN=class e{rpc=$(null);destroyRef=E(Cs);pageId=JT();cleanups=[];treePages=j({});picked=j(null);graph=j(null);unsupported=j(!1);showInternals=j(!1);sourceSignals=j([]);sourceLoaded=j(!1);filter=j(``);kind=j(null);resources=Q(()=>this.graph()?.resources??[]);internalIds=Q(()=>new Set(this.resources().flatMap(e=>e.nodeIds)));visibleNodes=Q(()=>{let e=this.internalIds();return(this.graph()?.nodes??[]).filter(t=>!e.has(t.id))});kindCounts=Q(()=>{let e=this.graph()?[...this.visibleNodes().map(e=>e.kind),...this.resources().map(()=>`resource`)]:this.sourceSignals().map(e=>e.kind),t=new Map;for(let n of e)t.set(n,(t.get(n)??0)+1);return[...t].map(([e,t])=>({kind:e,count:t}))});kindTotal=Q(()=>this.kindCounts().reduce((e,t)=>e+t.count,0));selectedId=j(null);selectedNode=Q(()=>this.graph()?.nodes.find(e=>e.id===this.selectedId())??null);selectedHistory=Q(()=>{let e=this.selectedId();return e?[...this.graph()?.history?.[e]??[]].reverse():[]});kindLegend=Object.entries(SN).map(([e,t])=>({kind:e,color:t}));filteredResources=Q(()=>{let e=this.filter().toLowerCase(),t=this.kind();return t&&t!==`resource`?[]:this.resources().filter(t=>!e||t.name.toLowerCase().includes(e)||`resource`.includes(e))});filteredNodes=Q(()=>{let e=this.filter().toLowerCase(),t=this.kind();return this.visibleNodes().filter(n=>(!t||n.kind===t)&&(!e||(n.label??``).toLowerCase().includes(e)||n.kind.toLowerCase().includes(e))).sort((e,t)=>e.id.localeCompare(t.id,void 0,{numeric:!0}))});filteredSourceSignals=Q(()=>{let e=this.filter().toLowerCase(),t=this.kind();return this.sourceSignals().filter(n=>(!t||n.kind===t)&&(!e||n.name.toLowerCase().includes(e)||n.kind.toLowerCase().includes(e)||n.file.toLowerCase().includes(e)))});targetPageId=Q(()=>this.pageId??this.graph()?.pageId??this.latestTreePage()?.pageId??null);latestTreePage=Q(()=>{let e=null;for(let[t,n]of Object.entries(this.treePages())){let r=n.reportedAt??0;(!e||r>e.reportedAt)&&(e={pageId:t,reportedAt:r})}return e});componentOptions=Q(()=>{let e=this.targetPageId(),t=(e?this.treePages()[e]?.roots:void 0)??[],n=[],r=e=>{for(let t of e)n.push(t),r(t.children)};r(t);let i=this.graph()?.environments??[];if(!n.length&&!i.length)return[];let a=new Map;for(let e of n)a.set(e.name,(a.get(e.name)??0)+1);let o=new Map,s=[{value:gN,label:`Follow the routed component`,hint:`automatic`},...i.map(e=>({value:_N+e.id,label:this.injectorLabel(e),hint:`injector`}))];for(let e of n){let t=(o.get(e.name)??0)+1;o.set(e.name,t),s.push({value:e.id,label:(a.get(e.name)??0)>1?`${e.name} #${t}`:e.name,hint:`<${e.tag}>`})}return s});pickerValue=Q(()=>{let e=this.picked();return e&&this.componentOptions().some(t=>t.value===e)?e:gN});constructor(){uc(()=>{let e=this.rpc();e&&(this.loadSignalGraph(e),this.loadSourceSignals(e))}),this.destroyRef.onDestroy(()=>{for(let e of this.cleanups.splice(0))e()})}async loadSignalGraph(e){for(let e of this.cleanups.splice(0))e();let t=e.scope(`ng-devtools`);try{let e=await t.rpc.sharedState(`signal-graph`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e,n=(this.pageId?t?.pages?.[this.pageId]:t?.graph)??null;this.unsupported.set(!!n?.unsupported);let r=n?.unsupported?null:n,i=e=>e?.component?.id??e?.injector?.id;i(r)!==i(this.graph())&&this.selectedId.set(null),this.graph.set(r)};n(e.value()),this.cleanups.push(e.on(`updated`,n))}catch{this.graph.set(null)}try{let e=await t.rpc.sharedState(`component-tree`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e?.pages;this.treePages.set(t&&typeof t==`object`?t:{})};n(e.value()),this.cleanups.push(e.on(`updated`,n))}catch{this.treePages.set({})}}pickComponent(e){let t=e&&e!==gN?e:null;this.picked.set(t);let n=this.rpc();if(!n)return;let r=this.targetPageId()??void 0,i=t?.startsWith(_N)?{pageId:r,env:t.slice(4)}:{pageId:r,id:t};n.scope(`ng-devtools`).rpc.call(`select-signal-target`,i).catch(()=>{})}injectorLabel(e){return e.name===`Root`?`Root services`:e.name}sourceNote(e){return yN[e]}async loadSourceSignals(e){let t=e.scope(`ng-devtools`);try{let e=await t.rpc.call(`get-signals`);this.sourceSignals.set(e)}catch{}finally{this.sourceLoaded.set(!0)}}clearFilters(){this.filter.set(``),this.kind.set(null)}select(e){this.selectedId.set(this.selectedId()===e?null:e),this.showInternals.set(!1)}changeCount(e){let t=this.graph(),n=t?.nodes.find(t=>t.id===e)?.changes??t?.resources?.find(t=>t.id===e)?.changes;return n===void 0?(t?.history?.[e]??[]).reduce((e,t)=>e+(t.source===`initial`?0:1+(t.missed??0)),0):n}historySummary(e){let t=this.changeCount(e),n=this.graph()?.history?.[e]?.length??0;return t?`${`${t} ${t===1?`change`:`changes`} recorded`}${n>=vN&&t>=n?`, showing the last ${n}`:``}, newest first.`:`No changes recorded yet. The entry below is the value seen first.`}statusTone(e){return xN[e]??`neutral`}internalsOf(e){let t=new Set(e.nodeIds);return(this.graph()?.nodes??[]).filter(e=>t.has(e.id))}sourceLabel(e){return bN[e]}kindColor(e){return SN[e]??SN.unknown}getDependencies(e){let t=this.graph();if(!t)return[];let n=t.nodes.findIndex(t=>t.id===e.id);return t.edges.filter(e=>e.consumer===n).map(e=>t.nodes[e.producer]).filter(Boolean)}getConsumers(e){let t=this.graph();if(!t)return[];let n=t.nodes.findIndex(t=>t.id===e.id);return t.edges.filter(e=>e.producer===n).map(e=>t.nodes[e.consumer]).filter(Boolean)}static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-signal-inspector`]],inputs:{rpc:[1,`rpc`]},decls:20,vars:13,consts:[[`historyTpl`,``],[1,`toolbar`],[`type`,`text`,`placeholder`,`Filter by name or kind…`,`aria-label`,`Filter signals by name or kind`,3,`input`,`value`],[1,`picker`],[1,`showing`],[`role`,`status`,1,`fallback`],[1,`intro`],[`role`,`group`,`aria-label`,`Filter by kind`,1,`kinds`],[`role`,`status`,1,`empty`],[1,`empty`],[`id`,`signals-component-label`,1,`label-key`],[`labelledBy`,`signals-component-label`,3,`valueChange`,`options`,`value`],[1,`showing-name`],[1,`mono`],[1,`source-note`],[`type`,`button`,1,`kind-chip`,3,`click`],[1,`count`],[`type`,`button`,1,`kind-chip`,3,`active`],[`aria-hidden`,`true`,1,`dot`],[1,`chip-text`],[`aria-hidden`,`true`,1,`spinner`],[1,`empty-title`],[1,`hint`],[1,`source-label`],[1,`nodes`],[1,`node-card`],[`role`,`status`,1,`empty`,`compact`],[1,`node-header`],[1,`kind-badge`],[1,`node-label`],[1,`node-meta`],[1,`file`,3,`title`],[`aria-hidden`,`true`,1,`sep`],[`type`,`button`,1,`reset`,3,`click`],[3,`id`],[1,`history-summary`],[`tabindex`,`0`,1,`history`,`scroll-box`],[1,`history-meta`],[1,`source-tag`],[1,`missed`],[1,`list-heading`],[`role`,`list`,1,`nodes`,`resources`],[`type`,`button`,1,`node-card`,3,`click`],[1,`status-tag`,3,`class`],[1,`changed-badge`],[`aria-hidden`,`true`,1,`chevron`],[1,`node-value`],[1,`detail-panel`,3,`id`],[1,`status-tag`],[1,`detail-title`],[3,`ngTemplateOutlet`,`ngTemplateOutletContext`],[`type`,`button`,1,`reset`,`internals-toggle`,3,`click`],[`role`,`region`,`tabindex`,`0`,1,`scroll-box`],[1,`kind-badge`,`sm`],[1,`rel-label`],[`role`,`list`,1,`nodes`],[1,`empty`,`compact`],[`type`,`button`,1,`reset`]],template:function(e,t){if(e&1&&(z(0,`div`,1)(1,`input`,2),G(`input`,function(e){return t.filter.set(e.target.value)}),B(),P(2,yM,4,2,`div`,3),B(),P(3,xM,6,3,`p`,4)(4,SM,5,1,`p`,4),P(5,CM,2,0,`p`,5),z(6,`p`,6),P(7,wM,1,0)(8,TM,1,0)(9,EM,1,0),B(),P(10,DM,2,0,`p`,5),P(11,OM,2,2,`p`,5),P(12,AM,7,4,`div`,7),P(13,jM,4,0,`div`,8),P(14,MM,14,0,`div`,9),P(15,IM,6,1),tg(16,BM,1,1,`ng-template`,null,0,hv),P(18,tN,5,0),P(19,hN,6,1)),e&2){let e,n;M(),R(`value`,t.filter()),M(),F(t.componentOptions().length?2:-1),M(),F((e=t.graph()?.component)?3:(e=t.graph()?.injector)?4:-1,e),M(2),F(t.graph()&&t.picked()&&t.graph().source!==`selected`?5:-1),M(2),F(t.graph()?.injector?7:t.graph()?8:9),M(3),F(t.unsupported()?10:-1),M(),F((n=t.graph()?.nodeCount)?11:-1,n),M(),F(t.kindCounts().length?12:-1),M(),F(!t.graph()&&!t.sourceLoaded()?13:-1),M(),F(!t.graph()&&t.sourceLoaded()&&t.sourceSignals().length===0?14:-1),M(),F(!t.graph()&&t.sourceSignals().length>0?15:-1),M(3),F(t.graph()&&t.filteredResources().length?18:-1),M(),F(t.graph()&&(t.visibleNodes().length||!t.filteredResources().length)?19:-1)}},dependencies:[Qy,XE,rb,ib],styles:[`[_nghost-%COMP%] { + display: block; + min-width: 0; + color: var(--%NS%text); + font-size: 13px; +} + +.toolbar[_ngcontent-%COMP%] { + position: sticky; + top: 0; + z-index: 2; + display: flex; + flex-wrap: wrap; + gap: 8px 12px; + align-items: center; + margin: 0 0 16px; + padding: 10px 12px; + background: color-mix(in srgb, var(--%NS%surface) 85%, transparent); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); +} + +input[_ngcontent-%COMP%] { + flex: 1 1 200px; + min-width: 0; + height: 34px; + padding: 0 12px; + background: var(--%NS%bg); + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + outline: none; + transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease); +} + +input[_ngcontent-%COMP%]::placeholder { + color: var(--%NS%text-3); +} + +input[_ngcontent-%COMP%]:hover { + border-color: color-mix(in srgb, var(--%NS%text-3) 60%, var(--%NS%border-strong)); +} + +input[_ngcontent-%COMP%]:focus-visible { + outline: none; + border-color: var(--%NS%accent); + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +.empty[_ngcontent-%COMP%] { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + text-align: center; + padding: 40px 24px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + animation: enter 0.35s var(--%NS%ease) both; +} + +.empty.compact[_ngcontent-%COMP%] { + padding: 24px 16px; + border-style: dashed; + background: transparent; +} + +.empty-title[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-strong); + font-size: 14px; + font-weight: 600; +} + +.hint[_ngcontent-%COMP%] { + max-width: 460px; + margin: 0; + color: var(--%NS%text-2); + font-size: 13px; + line-height: 1.55; + overflow-wrap: anywhere; +} + +.hint[_ngcontent-%COMP%] code[_ngcontent-%COMP%] { + padding: 1px 5px; + font-family: var(--%NS%font-mono); + font-size: 12px; + color: var(--%NS%text); + background: var(--%NS%surface-3); + border: 1px solid var(--%NS%border); + border-radius: 5px; +} + +.reset[_ngcontent-%COMP%] { + height: 34px; + margin-top: 4px; + padding: 0 14px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + font-weight: 500; + cursor: pointer; + transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease); +} + +.reset[_ngcontent-%COMP%]:hover { + background: var(--%NS%surface-3); +} + +.reset[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.spinner[_ngcontent-%COMP%] { + width: 18px; + height: 18px; + border: 2px solid var(--%NS%border-strong); + border-top-color: var(--%NS%accent); + border-radius: 50%; + animation: spin 0.8s linear infinite; +} + +@media (prefers-reduced-motion: reduce) { + .spinner[_ngcontent-%COMP%] { + animation: none; + border-top-color: var(--%NS%border-strong); + } +} +.intro[_ngcontent-%COMP%] { + margin: 0 0 12px; + color: var(--%NS%text-2); + font-size: 13px; + line-height: 1.5; +} + +.kinds[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin-bottom: 16px; +} + +.kind-chip[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + gap: 6px; + max-width: 100%; + height: 28px; + padding: 0 10px; + border: 1px solid var(--%NS%border); + border-radius: 99px; + background: var(--%NS%surface-2); + color: var(--%NS%text-2); + font: inherit; + font-size: 12px; + font-weight: 500; + cursor: pointer; + transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), color 0.15s var(--%NS%ease); +} + +.kind-chip[_ngcontent-%COMP%]:hover { + border-color: var(--%NS%border-strong); + background: var(--%NS%surface-3); + color: var(--%NS%text); +} + +.kind-chip[_ngcontent-%COMP%]:active { + transform: translateY(0.5px); +} + +.kind-chip.active[_ngcontent-%COMP%] { + border-color: var(--%NS%accent-line); + background: var(--%NS%accent-soft); + color: var(--%NS%text-strong); +} + +.kind-chip[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.chip-text[_ngcontent-%COMP%] { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.kind-chip[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] { + flex: none; + min-width: 18px; + padding: 0 5px; + border-radius: 99px; + background: var(--%NS%surface-3); + color: var(--%NS%text-2); + font-size: 11px; + line-height: 16px; + text-align: center; + font-variant-numeric: tabular-nums; +} + +.kind-chip.active[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] { + background: color-mix(in srgb, var(--%NS%accent) 22%, transparent); + color: var(--%NS%text-strong); +} + +.dot[_ngcontent-%COMP%] { + flex: none; + width: 8px; + height: 8px; + border-radius: 50%; +} + +.node-header[_ngcontent-%COMP%] { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 6px 8px; + min-width: 0; +} + +.kind-badge[_ngcontent-%COMP%] { + flex: none; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 10.5px; + line-height: 18px; + padding: 0 8px; + border-radius: 99px; + color: var(--%NS%bg); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.06em; +} + +.node-label[_ngcontent-%COMP%] { + min-width: 0; + font-family: var(--%NS%font-mono); + font-size: 13px; + font-weight: 500; + color: var(--%NS%text-strong); + overflow-wrap: anywhere; +} + +.node-meta[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 2px 6px; + min-width: 0; + margin-top: 6px; + font-size: 12px; + color: var(--%NS%text-3); + font-variant-numeric: tabular-nums; +} + +.node-meta[_ngcontent-%COMP%] .file[_ngcontent-%COMP%] { + min-width: 0; + font-family: var(--%NS%font-mono); + font-size: 11.5px; + overflow-wrap: anywhere; +} + +.sep[_ngcontent-%COMP%] { + color: var(--%NS%border-strong); +} + +dl[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + gap: 8px 16px; + margin: 0; + font-size: 13px; +} + +dt[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + padding-top: 2px; +} + +dd[_ngcontent-%COMP%] { + min-width: 0; + margin: 0; + color: var(--%NS%text); + font-variant-numeric: tabular-nums; + overflow-wrap: anywhere; +} + +pre[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); + font-size: 12.5px; + line-height: 1.55; + white-space: pre-wrap; + overflow-wrap: anywhere; + margin: 0; + color: var(--%NS%text); +} + +.nodes[_ngcontent-%COMP%] { + display: flex; + flex-direction: column; + gap: 8px; + list-style: none; + padding: 0; + margin: 0; + animation: enter 0.35s var(--%NS%ease) both; +} + +.node-card[_ngcontent-%COMP%] { + display: block; + width: 100%; + min-width: 0; + text-align: left; + font: inherit; + color: inherit; + background: var(--%NS%surface); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + padding: 12px 16px; + transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease); +} + +.node-card[_ngcontent-%COMP%]:hover { + background: var(--%NS%surface-2); + border-color: var(--%NS%border-strong); +} + +.picker[_ngcontent-%COMP%] { + display: flex; + align-items: center; + gap: 8px; + flex: 1 1 260px; + min-width: 0; +} + +.picker[_ngcontent-%COMP%] app-select[_ngcontent-%COMP%] { + flex: 1 1 auto; + min-width: 0; +} + +.label-key[_ngcontent-%COMP%] { + flex: none; + color: var(--%NS%text-2); + font-size: 12px; +} + +.showing[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + align-items: baseline; + gap: 4px 10px; + margin: 0 0 8px; + font-size: 12px; + color: var(--%NS%text-2); +} + +.showing-name[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-family: var(--%NS%font-mono); + font-size: 13px; + font-weight: 600; +} + +.mono[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); + overflow-wrap: anywhere; +} + +.source-note[_ngcontent-%COMP%] { + padding: 0 8px; + border: 1px solid var(--%NS%border-strong); + border-radius: 99px; + line-height: 18px; +} + +.fallback[_ngcontent-%COMP%] { + margin: 0 0 8px; + color: var(--%NS%warn); + font-size: 12px; +} + +.source-label[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + margin: 0 0 12px; +} + +.nodes[_ngcontent-%COMP%] > li[_ngcontent-%COMP%] { + display: block; + min-width: 0; + padding: 0; +} + +button.node-card[_ngcontent-%COMP%] { + cursor: pointer; +} + +.node-card[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.node-card.selected[_ngcontent-%COMP%] { + background: var(--%NS%accent-soft); + border-color: var(--%NS%accent-line); + box-shadow: inset 2px 0 0 var(--%NS%accent); +} + +.chevron[_ngcontent-%COMP%] { + flex: none; + width: 7px; + height: 7px; + margin-left: auto; + border-right: 1.5px solid var(--%NS%text-3); + border-bottom: 1.5px solid var(--%NS%text-3); + transform: translateY(-2px) rotate(45deg); + transition: transform 0.2s var(--%NS%ease), border-color 0.15s var(--%NS%ease); +} + +.node-card[_ngcontent-%COMP%]:hover .chevron[_ngcontent-%COMP%] { + border-color: var(--%NS%text); +} + +.node-card.selected[_ngcontent-%COMP%] .chevron[_ngcontent-%COMP%] { + border-color: var(--%NS%accent); + transform: translateY(2px) rotate(-135deg); +} + +.node-value[_ngcontent-%COMP%] { + display: block; + margin-top: 8px; + padding: 4px 8px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-family: var(--%NS%font-mono); + font-size: 12px; + color: var(--%NS%text-2); + background: var(--%NS%bg); + border: 1px solid var(--%NS%border); + border-radius: 6px; +} + +.node-card.selected[_ngcontent-%COMP%] .node-value[_ngcontent-%COMP%] { + background: color-mix(in srgb, var(--%NS%bg) 70%, transparent); +} + +.kind-badge.sm[_ngcontent-%COMP%] { + font-size: 10px; + line-height: 16px; + padding: 0 6px; +} + +.changed-badge[_ngcontent-%COMP%] { + flex: none; + font-size: 11px; + font-weight: 500; + line-height: 16px; + padding: 0 8px; + border: 1px solid; + border-radius: 99px; + font-variant-numeric: tabular-nums; +} + +.changed-badge[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); + background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); + color: var(--%NS%warn); +} + +.detail-panel[_ngcontent-%COMP%] { + margin-top: 8px; + padding: 16px; + background: var(--%NS%surface); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + box-shadow: var(--%NS%shadow); + animation: enter 0.25s var(--%NS%ease) both; +} + +.detail-title[_ngcontent-%COMP%] { + margin: 0 0 16px; + font-family: var(--%NS%font-mono); + font-size: 14px; + font-weight: 600; + color: var(--%NS%accent); + overflow-wrap: anywhere; +} + +.detail-panel[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + margin: 20px 0 8px; +} + +.detail-panel[_ngcontent-%COMP%] dd[_ngcontent-%COMP%] pre[_ngcontent-%COMP%] { + max-height: 240px; + overflow: auto; + padding: 8px 12px; + background: var(--%NS%surface-2); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); +} + +.scroll-box[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: -2px; +} + +.list-heading[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + margin: 16px 0 8px; +} + +.resources[_ngcontent-%COMP%] { + margin-bottom: 8px; +} + +.status-tag[_ngcontent-%COMP%] { + flex: none; + font-size: 11px; + font-weight: 500; + line-height: 16px; + padding: 0 8px; + border: 1px solid; + border-radius: 99px; +} + +.tone-ok[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); + color: var(--%NS%ok); +} + +.tone-warn[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); + background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); + color: var(--%NS%warn); +} + +.tone-danger[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + color: var(--%NS%danger); +} + +.tone-neutral[_ngcontent-%COMP%] { + color: var(--%NS%text-2); + border-color: var(--%NS%border-strong); +} + +.detail-panel[_ngcontent-%COMP%] .hint[_ngcontent-%COMP%] { + margin: 0 0 12px; +} + +.internals-toggle[_ngcontent-%COMP%] { + margin-top: 16px; +} + +.detail-panel[_ngcontent-%COMP%] .internals-toggle[_ngcontent-%COMP%] + ul[_ngcontent-%COMP%] { + margin-top: 8px; +} + +.detail-panel[_ngcontent-%COMP%] ul[_ngcontent-%COMP%] { + display: flex; + flex-direction: column; + gap: 2px; + list-style: none; + padding: 0; + margin: 0; + font-size: 13px; +} + +.detail-panel[_ngcontent-%COMP%] ul[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { + display: flex; + align-items: center; + gap: 8px; + min-width: 0; + min-height: 28px; + padding: 4px 8px; + color: var(--%NS%text-2); + border-radius: 6px; + transition: background-color 0.15s var(--%NS%ease); +} + +.detail-panel[_ngcontent-%COMP%] ul[_ngcontent-%COMP%] li[_ngcontent-%COMP%]:hover { + background: var(--%NS%surface-2); + color: var(--%NS%text); +} + +.rel-label[_ngcontent-%COMP%] { + min-width: 0; + font-family: var(--%NS%font-mono); + font-size: 12.5px; + overflow-wrap: anywhere; +} + +.history-summary[_ngcontent-%COMP%] { + margin: 0 0 8px; + font-size: 12px; + color: var(--%NS%text-2); + font-variant-numeric: tabular-nums; +} + +.history[_ngcontent-%COMP%] { + list-style: none; + padding: 4px; + margin: 0; + max-height: 320px; + overflow: auto; + background: var(--%NS%surface-2); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); +} + +.history[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { + display: block; + padding: 8px; + border-radius: 6px; + transition: background-color 0.15s var(--%NS%ease); +} + +.history[_ngcontent-%COMP%] li[_ngcontent-%COMP%] + li[_ngcontent-%COMP%] { + border-top: 1px solid var(--%NS%border); +} + +.history[_ngcontent-%COMP%] li[_ngcontent-%COMP%]:hover { + background: var(--%NS%surface-3); +} + +.history-meta[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 4px 8px; + align-items: center; + margin-bottom: 4px; + font-size: 11px; + color: var(--%NS%text-2); + font-variant-numeric: tabular-nums; +} + +.history-meta[_ngcontent-%COMP%] time[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); + color: var(--%NS%text); +} + +.source-tag[_ngcontent-%COMP%] { + line-height: 16px; + padding: 0 8px; + border-radius: 99px; + background: var(--%NS%surface-3); + border: 1px solid var(--%NS%border-strong); + color: var(--%NS%text); +} + +.source-write[_ngcontent-%COMP%] { + color: #93c5fd; + background: color-mix(in srgb, #60a5fa 12%, transparent); + border-color: color-mix(in srgb, #60a5fa 30%, transparent); +} + +.missed[_ngcontent-%COMP%] { + color: var(--%NS%warn); +} + +@media (max-width: 480px) { + .toolbar[_ngcontent-%COMP%] { + padding: 8px; + } + .toolbar[_ngcontent-%COMP%] input[_ngcontent-%COMP%], + .picker[_ngcontent-%COMP%] { + flex-basis: 100%; + } + .node-card[_ngcontent-%COMP%], + .detail-panel[_ngcontent-%COMP%] { + padding: 12px; + } + dl[_ngcontent-%COMP%] { + grid-template-columns: minmax(0, 1fr); + gap: 4px; + } + dd[_ngcontent-%COMP%] + dt[_ngcontent-%COMP%] { + margin-top: 8px; + } +}`]})},wN=(e,t)=>t.node.injector.id,TN=(e,t)=>t.id,EN=(e,t)=>t.from+t.token+e,DN=(e,t)=>t.token+e,ON=(e,t)=>t.type,kN=(e,t)=>t.token+t.file+t.line;function AN(e,t){if(e&1){let e=W();H(0,`label`,12)(1,`input`,13),Qg(`change`,function(){k(e);let t=K(2);return A(t.componentsOnly.set(!t.componentsOnly()))}),U(),J(2,` Components only `),U()}if(e&2){let e=K(2);M(),Vg(`checked`,e.componentsOnly())}}function jN(e,t){e&1&&(H(0,`p`,14),fs(),H(1,`svg`,21),Fg(2,`circle`,22)(3,`path`,23),U(),ps(),H(4,`span`)(5,`strong`),J(6,`This page has more than 2000 element injectors.`),U(),J(7,` Only the first 2000 are shown, so a lookup path or a provider can point to one that is not listed. `),U()())}function MN(e,t){if(e&1){let e=W();H(0,`button`,26),Qg(`click`,function(){let t=k(e).$implicit;return A(K(3).reveal(t.id))}),Fg(1,`span`,27),H(2,`span`,28),J(3),U(),H(4,`span`,29),J(5),U()()}if(e&2){let e=t.$implicit,n=K(3);M(),C_(`background`,n.tone(e.kind)),M(2),Y(e.label),M(2),Y(e.tokens)}}function NN(e,t){if(e&1&&(H(0,`div`,15)(1,`span`,24),J(2,`Provided by`),U(),I(3,MN,6,4,`button`,25,TN),U()),e&2){let e=K(2);M(3),L(e.providedBy())}}function PN(e,t){if(e&1){let e=W();H(0,`div`,16),J(1),H(2,`button`,30),Qg(`click`,function(){return k(e),A(K(2).query.set(``))}),J(3,`Clear search`),U()()}if(e&2){let e=K(2);M(),X(` Nothing here matches “`,e.query().trim(),`”. `)}}function FN(e,t){e&1&&J(0,` None of them provide anything themselves. `)}function IN(e,t){e&1&&J(0,` Turn off “Components only” to see directives. `)}function LN(e,t){e&1&&J(0,` Try a different search. `)}function RN(e,t){if(e&1&&(H(0,`div`,1)(1,`p`,31),J(2,`No injectors to show`),U(),H(3,`p`,32),P(4,FN,1,0)(5,IN,1,0)(6,LN,1,0),U()()),e&2){let e=K(2);M(4),F(e.onlyProviding()?4:e.componentsOnly()&&e.view()===`element`?5:6)}}function zN(e,t){if(e&1){let e=W();H(0,`span`,43),Qg(`click`,function(t){k(e);let n=K().$implicit;return A(K(2).toggle(n.node.injector.id,t))}),fs(),H(1,`svg`,44),Fg(2,`path`,45),U()()}if(e&2){let e=K().$implicit;q(`open`,e.expanded)}}function BN(e,t){e&1&&Fg(0,`span`,35)}function VN(e,t){if(e&1&&(H(0,`span`,39),J(1),U()),e&2){let e=K().$implicit;M(),Y(e.node.injector.component)}}function HN(e,t){if(e&1&&(H(0,`span`,39),J(1),U()),e&2){let e=K().$implicit;M(),Y(e.node.injector.directives.join(`, `))}}function UN(e,t){if(e&1&&(H(0,`span`,41),fs(),H(1,`svg`,21),Fg(2,`path`,46),U(),ps(),H(3,`span`,37),J(4,`injects`),U(),J(5),U()),e&2){let e=K().$implicit;N(`title`,e.node.dependencies.length+` injected`),M(5),X(` `,e.node.dependencies.length,` `)}}function WN(e,t){if(e&1&&(H(0,`span`,42),fs(),H(1,`svg`,21),Fg(2,`path`,47),U(),ps(),H(3,`span`,37),J(4,`provides`),U(),J(5),U()),e&2){let e=K().$implicit;N(`title`,e.node.injector.providerCount+` provided`),M(5),X(` `,e.node.injector.providerCount,` `)}}function GN(e,t){if(e&1){let e=W();H(0,`div`,33),Qg(`click`,function(){let t=k(e).$implicit;return A(K(2).select(t.node.injector.id))})(`focus`,function(){let t=k(e).$implicit,n=K(2);return n.focusId.set(t.node.injector.id),A(n.highlight(t.node))})(`blur`,function(){return k(e),A(K(2).highlight(null))})(`mouseenter`,function(){let t=k(e).$implicit;return A(K(2).highlight(t.node))})(`mouseleave`,function(){return k(e),A(K(2).highlight(null))}),P(1,zN,3,2,`span`,34)(2,BN,1,0,`span`,35),H(3,`span`,36),J(4),U(),H(5,`span`,37),J(6),U(),H(7,`span`,38),J(8),U(),P(9,VN,2,1,`span`,39)(10,HN,2,1,`span`,39),H(11,`span`,40),P(12,UN,6,2,`span`,41),P(13,WN,6,2,`span`,42),U()()}if(e&2){let e=t.$implicit,n=K(2);C_(`--%NS%depth`,e.depth),q(`selected`,n.selected()?.injector?.id===e.node.injector.id),N(`aria-level`,e.depth+1)(`aria-expanded`,e.hasChildren?e.expanded:null)(`aria-selected`,n.selected()?.injector?.id===e.node.injector.id)(`tabindex`,n.rovingId()===e.node.injector.id?0:-1)(`data-id`,e.node.injector.id),M(),F(e.hasChildren?1:2),M(2),C_(`--%NS%tone`,n.tone(n.kind(e.node))),N(`title`,n.kind(e.node)),M(),Y(n.kind(e.node)[0].toUpperCase()),M(2),Y(n.kind(e.node)),M(2),Y(n.label(e.node)),M(),F(e.node.injector.component?9:e.node.injector.directives?.length?10:-1),M(3),F((e.node.dependencies?.length??0)>0?12:-1),M(),F(e.node.injector.providerCount>0?13:-1)}}function KN(e,t){if(e&1&&(H(0,`li`),J(1),U()),e&2){let e=t.$implicit;q(`is-component`,e===K(2).injector.component),M(),Y(e)}}function qN(e,t){if(e&1&&(H(0,`ul`,51),I(1,KN,2,3,`li`,58,wg),U()),e&2){let e=K();M(),L(e.injector.directives)}}function JN(e,t){if(e&1&&(H(0,`span`,59),Fg(1,`span`,27),J(2,` Null injector `),H(3,`span`,61),J(4,`throws NullInjectorError`),U()()),e&2){let e=K(4);M(),C_(`background`,e.tone(`null`))}}function YN(e,t){if(e&1&&(H(0,`span`,63),J(1),H(2,`span`,37),J(3),U()()),e&2){let e=K(2).$implicit;M(),X(` `,e.providers,` `),M(2),Y(e.providers===1?`provider`:`providers`)}}function XN(e,t){if(e&1){let e=W();H(0,`button`,62),Qg(`click`,function(){k(e);let t=K().$implicit;return A(K(3).reveal(t.id))}),Fg(1,`span`,27),H(2,`span`,28),J(3),U(),P(4,YN,4,2,`span`,63),U()}if(e&2){let e=K().$implicit,t=K(3);M(),C_(`background`,t.tone(e.kind)),M(2),Y(e.label),M(),F(e.providers?4:-1)}}function ZN(e,t){if(e&1&&(H(0,`li`),P(1,JN,5,2,`span`,59)(2,XN,5,4,`button`,60),U()),e&2){let e=t.$implicit,n=t.$index,r=K(3);q(`current`,n===0),M(),F(e.id===r.nullId?1:2)}}function QN(e,t){if(e&1&&(H(0,`span`,69),J(1),U()),e&2){let e=t.$implicit;M(),Y(e)}}function $N(e,t){if(e&1&&(H(0,`span`),J(1),U()),e&2){let e=K().$implicit;M(),X(`for `,e.from)}}function eP(e,t){if(e&1){let e=W();H(0,`button`,74),Qg(`click`,function(){let t=k(e);return A(K(6).reveal(t))}),Fg(1,`span`,27),J(2,` from `),H(3,`span`,28),J(4),U()()}if(e&2){let e=t,n=K(6);M(),C_(`background`,n.tone(n.kindById(e))),M(3),Y(n.labelById(e))}}function tP(e,t){e&1&&(H(0,`span`,72),J(1,`optional, not provided`),U())}function nP(e,t){e&1&&(H(0,`span`,73),J(1,`not provided anywhere`),U())}function rP(e,t){if(e&1&&(H(0,`li`,66)(1,`div`,67)(2,`span`,68),J(3),U(),I(4,QN,2,1,`span`,69,wg),U(),H(6,`div`,70),P(7,$N,2,1,`span`),P(8,eP,5,3,`button`,71)(9,tP,2,0,`span`,72)(10,nP,2,0,`span`,73),U()()),e&2){let e,n=t.$implicit,r=K(3);q(`hit`,K(2).matches(n.token)),M(3),Y(n.token),M(),L(n.flags),M(3),F(r.injector.directives&&r.injector.directives.length>1?7:-1),M(),F((e=n.providedBy)?8:n.flags.includes(`optional`)?9:10,e)}}function iP(e,t){if(e&1&&(H(0,`ul`,64),I(1,rP,11,5,`li`,65,EN),U()),e&2){let e=K(2);M(),L(e.dependencies)}}function aP(e,t){e&1&&(H(0,`p`,57),J(1,`Nothing is injected through the constructor or inject().`),U())}function oP(e,t){if(e&1&&(H(0,`div`,52)(1,`h3`),J(2,` Injected here `),H(3,`span`,6),J(4),U()(),P(5,iP,3,0,`ul`,64)(6,aP,2,0,`p`,57),U()),e&2){let e=K();M(4),Y(e.dependencies?.length??0),M(),F(e.dependencies?.length?5:6)}}function sP(e,t){e&1&&(H(0,`span`,69),J(1,`viewProviders`),U())}function cP(e,t){e&1&&(H(0,`span`,69),J(1,`multi`),U())}function lP(e,t){if(e&1&&(H(0,`div`,70),J(1),U()),e&2){let e=K().$implicit;M(),X(`via `,e.importPath.join(` › `))}}function uP(e,t){if(e&1&&(H(0,`li`,76)(1,`div`,67)(2,`span`,68),J(3),U(),H(4,`span`,77),J(5),U(),P(6,sP,2,0,`span`,69),P(7,cP,2,0,`span`,69),U(),P(8,lP,2,1,`div`,70),U()),e&2){let e=t.$implicit,n=K(4);q(`hit`,n.matches(e.token)),M(3),Y(e.token),M(2),Y(e.type===`unknown`?`provider`:`use`+n.capital(e.type)),M(),F(e.isViewProvider?6:-1),M(),F(e.multi?7:-1),M(),F(e.importPath?.length?8:-1)}}function dP(e,t){if(e&1&&(H(0,`ul`,56),I(1,uP,9,7,`li`,75,DN),U()),e&2){let e=K();M(),L(e.providers)}}function fP(e,t){e&1&&J(0,` No providers or viewProviders on this element. `)}function pP(e,t){e&1&&J(0,` This injector has no providers of its own. `)}function mP(e,t){if(e&1&&(H(0,`p`,57),P(1,fP,1,0)(2,pP,1,0),U()),e&2){let e=K();M(),F(e.injector.type===`element`?1:2)}}function hP(e,t){if(e&1&&(H(0,`section`,20)(1,`header`,48)(2,`span`,49),J(3),U(),H(4,`h2`,50),J(5),U(),P(6,qN,3,0,`ul`,51),U(),H(7,`div`,52)(8,`h3`),J(9,`Lookup path`),U(),H(10,`p`,53),J(11,`Angular asks these injectors in order until one has the token.`),U(),H(12,`ol`,54),I(13,ZN,3,3,`li`,55,TN),U()(),P(15,oP,7,2,`div`,52),H(16,`div`,52)(17,`h3`),J(18,` Provides `),H(19,`span`,6),J(20),U()(),P(21,dP,3,0,`ul`,56)(22,mP,3,1,`p`,57),U()()),e&2){let e=t,n=K(2);M(2),C_(`--%NS%tone`,n.tone(n.kind(e))),M(),Y(n.kind(e)),M(2),Y(n.label(e)),M(),F(e.injector.directives?.length?6:-1),M(7),L(n.path()),M(2),F(e.injector.type===`element`?15:-1),M(5),Y(e.providers.length),M(),F(e.providers.length?21:22)}}function gP(e,t){if(e&1){let e=W();H(0,`p`,2),J(1,` Every component and directive gets an injector. When it asks for a token, Angular walks up this tree, then through the environment injectors, until something provides it. `),U(),H(2,`div`,3)(3,`div`,4)(4,`button`,5),Qg(`click`,function(){return k(e),A(K().setView(`element`))}),J(5,` Elements `),H(6,`span`,6),J(7),U()(),H(8,`button`,5),Qg(`click`,function(){return k(e),A(K().setView(`environment`))}),J(9,` Environment `),H(10,`span`,6),J(11),U()()(),H(12,`div`,7),fs(),H(13,`svg`,8),Fg(14,`circle`,9)(15,`path`,10),U(),ps(),H(16,`input`,11),Qg(`input`,function(t){return k(e),A(K().query.set(t.target.value))})(`keydown.escape`,function(){return k(e),A(K().query.set(``))}),U()(),P(17,AN,3,1,`label`,12),H(18,`label`,12)(19,`input`,13),Qg(`change`,function(){k(e);let t=K();return A(t.onlyProviding.set(!t.onlyProviding()))}),U(),J(20,` With providers `),U()(),P(21,jN,8,0,`p`,14),P(22,NN,5,0,`div`,15)(23,PN,4,1,`div`,16),H(24,`div`,17),P(25,RN,7,1,`div`,1),H(26,`div`,18),Qg(`keydown`,function(t){return k(e),A(K().onTreeKey(t))}),I(27,GN,14,19,`div`,19,wN),U(),P(29,hP,23,8,`section`,20),U()}if(e&2){let e,t=K();M(4),q(`active`,t.view()===`element`),N(`aria-pressed`,t.view()===`element`),M(3),Y(t.elementCount()),M(),q(`active`,t.view()===`environment`),N(`aria-pressed`,t.view()===`environment`),M(3),Y(t.environmentCount()),M(5),Vg(`value`,t.query()),M(),F(t.view()===`element`?17:-1),M(2),Vg(`checked`,t.onlyProviding()),M(2),F(t.truncated()?21:-1),M(),F(t.providedBy().length?22:t.query().trim()&&!t.rows().length?23:-1),M(3),F(t.rows().length?-1:25),M(),Vg(`hidden`,!t.rows().length),N(`aria-label`,t.view()===`element`?`Element injectors`:`Environment injectors`),M(),L(t.rows()),M(2),F((e=t.selected())?29:-1,e)}}function _P(e,t){e&1&&(H(0,`div`,0),Fg(1,`span`,78),H(2,`p`,31),J(3,`Loading dependency injection data…`),U()())}function vP(e,t){e&1&&(H(0,`div`,1)(1,`p`,31),J(2,`No DI data found`),U(),H(3,`p`,32),J(4,` Open the app in a browser with the devtools connected to see its live injectors. No providers, injectables or inject() calls were found in the source either. `),U()())}function yP(e,t){if(e&1){let e=W();H(0,`div`,1)(1,`p`,31),J(2),U(),H(3,`p`,32),J(4,`Try part of a token name or a file path.`),U(),H(5,`button`,5),Qg(`click`,function(){return k(e),A(K(2).query.set(``))}),J(6,`Clear filter`),U()()}if(e&2){let e=K(2);M(2),X(`No providers match “`,e.query(),`”`)}}function bP(e,t){if(e&1&&(H(0,`span`,88),J(1),U()),e&2){let e=K().$implicit;M(),X(`providedIn: `,e.providedIn)}}function xP(e,t){if(e&1&&(H(0,`span`,90),J(1),U()),e&2){let e=K().$implicit;M(),X(`as `,e.source)}}function SP(e,t){if(e&1&&(H(0,`li`,85)(1,`div`,86)(2,`span`,87),J(3),U(),P(4,bP,2,1,`span`,88),U(),H(5,`div`,89)(6,`span`,54),J(7),U(),P(8,xP,2,1,`span`,90),U()()),e&2){let e=t.$implicit;M(3),Y(e.token),M(),F(e.providedIn?4:-1),M(3),Z(``,e.file,`:`,e.line),M(),F(e.source!==`class`&&e.source!==`providers array`?8:-1)}}function CP(e,t){if(e&1&&(H(0,`section`,82)(1,`h2`),J(2),H(3,`span`,83),J(4),U()(),H(5,`ul`,84),I(6,SP,9,5,`li`,85,kN),U()()),e&2){let e=t.$implicit;M(2),X(` `,e.label,` `),M(2),Y(e.items.length),M(2),L(e.items)}}function wP(e,t){if(e&1&&(H(0,`div`,81),I(1,CP,8,2,`section`,82,ON),U()),e&2){let e=K(2);M(),L(e.groupedProviders())}}function TP(e,t){if(e&1){let e=W();H(0,`div`,3)(1,`div`,7),fs(),H(2,`svg`,8),Fg(3,`circle`,9)(4,`path`,10),U(),ps(),H(5,`input`,79),Qg(`input`,function(t){return k(e),A(K().query.set(t.target.value))})(`keydown.escape`,function(){return k(e),A(K().query.set(``))}),U()(),H(6,`span`,80),J(7),U()(),H(8,`p`,14),fs(),H(9,`svg`,21),Fg(10,`circle`,22)(11,`path`,23),U(),ps(),H(12,`span`)(13,`strong`),J(14,`DI from source scan (static analysis).`),U(),J(15,` Connect the overlay on Angular 20 or later to see the live injector tree. `),U()(),P(16,yP,7,1,`div`,1)(17,wP,3,0,`div`,81)}if(e&2){let e=K();M(5),Vg(`value`,e.query()),M(2),Z(` `,e.sourceMatchCount(),` of `,e.sourceProviders().length,` `),M(9),F(e.groupedProviders().length===0?16:17)}}var EP=`inj-null`,DP={component:`var(--accent)`,directive:`#7cb4ff`,environment:`var(--ok)`,null:`var(--text-3)`};function OP(e){return e.injector.type===`element`?e.injector.component?`component`:`directive`:`environment`}function kP(e){return e.injector.type===`element`?`<${e.injector.name}>`:e.injector.name}function AP(e){return Array.isArray(e)}var jP=class e{rpc=$(null);nullId=EP;roots=j([]);environment=j([]);sourceProviders=j([]);loaded=j(!1);truncated=j(!1);view=j(`element`);query=j(``);onlyProviding=j(!1);componentsOnly=j(!0);collapsed=j(new Set);selectedId=j(null);focusId=j(null);index=Q(()=>{let e=new Map,t=new Map,n=(r,i)=>{for(let a of r)e.set(a.injector.id,a),i&&t.set(a.injector.id,i),n(a.children,a.injector.id)};return n(this.roots(),null),n(this.environment(),null),{map:e,parents:t}});elementCount=Q(()=>this.count(this.roots()));environmentCount=Q(()=>this.count(this.environment()));visible=Q(()=>{let e=this.view()===`element`?this.roots():this.environment();this.view()===`element`&&this.componentsOnly()&&(e=this.prune(e,e=>!!e.injector.component)),this.onlyProviding()&&(e=this.prune(e,e=>e.providers.length>0));let t=this.normalizedQuery();return t&&(e=this.prune(e,e=>this.nodeMatches(e,t))),e});rows=Q(()=>{let e=[],t=this.collapsed(),n=!!this.normalizedQuery(),r=(i,a)=>{for(let o of i){let i=n||!t.has(o.injector.id);e.push({node:o,depth:a,hasChildren:o.children.length>0,expanded:i}),i&&r(o.children,a+1)}};return r(this.visible(),0),e});selected=Q(()=>{let e=this.selectedId();return(e?this.index().map.get(e):void 0)??this.rows()[0]?.node??null});rovingId=Q(()=>{let e=this.rows(),t=this.focusId()??this.selected()?.injector.id;return t&&e.some(e=>e.node.injector.id===t)?t:e[0]?.node.injector.id??null});path=Q(()=>{let e=this.selected();if(!e)return[];let{map:t,parents:n}=this.index(),r=e.injector.path??[];if(!r.length){r=[e.injector.id];let t=n.get(e.injector.id);for(;t;)r.push(t),t=n.get(t);r.push(EP)}return r.map(e=>{let n=t.get(e);return{id:e,label:n?kP(n):e===EP?`Null injector`:`Not listed`,kind:n?OP(n):`null`,providers:n?.providers.length??0}})});providedBy=Q(()=>{let e=this.normalizedQuery();if(!e)return[];let t=[];for(let n of this.index().map.values()){let r=n.providers.filter(t=>t.token.toLowerCase().includes(e));r.length&&t.push({id:n.injector.id,label:kP(n),kind:OP(n),tokens:r.map(e=>e.token).join(`, `)})}return t.slice(0,12)});groupedProviders=Q(()=>{let e=this.normalizedQuery(),t=e?this.sourceProviders().filter(t=>t.token.toLowerCase().includes(e)||t.file.toLowerCase().includes(e)):this.sourceProviders(),n=[{type:`root-provider`,label:`Root Providers (provide*)`,items:[]},{type:`injectable`,label:`Injectable Services`,items:[]},{type:`injection`,label:`inject() Calls`,items:[]},{type:`provider`,label:`Component Providers`,items:[]}];for(let e of t)n.find(t=>t.type===e.type)?.items.push(e);return n.filter(e=>e.items.length>0)});sourceMatchCount=Q(()=>this.groupedProviders().reduce((e,t)=>e+t.items.length,0));normalizedQuery=Q(()=>this.query().trim().toLowerCase());destroyRef=E(Cs);stopTree=null;constructor(){uc(()=>{let e=this.rpc();e&&(this.loadInjectorTree(e),this.loadSourceProviders(e))}),this.destroyRef.onDestroy(()=>{this.stopTree?.(),this.highlight(null)})}label(e){return kP(e)}kind(e){return OP(e)}tone(e){return DP[e]??DP.null}kindById(e){let t=this.index().map.get(e);return t?OP(t):`null`}labelById(e){let t=this.index().map.get(e);return t?kP(t):e===EP?`Null injector`:`not listed`}capital(e){return e.charAt(0).toUpperCase()+e.slice(1)}matches(e){let t=this.normalizedQuery();return!!t&&e.toLowerCase().includes(t)}setView(e){this.view()!==e&&(this.view.set(e),this.selectedId.set(null),this.focusId.set(null))}select(e){this.selectedId.set(e),this.focusId.set(e)}toggle(e,t){t?.stopPropagation(),!this.normalizedQuery()&&this.collapsed.update(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})}reveal(e){let t=this.index().map.get(e);if(!t)return;this.setView(t.injector.type===`element`?`element`:`environment`);let{parents:n}=this.index();this.collapsed.update(t=>{let r=new Set(t),i=n.get(e);for(;i;)r.delete(i),i=n.get(i);return r}),this.onlyProviding()&&t.providers.length===0&&this.onlyProviding.set(!1),t.injector.type===`element`&&!t.injector.component&&this.componentsOnly.set(!1),this.select(e),queueMicrotask(()=>this.focusRow(e,!1))}highlight(e){let t=this.rpc();if(!t)return;let n=e?.injector.type===`element`?e.injector.selector??null:null;t.scope(`ng-devtools`).rpc.call(`request-page-highlight`,n).catch(()=>{})}onTreeKey(e){let t=this.rows();if(!t.length)return;let n=this.rovingId(),r=t.findIndex(e=>e.node.injector.id===n),i=Math.max(r,0),a=t[i],o=-1;switch(e.key){case`ArrowDown`:o=Math.min(i+1,t.length-1);break;case`ArrowUp`:o=Math.max(i-1,0);break;case`Home`:o=0;break;case`End`:o=t.length-1;break;case`ArrowRight`:a.hasChildren&&!a.expanded?this.toggle(a.node.injector.id):a.hasChildren&&(o=i+1);break;case`ArrowLeft`:if(a.hasChildren&&a.expanded&&!this.normalizedQuery())this.toggle(a.node.injector.id);else{let e=this.index().parents.get(a.node.injector.id);o=t.findIndex(t=>t.node.injector.id===e)}break;case`Enter`:case` `:this.select(a.node.injector.id);break;default:return}if(e.preventDefault(),o>=0){let e=t[o].node.injector.id;this.focusId.set(e),this.selectedId.set(e),queueMicrotask(()=>this.focusRow(e,!0))}}focusRow(e,t){let n=document.querySelector(`.row[data-id="${CSS.escape(e)}"]`);n&&(t&&n.focus(),n.scrollIntoView({block:`nearest`}))}async loadInjectorTree(e){this.stopTree?.(),this.stopTree=null;let t=e.scope(`ng-devtools`),n;try{n=await t.rpc.sharedState(`injector-tree`)}catch{return}if(this.destroyRef.destroyed)return;let r=JT(),i=e=>{let t=e,n=(r?t?.pages?.[r]:void 0)??t;AP(n?.roots)&&this.roots.set(n.roots),AP(n?.environment)&&this.environment.set(n.environment),this.truncated.set(n?.truncated===!0)};i(n.value()),this.stopTree=n.on(`updated`,i)}async loadSourceProviders(e){let t=e.scope(`ng-devtools`);try{this.sourceProviders.set(await t.rpc.call(`get-providers`))}catch{this.sourceProviders.set([])}finally{this.loaded.set(!0)}}count(e){return e.reduce((e,t)=>e+1+this.count(t.children),0)}nodeMatches(e,t){let n=e.injector;return n.name.toLowerCase().includes(t)||!!n.component?.toLowerCase().includes(t)||!!n.directives?.some(e=>e.toLowerCase().includes(t))||e.providers.some(e=>e.token.toLowerCase().includes(t))||!!e.dependencies?.some(e=>e.token.toLowerCase().includes(t))}prune(e,t){let n=[];for(let r of e){let e=this.prune(r.children,t);(t(r)||e.length)&&n.push({...r,children:e})}return n}static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-di-inspector`]],inputs:{rpc:[1,`rpc`]},decls:4,vars:1,consts:[[`role`,`status`,1,`state`],[1,`state`],[1,`intro`],[1,`toolbar`],[`role`,`group`,`aria-label`,`Injector tree`,1,`segmented`],[`type`,`button`,3,`click`],[1,`pill`],[1,`search`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`search-icon`],[`cx`,`11`,`cy`,`11`,`r`,`7`],[`d`,`m20 20-3.5-3.5`],[`type`,`search`,`placeholder`,`Find a token, component or injector…`,`aria-label`,`Find a token, component or injector`,`autocomplete`,`off`,`spellcheck`,`false`,3,`input`,`keydown.escape`,`value`],[1,`checkbox`],[`type`,`checkbox`,3,`change`,`checked`],[1,`notice`],[`role`,`status`,1,`where`],[`role`,`status`,1,`where`,`muted`],[1,`layout`],[`role`,`tree`,1,`tree`,3,`keydown`,`hidden`],[`role`,`treeitem`,1,`row`,3,`selected`,`--%NS%depth`],[`aria-labelledby`,`di-detail-title`,1,`detail`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`cx`,`12`,`cy`,`12`,`r`,`9`],[`d`,`M12 11v5M12 8h.01`],[1,`where-label`],[`type`,`button`,1,`chip`],[`type`,`button`,1,`chip`,3,`click`],[`aria-hidden`,`true`,1,`dot`],[1,`mono`],[1,`chip-tokens`],[`type`,`button`,1,`link`,3,`click`],[1,`state-title`],[1,`state-hint`],[`role`,`treeitem`,1,`row`,3,`click`,`focus`,`blur`,`mouseenter`,`mouseleave`],[`aria-hidden`,`true`,1,`twisty`,3,`open`],[`aria-hidden`,`true`,1,`twisty-space`],[`aria-hidden`,`true`,1,`kind`],[1,`sr-only`],[1,`name`,`mono`],[1,`sub`],[1,`meta`],[1,`count`],[1,`count`,`provides`],[`aria-hidden`,`true`,1,`twisty`,3,`click`],[`viewBox`,`0 0 24 24`],[`d`,`m9 6 6 6-6 6`],[`d`,`M12 5v14M5 12l7 7 7-7`],[`d`,`M21 8 12 3 3 8v8l9 5 9-5z`],[1,`detail-head`],[1,`badge`],[`id`,`di-detail-title`,1,`mono`],[`aria-label`,`Classes on this element`,1,`classes`],[1,`block`],[1,`hint`],[1,`path`],[3,`current`],[1,`providers`],[1,`empty-line`],[3,`is-component`],[1,`step`,`null`],[`type`,`button`,1,`step`],[1,`hint-inline`],[`type`,`button`,1,`step`,3,`click`],[1,`step-count`],[1,`deps`],[1,`dep`,3,`hit`],[1,`dep`],[1,`dep-main`],[1,`token`,`mono`],[1,`flag`],[1,`dep-meta`],[`type`,`button`,1,`from`],[1,`from`,`absent`],[1,`from`,`missing`],[`type`,`button`,1,`from`,3,`click`],[1,`provider`,3,`hit`],[1,`provider`],[1,`flag`,`kind-flag`],[`aria-hidden`,`true`,1,`spinner`],[`type`,`search`,`placeholder`,`Filter by token or file…`,`aria-label`,`Filter by token or file`,`autocomplete`,`off`,`spellcheck`,`false`,3,`input`,`keydown.escape`,`value`],[`aria-live`,`polite`,1,`total`],[1,`source-providers`],[1,`provider-group`],[1,`section-count`],[`role`,`list`,1,`provider-list`],[1,`provider-card`],[1,`provider-header`],[1,`token`],[1,`provided-in`],[1,`provider-meta`],[1,`as`]],template:function(e,t){e&1&&P(0,gP,30,17)(1,_P,4,0,`div`,0)(2,vP,5,0,`div`,1)(3,TP,18,4),e&2&&F(t.roots().length>0?0:t.loaded()?t.sourceProviders().length===0?2:3:1)},styles:[`[_nghost-%COMP%] { + display: block; + color: var(--%NS%text); + font-size: 13px; +} + +.mono[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); +} + +.intro[_ngcontent-%COMP%] { + max-width: 720px; + margin: 0 0 12px; + color: var(--%NS%text-2); + line-height: 1.5; +} + +.toolbar[_ngcontent-%COMP%] { + position: sticky; + top: 0; + z-index: 2; + display: flex; + flex-wrap: wrap; + gap: 8px 12px; + align-items: center; + margin: 0 0 12px; + padding: 8px; + background: color-mix(in srgb, var(--%NS%surface) 85%, transparent); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); +} + +.segmented[_ngcontent-%COMP%] { + display: inline-flex; + flex: none; + padding: 3px; + gap: 2px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%bg); +} + +.segmented[_ngcontent-%COMP%] button[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + gap: 6px; + height: 26px; + padding: 0 10px; + border: 0; + border-radius: 6px; + background: none; + color: var(--%NS%text-2); + font-size: 12px; + font-weight: 600; + cursor: pointer; + transition: background-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease); +} + +.segmented[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:hover { + color: var(--%NS%text); +} + +.segmented[_ngcontent-%COMP%] button.active[_ngcontent-%COMP%] { + background: var(--%NS%surface-3); + color: var(--%NS%text-strong); +} + +.segmented[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: -2px; +} + +.pill[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + min-width: 18px; + height: 16px; + padding: 0 5px; + justify-content: center; + border-radius: 99px; + background: var(--%NS%surface-3); + color: var(--%NS%text-2); + font-size: 10px; + font-weight: 600; + letter-spacing: 0; + font-variant-numeric: tabular-nums; +} + +.segmented[_ngcontent-%COMP%] .active[_ngcontent-%COMP%] .pill[_ngcontent-%COMP%] { + background: var(--%NS%accent-soft); + color: var(--%NS%accent); +} + +.search[_ngcontent-%COMP%] { + position: relative; + flex: 1 1 220px; + min-width: 0; +} + +.search-icon[_ngcontent-%COMP%] { + position: absolute; + top: 50%; + left: 12px; + width: 14px; + height: 14px; + transform: translateY(-50%); + fill: none; + stroke: var(--%NS%text-3); + stroke-width: 2.2; + stroke-linecap: round; + pointer-events: none; +} + +.search[_ngcontent-%COMP%]:focus-within .search-icon[_ngcontent-%COMP%] { + stroke: var(--%NS%accent); +} + +input[type=search][_ngcontent-%COMP%] { + width: 100%; + height: 34px; + padding: 0 12px 0 34px; + background: var(--%NS%bg); + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + color: var(--%NS%text); + font-size: 13px; + transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); +} + +input[type=search][_ngcontent-%COMP%]::placeholder { + color: var(--%NS%text-3); +} + +input[type=search][_ngcontent-%COMP%]:focus-visible { + outline: none; + border-color: var(--%NS%accent); + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +.checkbox[_ngcontent-%COMP%] { + display: flex; + align-items: center; + gap: 8px; + height: 34px; + color: var(--%NS%text-2); + white-space: nowrap; + cursor: pointer; +} + +.checkbox[_ngcontent-%COMP%]:hover { + color: var(--%NS%text); +} + +.checkbox[_ngcontent-%COMP%] input[_ngcontent-%COMP%] { + width: 15px; + height: 15px; + margin: 0; + accent-color: var(--%NS%accent); + cursor: pointer; +} + +.checkbox[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.total[_ngcontent-%COMP%] { + flex: none; + color: var(--%NS%text-2); + font-size: 12px; + white-space: nowrap; +} + +.where[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 6px; + margin: 0 0 12px; + padding: 8px 10px; + border: 1px solid var(--%NS%accent-line); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%accent-soft); + animation: enter 0.2s var(--%NS%ease) both; +} + +.where.muted[_ngcontent-%COMP%] { + border-color: var(--%NS%border); + background: var(--%NS%surface); + color: var(--%NS%text-2); +} + +.where-label[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + margin-right: 4px; + color: var(--%NS%accent); +} + +.chip[_ngcontent-%COMP%], +.from[_ngcontent-%COMP%], +.step[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + gap: 6px; + min-width: 0; + max-width: 100%; + height: 26px; + padding: 0 10px; + border: 1px solid var(--%NS%border-strong); + border-radius: 99px; + background: var(--%NS%surface); + color: var(--%NS%text); + font-size: 12px; + cursor: pointer; + transition: border-color 150ms var(--%NS%ease), background-color 150ms var(--%NS%ease); +} + +.chip[_ngcontent-%COMP%]:hover, +.from[_ngcontent-%COMP%]:hover, +.step[_ngcontent-%COMP%]:hover { + border-color: var(--%NS%accent-line); + background: var(--%NS%surface-2); +} + +.chip[_ngcontent-%COMP%]:focus-visible, +.from[_ngcontent-%COMP%]:focus-visible, +.step[_ngcontent-%COMP%]:focus-visible, +.link[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.chip-tokens[_ngcontent-%COMP%] { + color: var(--%NS%text-2); + overflow: hidden; + min-width: 0; + text-overflow: ellipsis; + white-space: nowrap; +} + +.link[_ngcontent-%COMP%] { + padding: 0; + border: 0; + background: none; + color: var(--%NS%accent); + font-size: 13px; + cursor: pointer; + text-decoration: underline; + text-underline-offset: 2px; +} + +.dot[_ngcontent-%COMP%] { + flex: none; + width: 7px; + height: 7px; + border-radius: 50%; +} + +.layout[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: 12px; + align-items: start; +} + +@media (min-width: 880px) { + .layout[_ngcontent-%COMP%] { + grid-template-columns: minmax(0, 1fr) minmax(340px, 44%); + } + .detail[_ngcontent-%COMP%] { + position: sticky; + top: 64px; + max-height: calc(100vh - 150px); + overflow: auto; + } +} +.tree[_ngcontent-%COMP%] { + min-width: 0; + padding: 6px; + background: var(--%NS%surface); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + animation: enter 0.35s var(--%NS%ease) both; +} + +.row[_ngcontent-%COMP%] { + position: relative; + display: flex; + align-items: center; + gap: 6px; + min-height: 32px; + padding: 0 8px 0 calc(4px + var(--%NS%depth, 0) * 18px); + border-radius: var(--%NS%radius-sm); + cursor: pointer; + transition: background-color 120ms var(--%NS%ease); +} + +.row[_ngcontent-%COMP%]::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 14px; + width: calc(var(--%NS%depth, 0) * 18px); + background: repeating-linear-gradient(to right, var(--%NS%border) 0 1px, transparent 1px 18px); + pointer-events: none; +} + +.row[_ngcontent-%COMP%]:hover { + background: var(--%NS%surface-2); +} + +.row[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: -2px; +} + +.row.selected[_ngcontent-%COMP%] { + background: var(--%NS%accent-soft); + box-shadow: inset 2px 0 0 var(--%NS%accent); +} + +.twisty[_ngcontent-%COMP%], +.twisty-space[_ngcontent-%COMP%] { + flex: none; + width: 20px; + height: 20px; +} + +.twisty[_ngcontent-%COMP%] { + display: grid; + place-items: center; + padding: 0; + border: 0; + border-radius: 4px; + background: none; + color: var(--%NS%text-3); + cursor: pointer; +} + +.twisty[_ngcontent-%COMP%]:hover { + color: var(--%NS%text); + background: var(--%NS%surface-3); +} + +.twisty[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] { + width: 14px; + height: 14px; + fill: none; + stroke: currentColor; + stroke-width: 2.2; + stroke-linecap: round; + stroke-linejoin: round; + transition: transform 150ms var(--%NS%ease); +} + +.twisty.open[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] { + transform: rotate(90deg); +} + +.kind[_ngcontent-%COMP%] { + flex: none; + display: grid; + place-items: center; + width: 18px; + height: 18px; + border-radius: 5px; + background: color-mix(in srgb, var(--%NS%tone) 16%, transparent); + color: var(--%NS%tone); + font-size: 10px; + font-weight: 700; +} + +.name[_ngcontent-%COMP%] { + min-width: 0; + color: var(--%NS%text); + font-size: 12px; + overflow: hidden; + min-width: 0; + text-overflow: ellipsis; + white-space: nowrap; +} + +.row.selected[_ngcontent-%COMP%] .name[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-weight: 600; +} + +.sub[_ngcontent-%COMP%] { + flex: 0 1 auto; + min-width: 0; + color: var(--%NS%text-3); + font-size: 12px; + overflow: hidden; + min-width: 0; + text-overflow: ellipsis; + white-space: nowrap; +} + +.meta[_ngcontent-%COMP%] { + display: inline-flex; + flex: none; + gap: 4px; + margin-left: auto; + padding-left: 8px; +} + +.count[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + gap: 3px; + height: 20px; + padding: 0 7px; + border-radius: 99px; + background: var(--%NS%surface-3); + color: var(--%NS%text-2); + font-size: 11px; +} + +.count.provides[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); + color: var(--%NS%ok); +} + +.count[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] { + width: 11px; + height: 11px; + fill: none; + stroke: currentColor; + stroke-width: 2.2; + stroke-linecap: round; + stroke-linejoin: round; +} + +.detail[_ngcontent-%COMP%] { + min-width: 0; + background: var(--%NS%surface); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + animation: enter 0.35s var(--%NS%ease) both; +} + +.detail-head[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px 10px; + padding: 14px 16px; + border-bottom: 1px solid var(--%NS%border); +} + +.detail-head[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] { + flex: 1 1 auto; + min-width: 0; + margin: 0; + color: var(--%NS%text-strong); + font-size: 15px; + font-weight: 600; + overflow-wrap: anywhere; +} + +.badge[_ngcontent-%COMP%] { + padding: 2px 8px; + border-radius: 99px; + background: color-mix(in srgb, var(--%NS%tone) 14%, transparent); + color: var(--%NS%tone); + font-size: 10px; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; +} + +.classes[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 4px; + width: 100%; + margin: 0; + padding: 0; + list-style: none; +} + +.classes[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { + padding: 1px 8px; + border: 1px solid var(--%NS%border-strong); + border-radius: 6px; + color: var(--%NS%text-2); + font-family: var(--%NS%font-mono); + font-size: 11px; +} + +.classes[_ngcontent-%COMP%] li.is-component[_ngcontent-%COMP%] { + border-color: var(--%NS%accent-line); + color: var(--%NS%accent); +} + +.block[_ngcontent-%COMP%] { + padding: 14px 16px; + border-bottom: 1px solid var(--%NS%border); +} + +.block[_ngcontent-%COMP%]:last-child { + border-bottom: 0; +} + +h3[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + display: flex; + align-items: center; + gap: 6px; + margin: 0 0 8px; +} + +.hint[_ngcontent-%COMP%] { + margin: -4px 0 10px; + color: var(--%NS%text-3); + font-size: 12px; +} + +.path[_ngcontent-%COMP%] { + position: relative; + display: grid; + gap: 6px; + margin: 0; + padding: 0 0 0 18px; + list-style: none; +} + +.path[_ngcontent-%COMP%]::before { + content: ""; + position: absolute; + top: 13px; + bottom: 13px; + left: 5px; + width: 1px; + background: var(--%NS%border-strong); +} + +.path[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { + position: relative; + min-width: 0; +} + +.path[_ngcontent-%COMP%] li[_ngcontent-%COMP%]::before { + content: ""; + position: absolute; + top: 12px; + left: -16px; + width: 9px; + height: 1px; + background: var(--%NS%border-strong); +} + +.path[_ngcontent-%COMP%] li.current[_ngcontent-%COMP%] .step[_ngcontent-%COMP%] { + border-color: var(--%NS%accent); + background: var(--%NS%accent-soft); +} + +.step.null[_ngcontent-%COMP%] { + cursor: default; + color: var(--%NS%text-2); +} + +.step.null[_ngcontent-%COMP%]:hover { + border-color: var(--%NS%border-strong); + background: var(--%NS%surface); +} + +.hint-inline[_ngcontent-%COMP%] { + color: var(--%NS%text-3); +} + +.step-count[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; +} + +.deps[_ngcontent-%COMP%], +.providers[_ngcontent-%COMP%] { + display: grid; + gap: 6px; + margin: 0; + padding: 0; + list-style: none; +} + +.dep[_ngcontent-%COMP%], +.provider[_ngcontent-%COMP%] { + min-width: 0; + padding: 8px 10px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%bg); +} + +.dep.hit[_ngcontent-%COMP%], +.provider.hit[_ngcontent-%COMP%] { + border-color: var(--%NS%accent-line); + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +.dep-main[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 6px; +} + +.token[_ngcontent-%COMP%] { + min-width: 0; + color: var(--%NS%text-strong); + font-size: 12px; + font-weight: 600; + overflow-wrap: anywhere; +} + +.flag[_ngcontent-%COMP%] { + padding: 0 6px; + border: 1px solid var(--%NS%border-strong); + border-radius: 5px; + color: var(--%NS%text-2); + font-family: var(--%NS%font-mono); + font-size: 10px; + line-height: 16px; +} + +.kind-flag[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent); + background: color-mix(in srgb, var(--%NS%accent) 12%, transparent); + color: var(--%NS%accent); +} + +.dep-meta[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 6px 10px; + margin-top: 6px; + color: var(--%NS%text-3); + font-size: 12px; + overflow-wrap: anywhere; +} + +.from[_ngcontent-%COMP%] { + height: 22px; + padding: 0 8px; + color: var(--%NS%text-2); +} + +.from[_ngcontent-%COMP%] .mono[_ngcontent-%COMP%] { + color: var(--%NS%text); +} + +.from.absent[_ngcontent-%COMP%] { + cursor: default; + background: none; +} + +.from.missing[_ngcontent-%COMP%] { + cursor: default; + border-color: color-mix(in srgb, var(--%NS%warn) 40%, transparent); + background: none; + color: var(--%NS%warn); +} + +.empty-line[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-2); +} + +.state[_ngcontent-%COMP%] { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + padding: 40px 16px; + text-align: center; + background: var(--%NS%surface); + border: 1px dashed var(--%NS%border-strong); + border-radius: var(--%NS%radius); + animation: enter 0.35s var(--%NS%ease) both; +} + +.state.compact[_ngcontent-%COMP%] { + padding: 24px 12px; + border: 0; +} + +.state-title[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-strong); + font-size: 14px; + font-weight: 600; +} + +.state-hint[_ngcontent-%COMP%] { + max-width: 440px; + margin: 0; + color: var(--%NS%text-2); + line-height: 1.5; +} + +.spinner[_ngcontent-%COMP%] { + width: 20px; + height: 20px; + border: 2px solid var(--%NS%border-strong); + border-top-color: var(--%NS%accent); + border-radius: 50%; + animation: spin 0.8s linear infinite; +} + +@media (prefers-reduced-motion: reduce) { + .spinner[_ngcontent-%COMP%] { + animation: none; + } +} +button[_ngcontent-%COMP%] { + font: inherit; +} + +.state[_ngcontent-%COMP%] button[_ngcontent-%COMP%], +.provider-group[_ngcontent-%COMP%] button[_ngcontent-%COMP%] { + height: 34px; + padding: 0 14px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + color: var(--%NS%text); + cursor: pointer; +} + +.state-title[_ngcontent-%COMP%] + .state-hint[_ngcontent-%COMP%] + button[_ngcontent-%COMP%] { + margin-top: 8px; +} + +.notice[_ngcontent-%COMP%] { + display: flex; + align-items: flex-start; + gap: 8px; + margin: 0 0 16px; + padding: 12px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface); + color: var(--%NS%text-2); + font-size: 13px; + line-height: 1.5; +} + +.notice[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] { + color: var(--%NS%text); + font-weight: 600; +} + +.notice[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] { + flex: none; + width: 16px; + height: 16px; + margin-top: 2px; + fill: none; + stroke: var(--%NS%accent); + stroke-width: 2; + stroke-linecap: round; +} + +.source-providers[_ngcontent-%COMP%] { + display: flex; + flex-direction: column; + gap: 24px; + animation: enter 0.35s var(--%NS%ease) both; +} + +.provider-group[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + display: flex; + align-items: center; + gap: 8px; + margin: 0 0 8px; +} + +.section-count[_ngcontent-%COMP%] { + padding: 0 6px; + border-radius: 99px; + background: var(--%NS%surface-3); + color: var(--%NS%text-2); + font-size: 10px; + letter-spacing: 0; + line-height: 16px; + font-variant-numeric: tabular-nums; +} + +.provider-list[_ngcontent-%COMP%] { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + gap: 6px; +} + +.provider-card[_ngcontent-%COMP%] { + min-width: 0; + background: var(--%NS%surface); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + padding: 8px 12px; + transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease); +} + +.provider-card[_ngcontent-%COMP%]:hover { + background: var(--%NS%surface-2); + border-color: var(--%NS%border-strong); +} + +.provider-header[_ngcontent-%COMP%] { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 4px 8px; +} + +.provider-header[_ngcontent-%COMP%] .token[_ngcontent-%COMP%] { + font-size: 13px; + font-weight: 600; +} + +.provided-in[_ngcontent-%COMP%] { + font-size: 11px; + padding: 1px 8px; + border-radius: 99px; + border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); + color: var(--%NS%ok); + border-width: 1px; + border-style: solid; +} + +.provider-meta[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 0 8px; + margin-top: 4px; + font-family: var(--%NS%font-mono); + font-size: 11px; + color: var(--%NS%text-3); +} + +.provider-meta[_ngcontent-%COMP%] .path[_ngcontent-%COMP%] { + min-width: 0; + overflow-wrap: anywhere; +} + +.provider-meta[_ngcontent-%COMP%] .as[_ngcontent-%COMP%] { + color: var(--%NS%text-2); +}`]})},MP=`@type`;function NP(e){return!!e&&typeof e==`object`&&!Array.isArray(e)&&MP in e}function PP(e){return/^[A-Za-z_$][\w$]*$/.test(e)?e:JSON.stringify(e)}function FP(e,t=``){if(e===null)return`null`;if(typeof e==`string`)return JSON.stringify(e);if(typeof e!=`object`)return String(e);let n=t+` `;if(Array.isArray(e))return e.length?`[\n${e.map(e=>n+FP(e,n)).join(`, +`)}\n${t}]`:`[]`;if(NP(e)){let r=e;switch(r[MP]){case`undefined`:return`undefined`;case`Date`:return`Date(${r.value})`;case`bigint`:return`${r.value}n`;case`symbol`:return`Symbol(${r.value})`;case`function`:return`ƒ ${r.name}()`;case`Error`:return`${r.name??`Error`}: ${r.message}`;case`Element`:return`<${r.value}>`;case`Map`:{let e=r.entries??[];if(!e.length)return`Map(${r.size}) {}`;let i=e.map(([e,t])=>`${n}${FP(e,n)} => ${FP(t,n)}`);return`Map(${r.size}) {\n${i.join(`, +`)}\n${t}}`}case`Set`:{let e=r.values??[];return e.length?`Set(${r.size}) {\n${e.map(e=>n+FP(e,n)).join(`, +`)}\n${t}}`:`Set(${r.size}) {}`}default:return String(r.value??r[MP])}}let r=Object.entries(e);return r.length?`{\n${r.map(([e,t])=>`${n}${PP(e)}: ${FP(t,n)}`).join(`, +`)}\n${t}}`:`{}`}function IP(e,t=120){let n=FP(e).replace(/\s*\n\s*/g,` `);return n.length>t?`${n.slice(0,t-1)}…`:n}var LP=[`cancelButton`],RP=[`restoreButton`],zP=[`stateTree`],BP=[`latestButton`],VP=(e,t)=>t.id,HP=(e,t)=>t.seq,UP=(e,t)=>t.key,WP=(e,t)=>t.name,GP=(e,t)=>t.path,KP=(e,t)=>t.kind,qP=(e,t)=>t.name+t.file+t.line;function JP(e,t){if(e&1){let e=W();z(0,`span`,20),J(1,`Page`),B(),z(2,`app-select`,21),G(`valueChange`,function(t){return k(e),A(K().selectPage(t))}),B()}if(e&2){let e=K();M(2),R(`options`,e.pageOptions())(`value`,e.page()?.pageId??null)}}function YP(e,t){if(e&1&&(z(0,`span`,11),J(1),B()),e&2){let e=K();M(),Y(e.liveStores().length)}}function XP(e,t){if(e&1){let e=W();z(0,`div`,12)(1,`p`,22),J(2,`Could not load the live store state.`),B(),z(3,`p`,23),J(4,`Check that the dev server with ng-devtools is still running.`),B(),z(5,`button`,24),G(`click`,function(){return k(e),A(K().retry())}),J(6,`Retry`),B()()}}function ZP(e,t){e&1&&(z(0,`div`,13)(1,`p`,22),J(2,`No page is reporting NgRx state yet.`),B(),z(3,`p`,23),J(4,` Open the app in a browser. Stores show up here as soon as the page creates them. `),B()())}function QP(e,t){e&1&&(z(0,`p`,22),J(1,`No signal store instance on this page yet.`),B(),z(2,`p`,23),J(3,` A `),z(4,`code`),J(5,`signalStore`),B(),J(6,` is created the first time something injects it. Navigate to a page that uses the store and it appears here. `),B())}function $P(e,t){e&1&&(z(0,`p`,22),J(1,`The @ngrx/store Store was not found on this page.`),B(),z(2,`p`,23),J(3,` Check that `),z(4,`code`),J(5,`provideStore()`),B(),J(6,` or `),z(7,`code`),J(8,`StoreModule.forRoot()`),B(),J(9,` is part of the providers of the running app. `),B())}function eF(e,t){e&1&&(z(0,`p`,22),J(1,`This page has no NgRx store.`),B(),z(2,`p`,23),J(3,` Stores from `),z(4,`code`),J(5,`@ngrx/signals`),B(),J(6,` (`),z(7,`code`),J(8,`signalStore`),B(),J(9,`, `),z(10,`code`),J(11,`signalState`),B(),J(12,`) and `),z(13,`code`),J(14,`@ngrx/store`),B(),J(15,` are listed here once the app creates them. `),B())}function tF(e,t){if(e&1&&(z(0,`div`,13),P(1,QP,7,0)(2,$P,10,0)(3,eF,16,0),B()),e&2){let e=K();M(),F(e.usesSignals()?1:e.usesClassic()?2:3)}}function nF(e,t){if(e&1){let e=W();z(0,`li`)(1,`button`,28),G(`click`,function(){let t=k(e).$implicit;return A(K(2).selectStore(t.id))}),z(2,`span`,29),V(3,`span`,30),z(4,`span`,31),J(5),B()(),z(6,`span`,32),J(7),B()()()}if(e&2){let e=t.$implicit,n=K(2);M(),q(`selected`,e.id===n.store()?.id),N(`aria-pressed`,e.id===n.store()?.id),M(2),C_(`background`,n.kindColor(e.kind)),M(2),Y(e.label),M(2),X_(` `,n.kindLabel(e.kind),` · `,e.scope,` · `,n.changeCount(e.id),` `,n.changeCount(e.id)===1?`change`:`changes`,` `)}}function rF(e,t){e&1&&(z(0,`li`,26),J(1,`No stores match this filter.`),B())}function iF(e,t){if(e&1&&(z(0,`span`,36),J(1),B()),e&2){let e=t;R(`title`,e),M(),Y(e)}}function aF(e,t){if(e&1&&(z(0,`span`,35),J(1),B()),e&2){let e=K();M(),Y(e.classic.devtools?`Store DevTools on`:`read-only`)}}function oF(e,t){if(e&1&&(z(0,`code`),J(1),B(),J(2)),e&2){let e=t.$implicit,n=t.$index,r=t.$count;M(),Y(e),M(),X(``,n===r-1?``:`, `,` `)}}function sF(e,t){if(e&1&&(z(0,`p`,37),J(1,` Referenced by `),I(2,oF,3,2,null,null,wg),B()),e&2){let e=K();M(2),L(e.signal.references)}}function cF(e,t){if(e&1&&(z(0,`p`,51),J(1),B()),e&2){let e=K(4);M(),Y(e.restoreOff)}}function lF(e,t){if(e&1){let e=W();z(0,`div`,38)(1,`p`)(2,`strong`),J(3,`Viewing a past state.`),B(),J(4,` New actions are logged but do not change the state until you go back to the latest state. `),B(),z(5,`button`,50,1),G(`click`,function(){return k(e),A(K(3).backToLatest())}),J(7,` Back to latest `),B(),P(8,cF,2,1,`p`,51),B()}if(e&2){let e=K(3);M(5),R(`disabled`,e.busy()||!e.canRestore()),N(`aria-describedby`,e.canRestore()?null:`store-latest-off`),M(3),F(e.canRestore()?-1:8)}}function uF(e,t){if(e&1&&(z(0,`dt`),J(1),B(),z(2,`dd`)(3,`code`,57),J(4),B()()),e&2){let e=t.$implicit;M(),Y(e.key),M(2),R(`title`,e.full),M(),Y(e.value)}}function dF(e,t){if(e&1&&(z(0,`dl`,53),I(1,uF,5,3,null,null,UP),B()),e&2){let e=K(4);M(),L(e.computedEntries())}}function fF(e,t){e&1&&(z(0,`p`,54),J(1,`No computed signals.`),B())}function pF(e,t){e&1&&(z(0,`span`,59),J(1,`rxMethod`),B())}function mF(e,t){if(e&1&&(z(0,`li`,58),J(1),P(2,pF,2,0,`span`,59),z(3,`span`,60),J(4),B()()),e&2){let e=t.$implicit;M(),X(` `,e.name,` `),M(),F(e.rx?2:-1),M(2),Z(``,e.calls,` `,e.calls===1?`call`:`calls`)}}function hF(e,t){if(e&1&&(z(0,`ul`,56),I(1,mF,5,4,`li`,58,WP),B()),e&2){let e=K();M(),L(e.methods)}}function gF(e,t){e&1&&(z(0,`p`,54),J(1,`No methods.`),B())}function _F(e,t){if(e&1&&(z(0,`section`,43)(1,`h4`,52),J(2,`Computed`),B(),P(3,dF,3,0,`dl`,53)(4,fF,2,0,`p`,54),z(5,`h4`,55),J(6,`Methods`),B(),P(7,hF,3,0,`ul`,56)(8,gF,2,0,`p`,54),B()),e&2){let e=K(3);M(3),F(e.computedEntries().length?3:4),M(4),F(t.methods.length?7:8)}}function vF(e,t){if(e&1&&(z(0,`span`,59),J(1),B()),e&2){let e=K().$implicit;M(),Y(e.origin)}}function yF(e,t){if(e&1){let e=W();z(0,`li`)(1,`button`,61),G(`click`,function(){let t=k(e).$implicit;return A(K(3).selectEntry(t.seq))}),z(2,`span`,62),J(3),B(),z(4,`span`,63),J(5),B(),z(6,`span`,64),P(7,vF,2,1,`span`,59),J(8),B()()()}if(e&2){let e=t.$implicit,n=K(3);M(),q(`selected`,e.seq===n.selectedSeq()),N(`aria-pressed`,e.seq===n.selectedSeq()),M(2),X(`#`,e.seq),M(),R(`title`,e.type),M(),Y(e.type),M(2),F(e.origin?7:-1),M(),Z(` `,e.diff.length===0?`no change`:e.diff.length+(e.diff.length===1?` change`:` changes`),` · `,n.formatTime(e.timestamp))}}function bF(e,t){e&1&&J(0,` No entries match this filter. `)}function xF(e,t){e&1&&J(0,` No actions dispatched since the page connected. `)}function SF(e,t){e&1&&J(0,` No state changes yet. Method calls and patchState writes that change the state are recorded here. `)}function CF(e,t){if(e&1&&(z(0,`li`,26),P(1,bF,1,0)(2,xF,1,0)(3,SF,1,0),B()),e&2){let e=K(),t=K(2);M(),F(t.filter()?1:e.classic?2:3)}}function wF(e,t){if(e&1&&(z(0,`dt`),J(1,`Origin`),B(),z(2,`dd`),J(3),B()),e&2){let e=K(),t=K(3);M(3),Y(t.originText(e.origin))}}function TF(e,t){if(e&1&&(z(0,`dt`),J(1,`Action`),B(),z(2,`dd`)(3,`pre`,69),J(4),B()()),e&2){let e=K(),t=K(3);M(4),Y(t.prettyText(e.action))}}function EF(e,t){if(e&1&&(z(0,`dt`),J(1,`Arguments`),B(),z(2,`dd`)(3,`pre`,69),J(4),B()()),e&2){let e=K(),t=K(3);M(4),Y(t.prettyText(e.args))}}function DF(e,t){if(e&1&&(z(0,`code`,74),J(1),B()),e&2){let e=K().$implicit,t=K(5);M(),Y(t.shortText(e.before))}}function OF(e,t){e&1&&(z(0,`span`,76),J(1,`→`),B(),z(2,`span`,77),J(3,`became`),B())}function kF(e,t){if(e&1&&(z(0,`code`,75),J(1),B()),e&2){let e=K().$implicit,t=K(5);M(),Y(t.shortText(e.after))}}function AF(e,t){if(e&1&&(z(0,`li`)(1,`span`,71),J(2),B(),z(3,`code`,72),J(4),B(),z(5,`span`,73),P(6,DF,2,1,`code`,74),P(7,OF,4,0),P(8,kF,2,1,`code`,75),B()()),e&2){let e=t.$implicit,n=K(5);w_(`diff-row `+e.op),M(2),Y(n.opLabel(e.op)),M(2),Y(e.path),M(2),F(e.op===`add`?-1:6),M(),F(e.op===`change`?7:-1),M(),F(e.op===`remove`?-1:8)}}function jF(e,t){if(e&1&&(z(0,`ul`,67),I(1,AF,9,7,`li`,70,GP),B()),e&2){let e=K();M(),L(e.diff)}}function MF(e,t){e&1&&(z(0,`p`,54),J(1,`The state did not change.`),B())}function NF(e,t){e&1&&J(0),e&2&&X(` Store DevTools jumps the app state to the state right after action #`,K(3).seq,`. Until you go back to the latest state, new actions are logged but do not change the state. `)}function PF(e,t){if(e&1&&J(0),e&2){let e=K(3);Z(` This sets every state key of `,K().label,` back to its value right after change #`,e.seq,`. Components that read the store update at once, and a new "Restore" entry is added to the log. `)}}function FF(e,t){if(e&1){let e=W();z(0,`div`,79),G(`keydown.escape`,function(t){return k(e),A(K(5).cancelRestore(t))}),z(1,`p`,80),P(2,NF,1,1)(3,PF,1,2),B(),z(4,`div`,81)(5,`button`,50),G(`click`,function(){k(e);let t=K(2);return A(K(3).restore(t.seq,t.source===`store`))}),J(6,` Restore `),B(),z(7,`button`,24,2),G(`click`,function(){return k(e),A(K(5).cancelRestore())}),J(9,` Cancel `),B()()()}if(e&2){let e=K(2),t=K(3);M(2),F(e.source===`store`?2:3),M(3),R(`disabled`,t.busy())}}function IF(e,t){if(e&1&&(z(0,`p`,83),J(1),B()),e&2){let e=K(6);M(),Y(e.restoreOff)}}function LF(e,t){if(e&1){let e=W();z(0,`button`,82,3),G(`click`,function(){k(e);let t=K(2);return A(K(3).askRestore(t.seq))}),J(2,` Restore this state `),B(),P(3,IF,2,1,`p`,83)}if(e&2){let e=K(5);R(`disabled`,!e.canRestore()),N(`aria-describedby`,e.canRestore()?null:`store-writes-off`),M(3),F(e.canRestore()?-1:3)}}function RF(e,t){if(e&1&&P(0,FF,10,2,`div`,78)(1,LF,4,3),e&2){let e=K();F(K(3).confirmSeq()===e.seq?0:1)}}function zF(e,t){e&1&&(z(0,`p`,68),J(1,` Time travel for @ngrx/store needs `),z(2,`code`),J(3,`provideStoreDevtools()`),B(),J(4,`. Without it this log is read-only. `),B())}function BF(e,t){if(e&1&&(z(0,`section`,49)(1,`h5`,65),J(2),B(),z(3,`dl`,53)(4,`dt`),J(5,`Time`),B(),z(6,`dd`),J(7),B(),P(8,wF,4,1),P(9,TF,5,1),P(10,EF,5,1),B(),z(11,`h6`,66),J(12,`State diff`),B(),P(13,jF,3,0,`ul`,67)(14,MF,2,0,`p`,54),P(15,RF,2,1)(16,zF,5,0,`p`,68),B()),e&2){let e=t,n=K(3);M(2),Z(`#`,e.seq,` `,e.type),M(5),Y(n.formatTime(e.timestamp)),M(),F(e.origin?8:-1),M(),F(e.action===void 0?-1:9),M(),F(e.args?.length?10:-1),M(3),F(e.diff.length?13:14),M(2),F(e.restorable?15:e.source===`store`?16:-1)}}function VF(e,t){if(e&1&&(z(0,`div`,27)(1,`div`,33)(2,`h3`),J(3),B(),z(4,`div`,34)(5,`span`,35),J(6),B(),z(7,`span`,35),J(8),B(),P(9,iF,2,2,`span`,36),P(10,aF,2,1,`span`,35),B(),P(11,sF,4,0,`p`,37),B(),P(12,lF,9,3,`div`,38),z(13,`div`,39)(14,`section`,40)(15,`h4`,41),J(16,`State`),B(),z(17,`pre`,42,0),J(19),B()(),P(20,_F,9,2,`section`,43),B(),z(21,`section`,44)(22,`h4`,45),J(23),z(24,`span`,11),J(25),B()(),V(26,`app-limit-note`,46),z(27,`div`,47)(28,`ul`,48),I(29,yF,9,9,`li`,null,HP,!1,CF,4,1,`li`,26),B(),P(32,BF,17,8,`section`,49),B()()()),e&2){let e,n,r,i=t,a=K(2);M(3),Y(i.label),M(3),Y(a.kindLabel(i.kind)),M(2),X(`scope: `,i.scope),M(),F((e=i.signal?.declaredIn)?9:-1,e),M(),F(i.classic?10:-1),M(),F(i.signal?.references?.length?11:-1),M(),F(i.classic?.paused?12:-1),M(7),Y(a.stateText()),M(),F((n=i.signal)?20:-1,n),M(3),X(` `,i.classic?`Action log`:`Change log`,` `),M(2),Y(a.storeLog().length),M(),R(`dropped`,a.page()?.dropped??0)(`max`,a.maxLog()),M(2),N(`aria-label`,i.classic?`Actions`:`Changes`),M(),L(a.storeLog()),M(3),F((r=a.entry())?32:-1,r)}}function HF(e,t){if(e&1&&(z(0,`div`,14)(1,`ul`,25),I(2,nF,8,10,`li`,null,VP,!1,rF,2,0,`li`,26),B(),P(5,VF,33,16,`div`,27),B()),e&2){let e,t=K();M(2),L(t.filteredStores()),M(3),F((e=t.store())?5:-1,e)}}function UF(e,t){if(e&1&&(z(0,`span`,11),J(1),B()),e&2){let e=K();M(),Y(e.sourceEntries().length)}}function WF(e,t){e&1&&(z(0,`div`,18),V(1,`span`,84),z(2,`p`,22),J(3,`Scanning source for NgRx declarations…`),B()())}function GF(e,t){e&1&&(z(0,`div`,19)(1,`p`,22),J(2,`No NgRx declarations found in source.`),B(),z(3,`p`,23),J(4,` The scan looks for `),z(5,`code`),J(6,`signalStore`),B(),J(7,`, `),z(8,`code`),J(9,`signalState`),B(),J(10,`, `),z(11,`code`),J(12,`signalMethod`),B(),J(13,`, `),z(14,`code`),J(15,`createAction`),B(),J(16,`, `),z(17,`code`),J(18,`createReducer`),B(),J(19,`, `),z(20,`code`),J(21,`createEffect`),B(),J(22,`, `),z(23,`code`),J(24,`createSelector`),B(),J(25,` and `),z(26,`code`),J(27,`createFeature`),B(),J(28,`. `),B()())}function KF(e,t){if(e&1){let e=W();z(0,`button`,86),G(`click`,function(){let t=k(e).$implicit,n=K(2);return A(n.kind.set(n.kind()===t.kind?null:t.kind))}),V(1,`span`,30),z(2,`span`,91),J(3),B(),z(4,`span`,87),J(5),B()()}if(e&2){let e=t.$implicit,n=K(2);q(`active`,n.kind()===e.kind),N(`aria-pressed`,n.kind()===e.kind),M(),C_(`background`,n.kindColor(e.kind)),M(2),Y(n.kindLabel(e.kind)),M(2),Y(e.count)}}function qF(e,t){if(e&1&&(z(0,`p`,96),J(1),B()),e&2){let e=K().$implicit;M(),Y(e.detail)}}function JF(e,t){if(e&1&&(z(0,`li`,90)(1,`div`,92),V(2,`span`,30),z(3,`span`,93),J(4),B(),z(5,`span`,35),J(6),B()(),z(7,`div`,94)(8,`span`,95),J(9),B()(),P(10,qF,2,1,`p`,96),B()),e&2){let e=t.$implicit,n=K(2);M(2),C_(`background`,n.kindColor(e.kind)),M(2),Y(e.name),M(2),Y(n.kindLabel(e.kind)),M(2),R(`title`,e.file+`:`+e.line),M(),Z(``,e.file,`:`,e.line),M(),F(e.detail?10:-1)}}function YF(e,t){if(e&1){let e=W();z(0,`li`,18)(1,`p`,22),J(2,`No declarations match.`),B(),z(3,`button`,24),G(`click`,function(){return k(e),A(K(2).clearFilters())}),J(4,`Clear filters`),B()()}}function XF(e,t){if(e&1){let e=W();z(0,`div`,85)(1,`button`,86),G(`click`,function(){return k(e),A(K().kind.set(null))}),J(2,` All `),z(3,`span`,87),J(4),B()(),I(5,KF,6,7,`button`,88,KP),B(),z(7,`ul`,89),I(8,JF,11,8,`li`,90,qP,!1,YF,5,0,`li`,18),B()}if(e&2){let e=K();M(),q(`active`,!e.kind()),N(`aria-pressed`,!e.kind()),M(3),Y(e.sourceEntries().length),M(),L(e.groupedEntries()),M(3),L(e.filteredEntries())}}var ZF={action:`#f59e0b`,reducer:`#a78bfa`,effect:`#fb923c`,selector:`#60a5fa`,feature:`#34d399`,"store-setup":`#94a3b8`,"signal-store":`#e879f9`,"signal-state":`#22d3ee`,"signal-method":`#fb7185`,store:`#a78bfa`},QF={"signal-store":`signalStore`,"signal-state":`signalState`,"signal-method":`signalMethod`,"store-setup":`store setup`,store:`@ngrx/store`},$F={dispatch:`store.dispatch(action)`,effect:`NgRx effect (Store.next)`,reactive:`store.dispatch(() => action)`},eI=new Set([`action`,`reducer`,`effect`,`selector`,`feature`,`store-setup`]),tI=class e{rpc=$(null);canRestore=Q(()=>nE(this.rpc(),`ngrx`));restoreOff=HT(`ngrx`);filter=j(``);kind=j(null);sourceEntries=j([]);sourceLoaded=j(!1);pages=j([]);failed=j(!1);selectedPageId=j(null);hostPageId=JT();maxLog=Q(()=>tE(this.rpc()).limits.changeLog);selectedStoreId=j(null);selectedSeq=j(null);confirmSeq=j(null);busy=j(!1);focusLatest=j(!1);focusConfirm=j(null);cancelButton=Lv(`cancelButton`);restoreButton=Lv(`restoreButton`);stateTree=Lv(`stateTree`);latestButton=Lv(`latestButton`);message=j(``);destroyRef=E(Cs);unsubscribe=null;page=Q(()=>{let e=this.pages();return e.find(e=>e.pageId===this.selectedPageId())??e.find(e=>e.pageId===this.hostPageId)??e[0]??null});pageOptions=Q(()=>this.pages().map(e=>({value:e.pageId,label:e.title||e.url,hint:e.url})));liveStores=Q(()=>{let e=this.page();if(!e)return[];let t=e.stores.map(e=>({id:e.id,label:e.name??e.references[0]??e.className,kind:e.kind,scope:e.scope,signal:e}));return e.classic&&t.push({id:`store`,label:`Store`,kind:`store`,scope:e.classic.scope,classic:e.classic}),t});filteredStores=Q(()=>{let e=this.filter().trim().toLowerCase();return e?this.liveStores().filter(t=>t.label.toLowerCase().includes(e)||t.kind.includes(e)||(t.signal?.stateKeys??[]).some(t=>t.toLowerCase().includes(e))||(this.page()?.log??[]).some(n=>n.storeId===t.id&&n.type.toLowerCase().includes(e))):this.liveStores()});store=Q(()=>{let e=this.liveStores();return e.find(e=>e.id===this.selectedStoreId())??e[0]??null});stateText=Q(()=>{let e=this.store();return e?FP(e.signal?e.signal.state:e.classic?.state):``});computedEntries=Q(()=>Object.entries(this.store()?.signal?.computed??{}).map(([e,t])=>({key:e,value:IP(t,160),full:FP(t)})));storeLog=Q(()=>{let e=this.store()?.id,t=this.filter().trim().toLowerCase();return(this.page()?.log??[]).filter(n=>n.storeId===e&&(!t||n.type.toLowerCase().includes(t)||this.storeMatches(t))).reverse()});entry=Q(()=>this.storeLog().find(e=>e.seq===this.selectedSeq())??null);usesSignals=Q(()=>this.sourceEntries().some(e=>e.kind===`signal-store`||e.kind===`signal-state`));usesClassic=Q(()=>this.sourceEntries().some(e=>eI.has(e.kind)));filteredEntries=Q(()=>{let e=this.filter().trim().toLowerCase(),t=this.kind();return this.sourceEntries().filter(n=>(!t||n.kind===t)&&(!e||n.name.toLowerCase().includes(e)||n.kind.includes(e)||(n.detail??``).toLowerCase().includes(e)))});groupedEntries=Q(()=>{let e=new Map;for(let t of this.sourceEntries())e.set(t.kind,(e.get(t.kind)??0)+1);return[...e.entries()].map(([e,t])=>({kind:e,count:t}))});constructor(){uc(()=>{let e=this.rpc();e&&this.load(e)}),$v(()=>{let e=this.latestButton();e&&this.focusLatest()&&!this.busy()&&(this.focusLatest.set(!1),e.nativeElement.focus())}),uc(()=>{let e=this.focusConfirm(),t=e===`cancel`?this.cancelButton():this.restoreButton();e&&t&&(this.focusConfirm.set(null),t.nativeElement.focus())}),this.destroyRef.onDestroy(()=>this.unsubscribe?.())}storeMatches(e){let t=this.store();return!!t&&t.label.toLowerCase().includes(e)}async load(e){this.failed.set(!1),QT(e,`get-ngrx-store`).then(e=>this.sourceEntries.set(Array.isArray(e)?e:[])).catch(()=>this.sourceEntries.set([])).finally(()=>this.sourceLoaded.set(!0));try{let t=await e.scope(`ng-devtools`).rpc.sharedState(`ngrx-store`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e;this.pages.set(Array.isArray(t?.pages)?t.pages:[])};n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.failed.set(!0)}}retry(){let e=this.rpc();e&&this.load(e)}selectPage(e){this.selectedPageId.set(e),this.selectedStoreId.set(null),this.selectedSeq.set(null),this.confirmSeq.set(null),this.message.set(``)}selectStore(e){this.selectedStoreId.set(e),this.selectedSeq.set(null),this.confirmSeq.set(null),this.message.set(``)}selectEntry(e){this.selectedSeq.set(this.selectedSeq()===e?null:e),this.confirmSeq.set(null),this.message.set(``)}askRestore(e){this.confirmSeq.set(e),this.focusConfirm.set(`cancel`)}cancelRestore(e){e?.preventDefault(),this.confirmSeq.set(null),this.focusConfirm.set(`restore`)}async restore(e,t){let n=this.page();if(!n)return;this.busy.set(!0),this.focusLatest.set(!1);let r=!1;try{let i=await QT(this.rpc(),`request-ngrx-action`,{pageId:n.pageId,request:{type:`restore`,seq:e}});this.message.set(i?.error??i?.message??`Restored.`),r=t&&!i?.error&&!!i?.paused}catch{this.message.set(`Could not reach the page to restore the state.`)}finally{this.busy.set(!1),this.confirmSeq.set(null),this.focusLatest.set(r),r||this.stateTree()?.nativeElement.focus()}}async backToLatest(){let e=this.page();if(e){this.busy.set(!0);try{let t=await QT(this.rpc(),`request-ngrx-action`,{pageId:e.pageId,request:{type:`latest`}});this.focusLatest.set(!1),this.stateTree()?.nativeElement.focus(),this.message.set(t?.error??t?.message??`Back on the latest state.`)}catch{this.message.set(`Could not reach the page to go back to the latest state.`)}finally{this.busy.set(!1)}}}clearFilters(){this.filter.set(``),this.kind.set(null)}changeCount(e){return(this.page()?.log??[]).filter(t=>t.storeId===e).length}kindColor(e){return ZF[e]??`var(--text-3)`}kindLabel(e){return QF[e]??e}originText(e){return $F[e]??e}opLabel(e){return e===`add`?`added`:e===`remove`?`removed`:`changed`}prettyText(e){return FP(e)}shortText(e){return IP(e)}formatTime=rD;static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-store-inspector`]],viewQuery:function(e,t){e&1&&e_(t.cancelButton,LP,5)(t.restoreButton,RP,5)(t.stateTree,zP,5)(t.latestButton,BP,5),e&2&&t_(4)},inputs:{rpc:[1,`rpc`]},decls:25,vars:10,consts:[[`stateTree`,``],[`latestButton`,``],[`cancelButton`,``],[`restoreButton`,``],[1,`toolbar`],[`type`,`search`,`placeholder`,`Filter stores, changes and declarations…`,`aria-label`,`Filter stores, changes and source declarations`,3,`input`,`value`],[1,`status`],[`aria-hidden`,`true`,1,`live-dot`],[`aria-labelledby`,`ngrx-live-heading`,1,`block`],[1,`section-head`],[`id`,`ngrx-live-heading`],[1,`pill`],[`role`,`alert`,1,`empty`],[1,`empty`],[1,`live-layout`],[`role`,`status`,1,`message`],[`aria-labelledby`,`ngrx-source-heading`,1,`block`],[`id`,`ngrx-source-heading`],[`role`,`status`,1,`empty`,`compact`],[1,`empty`,`compact`],[`id`,`ngrx-page-label`,1,`visually-hidden`],[`labelledBy`,`ngrx-page-label`,1,`page-select`,3,`valueChange`,`options`,`value`],[1,`empty-title`],[1,`hint`],[`type`,`button`,1,`btn`,3,`click`],[`aria-label`,`Stores on this page`,1,`store-list`],[1,`muted`,`pad`],[1,`store-detail`],[`type`,`button`,1,`store-item`,3,`click`],[1,`store-top`],[`aria-hidden`,`true`,1,`dot`],[1,`store-name`],[1,`store-meta`],[1,`detail-head`],[1,`chips`],[1,`chip`],[1,`chip`,`mono`,3,`title`],[1,`refs`],[1,`paused`],[1,`facts`],[`aria-labelledby`,`ngrx-state-heading`,1,`fact`],[`id`,`ngrx-state-heading`],[`tabindex`,`0`,`aria-labelledby`,`ngrx-state-heading`,1,`tree`],[`aria-labelledby`,`ngrx-computed-heading`,1,`fact`],[`aria-labelledby`,`ngrx-log-heading`,1,`log`],[`id`,`ngrx-log-heading`],[`what`,`changes on this page`,`limit`,`changeLog`,3,`dropped`,`max`],[1,`log-layout`],[1,`log-list`],[`aria-labelledby`,`ngrx-entry-heading`,1,`entry`],[`type`,`button`,1,`btn`,`primary`,3,`click`,`disabled`],[`id`,`store-latest-off`,1,`hint`,`small`],[`id`,`ngrx-computed-heading`],[1,`kv`],[1,`muted`],[`id`,`ngrx-methods-heading`,1,`spaced`],[`aria-labelledby`,`ngrx-methods-heading`,1,`methods`],[3,`title`],[1,`chip`,`mono`],[1,`tag`],[1,`calls`],[`type`,`button`,1,`log-item`,3,`click`],[1,`seq`],[1,`log-type`,3,`title`],[1,`log-meta`],[`id`,`ngrx-entry-heading`],[1,`sub`],[1,`diff`],[1,`hint`,`small`],[1,`code`],[3,`class`],[1,`op`],[1,`path`],[1,`values`],[1,`before`],[1,`after`],[`aria-hidden`,`true`,1,`arrow`],[1,`visually-hidden`],[`role`,`group`,`aria-labelledby`,`ngrx-confirm-text`,1,`confirm`],[`role`,`group`,`aria-labelledby`,`ngrx-confirm-text`,1,`confirm`,3,`keydown.escape`],[`id`,`ngrx-confirm-text`],[1,`actions`],[`type`,`button`,1,`btn`,`restore`,3,`click`,`disabled`],[`id`,`store-writes-off`,1,`hint`,`small`],[`aria-hidden`,`true`,1,`spinner`],[`role`,`group`,`aria-label`,`Filter declarations by kind`,1,`kinds`],[`type`,`button`,1,`kind-chip`,3,`click`],[1,`count`],[`type`,`button`,1,`kind-chip`,3,`active`],[1,`nodes`],[1,`node-card`],[1,`chip-text`],[1,`node-header`],[1,`node-label`],[1,`node-meta`],[1,`file`,3,`title`],[1,`detail`]],template:function(e,t){e&1&&(z(0,`div`,4)(1,`input`,5),G(`input`,function(e){return t.filter.set(e.target.value)}),B(),P(2,JP,3,2),z(3,`span`,6),V(4,`span`,7),J(5),B()(),z(6,`section`,8)(7,`div`,9)(8,`h2`,10),J(9,`Live stores`),B(),P(10,YP,2,1,`span`,11),B(),P(11,XP,7,0,`div`,12)(12,ZP,5,0,`div`,13)(13,tF,4,1,`div`,13)(14,HF,6,2,`div`,14),z(15,`p`,15),J(16),B()(),z(17,`section`,16)(18,`div`,9)(19,`h2`,17),J(20,`Source declarations`),B(),P(21,UF,2,1,`span`,11),B(),P(22,WF,4,0,`div`,18)(23,GF,29,0,`div`,19)(24,XF,11,5),B()),e&2&&(M(),R(`value`,t.filter()),M(),F(t.pages().length>1?2:-1),M(),q(`on`,!!t.page()),M(2),X(` `,t.page()?`Live`:`No page connected`,` `),M(5),F(t.liveStores().length?10:-1),M(),F(t.failed()?11:t.page()?t.liveStores().length?14:13:12),M(5),Y(t.message()),M(5),F(t.sourceEntries().length?21:-1),M(),F(t.sourceLoaded()?t.sourceEntries().length===0?23:24:22))},dependencies:[oD,XE],styles:[`[_nghost-%COMP%] { + display: grid; + gap: 24px; + min-width: 0; + color: var(--%NS%text); + font-size: 13px; +} + +.toolbar[_ngcontent-%COMP%] { + position: sticky; + top: 0; + z-index: 2; + display: flex; + flex-wrap: wrap; + gap: 8px 12px; + align-items: center; + padding: 10px 12px; + background: color-mix(in srgb, var(--%NS%surface) 85%, transparent); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); +} + +input[_ngcontent-%COMP%] { + flex: 1 1 220px; + min-width: 0; + height: 34px; + padding: 0 12px; + background: var(--%NS%bg); + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + outline: none; + transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease); +} + +input[_ngcontent-%COMP%]::placeholder { + color: var(--%NS%text-3); +} + +input[_ngcontent-%COMP%]:focus-visible { + outline: none; + border-color: var(--%NS%accent); + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +.page-select[_ngcontent-%COMP%] { + flex: 0 1 220px; + min-width: 0; +} + +.status[_ngcontent-%COMP%] { + display: inline-flex; + flex: none; + align-items: center; + gap: 6px; + color: var(--%NS%text-2); + font-size: 12px; + font-weight: 500; +} + +.live-dot[_ngcontent-%COMP%] { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--%NS%text-3); +} + +.status.on[_ngcontent-%COMP%] .live-dot[_ngcontent-%COMP%] { + background: var(--%NS%ok); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%ok) 20%, transparent); + animation: _ngcontent-%COMP%_pulse 2s infinite; +} + +@keyframes _ngcontent-%COMP%_pulse { + 50% { + opacity: 0.4; + } +} +.block[_ngcontent-%COMP%] { + display: grid; + gap: 12px; + min-width: 0; +} + +.section-head[_ngcontent-%COMP%] { + display: flex; + align-items: center; + gap: 8px; + min-height: 24px; +} + +h2[_ngcontent-%COMP%], +h4[_ngcontent-%COMP%], +.sub[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + display: flex; + align-items: center; + gap: 8px; + margin: 0; +} + +h4[_ngcontent-%COMP%] { + margin-bottom: 10px; +} + +.spaced[_ngcontent-%COMP%] { + margin-top: 16px; +} + +.sub[_ngcontent-%COMP%] { + margin: 14px 0 8px; +} + +.pill[_ngcontent-%COMP%] { + min-width: 20px; + padding: 0 7px; + border-radius: 99px; + background: var(--%NS%surface-2); + border: 1px solid var(--%NS%border); + color: var(--%NS%text-2); + font-size: 11px; + font-weight: 500; + letter-spacing: 0; + line-height: 18px; + text-align: center; + font-variant-numeric: tabular-nums; +} + +.empty[_ngcontent-%COMP%] { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + text-align: center; + padding: 36px 24px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + animation: enter 0.35s var(--%NS%ease) both; +} + +.empty.compact[_ngcontent-%COMP%] { + padding: 24px 16px; + border-style: dashed; + background: transparent; +} + +.empty-title[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-strong); + font-size: 14px; + font-weight: 600; +} + +.hint[_ngcontent-%COMP%] { + max-width: 520px; + margin: 0; + color: var(--%NS%text-2); + line-height: 1.55; + overflow-wrap: anywhere; +} + +.hint.small[_ngcontent-%COMP%] { + margin-top: 12px; + font-size: 12px; +} + +code[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); + font-size: 12px; +} + +.hint[_ngcontent-%COMP%] code[_ngcontent-%COMP%], +.refs[_ngcontent-%COMP%] code[_ngcontent-%COMP%] { + padding: 1px 5px; + color: var(--%NS%text); + background: var(--%NS%surface-3); + border: 1px solid var(--%NS%border); + border-radius: 5px; +} + +.muted[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-2); +} + +.pad[_ngcontent-%COMP%] { + padding: 20px 12px; + text-align: center; + line-height: 1.5; +} + +.btn[_ngcontent-%COMP%] { + height: 32px; + padding: 0 14px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + font-weight: 500; + cursor: pointer; + transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease); +} + +.btn[_ngcontent-%COMP%]:hover { + background: var(--%NS%surface-3); +} + +.btn[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.btn[_ngcontent-%COMP%]:disabled { + opacity: 0.6; + cursor: default; +} + +.btn.primary[_ngcontent-%COMP%], +.btn.restore[_ngcontent-%COMP%] { + border-color: var(--%NS%accent-line); + background: var(--%NS%accent-soft); + color: var(--%NS%text-strong); +} + +.btn.restore[_ngcontent-%COMP%] { + margin-top: 14px; +} + +.live-layout[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); + min-width: 0; + background: var(--%NS%surface); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + box-shadow: var(--%NS%shadow); + overflow: hidden; + animation: enter 0.35s var(--%NS%ease) both; +} + +ul[_ngcontent-%COMP%] { + list-style: none; + margin: 0; + padding: 0; +} + +.store-list[_ngcontent-%COMP%] { + display: flex; + flex-direction: column; + gap: 2px; + padding: 8px; + border-right: 1px solid var(--%NS%border); + background: var(--%NS%surface-2); +} + +.store-item[_ngcontent-%COMP%], +.log-item[_ngcontent-%COMP%] { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 3px; + width: 100%; + padding: 8px 10px; + border: none; + border-radius: var(--%NS%radius-sm); + background: transparent; + color: inherit; + font: inherit; + text-align: left; + cursor: pointer; + transition: background-color 0.15s var(--%NS%ease); +} + +.store-item[_ngcontent-%COMP%]:hover, +.log-item[_ngcontent-%COMP%]:hover { + background: var(--%NS%surface-3); +} + +.store-item[_ngcontent-%COMP%]:focus-visible, +.log-item[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: -2px; +} + +.store-item.selected[_ngcontent-%COMP%], +.log-item.selected[_ngcontent-%COMP%] { + background: var(--%NS%accent-soft); + box-shadow: inset 2px 0 0 var(--%NS%accent); +} + +.store-top[_ngcontent-%COMP%] { + display: flex; + align-items: center; + gap: 8px; + min-width: 0; + max-width: 100%; +} + +.store-name[_ngcontent-%COMP%] { + overflow: hidden; + min-width: 0; + text-overflow: ellipsis; + white-space: nowrap; + font-family: var(--%NS%font-mono); + font-weight: 600; + color: var(--%NS%text-strong); +} + +.store-meta[_ngcontent-%COMP%], +.log-meta[_ngcontent-%COMP%] { + color: var(--%NS%text-2); + font-size: 11.5px; + font-variant-numeric: tabular-nums; +} + +.dot[_ngcontent-%COMP%] { + flex: none; + width: 8px; + height: 8px; + border-radius: 50%; +} + +.store-detail[_ngcontent-%COMP%] { + display: grid; + gap: 16px; + min-width: 0; + padding: 16px; +} + +.detail-head[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] { + margin: 0 0 8px; + color: var(--%NS%accent); + font-family: var(--%NS%font-mono); + font-size: 15px; + font-weight: 600; + overflow-wrap: anywhere; +} + +.chips[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.chip[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + gap: 6px; + max-width: 100%; + padding: 1px 8px; + border: 1px solid var(--%NS%border); + border-radius: 99px; + background: var(--%NS%surface-2); + color: var(--%NS%text-2); + font-size: 11.5px; + line-height: 18px; + overflow-wrap: anywhere; +} + +.chip.mono[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); +} + +.refs[_ngcontent-%COMP%] { + margin: 10px 0 0; + color: var(--%NS%text-2); + line-height: 1.8; +} + +.facts[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 16px; + min-width: 0; +} + +.fact[_ngcontent-%COMP%] { + min-width: 0; +} + +pre[_ngcontent-%COMP%] { + margin: 0; + font-family: var(--%NS%font-mono); + font-size: 12px; + line-height: 1.55; + white-space: pre-wrap; + overflow-wrap: anywhere; + color: var(--%NS%text); +} + +.tree[_ngcontent-%COMP%], +.code[_ngcontent-%COMP%] { + max-height: 360px; + overflow: auto; + padding: 10px 12px; + background: var(--%NS%surface-2); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); +} + +.code[_ngcontent-%COMP%] { + max-height: 220px; +} + +.tree[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.kv[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + gap: 6px 14px; + margin: 0; +} + +.kv[_ngcontent-%COMP%] dt[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); + font-size: 12px; + color: var(--%NS%text-2); +} + +.kv[_ngcontent-%COMP%] dd[_ngcontent-%COMP%] { + min-width: 0; + margin: 0; + overflow-wrap: anywhere; +} + +.methods[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.tag[_ngcontent-%COMP%] { + padding: 0 5px; + border-radius: 4px; + background: var(--%NS%accent-soft); + color: var(--%NS%text-strong); + font-size: 10.5px; +} + +.calls[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-family: var(--%NS%font-sans, inherit); + font-size: 11px; +} + +.log[_ngcontent-%COMP%] { + min-width: 0; + padding-top: 16px; + border-top: 1px solid var(--%NS%border); +} + +.log-layout[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); + gap: 16px; + min-width: 0; +} + +.log-list[_ngcontent-%COMP%] { + display: flex; + flex-direction: column; + gap: 2px; + max-height: 420px; + overflow: auto; + padding: 2px; +} + +.log-item[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + column-gap: 8px; + row-gap: 2px; +} + +.seq[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11.5px; + font-variant-numeric: tabular-nums; +} + +.log-type[_ngcontent-%COMP%] { + overflow: hidden; + min-width: 0; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 100%; + font-family: var(--%NS%font-mono); + font-size: 12.5px; + color: var(--%NS%text); +} + +.log-meta[_ngcontent-%COMP%] { + grid-column: 2; +} + +.entry[_ngcontent-%COMP%] { + min-width: 0; + padding: 14px; + border: 1px solid var(--%NS%accent-line); + border-radius: var(--%NS%radius-sm); + animation: enter 0.25s var(--%NS%ease) both; +} + +.entry[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] { + margin: 0 0 12px; + font-family: var(--%NS%font-mono); + font-size: 13px; + font-weight: 600; + color: var(--%NS%text-strong); + overflow-wrap: anywhere; +} + +.diff[_ngcontent-%COMP%] { + display: grid; + gap: 4px; +} + +.diff-row[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr); + gap: 8px; + align-items: baseline; + padding: 5px 8px; + border-radius: 6px; + background: var(--%NS%surface-2); +} + +.op[_ngcontent-%COMP%] { + font-size: 10.5px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--%NS%text-2); +} + +.diff-row.add[_ngcontent-%COMP%] .op[_ngcontent-%COMP%] { + color: var(--%NS%ok); +} + +.diff-row.remove[_ngcontent-%COMP%] .op[_ngcontent-%COMP%] { + color: var(--%NS%danger); +} + +.path[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + overflow-wrap: anywhere; +} + +.values[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 4px 6px; + min-width: 0; + overflow-wrap: anywhere; +} + +.before[_ngcontent-%COMP%] { + color: var(--%NS%text-2); + text-decoration: line-through; +} + +.after[_ngcontent-%COMP%] { + color: var(--%NS%text); +} + +.arrow[_ngcontent-%COMP%] { + color: var(--%NS%text-3); +} + +.confirm[_ngcontent-%COMP%] { + margin-top: 14px; + padding: 12px; + border: 1px solid var(--%NS%accent-line); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%accent-soft); +} + +.confirm[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { + margin: 0 0 10px; + line-height: 1.5; +} + +.actions[_ngcontent-%COMP%] { + display: flex; + gap: 8px; +} + +.paused[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 10px 14px; + margin-bottom: 14px; + padding: 10px 12px; + border: 1px solid color-mix(in srgb, var(--%NS%warn) 40%, transparent); + border-radius: var(--%NS%radius-sm); + background: color-mix(in srgb, var(--%NS%warn) 10%, transparent); +} + +.paused[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { + flex: 1 1 240px; + margin: 0; + line-height: 1.5; +} + +.paused[_ngcontent-%COMP%] .hint.small[_ngcontent-%COMP%] { + flex-basis: 100%; + margin-top: 0; +} + +.message[_ngcontent-%COMP%]:empty { + display: none; +} + +.message[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-2); +} + +.kinds[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.kind-chip[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + gap: 6px; + max-width: 100%; + height: 28px; + padding: 0 10px; + border: 1px solid var(--%NS%border); + border-radius: 99px; + background: var(--%NS%surface-2); + color: var(--%NS%text-2); + font: inherit; + font-size: 12px; + font-weight: 500; + cursor: pointer; + transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), color 0.15s var(--%NS%ease); +} + +.kind-chip[_ngcontent-%COMP%]:hover { + border-color: var(--%NS%border-strong); + background: var(--%NS%surface-3); + color: var(--%NS%text); +} + +.kind-chip.active[_ngcontent-%COMP%] { + border-color: var(--%NS%accent-line); + background: var(--%NS%accent-soft); + color: var(--%NS%text-strong); +} + +.kind-chip[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.chip-text[_ngcontent-%COMP%] { + overflow: hidden; + min-width: 0; + text-overflow: ellipsis; + white-space: nowrap; +} + +.kind-chip[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] { + flex: none; + min-width: 18px; + padding: 0 5px; + border-radius: 99px; + background: var(--%NS%surface-3); + color: var(--%NS%text-2); + font-size: 11px; + line-height: 16px; + text-align: center; + font-variant-numeric: tabular-nums; +} + +.nodes[_ngcontent-%COMP%] { + display: flex; + flex-direction: column; + gap: 8px; + animation: enter 0.35s var(--%NS%ease) both; +} + +.node-card[_ngcontent-%COMP%] { + min-width: 0; + padding: 12px 16px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + border-radius: var(--%NS%radius-sm); +} + +.node-header[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 6px 8px; + min-width: 0; +} + +.node-label[_ngcontent-%COMP%] { + min-width: 0; + font-family: var(--%NS%font-mono); + font-weight: 500; + color: var(--%NS%text-strong); + overflow-wrap: anywhere; +} + +.node-meta[_ngcontent-%COMP%] { + margin-top: 6px; + color: var(--%NS%text-3); + font-size: 12px; +} + +.file[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); + font-size: 11.5px; + overflow-wrap: anywhere; +} + +.detail[_ngcontent-%COMP%] { + margin: 6px 0 0; + color: var(--%NS%text-2); + font-size: 12px; + line-height: 1.5; + overflow-wrap: anywhere; +} + +.spinner[_ngcontent-%COMP%] { + width: 18px; + height: 18px; + border: 2px solid var(--%NS%border-strong); + border-top-color: var(--%NS%accent); + border-radius: 50%; + animation: spin 0.8s linear infinite; +} + +@media (prefers-reduced-motion: reduce) { + .spinner[_ngcontent-%COMP%], + .status.on[_ngcontent-%COMP%] .live-dot[_ngcontent-%COMP%] { + animation: none; + } +} +@media (max-width: 760px) { + .live-layout[_ngcontent-%COMP%], + .log-layout[_ngcontent-%COMP%] { + grid-template-columns: minmax(0, 1fr); + } + .store-list[_ngcontent-%COMP%] { + border-right: none; + border-bottom: 1px solid var(--%NS%border); + } +} +@media (max-width: 480px) { + .toolbar[_ngcontent-%COMP%] { + padding: 8px; + } + .toolbar[_ngcontent-%COMP%] input[_ngcontent-%COMP%], + .page-select[_ngcontent-%COMP%] { + flex-basis: 100%; + } + .store-detail[_ngcontent-%COMP%] { + padding: 12px; + } + .kv[_ngcontent-%COMP%] { + grid-template-columns: minmax(0, 1fr); + } +}`]})};function nI(e){return e.split(`@`)[1]??``}var rI={signal:`Signal Forms`,reactive:`Reactive`,template:`Template-driven`},iI={own:`validator`,directive:`template attribute`,tree:`cross-field rule`,async:`async`,parse:`parse`,submission:`server`,schema:`schema`,manual:`setErrors`},aI=$T;async function oI(e,t){return await aI(e,`request-form-action`,t)??{ok:!1,error:`The devtools server did not answer.`}}function sI(e){return`${e.ok?e.message??`Done.`:e.error??`Failed.`}${e.skipped?.length?` Skipped: ${e.skipped.map(e=>`${e.path} (${e.reason})`).join(`, `)}.`:``}${e.status?` Status: ${e.status}.`:``}`}function cI(e){return(e??``).replace(/^_Labels, paths.*_\n\n/,``).replace(/`/g,``).replace(/\*\*/g,``)}var lI=[`heading`];function uI(e,t){if(e&1){let e=W();H(0,`div`,6)(1,`p`,14),J(2,`Could not explain this field. The devtools server did not answer.`),U(),H(3,`button`,10),Qg(`click`,function(){return k(e),A(K().retry())}),J(4,`Try again`),U()()}}function dI(e,t){if(e&1&&(H(0,`pre`,7),J(1),U()),e&2){let e=K();N(`aria-busy`,e.text()===null?`true`:null),M(),Y(e.text()??`Loading…`)}}function fI(e,t){if(e&1){let e=W();H(0,`div`,8)(1,`label`,15),J(2),U(),H(3,`input`,16),Qg(`input`,function(t){return k(e),A(K().draft.set(t.target.value))})(`keydown.enter`,function(){return k(e),A(K().setValue())}),U(),H(4,`button`,17),Qg(`click`,function(){return k(e),A(K().setValue())}),J(5,` Set `),U()()}if(e&2){let e=K();M(2),X(`New value for `,e.node().path),M(),Vg(`value`,e.draft()),M(),Vg(`disabled`,!e.canWrite()),N(`aria-describedby`,e.canWrite()?null:`field-writes-off`)}}function pI(e,t){if(e&1&&(H(0,`p`,12),J(1),U()),e&2){let e=K();M(),Y(e.writesOff)}}var mI=class e{form=$.required();node=$.required();version=$(0);rpc=$(null);closed=Dv();canWrite=Q(()=>nE(this.rpc(),`forms`));writesOff=HT(`forms`);target=Q(()=>`${this.form().id}|${this.node().path}`);text=wv({source:this.target,computation:()=>null});failed=wv({source:this.target,computation:()=>!1});attempt=j(0);heading=Lv.required(`heading`);host=E(Ml);draft=wv({source:this.target,computation:()=>``});message=wv({source:this.target,computation:()=>``});constructor(){uc(()=>{let e=this.form().id,t=this.node().path;this.version(),this.attempt();let n=this.rpc();Sv(()=>this.load(n,e,t))}),$v(()=>{this.target();let e=Sv(this.heading).nativeElement;this.host.nativeElement.scrollIntoView?.({block:`nearest`}),e.focus({preventScroll:!0})})}async load(e,t,n){if(!e)return;let r=await aI(e,`forms-explain`,{kind:`field`,form:t,path:n});if(this.form().id===t&&this.node().path===n){if(r===null){this.failed.set(!0);return}this.failed.set(!1),this.text.set(cI(r))}}retry(){this.failed.set(!1),this.attempt.update(e=>e+1)}async act(e){let t=await oI(this.rpc(),{action:e,formId:this.form().id,path:this.node().path});this.message.set(t.expression?`${sI(t)} ${t.expression}`:sI(t))}async setValue(){let e=await oI(this.rpc(),{action:`set-value`,formId:this.form().id,path:this.node().path,value:this.draft(),coerce:!0,mode:`user`});this.message.set(sI(e))}static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-forms-field-detail`]],viewQuery:function(e,t){e&1&&e_(t.heading,lI,5),e&2&&t_()},hostAttrs:[`role`,`region`,`aria-labelledby`,`forms-field-heading`],inputs:{form:[1,`form`],node:[1,`node`],version:[1,`version`],rpc:[1,`rpc`]},outputs:{closed:`closed`},decls:25,vars:11,consts:[[`heading`,``],[1,`head`],[1,`section-label`],[`id`,`forms-field-heading`,`tabindex`,`-1`],[1,`tag`],[`type`,`button`,1,`small`,`close`,3,`click`],[`role`,`alert`,1,`failed`],[1,`explain`],[1,`editor`],[`role`,`group`,`aria-label`,`Field actions`,1,`row`],[`type`,`button`,1,`small`,3,`click`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`id`,`field-writes-off`,1,`muted`],[`role`,`status`,1,`status`],[1,`muted`],[`for`,`field-value`,1,`sr-only`],[`id`,`field-value`,`type`,`text`,`placeholder`,`New value, read as the current value's type`,`autocomplete`,`off`,`spellcheck`,`false`,1,`field-input`,3,`input`,`keydown.enter`,`value`],[`type`,`button`,1,`small`,`primary`,3,`click`,`disabled`]],template:function(e,t){e&1&&(H(0,`div`,1)(1,`span`,2),J(2,`Field`),U(),H(3,`h3`,3,0),J(5),U(),H(6,`span`,4),J(7),U(),H(8,`button`,5),Qg(`click`,function(){return t.closed.emit()}),J(9,` Close `),U()(),P(10,uI,5,0,`div`,6)(11,dI,2,2,`pre`,7),P(12,fI,6,4,`div`,8),H(13,`div`,9)(14,`button`,10),Qg(`click`,function(){return t.act(`focus`)}),J(15,`Focus`),U(),H(16,`button`,11),Qg(`click`,function(){return t.act(`mark-touched`)}),J(17,` Touch `),U(),H(18,`button`,11),Qg(`click`,function(){return t.act(`revalidate`)}),J(19,` Revalidate `),U(),H(20,`button`,10),Qg(`click`,function(){return t.act(`store-as-global`)}),J(21,`Store as global`),U()(),P(22,pI,2,1,`p`,12),H(23,`p`,13),J(24),U()),e&2&&(M(5),Y(t.node().path||`(form)`),M(2),Y(t.node().type),M(),N(`aria-label`,`Close details for `+(t.node().path||`the form`)),M(2),F(t.failed()?10:11),M(2),F(t.node().type===`control`&&!t.node().redacted?12:-1),M(4),Vg(`disabled`,!t.canWrite()),N(`aria-describedby`,t.canWrite()?null:`field-writes-off`),M(2),Vg(`disabled`,!t.canWrite()),N(`aria-describedby`,t.canWrite()?null:`field-writes-off`),M(4),F(t.canWrite()?-1:22),M(2),Y(t.message()))},styles:[`.muted[_ngcontent-%COMP%] { + color: var(--%NS%text-2); +} + +code[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); + font-size: 12.5px; +} + +.small[_ngcontent-%COMP%] { + display: inline-block; + max-width: 100%; + height: 34px; + padding: 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + font-weight: 500; + line-height: 32px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + cursor: pointer; + transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); +} + +.small[_ngcontent-%COMP%]:hover { + background: var(--%NS%surface-3); + border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%border-strong)); +} + +.small[_ngcontent-%COMP%]:active { + background: var(--%NS%border-strong); +} + +.small[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.small[_ngcontent-%COMP%]:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.small.primary[_ngcontent-%COMP%] { + background: var(--%NS%accent); + border-color: var(--%NS%accent); + color: var(--%NS%accent-ink); + font-weight: 600; +} + +.small.primary[_ngcontent-%COMP%]:hover { + background: var(--%NS%accent-hover); + border-color: var(--%NS%accent-hover); +} + +.small.danger[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 40%, transparent); + color: var(--%NS%danger); +} + +.small.danger[_ngcontent-%COMP%]:hover { + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + border-color: color-mix(in srgb, var(--%NS%danger) 55%, transparent); +} + +.small.armed[_ngcontent-%COMP%] { + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +.small.danger.armed[_ngcontent-%COMP%] { + background: var(--%NS%danger); + border-color: var(--%NS%danger); + color: #1f0707; + font-weight: 600; + box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent); +} + +.field-input[_ngcontent-%COMP%] { + min-width: 0; + height: 34px; + padding: 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%bg); + color: var(--%NS%text); + font-family: var(--%NS%font-mono); + font-size: 13px; + transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); +} + +.field-input[_ngcontent-%COMP%]::placeholder { + color: var(--%NS%text-3); + font-family: var(--%NS%font-sans); +} + +.field-input[_ngcontent-%COMP%]:hover { + border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%border-strong)); +} + +.field-input[_ngcontent-%COMP%]:focus, +.field-input[_ngcontent-%COMP%]:focus-visible { + outline: none; + border-color: var(--%NS%accent); + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +.explain[_ngcontent-%COMP%] { + margin: 0; + padding: 12px 16px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%bg); + color: var(--%NS%text); + font-family: var(--%NS%font-mono); + font-size: 12.5px; + line-height: 1.6; + white-space: pre-wrap; + overflow-wrap: anywhere; + tab-size: 2; +} + +.explain[aria-busy=true][_ngcontent-%COMP%] { + color: var(--%NS%text-3); +} + +.section-label[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.tag[_ngcontent-%COMP%] { + display: inline-block; + margin: 0; + padding: 1px 8px; + border: 1px solid var(--%NS%border); + border-radius: 99px; + background: var(--%NS%surface-2); + color: var(--%NS%text-2); + font-size: 11px; + font-weight: 500; + line-height: 18px; + white-space: nowrap; + font-variant-numeric: tabular-nums; +} + +.tag[data-tone=ok][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); + color: var(--%NS%ok); +} + +.tag[data-tone=warn][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); + background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); + color: var(--%NS%warn); +} + +.tag[data-tone=bad][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + color: var(--%NS%danger); +} + +.status[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-2); + font-size: 12.5px; + line-height: 1.5; + overflow-wrap: anywhere; +} + +.empty-state[_ngcontent-%COMP%] { + display: grid; + justify-items: center; + gap: 6px; + margin: 0; + padding: 40px 24px; + border: 1px dashed var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + color: var(--%NS%text-2); + font-size: 13px; + line-height: 1.5; + text-align: center; +} + +.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { + max-width: 52ch; + margin: 0; +} + +.empty-state[_ngcontent-%COMP%] .empty-title[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-size: 14px; + font-weight: 600; +} + +.spinner[_ngcontent-%COMP%] { + width: 16px; + height: 16px; + border: 2px solid var(--%NS%border-strong); + border-top-color: var(--%NS%accent); + border-radius: 50%; + animation: spin 0.8s linear infinite; +} + +[_nghost-%COMP%] { + display: flex; + flex-direction: column; + gap: 12px; + min-width: 0; + padding: 16px; + background: var(--%NS%surface-2); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + animation: enter 0.35s var(--%NS%ease) both; +} + +.head[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 4px 8px; + align-items: center; + min-width: 0; +} + +.head[_ngcontent-%COMP%] .section-label[_ngcontent-%COMP%] { + flex-basis: 100%; +} + +h3[_ngcontent-%COMP%] { + flex: 1 1 0; + min-width: 0; + margin: 0; + color: var(--%NS%text-strong); + font-family: var(--%NS%font-mono); + font-size: 14px; + font-weight: 600; + line-height: 1.4; + overflow-wrap: anywhere; + border-radius: 4px; +} + +h3[_ngcontent-%COMP%]:focus { + outline: none; +} + +h3[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.close[_ngcontent-%COMP%] { + margin-left: auto; +} + +.failed[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 8px 12px; + align-items: center; +} + +.failed[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { + margin: 0; + font-size: 12.5px; +} + +.editor[_ngcontent-%COMP%] { + display: flex; + gap: 8px; + align-items: center; +} + +.editor[_ngcontent-%COMP%] .field-input[_ngcontent-%COMP%] { + flex: 1 1 auto; +} + +.row[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: center; +} + +.status[_ngcontent-%COMP%] { + margin-top: -4px; +} + +.status[_ngcontent-%COMP%]:empty { + height: 0; + margin: -12px 0 0; +}`]})};function hI(e,t){if(e&1){let e=W();H(0,`div`,0)(1,`p`,4),J(2,`Could not explain this form`),U(),H(3,`p`),J(4,`The devtools server did not answer. Check that the app is running, then try again.`),U(),H(5,`button`,2),Qg(`click`,function(){return k(e),A(K().retry())}),J(6,`Try again`),U()()}}function gI(e,t){if(e&1&&(H(0,`section`,5)(1,`h3`,6),J(2,`Submit`),U(),H(3,`pre`,7),J(4),U()(),H(5,`section`,8)(6,`h3`,9),J(7,`Payload`),U(),H(8,`pre`,7),J(9),U()()),e&2){let e=K();M(3),N(`aria-busy`,e.submit()===null?`true`:null),M(),Y(e.submit()??`Loading…`),M(4),N(`aria-busy`,e.payload()===null?`true`:null),M(),Y(e.payload()??`Loading…`)}}function _I(e,t){if(e&1){let e=W();H(0,`div`,0)(1,`p`,3),J(2,`Could not check this form`),U(),H(3,`p`),J(4,`The devtools server did not answer. Check that the app is running, then try again.`),U(),H(5,`button`,4),Qg(`click`,function(){return k(e),A(K().retry())}),J(6,`Try again`),U()()}}function vI(e,t){e&1&&(H(0,`div`,1),Fg(1,`span`,5),H(2,`p`),J(3,`Checking the form for problems…`),U()())}function yI(e,t){e&1&&(H(0,`div`,2)(1,`span`,6),fs(),H(2,`svg`,7),Fg(3,`path`,8),U()(),ps(),H(4,`p`,3),J(5,`No problems found`),U(),H(6,`p`),J(7,`For generic accessibility checks, run axe on the page.`),U()())}function bI(e,t){if(e&1&&(H(0,`span`,15),J(1,`at `),H(2,`code`),J(3),U()()),e&2){let e=K().$implicit;M(3),Y(e.path)}}function xI(e,t){if(e&1&&(H(0,`li`)(1,`div`,12)(2,`span`,13),J(3),U(),H(4,`code`,14),J(5),U(),P(6,bI,4,1,`span`,15),U(),H(7,`p`,16),J(8),U(),H(9,`p`,17)(10,`span`,18),J(11,`Fix`),U(),J(12),U()()),e&2){let e=t.$implicit;N(`data-severity`,e.severity),M(2),N(`data-tone`,e.severity===`info`?``:e.severity===`error`?`bad`:`warn`),M(),Y(e.severity),M(2),Y(e.rule),M(),F(e.path?6:-1),M(2),Y(e.message),M(4),X(` `,e.fix)}}function SI(e,t){if(e&1&&(H(0,`p`,9)(1,`span`,10),J(2),U(),J(3),U(),H(4,`ul`,11),I(5,xI,13,7,`li`,null,Cg),U()),e&2){let e=K();M(2),Y(e.findings().length),M(),X(` `,e.findings().length===1?`finding`:`findings`,` `),M(2),L(e.findings())}}var CI=class e{formId=$.required();version=$(0);rpc=$(null);submit=wv({source:this.formId,computation:()=>null});payload=wv({source:this.formId,computation:()=>null});failed=wv({source:this.formId,computation:()=>!1});message=j(``);attempt=j(0);constructor(){uc(()=>{let e=this.formId();this.version(),this.attempt();let t=this.rpc();t&&Sv(async()=>{let[n,r]=await Promise.all([aI(t,`forms-explain`,{kind:`submit`,form:e}),aI(t,`forms-explain`,{kind:`payload`,form:e})]);if(this.formId()===e){if(n===null||r===null){this.failed.set(!0);return}this.failed.set(!1),this.submit.set(cI(n)),this.payload.set(cI(r))}})})}retry(){this.failed.set(!1),this.attempt.update(e=>e+1)}async copyFixture(){let e=(await aI(this.rpc(),`forms-explain`,{kind:`fixture`,form:this.formId()})??``).match(/```ts\n([\s\S]*?)```/)?.[1];if(!e){this.message.set(`No test fixture is available for this form.`);return}try{await navigator.clipboard.writeText(e),this.message.set(`Copied.`)}catch{this.message.set(`Clipboard is not available here.`)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-forms-submit`]],inputs:{formId:[1,`formId`],version:[1,`version`],rpc:[1,`rpc`]},decls:7,vars:2,consts:[[`role`,`alert`,1,`empty-state`],[1,`fixture`],[`type`,`button`,1,`small`,3,`click`],[`role`,`status`,1,`status`],[1,`empty-title`],[`aria-labelledby`,`forms-submit-title`,1,`block`],[`id`,`forms-submit-title`,1,`section-label`],[1,`explain`],[`aria-labelledby`,`forms-payload-title`,1,`block`],[`id`,`forms-payload-title`,1,`section-label`]],template:function(e,t){e&1&&(P(0,hI,7,0,`div`,0)(1,gI,10,4),H(2,`div`,1)(3,`button`,2),Qg(`click`,function(){return t.copyFixture()}),J(4,`Copy test fixture`),U(),H(5,`span`,3),J(6),U()()),e&2&&(F(+!t.failed()),M(6),Y(t.message()))},styles:[`.muted[_ngcontent-%COMP%] { + color: var(--%NS%text-2); +} + +code[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); + font-size: 12.5px; +} + +.small[_ngcontent-%COMP%] { + display: inline-block; + max-width: 100%; + height: 34px; + padding: 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + font-weight: 500; + line-height: 32px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + cursor: pointer; + transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); +} + +.small[_ngcontent-%COMP%]:hover { + background: var(--%NS%surface-3); + border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%border-strong)); +} + +.small[_ngcontent-%COMP%]:active { + background: var(--%NS%border-strong); +} + +.small[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.small[_ngcontent-%COMP%]:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.small.primary[_ngcontent-%COMP%] { + background: var(--%NS%accent); + border-color: var(--%NS%accent); + color: var(--%NS%accent-ink); + font-weight: 600; +} + +.small.primary[_ngcontent-%COMP%]:hover { + background: var(--%NS%accent-hover); + border-color: var(--%NS%accent-hover); +} + +.small.danger[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 40%, transparent); + color: var(--%NS%danger); +} + +.small.danger[_ngcontent-%COMP%]:hover { + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + border-color: color-mix(in srgb, var(--%NS%danger) 55%, transparent); +} + +.small.armed[_ngcontent-%COMP%] { + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +.small.danger.armed[_ngcontent-%COMP%] { + background: var(--%NS%danger); + border-color: var(--%NS%danger); + color: #1f0707; + font-weight: 600; + box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent); +} + +.field-input[_ngcontent-%COMP%] { + min-width: 0; + height: 34px; + padding: 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%bg); + color: var(--%NS%text); + font-family: var(--%NS%font-mono); + font-size: 13px; + transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); +} + +.field-input[_ngcontent-%COMP%]::placeholder { + color: var(--%NS%text-3); + font-family: var(--%NS%font-sans); +} + +.field-input[_ngcontent-%COMP%]:hover { + border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%border-strong)); +} + +.field-input[_ngcontent-%COMP%]:focus, +.field-input[_ngcontent-%COMP%]:focus-visible { + outline: none; + border-color: var(--%NS%accent); + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +.explain[_ngcontent-%COMP%] { + margin: 0; + padding: 12px 16px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%bg); + color: var(--%NS%text); + font-family: var(--%NS%font-mono); + font-size: 12.5px; + line-height: 1.6; + white-space: pre-wrap; + overflow-wrap: anywhere; + tab-size: 2; +} + +.explain[aria-busy=true][_ngcontent-%COMP%] { + color: var(--%NS%text-3); +} + +.section-label[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.tag[_ngcontent-%COMP%] { + display: inline-block; + margin: 0; + padding: 1px 8px; + border: 1px solid var(--%NS%border); + border-radius: 99px; + background: var(--%NS%surface-2); + color: var(--%NS%text-2); + font-size: 11px; + font-weight: 500; + line-height: 18px; + white-space: nowrap; + font-variant-numeric: tabular-nums; +} + +.tag[data-tone=ok][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); + color: var(--%NS%ok); +} + +.tag[data-tone=warn][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); + background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); + color: var(--%NS%warn); +} + +.tag[data-tone=bad][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + color: var(--%NS%danger); +} + +.status[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-2); + font-size: 12.5px; + line-height: 1.5; + overflow-wrap: anywhere; +} + +.empty-state[_ngcontent-%COMP%] { + display: grid; + justify-items: center; + gap: 6px; + margin: 0; + padding: 40px 24px; + border: 1px dashed var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + color: var(--%NS%text-2); + font-size: 13px; + line-height: 1.5; + text-align: center; +} + +.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { + max-width: 52ch; + margin: 0; +} + +.empty-state[_ngcontent-%COMP%] .empty-title[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-size: 14px; + font-weight: 600; +} + +.spinner[_ngcontent-%COMP%] { + width: 16px; + height: 16px; + border: 2px solid var(--%NS%border-strong); + border-top-color: var(--%NS%accent); + border-radius: 50%; + animation: spin 0.8s linear infinite; +} + +[_nghost-%COMP%] { + display: grid; + gap: 16px; + min-width: 0; + animation: enter 0.35s var(--%NS%ease) both; +} + +.block[_ngcontent-%COMP%] { + display: grid; + gap: 8px; + min-width: 0; +} + +.explain[_ngcontent-%COMP%] { + max-height: 420px; + overflow: auto; +} + +.fixture[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 8px 12px; + align-items: center; +}`]})},wI=class e{formId=$.required();version=$(0);rpc=$(null);findings=wv({source:this.formId,computation:()=>null});failed=wv({source:this.formId,computation:()=>!1});attempt=j(0);constructor(){uc(()=>{let e=this.formId();this.version(),this.attempt();let t=this.rpc();t&&Sv(async()=>{let n=await aI(t,`forms-lint`,{form:e});this.formId()===e&&(this.failed.set(n===null),n&&this.findings.set(n))})})}retry(){this.failed.set(!1),this.attempt.update(e=>e+1)}static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-forms-lint`]],inputs:{formId:[1,`formId`],version:[1,`version`],rpc:[1,`rpc`]},decls:4,vars:1,consts:[[`role`,`alert`,1,`empty-state`],[`role`,`status`,1,`empty-state`],[1,`empty-state`],[1,`empty-title`],[`type`,`button`,1,`small`,3,`click`],[`aria-hidden`,`true`,1,`spinner`],[`aria-hidden`,`true`,1,`ok-icon`],[`width`,`16`,`height`,`16`,`viewBox`,`0 0 24 24`,`fill`,`none`,`stroke`,`currentColor`,`stroke-width`,`2.5`,`stroke-linecap`,`round`,`stroke-linejoin`,`round`],[`d`,`M20 6 9 17l-5-5`],[1,`summary`],[1,`tabular`],[1,`findings`],[1,`meta`],[1,`tag`,`severity`],[1,`rule`],[1,`muted`,`path`],[1,`message`],[1,`fix`],[1,`fix-label`]],template:function(e,t){e&1&&P(0,_I,7,0,`div`,0)(1,vI,4,0,`div`,1)(2,yI,8,0,`div`,2)(3,SI,7,2),e&2&&F(t.failed()?0:t.findings()===null?1:t.findings().length?3:2)},styles:[`.muted[_ngcontent-%COMP%] { + color: var(--%NS%text-2); +} + +code[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); + font-size: 12.5px; +} + +.small[_ngcontent-%COMP%] { + display: inline-block; + max-width: 100%; + height: 34px; + padding: 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + font-weight: 500; + line-height: 32px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + cursor: pointer; + transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); +} + +.small[_ngcontent-%COMP%]:hover { + background: var(--%NS%surface-3); + border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%border-strong)); +} + +.small[_ngcontent-%COMP%]:active { + background: var(--%NS%border-strong); +} + +.small[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.small[_ngcontent-%COMP%]:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.small.primary[_ngcontent-%COMP%] { + background: var(--%NS%accent); + border-color: var(--%NS%accent); + color: var(--%NS%accent-ink); + font-weight: 600; +} + +.small.primary[_ngcontent-%COMP%]:hover { + background: var(--%NS%accent-hover); + border-color: var(--%NS%accent-hover); +} + +.small.danger[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 40%, transparent); + color: var(--%NS%danger); +} + +.small.danger[_ngcontent-%COMP%]:hover { + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + border-color: color-mix(in srgb, var(--%NS%danger) 55%, transparent); +} + +.small.armed[_ngcontent-%COMP%] { + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +.small.danger.armed[_ngcontent-%COMP%] { + background: var(--%NS%danger); + border-color: var(--%NS%danger); + color: #1f0707; + font-weight: 600; + box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent); +} + +.field-input[_ngcontent-%COMP%] { + min-width: 0; + height: 34px; + padding: 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%bg); + color: var(--%NS%text); + font-family: var(--%NS%font-mono); + font-size: 13px; + transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); +} + +.field-input[_ngcontent-%COMP%]::placeholder { + color: var(--%NS%text-3); + font-family: var(--%NS%font-sans); +} + +.field-input[_ngcontent-%COMP%]:hover { + border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%border-strong)); +} + +.field-input[_ngcontent-%COMP%]:focus, +.field-input[_ngcontent-%COMP%]:focus-visible { + outline: none; + border-color: var(--%NS%accent); + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +.explain[_ngcontent-%COMP%] { + margin: 0; + padding: 12px 16px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%bg); + color: var(--%NS%text); + font-family: var(--%NS%font-mono); + font-size: 12.5px; + line-height: 1.6; + white-space: pre-wrap; + overflow-wrap: anywhere; + tab-size: 2; +} + +.explain[aria-busy=true][_ngcontent-%COMP%] { + color: var(--%NS%text-3); +} + +.section-label[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.tag[_ngcontent-%COMP%] { + display: inline-block; + margin: 0; + padding: 1px 8px; + border: 1px solid var(--%NS%border); + border-radius: 99px; + background: var(--%NS%surface-2); + color: var(--%NS%text-2); + font-size: 11px; + font-weight: 500; + line-height: 18px; + white-space: nowrap; + font-variant-numeric: tabular-nums; +} + +.tag[data-tone=ok][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); + color: var(--%NS%ok); +} + +.tag[data-tone=warn][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); + background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); + color: var(--%NS%warn); +} + +.tag[data-tone=bad][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + color: var(--%NS%danger); +} + +.status[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-2); + font-size: 12.5px; + line-height: 1.5; + overflow-wrap: anywhere; +} + +.empty-state[_ngcontent-%COMP%] { + display: grid; + justify-items: center; + gap: 6px; + margin: 0; + padding: 40px 24px; + border: 1px dashed var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + color: var(--%NS%text-2); + font-size: 13px; + line-height: 1.5; + text-align: center; +} + +.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { + max-width: 52ch; + margin: 0; +} + +.empty-state[_ngcontent-%COMP%] .empty-title[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-size: 14px; + font-weight: 600; +} + +.spinner[_ngcontent-%COMP%] { + width: 16px; + height: 16px; + border: 2px solid var(--%NS%border-strong); + border-top-color: var(--%NS%accent); + border-radius: 50%; + animation: spin 0.8s linear infinite; +} + +[_nghost-%COMP%] { + display: grid; + gap: 12px; + min-width: 0; +} + +.ok-icon[_ngcontent-%COMP%] { + display: grid; + place-items: center; + width: 32px; + height: 32px; + margin-bottom: 4px; + border-radius: 50%; + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); + color: var(--%NS%ok); +} + +.summary[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-2); + font-size: 12.5px; +} + +.tabular[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-weight: 600; + font-variant-numeric: tabular-nums; +} + +.findings[_ngcontent-%COMP%] { + display: grid; + gap: 8px; + margin: 0; + padding: 0; + list-style: none; + color: var(--%NS%text); + font-size: 13px; + animation: enter 0.35s var(--%NS%ease) both; +} + +.findings[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { + display: grid; + gap: 6px; + min-width: 0; + padding: 12px 16px; + background: var(--%NS%surface-2); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + box-shadow: inset 3px 0 0 var(--%NS%border-strong); + transition: border-color 150ms var(--%NS%ease); +} + +.findings[_ngcontent-%COMP%] li[data-severity=error][_ngcontent-%COMP%] { + box-shadow: inset 3px 0 0 var(--%NS%danger); +} + +.findings[_ngcontent-%COMP%] li[data-severity=warning][_ngcontent-%COMP%] { + box-shadow: inset 3px 0 0 var(--%NS%warn); +} + +.findings[_ngcontent-%COMP%] li[_ngcontent-%COMP%]:hover { + border-color: var(--%NS%border-strong); +} + +.meta[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 4px 8px; + align-items: center; + min-width: 0; +} + +.severity[_ngcontent-%COMP%] { + text-transform: uppercase; + letter-spacing: 0.06em; +} + +.rule[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-weight: 600; + overflow-wrap: anywhere; +} + +.path[_ngcontent-%COMP%] { + font-size: 12.5px; + overflow-wrap: anywhere; +} + +.path[_ngcontent-%COMP%] code[_ngcontent-%COMP%] { + color: #fde68a; +} + +.message[_ngcontent-%COMP%], +.fix[_ngcontent-%COMP%] { + margin: 0; + line-height: 1.5; + overflow-wrap: anywhere; +} + +.fix[_ngcontent-%COMP%] { + color: var(--%NS%text-2); + font-size: 12.5px; +} + +.fix-label[_ngcontent-%COMP%] { + margin-right: 4px; + color: var(--%NS%accent); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.06em; + text-transform: uppercase; +}`]})},TI=()=>[],EI=(e,t)=>t.formId+`#`+t.seq;function DI(e,t){e&1&&Fg(0,`span`,5)}function OI(e,t){if(e&1){let e=W();H(0,`label`)(1,`input`,11),Qg(`change`,function(){let t=k(e).$implicit;return A(K().filter.set(t))}),U(),J(2),U()}if(e&2){let e=t.$implicit,n=K();M(),Vg(`value`,e)(`checked`,e===n.filter()),M(),X(` `,e,` `)}}function kI(e,t){if(e&1&&(H(0,`span`,16),J(1),U()),e&2){let e=K().$implicit;N(`data-tone`,e.outcome===`ran`?``:`bad`),M(),Y(e.outcome)}}function AI(e,t){if(e&1&&(H(0,`span`,16),J(1),U()),e&2){let e=K().$implicit;M(),X(`×`,e.count)}}function jI(e,t){if(e&1&&(H(0,`span`,16),J(1),U()),e&2){let e=K().$implicit;M(),Y(e.origin)}}function MI(e,t){if(e&1&&(H(0,`span`,16),J(1),U()),e&2){let e=K().$implicit;N(`data-tone`,e.ms>1e3?`warn`:``),M(),X(`pending `,e.ms,`ms`)}}function NI(e,t){if(e&1&&(H(0,`span`,16),J(1),U()),e&2){let e=K().$implicit;N(`data-tone`,e.renders>20?`warn`:``),M(),Z(``,e.renders,` renders: `,(e.rendered??av(3,TI)).join(`, `))}}function PI(e,t){if(e&1&&(H(0,`span`,19),J(1),U(),H(2,`span`,20),J(3,`→`),U(),H(4,`span`,8),J(5,`changed to`),U()),e&2){let e=K(2).$implicit;M(),Y(e.prev)}}function FI(e,t){if(e&1&&(H(0,`div`,17),P(1,PI,6,1),J(2),U()),e&2){let e=K().$implicit;M(),F(e.prev===void 0?-1:1),M(),X(` `,e.detail,` `)}}function II(e,t){if(e&1&&(H(0,`span`,18),J(1),U()),e&2){let e=K().$implicit;M(),X(`from `,e.caller)}}function LI(e,t){if(e&1&&(H(0,`li`)(1,`time`),J(2),U(),H(3,`div`,12)(4,`div`,13)(5,`code`,14),J(6),U(),H(7,`span`,15),J(8),U(),P(9,kI,2,2,`span`,16),P(10,AI,2,1,`span`,16),P(11,jI,2,1,`span`,16),P(12,MI,2,2,`span`,16),P(13,NI,2,4,`span`,16),U(),P(14,FI,3,2,`div`,17),P(15,II,2,1,`span`,18),U()()),e&2){let e=t.$implicit,n=K(2);N(`data-type`,e.type),M(),N(`datetime`,n.iso(e.timestamp)),M(),Y(n.time(e.timestamp)),M(4),Y(e.path||`(form)`),M(2),Y(e.type),M(),F(e.outcome?9:-1),M(),F(e.count&&e.count>1?10:-1),M(),F(e.origin?11:-1),M(),F(e.ms===void 0?-1:12),M(),F(e.renders?13:-1),M(),F(e.prev!==void 0||e.detail?14:-1),M(),F(e.caller?15:-1)}}function RI(e,t){if(e&1&&(H(0,`ol`,9),I(1,LI,16,12,`li`,null,EI),U()),e&2){let e=K();M(),L(e.shown())}}function zI(e,t){if(e&1&&(H(0,`div`,10)(1,`p`,21),J(2),U(),H(3,`p`),J(4,`Pick another source above, or interact with the form to record more.`),U()()),e&2){let e=K();M(2),X(`No changes from `,e.filter())}}function BI(e,t){e&1&&(H(0,`div`,10)(1,`p`,21),J(2,`No changes yet`),U(),H(3,`p`),J(4,`Type into the form to see them here.`),U()())}var VI=[`all`,`user`,`code`,`devtools`],HI=class e{events=$.required();recording=$(!1);record=Dv();origins=VI;filter=j(`all`);shown=Q(()=>{let e=this.filter();return this.events().filter(t=>e===`all`||t.origin===e).slice(-100).reverse()});iso(e){return new Date(e).toISOString()}time=rD;static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-forms-timeline`]],inputs:{events:[1,`events`],recording:[1,`recording`]},outputs:{record:`record`},decls:17,vars:5,consts:[[1,`toolbar`],[1,`record`],[`type`,`checkbox`,3,`change`,`checked`],[1,`record-text`],[1,`record-title`],[`aria-hidden`,`true`,1,`rec-dot`],[1,`record-hint`],[1,`chips`],[1,`sr-only`],[1,`events`],[1,`empty-state`],[`type`,`radio`,`name`,`timeline-origin`,3,`change`,`value`,`checked`],[1,`body`],[1,`line`],[1,`path`],[1,`event-type`],[1,`tag`],[1,`detail`],[1,`caller`],[1,`prev`],[`aria-hidden`,`true`,1,`arrow`],[1,`empty-title`]],template:function(e,t){e&1&&(H(0,`div`,0)(1,`label`,1)(2,`input`,2),Qg(`change`,function(){return t.record.emit(!t.recording())}),U(),H(3,`span`,3)(4,`span`,4),P(5,DI,1,0,`span`,5),J(6,` Record details `),U(),H(7,`span`,6),J(8,`Record calling code, validator changes and renders per keystroke`),U()()(),H(9,`fieldset`,7)(10,`legend`,8),J(11,`Show changes from`),U(),I(12,OI,3,3,`label`,null,wg),U()(),P(14,RI,3,0,`ol`,9)(15,zI,5,1,`div`,10)(16,BI,5,0,`div`,10)),e&2&&(M(),q(`on`,t.recording()),M(),Vg(`checked`,t.recording()),M(3),F(t.recording()?5:-1),M(7),L(t.origins),M(2),F(t.shown().length?14:t.events().length?15:16))},styles:[`.muted[_ngcontent-%COMP%] { + color: var(--%NS%text-2); +} + +code[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); + font-size: 12.5px; +} + +.small[_ngcontent-%COMP%] { + display: inline-block; + max-width: 100%; + height: 34px; + padding: 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + font-weight: 500; + line-height: 32px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + cursor: pointer; + transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); +} + +.small[_ngcontent-%COMP%]:hover { + background: var(--%NS%surface-3); + border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%border-strong)); +} + +.small[_ngcontent-%COMP%]:active { + background: var(--%NS%border-strong); +} + +.small[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.small[_ngcontent-%COMP%]:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.small.primary[_ngcontent-%COMP%] { + background: var(--%NS%accent); + border-color: var(--%NS%accent); + color: var(--%NS%accent-ink); + font-weight: 600; +} + +.small.primary[_ngcontent-%COMP%]:hover { + background: var(--%NS%accent-hover); + border-color: var(--%NS%accent-hover); +} + +.small.danger[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 40%, transparent); + color: var(--%NS%danger); +} + +.small.danger[_ngcontent-%COMP%]:hover { + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + border-color: color-mix(in srgb, var(--%NS%danger) 55%, transparent); +} + +.small.armed[_ngcontent-%COMP%] { + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +.small.danger.armed[_ngcontent-%COMP%] { + background: var(--%NS%danger); + border-color: var(--%NS%danger); + color: #1f0707; + font-weight: 600; + box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent); +} + +.field-input[_ngcontent-%COMP%] { + min-width: 0; + height: 34px; + padding: 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%bg); + color: var(--%NS%text); + font-family: var(--%NS%font-mono); + font-size: 13px; + transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); +} + +.field-input[_ngcontent-%COMP%]::placeholder { + color: var(--%NS%text-3); + font-family: var(--%NS%font-sans); +} + +.field-input[_ngcontent-%COMP%]:hover { + border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%border-strong)); +} + +.field-input[_ngcontent-%COMP%]:focus, +.field-input[_ngcontent-%COMP%]:focus-visible { + outline: none; + border-color: var(--%NS%accent); + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +.explain[_ngcontent-%COMP%] { + margin: 0; + padding: 12px 16px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%bg); + color: var(--%NS%text); + font-family: var(--%NS%font-mono); + font-size: 12.5px; + line-height: 1.6; + white-space: pre-wrap; + overflow-wrap: anywhere; + tab-size: 2; +} + +.explain[aria-busy=true][_ngcontent-%COMP%] { + color: var(--%NS%text-3); +} + +.section-label[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.tag[_ngcontent-%COMP%] { + display: inline-block; + margin: 0; + padding: 1px 8px; + border: 1px solid var(--%NS%border); + border-radius: 99px; + background: var(--%NS%surface-2); + color: var(--%NS%text-2); + font-size: 11px; + font-weight: 500; + line-height: 18px; + white-space: nowrap; + font-variant-numeric: tabular-nums; +} + +.tag[data-tone=ok][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); + color: var(--%NS%ok); +} + +.tag[data-tone=warn][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); + background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); + color: var(--%NS%warn); +} + +.tag[data-tone=bad][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + color: var(--%NS%danger); +} + +.status[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-2); + font-size: 12.5px; + line-height: 1.5; + overflow-wrap: anywhere; +} + +.empty-state[_ngcontent-%COMP%] { + display: grid; + justify-items: center; + gap: 6px; + margin: 0; + padding: 40px 24px; + border: 1px dashed var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + color: var(--%NS%text-2); + font-size: 13px; + line-height: 1.5; + text-align: center; +} + +.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { + max-width: 52ch; + margin: 0; +} + +.empty-state[_ngcontent-%COMP%] .empty-title[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-size: 14px; + font-weight: 600; +} + +.spinner[_ngcontent-%COMP%] { + width: 16px; + height: 16px; + border: 2px solid var(--%NS%border-strong); + border-top-color: var(--%NS%accent); + border-radius: 50%; + animation: spin 0.8s linear infinite; +} + +[_nghost-%COMP%] { + display: grid; + gap: 12px; + min-width: 0; +} + +.toolbar[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 12px; + align-items: center; + justify-content: space-between; +} + +.record[_ngcontent-%COMP%] { + display: inline-flex; + flex: 1 1 260px; + gap: 10px; + align-items: flex-start; + min-width: 0; + padding: 8px 12px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + cursor: pointer; + transition: border-color 150ms var(--%NS%ease), background-color 150ms var(--%NS%ease); +} + +.record[_ngcontent-%COMP%]:hover { + border-color: var(--%NS%border-strong); +} + +.record.on[_ngcontent-%COMP%] { + border-color: var(--%NS%accent-line); + background: var(--%NS%accent-soft); +} + +.record[_ngcontent-%COMP%]:has(input:focus-visible) { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.record[_ngcontent-%COMP%] input[_ngcontent-%COMP%] { + flex: none; + width: 16px; + height: 16px; + margin: 2px 0 0; + accent-color: var(--%NS%accent); + cursor: pointer; +} + +.record[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:focus-visible { + outline: none; +} + +.record-text[_ngcontent-%COMP%] { + display: grid; + gap: 2px; + min-width: 0; +} + +.record-title[_ngcontent-%COMP%] { + display: inline-flex; + gap: 6px; + align-items: center; + color: var(--%NS%text-strong); + font-size: 13px; + font-weight: 500; +} + +.record-hint[_ngcontent-%COMP%] { + color: var(--%NS%text-2); + font-size: 12px; + line-height: 1.4; +} + +.rec-dot[_ngcontent-%COMP%] { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--%NS%danger); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 20%, transparent); + animation: _ngcontent-%COMP%_rec-pulse 1.6s ease-in-out infinite; +} + +@keyframes _ngcontent-%COMP%_rec-pulse { + 50% { + opacity: 0.45; + } +} +.chips[_ngcontent-%COMP%] { + display: inline-flex; + flex: none; + gap: 2px; + min-width: 0; + height: 34px; + margin: 0; + padding: 2px; + background: var(--%NS%bg); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); +} + +.chips[_ngcontent-%COMP%] label[_ngcontent-%COMP%] { + position: relative; + display: inline-flex; + align-items: center; + height: 28px; + padding: 0 12px; + border-radius: 7px; + color: var(--%NS%text-2); + font-size: 12.5px; + font-weight: 500; + text-transform: capitalize; + cursor: pointer; + user-select: none; + transition: background-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); +} + +.chips[_ngcontent-%COMP%] label[_ngcontent-%COMP%]:hover { + color: var(--%NS%text); + background: var(--%NS%surface-2); +} + +.chips[_ngcontent-%COMP%] input[_ngcontent-%COMP%] { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + margin: 0; + opacity: 0; + cursor: pointer; +} + +.chips[_ngcontent-%COMP%] label[_ngcontent-%COMP%]:has(input:checked) { + background: var(--%NS%surface-3); + color: var(--%NS%text-strong); + box-shadow: inset 0 0 0 1px var(--%NS%border-strong); +} + +.chips[_ngcontent-%COMP%] label[_ngcontent-%COMP%]:has(input:focus-visible) { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.events[_ngcontent-%COMP%] { + display: grid; + gap: 2px; + margin: 0; + padding: 4px; + list-style: none; + background: var(--%NS%surface-2); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + font-size: 13px; + animation: enter 0.35s var(--%NS%ease) both; +} + +.events[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: 11ch minmax(0, 1fr); + gap: 12px; + align-items: baseline; + padding: 8px 12px; + border-radius: 6px; + color: var(--%NS%text); + transition: background-color 150ms var(--%NS%ease); +} + +.events[_ngcontent-%COMP%] li[_ngcontent-%COMP%]:hover { + background: var(--%NS%surface-3); +} + +.events[_ngcontent-%COMP%] li[data-type=submit][_ngcontent-%COMP%] { + background: var(--%NS%accent-soft); + box-shadow: inset 2px 0 0 var(--%NS%accent); + color: var(--%NS%text-strong); +} + +time[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-family: var(--%NS%font-mono); + font-size: 12px; + font-variant-numeric: tabular-nums; + white-space: nowrap; +} + +.body[_ngcontent-%COMP%] { + display: grid; + gap: 4px; + min-width: 0; +} + +.line[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 4px 8px; + align-items: center; + min-width: 0; +} + +.path[_ngcontent-%COMP%] { + color: #fde68a; + overflow-wrap: anywhere; +} + +.event-type[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-size: 12px; + font-weight: 600; +} + +.tag[_ngcontent-%COMP%] { + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; +} + +.detail[_ngcontent-%COMP%] { + color: var(--%NS%text); + font-family: var(--%NS%font-mono); + font-size: 12.5px; + overflow-wrap: anywhere; +} + +.prev[_ngcontent-%COMP%] { + color: var(--%NS%text-2); + text-decoration: line-through; + text-decoration-color: color-mix(in srgb, var(--%NS%text-2) 50%, transparent); +} + +.arrow[_ngcontent-%COMP%] { + margin: 0 6px; + color: var(--%NS%text-3); +} + +.caller[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-family: var(--%NS%font-mono); + font-size: 12px; + overflow-wrap: anywhere; +} + +@media (max-width: 480px) { + .events[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { + grid-template-columns: minmax(0, 1fr); + gap: 4px; + } + .chips[_ngcontent-%COMP%] { + width: 100%; + } + .chips[_ngcontent-%COMP%] label[_ngcontent-%COMP%] { + flex: 1; + justify-content: center; + padding: 0 8px; + } +}`]})},UI=()=>[],WI=(e,t)=>t.id,GI=(e,t)=>t.node.path;function KI(e,t){e&1&&(z(0,`div`,0),V(1,`span`,4),z(2,`p`),J(3,`Connecting to the devtools server…`),B()())}function qI(e,t){if(e&1){let e=W();z(0,`div`,1)(1,`p`,5),J(2,`Could not load forms`),B(),z(3,`p`,6),J(4,` The devtools server did not answer. Check that the app is running, then try again. `),B(),z(5,`button`,7),G(`click`,function(){return k(e),A(K().retry())}),J(6,`Try again`),B()()}}function JI(e,t){e&1&&(z(0,`div`,0),V(1,`span`,4),z(2,`p`),J(3,`Loading forms…`),B()())}function YI(e,t){e&1&&(z(0,`div`,2)(1,`p`,5),J(2,`No forms on the page yet`),B(),z(3,`p`,6),J(4,` Open a page that renders a form. Signal Forms, reactive and template-driven forms all show up here, in development builds. `),B()())}function XI(e,t){if(e&1){let e=W();z(0,`div`,2)(1,`p`,5),J(2,`No forms on this page`),B(),z(3,`p`,6),J(4),B(),z(5,`button`,7),G(`click`,function(){return k(e),A(K().allPages.set(!0))}),J(6,` Show forms from all pages `),B()()}if(e&2){let e=K();M(4),Z(` Other connected tabs report `,e.forms().length,` `,e.forms().length===1?`form`:`forms`,`. `)}}function ZI(e,t){if(e&1){let e=W();z(0,`label`,11)(1,`input`,15),G(`change`,function(t){return k(e),A(K(2).allPages.set(t.target.checked))}),B(),J(2,` All pages `),B()}if(e&2){let e=K(2);M(),R(`checked`,e.allPages())}}function QI(e,t){e&1&&(z(0,`span`,22),J(1),z(2,`span`,21),J(3,` errors`),B()()),e&2&&(M(),Y(t))}function $I(e,t){if(e&1){let e=W();z(0,`li`)(1,`button`,16),G(`click`,function(){let t=k(e).$implicit;return A(K(2).selectForm(t.id))}),V(2,`span`,17),z(3,`span`,18),J(4),B(),z(5,`span`,19),J(6),z(7,`span`,20),J(8),B(),z(9,`span`,21),J(10),B()(),P(11,QI,4,1,`span`,22),B()()}if(e&2){let e,n=t.$implicit,r=K(2);M(),q(`active`,n.id===r.selected()?.id),N(`aria-current`,n.id===r.selected()?.id?`true`:null),M(),N(`data-status`,n.root.status),M(),N(`title`,n.label),M(),Y(n.label),M(2),X(``,r.kindLabel(n.kind),` · `),M(2),Y(n.id),M(2),X(`, `,n.root.status),M(),F((e=r.counts().get(n.id)?.errors)?11:-1,e)}}function eL(e,t){if(e&1){let e=W();z(0,`section`,13)(1,`h2`,23),J(2),B(),z(3,`p`,24),J(4,` This form is no longer on the page. It comes back here if the page renders it again. `),B(),z(5,`button`,7),G(`click`,function(){k(e);let t=K(2);return A(t.selectForm(t.visible()[0].id))}),J(6),B()()}if(e&2){let e=K(2);M(2),Y(t),M(4),X(` Show `,e.visible()[0].label,` `)}}function tL(e,t){if(e&1&&(z(0,`span`),J(1),B()),e&2){let e=K();M(),Y(e.submitted?`submitted`:`not submitted`)}}function nL(e,t){e&1&&(z(0,`span`),J(1,`submitting`),B())}function rL(e,t){if(e&1&&(z(0,`li`)(1,`code`),J(2),B(),J(3),z(4,`code`,45),J(5),B()()),e&2){let e=t.$implicit;M(2),Y(e.path||`(form)`),M(),X(` `,e.message,` `),M(2),Y(e.kind)}}function iL(e,t){if(e&1&&(z(0,`details`,30)(1,`summary`),J(2),B(),z(3,`ul`),I(4,rL,6,3,`li`,null,Cg),B()()),e&2){let e=K();M(2),X(`Error summary (`,e.errorSummary.length,`)`),M(2),L(e.errorSummary)}}function aL(e,t){if(e&1){let e=W();z(0,`button`,33),G(`click`,function(){return k(e),A(K(3).confirmAct(`restore`))}),J(1),B()}if(e&2){let e=K(3);q(`armed`,e.armed()===`restore`),R(`disabled`,!e.canWrite()),N(`aria-describedby`,e.canWrite()?null:`forms-writes-off`)(`title`,`Restore `+e.snapshot()),M(),X(` `,e.armed()===`restore`?`Confirm restore`:`Restore `+e.snapshot(),` `)}}function oL(e,t){if(e&1&&(z(0,`p`,39),J(1),B()),e&2){let e=K(3);M(),Y(e.writesOff)}}function sL(e,t){if(e&1){let e=W();z(0,`button`,46),G(`click`,function(){let t=k(e).$implicit;return A(K(3).tab_.set(t.id))}),J(1),B()}if(e&2){let e=t.$implicit,n=K(3);R(`id`,`forms-tab-`+e.id),N(`aria-selected`,e.id===n.tab_())(`aria-controls`,`forms-panel-`+e.id)(`tabindex`,e.id===n.tab_()?0:-1),M(),X(` `,e.label,` `)}}function cL(e,t){if(e&1){let e=W();z(0,`label`)(1,`input`,15),G(`change`,function(){let t=k(e).$implicit;return A(K(4).toggleChip(t.id))}),B(),J(2),B()}if(e&2){let e=t.$implicit,n=K(4);M(),R(`checked`,n.active().has(e.id)),M(),X(` `,e.label,` `)}}function lL(e,t){if(e&1&&(z(0,`div`,6),J(1,` typed `),z(2,`code`),J(3),uv(4,`json`),B(),J(5,`, not in the model yet `),B()),e&2){let e=K(2).$implicit;M(3),Y(fv(4,1,e.node.uncommitted))}}function uL(e,t){if(e&1&&(z(0,`div`,6),J(1,` resets to `),z(2,`code`),J(3),uv(4,`json`),B()()),e&2){let e=K(2).$implicit;M(3),Y(fv(4,1,e.node.defaultValue))}}function dL(e,t){if(e&1&&(z(0,`code`),J(1),uv(2,`json`),B(),P(3,lL,6,3,`div`,6),P(4,uL,5,3,`div`,6)),e&2){let e=K().$implicit;M(),Y(fv(2,3,e.node.value)),M(2),F(e.node.uncommitted===void 0?-1:3),M(),F(e.node.defaultValue===void 0?-1:4)}}function fL(e,t){e&1&&(z(0,`span`,6),J(1,`not created yet`),B())}function pL(e,t){if(e&1&&(z(0,`span`,28),J(1),B()),e&2){let e=K().$implicit;N(`data-status`,e.node.status),M(),Y(e.node.status)}}function mL(e,t){e&1&&(z(0,`span`),J(1,`touched`),B())}function hL(e,t){if(e&1&&(z(0,`span`),J(1),B()),e&2){let e=K().$implicit;M(),Y(e.node.changed===!1?`dirty, unchanged`:`dirty`)}}function gL(e,t){if(e&1&&(z(0,`span`),J(1),B()),e&2){let e=K().$implicit;M(),X(`not validated (`,e.node.skipped,`)`)}}function _L(e,t){if(e&1&&(z(0,`span`,61),J(1),B()),e&2){let e=K().$implicit;M(),X(`stale: `,e.node.stale.join(`, `))}}function vL(e,t){e&1&&(z(0,`span`,61),J(1,`view out of sync`),B())}function yL(e,t){if(e&1&&(z(0,`span`),J(1),B()),e&2){let e=K().$implicit;M(),X(`redacted (`,e.node.redacted,`)`)}}function bL(e,t){e&1&&(z(0,`span`),J(1,`required`),B())}function xL(e,t){e&1&&(z(0,`span`),J(1,`readonly`),B())}function SL(e,t){e&1&&(z(0,`span`),J(1,`hidden`),B())}function CL(e,t){if(e&1&&(z(0,`span`),J(1),B()),e&2){let e=K().$implicit;M(),X(`updates on `,e.node.updateOn)}}function wL(e,t){e&1&&(z(0,`span`),J(1,`debouncing`),B())}function TL(e,t){e&1&&(z(0,`span`),J(1,`validators`),B())}function EL(e,t){e&1&&(z(0,`span`),J(1,`async validator`),B())}function DL(e,t){if(e&1&&(z(0,`span`),J(1),B()),e&2){let e=t.$implicit;M(),Y(e)}}function OL(e,t){if(e&1&&(z(0,`span`),J(1),B()),e&2){let e=K().$implicit;M(),Y(e.node.accessor)}}function kL(e,t){if(e&1&&(z(0,`span`),J(1),B()),e&2){let e=K().$implicit;M(),X(`name `,e.node.name)}}function AL(e,t){if(e&1&&(z(0,`span`),J(1),uv(2,`json`),B()),e&2){let e=t.$implicit;M(),X(`metadata `,fv(2,1,e))}}function jL(e,t){if(e&1&&(z(0,`span`),J(1),B()),e&2){let e=t.$implicit;M(),X(`disabled: `,e)}}function ML(e,t){if(e&1&&(z(0,`span`,64),J(1),B()),e&2){let e=K().$implicit;M(),X(`at `,e.params.path)}}function NL(e,t){if(e&1&&(z(0,`span`,64),J(1),B()),e&2){let e=K().$implicit,t=K(5);M(),Y(t.sourceText(e))}}function PL(e,t){if(e&1&&(z(0,`div`),J(1),z(2,`code`,45),J(3),B(),P(4,ML,2,1,`span`,64),P(5,NL,2,1,`span`,64),B()),e&2){let e=t.$implicit,n=K().$implicit,r=K(4);M(),X(` `,r.errorText(n.node,e),` `),M(2),Y(e.kind),M(),F(e.kind===`standardSchema`&&e.params?.path?4:-1),M(),F(e.source?5:-1)}}function FL(e,t){e&1&&(z(0,`div`,63),J(1,`not shown to the user`),B())}function IL(e,t){if(e&1&&(z(0,`tr`)(1,`td`,65),J(2),B()()),e&2){let e=K().$implicit;M(),C_(`padding-left`,28+e.depth*16,`px`),M(),Z(` `,e.node.truncated,` more fields under `,e.node.path||`the form`,` not shown `)}}function LL(e,t){if(e&1){let e=W();z(0,`tr`,54),G(`mouseenter`,function(){let t=k(e).$implicit,n=K(2);return A(K(2).highlight(n.id,t.node.path))})(`mouseleave`,function(){return k(e),A(K(4).highlight(null,``))}),z(1,`th`,55)(2,`button`,56),G(`focus`,function(){let t=k(e).$implicit,n=K(2);return A(K(2).highlight(n.id,t.node.path))})(`blur`,function(){return k(e),A(K(4).highlight(null,``))})(`click`,function(){let t=k(e).$implicit;return A(K(4).toggleField(t.node.path))}),J(3),B(),z(4,`span`,57),J(5),B()(),z(6,`td`,58),P(7,dL,5,5),B(),z(8,`td`,59),P(9,fL,2,0,`span`,6)(10,pL,2,2,`span`,28),B(),z(11,`td`,60),P(12,mL,2,0,`span`),P(13,hL,2,1,`span`),P(14,gL,2,1,`span`),P(15,_L,2,1,`span`,61),P(16,vL,2,0,`span`,61),P(17,yL,2,1,`span`),P(18,bL,2,0,`span`),P(19,xL,2,0,`span`),P(20,SL,2,0,`span`),P(21,CL,2,1,`span`),P(22,wL,2,0,`span`),P(23,TL,2,0,`span`),P(24,EL,2,0,`span`),I(25,DL,2,1,`span`,null,wg),P(27,OL,2,1,`span`),P(28,kL,2,1,`span`),I(29,AL,3,3,`span`,null,Cg),I(31,jL,2,1,`span`,null,Cg),B(),z(33,`td`,62),I(34,PL,6,4,`div`,null,Cg),P(36,FL,2,0,`div`,63),B()(),P(37,IL,3,4,`tr`)}if(e&2){let e=t.$implicit,n=K(4);q(`invalid`,e.node.errors.length),M(),C_(`padding-left`,12+e.depth*16,`px`),M(),N(`aria-label`,`Show details for `+(e.node.path||`the form`))(`aria-pressed`,e.node.path===n.fieldPath())(`title`,e.node.path||`(form)`),M(),X(` `,e.node.key||`(form)`,` `),M(2),Y(e.node.type),M(2),F(e.node.type===`control`?7:-1),M(2),F(e.node.materialized===!1?9:10),M(3),F(e.node.touched?12:-1),M(),F(e.node.dirty?13:-1),M(),F(e.node.skipped?14:-1),M(),F(e.node.stale?.length?15:-1),M(),F(e.node.dom?.drift===void 0?-1:16),M(),F(e.node.redacted?17:-1),M(),F(e.node.required?18:-1),M(),F(e.node.readonly?19:-1),M(),F(e.node.hidden?20:-1),M(),F(e.node.updateOn?21:-1),M(),F(e.node.debouncing?22:-1),M(),F(e.node.validators?.sync?23:-1),M(),F(e.node.validators?.async?24:-1),M(),L(n.constraintList(e.node)),M(2),F(e.node.accessor?27:-1),M(),F(e.node.name?28:-1),M(),L(e.node.metadata??av(28,UI)),M(2),L(e.node.disabledReasons??av(29,UI)),M(3),L(e.node.errors),M(2),F(e.node.errors.length&&e.node.dom?.errorShown===!1?36:-1),M(),F(e.node.truncated?37:-1)}}function RL(e,t){e&1&&J(0),e&2&&X(` No field path matches "`,K(5).filter(),`". `)}function zL(e,t){e&1&&J(0,` No field matches the selected filters. `)}function BL(e,t){if(e&1&&(z(0,`tr`)(1,`td`,66),P(2,RL,1,1)(3,zL,1,0),B()()),e&2){let e=K(4);M(2),F(e.filter()?2:3)}}function VL(e,t){if(e&1){let e=W();z(0,`app-forms-field-detail`,67),G(`closed`,function(){return k(e),A(K(4).closeField())}),B()}if(e&2){let e=K(2),n=K(2);R(`form`,e)(`node`,t)(`version`,n.version())(`rpc`,n.rpc())}}function HL(e,t){if(e&1){let e=W();z(0,`div`,47)(1,`input`,48),G(`input`,function(t){return k(e),A(K(3).onFilter(t))}),B(),z(2,`fieldset`,49)(3,`legend`,21),J(4,`Show only fields that are`),B(),I(5,cL,3,2,`label`,null,WI),B()(),z(7,`div`,50)(8,`table`,51)(9,`thead`)(10,`tr`)(11,`th`,52),J(12,`Field`),B(),z(13,`th`,52),J(14,`Value`),B(),z(15,`th`,52),J(16,`Status`),B(),z(17,`th`,52),J(18,`State`),B(),z(19,`th`,52),J(20,`Errors`),B()()(),z(21,`tbody`),I(22,LL,38,30,null,null,GI,!1,BL,4,1,`tr`),B()()(),P(25,VL,1,4,`app-forms-field-detail`,53)}if(e&2){let e,t=K(3);M(),R(`value`,t.filter()),M(4),L(t.chips),M(17),L(t.rows()),M(3),F((e=t.selectedNode())?25:-1,e)}}function UL(e,t){if(e&1){let e=W();V(0,`app-limit-note`,68),z(1,`app-forms-timeline`,69),G(`record`,function(t){return k(e),A(K(3).setRecording(t))}),B()}if(e&2){let e=K(3);R(`dropped`,e.droppedEvents())(`max`,e.maxEvents()),M(),R(`events`,e.selectedEvents())(`recording`,e.recording())}}function WL(e,t){if(e&1&&V(0,`app-forms-submit`,44),e&2){let e=K(),t=K(2);R(`formId`,e.id)(`version`,t.version())(`rpc`,t.rpc())}}function GL(e,t){if(e&1&&V(0,`app-forms-lint`,44),e&2){let e=K(),t=K(2);R(`formId`,e.id)(`version`,t.version())(`rpc`,t.rpc())}}function KL(e,t){if(e&1){let e=W();z(0,`section`,14)(1,`div`,25)(2,`h2`,23),J(3),B(),z(4,`p`,26),J(5),z(6,`code`),J(7),B()()(),z(8,`div`,27)(9,`span`,28),J(10),B(),z(11,`span`),J(12),B(),z(13,`span`),J(14),B(),P(15,tL,2,1,`span`),P(16,nL,2,0,`span`),z(17,`span`,29)(18,`b`),J(19),B(),J(20,` fields · `),z(21,`b`),J(22),B(),J(23,` errors`),B()(),P(24,iL,6,1,`details`,30),z(25,`div`,31)(26,`div`,32)(27,`button`,33),G(`click`,function(){return k(e),A(K(2).act(`touch-all`))}),J(28,` Touch all `),B(),z(29,`button`,33),G(`click`,function(){return k(e),A(K(2).act(`revalidate`))}),J(30,` Revalidate `),B(),z(31,`button`,7),G(`click`,function(){return k(e),A(K(2).act(`focus-first-invalid`))}),J(32,` Focus first invalid `),B(),z(33,`button`,7),G(`click`,function(){return k(e),A(K(2).pick())}),J(34,`Pick field on page`),B(),V(35,`span`,34),z(36,`button`,7),G(`click`,function(){return k(e),A(K(2).act(`snapshot`))}),J(37,`Snapshot`),B(),P(38,aL,2,6,`button`,35),V(39,`span`,36),z(40,`button`,37),G(`click`,function(){return k(e),A(K(2).confirmAct(`reset`))}),J(41),B(),z(42,`button`,38),G(`click`,function(){return k(e),A(K(2).confirmAct(`submit`))}),J(43),B()(),P(44,oL,2,1,`p`,39),z(45,`p`,40),J(46),B()(),z(47,`div`,41),G(`keydown`,function(t){return k(e),A(K(2).onKey(t))}),I(48,sL,2,5,`button`,42,WI),B(),z(50,`div`,43),P(51,HL,26,3)(52,UL,2,4)(53,WL,1,3,`app-forms-submit`,44)(54,GL,1,3,`app-forms-lint`,44),B()()}if(e&2){let e,n=t,r=K(2);M(3),Y(n.label),M(2),X(` `,r.kindLabel(n.kind),` · `),M(2),Y(n.id),M(2),N(`data-status`,n.root.status),M(),Y(n.root.status),M(2),Y(n.root.dirty?`dirty`:`pristine`),M(2),Y(n.root.touched?`touched`:`untouched`),M(),F(n.submitted===void 0?-1:15),M(),F(n.root.submitting?16:-1),M(3),Y(r.counts().get(n.id)?.fields),M(2),q(`has-errors`,r.counts().get(n.id)?.errors),M(),Y(r.counts().get(n.id)?.errors),M(2),F(n.errorSummary?.length?24:-1),M(3),R(`disabled`,!r.canWrite()),N(`aria-describedby`,r.canWrite()?null:`forms-writes-off`),M(2),R(`disabled`,!r.canWrite()),N(`aria-describedby`,r.canWrite()?null:`forms-writes-off`),M(9),F(r.snapshot()?38:-1),M(2),q(`armed`,r.armed()===`reset`),R(`disabled`,!r.canWrite()),N(`aria-describedby`,r.canWrite()?null:`forms-writes-off`),M(),X(` `,r.armed()===`reset`?`Confirm reset`:`Reset`,` `),M(),q(`armed`,r.armed()===`submit`),R(`disabled`,!r.canWrite()),N(`aria-describedby`,r.canWrite()?null:`forms-writes-off`),M(),X(` `,r.armed()===`submit`?`Confirm submit`:`Submit`,` `),M(),F(r.canWrite()?-1:44),M(2),Y(r.message()),M(2),L(r.tabs),M(2),R(`id`,`forms-panel-`+r.tab_()),N(`aria-labelledby`,`forms-tab-`+r.tab_()),M(),F((e=r.tab_())===`fields`?51:e===`timeline`?52:e===`submit`?53:e===`lint`?54:-1)}}function qL(e,t){if(e&1&&(z(0,`div`,3)(1,`div`,8)(2,`h2`,9),J(3,` Forms `),z(4,`span`,10),J(5),B()(),P(6,ZI,3,1,`label`,11),z(7,`ul`,12),I(8,$I,12,10,`li`,null,WI),B()(),P(10,eL,7,2,`section`,13)(11,KL,55,34,`section`,14),B()),e&2){let e,t=K();M(5),Y(t.visible().length),M(),F(t.hostPageId&&(t.allPages()||t.otherPages())?6:-1),M(2),L(t.visible()),M(2),F((e=t.missing())?10:(e=t.selected())?11:-1,e)}}var JL=[{id:`fields`,label:`Fields`},{id:`timeline`,label:`Timeline`},{id:`submit`,label:`Submit`},{id:`lint`,label:`Lint`}],YL=[{id:`invalid`,label:`Invalid`},{id:`dirty`,label:`Dirty`},{id:`touched`,label:`Touched`},{id:`disabled`,label:`Disabled`},{id:`hidden-error`,label:`Error not shown`}];function XL(e,t){switch(t){case`invalid`:return e.errors.length>0;case`dirty`:return e.dirty&&e.type===`control`;case`touched`:return e.touched&&e.type===`control`;case`disabled`:return e.status===`DISABLED`;case`hidden-error`:return e.dom?.errorShown===!1}}function ZL(e){return e.errors.length+(e.children??[]).reduce((e,t)=>e+ZL(t),0)}function QL(e){return e.children?e.children.reduce((e,t)=>e+QL(t),0):+(e.type===`control`&&e.materialized!==!1)}var $L=class e{rpc=$(null);focus=$(null);canWrite=Q(()=>nE(this.rpc(),`forms`));writesOff=HT(`forms`);focusHandled=Dv();forms=j([]);events=j([]);loading=j(!0);failed=j(!1);selectedId=j(null);selectedLabel=j(null);hostPageId=JT();allPages=j(!1);visible=Q(()=>{let e=this.forms(),t=this.hostPageId;return t&&!this.allPages()?e.filter(e=>nI(e.id)===t):e});otherPages=Q(()=>this.forms().some(e=>nI(e.id)!==this.hostPageId));instrumented=j([]);recording=Q(()=>{let e=this.selected()?.id??``;return this.instrumented().some(t=>e.endsWith(`@${t}`))});filter=j(``);tabs=JL;chips=YL;tab_=j(`fields`);active=j(new Set);fieldPath=j(null);version=j(0);message=j(``);armed=j(null);snapshot=j(null);unsubscribe=null;destroyRef=E(Cs);host=E(Ml);counts=Q(()=>new Map(this.visible().map(e=>[e.id,{fields:QL(e.root),errors:ZL(e.root)}])));selected=Q(()=>{let e=this.visible(),t=this.selectedId();if(t===null)return e[0]??null;let n=this.selectedLabel(),r=nI(t);return e.find(e=>e.id===t)??e.find(e=>e.label===n&&nI(e.id)===r)??e.find(e=>e.label===n)??null});missing=Q(()=>this.selectedId()!==null&&!this.selected()&&this.visible().length?this.selectedLabel()??this.selectedId():null);rows=Q(()=>{let e=this.selected();if(!e)return[];let t=this.filter().toLowerCase(),n=Array.from(this.active()),r=[],i=(e,a)=>{let o=r.length,s=(!t||e.path.toLowerCase().includes(t))&&n.every(t=>XL(e,t));for(let t of e.children??[])s=i(t,a+1)||s;return s&&r.splice(o,0,{node:e,depth:a}),s};return i(e.root,0),r});selectedNode=Q(()=>{let e=this.fieldPath(),t=this.selected();if(e===null||!t)return null;let n=t=>t.path===e?t:(t.children??[]).map(n).find(Boolean)??null;return n(t.root)});dropped=j({});droppedEvents=Q(()=>{let e=this.selected()?.id;return e?this.dropped()[nI(e)]??0:0});maxEvents=Q(()=>tE(this.rpc()).limits.formTimeline);selectedEvents=Q(()=>{let e=this.selected()?.id;return this.events().filter(t=>t.formId===e).slice(-200)});constructor(){uc(()=>{let e=this.rpc();e&&this.load(e)}),uc(()=>{let e=this.focus();e&&Sv(()=>{this.selectForm(e.id),this.focusHandled.emit()})}),this.destroyRef.onDestroy(()=>{this.unsubscribe?.(),this.highlight(null,``)})}async load(e){this.loading.set(!0),this.failed.set(!1);try{let t=await e.scope(`ng-devtools`).rpc.sharedState(`forms`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e;this.forms.set(t?.forms??[]),this.events.set(t?.events??[]),this.instrumented.set(t?.instrumented??[]),this.dropped.set(t?.dropped??{}),this.version.update(e=>e+1)};n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.failed.set(!0)}finally{this.loading.set(!1)}}retry(){let e=this.rpc();e&&this.load(e)}async pick(){let e=this.selected();if(!e)return;this.message.set(`Click a field in the app (Esc cancels).`);let t=await oI(this.rpc(),{action:`pick`,formId:e.id}),n=t;if(!t.ok||!n.formId){this.message.set(sI(t));return}this.selectForm(n.formId),this.tab_.set(`fields`),this.fieldPath.set(n.path??``),this.message.set(`Picked ${n.path||`(form)`}.`)}async setRecording(e){let t=this.selected();if(!t)return;let n=await oI(this.rpc(),{action:`instrument`,formId:t.id,value:e});this.message.set(sI(n))}selectForm(e){this.hostPageId&&nI(e)&&nI(e)!==this.hostPageId&&this.allPages.set(!0),this.selectedId.set(e),this.selectedLabel.set(this.forms().find(t=>t.id===e)?.label??null),this.filter.set(``),this.fieldPath.set(null),this.snapshot.set(null),this.armed.set(null)}toggleField(e){this.fieldPath.update(t=>t===e?null:e)}closeField(){let e=this.host.nativeElement,t=e.querySelector(`button.field[aria-pressed="true"]`)??e.querySelector(`.table-scroll`);this.fieldPath.set(null),t?.focus()}toggleChip(e){this.active.update(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})}async act(e,t={}){let n=this.selected();if(!n)return;this.armed.set(null);let r=await oI(this.rpc(),{action:e,formId:n.id,...t});r.snapshot&&this.snapshot.set(r.snapshot),this.message.set(sI(r))}confirmAct(e){if(this.armed()!==e){this.armed.set(e),this.message.set(`Press "Confirm ${e}" to ${e} the form in the app.`);return}this.act(e,{confirm:!0,snapshot:this.snapshot()??void 0})}onKey(e){let t=this.tabs.map(e=>e.id),n=t.indexOf(this.tab_()),r=n;if(e.key===`ArrowRight`)r=(n+1)%t.length;else if(e.key===`ArrowLeft`)r=(n-1+t.length)%t.length;else if(e.key===`Home`)r=0;else if(e.key===`End`)r=t.length-1;else return;e.preventDefault(),this.tab_.set(t[r]);let i=e.currentTarget;queueMicrotask(()=>i.querySelector(`#forms-tab-${t[r]}`)?.focus())}sourceText(e){let t=iI[e.source??``]??e.source??``;return e.from===void 0?t:`${t} on ${e.from||`the form`}`}onFilter(e){this.filter.set(e.target.value)}highlight(e,t){let n=this.rpc();n&&n.scope(`ng-devtools`).rpc.callEvent(`request-form-highlight`,e?{formId:e,path:t}:null)}kindLabel(e){return rI[e]}constraintList(e){return Object.entries(e.constraints??{}).map(([e,t])=>`${e} ${t}`)}errorText(e,t){return/^[a-z]/.test(t.message)?`${e.key||`The form`} ${t.message}`:t.message}static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-forms-inspector`]],inputs:{rpc:[1,`rpc`],focus:[1,`focus`]},outputs:{focusHandled:`focusHandled`},decls:6,vars:1,consts:[[`role`,`status`,1,`empty`],[`role`,`alert`,1,`empty`],[1,`empty`],[1,`layout`],[`aria-hidden`,`true`,1,`spinner`],[1,`empty-title`],[1,`muted`],[`type`,`button`,1,`small`,3,`click`],[1,`sidebar`],[`id`,`forms-list-heading`,1,`list-heading`],[1,`list-count`],[1,`page-toggle`],[`aria-labelledby`,`forms-list-heading`,1,`form-list`],[`aria-labelledby`,`forms-detail-title`,1,`detail`,`gone`],[`aria-labelledby`,`forms-detail-title`,1,`detail`],[`type`,`checkbox`,3,`change`,`checked`],[`type`,`button`,1,`form-item`,3,`click`],[`aria-hidden`,`true`,1,`dot`],[1,`label`],[1,`kind`],[1,`id`],[1,`sr-only`],[1,`count`],[`id`,`forms-detail-title`],[`role`,`status`,1,`muted`],[1,`detail-head`],[1,`detail-meta`],[1,`summary`],[1,`badge`],[1,`totals`],[1,`error-summary`],[1,`action-bar`],[`role`,`group`,`aria-label`,`Form actions`,1,`actions`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`aria-hidden`,`true`,1,`divider`],[`type`,`button`,1,`small`,3,`armed`,`disabled`],[`aria-hidden`,`true`,1,`spacer`],[`type`,`button`,1,`small`,`danger`,3,`click`,`disabled`],[`type`,`button`,1,`small`,`primary`,3,`click`,`disabled`],[`id`,`forms-writes-off`,1,`muted`],[`role`,`status`,1,`status`],[`role`,`tablist`,`aria-label`,`Form views`,1,`tabs`,3,`keydown`],[`type`,`button`,`role`,`tab`,3,`id`],[`role`,`tabpanel`,1,`panel`,3,`id`],[3,`formId`,`version`,`rpc`],[1,`kind-tag`],[`type`,`button`,`role`,`tab`,3,`click`,`id`],[1,`filters`],[`type`,`search`,`placeholder`,`Filter fields by path`,`aria-label`,`Filter fields by path`,`autocomplete`,`off`,`spellcheck`,`false`,1,`filter`,3,`input`,`value`],[1,`chips`],[`role`,`region`,`aria-label`,`Fields`,`tabindex`,`0`,1,`table-scroll`],[1,`fields`],[`scope`,`col`],[3,`form`,`node`,`version`,`rpc`],[3,`mouseenter`,`mouseleave`],[`scope`,`row`,1,`name`],[`type`,`button`,1,`field`,3,`focus`,`blur`,`click`],[1,`type`],[1,`value`],[1,`status-cell`],[1,`flags`],[1,`warn`],[1,`errors`],[1,`unseen`],[1,`source`],[`colspan`,`5`,1,`muted`,`truncated`],[`colspan`,`5`,1,`no-match`],[3,`closed`,`form`,`node`,`version`,`rpc`],[`what`,`form events on this page`,`limit`,`formTimeline`,3,`dropped`,`max`],[3,`record`,`events`,`recording`]],template:function(e,t){e&1&&P(0,KI,4,0,`div`,0)(1,qI,7,0,`div`,1)(2,JI,4,0,`div`,0)(3,YI,5,0,`div`,2)(4,XI,7,2,`div`,2)(5,qL,12,3,`div`,3),e&2&&F(t.rpc()?t.failed()?1:t.loading()?2:t.forms().length?t.visible().length?5:4:3:0)},dependencies:[mI,HI,CI,wI,oD,ib],styles:[`.muted[_ngcontent-%COMP%] { + color: var(--%NS%text-2); +} + +code[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); + font-size: 12.5px; +} + +.small[_ngcontent-%COMP%] { + display: inline-block; + max-width: 100%; + height: 34px; + padding: 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + font-weight: 500; + line-height: 32px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + cursor: pointer; + transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); +} + +.small[_ngcontent-%COMP%]:hover { + background: var(--%NS%surface-3); + border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%border-strong)); +} + +.small[_ngcontent-%COMP%]:active { + background: var(--%NS%border-strong); +} + +.small[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.small[_ngcontent-%COMP%]:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.small.primary[_ngcontent-%COMP%] { + background: var(--%NS%accent); + border-color: var(--%NS%accent); + color: var(--%NS%accent-ink); + font-weight: 600; +} + +.small.primary[_ngcontent-%COMP%]:hover { + background: var(--%NS%accent-hover); + border-color: var(--%NS%accent-hover); +} + +.small.danger[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 40%, transparent); + color: var(--%NS%danger); +} + +.small.danger[_ngcontent-%COMP%]:hover { + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + border-color: color-mix(in srgb, var(--%NS%danger) 55%, transparent); +} + +.small.armed[_ngcontent-%COMP%] { + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +.small.danger.armed[_ngcontent-%COMP%] { + background: var(--%NS%danger); + border-color: var(--%NS%danger); + color: #1f0707; + font-weight: 600; + box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent); +} + +.field-input[_ngcontent-%COMP%] { + min-width: 0; + height: 34px; + padding: 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%bg); + color: var(--%NS%text); + font-family: var(--%NS%font-mono); + font-size: 13px; + transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); +} + +.field-input[_ngcontent-%COMP%]::placeholder { + color: var(--%NS%text-3); + font-family: var(--%NS%font-sans); +} + +.field-input[_ngcontent-%COMP%]:hover { + border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%border-strong)); +} + +.field-input[_ngcontent-%COMP%]:focus, +.field-input[_ngcontent-%COMP%]:focus-visible { + outline: none; + border-color: var(--%NS%accent); + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +.explain[_ngcontent-%COMP%] { + margin: 0; + padding: 12px 16px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%bg); + color: var(--%NS%text); + font-family: var(--%NS%font-mono); + font-size: 12.5px; + line-height: 1.6; + white-space: pre-wrap; + overflow-wrap: anywhere; + tab-size: 2; +} + +.explain[aria-busy=true][_ngcontent-%COMP%] { + color: var(--%NS%text-3); +} + +.section-label[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.tag[_ngcontent-%COMP%] { + display: inline-block; + margin: 0; + padding: 1px 8px; + border: 1px solid var(--%NS%border); + border-radius: 99px; + background: var(--%NS%surface-2); + color: var(--%NS%text-2); + font-size: 11px; + font-weight: 500; + line-height: 18px; + white-space: nowrap; + font-variant-numeric: tabular-nums; +} + +.tag[data-tone=ok][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); + color: var(--%NS%ok); +} + +.tag[data-tone=warn][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); + background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); + color: var(--%NS%warn); +} + +.tag[data-tone=bad][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + color: var(--%NS%danger); +} + +.status[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-2); + font-size: 12.5px; + line-height: 1.5; + overflow-wrap: anywhere; +} + +.empty-state[_ngcontent-%COMP%] { + display: grid; + justify-items: center; + gap: 6px; + margin: 0; + padding: 40px 24px; + border: 1px dashed var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + color: var(--%NS%text-2); + font-size: 13px; + line-height: 1.5; + text-align: center; +} + +.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { + max-width: 52ch; + margin: 0; +} + +.empty-state[_ngcontent-%COMP%] .empty-title[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-size: 14px; + font-weight: 600; +} + +.spinner[_ngcontent-%COMP%] { + width: 16px; + height: 16px; + border: 2px solid var(--%NS%border-strong); + border-top-color: var(--%NS%accent); + border-radius: 50%; + animation: spin 0.8s linear infinite; +} + +[_nghost-%COMP%] { + display: block; +} + +.layout[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); + gap: 16px; + align-items: start; +} + +.sidebar[_ngcontent-%COMP%] { + min-width: 0; + padding: 8px; + background: var(--%NS%surface); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + animation: enter 0.35s var(--%NS%ease) both; +} + +.list-heading[_ngcontent-%COMP%] { + display: flex; + gap: 8px; + align-items: center; + margin: 4px 8px 8px; + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.list-count[_ngcontent-%COMP%] { + padding: 0 6px; + border-radius: 99px; + background: var(--%NS%surface-3); + color: var(--%NS%text-2); + font-size: 11px; + letter-spacing: 0; + line-height: 18px; + font-variant-numeric: tabular-nums; +} + +.form-list[_ngcontent-%COMP%] { + display: grid; + gap: 2px; + align-content: start; + margin: 0; + padding: 0; + list-style: none; +} + +.form-item[_ngcontent-%COMP%] { + width: 100%; + display: grid; + grid-template-columns: 8px minmax(0, 1fr) auto; + grid-template-areas: "dot label count" ". kind kind"; + gap: 2px 10px; + align-items: center; + padding: 8px 10px; + border: 0; + border-radius: var(--%NS%radius-sm); + background: transparent; + color: var(--%NS%text); + font: inherit; + text-align: left; + cursor: pointer; + transition: background-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); +} + +.form-item[_ngcontent-%COMP%]:hover { + background: var(--%NS%surface-2); +} + +.form-item[_ngcontent-%COMP%]:active { + background: var(--%NS%surface-3); +} + +.form-item.active[_ngcontent-%COMP%] { + background: var(--%NS%accent-soft); + box-shadow: inset 2px 0 0 var(--%NS%accent); + color: var(--%NS%text-strong); +} + +.form-item[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.form-item[_ngcontent-%COMP%] .dot[_ngcontent-%COMP%] { + grid-area: dot; +} + +.form-item[_ngcontent-%COMP%] .label[_ngcontent-%COMP%] { + grid-area: label; + min-width: 0; + overflow: hidden; + font-size: 13px; + font-weight: 500; + text-overflow: ellipsis; + white-space: nowrap; +} + +.form-item[_ngcontent-%COMP%] .kind[_ngcontent-%COMP%] { + grid-area: kind; + min-width: 0; + overflow: hidden; + color: var(--%NS%text-3); + font-size: 12px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.form-item[_ngcontent-%COMP%] .id[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); + font-size: 11.5px; +} + +.form-item.active[_ngcontent-%COMP%] .kind[_ngcontent-%COMP%] { + color: var(--%NS%text-2); +} + +.form-item[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] { + grid-area: count; + min-width: 20px; + padding: 0 7px; + border: 1px solid color-mix(in srgb, var(--%NS%danger) 30%, transparent); + border-radius: 99px; + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + color: var(--%NS%danger); + font-size: 11px; + font-weight: 600; + line-height: 18px; + text-align: center; + font-variant-numeric: tabular-nums; +} + +.dot[_ngcontent-%COMP%] { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--%NS%ok); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%ok) 15%, transparent); +} + +.dot[data-status=INVALID][_ngcontent-%COMP%] { + background: var(--%NS%danger); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 15%, transparent); +} + +.dot[data-status=PENDING][_ngcontent-%COMP%] { + background: var(--%NS%warn); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%warn) 15%, transparent); +} + +.dot[data-status=DISABLED][_ngcontent-%COMP%] { + background: var(--%NS%text-3); + box-shadow: none; +} + +.detail[_ngcontent-%COMP%] { + display: grid; + gap: 16px; + min-width: 0; + padding: 16px; + background: var(--%NS%surface); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + box-shadow: var(--%NS%shadow); + animation: enter 0.35s var(--%NS%ease) both; +} + +.detail-head[_ngcontent-%COMP%] { + display: grid; + gap: 4px; + min-width: 0; +} + +.detail-head[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-strong); + font-size: 16px; + font-weight: 600; + line-height: 1.3; + overflow-wrap: anywhere; +} + +.detail-meta[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-3); + font-size: 12px; + overflow-wrap: anywhere; +} + +.detail-meta[_ngcontent-%COMP%] code[_ngcontent-%COMP%] { + color: var(--%NS%text-2); + font-size: 11.5px; +} + +.gone[_ngcontent-%COMP%] { + justify-items: start; +} + +.gone[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-strong); + font-size: 16px; + font-weight: 600; + overflow-wrap: anywhere; +} + +.gone[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { + margin: 0; +} + +.page-toggle[_ngcontent-%COMP%] { + display: flex; + gap: 8px; + align-items: center; + min-height: 32px; + margin: 0 8px 8px; + color: var(--%NS%text-2); + font-size: 13px; + cursor: pointer; +} + +.page-toggle[_ngcontent-%COMP%] input[_ngcontent-%COMP%] { + width: 16px; + height: 16px; + margin: 0; + accent-color: var(--%NS%accent); +} + +.page-toggle[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.error-summary[_ngcontent-%COMP%] { + min-width: 0; + padding: 8px 12px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + font-size: 13px; +} + +.error-summary[_ngcontent-%COMP%] summary[_ngcontent-%COMP%] { + color: var(--%NS%text); + font-weight: 500; + cursor: pointer; +} + +.error-summary[_ngcontent-%COMP%] summary[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.error-summary[_ngcontent-%COMP%] ul[_ngcontent-%COMP%] { + display: grid; + gap: 4px; + margin: 8px 0 0; + padding: 0 0 0 16px; + color: var(--%NS%text); + overflow-wrap: anywhere; +} + +.error-summary[_ngcontent-%COMP%] .kind-tag[_ngcontent-%COMP%] { + margin-left: 6px; + color: var(--%NS%text-2); + font-size: 11px; +} + +.summary[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 6px; + align-items: center; + color: var(--%NS%text-2); + font-size: 12px; +} + +.summary[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]:not(.badge):not(.totals) { + padding: 0 10px; + border: 1px solid var(--%NS%border); + border-radius: 99px; + background: var(--%NS%surface-2); + color: var(--%NS%text); + line-height: 22px; +} + +.totals[_ngcontent-%COMP%] { + margin-left: auto; + color: var(--%NS%text-3); + font-variant-numeric: tabular-nums; +} + +.totals[_ngcontent-%COMP%] b[_ngcontent-%COMP%] { + color: var(--%NS%text); + font-weight: 600; +} + +.totals[_ngcontent-%COMP%] b.has-errors[_ngcontent-%COMP%] { + color: var(--%NS%danger); +} + +.badge[_ngcontent-%COMP%] { + display: inline-block; + padding: 0 8px; + border: 1px solid color-mix(in srgb, var(--%NS%ok) 30%, transparent); + border-radius: 99px; + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); + color: var(--%NS%ok); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.04em; + line-height: 20px; + white-space: nowrap; +} + +.summary[_ngcontent-%COMP%] > .badge[_ngcontent-%COMP%] { + line-height: 22px; +} + +.badge[data-status=INVALID][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + color: var(--%NS%danger); +} + +.badge[data-status=PENDING][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); + background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); + color: var(--%NS%warn); +} + +.badge[data-status=DISABLED][_ngcontent-%COMP%] { + border-color: var(--%NS%border-strong); + background: var(--%NS%surface-2); + color: var(--%NS%text-2); +} + +.action-bar[_ngcontent-%COMP%] { + display: flex; + flex-direction: column; + gap: 8px; + padding-bottom: 16px; + border-bottom: 1px solid var(--%NS%border); +} + +.actions[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: center; +} + +.divider[_ngcontent-%COMP%] { + width: 1px; + height: 20px; + background: var(--%NS%border-strong); +} + +.spacer[_ngcontent-%COMP%] { + flex: 1 1 0; +} + +.actions[_ngcontent-%COMP%] .small[_ngcontent-%COMP%]:not(.primary):not(.danger) { + max-width: 240px; +} + +.status[_ngcontent-%COMP%]:empty { + height: 0; + margin-top: -8px; +} + +.tabs[_ngcontent-%COMP%] { + display: inline-flex; + justify-self: start; + gap: 2px; + max-width: 100%; + height: 34px; + padding: 2px; + overflow-x: auto; + background: var(--%NS%bg); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); +} + +.tabs[_ngcontent-%COMP%] [role=tab][_ngcontent-%COMP%] { + flex: none; + height: 28px; + padding: 0 14px; + border: 0; + border-radius: 7px; + background: transparent; + color: var(--%NS%text-2); + font: inherit; + font-size: 13px; + font-weight: 500; + cursor: pointer; + transition: background-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); +} + +.tabs[_ngcontent-%COMP%] [role=tab][_ngcontent-%COMP%]:hover { + color: var(--%NS%text); + background: var(--%NS%surface-2); +} + +.tabs[_ngcontent-%COMP%] [role=tab][aria-selected=true][_ngcontent-%COMP%] { + background: var(--%NS%surface-3); + color: var(--%NS%text-strong); + box-shadow: inset 0 0 0 1px var(--%NS%border-strong); +} + +.tabs[_ngcontent-%COMP%] [role=tab][_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: -2px; +} + +.panel[_ngcontent-%COMP%] { + display: grid; + gap: 12px; + min-width: 0; + animation: enter 0.35s var(--%NS%ease) both; +} + +.filters[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 8px 12px; + align-items: center; +} + +.chips[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 6px; + min-width: 0; + margin: 0; + padding: 0; + border: 0; +} + +.chips[_ngcontent-%COMP%] label[_ngcontent-%COMP%] { + position: relative; + display: inline-flex; + align-items: center; + height: 28px; + padding: 0 12px; + border: 1px solid var(--%NS%border); + border-radius: 99px; + background: var(--%NS%surface-2); + color: var(--%NS%text-2); + font-size: 12px; + font-weight: 500; + white-space: nowrap; + cursor: pointer; + user-select: none; + transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease); +} + +.chips[_ngcontent-%COMP%] label[_ngcontent-%COMP%]:hover { + color: var(--%NS%text); + border-color: var(--%NS%border-strong); +} + +.chips[_ngcontent-%COMP%] input[_ngcontent-%COMP%] { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + margin: 0; + opacity: 0; + cursor: pointer; +} + +.chips[_ngcontent-%COMP%] label[_ngcontent-%COMP%]:has(input:checked) { + border-color: var(--%NS%accent-line); + background: var(--%NS%accent-soft); + color: var(--%NS%accent); +} + +.chips[_ngcontent-%COMP%] label[_ngcontent-%COMP%]:has(input:focus-visible) { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.filter[_ngcontent-%COMP%] { + flex: 1 1 220px; + min-width: 0; + height: 34px; + padding: 0 12px 0 34px; + background-color: var(--%NS%bg); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e99' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: 12px center; + background-size: 14px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); +} + +.filter[_ngcontent-%COMP%]::placeholder { + color: var(--%NS%text-3); +} + +.filter[_ngcontent-%COMP%]:hover { + border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%border-strong)); +} + +.filter[_ngcontent-%COMP%]:focus, +.filter[_ngcontent-%COMP%]:focus-visible { + outline: none; + border-color: var(--%NS%accent); + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +.table-scroll[_ngcontent-%COMP%] { + overflow-x: auto; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); +} + +.table-scroll[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.fields[_ngcontent-%COMP%] { + width: 100%; + min-width: 680px; + border-collapse: collapse; + font-size: 13px; +} + +.fields[_ngcontent-%COMP%] th[_ngcontent-%COMP%], +.fields[_ngcontent-%COMP%] td[_ngcontent-%COMP%] { + padding: 8px 12px; + border-bottom: 1px solid var(--%NS%border); + text-align: left; + vertical-align: top; + line-height: 20px; +} + +.fields[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child > *[_ngcontent-%COMP%] { + border-bottom: 0; +} + +.fields[_ngcontent-%COMP%] thead[_ngcontent-%COMP%] th[_ngcontent-%COMP%] { + background: var(--%NS%surface-2); + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.06em; + line-height: 16px; + text-transform: uppercase; + white-space: nowrap; +} + +.fields[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] th[_ngcontent-%COMP%] { + color: var(--%NS%text); + font-weight: 500; + white-space: nowrap; +} + +.fields[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] { + transition: background-color 150ms var(--%NS%ease); +} + +.fields[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover { + background: var(--%NS%surface-2); +} + +.fields[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr.invalid[_ngcontent-%COMP%] > th[_ngcontent-%COMP%] { + box-shadow: inset 2px 0 0 color-mix(in srgb, var(--%NS%danger) 60%, transparent); +} + +.fields[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:has(.field[aria-pressed=true]) { + background: var(--%NS%accent-soft); +} + +.fields[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:has(.field[aria-pressed=true]) > th[_ngcontent-%COMP%] { + box-shadow: inset 2px 0 0 var(--%NS%accent); + color: var(--%NS%text-strong); +} + +.name[_ngcontent-%COMP%] { + max-width: 280px; +} + +.field[_ngcontent-%COMP%] { + display: inline-block; + max-width: 200px; + padding: 0; + overflow: hidden; + border: none; + border-radius: 4px; + background: none; + color: inherit; + font-family: var(--%NS%font-mono); + font-size: 12.5px; + font-weight: 500; + line-height: 20px; + text-align: left; + text-overflow: ellipsis; + vertical-align: top; + white-space: nowrap; + cursor: pointer; + transition: color 150ms var(--%NS%ease); +} + +.field[_ngcontent-%COMP%]:hover { + color: var(--%NS%accent-hover); + text-decoration: underline; + text-underline-offset: 3px; +} + +.field[aria-pressed=true][_ngcontent-%COMP%] { + color: var(--%NS%accent); +} + +.field[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.type[_ngcontent-%COMP%] { + margin-left: 8px; + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 400; + vertical-align: top; +} + +.value[_ngcontent-%COMP%] { + min-width: 140px; + max-width: 320px; +} + +.value[_ngcontent-%COMP%] code[_ngcontent-%COMP%], +.errors[_ngcontent-%COMP%] code[_ngcontent-%COMP%] { + color: #fde68a; + overflow-wrap: anywhere; +} + +.value[_ngcontent-%COMP%] .muted[_ngcontent-%COMP%] { + margin-top: 2px; + font-size: 12px; +} + +.status-cell[_ngcontent-%COMP%] { + white-space: nowrap; +} + +.flags[_ngcontent-%COMP%] { + min-width: 160px; +} + +.flags[_ngcontent-%COMP%] span[_ngcontent-%COMP%] { + display: inline-block; + margin: 0 4px 4px 0; + padding: 0 8px; + border: 1px solid var(--%NS%border); + border-radius: 99px; + background: var(--%NS%surface-2); + color: var(--%NS%text-2); + font-size: 11px; + line-height: 18px; + white-space: nowrap; +} + +.flags[_ngcontent-%COMP%] span.warn[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); + background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); + color: var(--%NS%warn); +} + +.errors[_ngcontent-%COMP%] { + min-width: 180px; +} + +.errors[_ngcontent-%COMP%] div[_ngcontent-%COMP%] { + color: var(--%NS%danger); + overflow-wrap: anywhere; +} + +.errors[_ngcontent-%COMP%] div[_ngcontent-%COMP%] + div[_ngcontent-%COMP%] { + margin-top: 4px; +} + +.errors[_ngcontent-%COMP%] .kind-tag[_ngcontent-%COMP%] { + margin-left: 6px; + color: var(--%NS%text-3); + font-size: 11px; +} + +.source[_ngcontent-%COMP%] { + margin-left: 6px; + color: var(--%NS%text-2); + font-size: 11px; +} + +.errors[_ngcontent-%COMP%] .unseen[_ngcontent-%COMP%] { + color: var(--%NS%warn); + font-size: 11px; +} + +.truncated[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 12px; + font-style: italic; +} + +.fields[_ngcontent-%COMP%] .no-match[_ngcontent-%COMP%] { + padding: 24px 12px; + color: var(--%NS%text-2); + text-align: center; +} + +.empty[_ngcontent-%COMP%] { + display: grid; + justify-items: center; + gap: 8px; + margin: 0; + padding: 48px 24px; + background: var(--%NS%surface); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + color: var(--%NS%text-2); + font-size: 13px; + line-height: 1.5; + text-align: center; + animation: enter 0.35s var(--%NS%ease) both; +} + +.empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { + max-width: 52ch; + margin: 0; +} + +.empty[_ngcontent-%COMP%] .small[_ngcontent-%COMP%] { + margin-top: 8px; +} + +.empty-title[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-size: 15px; + font-weight: 600; +} + +@media (max-width: 720px) { + .layout[_ngcontent-%COMP%] { + grid-template-columns: minmax(0, 1fr); + } + .form-list[_ngcontent-%COMP%] { + max-height: 240px; + overflow-y: auto; + } +} +@media (max-width: 480px) { + .detail[_ngcontent-%COMP%] { + padding: 12px; + } + .totals[_ngcontent-%COMP%] { + flex-basis: 100%; + margin-left: 0; + } + .spacer[_ngcontent-%COMP%], + .divider[_ngcontent-%COMP%] { + display: none; + } +}`]})},eR=(e,t)=>t.file+t.name,tR=(e,t)=>t.file+`:`+t.line,nR=(e,t)=>t.name;function rR(e,t){e&1&&(z(0,`p`,13),fs(),z(1,`svg`,26),V(2,`circle`,27)(3,`path`,28),B(),ps(),z(4,`span`),J(5),B()()),e&2&&(M(5),Y(t))}function iR(e,t){if(e&1&&(z(0,`p`,13),fs(),z(1,`svg`,26),V(2,`circle`,27)(3,`path`,28),B(),ps(),z(4,`span`)(5,`strong`),J(6),B(),J(7,` Pipe prototypes are patched in the inspected page to count calls and keep the last input and output. Stop recording when you are done. `),B()()),e&2){let e=K();M(6),X(`Recording on `,e.instrumentedPages().length,` page(s).`)}}function aR(e,t){e&1&&(z(0,`div`,14),V(1,`span`,29),z(2,`p`,30),J(3,`Scanning pipes…`),B()())}function oR(e,t){if(e&1){let e=W();z(0,`div`,15)(1,`p`,30),J(2,`Couldn't load pipes`),B(),z(3,`p`,31),J(4,`The devtools server did not answer. Check that it is running.`),B(),z(5,`button`,32),G(`click`,function(){return k(e),A(K().refresh())}),J(6,`Try again`),B()()}}function sR(e,t){e&1&&(z(0,`div`,16)(1,`p`,30),J(2,`No pipes found`),B(),z(3,`p`,31),J(4,` No @Pipe classes were found in the source, and no template uses a built-in pipe yet. `),B()())}function cR(e,t){e&1&&(z(0,`span`,43),J(1,`stale?`),B())}function lR(e,t){if(e&1&&(z(0,`span`,44),J(1),B()),e&2){K();let e=iv(0);M(),X(``,e.instanceCount,` live`)}}function uR(e,t){e&1&&(z(0,`span`,45),J(1,`built-in`),B())}function dR(e,t){e&1&&(z(0,`span`,45),J(1,`NgModule`),B())}function fR(e,t){if(e&1&&(z(0,`span`,47),J(1),B()),e&2){let e=K().$implicit;M(),X(`+`,(e.usageCount??1)-1,` more`)}}function pR(e,t){if(e&1){let e=W();nv(0),z(1,`li`)(2,`button`,38),G(`click`,function(){let t=k(e).$implicit;return A(K(3).select(t))})(`mouseenter`,function(){k(e);let t=iv(0);return A(K(3).highlightPipe(t))})(`mouseleave`,function(){return k(e),A(K(3).highlight(null))})(`focus`,function(){k(e);let t=iv(0);return A(K(3).highlightPipe(t))})(`blur`,function(){return k(e),A(K(3).highlight(null))}),z(3,`span`,39)(4,`span`,40),J(5),B(),z(6,`span`,41),J(7),B()(),z(8,`span`,42),P(9,cR,2,0,`span`,43),P(10,lR,2,1,`span`,44),P(11,uR,2,0,`span`,45),P(12,dR,2,0,`span`,45),z(13,`span`,45),J(14),B()(),z(15,`span`,46),J(16),P(17,fR,2,1,`span`,47),B()()()}if(e&2){let e=t.$implicit,n=K(3),r=rv(n.liveFor(e.name));M(2),q(`selected`,n.isSelected(e)),N(`aria-current`,n.isSelected(e)||null),M(3),Y(e.name),M(2),Y(e.className),M(2),F(r?.stale?9:-1),M(),F(r?10:-1),M(),F(e.builtin?11:-1),M(),F(e.isStandalone?-1:12),M(),q(`impure`,!e.isPure),M(),Y(e.isPure?`pure`:`impure`),M(2),Z(` `,e.file,`:`,e.line,` `),M(),F(e.builtin&&(e.usageCount??0)>1?17:-1)}}function mR(e,t){if(e&1){let e=W();z(0,`ul`,37),G(`keydown`,function(t){return k(e),A(K(2).onListKey(t))}),I(1,pR,18,16,`li`,null,eR),B()}if(e&2){let e=K(2);M(),L(e.filtered())}}function hR(e,t){e&1&&J(0),e&2&&X(` Nothing matches “`,K(3).filter().trim(),`” in this view. `)}function gR(e,t){e&1&&J(0,` None of the pipes fit this filter. `)}function _R(e,t){if(e&1){let e=W();z(0,`div`,35)(1,`p`,30),J(2,`No pipes match`),B(),z(3,`p`,31),P(4,hR,1,1)(5,gR,1,0),B(),z(6,`button`,32),G(`click`,function(){return k(e),A(K(2).clearFilters())}),J(7,`Clear filters`),B()()}if(e&2){let e=K(2);M(4),F(e.filter().trim()?4:5)}}function vR(e,t){e&1&&(z(0,`span`,45),J(1,`built-in`),B())}function yR(e,t){if(e&1&&(z(0,`dt`),J(1,`File`),B(),z(2,`dd`,51),J(3),B()),e&2){let e=K();M(3),Z(``,e.file,`:`,e.line)}}function bR(e,t){if(e&1&&(z(0,`li`,51),J(1),B()),e&2){let e=t.$implicit;M(),Z(``,e.file,`:`,e.line)}}function xR(e,t){if(e&1&&(z(0,`div`,50)(1,`h3`),J(2,` Used in templates `),z(3,`span`,21),J(4),B()(),z(5,`ul`,53),I(6,bR,2,2,`li`,51,tR),B()()),e&2){let e=K();M(4),Y(e.usageCount),M(2),L(e.usages)}}function SR(e,t){e&1&&(z(0,`p`,54)(1,`span`,43),J(2,`experimental`),B(),J(3,` This pure pipe got an argument whose contents changed while its reference stayed the same, so it may be showing a stale value. `),B())}function CR(e,t){if(e&1){let e=W();z(0,`button`,59),G(`click`,function(){let t=k(e);return A(K(5).highlight(t,!0))})(`mouseenter`,function(){let t=k(e);return A(K(5).highlight(t))})(`mouseleave`,function(){return k(e),A(K(5).highlight(null))})(`focus`,function(){let t=k(e);return A(K(5).highlight(t))})(`blur`,function(){return k(e),A(K(5).highlight(null))}),z(1,`span`,51),J(2),B(),z(3,`span`,60),J(4),B()()}if(e&2){let e=K().$implicit;N(`aria-label`,`Highlight `+e.name+` on the page`),M(2),Y(e.name),M(2),Y(e.count)}}function wR(e,t){if(e&1&&(z(0,`span`,58)(1,`span`,51),J(2),B(),z(3,`span`,60),J(4),B()()),e&2){let e=K().$implicit;M(2),Y(e.name),M(2),Y(e.count)}}function TR(e,t){if(e&1&&(z(0,`li`),P(1,CR,5,3,`button`,57)(2,wR,5,2,`span`,58),B()),e&2){let e,n=t.$implicit;M(),F((e=n.targets?.[0])?1:2,e)}}function ER(e,t){if(e&1&&(z(0,`li`,61),J(1),z(2,`span`,62),J(3),B()()),e&2){let e=t.$implicit,n=K(6);M(),Z(` `,n.describe(e.lastArgs),` → `,n.describe(e.lastResult),` `),M(2),X(``,e.callCount,`×`)}}function DR(e,t){if(e&1&&(z(0,`dt`),J(1,`Per instance`),B(),z(2,`dd`)(3,`ul`,53),I(4,ER,4,3,`li`,61,Cg),B()()),e&2){let e=K();M(4),L(e.instances)}}function OR(e,t){if(e&1&&(z(0,`dt`),J(1,`Last caller`),B(),z(2,`dd`,61),J(3),B()),e&2){let e=K();M(3),Y(e.lastCaller)}}function kR(e,t){if(e&1&&(z(0,`dt`),J(1,`Calls`),B(),z(2,`dd`),J(3),B(),z(4,`dt`),J(5,`Last input`),B(),z(6,`dd`,61),J(7),B(),z(8,`dt`),J(9,`Last output`),B(),z(10,`dd`,61),J(11),B(),P(12,DR,6,0),P(13,OR,4,1)),e&2){let e=t,n=K(4);M(3),Y(e.callCount),M(4),Y(n.describe(e.lastArgs)),M(4),Y(n.describe(e.lastResult)),M(),F(e.instances?.length?12:-1),M(),F(e.lastCaller?13:-1)}}function AR(e,t){e&1&&(z(0,`dt`),J(1,`Calls`),B(),z(2,`dd`,63),J(3,`None recorded yet.`),B())}function jR(e,t){e&1&&(z(0,`p`,56),J(1,`Turn on “Record calls” to see call counts and values.`),B())}function MR(e,t){if(e&1&&(P(0,SR,4,0,`p`,54),z(1,`dl`)(2,`dt`),J(3,`Instances`),B(),z(4,`dd`),J(5),B(),z(6,`dt`),J(7,`Used by`),B(),z(8,`dd`)(9,`ul`,55),I(10,TR,3,1,`li`,null,nR),B()(),P(12,kR,14,5)(13,AR,4,0),B(),P(14,jR,2,0,`p`,56)),e&2){let e,n=t,r=K(3);F(n.stale?0:-1),M(5),Y(n.instanceCount),M(5),L(n.components),M(2),F((e=n.call)?12:r.instrumenting()?13:-1,e),M(2),F(!n.call&&!r.instrumenting()?14:-1)}}function NR(e,t){e&1&&(z(0,`p`,52),J(1,` Not in use on the connected page. Open a view that uses it, or connect the app. `),B())}function PR(e,t){if(e&1&&(z(0,`header`,48)(1,`h2`,49),J(2),B(),z(3,`span`,45),J(4),B(),P(5,vR,2,0,`span`,45),B(),z(6,`div`,50)(7,`h3`),J(8,`Declaration`),B(),z(9,`dl`)(10,`dt`),J(11,`Class`),B(),z(12,`dd`,51),J(13),B(),z(14,`dt`),J(15,`Source`),B(),z(16,`dd`),J(17),B(),P(18,yR,4,2),z(19,`dt`),J(20,`Standalone`),B(),z(21,`dd`),J(22),B(),z(23,`dt`),J(24,`Pure`),B(),z(25,`dd`),J(26),B()()(),P(27,xR,8,1,`div`,50),z(28,`div`,50)(29,`h3`),J(30,`Live on the page`),B(),P(31,MR,15,4)(32,NR,2,0,`p`,52),B()),e&2){let e,n=t,r=K(2);M(2),Y(n.name),M(),q(`impure`,!n.isPure),M(),Y(n.isPure?`pure`:`impure`),M(),F(n.builtin?5:-1),M(8),Y(n.className),M(4),Y(n.builtin?`@angular/common`:`This project`),M(),F(n.builtin?-1:18),M(4),Y(n.isStandalone?`Yes`:`No, declared in an NgModule`),M(4),X(` `,n.isPure?`Yes, reruns only when an input changes`:`No, reruns on every check`,` `),M(),F(n.builtin&&n.usages?.length?27:-1),M(4),F((e=r.liveFor(n.name))?31:32,e)}}function FR(e,t){e&1&&(z(0,`h2`,64),J(1,`Pipe details`),B(),z(2,`div`,65)(3,`p`,30),J(4,`Pick a pipe`),B(),z(5,`p`,31),J(6,` See where it is declared, which components use it and what it last returned. `),B()())}function IR(e,t){if(e&1&&(z(0,`div`,17)(1,`div`,33),P(2,mR,3,0,`ul`,34)(3,_R,8,1,`div`,35),B(),z(4,`section`,36),P(5,PR,33,12)(6,FR,7,0),B()()),e&2){let e,t=K();M(2),F(t.filtered().length?2:3),M(3),F((e=t.selected())?5:6,e)}}function LR(e,t){if(e&1){let e=W();z(0,`button`,73),G(`click`,function(){let t=k(e);return A(K(3).highlight(t))})(`focus`,function(){let t=k(e);return A(K(3).highlight(t))})(`blur`,function(){return k(e),A(K(3).highlight(null))}),J(1),B()}if(e&2){let e=K().$implicit;N(`aria-label`,`Highlight `+e.component+` on the page`),M(),X(` `,e.component,` `)}}function RR(e,t){if(e&1&&(z(0,`span`,71),J(1),B()),e&2){let e=K().$implicit;M(),Y(e.component)}}function zR(e,t){e&1&&(z(0,`span`,45),J(1,`no source`),B())}function BR(e,t){e&1&&(z(0,`span`,43),J(1,`duplicate subscription`),B())}function VR(e,t){e&1&&(z(0,`span`,43),J(1,`resubscribing`),B())}function HR(e,t){if(e&1){let e=W();z(0,`li`,69),G(`mouseenter`,function(){let t=k(e).$implicit;return A(K(2).highlight(t.target))})(`mouseleave`,function(){return k(e),A(K(2).highlight(null))}),P(1,LR,2,2,`button`,70)(2,RR,2,1,`span`,71),P(3,zR,2,0,`span`,45),P(4,BR,2,0,`span`,43),P(5,VR,2,0,`span`,43),z(6,`span`,72),J(7),B()()}if(e&2){let e,n=t.$implicit;M(),F((e=n.target)?1:2,e),M(2),F(n.hasSource?-1:3),M(),F(n.duplicate?4:-1),M(),F(n.resubscribing?5:-1),M(2),Y(n.latestValue??`no value yet`)}}function UR(e,t){if(e&1&&(z(0,`section`,18)(1,`h2`,66),J(2,` Async subscriptions `),z(3,`span`,21),J(4),B()(),z(5,`p`,56),J(6,` Each `),z(7,`span`,51),J(8,`| async`),B(),J(9,` subscribes on its own. Two on the same source mean the work runs twice. A source that changes on every check, like `),z(10,`span`,51),J(11,`getData() | async`),B(),J(12,`, resubscribes each time. `),B(),z(13,`ul`,67),I(14,HR,8,5,`li`,68,Cg),B()()),e&2){let e=K();M(4),Y(e.async().length),M(10),L(e.async())}}function WR(e,t){e&1&&(z(0,`span`,21),J(1),B()),e&2&&(M(),Y(t.length))}function GR(e,t){e&1&&(z(0,`p`,22),J(1,`Couldn't run the lint check. Try Refresh.`),B())}function KR(e,t){e&1&&(z(0,`p`,23),J(1,`Checking…`),B())}function qR(e,t){e&1&&(z(0,`p`,24),J(1,`No problems found.`),B())}function JR(e,t){if(e&1&&(z(0,`li`,74)(1,`div`,75)(2,`span`,76),J(3),B(),z(4,`code`,77),J(5),B(),z(6,`span`,78),J(7),B()(),z(8,`p`,79),J(9),B(),z(10,`p`,80)(11,`span`,81),J(12,`Fix`),B(),J(13),B()()),e&2){let e=t.$implicit;M(2),N(`data-tone`,e.severity),M(),Y(e.severity),M(2),Y(e.rule),M(2),Y_(``,e.pipe,` · `,e.file,`:`,e.line),M(2),Y(e.message),M(4),X(` `,e.fix)}}function YR(e,t){if(e&1&&(z(0,`ul`,25),I(1,JR,14,8,`li`,74,Cg),B()),e&2){let e=K();M(),L(e.lint())}}var XR=5e3,ZR=[{value:`all`,label:`All pipes`},{value:`custom`,label:`Custom`},{value:`builtin`,label:`Built-in`},{value:`impure`,label:`Impure`},{value:`live`,label:`On the page`}],QR=class e{destroyRef=E(Cs);host=E(Ml);rpc=$(null);kindOptions=ZR;pipes=j([]);filter=j(``);kind=j(`all`);loading=j(!1);loadFailed=j(!1);selected=j(null);live=j([]);async=j([]);lint=j(null);lintFailed=j(!1);instrumentedPages=j([]);instrumenting=Q(()=>this.instrumentedPages().length>0);pendingRecord=j(null);recordMessage=j(null);recordLabel=Q(()=>{let e=this.pendingRecord();return e===null?this.instrumenting()?`Stop recording`:`Record calls`:e?`Starting…`:`Stopping…`});pendingTimer;liveByName=Q(()=>new Map(this.live().map(e=>[e.name,e])));filtered=Q(()=>{let e=this.filter().trim().toLowerCase(),t=this.kind()??`all`,n=this.liveByName();return this.pipes().filter(r=>t===`custom`&&r.builtin||t===`builtin`&&!r.builtin||t===`impure`&&r.isPure||t===`live`&&!n.has(r.name)?!1:!e||r.name.toLowerCase().includes(e)||r.className.toLowerCase().includes(e)||r.file.toLowerCase().includes(e))});unsubscribe;constructor(){uc(()=>{let e=this.rpc();e&&(this.refresh(),this.loadLive(e))}),this.destroyRef.onDestroy(()=>{this.unsubscribe?.(),clearTimeout(this.pendingTimer),this.highlight(null)})}async refresh(){let e=this.rpc();if(e){this.loading.set(!0),this.loadFailed.set(!1);try{let t=await e.scope(`ng-devtools`).rpc.call(`get-pipes`);this.pipes.set(t);let n=this.selected();if(n){let e=t.find(e=>e.name===n.name&&e.file===n.file);this.selected.set(e??null)}}catch{this.loadFailed.set(!0)}finally{this.loading.set(!1)}this.loadLint(e)}}async loadLint(e){this.lintFailed.set(!1);try{let t=await e.scope(`ng-devtools`).rpc.call(`pipe-lint`);this.lint.set(t)}catch{this.lintFailed.set(!0)}}async loadLive(e){try{let t=await e.scope(`ng-devtools`).rpc.sharedState(`pipe-usage`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e;this.live.set(t?.pipes??[]),this.async.set(t?.async??[]);let n=t?.instrumented??[];this.instrumentedPages.set(n),this.pendingRecord()===n.length>0&&this.settleRecord(null)};n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{}}async toggleInstrument(){let e=this.rpc();if(!e||this.pendingRecord()!==null)return;let t=!this.instrumenting();this.recordMessage.set(null),this.pendingRecord.set(t);let n;try{n=await e.scope(`ng-devtools`).rpc.call(`request-instrument-pipes`,t)}catch{this.settleRecord(`Couldn't reach the devtools server. Try again.`);return}if(this.pendingRecord()===t){if(n?.pages===0){this.settleRecord(`No page is connected. Open your app in the browser with the devtools running, then record again.`);return}clearTimeout(this.pendingTimer),this.pendingTimer=setTimeout(()=>{this.pendingRecord()===t&&this.settleRecord(t?`No page confirmed recording. Reload the app and try again.`:`No page confirmed it stopped recording. Reload the app to stop it.`)},XR)}}settleRecord(e){clearTimeout(this.pendingTimer),this.pendingRecord.set(null),e!==null&&this.recordMessage.set(e)}liveFor(e){return this.liveByName().get(e)}describe(e){if(Array.isArray(e))return e.map(e=>this.describe(e)).join(`, `);if(typeof e==`string`)return e.length>80?`${e.slice(0,80)}…`:e;try{let t=JSON.stringify(e);return t&&t.length>120?`${t.slice(0,120)}…`:t??String(e)}catch{return String(e)}}isSelected(e){let t=this.selected();return t!==null&&t.name===e.name&&t.file===e.file}select(e){this.selected.set(this.isSelected(e)?null:e)}clearFilters(){this.filter.set(``),this.kind.set(`all`)}highlightPipe(e){this.highlight(e?.components.find(e=>e.targets?.length)?.targets?.[0])}highlight(e,t=!1){let n=this.rpc();n&&n.scope(`ng-devtools`).rpc.call(`request-page-highlight`,e?{...e,...t?{reveal:t}:{}}:null).catch(()=>{})}onListKey(e){if(![`ArrowDown`,`ArrowUp`,`Home`,`End`].includes(e.key))return;let t=Array.from(this.host.nativeElement.querySelectorAll(`[data-pipe-row]`));if(!t.length)return;let n=t.indexOf(document.activeElement),r=n;r=e.key===`ArrowDown`?Math.min(n+1,t.length-1):e.key===`ArrowUp`?Math.max(n-1,0):e.key===`Home`?0:t.length-1,e.preventDefault(),t[r]?.focus()}static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-pipes-inspector`]],inputs:{rpc:[1,`rpc`]},decls:32,vars:18,consts:[[1,`intro`],[1,`toolbar`],[1,`search`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`search-icon`],[`cx`,`11`,`cy`,`11`,`r`,`7`],[`d`,`m20 20-3.5-3.5`],[`type`,`search`,`placeholder`,`Find a pipe, class or file…`,`aria-label`,`Find a pipe, class or file`,`autocomplete`,`off`,`spellcheck`,`false`,3,`input`,`keydown.escape`,`value`],[`ariaLabel`,`Show pipes`,3,`valueChange`,`options`,`value`],[`aria-live`,`polite`,1,`total`],[1,`actions`],[`type`,`button`,3,`click`,`disabled`],[`type`,`button`,1,`record`,3,`click`],[`aria-hidden`,`true`,1,`rec-dot`],[`role`,`status`,1,`notice`],[`role`,`status`,1,`state`],[`role`,`alert`,1,`state`],[1,`state`],[1,`layout`],[`aria-labelledby`,`async-title`,1,`section`],[`aria-labelledby`,`lint-title`,1,`section`],[`id`,`lint-title`],[1,`pill`],[`role`,`alert`,1,`empty-line`],[`role`,`status`,1,`empty-line`],[1,`empty-line`,`ok`],[1,`findings`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`cx`,`12`,`cy`,`12`,`r`,`9`],[`d`,`M12 11v5M12 8h.01`],[`aria-hidden`,`true`,1,`spinner`],[1,`state-title`],[1,`state-hint`],[`type`,`button`,3,`click`],[1,`list-wrap`],[`aria-label`,`Pipes`,1,`pipe-list`],[`role`,`status`,1,`state`,`compact`],[`id`,`pipe-detail`,`aria-labelledby`,`pipe-detail-title`,1,`detail`],[`aria-label`,`Pipes`,1,`pipe-list`,3,`keydown`],[`type`,`button`,`data-pipe-row`,``,`aria-controls`,`pipe-detail`,1,`row`,3,`click`,`mouseenter`,`mouseleave`,`focus`,`blur`],[1,`row-main`],[1,`name`,`mono`],[1,`sub`,`mono`],[1,`row-meta`],[1,`chip`,`warn`],[1,`chip`,`live`],[1,`chip`],[1,`row-file`,`mono`],[1,`more`],[1,`detail-head`],[`id`,`pipe-detail-title`,1,`mono`],[1,`block`],[1,`mono`],[1,`empty-line`],[1,`sites`],[`role`,`note`,1,`warning`],[1,`chips`],[1,`hint`],[`type`,`button`,1,`component`],[1,`component`],[`type`,`button`,1,`component`,3,`click`,`mouseenter`,`mouseleave`,`focus`,`blur`],[1,`count`],[1,`mono`,`value`],[1,`calls`],[1,`muted`],[`id`,`pipe-detail-title`,1,`visually-hidden`],[1,`state`,`compact`],[`id`,`async-title`],[1,`async-list`],[1,`async-row`],[1,`async-row`,3,`mouseenter`,`mouseleave`],[`type`,`button`,1,`component-name`,`mono`],[1,`mono`,`component-name`],[1,`mono`,`value`,`latest`],[`type`,`button`,1,`component-name`,`mono`,3,`click`,`focus`,`blur`],[1,`finding`],[1,`finding-head`],[1,`severity`],[1,`mono`,`rule`],[1,`where`,`mono`],[1,`finding-message`],[1,`finding-fix`],[1,`fix-label`]],template:function(e,t){if(e&1&&(z(0,`p`,0),J(1,` Pipes declared in your source and the built-in pipes your templates use. Live data shows which components use each pipe on the page; turn on recording to capture calls and the last input and output. `),B(),z(2,`div`,1)(3,`div`,2),fs(),z(4,`svg`,3),V(5,`circle`,4)(6,`path`,5),B(),ps(),z(7,`input`,6),G(`input`,function(e){return t.filter.set(e.target.value)})(`keydown.escape`,function(){return t.filter.set(``)}),B()(),z(8,`app-select`,7),ev(`valueChange`,function(e){return $_(t.kind,e)||(t.kind=e),e}),B(),z(9,`span`,8),J(10),B(),z(11,`div`,9)(12,`button`,10),G(`click`,function(){return t.refresh()}),J(13,`Refresh`),B(),z(14,`button`,11),G(`click`,function(){return t.toggleInstrument()}),V(15,`span`,12),J(16),B()()(),P(17,rR,6,1,`p`,13),P(18,iR,8,1,`p`,13),P(19,aR,4,0,`div`,14)(20,oR,7,0,`div`,15)(21,sR,5,0,`div`,16)(22,IR,7,2,`div`,17),P(23,UR,16,1,`section`,18),z(24,`section`,19)(25,`h2`,20),J(26,` Lint `),P(27,WR,2,1,`span`,21),B(),P(28,GR,2,0,`p`,22)(29,KR,2,0,`p`,23)(30,qR,2,0,`p`,24)(31,YR,3,0,`ul`,25),B()),e&2){let e,n;M(7),R(`value`,t.filter()),M(),R(`options`,t.kindOptions),Q_(`value`,t.kind),M(2),Z(``,t.filtered().length,` of `,t.pipes().length),M(2),R(`disabled`,t.loading()),M(2),q(`on`,t.instrumenting()),N(`aria-pressed`,t.instrumenting())(`aria-busy`,t.pendingRecord()!==null)(`aria-disabled`,t.pendingRecord()!==null),M(2),X(` `,t.recordLabel(),` `),M(),F((e=t.recordMessage())?17:-1,e),M(),F(t.instrumenting()?18:-1),M(),F(t.loading()&&t.pipes().length===0?19:t.loadFailed()&&t.pipes().length===0?20:t.pipes().length===0?21:22),M(4),F(t.async().length>0?23:-1),M(4),F((n=t.lint())?27:-1,n),M(),F(t.lintFailed()?28:t.lint()===null?29:t.lint().length?31:30)}},dependencies:[XE],styles:[`[_nghost-%COMP%] { + display: block; + color: var(--%NS%text); + font-size: 13px; +} + +.mono[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); +} + +.intro[_ngcontent-%COMP%] { + max-width: 720px; + margin: 0 0 12px; + color: var(--%NS%text-2); + line-height: 1.5; +} + +.toolbar[_ngcontent-%COMP%] { + position: sticky; + top: 0; + z-index: 2; + display: flex; + flex-wrap: wrap; + gap: 8px 12px; + align-items: center; + margin: 0 0 12px; + padding: 8px; + background: color-mix(in srgb, var(--%NS%surface) 85%, transparent); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); +} + +.search[_ngcontent-%COMP%] { + position: relative; + flex: 1 1 220px; + min-width: 0; +} + +.search-icon[_ngcontent-%COMP%] { + position: absolute; + top: 50%; + left: 12px; + width: 14px; + height: 14px; + transform: translateY(-50%); + fill: none; + stroke: var(--%NS%text-3); + stroke-width: 2.2; + stroke-linecap: round; + pointer-events: none; +} + +.search[_ngcontent-%COMP%]:focus-within .search-icon[_ngcontent-%COMP%] { + stroke: var(--%NS%accent); +} + +input[type=search][_ngcontent-%COMP%] { + width: 100%; + height: var(--%NS%control-h); + padding: 0 12px 0 34px; + background: var(--%NS%bg); + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + color: var(--%NS%text); + font-size: 13px; + transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); +} + +input[type=search][_ngcontent-%COMP%]::placeholder { + color: var(--%NS%text-3); +} + +input[type=search][_ngcontent-%COMP%]:focus-visible { + outline: none; + border-color: var(--%NS%accent); + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +.toolbar[_ngcontent-%COMP%] app-select[_ngcontent-%COMP%] { + width: 150px; +} + +.total[_ngcontent-%COMP%] { + flex: none; + color: var(--%NS%text-2); + font-size: 12px; + white-space: nowrap; + font-variant-numeric: tabular-nums; +} + +.actions[_ngcontent-%COMP%] { + display: flex; + gap: 8px; + margin-left: auto; +} + +button[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + height: var(--%NS%control-h); + padding: 0 14px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + color: var(--%NS%text); + font: inherit; + font-weight: 500; + white-space: nowrap; + cursor: pointer; + transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease); +} + +button[_ngcontent-%COMP%]:hover:not(:disabled) { + border-color: var(--%NS%accent-line); + background: var(--%NS%surface-3); +} + +button[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +button[_ngcontent-%COMP%]:disabled { + cursor: default; + opacity: 0.6; +} + +.record[aria-busy=true][_ngcontent-%COMP%] { + cursor: progress; +} + +.rec-dot[_ngcontent-%COMP%] { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--%NS%text-3); +} + +.record.on[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent); + background: color-mix(in srgb, var(--%NS%accent) 12%, transparent); + color: var(--%NS%accent); +} + +.record.on[_ngcontent-%COMP%] .rec-dot[_ngcontent-%COMP%] { + background: var(--%NS%accent); + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +.notice[_ngcontent-%COMP%] { + display: flex; + align-items: flex-start; + gap: 8px; + margin: 0 0 12px; + padding: 10px 12px; + border: 1px solid var(--%NS%accent-line); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%accent-soft); + color: var(--%NS%text-2); + line-height: 1.5; + animation: enter 0.2s var(--%NS%ease) both; +} + +.notice[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-weight: 600; +} + +.notice[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] { + flex: none; + width: 16px; + height: 16px; + margin-top: 2px; + fill: none; + stroke: var(--%NS%accent); + stroke-width: 2; + stroke-linecap: round; +} + +.layout[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: 12px; + align-items: start; +} + +@media (min-width: 880px) { + .layout[_ngcontent-%COMP%] { + grid-template-columns: minmax(0, 1fr) minmax(340px, 44%); + } + .detail[_ngcontent-%COMP%] { + position: sticky; + top: 64px; + max-height: calc(100vh - 150px); + overflow: auto; + } +} +.list-wrap[_ngcontent-%COMP%] { + min-width: 0; +} + +.pipe-list[_ngcontent-%COMP%] { + display: grid; + gap: 2px; + margin: 0; + padding: 6px; + list-style: none; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + animation: enter 0.35s var(--%NS%ease) both; +} + +.row[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: 2px 12px; + width: 100%; + height: auto; + padding: 8px 10px; + border: 0; + border-radius: var(--%NS%radius-sm); + background: none; + text-align: left; + font-weight: 400; + white-space: normal; +} + +.row[_ngcontent-%COMP%]:hover:not(:disabled) { + border-color: transparent; + background: var(--%NS%surface-2); +} + +.row[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: -2px; +} + +.row.selected[_ngcontent-%COMP%] { + background: var(--%NS%accent-soft); + box-shadow: inset 2px 0 0 var(--%NS%accent); +} + +.row-main[_ngcontent-%COMP%] { + display: flex; + align-items: baseline; + gap: 8px; + min-width: 0; +} + +.name[_ngcontent-%COMP%] { + flex: none; + color: var(--%NS%text-strong); + font-size: 13px; + font-weight: 600; +} + +.sub[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 12px; + overflow: hidden; + min-width: 0; + text-overflow: ellipsis; + white-space: nowrap; +} + +.row-meta[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + justify-content: flex-end; + gap: 4px; +} + +.row-file[_ngcontent-%COMP%] { + grid-column: 1/-1; + color: var(--%NS%text-3); + font-size: 11px; + overflow-wrap: anywhere; +} + +.more[_ngcontent-%COMP%] { + margin-left: 6px; + color: var(--%NS%text-2); +} + +.chip[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + height: 18px; + padding: 0 7px; + border: 1px solid var(--%NS%border-strong); + border-radius: 99px; + color: var(--%NS%text-2); + font-size: 10px; + font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; + white-space: nowrap; +} + +.chip.impure[_ngcontent-%COMP%], +.chip.warn[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); + background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); + color: var(--%NS%warn); +} + +.chip.live[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); + color: var(--%NS%ok); +} + +.pill[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 18px; + height: 16px; + padding: 0 5px; + border-radius: 99px; + background: var(--%NS%surface-3); + color: var(--%NS%text-2); + font-size: 10px; + font-weight: 600; + letter-spacing: 0; + font-variant-numeric: tabular-nums; +} + +.detail[_ngcontent-%COMP%] { + min-width: 0; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + animation: enter 0.35s var(--%NS%ease) both; +} + +.detail-head[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px 10px; + padding: 14px 16px; + border-bottom: 1px solid var(--%NS%border); +} + +.detail-head[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] { + flex: 1 1 auto; + min-width: 0; + margin: 0; + color: var(--%NS%text-strong); + font-size: 15px; + font-weight: 600; + overflow-wrap: anywhere; +} + +.block[_ngcontent-%COMP%] { + padding: 14px 16px; + border-bottom: 1px solid var(--%NS%border); +} + +.block[_ngcontent-%COMP%]:last-child { + border-bottom: 0; +} + +h3[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + display: flex; + align-items: center; + gap: 6px; + margin: 0 0 10px; +} + +dl[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + gap: 6px 14px; + margin: 0; +} + +dt[_ngcontent-%COMP%] { + color: var(--%NS%text-3); +} + +dd[_ngcontent-%COMP%] { + min-width: 0; + margin: 0; + color: var(--%NS%text); +} + +.value[_ngcontent-%COMP%] { + font-size: 12px; + overflow-wrap: anywhere; +} + +.muted[_ngcontent-%COMP%] { + color: var(--%NS%text-2); +} + +.sites[_ngcontent-%COMP%] { + display: grid; + gap: 4px; + margin: 0; + padding: 0; + list-style: none; + color: var(--%NS%text-2); + font-size: 12px; + overflow-wrap: anywhere; +} + +.calls[_ngcontent-%COMP%] { + margin-left: 6px; + color: var(--%NS%text-3); +} + +.chips[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin: 0; + padding: 0; + list-style: none; +} + +.component[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + gap: 6px; + height: 24px; + padding: 0 4px 0 10px; + border: 1px solid var(--%NS%border-strong); + border-radius: 99px; + background: var(--%NS%bg); + font-size: 12px; + transition: border-color 150ms var(--%NS%ease), background-color 150ms var(--%NS%ease); +} + +button.component[_ngcontent-%COMP%] { + height: 24px; + padding: 0 4px 0 10px; + border-radius: 99px; + background: var(--%NS%bg); + font-size: 12px; + font-weight: 400; +} + +.count[_ngcontent-%COMP%] { + padding: 0 6px; + border-radius: 99px; + background: var(--%NS%surface-3); + color: var(--%NS%text-2); + font-size: 10px; + line-height: 16px; + font-variant-numeric: tabular-nums; +} + +.warning[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + align-items: baseline; + gap: 8px; + margin: 0 0 12px; + padding: 8px 10px; + border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent); + border-radius: var(--%NS%radius-sm); + background: color-mix(in srgb, var(--%NS%warn) 8%, transparent); + color: var(--%NS%text); + line-height: 1.5; +} + +.hint[_ngcontent-%COMP%] { + margin: 8px 0 0; + color: var(--%NS%text-3); + font-size: 12px; +} + +.empty-line[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-2); + line-height: 1.5; +} + +.empty-line.ok[_ngcontent-%COMP%] { + color: var(--%NS%ok); +} + +.section[_ngcontent-%COMP%] { + margin-top: 20px; + animation: enter 0.35s var(--%NS%ease) both; +} + +.section[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + display: flex; + align-items: center; + gap: 8px; + margin: 0 0 8px; +} + +.section[_ngcontent-%COMP%] > .hint[_ngcontent-%COMP%] { + margin: -2px 0 10px; +} + +.async-list[_ngcontent-%COMP%], +.findings[_ngcontent-%COMP%] { + display: grid; + gap: 6px; + margin: 0; + padding: 0; + list-style: none; +} + +.async-row[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 6px 8px; + min-width: 0; + padding: 8px 12px; + border-radius: var(--%NS%radius-sm); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease); +} + +.async-row[_ngcontent-%COMP%]:hover { + border-color: var(--%NS%border-strong); + background: var(--%NS%surface-2); +} + +.component-name[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-weight: 600; +} + +button.component-name[_ngcontent-%COMP%] { + height: 24px; + padding: 0 8px; + margin-left: -8px; + border-color: transparent; + background: none; + font-size: 13px; +} + +.latest[_ngcontent-%COMP%] { + flex: 1 1 100%; + color: var(--%NS%text-2); +} + +.finding[_ngcontent-%COMP%] { + padding: 10px 12px; + border-radius: var(--%NS%radius-sm); + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); +} + +.finding-head[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 6px 8px; +} + +.severity[_ngcontent-%COMP%] { + padding: 0 7px; + border: 1px solid var(--%NS%border-strong); + border-radius: 99px; + color: var(--%NS%text-2); + font-size: 10px; + font-weight: 700; + letter-spacing: 0.06em; + line-height: 16px; + text-transform: uppercase; +} + +.severity[data-tone=warning][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); + background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); + color: var(--%NS%warn); +} + +.severity[data-tone=error][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + color: var(--%NS%danger); +} + +.rule[_ngcontent-%COMP%] { + color: var(--%NS%accent); + font-size: 12px; +} + +.where[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + overflow-wrap: anywhere; +} + +.finding-message[_ngcontent-%COMP%] { + margin: 6px 0 0; + color: var(--%NS%text); + line-height: 1.5; +} + +.finding-fix[_ngcontent-%COMP%] { + margin: 4px 0 0; + color: var(--%NS%text-2); + line-height: 1.5; +} + +.fix-label[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + margin-right: 4px; +} + +.state[_ngcontent-%COMP%] { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + padding: 40px 16px; + text-align: center; + background: var(--%NS%surface); + border: 1px dashed var(--%NS%border-strong); + border-radius: var(--%NS%radius); + animation: enter 0.35s var(--%NS%ease) both; +} + +.state.compact[_ngcontent-%COMP%] { + padding: 28px 16px; + border: 0; + background: none; +} + +.list-wrap[_ngcontent-%COMP%] .state.compact[_ngcontent-%COMP%] { + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); +} + +.state-title[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-strong); + font-size: 14px; + font-weight: 600; +} + +.state-hint[_ngcontent-%COMP%] { + max-width: 440px; + margin: 0; + color: var(--%NS%text-2); + line-height: 1.5; +} + +.state[_ngcontent-%COMP%] button[_ngcontent-%COMP%] { + margin-top: 8px; +} + +.spinner[_ngcontent-%COMP%] { + width: 20px; + height: 20px; + border: 2px solid var(--%NS%border-strong); + border-top-color: var(--%NS%accent); + border-radius: 50%; + animation: spin 0.8s linear infinite; +} + +@media (prefers-reduced-motion: reduce) { + .spinner[_ngcontent-%COMP%] { + animation: none; + } +}`]})},$R=()=>[],ez=()=>[`/`],tz=(e,t)=>t.id,nz=(e,t)=>t.route.id,rz=(e,t)=>t[0],iz=(e,t)=>t.file+t.method,az=(e,t)=>t.path,oz=(e,t)=>t.mode,sz=(e,t)=>t.file,cz=(e,t)=>t.rule;function lz(e,t){e&1&&(z(0,`div`,0),V(1,`span`,2),z(2,`span`),J(3,`Reading the project…`),B()())}function uz(e,t){e&1&&(z(0,`div`,1)(1,`h2`,3),J(2,`This app is not an Analog app.`),B(),z(3,`p`,4),J(4,` Add `),z(5,`code`),J(6,`ngDevtools()`),B(),J(7,` from `),z(8,`code`),J(9,`@santoshyadavdev/ng-devtools/vite`),B(),J(10,` next to `),z(11,`code`),J(12,`analog()`),B(),J(13,` in vite.config.ts and run the Analog dev server. `),B()())}function dz(e,t){if(e&1&&(z(0,`div`,9)(1,`span`,7),J(2,`Open in the browser`),B(),z(3,`span`,13),J(4),B()()),e&2){let e=t;M(3),R(`title`,e.url),M(),Y(e.url)}}function fz(e,t){if(e&1){let e=W();z(0,`button`,14),G(`click`,function(){let t=k(e).$implicit;return A(K(2).view.set(t.id))}),J(1),z(2,`span`,15),J(3),B()()}if(e&2){let e=t.$implicit,n=K(2);R(`id`,`analog-tab-`+e.id),N(`aria-selected`,e.id===n.view())(`aria-controls`,`analog-panel-`+e.id)(`tabindex`,e.id===n.view()?0:-1),M(),X(` `,e.label,` `),M(),N(`data-tone`,e.tone),M(),Y(e.count)}}function pz(e,t){e&1&&(z(0,`div`,24),J(1),B()),e&2&&(M(),Y(t))}function mz(e,t){if(e&1&&(z(0,`li`)(1,`span`,29),J(2),B(),z(3,`span`,32),J(4),B()()),e&2){let e=t.$implicit,n=K(5);M(2),Y(n.short(e.file)??e.fullPath),M(),N(`data-kind`,e.kind),M(),Y(e.kind)}}function hz(e,t){if(e&1&&(z(0,`span`,33),J(1),B()),e&2){let e=t.$implicit;M(),Z(``,e[0],` = `,e[1])}}function gz(e,t){if(e&1&&(z(0,`div`,31),I(1,hz,2,2,`span`,33,rz),B()),e&2){let e=K(2),t=K(3);M(),L(t.paramList(e.match.params))}}function _z(e,t){if(e&1&&(z(0,`strong`,29),J(1),B(),J(2,` renders `),z(3,`ol`,30),I(4,mz,5,3,`li`,null,tz),B(),P(6,gz,3,0,`div`,31)),e&2){let e=K(),t=K(3);M(),Y(e.url),M(3),L(e.match.chain),M(2),F(t.paramList(e.match.params).length?6:-1)}}function vz(e,t){if(e&1&&(z(0,`li`)(1,`span`,29),J(2),B(),z(3,`span`,4),J(4),B()()),e&2){let e=t.$implicit,n=K(6);M(2),Y(n.short(e.file)??e.path),M(2),Y(e.reason)}}function yz(e,t){if(e&1&&(z(0,`ul`,34),I(1,vz,5,2,`li`,null,Cg),B()),e&2){let e=K(2);M(),L(e.match.rejected.slice(0,5))}}function bz(e,t){if(e&1&&(z(0,`strong`,29),J(1),B(),J(2,` matches no file route. Angular throws NG04002 "Cannot match any routes". `),P(3,yz,3,0,`ul`,34)),e&2){let e=K();M(),Y(e.url),M(2),F(e.match.rejected.length?3:-1)}}function xz(e,t){if(e&1&&(z(0,`div`,25),P(1,_z,7,2)(2,bz,4,2),B()),e&2){let e=t;N(`data-tone`,e.match.matched?`good`:`bad`),M(),F(e.match.matched?1:2)}}function Sz(e,t){e&1&&(z(0,`span`,36),J(1,`└`),B())}function Cz(e,t){e&1&&(z(0,`span`,38),J(1,`open`),B())}function wz(e,t){if(e&1&&(z(0,`span`,39)(1,`span`,43),J(2),B(),J(3),B()),e&2){let e=K().$implicit,t=K(3);M(2),Y(t.dir(e.route.file)),M(),Y(t.base(e.route.file))}}function Tz(e,t){e&1&&(z(0,`span`,4),J(1,`folder only`),B())}function Ez(e,t){if(e&1&&(z(0,`span`,41),J(1),B()),e&2){let e=t.$implicit;M(),X(``,e,`()`)}}function Dz(e,t){if(e&1&&(z(0,`span`,42),J(1),B()),e&2){let e=K().$implicit;M(),X(`"`,e.route.title,`"`)}}function Oz(e,t){if(e&1&&(z(0,`span`,33),J(1),B()),e&2){let e=K().$implicit;M(),Y(e)}}function kz(e,t){if(e&1&&P(0,Oz,2,1,`span`,33),e&2){let e=t.$implicit;F(e===`title`?-1:0)}}function Az(e,t){if(e&1&&(z(0,`tr`)(1,`td`)(2,`div`,35),P(3,Sz,2,0,`span`,36),z(4,`span`,37),J(5),B(),z(6,`span`,32),J(7),B(),P(8,Cz,2,0,`span`,38),B()(),z(9,`td`),P(10,wz,4,2,`span`,39)(11,Tz,2,0,`span`,4),B(),z(12,`td`)(13,`div`,40),I(14,Ez,2,1,`span`,41,wg),B()(),z(16,`td`),P(17,Dz,2,1,`span`,42),I(18,kz,1,1,null,null,wg),B()()),e&2){let e=t.$implicit,n=K(3);q(`open`,n.isOpen(e.route))(`dim`,e.route.kind===`group`||e.route.kind===`implicit`),M(2),C_(`padding-left`,e.depth*16,`px`),M(),F(e.depth?3:-1),M(2),Y(e.route.fullPath),M(),N(`data-kind`,e.route.kind),M(),Y(n.kindText(e.route)),M(),F(n.isOpen(e.route)?8:-1),M(2),F(e.route.file?10:11),M(4),L(n.serverExports(e.route)),M(3),F(e.route.title?17:-1),M(),L(e.route.routeMeta??av(13,$R))}}function jz(e,t){e&1&&J(0,` No route matches the filter. Try part of a path or a file name. `)}function Mz(e,t){e&1&&J(0,` No file routes yet. Add a .page.ts file under src/app/pages. `)}function Nz(e,t){if(e&1&&(z(0,`tr`)(1,`td`,44),P(2,jz,1,0)(3,Mz,1,0),B()()),e&2){let e=K(3);M(2),F(e.filter().trim()?2:3)}}function Pz(e,t){if(e&1){let e=W();z(0,`div`,16)(1,`form`,17),G(`submit`,function(t){k(e);let n=K(2);return t.preventDefault(),A(n.explain())}),z(2,`label`,18),J(3,`Test a URL`),B(),z(4,`input`,19),G(`input`,function(t){return k(e),A(K(2).testUrl.set(t.target.value))}),B(),z(5,`button`,20),J(6),B()(),z(7,`label`,21),J(8,`Filter routes`),B(),z(9,`input`,22),G(`input`,function(t){return k(e),A(K(2).filter.set(t.target.value))}),B()(),z(10,`div`,23),P(11,pz,2,1,`div`,24)(12,xz,3,2,`div`,25),B(),z(13,`div`,26)(14,`table`)(15,`thead`)(16,`tr`)(17,`th`,27),J(18,`Route`),B(),z(19,`th`,27),J(20,`File`),B(),z(21,`th`,27),J(22,`Data`),B(),z(23,`th`,27),J(24,`Route meta`),B()()(),z(25,`tbody`),I(26,Az,20,14,`tr`,28,nz,!1,Nz,4,1,`tr`),B()()()}if(e&2){let e,t=K(2);M(4),R(`value`,t.testUrl()),M(),R(`disabled`,t.explaining()),M(),X(` `,t.explaining()?`Explaining…`:`Explain`,` `),M(3),R(`value`,t.filter()),M(2),F((e=t.explainError())?11:(e=t.explained())?12:-1,e),M(15),L(t.routeRows())}}function Fz(e,t){if(e&1&&(z(0,`span`,29),J(1),B(),J(2)),e&2){let e=t.$implicit,n=t.$index,r=t.$count;M(),Y(e),M(),X(``,n===r-1?``:`, `,` `)}}function Iz(e,t){if(e&1&&(z(0,`div`,45)(1,`strong`),J(2,`load() ran twice`),B(),J(3,` for `),I(4,Fz,3,2,null,null,wg),J(6,` : once while server rendering, again in the browser. TransferState did not serve the server result. `),B()),e&2){let e=K(3);M(4),L(e.duplicates())}}function Lz(e,t){if(e&1&&(z(0,`span`,29),J(1),B(),J(2)),e&2){let e=t.$implicit,n=t.$index,r=t.$count;M(),Y(e),M(),X(``,n===r-1?``:`, `,` `)}}function Rz(e,t){if(e&1&&(z(0,`div`,45)(1,`strong`),J(2,`Server function read ran twice`),B(),J(3,`: `),I(4,Lz,3,2,null,null,wg),J(6,` ran while server rendering, then again in the browser. The browser did not use the TransferState seed. `),B()),e&2){let e=K(3);M(4),L(e.refetchedFns())}}function zz(e,t){if(e&1){let e=W();z(0,`label`)(1,`input`,63),G(`change`,function(){let t=k(e).$implicit;return A(K(3).kind.set(t))}),B(),J(2),z(3,`span`,4),J(4),B()()}if(e&2){let e=t.$implicit,n=K(3);q(`on`,n.kind()===e),M(),R(`checked`,n.kind()===e),M(),X(` `,n.kindLabel(e),` `),M(2),Y(n.kindCount(e))}}function Bz(e,t){if(e&1&&(z(0,`strong`,68),J(1),B(),z(2,`span`,71),J(3),B()),e&2){let e=t,n=K(5);M(),Y(e.name),M(2),Y(n.short(e.file))}}function Vz(e,t){if(e&1&&(z(0,`span`,68),J(1),B()),e&2){let e=K().$implicit;M(),Y(e.url)}}function Hz(e,t){e&1&&(z(0,`span`,32),J(1,`ran during server rendering`),B())}function Uz(e,t){if(e&1&&J(0),e&2){let e=K(2).$implicit;X(` to `,e.location,` `)}}function Wz(e,t){if(e&1&&(z(0,`span`,32),J(1),P(2,Uz,1,1),B()),e&2){let e=K().$implicit,t=K(4);N(`data-tone`,t.outcomeTone(e.outcome)),M(),X(``,t.outcomeLabel(e.outcome),` `),M(),F(e.location?2:-1)}}function Gz(e,t){if(e&1&&(z(0,`span`,32),J(1),B()),e&2){let e=K().$implicit;N(`data-mode`,e.render===`ssr`?`ssr`:`client`),M(),Y(e.render===`ssr`?`server rendered`:`client only`)}}function Kz(e,t){if(e&1&&(z(0,`details`)(1,`summary`),J(2,`Response`),B(),z(3,`pre`,72),J(4),B()()),e&2){let e=K().$implicit,t=K(4);M(4),Y(t.pretty(e.preview))}}function qz(e,t){e&1&&(z(0,`span`,4),J(1,`in process`),B())}function Jz(e,t){if(e&1&&J(0),e&2){let e=K().$implicit;X(` `,e.ms,` ms `)}}function Yz(e,t){if(e&1&&(z(0,`tr`)(1,`td`,65),J(2),B(),z(3,`td`)(4,`span`,32),J(5),B()(),z(6,`td`,66)(7,`div`,40)(8,`span`,67),J(9),B(),P(10,Bz,4,2)(11,Vz,2,1,`span`,68),P(12,Hz,2,0,`span`,32),P(13,Wz,3,3,`span`,32),P(14,Gz,2,2,`span`,32),B(),P(15,Kz,5,1,`details`),B(),z(16,`td`)(17,`span`,69),J(18),B()(),z(19,`td`,70),P(20,qz,2,0,`span`,4)(21,Jz,1,1),B(),z(22,`td`,4),J(23),B()()),e&2){let e,n=t.$implicit,r=K(4);M(2),Y(r.time(n.at)),M(2),N(`data-call`,n.kind),M(),Y(r.kindLabel(n.kind)),M(3),N(`data-method`,n.method),M(),Y(n.method),M(),F((e=r.fnOf(n))?10:11,e),M(2),F(n.seeded?12:-1),M(),F(n.outcome?13:-1),M(),F(n.render?14:-1),M(),F(n.preview?15:-1),M(2),N(`data-status`,r.statusClass(n.status)),M(),Y(n.status),M(2),F(n.seeded?20:21),M(3),Y(n.from)}}function Xz(e,t){if(e&1&&(z(0,`div`,51)(1,`table`)(2,`thead`)(3,`tr`)(4,`th`,27),J(5,`At`),B(),z(6,`th`,27),J(7,`Kind`),B(),z(8,`th`,27),J(9,`Request`),B(),z(10,`th`,27),J(11,`Status`),B(),z(12,`th`,64),J(13,`Duration`),B(),z(14,`th`,27),J(15,`From`),B()()(),z(16,`tbody`),I(17,Yz,24,14,`tr`,null,tz),B()()()),e&2){let e=K(3);M(17),L(e.calls())}}function Zz(e,t){e&1&&J(0,` No calls of this kind yet. `)}function Qz(e,t){e&1&&J(0,` No calls yet. `)}function $z(e,t){if(e&1&&(z(0,`div`,52)(1,`p`,73),P(2,Zz,1,0)(3,Qz,1,0),B(),z(4,`p`,4),J(5,` Navigate in the app to see page renders, load() fetches, form actions, server functions and API calls. `),B()()),e&2){let e=K(3);M(2),F(e.allCalls().length?2:3)}}function eB(e,t){if(e&1){let e=W();z(0,`tr`)(1,`td`)(2,`span`,67),J(3),B()(),z(4,`td`,29),J(5),B(),z(6,`td`)(7,`span`,39)(8,`span`,43),J(9),B(),J(10),B()(),z(11,`td`,74)(12,`button`,75),G(`click`,function(){let t=k(e).$implicit;return A(K(3).tryApi(t))}),J(13,` Try `),B()()()}if(e&2){let e=t.$implicit,n=K(3);M(2),N(`data-method`,e.method),M(),Y(e.method),M(2),Y(e.path),M(4),Y(n.dir(e.file)),M(),Y(n.base(e.file)),M(2),N(`aria-label`,`Try `+e.method+` `+e.path)}}function tB(e,t){e&1&&(z(0,`tr`)(1,`td`,44),J(2,` No API routes. Add a handler under src/server/routes to test it here. `),B()())}function nB(e,t){if(e&1&&(z(0,`tr`)(1,`td`)(2,`span`,67),J(3),B()(),z(4,`td`,29),J(5),B(),z(6,`td`)(7,`span`,39)(8,`span`,43),J(9),B(),J(10),B()(),z(11,`td`,77),J(12),B()()),e&2){let e=t.$implicit,n=K(4);M(2),N(`data-method`,e.method),M(),Y(e.method),M(2),Y(e.name),M(4),Y(n.dir(e.file)),M(),Y(n.base(e.file)),M(2),Y(n.fnCalls(e.id))}}function rB(e,t){if(e&1&&(z(0,`h2`),J(1,`Server functions`),B(),z(2,`div`,76)(3,`table`)(4,`thead`)(5,`tr`)(6,`th`,27),J(7,`Method`),B(),z(8,`th`,27),J(9,`Name`),B(),z(10,`th`,27),J(11,`File`),B(),z(12,`th`,64),J(13,`Calls`),B()()(),z(14,`tbody`),I(15,nB,13,6,`tr`,null,tz),B()()()),e&2){let e=K(3);M(15),L(e.serverFns())}}function iB(e,t){if(e&1&&(z(0,`p`,59),J(1),B()),e&2){let e=K(3);M(),Y(e.callsOff)}}function aB(e,t){if(e&1&&(z(0,`p`,60),J(1),B()),e&2){let e=K(3);M(),X(` Tick "This request can change data on the dev server" below to send a `,e.method(),` request. `)}}function oB(e,t){if(e&1){let e=W();z(0,`label`,78),J(1,`JSON body`),B(),z(2,`textarea`,79),G(`input`,function(t){return k(e),A(K(3).apiBody.set(t.target.value))}),B(),z(3,`label`,80)(4,`input`,81),G(`change`,function(){k(e);let t=K(3);return A(t.confirmSend.set(!t.confirmSend()))}),B(),J(5,` This request can change data on the dev server`),B()}if(e&2){let e=K(3);M(2),R(`value`,e.apiBody()),M(2),R(`checked`,e.confirmSend())}}function sB(e,t){if(e&1&&(z(0,`p`,61),J(1),B()),e&2){let e=K(3);M(),Z(`Sending `,e.method(),` `,e.apiPath().trim(),`…`)}}function cB(e,t){if(e&1&&(z(0,`div`,55)(1,`span`,82),J(2,`Refused`),B(),z(3,`span`),J(4),B()()),e&2){let e=K();M(4),Y(e.error)}}function lB(e,t){if(e&1&&(z(0,`div`,55)(1,`span`,69),J(2),B(),z(3,`span`,4),J(4),B()(),z(5,`pre`,72),J(6),B()),e&2){let e=K(),t=K(3);M(),N(`data-status`,t.statusClass(e.status??0)),M(),Y(e.status),M(2),Z(``,e.ms,` ms · `,e.type||`no content type`),M(2),Y(t.pretty(e.body??``))}}function uB(e,t){e&1&&(z(0,`div`,62),P(1,cB,5,1,`div`,55)(2,lB,7,5),B()),e&2&&(M(),F(t.error?1:2))}function dB(e,t){if(e&1){let e=W();P(0,Iz,7,0,`div`,45),P(1,Rz,7,0,`div`,45),z(2,`div`,46)(3,`fieldset`,47)(4,`legend`,48),J(5,`Show calls of kind`),B(),I(6,zz,5,5,`label`,49,wg),B(),z(8,`button`,50),G(`click`,function(){return k(e),A(K(2).clearCalls())}),J(9,` Clear calls `),B()(),P(10,Xz,19,0,`div`,51)(11,$z,6,1,`div`,52),z(12,`h2`),J(13,`API routes`),B(),z(14,`div`,53)(15,`table`)(16,`thead`)(17,`tr`)(18,`th`,27),J(19,`Method`),B(),z(20,`th`,27),J(21,`Path`),B(),z(22,`th`,27),J(23,`File`),B(),z(24,`th`,27)(25,`span`,48),J(26,`Actions`),B()()()(),z(27,`tbody`),I(28,eB,14,6,`tr`,null,iz,!1,tB,3,0,`tr`),B()()(),P(31,rB,17,0),z(32,`form`,54),G(`submit`,function(t){k(e);let n=K(2);return t.preventDefault(),A(n.send())}),z(33,`h2`),J(34,`Request playground`),B(),z(35,`div`,55)(36,`app-select`,56),G(`valueChange`,function(t){return k(e),A(K(2).method.set(t??`GET`))}),B(),z(37,`label`,57),J(38,`Path`),B(),z(39,`input`,58),G(`input`,function(t){return k(e),A(K(2).apiPath.set(t.target.value))}),B(),z(40,`button`,20),J(41),B()(),P(42,iB,2,1,`p`,59)(43,aB,2,1,`p`,60),P(44,oB,6,2),P(45,sB,2,2,`p`,61)(46,uB,3,1,`div`,62),B()}if(e&2){let e,t=K(2);F(t.duplicates().length?0:-1),M(),F(t.refetchedFns().length?1:-1),M(5),L(t.kinds),M(2),R(`disabled`,!t.allCalls().length),M(2),F(t.calls().length?10:11),M(18),L(t.project().api),M(3),F(t.serverFns().length?31:-1),M(5),R(`options`,t.methodOptions)(`value`,t.method()),M(3),R(`value`,t.apiPath()),M(),R(`disabled`,!t.canSend()),N(`aria-describedby`,t.sendHintId()),M(),X(` `,t.sending()?`Sending…`:`Send`,` `),M(),F(t.canCall()?t.needsConfirm()?43:-1:42),M(2),F(t.method()===`GET`?-1:44),M(),F(t.sending()?45:(e=t.response())?46:-1,e)}}function fB(e,t){if(e&1&&(z(0,`span`,32),J(1),B()),e&2){let e=t.$implicit;N(`data-mode`,e.mode),M(),Z(``,e.label,` · `,e.count)}}function pB(e,t){if(e&1&&(z(0,`div`,31),I(1,fB,2,3,`span`,32,oz),B()),e&2){let e=K(3);M(),L(e.modeCounts())}}function mB(e,t){e&1&&(z(0,`span`,87),J(1,`differs from config`),B())}function hB(e,t){if(e&1&&(z(0,`div`,40)(1,`span`,69),J(2),B(),z(3,`span`,86),J(4),B(),P(5,mB,2,0,`span`,87),B()),e&2){let e=t,n=K().$implicit,r=K(3);M(),N(`data-status`,r.statusClass(e.status)),M(),Y(e.status),M(2),Z(``,e.render===`client`?`client only`:`server rendered`,` · `,e.ms,` ms`),M(),F(r.mismatch(n)?5:-1)}}function gB(e,t){e&1&&(z(0,`span`,85),J(1,`not requested yet`),B())}function _B(e,t){if(e&1&&(z(0,`span`,39)(1,`span`,43),J(2),B(),J(3),B()),e&2){let e=K().$implicit,t=K(3);M(2),Y(t.dir(e.file)),M(),Y(t.base(e.file))}}function vB(e,t){if(e&1&&(z(0,`tr`)(1,`td`,37),J(2),B(),z(3,`td`)(4,`div`,40)(5,`span`,32),J(6),B(),z(7,`span`,85),J(8),B()()(),z(9,`td`),P(10,hB,6,5,`div`,40)(11,gB,2,0,`span`,85),B(),z(12,`td`),P(13,_B,4,2,`span`,39),B()()),e&2){let e,n=t.$implicit,r=K(3);M(2),Y(n.path),M(3),N(`data-mode`,n.mode),M(),Y(r.modeLabel(n.mode)),M(2),Y(n.reason),M(2),F((e=n.last)?10:11,e),M(3),F(n.file?13:-1)}}function yB(e,t){e&1&&(z(0,`tr`)(1,`td`,44),J(2,` No page routes to render yet. Add a .page.ts file under src/app/pages. `),B()())}function bB(e,t){e&1&&(z(0,`p`,4),J(1,` prerender.routes is a function, so the list is known only at build time. `),B())}function xB(e,t){if(e&1&&(z(0,`span`,33),J(1),B()),e&2){let e=t.$implicit;M(),Y(e)}}function SB(e,t){e&1&&(z(0,`span`,85),J(1,`default, nothing configured`),B())}function CB(e,t){if(e&1&&(z(0,`span`,33),J(1),B()),e&2){let e=t.$implicit;M(),Y(e)}}function wB(e,t){if(e&1&&(z(0,`dt`),J(1,`From routeRules`),B(),z(2,`dd`),I(3,CB,2,1,`span`,33,wg),B()),e&2){let e=K(2);M(3),L(e.fromRules)}}function TB(e,t){if(e&1&&(z(0,`span`,90),J(1),B()),e&2){let e=t.$implicit;M(),Y(e)}}function EB(e,t){if(e&1&&(z(0,`dt`),J(1,`Static, not listed`),B(),z(2,`dd`),I(3,TB,2,1,`span`,90,wg),B()),e&2){let e=K(2);M(3),L(e.staticMissing)}}function DB(e,t){if(e&1&&(z(0,`span`,33),J(1),B()),e&2){let e=t.$implicit;M(),Y(e)}}function OB(e,t){if(e&1&&(z(0,`dt`),J(1,`Need explicit entries`),B(),z(2,`dd`),I(3,DB,2,1,`span`,33,wg),B()),e&2){let e=K(2);M(3),L(e.dynamic)}}function kB(e,t){if(e&1&&(z(0,`span`,91),J(1),B()),e&2){let e=t.$implicit;M(),Y(e)}}function AB(e,t){if(e&1&&(J(0,` · missing `),I(1,kB,2,1,`span`,91,wg)),e&2){let e=K(3);M(),L(e.notBuilt)}}function jB(e,t){if(e&1&&(J(0),P(1,AB,3,0)),e&2){let e=K(2);X(` `,e.built.length,` page(s) in dist/analog/public `),M(),F(e.notBuilt.length?1:-1)}}function MB(e,t){e&1&&(z(0,`span`,85),J(1,`no build yet`),B())}function NB(e,t){if(e&1&&(z(0,`dl`,88)(1,`dt`),J(2,`Listed`),B(),z(3,`dd`),I(4,xB,2,1,`span`,33,wg),P(6,SB,2,0,`span`,85),B(),P(7,wB,5,0),P(8,EB,5,0),P(9,OB,5,0),z(10,`dt`),J(11,`Build output`),B(),z(12,`dd`,89),P(13,jB,2,2)(14,MB,2,0,`span`,85),B()()),e&2){let e=K();M(4),L(e.listed??av(5,ez)),M(2),F(e.listed?-1:6),M(),F(e.fromRules?.length?7:-1),M(),F(e.staticMissing.length?8:-1),M(),F(e.dynamic.length?9:-1),M(4),F(e.built.length?13:14)}}function PB(e,t){e&1&&(z(0,`div`,84)(1,`h2`),J(2,`Prerender plan`),B(),P(3,bB,2,0,`p`,4)(4,NB,15,6,`dl`,88),B()),e&2&&(M(3),F(t.dynamicConfig?3:4))}function FB(e,t){if(e&1&&(P(0,pB,3,0,`div`,31),z(1,`div`,83)(2,`table`)(3,`thead`)(4,`tr`)(5,`th`,27),J(6,`Route`),B(),z(7,`th`,27),J(8,`Configured`),B(),z(9,`th`,27),J(10,`Last request`),B(),z(11,`th`,27),J(12,`File`),B()()(),z(13,`tbody`),I(14,vB,14,6,`tr`,null,az,!1,yB,3,0,`tr`),B()()(),P(17,PB,5,1,`div`,84)),e&2){let e,t=K(2);F(t.modeCounts().length?0:-1),M(14),L(t.renderRows()),M(3),F((e=t.plan())?17:-1,e)}}function IB(e,t){if(e&1&&(z(0,`div`)(1,`span`,94),J(2),B()()),e&2){let e=K().$implicit;M(2),Y(e.error)}}function LB(e,t){if(e&1&&(z(0,`div`)(1,`span`,87),J(2),B()()),e&2){let e=K(5);M(2),X(`takes over `,e.base(t))}}function RB(e,t){if(e&1&&(z(0,`tr`)(1,`td`)(2,`strong`),J(3),B(),P(4,IB,3,1,`div`),P(5,LB,3,1,`div`),B(),z(6,`td`,37),J(7),B(),z(8,`td`,29),J(9),B(),z(10,`td`,93),J(11),B(),z(12,`td`)(13,`span`,39)(14,`span`,43),J(15),B(),J(16),B()()()),e&2){let e,n=t.$implicit,r=K(4);M(3),Y(n.attributes.title||`(no title)`),M(),F(n.error?4:-1),M(),F((e=r.shadowed(n.file))?5:-1,e),M(2),Y(r.contentUrl(n.file)??``),M(2),Y(n.slug),M(2),Y(n.attributes.date||``),M(4),Y(r.dir(n.file)),M(),Y(r.base(n.file))}}function zB(e,t){if(e&1&&(z(0,`div`,92)(1,`table`)(2,`thead`)(3,`tr`)(4,`th`,27),J(5,`Title`),B(),z(6,`th`,27),J(7,`URL`),B(),z(8,`th`,27),J(9,`Slug`),B(),z(10,`th`,27),J(11,`Date`),B(),z(12,`th`,27),J(13,`File`),B()()(),z(14,`tbody`),I(15,RB,17,8,`tr`,null,sz),B()()()),e&2){let e=K(3);M(15),L(e.project().content)}}function BB(e,t){e&1&&(z(0,`div`,52)(1,`p`,73),J(2,`No markdown files under src/content.`),B(),z(3,`p`,4),J(4,` Add a .md file there to see its title, slug, date and the URL it serves. `),B()())}function VB(e,t){e&1&&P(0,zB,17,0,`div`,92)(1,BB,5,0,`div`,52),e&2&&F(+!K(2).project().content.length)}function HB(e,t){if(e&1&&(z(0,`span`,15),J(1),B()),e&2){let e=K().$implicit;M(),Y(e.items.length)}}function UB(e,t){if(e&1&&(z(0,`span`,39)(1,`span`,43),J(2),B(),J(3),B()),e&2){let e=K().$implicit,t=K(5);M(2),Y(t.dir(e.file)),M(),Y(t.base(e.file))}}function WB(e,t){if(e&1&&(z(0,`span`,37),J(1),B()),e&2){let e=K().$implicit;M(),Y(e.path)}}function GB(e,t){if(e&1&&(z(0,`p`,102),J(1),B()),e&2){let e=K().$implicit;M(),Y(e.message)}}function KB(e,t){if(e&1&&(z(0,`li`),P(1,UB,4,2,`span`,39),P(2,WB,2,1,`span`,37),P(3,GB,2,1,`p`,102),B()),e&2){let e=t.$implicit;M(),F(e.file?1:-1),M(),F(e.path&&e.path!==e.file?2:-1),M(),F(e.message?3:-1)}}function qB(e,t){if(e&1&&(z(0,`li`)(1,`div`,97)(2,`span`,32),J(3),B(),z(4,`strong`,98),J(5),B(),P(6,HB,2,1,`span`,15),B(),z(7,`p`),J(8),B(),z(9,`ul`,99),I(10,KB,4,3,`li`,null,Cg),B(),z(12,`div`,100)(13,`strong`),J(14,`How to fix`),B(),J(15),B(),z(16,`span`,101),J(17),B()()),e&2){let e=t.$implicit,n=K(4);N(`data-tone`,n.tone(e.severity)),M(2),N(`data-tone`,n.tone(e.severity)),M(),Y(e.severity),M(2),Y(e.title),M(),F(e.items.length>1?6:-1),M(2),Y(e.summary),M(2),L(e.items),M(5),X(` `,e.fix),M(2),Y(e.rule)}}function JB(e,t){if(e&1&&(z(0,`p`,4),J(1),B(),z(2,`ul`,96),I(3,qB,18,8,`li`,null,cz),B()),e&2){let e=K(3);M(),Z(` `,e.findings().length,` issue(s) in `,e.lintCards().length,` group(s). Each card says what is wrong, where, and how to fix it. `),M(2),L(e.lintCards())}}function YB(e,t){e&1&&(z(0,`div`,95)(1,`strong`),J(2,`No Analog problems found.`),B(),J(3,` Routes, server files, prerender config and content all check out. `),B())}function XB(e,t){e&1&&P(0,JB,5,2)(1,YB,4,0,`div`,95),e&2&&F(+!K(2).findings().length)}function ZB(e,t){if(e&1){let e=W();z(0,`section`,5)(1,`div`,6)(2,`span`,7),J(3,`Analog`),B(),z(4,`span`,8),J(5),B()(),z(6,`div`,6)(7,`span`,7),J(8,`Pages`),B(),z(9,`span`,8),J(10),B()(),z(11,`div`,6)(12,`span`,7),J(13,`API routes`),B(),z(14,`span`,8),J(15),B()(),z(16,`div`,6)(17,`span`,7),J(18,`Server calls`),B(),z(19,`span`,8),J(20),B()(),z(21,`div`,6)(22,`span`,7),J(23,`Issues`),B(),z(24,`span`,8),J(25),B()(),P(26,dz,5,2,`div`,9),B(),z(27,`div`,10),G(`keydown`,function(t){return k(e),A(K().onKey(t))}),I(28,fz,4,7,`button`,11,tz),B(),z(30,`div`,12),P(31,Pz,29,6)(32,dB,47,15)(33,FB,18,3)(34,VB,2,1)(35,XB,2,1),B()}if(e&2){let e,t,n=K();M(5),Y(n.project().version||`unknown`),M(5),Y(n.pageCount()),M(5),Y(n.project().api.length),M(5),Y(n.allCalls().length),M(),N(`data-tone`,n.findings().length?`warn`:`good`),M(4),Y(n.findings().length),M(),F((e=n.page())?26:-1,e),M(2),L(n.views()),M(2),R(`id`,`analog-panel-`+n.view()),N(`aria-labelledby`,`analog-tab-`+n.view()),M(),F((t=n.view())===`routes`?31:t===`server`?32:t===`render`?33:t===`content`?34:t===`lint`?35:-1)}}var QB={"scan-error":{title:`A folder could not be read`,summary:`Its files are missing from routes, API routes and lint results.`},"duplicate-url":{title:`Two files serve the same URL`,summary:`Only one of them is reachable; the other never renders.`},"sibling-params":{title:`Two dynamic pages in one folder`,summary:`Both are [param] pages at the same level, so the first one always wins.`},"missing-default-export":{title:`Page has no default export`,summary:`Analog needs the component as the default export, so the page renders nothing.`},"redirect-with-component":{title:`Redirect page also exports a component`,summary:`The redirect runs first, so the component never shows.`},"redirect-path-match":{title:`Redirect matches too much`,summary:`An empty-path redirect without pathMatch "full" catches every URL below it.`},"layout-without-outlet":{title:`Layout has no router-outlet`,summary:`The layout has child pages, but without they never render.`},"server-without-load":{title:`.server.ts without load or action`,summary:`The server file exports no load, action or server function, so Analog calls nothing.`},"orphan-server-file":{title:`.server.ts without a page`,summary:`No page file sits next to it, so its load never runs.`},"api-method-suffix":{title:`Unknown method suffix on an API file`,summary:`The suffix is not an HTTP method, so it becomes part of the URL.`},"duplicate-api-route":{title:`Two handlers for one API route`,summary:`Two files answer the same method and path.`},"api-outside-prefix":{title:`Server route outside the API prefix`,summary:`During vite dev only routes under the prefix reach Nitro.`},"prerender-unknown-route":{title:`Prerender entry matches no page`,summary:`prerender.routes lists a path that no page file serves.`},"prerender-missing-root":{title:`Home page is not prerendered`,summary:`static is on, but prerender.routes leaves out /.`},"content-frontmatter":{title:`Broken frontmatter`,summary:`The markdown frontmatter cannot be read.`},"duplicate-slug":{title:`Two posts share a slug`,summary:`injectContent picks one of them at random.`},"content-shadows-page":{title:`Markdown file takes over a page`,summary:`Files under src/content are routes too, so these URLs render the markdown file instead of the [param] page.`},"load-fetched-twice":{title:`load() runs twice`,summary:`These pages fetched their data while rendering on the server and again in the browser.`},"fn-fetched-twice":{title:`Server function read runs twice`,summary:`These reads ran while rendering on the server and again in the browser right after hydration.`},"restart-needed":{title:`New pages need a restart`,summary:`These page files exist, but the running router does not know them yet.`},"hydration-error":{title:`Hydration error`,summary:`The browser DOM did not match the server HTML.`},"api-not-found":{title:`API call failed with 404 or 405`,summary:`A request hit a path or method that no server route handles.`}},$B=new Set([`missing-default-export`,`redirect-with-component`,`redirect-path-match`,`layout-without-outlet`,`server-without-load`,`orphan-server-file`,`load-fetched-twice`,`restart-needed`,`prerender-missing-root`]),eV={ssr:`SSR`,ssg:`Prerendered`,client:`Client only`,cached:`Cached`,redirect:`Redirect`},tV={all:`All`,page:`Pages`,load:`load()`,action:`Actions`,fn:`Server fn`,api:`API`},nV={success:`succeeded`,redirect:`redirected`,invalid:`validation errors`,error:`failed`},rV={success:`good`,redirect:`info`,invalid:`warn`,error:`bad`};function iV(e,t=0,n=[]){for(let r of e)n.push({route:r,depth:t}),iV(r.children,t+1,n);return n}var aV=class e{rpc=$(null);canCall=Q(()=>nE(this.rpc(),`analog`));callsOff=HT(`analog`);kinds=[`all`,`page`,`load`,`action`,`fn`,`api`];methods=[`GET`,`POST`,`PUT`,`PATCH`,`DELETE`];methodOptions=this.methods.map(e=>({value:e,label:e}));view=j(`routes`);project=j(null);state=j({});findings=j([]);renderRows=j([]);plan=j(null);filter=j(``);testUrl=j(``);explained=j(null);explainError=j(``);explaining=j(!1);kind=j(`all`);method=j(`GET`);apiPath=j(``);apiBody=j(``);confirmSend=j(!1);response=j(null);sending=j(!1);needsConfirm=Q(()=>this.method()!==`GET`&&!this.confirmSend());canSend=Q(()=>this.canCall()&&!this.sending()&&!this.needsConfirm());sendHintId=Q(()=>this.canCall()?this.needsConfirm()?`analog-confirm-hint`:null:`analog-calls-off`);unsubscribe=null;refreshTimer;refreshRun=0;destroyRef=E(Cs);page=Q(()=>this.state().pages?.[0]??null);openFiles=Q(()=>new Set((this.page()?.chain??[]).map(e=>e.file)));allCalls=Q(()=>this.state().calls??[]);calls=Q(()=>{let e=this.kind();return this.allCalls().filter(t=>e===`all`||t.kind===e).slice(-150).reverse()});allRoutes=Q(()=>iV(this.project()?.routes??[]));pageCount=Q(()=>this.allRoutes().filter(e=>e.route.file&&e.route.kind!==`layout`).length);routeRows=Q(()=>{let e=this.filter().trim().toLowerCase();return e?this.allRoutes().filter(t=>t.route.fullPath.toLowerCase().includes(e)||!!t.route.file?.toLowerCase().includes(e)):this.allRoutes()});serverFns=Q(()=>this.project()?.serverFns??[]);fnById=Q(()=>new Map(this.serverFns().map(e=>[e.id,e])));refetchedFns=Q(()=>Array.from(new Set((this.state().refetches??[]).map(e=>this.fnById().get(e.id)?.name??e.id))));duplicates=Q(()=>Array.from(new Set((this.state().duplicates??[]).map(e=>e.route))));modeCounts=Q(()=>[`ssr`,`ssg`,`cached`,`client`,`redirect`].map(e=>({mode:e,label:eV[e],count:this.renderRows().filter(t=>t.mode===e).length})).filter(e=>e.count));lintCards=Q(()=>{let e={error:0,warning:1,info:2},t=new Map;for(let e of this.findings()){let n=t.get(e.rule);if(!n){let r=QB[e.rule];n={rule:e.rule,severity:e.severity,title:r?.title??e.rule,summary:r?.summary??e.message,fix:e.fix,items:[]},t.set(e.rule,n)}let r=$B.has(e.rule)||e.message===n.summary?void 0:e.message;n.items.some(t=>t.file===e.file&&t.path===e.path&&t.message===r)||n.items.push({file:e.file,path:e.path,message:r})}return Array.from(t.values()).sort((t,n)=>e[t.severity]-e[n.severity])});views=Q(()=>{let e=this.findings().length;return[{id:`routes`,label:`Routes`,count:this.pageCount(),tone:``},{id:`server`,label:`Server`,count:this.allCalls().length,tone:``},{id:`render`,label:`Render`,count:this.renderRows().length,tone:``},{id:`content`,label:`Content`,count:this.project()?.content.length??0,tone:``},{id:`lint`,label:`Lint`,count:e,tone:e?`warn`:``}]});constructor(){uc(()=>{let e=this.rpc();e&&Sv(()=>void this.load(e))}),uc(()=>{let e=this.view();this.state(),Sv(()=>this.scheduleRefresh(e))}),this.destroyRef.onDestroy(()=>{this.unsubscribe?.(),clearTimeout(this.refreshTimer)})}async load(e){let t=await $T(e,`analog-project`);if(!this.destroyRef.destroyed){this.project.set(t);try{let t=await e.scope(`ng-devtools`).rpc.sharedState(`analog`);if(this.destroyRef.destroyed)return;let n=e=>this.state.set(e??{});n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.state.set({})}this.destroyRef.destroyed||await this.refresh(this.view())}}scheduleRefresh(e){clearTimeout(this.refreshTimer),this.refreshTimer=setTimeout(()=>void this.refresh(e),300)}async refresh(e){let t=this.rpc();if(!t)return;let n=++this.refreshRun,[r,i]=await Promise.all([$T(t,`analog-lint`),$T(t,`analog-render`)]);if(n===this.refreshRun&&(this.findings.set(r??[]),this.renderRows.set(i?.rows??[]),this.plan.set(i?.plan??null),e===`routes`||e===`content`)){let e=await $T(t,`analog-project`);e&&n===this.refreshRun&&this.project.set(e)}}isOpen(e){return!!e.file&&this.openFiles().has(e.file)}kindText(e){return e.catchAll?e.catchAll===`optional`?`optional catch-all`:`catch-all`:e.kind===`implicit`?`folder`:e.kind}serverExports(e){return(e.serverExports??[]).filter(e=>e===`load`||e===`action`)}short(e){return e?.replace(/^\/src\/app\//,``).replace(/^\//,``)}dir(e){let t=this.short(e)??e;return t.includes(`/`)?t.slice(0,t.lastIndexOf(`/`)+1):``}base(e){return e.slice(e.lastIndexOf(`/`)+1)}paramList(e){return Object.entries(e)}kindLabel(e){return tV[e]}kindCount(e){return e===`all`?this.allCalls().length:this.allCalls().filter(t=>t.kind===e).length}modeLabel(e){return eV[e]}mismatch(e){return!e.last?.render||e.mode===`redirect`?!1:e.mode===`client`?e.last.render!==`client`:e.last.render===`client`}fnOf(e){return e.kind===`fn`&&e.route?this.fnById().get(e.route):void 0}fnCalls(e){return this.allCalls().filter(t=>t.kind===`fn`&&t.route===e).length}outcomeLabel(e){return nV[e]}outcomeTone(e){return rV[e]}statusClass(e){return e>=500||e===0?`bad`:e>=400?`warn`:`good`}tone(e){return e===`error`?`bad`:e===`warning`?`warn`:`info`}shadowed(e){return this.findings().find(t=>t.rule===`content-shadows-page`&&t.file===e)?.message.match(/(\/\S+\.page\.ts)/)?.[1]}contentUrl(e){return this.allRoutes().find(t=>t.route.file===e)?.route.fullPath}pretty(e){try{return JSON.stringify(JSON.parse(e),null,2)}catch{return e}}time=rD;tryApi(e){this.method.set(e.method===`ANY`?`GET`:e.method),this.apiPath.set(e.path.replace(/:(\w+)/g,`1`).replace(`**`,`x`)),this.response.set(null),queueMicrotask(()=>document.getElementById(`api-path`)?.focus())}async clearCalls(){await $T(this.rpc(),`analog-clear-calls`)}async explain(){let e=this.testUrl().trim();if(!e){this.explained.set(null),this.explainError.set(`Type a URL to explain, for example /products/42.`);return}this.explaining.set(!0),this.explainError.set(``);try{let t=await QT(this.rpc(),`analog-explain-url`,e);if(!t)throw Error(`The devtools server did not answer`);this.explained.set({url:e,match:t})}catch(t){let n=String(t?.message||`The devtools server did not answer`);this.explained.set(null),this.explainError.set(`Could not explain ${e}. ${n.replace(/\.?$/,`.`)}`)}finally{this.explaining.set(!1)}}async send(){let e=this.apiPath().trim();if(!e||this.sending()||this.needsConfirm())return;let t;if(this.method()!==`GET`&&this.apiBody().trim())try{t=JSON.parse(this.apiBody())}catch{this.response.set({error:`The body is not valid JSON.`});return}this.response.set(null),this.sending.set(!0);try{let n=await $T(this.rpc(),`analog-call-api`,{method:this.method(),path:e,body:t,confirm:this.confirmSend()});this.response.set(n??{error:`No answer from the devtools server.`})}finally{this.sending.set(!1)}}onKey(e){let t=this.views().map(e=>e.id),n=t.indexOf(this.view()),r=n;if(e.key===`ArrowRight`)r=(n+1)%t.length;else if(e.key===`ArrowLeft`)r=(n-1+t.length)%t.length;else if(e.key===`Home`)r=0;else if(e.key===`End`)r=t.length-1;else return;e.preventDefault(),this.view.set(t[r]);let i=e.currentTarget;queueMicrotask(()=>i.querySelector(`#analog-tab-${t[r]}`)?.focus())}static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-analog-inspector`]],inputs:{rpc:[1,`rpc`]},decls:3,vars:1,consts:[[`role`,`status`,1,`loading`],[1,`empty`],[`aria-hidden`,`true`,1,`spinner`],[1,`empty-title`],[1,`muted`],[`aria-label`,`Analog summary`,1,`summary`],[1,`stat`],[1,`label`],[1,`value`],[1,`stat`,`wide`],[`role`,`tablist`,`aria-label`,`Analog views`,1,`tabs`,3,`keydown`],[`type`,`button`,`role`,`tab`,3,`id`],[`role`,`tabpanel`,1,`panel`,3,`id`],[1,`value`,`mono`,3,`title`],[`type`,`button`,`role`,`tab`,3,`click`,`id`],[1,`count`],[1,`toolbar`],[1,`inline`,`explain`,3,`submit`],[`for`,`analog-url`],[`id`,`analog-url`,`type`,`text`,`placeholder`,`/products/42`,1,`field`,`grow`,`mono`,3,`input`,`value`],[`type`,`submit`,1,`btn`,`primary`,3,`disabled`],[`for`,`route-filter`,1,`sr-only`],[`id`,`route-filter`,`type`,`search`,`placeholder`,`Filter by path or file`,1,`field`,`filter`,3,`input`,`value`],[`role`,`status`,1,`explain-result`],[`data-tone`,`bad`,1,`callout`],[1,`callout`],[`role`,`region`,`aria-label`,`File routes`,`tabindex`,`0`,1,`table-wrap`],[`scope`,`col`],[3,`open`,`dim`],[1,`mono`],[1,`chain`],[1,`chips`],[1,`pill`],[1,`chip`,`mono`],[1,`plain`],[1,`route`],[`aria-hidden`,`true`,1,`guide`],[1,`mono`,`path`],[1,`pill`,`live`],[1,`file`],[1,`meta`],[`data-kind`,`load`,1,`pill`],[1,`chip`],[1,`dir`],[`colspan`,`4`,1,`empty-row`],[`data-tone`,`warn`,`role`,`note`,1,`callout`],[1,`calls-bar`],[1,`segmented`],[1,`sr-only`],[3,`on`],[`type`,`button`,1,`btn`,`ghost`,3,`click`,`disabled`],[`role`,`region`,`aria-label`,`Server calls`,`tabindex`,`0`,1,`table-wrap`],[1,`empty-box`],[`role`,`region`,`aria-label`,`API routes`,`tabindex`,`0`,1,`table-wrap`],[1,`card`,`playground`,3,`submit`],[1,`row`],[`ariaLabel`,`Method`,1,`method-select`,3,`valueChange`,`options`,`value`],[`for`,`api-path`,1,`sr-only`],[`id`,`api-path`,`type`,`text`,`placeholder`,`/api/v1/products`,1,`field`,`grow`,`mono`,3,`input`,`value`],[`id`,`analog-calls-off`,1,`muted`],[`id`,`analog-confirm-hint`,1,`muted`],[`role`,`status`,1,`muted`],[`role`,`status`,1,`response`],[`type`,`radio`,`name`,`analog-kind`,1,`sr-only`,3,`change`,`checked`],[`scope`,`col`,1,`num`],[1,`muted`,`nowrap`],[1,`request`],[1,`method`],[1,`mono`,`url`],[1,`status`],[1,`num`,`nowrap`],[1,`mono`,`muted`],[1,`code`],[1,`empty-lead`],[1,`actions`],[`type`,`button`,1,`btn`,`ghost`,3,`click`],[`role`,`region`,`aria-label`,`Server functions`,`tabindex`,`0`,1,`table-wrap`],[1,`num`,`tnum`],[`for`,`api-body`],[`id`,`api-body`,`rows`,`3`,`placeholder`,`{"name": "Ada"}`,1,`field`,`mono`,3,`input`,`value`],[1,`check`],[`type`,`checkbox`,3,`change`,`checked`],[`data-status`,`bad`,1,`status`],[`role`,`region`,`aria-label`,`Render modes`,`tabindex`,`0`,1,`table-wrap`],[1,`card`],[1,`muted`,`small`],[1,`muted`,`small`,`tnum`],[`data-tone`,`warn`,1,`pill`],[1,`facts`],[1,`tnum`],[`data-tone`,`warn`,1,`chip`,`mono`],[`data-tone`,`bad`,1,`chip`,`mono`],[`role`,`region`,`aria-label`,`Content files`,`tabindex`,`0`,1,`table-wrap`],[1,`muted`,`nowrap`,`tnum`],[`data-tone`,`bad`,1,`pill`],[`data-tone`,`good`,`role`,`status`,1,`callout`],[1,`findings`],[1,`finding-head`],[1,`finding-title`],[1,`where`],[1,`fix`],[1,`rule`,`mono`],[1,`detail`]],template:function(e,t){e&1&&P(0,lz,4,0,`div`,0)(1,uz,14,0,`div`,1)(2,ZB,36,10),e&2&&F(t.project()===null?0:t.project().analog?2:1)},dependencies:[XE],styles:[`@charset "UTF-8"; +[_nghost-%COMP%] { + --%NS%good: var(--%NS%ok); + --%NS%bad: var(--%NS%danger); + --%NS%info: #60a5fa; + --%NS%mono: var(--%NS%font-mono); + display: grid; + gap: 16px; + min-width: 0; + color: var(--%NS%text); + font-size: 13px; +} + +.loading[_ngcontent-%COMP%] { + display: flex; + gap: 12px; + align-items: center; + padding: 16px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + color: var(--%NS%text-2); +} + +.spinner[_ngcontent-%COMP%] { + width: 16px; + height: 16px; + flex: none; + border: 2px solid var(--%NS%border-strong); + border-top-color: var(--%NS%accent); + border-radius: 50%; + animation: spin 0.8s linear infinite; +} + +@media (prefers-reduced-motion: reduce) { + .spinner[_ngcontent-%COMP%] { + animation: none; + border-color: var(--%NS%accent-line); + } +} +.tnum[_ngcontent-%COMP%] { + font-variant-numeric: tabular-nums; +} + +.meta[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 6px 8px; + align-items: center; + min-width: 0; +} + +.empty-row[_ngcontent-%COMP%] { + padding: 24px 16px; + color: var(--%NS%text-2); + text-align: center; +} + +tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover td.empty-row[_ngcontent-%COMP%] { + background: transparent; +} + +.empty-box[_ngcontent-%COMP%] { + display: grid; + gap: 4px; + padding: 24px 16px; + border: 1px dashed var(--%NS%border-strong); + border-radius: var(--%NS%radius); + text-align: center; +} + +.empty-box[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { + margin: 0; + line-height: 1.55; +} + +.empty-lead[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-weight: 600; +} + +.mono[_ngcontent-%COMP%] { + font-family: var(--%NS%mono); + font-size: 12.5px; +} + +.muted[_ngcontent-%COMP%] { + color: var(--%NS%text-2); +} + +.small[_ngcontent-%COMP%] { + font-size: 12px; +} + +.nowrap[_ngcontent-%COMP%] { + white-space: nowrap; +} + +code[_ngcontent-%COMP%] { + padding: 1px 6px; + border: 1px solid var(--%NS%border); + border-radius: 6px; + background: var(--%NS%surface-2); + color: var(--%NS%text-strong); + font-family: var(--%NS%mono); + font-size: 12.5px; +} + +.summary[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); + gap: 12px; + animation: enter 0.35s var(--%NS%ease) both; +} + +.stat[_ngcontent-%COMP%] { + display: grid; + gap: 6px; + align-content: start; + padding: 12px 16px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + box-shadow: var(--%NS%shadow); + transition: border-color 180ms var(--%NS%ease), background-color 180ms var(--%NS%ease); +} + +.stat[_ngcontent-%COMP%]:hover { + border-color: var(--%NS%border-strong); +} + +.stat.wide[_ngcontent-%COMP%] { + grid-column: span 2; + min-width: 0; +} + +@media (max-width: 340px) { + .stat.wide[_ngcontent-%COMP%] { + grid-column: 1/-1; + } +} +.stat[_ngcontent-%COMP%] .label[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.08em; +} + +.stat[_ngcontent-%COMP%] .value[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-size: 20px; + font-weight: 600; + letter-spacing: -0.01em; + font-variant-numeric: tabular-nums; + overflow-wrap: anywhere; +} + +.stat[_ngcontent-%COMP%] .value.mono[_ngcontent-%COMP%] { + overflow: hidden; + color: var(--%NS%text); + font-size: 13px; + font-weight: 500; + line-height: 24px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.stat[data-tone=warn][_ngcontent-%COMP%] .value[_ngcontent-%COMP%] { + color: var(--%NS%warn); +} + +.stat[data-tone=good][_ngcontent-%COMP%] .value[_ngcontent-%COMP%] { + color: var(--%NS%ok); +} + +.tabs[_ngcontent-%COMP%] { + display: inline-flex; + flex-wrap: wrap; + gap: 2px; + justify-self: start; + max-width: 100%; + padding: 3px; + border: 1px solid var(--%NS%border); + border-radius: 10px; + background: var(--%NS%bg); +} + +[role=tab][_ngcontent-%COMP%] { + display: inline-flex; + gap: 8px; + align-items: center; + min-height: 28px; + padding: 4px 12px; + border: none; + border-radius: 7px; + background: transparent; + color: var(--%NS%text-2); + font: inherit; + font-weight: 500; + cursor: pointer; + transition: background-color 180ms var(--%NS%ease), color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease); +} + +[role=tab][_ngcontent-%COMP%]:hover { + color: var(--%NS%text); +} + +[role=tab][aria-selected=true][_ngcontent-%COMP%] { + background: var(--%NS%surface-3); + color: var(--%NS%text-strong); + box-shadow: inset 0 0 0 1px var(--%NS%border-strong); +} + +.count[_ngcontent-%COMP%] { + min-width: 20px; + padding: 0 6px; + border-radius: 99px; + background: var(--%NS%surface-3); + color: var(--%NS%text-2); + font-size: 11px; + font-weight: 600; + line-height: 18px; + text-align: center; + font-variant-numeric: tabular-nums; +} + +[role=tab][aria-selected=true][_ngcontent-%COMP%] .count[_ngcontent-%COMP%] { + background: var(--%NS%border-strong); + color: var(--%NS%text); +} + +.count[data-tone=warn][_ngcontent-%COMP%], +[role=tab][aria-selected=true][_ngcontent-%COMP%] .count[data-tone=warn][_ngcontent-%COMP%] { + background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); + color: var(--%NS%warn); +} + +.panel[_ngcontent-%COMP%] { + display: grid; + gap: 16px; + min-width: 0; + animation: enter 0.35s var(--%NS%ease) both; +} + +.toolbar[_ngcontent-%COMP%] { + position: sticky; + top: 0; + z-index: 2; + display: flex; + flex-wrap: wrap; + gap: 12px; + align-items: center; + justify-content: space-between; + padding: 12px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: color-mix(in srgb, var(--%NS%surface) 85%, transparent); + backdrop-filter: blur(10px); +} + +.explain[_ngcontent-%COMP%] { + flex: 1 1 320px; + min-width: 0; +} + +.filter[_ngcontent-%COMP%] { + flex: 0 1 240px; + min-width: 0; +} + +@media (max-width: 560px) { + .filter[_ngcontent-%COMP%] { + flex: 1 1 100%; + } +} +.inline[_ngcontent-%COMP%], +.row[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: center; +} + +.inline[_ngcontent-%COMP%] > label[_ngcontent-%COMP%], +.playground[_ngcontent-%COMP%] > label[_ngcontent-%COMP%]:not(.check) { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.08em; +} + +.field[_ngcontent-%COMP%] { + box-sizing: border-box; + height: 34px; + padding: 0 12px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background-color: var(--%NS%bg); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + transition: border-color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease); +} + +.field.mono[_ngcontent-%COMP%] { + font-family: var(--%NS%mono); + font-size: 13px; +} + +.field[_ngcontent-%COMP%]::placeholder { + color: var(--%NS%text-3); +} + +.field[_ngcontent-%COMP%]:focus, +.field[_ngcontent-%COMP%]:focus-visible { + border-color: var(--%NS%accent); + box-shadow: 0 0 0 3px var(--%NS%accent-soft); + outline: none; +} + +.method-select[_ngcontent-%COMP%] { + width: 112px; + font-family: var(--%NS%mono); +} + +textarea.field[_ngcontent-%COMP%] { + height: auto; + padding: 8px 12px; +} + +.grow[_ngcontent-%COMP%] { + flex: 1 1 180px; + min-width: 0; +} + +.btn[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + height: 34px; + padding: 0 14px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + color: var(--%NS%text); + font: inherit; + font-size: 13px; + font-weight: 500; + cursor: pointer; + transition: background-color 160ms var(--%NS%ease), border-color 160ms var(--%NS%ease), color 160ms var(--%NS%ease); +} + +.btn[_ngcontent-%COMP%]:hover { + background: var(--%NS%surface-3); + border-color: var(--%NS%border-strong); +} + +.btn[_ngcontent-%COMP%]:active { + transform: translateY(1px); +} + +.btn.primary[_ngcontent-%COMP%] { + border-color: var(--%NS%accent); + background: var(--%NS%accent); + color: var(--%NS%accent-ink); + font-weight: 600; +} + +.btn.primary[_ngcontent-%COMP%]:hover { + border-color: var(--%NS%accent-hover); + background: var(--%NS%accent-hover); +} + +.btn.ghost[_ngcontent-%COMP%] { + height: 28px; + padding: 0 12px; + font-size: 12px; +} + +.btn.ghost[_ngcontent-%COMP%]:hover { + border-color: var(--%NS%accent-line); + color: var(--%NS%text-strong); +} + +td.actions[_ngcontent-%COMP%] { + width: 1%; + text-align: right; + vertical-align: middle; +} + +.btn[_ngcontent-%COMP%]:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +[role=tab][_ngcontent-%COMP%]:focus-visible, +.btn[_ngcontent-%COMP%]:focus-visible, +.table-wrap[_ngcontent-%COMP%]:focus-visible, +summary[_ngcontent-%COMP%]:focus-visible, +.segmented[_ngcontent-%COMP%] label[_ngcontent-%COMP%]:focus-within { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.callout[_ngcontent-%COMP%] { + padding: 12px 16px; + border: 1px solid color-mix(in srgb, var(--%NS%info) 30%, transparent); + border-radius: var(--%NS%radius); + background: color-mix(in srgb, var(--%NS%info) 8%, var(--%NS%surface)); + line-height: 1.6; + animation: enter 0.35s var(--%NS%ease) both; +} + +.callout[data-tone=good][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); +} + +.callout[data-tone=warn][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); + background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); +} + +.callout[data-tone=bad][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); +} + +.callout[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); +} + +.callout[_ngcontent-%COMP%] strong.mono[_ngcontent-%COMP%] { + overflow-wrap: anywhere; +} + +.chain[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin: 8px 0 0; + padding: 0; + list-style: none; +} + +.chain[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { + display: inline-flex; + gap: 6px; + align-items: center; + min-width: 0; + overflow-wrap: anywhere; +} + +.chain[_ngcontent-%COMP%] li[_ngcontent-%COMP%]:not(:last-child)::after { + content: "›"; + margin-left: 2px; + color: var(--%NS%text-3); +} + +.callout[_ngcontent-%COMP%] .chips[_ngcontent-%COMP%] { + margin-top: 8px; +} + +.plain[_ngcontent-%COMP%] { + margin: 8px 0 0; + padding-left: 18px; +} + +.plain[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.table-wrap[_ngcontent-%COMP%] { + overflow-x: auto; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + box-shadow: var(--%NS%shadow); + animation: enter 0.35s var(--%NS%ease) both; +} + +table[_ngcontent-%COMP%] { + width: 100%; + min-width: 560px; + border-collapse: collapse; +} + +th[_ngcontent-%COMP%], +td[_ngcontent-%COMP%] { + padding: 10px 12px; + border-bottom: 1px solid var(--%NS%border); + text-align: left; + vertical-align: top; +} + +tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child td[_ngcontent-%COMP%] { + border-bottom: none; +} + +th[_ngcontent-%COMP%] { + position: sticky; + top: 0; + background: var(--%NS%surface); + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.06em; + white-space: nowrap; +} + +.num[_ngcontent-%COMP%] { + text-align: right; + font-variant-numeric: tabular-nums; +} + +td.nowrap[_ngcontent-%COMP%] { + font-variant-numeric: tabular-nums; +} + +tbody[_ngcontent-%COMP%] td[_ngcontent-%COMP%] { + transition: background-color 160ms var(--%NS%ease); +} + +tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover td[_ngcontent-%COMP%] { + background: var(--%NS%surface-2); +} + +tr.open[_ngcontent-%COMP%] td[_ngcontent-%COMP%] { + background: var(--%NS%accent-soft); + color: var(--%NS%text-strong); +} + +tr.open[_ngcontent-%COMP%]:hover td[_ngcontent-%COMP%] { + background: color-mix(in srgb, var(--%NS%accent) 16%, transparent); +} + +tr.open[_ngcontent-%COMP%] td[_ngcontent-%COMP%]:first-child { + box-shadow: inset 2px 0 0 var(--%NS%accent); +} + +tr.dim[_ngcontent-%COMP%] .path[_ngcontent-%COMP%] { + color: var(--%NS%text-2); +} + +.route[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: center; +} + +.guide[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-family: var(--%NS%mono); +} + +.path[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + overflow-wrap: anywhere; +} + +.file[_ngcontent-%COMP%] { + font-family: var(--%NS%mono); + font-size: 12.5px; + color: var(--%NS%text); + overflow-wrap: anywhere; +} + +.dir[_ngcontent-%COMP%] { + color: var(--%NS%text-3); +} + +.pill[_ngcontent-%COMP%], +.chip[_ngcontent-%COMP%], +.status[_ngcontent-%COMP%], +.method[_ngcontent-%COMP%] { + display: inline-block; + padding: 1px 8px; + border-radius: 99px; + font-size: 11px; + font-weight: 500; + line-height: 18px; + white-space: nowrap; +} + +.pill[_ngcontent-%COMP%] { + border: 1px solid var(--%NS%border-strong); + background: var(--%NS%surface-2); + color: var(--%NS%text-2); +} + +.chip[_ngcontent-%COMP%] { + margin: 0 4px 4px 0; + padding: 3px 10px; + border: 1px solid var(--%NS%border); + background: var(--%NS%surface-2); + color: var(--%NS%text); + font-size: 12px; + line-height: 16px; +} + +.chip.mono[_ngcontent-%COMP%] { + font-size: 12px; +} + +.chips[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.chips[_ngcontent-%COMP%] .pill[_ngcontent-%COMP%] { + padding: 3px 10px; + font-size: 12px; +} + +.pill.live[_ngcontent-%COMP%] { + border-color: var(--%NS%accent-line); + background: var(--%NS%accent-soft); + color: var(--%NS%accent); +} + +.pill[data-kind=layout][_ngcontent-%COMP%] { + border-color: #94a3b8; + color: #e2e8f0; +} + +.pill[data-kind=markdown][_ngcontent-%COMP%] { + border-color: #0ea5e9; + color: #bae6fd; +} + +.pill[data-kind=load][_ngcontent-%COMP%] { + border-color: #2dd4bf; + color: #99f6e4; +} + +.pill[data-mode=ssr][_ngcontent-%COMP%] { + border-color: #3b82f6; + color: #bfdbfe; +} + +.pill[data-mode=ssg][_ngcontent-%COMP%] { + border-color: #22c55e; + color: #bbf7d0; +} + +.pill[data-mode=client][_ngcontent-%COMP%] { + border-color: #eab308; + color: #fef08a; +} + +.pill[data-mode=cached][_ngcontent-%COMP%] { + border-color: #a855f7; + color: #e9d5ff; +} + +.pill[data-mode=redirect][_ngcontent-%COMP%] { + border-color: #94a3b8; + color: #e2e8f0; +} + +.pill[data-call=page][_ngcontent-%COMP%] { + border-color: #3b82f6; + color: #bfdbfe; +} + +.pill[data-call=load][_ngcontent-%COMP%] { + border-color: #2dd4bf; + color: #99f6e4; +} + +.pill[data-call=fn][_ngcontent-%COMP%] { + border-color: #14b8a6; + color: #99f6e4; +} + +.pill[data-call=api][_ngcontent-%COMP%] { + border-color: #f97316; + color: #fed7aa; +} + +.pill[data-call=action][_ngcontent-%COMP%] { + border-color: #ec4899; + color: #fbcfe8; +} + +[data-tone=good].pill[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); + color: var(--%NS%ok); +} + +[data-tone=warn].pill[_ngcontent-%COMP%], +[data-tone=warn].chip[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); + background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); + color: var(--%NS%warn); +} + +[data-tone=bad].pill[_ngcontent-%COMP%], +[data-tone=bad].chip[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + color: var(--%NS%danger); +} + +[data-tone=info].pill[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%info) 30%, transparent); + background: color-mix(in srgb, var(--%NS%info) 12%, transparent); + color: #bfdbfe; +} + +.status[_ngcontent-%COMP%] { + border: 1px solid var(--%NS%border-strong); + font-family: var(--%NS%mono); + font-weight: 600; + font-variant-numeric: tabular-nums; +} + +.status[data-status=good][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); + color: var(--%NS%ok); +} + +.status[data-status=warn][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); + background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); + color: var(--%NS%warn); +} + +.status[data-status=bad][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + color: var(--%NS%danger); +} + +.method[_ngcontent-%COMP%] { + min-width: 52px; + border: 1px solid var(--%NS%border-strong); + border-radius: 6px; + background: var(--%NS%surface-2); + color: var(--%NS%text); + font-family: var(--%NS%mono); + font-weight: 600; + text-align: center; +} + +.method[data-method=GET][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, #7dd3fc 30%, transparent); + background: color-mix(in srgb, #7dd3fc 12%, transparent); + color: #7dd3fc; +} + +.method[data-method=POST][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); + color: #86efac; +} + +.method[data-method=PUT][_ngcontent-%COMP%], +.method[data-method=PATCH][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); + background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); + color: #fde68a; +} + +.method[data-method=DELETE][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + color: #fecaca; +} + +.request[_ngcontent-%COMP%] { + min-width: 260px; +} + +.request[_ngcontent-%COMP%] .url[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + overflow-wrap: anywhere; +} + +details[_ngcontent-%COMP%] { + margin-top: 8px; +} + +summary[_ngcontent-%COMP%] { + width: fit-content; + border-radius: 6px; + color: var(--%NS%text-2); + font-size: 12px; + cursor: pointer; + transition: color 160ms var(--%NS%ease); +} + +summary[_ngcontent-%COMP%]:hover { + color: var(--%NS%text); +} + +.code[_ngcontent-%COMP%] { + margin: 8px 0 0; + padding: 10px 12px; + max-height: 220px; + overflow: auto; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%bg); + color: var(--%NS%text); + font-family: var(--%NS%mono); + font-size: 12.5px; + line-height: 1.55; + white-space: pre-wrap; + overflow-wrap: anywhere; +} + +.calls-bar[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 8px; +} + +.segmented[_ngcontent-%COMP%] { + display: inline-flex; + flex-wrap: wrap; + gap: 2px; + justify-self: start; + margin: 0; + padding: 3px; + border: 1px solid var(--%NS%border); + border-radius: 10px; + background: var(--%NS%bg); +} + +.segmented[_ngcontent-%COMP%] label[_ngcontent-%COMP%] { + display: inline-flex; + gap: 6px; + align-items: center; + padding: 5px 12px; + border-radius: 7px; + background: transparent; + color: var(--%NS%text-2); + font-weight: 500; + cursor: pointer; + transition: background-color 180ms var(--%NS%ease), color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease); +} + +.segmented[_ngcontent-%COMP%] label[_ngcontent-%COMP%]:hover { + color: var(--%NS%text); +} + +.segmented[_ngcontent-%COMP%] label[_ngcontent-%COMP%] .muted[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 12px; + font-variant-numeric: tabular-nums; +} + +.segmented[_ngcontent-%COMP%] label.on[_ngcontent-%COMP%] { + background: var(--%NS%surface-3); + color: var(--%NS%text-strong); + box-shadow: inset 0 0 0 1px var(--%NS%border-strong); +} + +.segmented[_ngcontent-%COMP%] label.on[_ngcontent-%COMP%] .muted[_ngcontent-%COMP%] { + color: var(--%NS%text-2); +} + +h2[_ngcontent-%COMP%] { + display: flex; + gap: 8px; + align-items: center; + margin: 8px 0 0; + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.08em; +} + +.card[_ngcontent-%COMP%] { + display: grid; + gap: 12px; + padding: 16px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + box-shadow: var(--%NS%shadow); + animation: enter 0.35s var(--%NS%ease) both; +} + +.card[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] { + margin: 0; +} + +.check[_ngcontent-%COMP%] { + display: flex; + gap: 8px; + align-items: center; + color: var(--%NS%text-2); + cursor: pointer; +} + +.check[_ngcontent-%COMP%] input[_ngcontent-%COMP%] { + width: 15px; + height: 15px; + margin: 0; + accent-color: var(--%NS%accent); +} + +.check[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.response[_ngcontent-%COMP%] { + display: grid; + gap: 8px; + padding: 12px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); +} + +.response[_ngcontent-%COMP%] .code[_ngcontent-%COMP%] { + margin: 0; +} + +.facts[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: max-content 1fr; + gap: 10px 16px; + margin: 0; +} + +.facts[_ngcontent-%COMP%] dt[_ngcontent-%COMP%] { + padding-top: 3px; + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.08em; +} + +.facts[_ngcontent-%COMP%] dd[_ngcontent-%COMP%] { + margin: 0; +} + +.findings[_ngcontent-%COMP%] { + display: grid; + gap: 12px; + margin: 0; + padding: 0; + list-style: none; + animation: enter 0.35s var(--%NS%ease) both; +} + +.findings[_ngcontent-%COMP%] > li[_ngcontent-%COMP%] { + position: relative; + padding: 16px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + box-shadow: inset 3px 0 0 var(--%NS%info), var(--%NS%shadow); + transition: border-color 180ms var(--%NS%ease); +} + +.findings[_ngcontent-%COMP%] > li[_ngcontent-%COMP%]:hover { + border-color: var(--%NS%border-strong); +} + +.findings[_ngcontent-%COMP%] > li[data-tone=bad][_ngcontent-%COMP%] { + box-shadow: inset 3px 0 0 var(--%NS%danger), var(--%NS%shadow); +} + +.findings[_ngcontent-%COMP%] > li[data-tone=warn][_ngcontent-%COMP%] { + box-shadow: inset 3px 0 0 var(--%NS%warn), var(--%NS%shadow); +} + +.findings[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { + margin: 8px 0 0; + line-height: 1.55; +} + +.findings[_ngcontent-%COMP%] > li[_ngcontent-%COMP%] > p[_ngcontent-%COMP%] { + color: var(--%NS%text-2); +} + +.finding-head[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: center; +} + +.finding-title[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); + font-size: 14px; + font-weight: 600; +} + +.where[_ngcontent-%COMP%] { + display: grid; + gap: 6px; + margin: 12px 0 0; + padding: 10px 12px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + list-style: none; +} + +.where[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + gap: 4px 12px; +} + +.where[_ngcontent-%COMP%] .detail[_ngcontent-%COMP%] { + flex-basis: 100%; + margin: 0; + color: var(--%NS%text-2); + overflow-wrap: anywhere; +} + +.fix[_ngcontent-%COMP%] { + margin-top: 12px; + color: var(--%NS%text); + line-height: 1.55; +} + +.fix[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] { + display: block; + margin-bottom: 4px; + color: var(--%NS%ok); + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.08em; +} + +.rule[_ngcontent-%COMP%] { + display: block; + margin-top: 12px; + color: var(--%NS%text-3); + font-size: 12px; +} + +.empty[_ngcontent-%COMP%] { + display: grid; + gap: 8px; + justify-items: center; + padding: 40px 24px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + text-align: center; + animation: enter 0.35s var(--%NS%ease) both; +} + +.empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { + margin: 0; + max-width: 520px; + line-height: 1.6; +} + +.empty-title[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-strong); + font-size: 15px; + font-weight: 600; +}`]})},oV=(e,t)=>t.id,sV=(e,t)=>t.side+t.id,cV=(e,t)=>t.key;function lV(e,t){e&1&&(z(0,`div`,0),V(1,`span`,43),z(2,`span`),J(3,`Loading…`),B()())}function uV(e,t){e&1&&(z(0,`div`,1)(1,`strong`),J(2,`Could not reach the devtools server.`),B(),z(3,`span`),J(4,`Check that the app's dev server is running with the devtools plugin, then reopen this panel.`),B()())}function dV(e,t){e&1&&(z(0,`span`,48),J(1,`transfer cache`),B())}function fV(e,t){if(e&1&&(z(0,`span`,48),J(1),B()),e&2){let e=K().$implicit;M(),X(`delayed `,e.delayMs,` ms`)}}function pV(e,t){e&1&&(z(0,`span`,57),J(1,`mocked`),B())}function mV(e,t){e&1&&(z(0,`span`,58),J(1,`faulted`),B())}function hV(e,t){if(e&1&&(z(0,`span`,59),J(1,`rule `),z(2,`code`),J(3),B()()),e&2){let e=t;R(`title`,`Matched rule: `+e),M(3),Y(e)}}function gV(e,t){if(e&1){let e=W();z(0,`tr`,47),G(`click`,function(){let t=k(e).$implicit;return A(K(2).openCall(t.id))}),z(1,`td`)(2,`span`,48),J(3),B()(),z(4,`td`,49),J(5),B(),z(6,`td`,50)(7,`button`,51),J(8),B()(),z(9,`td`,52),J(10),B(),z(11,`td`,53),V(12,`span`,54),J(13),B(),z(14,`td`,55),J(15),B(),z(16,`td`)(17,`div`,56),P(18,dV,2,0,`span`,48),P(19,fV,2,1,`span`,48),P(20,pV,2,0,`span`,57),P(21,mV,2,0,`span`,58),P(22,hV,4,2,`span`,59),B()()()}if(e&2){let e,n=t.$implicit,r=K(2);q(`selected`,r.selectedCall()?.id===n.id),M(2),q(`server`,n.side===`server`),M(),Y(n.side===`server`?`SSR`:`Client`),M(2),Y(n.method),M(2),R(`title`,n.url),N(`data-call-id`,n.id)(`aria-pressed`,r.selectedCall()?.id===n.id)(`aria-controls`,r.selectedCall()?`call-preview`:null),M(),X(` `,n.url,` `),M(),R(`title`,n.pageUrl??``),M(),X(` `,n.pageUrl??``,` `),M(),q(`ok`,r.callTone(n)===`ok`)(`redirect`,r.callTone(n)===`redirect`)(`bad`,r.callTone(n)===`bad`),M(2),X(``,r.statusLabel(n),` `),M(2),X(``,n.durationMs,` ms`),M(3),F(n.cacheHit?18:-1),M(),F(n.delayMs?19:-1),M(),F(n.mocked?20:-1),M(),F(n.faulted?21:-1),M(),F((e=r.rulePatternOf(n))?22:-1,e)}}function _V(e,t){if(e&1&&(z(0,`div`,12)(1,`table`)(2,`thead`)(3,`tr`)(4,`th`,44),J(5,`Side`),B(),z(6,`th`,44),J(7,`Method`),B(),z(8,`th`,44),J(9,`URL`),B(),z(10,`th`,44),J(11,`Page`),B(),z(12,`th`,44),J(13,`Status`),B(),z(14,`th`,45),J(15,`Time`),B(),z(16,`th`,44),J(17,`Notes`),B()()(),z(18,`tbody`),I(19,gV,23,26,`tr`,46,sV),B()()()),e&2){let e=K();M(19),L(e.timeline())}}function vV(e,t){e&1&&(z(0,`div`,13)(1,`p`),J(2,`No requests yet.`),B(),z(3,`p`,31),J(4,` Add `),z(5,`code`),J(6,`withNgDevtools()`),B(),J(7,` to `),z(8,`code`),J(9,`provideHttpClient`),B(),J(10,`, then load a page of the app. `),B()())}function yV(e,t){e&1&&(z(0,`p`,66),J(1,` Matched rule `),z(2,`code`),J(3),B()()),e&2&&(M(3),Y(t))}function bV(e,t){if(e&1){let e=W();z(0,`div`,60),G(`keydown.escape`,function(){return k(e),A(K().closePreview())}),z(1,`div`,61)(2,`h3`,62),J(3,`Response preview`),B(),z(4,`button`,63),G(`click`,function(){return k(e),A(K().closePreview())}),J(5,`Close`),B()(),z(6,`p`,64)(7,`span`,49),J(8),B(),z(9,`span`,53),J(10),B(),z(11,`span`,65),J(12),B()(),P(13,yV,4,1,`p`,66),z(14,`pre`),J(15),B()()}if(e&2){let e,n=t,r=K();M(8),Y(n.method),M(),q(`ok`,r.callTone(n)===`ok`)(`redirect`,r.callTone(n)===`redirect`)(`bad`,r.callTone(n)===`bad`),M(),Y(r.statusLabel(n)),M(),R(`title`,n.url),M(),Y(n.url),M(),F((e=r.rulePatternOf(n))?13:-1,e),M(),q(`error`,!!n.error&&!n.cancelled),M(),Y(n.error??n.preview??`(no body)`)}}function xV(e,t){if(e&1&&(z(0,`p`,17),J(1),B()),e&2){let e=K();M(),Y(e.writesOff)}}function SV(e,t){e&1&&(z(0,`p`,31),J(1,` SSR mocks are not transferred to the client: the browser requests the URL again and gets the real response unless the rule also applies on the client. `),B())}function CV(e,t){e&1&&(z(0,`span`),J(1,`passthrough`),B())}function wV(e,t){if(e&1&&(z(0,`span`,53),J(1),B()),e&2){let e=K().$implicit,t=K();q(`ok`,t.statusTone(e.status)===`ok`)(`redirect`,t.statusTone(e.status)===`redirect`)(`bad`,t.statusTone(e.status)===`bad`),M(),Y(e.status)}}function TV(e,t){if(e&1&&(z(0,`span`),J(1),B()),e&2){let e=K().$implicit;M(),X(``,e.delayMs,` ms`)}}function EV(e,t){e&1&&(z(0,`span`),J(1,`mock body`),B())}function DV(e,t){e&1&&(z(0,`p`,74),J(1,` The SSR mock is not written to TransferState, so the browser requests this URL again. `),B())}function OV(e,t){if(e&1){let e=W();z(0,`li`)(1,`label`,67)(2,`input`,68),G(`change`,function(){let t=k(e).$implicit;return A(K().toggleRule(t.id))}),B(),z(3,`code`,69)(4,`span`,70),J(5),B(),J(6),B()(),z(7,`button`,71),G(`click`,function(){let t=k(e).$implicit;return A(K().removeRule(t.id))}),J(8,` Remove `),B(),z(9,`span`,72)(10,`span`),J(11),B(),P(12,CV,2,0,`span`)(13,wV,2,7,`span`,73),P(14,TV,2,1,`span`),P(15,EV,2,0,`span`),B(),P(16,DV,2,0,`p`,74),B()}if(e&2){let e=t.$implicit,n=K();q(`off`,!e.enabled),M(2),R(`checked`,e.enabled)(`disabled`,!n.canWrite()),N(`aria-describedby`,n.canWrite()?null:`http-writes-off`)(`aria-label`,`Enable rule for `+e.pattern),M(),R(`title`,e.pattern),M(2),Y(e.method||`ANY`),M(),X(` `,e.pattern),M(),R(`disabled`,!n.canWrite()),N(`aria-describedby`,n.canWrite()?null:`http-writes-off`)(`aria-label`,`Remove rule for `+e.pattern),M(4),Y(n.targetLabel(e.target)),M(),F(e.status===void 0?12:13),M(2),F(e.delayMs?14:-1),M(),F(e.body?15:-1),M(),F(n.mocksOnServer(e)?16:-1)}}function kV(e,t){e&1&&(z(0,`li`,38),J(1,`No rules. SSR rules apply on the next page load.`),B())}function AV(e,t){if(e&1&&(z(0,`div`)(1,`dt`),J(2,`DOM nodes hydrated`),B(),z(3,`dd`),J(4),B()(),z(5,`div`)(6,`dt`),J(7,`DOM nodes skipped`),B(),z(8,`dd`),J(9),B()(),z(10,`div`)(11,`dt`),J(12,`Mismatched components`),B(),z(13,`dd`),J(14),B()()),e&2){let e=t;M(4),Y(e.hydrated),M(5),Y(e.skipped),M(4),q(`bad`,e.mismatched>0),M(),Y(e.mismatched)}}function jV(e,t){if(e&1&&(z(0,`span`,77)(1,`span`,78),J(2,`Expected`),B(),z(3,`code`),J(4),B()()),e&2){let e=K().$implicit;M(4),Y(e.expected)}}function MV(e,t){if(e&1&&(z(0,`span`,77)(1,`span`,78),J(2,`Actual`),B(),z(3,`code`),J(4),B()()),e&2){let e=K().$implicit;M(4),Y(e.actual)}}function NV(e,t){if(e&1&&(z(0,`li`)(1,`code`),J(2),B(),P(3,jV,5,1,`span`,77),P(4,MV,5,1,`span`,77),B()),e&2){let e=t.$implicit;M(2),Y(`<`+e.component+`>`),M(),F(e.expected?3:-1),M(),F(e.actual?4:-1)}}function PV(e,t){if(e&1&&(z(0,`h3`),J(1),B(),z(2,`ul`,76),I(3,NV,5,3,`li`,null,Cg),B()),e&2){let e=K();M(),X(`Mismatches (`,e.mismatches.length,`)`),M(2),L(e.mismatches)}}function FV(e,t){if(e&1&&(z(0,`li`)(1,`code`),J(2),B()()),e&2){let e=t.$implicit;M(2),Y(e)}}function IV(e,t){if(e&1&&(z(0,`h3`),J(1,`ngSkipHydration hosts`),B(),z(2,`ul`,79),I(3,FV,3,1,`li`,null,Cg),B()),e&2){let e=K();M(3),L(e.skipHydrationHosts)}}function LV(e,t){e&1&&(z(0,`h3`),J(1,`Warnings`),B(),z(2,`p`,31),J(3,` Not captured: add `),z(4,`code`),J(5,`provideNgDevtoolsHttp()`),B(),J(6,` to the app providers. `),B())}function RV(e,t){if(e&1&&(z(0,`pre`,80),J(1),B()),e&2){let e=t.$implicit;M(),Y(e)}}function zV(e,t){e&1&&(z(0,`p`,81),J(1,`No hydration warnings.`),B())}function BV(e,t){if(e&1&&(z(0,`h3`),J(1),B(),I(2,RV,2,1,`pre`,80,Cg,!1,zV,2,0,`p`,81)),e&2){let e=K();M(),X(`Warnings (`,e.warnings.length,`)`),M(),L(e.warnings)}}function VV(e,t){if(e&1&&(z(0,`dl`,75)(1,`div`)(2,`dt`),J(3,`Enabled`),B(),z(4,`dd`)(5,`span`,48),J(6),B()()(),z(7,`div`)(8,`dt`),J(9,`Hydrated components`),B(),z(10,`dd`),J(11),B()(),z(12,`div`)(13,`dt`),J(14,`Hydrated nodes`),B(),z(15,`dd`),J(16),B()(),z(17,`div`)(18,`dt`),J(19,`Skipped components`),B(),z(20,`dd`),J(21),B()(),z(22,`div`)(23,`dt`),J(24,`Incremental defer blocks`),B(),z(25,`dd`),J(26),B()(),P(27,AV,15,5),B(),P(28,PV,5,1),P(29,IV,5,0),P(30,LV,7,0)(31,BV,5,2)),e&2){let e,n=t;M(5),q(`on`,n.enabled)(`off-tag`,!n.enabled),M(),Y(n.enabled?`yes`:`no (client render only)`),M(5),Y(n.hydratedComponents??`n/a`),M(5),Y(n.hydratedNodes??`n/a`),M(5),Y(n.componentsSkippedHydration??`n/a`),M(5),Y(n.deferBlocksWithIncrementalHydration??`n/a`),M(),F((e=n.nodes)?27:-1,e),M(),F(n.mismatches?.length?28:-1),M(),F(n.skipHydrationHosts.length?29:-1),M(),F(n.warningsCaptured===!1?30:31)}}function HV(e,t){e&1&&(z(0,`div`,13)(1,`p`),J(2,`No hydration data for this page.`),B(),z(3,`p`,31),J(4,`Open a server rendered page of the app to see its stats.`),B()())}function UV(e,t){e&1&&(z(0,`div`,13)(1,`p`),J(2,`No TransferState script: this page was not server rendered.`),B()())}function WV(e,t){if(e&1&&(z(0,`p`,83),J(1),B()),e&2){let e=K(2);M(),Y(e.error)}}function GV(e,t){e&1&&(z(0,`span`,48),J(1),B()),e&2&&(M(),Y(t))}function KV(e,t){if(e&1&&(z(0,`span`,48),J(1),B(),z(2,`span`,86),J(3),B()),e&2){let e=t,n=K().$implicit,r=K(3);q(`server`,r.statusTone(e.status)===`ok`)(`fault`,r.statusTone(e.status)===`bad`),M(),X(`HTTP `,e.status),M(2),Y(e.url??n.key)}}function qV(e,t){if(e&1&&(z(0,`span`,86),J(1),B()),e&2){let e=K().$implicit;M(),Y(e.key)}}function JV(e,t){if(e&1&&(z(0,`details`)(1,`summary`),V(2,`span`,85),P(3,GV,2,1,`span`,48),P(4,KV,4,6)(5,qV,2,1,`span`,86),z(6,`span`,87),J(7),B()(),z(8,`pre`),J(9),uv(10,`json`),B()()),e&2){let e,n,r=t.$implicit,i=K(3);M(3),F((e=i.payloadLabel(r))?3:-1,e),M(),F((n=r.http)?4:5,n),M(3),X(``,r.size,` B`),M(2),Y(fv(10,4,r.value))}}function YV(e,t){if(e&1&&(z(0,`p`,82),J(1),B(),P(2,WV,2,1,`p`,83),z(3,`div`,84),I(4,JV,11,6,`details`,null,cV),B()),e&2){let e=K();M(),Y_(` `,e.entries.length,` entr`,e.entries.length===1?`y`:`ies`,`, `,e.size,` bytes `),M(),F(e.error?2:-1),M(2),L(e.entries)}}function XV(e,t){e&1&&P(0,UV,3,0,`div`,13)(1,YV,6,4),e&2&&F(+!!t.found)}function ZV(e,t){e&1&&(z(0,`div`,13)(1,`p`),J(2,`Open a page of the app to see its payload.`),B()())}var QV={pattern:``,method:``,target:`both`,status:``,delayMs:``,body:``},$V=50,eH=class e{rpc=$(null);canWrite=Q(()=>nE(this.rpc(),`http`));writesOff=HT(`http`);loading=j(!1);failed=j(!1);serverCalls=j([]);pages=j([]);payloads=j({});serverDropped=j(0);rules=j([]);hostPageId=JT();selectedPageId=wv({source:()=>this.pages(),computation:(e,t)=>t?.value&&e.some(e=>e.pageId===t.value)?t.value:e.find(e=>e.pageId===this.hostPageId)?.pageId??e[0]?.pageId??null});selectedCallId=j(null);draft=j({...QV});message=j(``);bodyPlaceholder=`{ "error": "Service unavailable" }`;unsubscribe=[];destroyRef=E(Cs);injector=E(xs);host=E(Ml);selected=Q(()=>this.pages().find(e=>e.pageId===this.selectedPageId())??null);selectedPayload=Q(()=>{let e=this.selectedPageId();return e?this.payloads()[e]??null:null});maxCalls=Q(()=>tE(this.rpc()).limits.httpCalls);droppedCalls=Q(()=>(this.selected()?.dropped??0)+this.serverDropped());pageServerCalls=Q(()=>{let e=this.selected()?.initialUrl;return e?this.serverCalls().filter(t=>!t.pageUrl||t.pageUrl===e):this.serverCalls()});timeline=Q(()=>[...this.pageServerCalls(),...this.selected()?.calls??[]].sort((e,t)=>t.at-e.at));selectedCall=Q(()=>this.timeline().find(e=>e.id===this.selectedCallId())??null);draftMocksOnServer=Q(()=>{let e=this.draftRule();return!!e&&this.mocksOnServer(e)});statusError=Q(()=>{let e=this.draft().status.trim();if(!e)return``;let t=Number(e);return Number.isInteger(t)&&t>=100&&t<=599?``:`Set a status from 100 to 599.`});draftRule=Q(()=>{let e=this.draft(),t=e.pattern.trim();if(!t||this.bodyError()||this.statusError()||this.rules().length>=$V)return null;let n=e.body.trim(),r=Math.min(Math.max(Math.round(Number(e.delayMs))||0,0),1e4),i=e.status.trim()?Number(e.status):n?200:void 0;return i===void 0&&!r?null:{pattern:t,enabled:!0,target:e.target,...e.method?{method:e.method}:{},...i===void 0?{}:{status:i},...r?{delayMs:r}:{},...n?{body:n}:{}}});draftHint=Q(()=>{let e=this.draft();return this.rules().length>=$V?`You can add up to ${$V} rules. Remove one to add another.`:e.pattern.trim()?this.statusError()?this.statusError():this.bodyError()?``:this.draftRule()?!e.status.trim()&&e.body.trim()?`With no status, the mock body returns 200.`:``:`Set a status, a delay or a mock body.`:`Enter a URL pattern to add a rule.`});bodyError=Q(()=>{let e=this.draft().body.trim();if(!e)return``;try{return JSON.parse(e),``}catch{return`The mock body must be valid JSON.`}});constructor(){uc(()=>{let e=this.rpc();e&&this.load(e)}),this.destroyRef.onDestroy(()=>this.stopListening())}async load(e){this.loading.set(!0),this.failed.set(!1);try{let t=e.scope(`ng-devtools`).rpc,[n,r]=await Promise.all([t.sharedState(`http`),t.sharedState(`http-payloads`)]);if(this.destroyRef.destroyed)return;let i=e=>{let t=e;this.serverCalls.set(t?.serverCalls??[]),this.serverDropped.set(t?.serverDropped??0),this.pages.set(t?.pages??[]),this.rules.set(t?.rules??[])},a=e=>this.payloads.set(e?.pages??{});i(n.value()),a(r.value()),this.stopListening(),this.unsubscribe=[n.on(`updated`,i),r.on(`updated`,a)]}catch{this.failed.set(!0)}finally{this.loading.set(!1)}}statusLabel(e){return e.cancelled?`cancelled`:e.status?String(e.status):`ERR`}callTone(e){return e.cancelled?`neutral`:this.statusTone(e.status)}rulePatternOf(e){return e.rulePattern?e.rulePattern:e.ruleId?this.rules().find(t=>t.id===e.ruleId)?.pattern??null:null}openCall(e){this.selectedCallId.set(e),Id(()=>this.host.nativeElement.querySelector(`#preview-heading`)?.focus(),{injector:this.injector})}closePreview(){let e=this.selectedCallId();this.selectedCallId.set(null),e&&[...this.host.nativeElement.querySelectorAll(`button[data-call-id]`)].find(t=>t.dataset.callId===e)?.focus()}stopListening(){for(let e of this.unsubscribe.splice(0))e()}statusTone(e){return e===void 0?`neutral`:e===0||e>=400?`bad`:e>=300?`redirect`:e>=200?`ok`:`neutral`}mocksOnServer(e){return e.target!==`client`&&e.status!==void 0&&e.status<400}payloadLabel(e){return e.source===`hydration`?`hydration annotations`:e.fn?`Analog server function ${e.fn.name??e.fn.id}`:e.source===`analog`?`Analog`:null}targetLabel(e){return e===`both`?`SSR + client`:e===`server`?`SSR only`:`Client only`}pageOptions=Q(()=>this.pages().map(e=>({value:e.pageId,label:e.title||e.url})));methodOptions=[{value:``,label:`Any`},...[`GET`,`POST`,`PUT`,`PATCH`,`DELETE`].map(e=>({value:e,label:e}))];targetOptions=[{value:`both`,label:`SSR + client`},{value:`server`,label:`SSR only`},{value:`client`,label:`Client only`}];selectPage(e){e&&this.selectedPageId.set(e),this.selectedCallId.set(null)}setDraft(e,t){this.draft.update(n=>({...n,[e]:t}))}patch(e,t){let n=t.target.value;this.draft.update(t=>({...t,[e]:n}))}async addRule(e){e.preventDefault();let t=this.draftRule();if(!t)return;let n={id:`r${Date.now().toString(36)}${Math.random().toString(36).slice(2,6)}`,...t};await this.saveRules([...this.rules(),n],`Rule added.`,n)&&(this.draft.set({...QV}),this.host.nativeElement.querySelector(`#rule-pattern`)?.focus())}toggleRule(e){let t=this.rules().find(t=>t.id===e);t&&this.saveRules(this.rules().map(t=>t.id===e?{...t,enabled:!t.enabled}:t),`Rule updated.`,t)}removeRule(e){let t=this.rules().find(t=>t.id===e);t&&this.saveRules(this.rules().filter(t=>t.id!==e),`Rule removed.`,t)}async clearCalls(){try{await QT(this.rpc(),`clear-http-calls`),this.selectedCallId.set(null),this.message.set(`Timeline cleared.`)}catch{this.message.set(`Could not clear the timeline.`)}}async saveRules(e,t,n){try{let r=await QT(this.rpc(),`set-http-rules`,e);return this.rules.set(Array.isArray(r)?r:e),this.message.set(n.target===`client`?t:`${t} Reload the page to apply it to SSR.`),!0}catch{return this.message.set(`Could not save the rules.`),!1}}static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-network-inspector`]],inputs:{rpc:[1,`rpc`]},decls:76,vars:32,consts:[[`role`,`status`,1,`state`],[`role`,`alert`,1,`state`,`error`],[1,`toolbar`],[1,`page-picker`],[`id`,`page-picker-label`],[`labelledBy`,`page-picker-label`,`emptyText`,`No connected page`,`placeholder`,`No connected page`,3,`valueChange`,`options`,`value`],[`type`,`button`,3,`click`,`disabled`],[`role`,`status`,1,`message`],[1,`grid`],[`aria-labelledby`,`timeline-heading`,1,`panel`,`wide`],[`id`,`timeline-heading`],[`what`,`HTTP calls`,`limit`,`httpCalls`,3,`dropped`,`max`],[1,`table-wrap`],[1,`empty`],[`id`,`call-preview`,`role`,`region`,`aria-labelledby`,`preview-heading`,1,`preview`],[`aria-labelledby`,`rules-heading`,1,`panel`],[`id`,`rules-heading`],[`id`,`http-writes-off`,1,`muted`,`small`],[1,`rule-form`,3,`submit`],[1,`hint`],[`id`,`rule-pattern`,`required`,``,`spellcheck`,`false`,`autocomplete`,`off`,`placeholder`,`e.g. /api/products`,3,`input`,`value`],[1,`row`],[1,`field-group`],[`id`,`rule-method-label`],[`labelledBy`,`rule-method-label`,3,`valueChange`,`options`,`value`],[`id`,`rule-target-label`],[`labelledBy`,`rule-target-label`,3,`valueChange`,`options`,`value`],[`type`,`number`,`inputmode`,`numeric`,`min`,`100`,`max`,`599`,`placeholder`,`e.g. 500`,`aria-describedby`,`rule-hint`,3,`input`,`value`],[`type`,`number`,`inputmode`,`numeric`,`min`,`0`,`max`,`10000`,`placeholder`,`0`,3,`input`,`value`],[`rows`,`3`,`spellcheck`,`false`,`aria-describedby`,`body-error`,3,`input`,`placeholder`,`value`],[`id`,`body-error`,1,`field-error`],[1,`muted`,`small`],[`id`,`rule-hint`,1,`muted`,`small`],[1,`form-actions`],[`type`,`submit`,3,`disabled`],[1,`rules-heading`],[1,`rules`],[3,`off`],[1,`empty-rule`],[`aria-labelledby`,`hydration-heading`,1,`panel`],[`id`,`hydration-heading`],[`aria-labelledby`,`payload-heading`,1,`panel`,`wide`],[`id`,`payload-heading`],[`aria-hidden`,`true`,1,`spinner`],[`scope`,`col`],[`scope`,`col`,1,`num`],[3,`selected`],[3,`click`],[1,`tag`],[1,`method`],[1,`url`],[`type`,`button`,1,`link`,3,`title`],[1,`page-url`,3,`title`],[1,`status`],[`aria-hidden`,`true`,1,`dot`],[1,`num`],[1,`notes`],[1,`tag`,`mock`],[1,`tag`,`fault`],[1,`tag`,`rule-ref`,3,`title`],[`id`,`call-preview`,`role`,`region`,`aria-labelledby`,`preview-heading`,1,`preview`,3,`keydown.escape`],[1,`preview-head`],[`id`,`preview-heading`,`tabindex`,`-1`],[`type`,`button`,1,`ghost`,3,`click`],[1,`preview-meta`],[1,`preview-url`,3,`title`],[1,`preview-rule`],[1,`inline`],[`type`,`checkbox`,3,`change`,`checked`,`disabled`],[1,`rule-pattern`,3,`title`],[1,`rule-method`],[`type`,`button`,1,`link`,`remove`,3,`click`,`disabled`],[1,`rule-meta`],[1,`status`,3,`ok`,`redirect`,`bad`],[1,`rule-note`],[1,`stats`],[1,`plain`,`mismatches`],[1,`mismatch-row`],[1,`mismatch-label`],[1,`plain`],[1,`warn`],[1,`muted`,`small`,`ok-note`],[1,`muted`,`small`,`summary-line`],[`role`,`alert`,1,`bad`],[1,`entries`],[`aria-hidden`,`true`,1,`chevron`],[1,`entry-key`],[1,`entry-size`]],template:function(e,t){if(e&1&&(P(0,lV,4,0,`div`,0)(1,uV,5,0,`div`,1),z(2,`div`,2)(3,`div`,3)(4,`span`,4),J(5,`Page`),B(),z(6,`app-select`,5),G(`valueChange`,function(e){return t.selectPage(e)}),B()(),z(7,`button`,6),G(`click`,function(){return t.clearCalls()}),J(8,` Clear timeline `),B(),z(9,`p`,7),J(10),B()(),z(11,`div`,8)(12,`section`,9)(13,`h2`,10),J(14),B(),V(15,`app-limit-note`,11),P(16,_V,21,0,`div`,12)(17,vV,11,0,`div`,13),P(18,bV,16,14,`div`,14),B(),z(19,`section`,15)(20,`h2`,16),J(21,`Fault injection`),B(),P(22,xV,2,1,`p`,17),z(23,`form`,18),G(`submit`,function(e){return t.addRule(e)}),z(24,`label`)(25,`span`),J(26,`URL pattern `),z(27,`span`,19),J(28,`(substring or * glob)`),B()(),z(29,`input`,20),G(`input`,function(e){return t.patch(`pattern`,e)}),B()(),z(30,`div`,21)(31,`div`,22)(32,`span`,23),J(33,`Method`),B(),z(34,`app-select`,24),G(`valueChange`,function(e){return t.setDraft(`method`,e??``)}),B()(),z(35,`div`,22)(36,`span`,25),J(37,`Apply on`),B(),z(38,`app-select`,26),G(`valueChange`,function(e){return t.setDraft(`target`,e??`both`)}),B()()(),z(39,`div`,21)(40,`label`),J(41,` Status `),z(42,`input`,27),G(`input`,function(e){return t.patch(`status`,e)}),B()(),z(43,`label`),J(44,` Delay (ms) `),z(45,`input`,28),G(`input`,function(e){return t.patch(`delayMs`,e)}),B()()(),z(46,`label`)(47,`span`),J(48,`Mock JSON body `),z(49,`span`,19),J(50,`(optional)`),B()(),z(51,`textarea`,29),G(`input`,function(e){return t.patch(`body`,e)}),B()(),z(52,`p`,30),J(53),B(),P(54,SV,2,0,`p`,31),z(55,`p`,32),J(56),B(),z(57,`div`,33)(58,`button`,34),J(59,` Add rule `),B()()(),z(60,`h3`,35),J(61),B(),z(62,`ul`,36),I(63,OV,17,17,`li`,37,oV,!1,kV,2,0,`li`,38),B()(),z(66,`section`,39)(67,`h2`,40),J(68,`Hydration`),B(),P(69,VV,32,13)(70,HV,5,0,`div`,13),B(),z(71,`section`,41)(72,`h2`,42),J(73,`TransferState payload`),B(),P(74,XV,2,1)(75,ZV,3,0,`div`,13),B()()),e&2){let e,n,r;F(t.loading()?0:t.failed()?1:-1),M(6),R(`options`,t.pageOptions())(`value`,t.selected()?.pageId??null),M(),R(`disabled`,!t.canWrite()),N(`aria-describedby`,t.canWrite()?null:`http-writes-off`),M(3),Y(t.message()),M(4),X(`HTTP timeline (`,t.timeline().length,`)`),M(),R(`dropped`,t.droppedCalls())(`max`,t.maxCalls()),M(),F(t.timeline().length?16:17),M(2),F((e=t.selectedCall())?18:-1,e),M(4),F(t.canWrite()?-1:22),M(7),R(`value`,t.draft().pattern),M(5),R(`options`,t.methodOptions)(`value`,t.draft().method),M(4),R(`options`,t.targetOptions)(`value`,t.draft().target),M(4),R(`value`,t.draft().status),N(`aria-invalid`,t.statusError()?`true`:null),M(3),R(`value`,t.draft().delayMs),M(6),R(`placeholder`,t.bodyPlaceholder)(`value`,t.draft().body),N(`aria-invalid`,t.bodyError()?`true`:null),M(2),Y(t.bodyError()),M(),F(t.draftMocksOnServer()?54:-1),M(2),Y(t.draftHint()),M(2),R(`disabled`,!t.canWrite()||!t.draftRule()),N(`aria-describedby`,t.canWrite()?`rule-hint`:`http-writes-off`),M(3),X(`Rules (`,t.rules().length,`)`),M(2),L(t.rules()),M(6),F((n=t.selected()?.hydration)?69:70,n),M(5),F((r=t.selectedPayload())?74:75,r)}},dependencies:[oD,XE,ib],styles:[`@charset "UTF-8"; +[_nghost-%COMP%] { + display: block; + color: var(--%NS%text); + font-size: 13px; +} + +.state[_ngcontent-%COMP%] { + display: flex; + align-items: center; + gap: 8px; + margin: 0 0 16px; + padding: 10px 12px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface); + color: var(--%NS%text-2); +} + +.state.error[_ngcontent-%COMP%] { + flex-direction: column; + align-items: flex-start; + gap: 4px; + border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + color: var(--%NS%danger); +} + +.state.error[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] { + font-weight: 600; +} + +.state.error[_ngcontent-%COMP%] span[_ngcontent-%COMP%] { + color: var(--%NS%text); +} + +.spinner[_ngcontent-%COMP%] { + width: 14px; + height: 14px; + border: 2px solid var(--%NS%border-strong); + border-top-color: var(--%NS%accent); + border-radius: 50%; + animation: spin 0.8s linear infinite; +} + +.toolbar[_ngcontent-%COMP%] { + position: sticky; + top: 0; + z-index: 2; + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px 12px; + margin: 0 0 16px; + padding: 8px 12px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: color-mix(in srgb, var(--%NS%surface) 85%, transparent); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); +} + +.toolbar[_ngcontent-%COMP%] .page-picker[_ngcontent-%COMP%] { + display: flex; + flex: 0 1 auto; + align-items: center; + gap: 8px; + min-width: 0; +} + +.page-picker[_ngcontent-%COMP%] > span[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.toolbar[_ngcontent-%COMP%] app-select[_ngcontent-%COMP%] { + width: 280px; + max-width: 420px; +} + +.field-group[_ngcontent-%COMP%] { + display: grid; + gap: 6px; + min-width: 0; + color: var(--%NS%text-2); + font-size: 12px; + font-weight: 500; +} + +.field-group[_ngcontent-%COMP%] app-select[_ngcontent-%COMP%] { + width: 100%; +} + +.message[_ngcontent-%COMP%] { + flex: 1 1 200px; + min-width: 0; + margin: 0; + color: var(--%NS%text-2); + font-size: 12px; + text-align: right; +} + +.message[_ngcontent-%COMP%]:empty { + display: none; +} + +.grid[_ngcontent-%COMP%] { + display: grid; + gap: 16px; + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.panel[_ngcontent-%COMP%] { + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + animation: enter 0.35s var(--%NS%ease) both; + min-width: 0; + padding: 16px; +} + +.wide[_ngcontent-%COMP%] { + grid-column: 1/-1; +} + +h2[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + margin: 0 0 16px; +} + +h3[_ngcontent-%COMP%] { + margin: 16px 0 8px; + color: var(--%NS%text-strong); + font-size: 12px; + font-weight: 600; +} + +p[_ngcontent-%COMP%] { + margin: 0; +} + +label[_ngcontent-%COMP%] { + display: grid; + gap: 6px; + color: var(--%NS%text-2); + font-size: 12px; + font-weight: 500; +} + +label.inline[_ngcontent-%COMP%] { + display: flex; + align-items: center; + gap: 8px; + min-width: 0; + color: var(--%NS%text); + cursor: pointer; +} + +.hint[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-weight: 400; +} + +input[_ngcontent-%COMP%], +select[_ngcontent-%COMP%], +textarea[_ngcontent-%COMP%], +button[_ngcontent-%COMP%] { + font: inherit; + color: var(--%NS%text); +} + +input[_ngcontent-%COMP%]:not([type=checkbox]), +select[_ngcontent-%COMP%], +textarea[_ngcontent-%COMP%] { + width: 100%; + min-width: 0; + padding: 0 10px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background-color: var(--%NS%bg); + transition: border-color 0.2s var(--%NS%ease), box-shadow 0.2s var(--%NS%ease); +} + +input[_ngcontent-%COMP%]:not([type=checkbox]), +select[_ngcontent-%COMP%] { + height: 34px; +} + +select[_ngcontent-%COMP%] { + padding-right: 36px; +} + +textarea[_ngcontent-%COMP%] { + padding: 8px 10px; + font-family: var(--%NS%font-mono); + font-size: 12px; +} + +input[_ngcontent-%COMP%]::placeholder, +textarea[_ngcontent-%COMP%]::placeholder { + color: var(--%NS%text-3); +} + +input[_ngcontent-%COMP%]:not([type=checkbox]):hover, +select[_ngcontent-%COMP%]:hover, +textarea[_ngcontent-%COMP%]:hover { + border-color: color-mix(in srgb, var(--%NS%border-strong) 60%, var(--%NS%text-3)); +} + +input[_ngcontent-%COMP%]:not([type=checkbox]):focus-visible, +select[_ngcontent-%COMP%]:focus-visible, +textarea[_ngcontent-%COMP%]:focus-visible { + outline: none; + border-color: var(--%NS%accent); + box-shadow: 0 0 0 3px var(--%NS%accent-soft); +} + +textarea[aria-invalid=true][_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 60%, transparent); +} + +input[type=checkbox][_ngcontent-%COMP%] { + flex: none; + width: 16px; + height: 16px; + margin: 0; + accent-color: var(--%NS%accent); + cursor: pointer; +} + +button[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + justify-content: center; + height: 34px; + padding: 0 14px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + font-weight: 500; + white-space: nowrap; + cursor: pointer; + transition: background-color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease), transform 0.1s var(--%NS%ease); +} + +button[_ngcontent-%COMP%]:hover:not(:disabled) { + border-color: var(--%NS%accent-line); + background: var(--%NS%surface-3); +} + +button[_ngcontent-%COMP%]:active:not(:disabled) { + transform: translateY(1px); +} + +button[type=submit][_ngcontent-%COMP%] { + border-color: var(--%NS%accent); + background: var(--%NS%accent); + color: var(--%NS%accent-ink); + font-weight: 600; +} + +button[type=submit][_ngcontent-%COMP%]:hover:not(:disabled) { + border-color: var(--%NS%accent-hover); + background: var(--%NS%accent-hover); +} + +button[_ngcontent-%COMP%]:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +button.ghost[_ngcontent-%COMP%] { + height: 28px; + padding: 0 10px; + border-color: transparent; + background: none; + color: var(--%NS%text-2); + font-size: 12px; +} + +button.ghost[_ngcontent-%COMP%]:hover:not(:disabled) { + border-color: var(--%NS%border-strong); + background: var(--%NS%surface-2); + color: var(--%NS%text); +} + +button.link[_ngcontent-%COMP%] { + display: inline; + height: auto; + padding: 0; + border: none; + border-radius: 4px; + background: none; + color: var(--%NS%text); + text-align: left; +} + +button.link[_ngcontent-%COMP%]:hover:not(:disabled) { + border: none; + background: none; + color: var(--%NS%accent); +} + +button.link[_ngcontent-%COMP%]:active:not(:disabled) { + transform: none; +} + +[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.muted[_ngcontent-%COMP%] { + color: var(--%NS%text-2); +} + +.small[_ngcontent-%COMP%] { + font-size: 12px; +} + +.bad[_ngcontent-%COMP%] { + color: var(--%NS%danger); +} + +.empty[_ngcontent-%COMP%] { + display: grid; + gap: 4px; + padding: 24px 16px; + border: 1px dashed var(--%NS%border-strong); + border-radius: var(--%NS%radius-sm); + color: var(--%NS%text); + text-align: center; + line-height: 1.5; +} + +.table-wrap[_ngcontent-%COMP%] { + max-height: min(420px, 60vh); + overflow: auto; + margin: 0 -16px; + padding: 0 16px; +} + +.table-wrap[_ngcontent-%COMP%] [_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: -2px; +} + +thead[_ngcontent-%COMP%] th[_ngcontent-%COMP%] { + position: sticky; + top: 0; + z-index: 1; + background: var(--%NS%surface); +} + +table[_ngcontent-%COMP%] { + width: 100%; + min-width: 560px; + border-collapse: collapse; + font-variant-numeric: tabular-nums; +} + +th[_ngcontent-%COMP%], +td[_ngcontent-%COMP%] { + height: 36px; + padding: 6px 12px; + border-bottom: 1px solid var(--%NS%border); + text-align: left; + vertical-align: middle; + white-space: nowrap; +} + +th[_ngcontent-%COMP%]:first-child, +td[_ngcontent-%COMP%]:first-child { + padding-left: 8px; +} + +th[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + height: 32px; + border-bottom-color: var(--%NS%border-strong); +} + +.num[_ngcontent-%COMP%] { + text-align: right; +} + +td.num[_ngcontent-%COMP%] { + color: var(--%NS%text-2); +} + +tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] { + cursor: pointer; +} + +tbody[_ngcontent-%COMP%] td[_ngcontent-%COMP%] { + transition: background-color 0.15s var(--%NS%ease); +} + +tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover td[_ngcontent-%COMP%] { + background: var(--%NS%surface-2); +} + +tr.selected[_ngcontent-%COMP%] td[_ngcontent-%COMP%], +tr.selected[_ngcontent-%COMP%]:hover td[_ngcontent-%COMP%] { + background: var(--%NS%accent-soft); +} + +tr.selected[_ngcontent-%COMP%] td[_ngcontent-%COMP%]:first-child { + box-shadow: inset 2px 0 0 var(--%NS%accent); +} + +.method[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); + font-size: 12px; + font-weight: 600; + color: var(--%NS%text-strong); +} + +td.url[_ngcontent-%COMP%] { + width: 100%; + max-width: 0; + font-family: var(--%NS%font-mono); + font-size: 12px; +} + +td.url[_ngcontent-%COMP%] button.link[_ngcontent-%COMP%] { + display: block; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +tr.selected[_ngcontent-%COMP%] td.url[_ngcontent-%COMP%] button.link[_ngcontent-%COMP%] { + color: var(--%NS%text-strong); +} + +td.page-url[_ngcontent-%COMP%] { + max-width: 160px; + overflow: hidden; + color: var(--%NS%text-2); + font-family: var(--%NS%font-mono); + font-size: 12px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.rule-note[_ngcontent-%COMP%] { + grid-column: 1/-1; + margin: 0; + padding-left: 24px; + color: var(--%NS%text-2); + font-size: 12px; +} + +.mismatches[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { + display: grid; + gap: 4px; + padding: 8px 12px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); +} + +.mismatch-row[_ngcontent-%COMP%] { + display: flex; + gap: 8px; + min-width: 0; + font-size: 12px; +} + +.mismatch-row[_ngcontent-%COMP%] code[_ngcontent-%COMP%] { + min-width: 0; + overflow-wrap: anywhere; +} + +.mismatch-label[_ngcontent-%COMP%] { + flex: none; + width: 64px; + color: var(--%NS%text-2); +} + +.status[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); + font-size: 12px; + font-weight: 600; + color: var(--%NS%text-2); +} + +.status.ok[_ngcontent-%COMP%] { + color: var(--%NS%ok); +} + +.status.bad[_ngcontent-%COMP%] { + color: var(--%NS%danger); +} + +.dot[_ngcontent-%COMP%] { + display: inline-block; + width: 6px; + height: 6px; + margin-right: 6px; + border-radius: 50%; + background: currentColor; + vertical-align: middle; +} + +.notes[_ngcontent-%COMP%] { + display: flex; + gap: 4px; +} + +.tag[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + height: 20px; + padding: 0 8px; + border: 1px solid var(--%NS%border-strong); + border-radius: 99px; + background: var(--%NS%surface-3); + color: var(--%NS%text-2); + font-size: 11px; + font-weight: 600; + white-space: nowrap; +} + +.tag.server[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent); + background: color-mix(in srgb, var(--%NS%accent) 12%, transparent); + color: var(--%NS%accent); +} + +.tag.fault[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); + background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); + color: var(--%NS%danger); +} + +.tag.mock[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent); + background: color-mix(in srgb, var(--%NS%accent) 12%, transparent); + color: var(--%NS%accent); +} + +.tag.rule-ref[_ngcontent-%COMP%] { + gap: 4px; + max-width: 220px; +} + +.tag.rule-ref[_ngcontent-%COMP%] code[_ngcontent-%COMP%] { + overflow: hidden; + min-width: 0; + text-overflow: ellipsis; + white-space: nowrap; + font-family: var(--%NS%font-mono); +} + +.tag.on[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); + background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); + color: var(--%NS%ok); +} + +.tag.off-tag[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); + background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); + color: var(--%NS%warn); +} + +pre[_ngcontent-%COMP%] { + margin: 0; + padding: 10px 12px; + max-height: 240px; + overflow: auto; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%bg); + color: var(--%NS%text-2); + font: 12px/1.5 var(--%NS%font-mono); + white-space: pre-wrap; + overflow-wrap: anywhere; +} + +pre[_ngcontent-%COMP%] + pre[_ngcontent-%COMP%] { + margin-top: 8px; +} + +pre.warn[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); + color: var(--%NS%warn); +} + +pre.error[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); + color: var(--%NS%danger); +} + +.preview[_ngcontent-%COMP%] { + animation: enter 0.2s var(--%NS%ease) both; + margin-top: 16px; +} + +.preview-head[_ngcontent-%COMP%] { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + margin-bottom: 4px; +} + +.preview-head[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] { + margin: 0; +} + +.preview-meta[_ngcontent-%COMP%] { + display: flex; + align-items: baseline; + gap: 8px; + min-width: 0; + margin-bottom: 8px; +} + +.preview-rule[_ngcontent-%COMP%] { + margin-bottom: 8px; + color: var(--%NS%text-2); + font-size: 12px; +} + +.preview-url[_ngcontent-%COMP%] { + min-width: 0; + overflow: hidden; + color: var(--%NS%text-2); + font-family: var(--%NS%font-mono); + font-size: 12px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.rule-form[_ngcontent-%COMP%] { + display: grid; + gap: 12px; +} + +.row[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 12px; +} + +@media (max-width: 420px) { + .row[_ngcontent-%COMP%] { + grid-template-columns: minmax(0, 1fr); + } +} +.field-error[_ngcontent-%COMP%] { + margin-top: -4px; + color: var(--%NS%danger); + font-size: 12px; +} + +.field-error[_ngcontent-%COMP%]:empty { + display: none; +} + +.form-actions[_ngcontent-%COMP%] { + display: flex; +} + +.rules-heading[_ngcontent-%COMP%] { + margin-top: 24px; +} + +.rules[_ngcontent-%COMP%], +.plain[_ngcontent-%COMP%] { + display: grid; + gap: 8px; + margin: 0; + padding: 0; + list-style: none; +} + +.rules[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + gap: 4px 12px; + padding: 8px 12px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface-2); + transition: border-color 0.2s var(--%NS%ease), opacity 0.2s var(--%NS%ease); +} + +.rules[_ngcontent-%COMP%] li[_ngcontent-%COMP%]:hover { + border-color: var(--%NS%border-strong); +} + +.rules[_ngcontent-%COMP%] li.off[_ngcontent-%COMP%] .rule-pattern[_ngcontent-%COMP%] { + color: var(--%NS%text-2); + text-decoration: line-through; +} + +.rules[_ngcontent-%COMP%] li.off[_ngcontent-%COMP%] .rule-method[_ngcontent-%COMP%], +.rules[_ngcontent-%COMP%] li.off[_ngcontent-%COMP%] .rule-meta[_ngcontent-%COMP%], +.rules[_ngcontent-%COMP%] li.off[_ngcontent-%COMP%] .rule-meta[_ngcontent-%COMP%] .status[_ngcontent-%COMP%] { + color: var(--%NS%text-3); +} + +.rules[_ngcontent-%COMP%] li.empty-rule[_ngcontent-%COMP%] { + display: block; + padding: 16px 12px; + border-style: dashed; + border-color: var(--%NS%border-strong); + background: none; + color: var(--%NS%text-2); + text-align: center; +} + +.rule-pattern[_ngcontent-%COMP%] { + min-width: 0; + overflow: hidden; + color: var(--%NS%text-strong); + text-overflow: ellipsis; + white-space: nowrap; +} + +.rule-method[_ngcontent-%COMP%] { + color: var(--%NS%accent); + font-weight: 600; +} + +.rule-meta[_ngcontent-%COMP%] { + display: flex; + flex-wrap: wrap; + grid-column: 1/-1; + gap: 4px 8px; + padding-left: 24px; + color: var(--%NS%text-2); + font-size: 12px; + font-variant-numeric: tabular-nums; +} + +.rule-meta[_ngcontent-%COMP%] > span[_ngcontent-%COMP%] + span[_ngcontent-%COMP%]::before { + content: "·"; + margin-right: 8px; + color: var(--%NS%text-3); +} + +.rule-meta[_ngcontent-%COMP%] .status[_ngcontent-%COMP%] { + font-size: 11px; +} + +.rules[_ngcontent-%COMP%] button.remove[_ngcontent-%COMP%] { + padding: 2px 4px; + color: var(--%NS%text-2); + font-size: 12px; +} + +.rules[_ngcontent-%COMP%] button.remove[_ngcontent-%COMP%]:hover:not(:disabled) { + color: var(--%NS%danger); +} + +.plain[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { + overflow-wrap: anywhere; +} + +code[_ngcontent-%COMP%] { + font-family: var(--%NS%font-mono); + font-size: 12px; +} + +.stats[_ngcontent-%COMP%] { + display: grid; + margin: 0; +} + +.stats[_ngcontent-%COMP%] > div[_ngcontent-%COMP%] { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + min-height: 36px; + padding: 6px 0; + border-bottom: 1px solid var(--%NS%border); +} + +.stats[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]:last-child { + border-bottom: none; +} + +dt[_ngcontent-%COMP%] { + color: var(--%NS%text-2); +} + +dd[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-strong); + font-weight: 600; + font-variant-numeric: tabular-nums; + text-align: right; +} + +.ok-note[_ngcontent-%COMP%] { + color: var(--%NS%text-2); +} + +.summary-line[_ngcontent-%COMP%] { + margin-bottom: 8px; + font-variant-numeric: tabular-nums; +} + +.entries[_ngcontent-%COMP%] { + border-top: 1px solid var(--%NS%border); +} + +details[_ngcontent-%COMP%] { + border-bottom: 1px solid var(--%NS%border); +} + +details[_ngcontent-%COMP%] pre[_ngcontent-%COMP%] { + margin: 0 0 12px; +} + +summary[_ngcontent-%COMP%] { + display: flex; + align-items: center; + gap: 8px; + min-height: 36px; + padding: 6px 4px; + border-radius: 4px; + list-style: none; + cursor: pointer; + transition: background-color 0.15s var(--%NS%ease); +} + +summary[_ngcontent-%COMP%]::-webkit-details-marker { + display: none; +} + +summary[_ngcontent-%COMP%]:hover { + background: var(--%NS%surface-2); +} + +.chevron[_ngcontent-%COMP%] { + flex: none; + width: 6px; + height: 6px; + margin: 0 4px; + border-right: 1.5px solid var(--%NS%text-3); + border-bottom: 1.5px solid var(--%NS%text-3); + transform: rotate(-45deg); + transition: transform 0.15s var(--%NS%ease); +} + +details[open][_ngcontent-%COMP%] .chevron[_ngcontent-%COMP%] { + transform: rotate(45deg); +} + +.entry-key[_ngcontent-%COMP%] { + flex: 1 1 auto; + min-width: 0; + overflow: hidden; + font-family: var(--%NS%font-mono); + font-size: 12px; + text-overflow: ellipsis; + white-space: nowrap; +} + +summary[_ngcontent-%COMP%]:hover .entry-key[_ngcontent-%COMP%] { + color: var(--%NS%accent); +} + +.entry-size[_ngcontent-%COMP%] { + flex: none; + color: var(--%NS%text-2); + font-size: 12px; + font-variant-numeric: tabular-nums; +} + +@media (max-width: 760px) { + .grid[_ngcontent-%COMP%] { + grid-template-columns: minmax(0, 1fr); + } + .toolbar[_ngcontent-%COMP%] .page-picker[_ngcontent-%COMP%] { + flex: 1 1 100%; + } + .toolbar[_ngcontent-%COMP%] app-select[_ngcontent-%COMP%] { + flex: 1 1 auto; + width: auto; + max-width: none; + } + .message[_ngcontent-%COMP%] { + text-align: left; + } +}`]})};function tH(e,t){e&1&&(fs(),H(0,`svg`,9),Fg(1,`path`,20),U())}function nH(e,t){e&1&&(fs(),H(0,`svg`,10),Fg(1,`path`,21)(2,`path`,22)(3,`path`,23)(4,`path`,24),U())}function rH(e,t){e&1&&(fs(),H(0,`svg`,9),Fg(1,`path`,25)(2,`path`,26)(3,`path`,27)(4,`path`,28)(5,`path`,29)(6,`path`,30),U())}function iH(e,t){if(e&1&&(H(0,`a`,15),Fg(1,`img`,31),H(2,`span`,32)(3,`span`,33),J(4,`Being built by`),U(),H(5,`strong`),J(6),U(),H(7,`span`,34),J(8),U()(),H(9,`span`,35),J(10,`→`),U(),H(11,`span`,36),J(12,`(opens in a new tab)`),U()()),e&2){let e=t,n=K();Vg(`href`,`https://github.com/santoshyadavdev/angular-devtools/pull/`+n.info().pr,ku),M(),Vg(`src`,`https://github.com/`+e.login+`.png?size=96`,ku),M(5),Y(e.name),M(2),Z(`@`,e.login,` · PR #`,n.info().pr)}}function aH(e,t){if(e&1&&(H(0,`a`,16)(1,`span`,32)(2,`strong`),J(3),U()(),H(4,`span`,35),J(5,`→`),U(),H(6,`span`,36),J(7,`(opens in a new tab)`),U()()),e&2){let e=t;Vg(`href`,e.href,ku),M(3),Y(e.label)}}function oH(e,t){if(e&1&&(H(0,`li`),J(1),U()),e&2){let e=t.$implicit,n=t.$index;C_(`animation-delay`,200+n*120,`ms`),M(),Y(e)}}var sH=class e{info=$.required();static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-coming-soon`]],hostVars:2,hostBindings:function(e,t){e&2&&C_(`--%NS%brand`,t.info().color)},inputs:{info:[1,`info`]},decls:29,vars:7,consts:[[`aria-labelledby`,`soon-title`,1,`soon`],[`aria-hidden`,`true`,1,`stage`],[1,`ring`,`r1`],[1,`ring`,`r2`],[1,`orbit`,`o1`],[1,`dot`],[1,`orbit`,`o2`],[1,`orbit`,`o3`],[1,`logo`],[`viewBox`,`0 0 256 256`,`width`,`96`,`height`,`96`],[`viewBox`,`0 0 256 182`,`width`,`104`,`height`,`74`],[1,`badge`],[`aria-hidden`,`true`,1,`spark`],[`id`,`soon-title`],[1,`summary`],[`target`,`_blank`,`rel`,`noopener noreferrer`,1,`author`,3,`href`],[`target`,`_blank`,`rel`,`noopener noreferrer`,1,`author`,`cta`,3,`href`],[1,`plans-title`],[1,`plans`],[3,`animation-delay`],[`fill`,`#3c5afd`,`d`,`M237.248 18.752q18.061 18.06 18.748 45.247V192c-.457 18.12-6.707 33.207-18.748 45.247c-12.04 12.04-27.127 18.291-45.251 18.752H63.999q-27.187-.69-45.247-18.752C6.712 225.208.46 210.121 0 192.001V64q.69-27.187 18.752-45.247Q36.812.692 63.999 0h127.998c18.124.46 33.211 6.711 45.251 18.752m-17.655 103q-6.033-6.003-6.28-15.066V64q-.192-9.063-6.221-15.091c-4.02-4.023-9.054-6.093-15.095-6.22h-21.312v106.626L85.315 42.687H63.999c-6.042.128-11.072 2.198-15.091 6.221c-4.023 4.02-6.093 9.05-6.22 15.09v42.688q-.249 9.063-6.281 15.066q-6.03 5.996-15.091 6.246q9.062.255 15.09 6.25c4.024 4.002 6.115 9.024 6.281 15.066V192c.128 6.037 2.198 11.072 6.221 15.091q6.03 6.03 15.09 6.22h21.317V106.687l85.37 106.627h21.312c6.041-.128 11.076-2.202 15.095-6.221s6.093-9.054 6.22-15.09v-42.688q.249-9.063 6.281-15.066q6.03-5.995 15.091-6.25q-9.062-.25-15.09-6.246`],[`fill`,`#c30f2e`,`d`,`M152.228.001L48.455 181.046H256L152.228 0z`],[`fill`,`#dd0330`,`d`,`M88.314 26.967L0 181.52h176.628L88.315 26.967z`],[`fill`,`#fff`,`d`,`M18.167 135.294h220.236v-2.419H18.167z`],[`fill`,`#fff`,`d`,`M204.38 170.667c-.861 0-1.67-.358-2.348-1.034c-4.045-4.063-4.221-20.586-4.026-45.33c.11-13.521.257-32.043-1.9-33.504c-2.104.873-2.315 16.172-2.451 26.301c-.162 11.785-.327 23.98-2.242 30.189c-.57 1.84-1.306 3.525-2.786 3.39c-2.086-.185-2.76-3.48-4.317-16.478c-.647-5.4-1.317-10.98-2.101-13.14a11 11 0 0 0-.269-.66c-.835 1.889-1.8 7.079-2.47 10.682c-.927 4.976-1.803 9.676-2.9 11.726c-.847 1.575-2.19 3.63-4.067 3.231c-2.558-.537-3.323-5.693-3.552-8.719c0-25.455-3.33-28.417-3.997-28.753l-.107.081l-.162-.036c-2.377 1.038-2.506 9.294-2.627 17.276c-.096 5.856-.198 12.492-1.053 18.701c-1.108 8.05-2.448 9.603-4.115 9.507c-3.838-.262-3.95-13.482-3.95-14.987c0-.472.012-1.028.027-1.642c.074-3.076.205-8.8-1.687-10.604c-.25-.239-.603-.515-.879-.437c-1.347.339-2.745 4.714-3.209 6.153c-.147.457-.265.833-.364 1.09c-.078.214-.177.515-.294.88c-1.02 3.095-2.18 6.183-4.16 6.944c-.732.284-1.498.222-2.216-.183c-.953-.541-1.73-1.646-2.455-3.482c-.397-1.016-.735-2.046-1.082-3.081c-.419-1.263-.85-2.569-1.384-3.808c-.419-.965-1.464-1.4-2.796-1.164c-2.768.494-3.232 3.29-3.622 7.5c-.07.733-.137 1.452-.228 2.128c-.011.198-.501 6.38-.814 8.344c-.865 5.39-2.002 7.512-3.89 7.358c-4.66-.398-6.798-20.836-6.684-29.47c.088-6.592-1.104-9-1.818-9.382c-.074-.034-.189-.096-.46.095c-.843.571-1.594 2.348-1.363 4.215c2.566 20.32.674 43.592-3.96 48.833c-1.46 1.649-3.448 1.627-4.832.236c-4.049-4.064-4.218-20.586-4.026-45.33c.11-13.521.254-32.043-1.9-33.504c-2.105.873-2.311 16.172-2.45 26.301c-.163 11.785-.329 23.98-2.246 30.189c-.57 1.84-1.307 3.525-2.782 3.39c-2.091-.186-2.761-3.48-4.321-16.478c-.649-5.4-1.319-10.98-2.101-13.14c-.1-.273-.189-.49-.27-.66c-.832 1.889-1.796 7.079-2.466 10.682c-.927 4.976-1.803 9.676-2.904 11.726c-.846 1.575-2.19 3.63-4.063 3.231c-2.558-.537-3.324-5.693-3.552-8.719c-.003-25.455-3.33-28.417-3.997-28.753l-.106.081l-.166-.036c-2.374 1.038-2.503 9.293-2.629 17.276c-.091 5.856-.194 12.492-1.048 18.701c-1.107 8.05-2.437 9.618-4.111 9.507c-3.846-.262-3.958-13.482-3.958-14.987c0-.472.016-1.028.03-1.642c.074-3.076.207-8.8-1.685-10.604c-.25-.239-.603-.515-.88-.438c-1.347.34-2.75 4.715-3.206 6.155a47 47 0 0 1-.364 1.09q-.16.432-.298.875c-1.02 3.096-2.18 6.187-4.155 6.95c-.736.282-1.506.22-2.22-.185c-.953-.541-1.734-1.646-2.454-3.482c-.398-1.016-.74-2.046-1.083-3.081c-.42-1.263-.854-2.569-1.387-3.808c-.416-.965-1.465-1.4-2.797-1.164c-3.188.567-3.943 4.52-4.55 9.238l-.106.839l-2.411-.32l.114-.824c.527-4.137 1.328-10.39 6.53-11.31c2.446-.435 4.585.581 5.446 2.583c.578 1.34 1.031 2.695 1.466 4.008c.324.99.654 1.98 1.037 2.959c.674 1.708 1.197 2.15 1.392 2.257c1.218-.38 2.462-4.167 2.873-5.414c.13-.402.24-.732.328-.968c.085-.233.195-.571.328-.98c1.097-3.43 2.474-7.144 4.918-7.762c.747-.191 1.903-.166 3.157 1.035c2.665 2.544 2.525 8.48 2.433 12.41c-.014.59-.028 1.126-.028 1.583c0 6.272.93 10.655 1.64 12.16c.367-.77.998-2.63 1.598-7.007c.831-6.066.938-12.624 1.027-18.41c.161-10.24.275-17.663 3.982-19.408c.552-.339 1.469-.522 2.436-.033c3.586 1.803 5.326 11.885 5.326 30.817c.225 2.926 1.013 6.006 1.66 6.448c.004-.066.53-.39 1.394-2.01c.925-1.718 1.845-6.665 2.655-11.026c1.792-9.614 2.606-12.989 4.726-13.166c1.615-.158 2.362 1.896 2.676 2.76c.883 2.422 1.537 7.888 2.23 13.678c.54 4.49 1.31 10.902 2.094 13.497c.084-.228.18-.5.283-.836c1.815-5.878 1.98-17.887 2.14-29.507c.22-16.14.503-26.139 3.448-28.226a2.44 2.44 0 0 1 2.233-.316c3.448 1.144 3.714 11.254 3.519 35.8c-.14 17.799-.313 39.952 3.323 43.603c.317.32.542.32.622.32c.17 0 .413-.161.67-.452c3.681-4.162 6.01-26.022 3.372-46.927c-.328-2.602.677-5.337 2.392-6.514c.946-.652 2.036-.736 2.978-.232c2.145 1.14 3.187 5.024 3.102 11.546c-.15 11.387 2.584 24.714 4.37 26.842c.282-.471.842-1.763 1.379-5.145c.301-1.87.799-8.153.806-8.216c.09-.71.155-1.398.217-2.097c.369-3.924.82-8.804 5.613-9.654c2.444-.435 4.583.577 5.448 2.583c.577 1.34 1.027 2.695 1.46 4.008c.332.99.664 1.98 1.046 2.959c.67 1.708 1.197 2.15 1.387 2.257c1.218-.38 2.467-4.167 2.875-5.41c.132-.402.243-.737.328-.973c.088-.228.195-.57.324-.979c1.1-3.43 2.477-7.144 4.924-7.762c.74-.191 1.9-.166 3.154 1.035c2.665 2.543 2.526 8.48 2.437 12.41q-.029.792-.033 1.583c0 6.272.931 10.655 1.641 12.16c.365-.77.994-2.63 1.601-7.007c.832-6.066.931-12.624 1.027-18.41c.159-10.24.273-17.663 3.98-19.408c.55-.339 1.467-.522 2.44-.033c3.58 1.803 5.325 11.884 5.325 30.817c.224 2.926 1.012 6.006 1.656 6.448c.008-.066.526-.39 1.399-2.01c.923-1.718 1.84-6.665 2.653-11.026c1.786-9.614 2.602-12.989 4.722-13.166c1.62-.158 2.367 1.896 2.68 2.76c.88 2.422 1.535 7.888 2.233 13.678c.534 4.49 1.304 10.902 2.092 13.497c.08-.228.176-.5.28-.836c1.813-5.878 1.976-17.887 2.138-29.507c.216-16.14.504-26.139 3.448-28.226a2.45 2.45 0 0 1 2.234-.316c3.452 1.144 3.718 11.254 3.52 35.8c-.141 17.799-.314 39.952 3.319 43.603c.324.32.544.32.63.32c.165 0 .408-.161.662-.452c3.687-4.162 6.014-26.022 3.375-46.927c-.342-2.723.43-5.47 1.84-6.526c.71-.537 1.575-.647 2.37-.313c2.054.877 3.445 4.63 4.255 11.484c.339 2.87.641 5.974.931 9.036c.641 6.683 1.509 15.69 2.684 17.67c.36-.46 1.096-1.704 2.19-5.038l2.307.753c-1.696 5.157-3.026 7.1-4.755 6.902c-2.69-.299-3.468-5.734-4.84-20.055c-.29-3.048-.59-6.132-.928-8.989c-1.03-8.74-2.782-9.532-2.801-9.54c-.342.174-1.137 1.992-.842 4.31c2.558 20.32.673 43.597-3.964 48.834c-.747.842-1.587 1.27-2.485 1.27`],[`fill`,`#53b9ff`,`d`,`M39.863 54.115L.311 93.716l60.995 61.179L0 216.385l39.428 39.619l61.43-61.507l61.097 61.068l39.552-39.602z`],[`fill`,`#119eff`,`d`,`m140.517 154.896l-39.658 39.601l61.097 61.069l39.552-39.602z`],[`fill-opacity`,`.2`,`d`,`m140.517 154.896l-39.658 39.601l15.267 15.182z`],[`fill`,`#53b9ff`,`d`,`M194.57 100.985L256 39.478L216.431 0l-61.412 61.384L93.917.311L54.365 39.913L216.01 201.761l39.552-39.602z`],[`fill`,`#119eff`,`d`,`m115.36 100.987l39.659-39.602L93.917.313L54.365 39.914z`],[`fill-opacity`,`.2`,`d`,`m115.359 100.985l39.659-39.601l-15.271-15.186z`],[`width`,`40`,`height`,`40`,`alt`,``,3,`src`],[1,`who`],[1,`by`],[1,`login`],[`aria-hidden`,`true`,1,`go`],[1,`sr-only`]],template:function(e,t){if(e&1&&(H(0,`section`,0)(1,`div`,1),Fg(2,`span`,2)(3,`span`,3),H(4,`span`,4),Fg(5,`span`,5),U(),H(6,`span`,6),Fg(7,`span`,5),U(),H(8,`span`,7),Fg(9,`span`,5),U(),H(10,`div`,8),P(11,tH,2,0,`:svg:svg`,9)(12,nH,5,0,`:svg:svg`,10)(13,rH,7,0,`:svg:svg`,9),U()(),H(14,`p`,11)(15,`span`,12),J(16,`✦`),U(),J(17),U(),H(18,`h2`,13),J(19),U(),H(20,`p`,14),J(21),U(),P(22,iH,13,5,`a`,15),P(23,aH,8,2,`a`,16),H(24,`h3`,17),J(25),U(),H(26,`ul`,18),I(27,oH,2,3,`li`,19,wg),U()()),e&2){let e,n,r;M(11),F((e=t.info().id)===`nativescript`?11:e===`analog`?12:e===`capacitor`?13:-1),M(6),X(` `,t.info().badge),M(2),Y(t.info().heading),M(2),Y(t.info().summary),M(),F((n=t.info().author)?22:-1,n),M(),F((r=t.info().link)?23:-1,r),M(2),X(` `,t.info().link?`In an `+t.info().name+` app`:`On the roadmap`,` `),M(2),L(t.info().plans)}},styles:[`[_nghost-%COMP%] { + display: block; + min-height: 100%; + background: radial-gradient(60% 50% at 50% 18%, color-mix(in srgb, var(--%NS%brand) 22%, transparent), transparent 70%); +} + +.soon[_ngcontent-%COMP%] { + display: flex; + flex-direction: column; + align-items: center; + max-width: 560px; + margin: 0 auto; + padding: 24px 0 40px; + color: var(--%NS%text-2); + text-align: center; +} + +.stage[_ngcontent-%COMP%] { + position: relative; + display: grid; + place-items: center; + width: 180px; + height: 180px; + margin: 0 auto 16px; +} + +.logo[_ngcontent-%COMP%] { + position: relative; + z-index: 2; + display: grid; + place-items: center; + width: 116px; + height: 116px; + border-radius: 32px; + background: var(--%NS%surface-2); + box-shadow: 0 0 0 1px color-mix(in srgb, var(--%NS%brand) 45%, transparent), 0 20px 60px -10px color-mix(in srgb, var(--%NS%brand) 70%, transparent); + animation: _ngcontent-%COMP%_float 4s ease-in-out infinite; +} + +.ring[_ngcontent-%COMP%] { + position: absolute; + inset: 30px; + border-radius: 50%; + border: 1px solid color-mix(in srgb, var(--%NS%brand) 60%, transparent); + animation: _ngcontent-%COMP%_pulse 3s ease-out infinite; +} + +.r2[_ngcontent-%COMP%] { + animation-delay: 1.5s; +} + +.orbit[_ngcontent-%COMP%] { + position: absolute; + inset: 0; + animation: spin 9s linear infinite; +} + +.o2[_ngcontent-%COMP%] { + inset: 18px; + animation-duration: 6s; + animation-direction: reverse; +} + +.o3[_ngcontent-%COMP%] { + inset: 40px; + animation-duration: 12s; +} + +.dot[_ngcontent-%COMP%] { + position: absolute; + top: -4px; + left: 50%; + width: 8px; + height: 8px; + margin-left: -4px; + border-radius: 50%; + background: var(--%NS%brand); + box-shadow: 0 0 12px var(--%NS%brand); +} + +.o2[_ngcontent-%COMP%] .dot[_ngcontent-%COMP%] { + width: 6px; + height: 6px; + background: var(--%NS%accent); + box-shadow: 0 0 10px var(--%NS%accent); +} + +.o3[_ngcontent-%COMP%] .dot[_ngcontent-%COMP%] { + width: 4px; + height: 4px; + background: var(--%NS%text-strong); +} + +.badge[_ngcontent-%COMP%] { + position: relative; + display: inline-flex; + align-items: center; + gap: 6px; + height: 24px; + margin: 0 0 12px; + padding: 0 12px; + overflow: hidden; + border: 1px solid color-mix(in srgb, var(--%NS%brand) 55%, transparent); + border-radius: 99px; + background: color-mix(in srgb, var(--%NS%brand) 14%, var(--%NS%surface)); + color: var(--%NS%text-strong); + font-size: 12px; + font-weight: 600; + letter-spacing: 0.04em; +} + +.badge[_ngcontent-%COMP%]::after { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.2) 50%, transparent 80%); + transform: translateX(-100%); + animation: _ngcontent-%COMP%_shimmer 2.8s ease-in-out infinite; +} + +.spark[_ngcontent-%COMP%] { + color: var(--%NS%accent); + animation: _ngcontent-%COMP%_twinkle 1.6s ease-in-out infinite; +} + +h2[_ngcontent-%COMP%] { + margin: 0; + color: var(--%NS%text-strong); + font-size: 28px; + line-height: 1.2; + letter-spacing: -0.02em; + text-wrap: balance; + overflow-wrap: anywhere; +} + +.summary[_ngcontent-%COMP%] { + max-width: 480px; + margin: 12px 0 24px; + font-size: 14px; + line-height: 1.6; + text-wrap: pretty; +} + +.author[_ngcontent-%COMP%] { + display: inline-flex; + align-items: center; + gap: 12px; + max-width: 100%; + min-height: 44px; + padding: 8px 16px 8px 8px; + border: 1px solid var(--%NS%border-strong); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + color: var(--%NS%text); + text-align: left; + text-decoration: none; + transition: border-color 0.2s var(--%NS%ease), background-color 0.2s var(--%NS%ease), transform 0.2s var(--%NS%ease); +} + +.author[_ngcontent-%COMP%]:hover { + border-color: color-mix(in srgb, var(--%NS%brand) 70%, transparent); + background: var(--%NS%surface-2); + transform: translateY(-2px); +} + +.author[_ngcontent-%COMP%]:active { + transform: none; +} + +.author[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: 2px; +} + +.cta[_ngcontent-%COMP%] { + padding: 8px 16px; +} + +.author[_ngcontent-%COMP%] img[_ngcontent-%COMP%] { + flex: none; + border-radius: 50%; + background: var(--%NS%surface-3); +} + +.who[_ngcontent-%COMP%] { + display: grid; + min-width: 0; + line-height: 1.35; +} + +.who[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] { + overflow: hidden; + color: var(--%NS%text-strong); + font-size: 14px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.by[_ngcontent-%COMP%], +.login[_ngcontent-%COMP%] { + overflow: hidden; + color: var(--%NS%text-2); + font-size: 12px; + font-variant-numeric: tabular-nums; + text-overflow: ellipsis; + white-space: nowrap; +} + +.go[_ngcontent-%COMP%] { + flex: none; + margin-left: 4px; + color: var(--%NS%brand); + font-size: 16px; + transition: transform 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease); +} + +.author[_ngcontent-%COMP%]:hover .go[_ngcontent-%COMP%], +.author[_ngcontent-%COMP%]:focus-visible .go[_ngcontent-%COMP%] { + transform: translateX(3px); +} + +.plans-title[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + width: 100%; + max-width: 440px; + margin: 32px 0 12px; + text-align: left; +} + +.plans[_ngcontent-%COMP%] { + display: grid; + gap: 8px; + width: 100%; + max-width: 440px; + margin: 0 auto; + padding: 0; + list-style: none; + text-align: left; +} + +.plans[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { + display: flex; + gap: 12px; + align-items: flex-start; + padding: 12px 16px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius-sm); + background: var(--%NS%surface); + color: var(--%NS%text); + font-size: 13px; + line-height: 20px; + overflow-wrap: anywhere; + opacity: 0; + animation: _ngcontent-%COMP%_rise 0.5s var(--%NS%ease) forwards; +} + +.plans[_ngcontent-%COMP%] li[_ngcontent-%COMP%]::before { + content: ""; + flex: none; + width: 8px; + height: 8px; + margin-top: 6px; + border-radius: 50%; + background: var(--%NS%brand); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%brand) 20%, transparent); +} + +@media (max-height: 640px) { + .soon[_ngcontent-%COMP%] { + padding-top: 12px; + } + .stage[_ngcontent-%COMP%] { + width: 120px; + height: 120px; + margin-bottom: 8px; + } + .logo[_ngcontent-%COMP%] { + width: 80px; + height: 80px; + border-radius: 22px; + } + .logo[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] { + width: 60px; + height: auto; + } + .o3[_ngcontent-%COMP%] { + display: none; + } + h2[_ngcontent-%COMP%] { + font-size: 22px; + } +} +@media (max-width: 420px) { + h2[_ngcontent-%COMP%] { + font-size: 22px; + } + .author[_ngcontent-%COMP%] { + align-self: stretch; + } + .who[_ngcontent-%COMP%] { + flex: 1; + } +} +@keyframes _ngcontent-%COMP%_float { + 50% { + transform: translateY(-10px) rotate(-2deg); + } +} +@keyframes _ngcontent-%COMP%_pulse { + from { + transform: scale(0.8); + opacity: 0.9; + } + to { + transform: scale(1.6); + opacity: 0; + } +} +@keyframes _ngcontent-%COMP%_shimmer { + 60%, 100% { + transform: translateX(100%); + } +} +@keyframes _ngcontent-%COMP%_twinkle { + 50% { + opacity: 0.35; + transform: scale(0.8); + } +} +@keyframes _ngcontent-%COMP%_rise { + from { + opacity: 0; + transform: translateY(8px); + } + to { + opacity: 1; + transform: none; + } +} +@media (prefers-reduced-motion: reduce) { + .logo[_ngcontent-%COMP%], + .ring[_ngcontent-%COMP%], + .orbit[_ngcontent-%COMP%], + .badge[_ngcontent-%COMP%]::after, + .spark[_ngcontent-%COMP%] { + animation: none; + } + .ring[_ngcontent-%COMP%] { + opacity: 0.3; + } + .plans[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { + opacity: 1; + animation: none; + } + .author[_ngcontent-%COMP%]:hover, + .author[_ngcontent-%COMP%]:hover .go[_ngcontent-%COMP%] { + transform: none; + } +}`]})},cH=` + .devframes-dock-entry button { + transition: opacity 0.2s, filter 0.2s, background-color 0.2s, transform 0.3s; + } + .devframes-dock-entry button:not(.scale-120) { + opacity: 0.45; + filter: saturate(0); + } + .devframes-dock-entry button:not(.scale-120):hover, + .devframes-dock-entry button:not(.scale-120):focus-visible { + opacity: 1; + filter: none; + } + .devframes-dock-entry button:focus-visible { + outline: 2px solid #f5a524; + outline-offset: 2px; + } + .devframes-dock-entry button.scale-120 { + transform: none; + background: rgba(245, 165, 36, 0.16); + box-shadow: inset 0 0 0 1px rgba(245, 165, 36, 0.6); + } + iframe { + background: #0b0b0e; + color-scheme: dark; + } + @media (prefers-reduced-motion: reduce) { + .devframes-dock-entry button { + transition: none; + } + } +`;function lH(e,t=50){let n=e?.querySelector(`devframes-dock-standalone`)?.shadowRoot;if(n){if(n.querySelector(`style[data-ng-devtools]`))return;let t=e.createElement(`style`);t.dataset.ngDevtools=``,t.textContent=cH,n.append(t);return}t>0&&setTimeout(()=>lH(e,t-1),100)}var uH=`__DEVFRAME_HUB_CLIENT_CONTEXT__`,dH=`ng-devtools:`;function fH(){try{return window.parent===window?void 0:window.parent[uH]}catch{return}}function pH(e,t,n=50){let r=fH();if(!r){if(n<=0||window.parent===window)return()=>{};let r=()=>{},i=setTimeout(()=>r=pH(e,t,n-1),100);return()=>{clearTimeout(i),r()}}let i=e.map(e=>r.docks.getStateById(dH+e)?.events.on(`entry:activated`,()=>t(e))??(()=>{})),a=r.docks.selectedId,o=e.find(e=>dH+e===a);return o&&t(o),()=>i.forEach(e=>e())}async function mH(e){let t=fH();if(!t)return!1;try{return await t.docks.switchEntry(dH+e)}catch{return!1}}var hH=`ng-devtools-tab`;function gH(e,t,n){let r=new URLSearchParams(e.replace(/^#/,``)).get(`tab`)||t;return n.find(e=>e===r)}function _H(e){try{return sessionStorage.getItem(`${hH}:${e}`)}catch{return null}}function vH(e,t){try{sessionStorage.setItem(`${hH}:${e}`,t)}catch{}}function yH(e,t){try{return new URL(e,t.href).origin===t.origin}catch{return!1}}function bH(e,t){if(t.protocol!==`chrome-extension:`)return!1;try{let{protocol:t}=new URL(e);return t===`http:`||t===`https:`}catch{return!1}}function xH(e=location){let t=new URLSearchParams(e.search).get(`baseURL`);if(t&&(yH(t,e)||bH(t,e)))return t;if(!(e.pathname.includes(`__ng-devtools`)||e.pathname.includes(`__devframes/`)))return[`/__ng-devtools/`,`./`]}var SH=[`nav`],CH=[`main`],wH=(e,t)=>t.id;function TH(e,t){e&1&&(fs(),z(0,`svg`,4),V(1,`path`,18),B())}function EH(e,t){e&1&&(fs(),z(0,`svg`,4),V(1,`path`,19)(2,`path`,20)(3,`path`,21)(4,`path`,22)(5,`path`,23)(6,`path`,24),B())}function DH(e,t){e&1&&(fs(),z(0,`svg`,5),V(1,`path`,25)(2,`path`,26)(3,`path`,27)(4,`path`,28),B())}function OH(e,t){e&1&&(fs(),z(0,`svg`,6),V(1,`path`,29),B())}function kH(e,t){e&1&&(fs(),z(0,`svg`,7)(1,`defs`)(2,`linearGradient`,30),V(3,`stop`,31)(4,`stop`,32)(5,`stop`,33)(6,`stop`,34)(7,`stop`,35)(8,`stop`,36),B()(),V(9,`path`,37),B())}function AH(e,t){e&1&&(fs(),z(0,`svg`,8),V(1,`path`,38),B())}function jH(e,t){if(e&1){let e=W();z(0,`button`,40),G(`click`,function(){let t=k(e).$implicit;return A(K(2).switchTab(t.id))}),V(1,`app-tab-icon`,41),z(2,`span`),J(3),B()()}if(e&2){let e=t.$implicit,n=K(2);q(`active`,n.tab()===e.id),N(`aria-current`,n.tab()===e.id?`page`:null),M(),R(`name`,e.id),M(2),Y(e.label)}}function MH(e,t){e&1&&I(0,jH,4,5,`button`,39,wH),e&2&&L(K().tabs())}function NH(e,t){e&1&&(z(0,`p`,15),J(1,` Can't reach the devtools server. Check that the dev server is running, then reload. `),B())}function PH(e,t){e&1&&V(0,`app-coming-soon`,16),e&2&&R(`info`,t)}function FH(e,t){e&1&&(z(0,`p`,17),J(1,` This inspector is turned off in the devtools config (`),z(2,`code`),J(3,`inspectors`),B(),J(4,`). `),B())}function IH(e,t){if(e&1){let e=W();z(0,`app-dashboard`,44),G(`navigate`,function(t){return k(e),A(K(2).switchTab(t))}),B()}e&2&&R(`rpc`,K(2).rpc())}function LH(e,t){if(e&1){let e=W();z(0,`app-component-tree`,45),G(`focusHandled`,function(){return k(e),A(K(2).componentFocus.set(null))})(`showForm`,function(t){return k(e),A(K(2).showForm(t))}),B()}if(e&2){let e=K(2);R(`rpc`,e.rpc())(`focus`,e.componentFocus())}}function RH(e,t){e&1&&V(0,`app-route-inspector`,42),e&2&&R(`rpc`,K(2).rpc())}function zH(e,t){e&1&&V(0,`app-signal-inspector`,42),e&2&&R(`rpc`,K(2).rpc())}function BH(e,t){e&1&&V(0,`app-di-inspector`,42),e&2&&R(`rpc`,K(2).rpc())}function VH(e,t){e&1&&V(0,`app-store-inspector`,42),e&2&&R(`rpc`,K(2).rpc())}function HH(e,t){e&1&&V(0,`app-network-inspector`,42),e&2&&R(`rpc`,K(2).rpc())}function UH(e,t){if(e&1){let e=W();z(0,`app-forms-inspector`,46),G(`focusHandled`,function(){return k(e),A(K(2).formFocus.set(null))}),B()}if(e&2){let e=K(2);R(`rpc`,e.rpc())(`focus`,e.formFocus())}}function WH(e,t){e&1&&V(0,`app-pipes-inspector`,42),e&2&&R(`rpc`,K(2).rpc())}function GH(e,t){e&1&&V(0,`app-analog-inspector`,42),e&2&&R(`rpc`,K(2).rpc())}function KH(e,t){if(e&1&&P(0,IH,1,1,`app-dashboard`,42)(1,LH,1,2,`app-component-tree`,43)(2,RH,1,1,`app-route-inspector`,42)(3,zH,1,1,`app-signal-inspector`,42)(4,BH,1,1,`app-di-inspector`,42)(5,VH,1,1,`app-store-inspector`,42)(6,HH,1,1,`app-network-inspector`,42)(7,UH,1,2,`app-forms-inspector`,43)(8,WH,1,1,`app-pipes-inspector`,42)(9,GH,1,1,`app-analog-inspector`,42),e&2){let e;F((e=K().tab())===`dashboard`?0:e===`components`?1:e===`routes`?2:e===`signals`?3:e===`injectors`?4:e===`store`?5:e===`network`?6:e===`forms`?7:e===`pipes`?8:e===`analog`?9:-1)}}var qH=[`angular`,`ngrx`,`analog`,`nativescript`,`capacitor`],JH={angular:`Angular`,ngrx:`NgRx Store`,analog:`Analog`,nativescript:`NativeScript`,capacitor:`Capacitor`},YH={ngrx:`#d770e8`,analog:`#ff5470`,nativescript:`#8196ff`,capacitor:`#53b9ff`},XH={ngrx:`store`,analog:`analog`},ZH={store:`ngrx`,analog:`analog`},QH={nativescript:{id:`nativescript`,name:`NativeScript`,badge:`Coming Soon`,heading:`NativeScript Support`,summary:`Inspect NativeScript Angular apps running natively on iOS and Android, with the same tools.`,color:`#3c5afd`,plans:[`Native overlay that reports the component tree from the device`,`Standalone devtools server your phone or simulator connects to`,`Example NativeScript app to try it end to end`],pr:16,author:{name:`Nathan Walker`,login:`NathanWalker`}},capacitor:{id:`capacitor`,name:`Capacitor`,badge:`Coming Soon`,heading:`Capacitor Support`,summary:`Connect Ionic and Capacitor apps running in a device WebView back to these tools.`,color:`#119eff`,plans:[`Manual overlay start for apps that load from capacitor:// or a device`,`Connection settings passed in, no cross-origin probing`,`Setup guides for the Android emulator and iOS simulator`],pr:21,author:{name:`Erkam Yaman`,login:`erkamyaman`}}},$H={id:`analog`,name:`Analog`,badge:`Not in this app`,heading:`This app doesn’t use Analog`,summary:`In an Analog app this dock shows your file routes, server load() and API calls, render modes and route lint.`,color:`#dd0330`,plans:[`Which page, layout and .server.ts files render a URL`,`Every load(), server function and API call with timing`,`SSR, prerendered or client only, per page`],link:{label:`Get started with Analog`,href:`https://analogjs.org/docs/getting-started`}};function eU(){let e=new URLSearchParams(location.search).get(`view`);return qH.find(t=>t===e)??null}Hb(class e{analog=j(!1);allTabs=[{id:`dashboard`,label:`Dashboard`},{id:`analog`,label:`Analog`},{id:`components`,label:`Components`},{id:`routes`,label:`Routes`},{id:`signals`,label:`Signals`},{id:`injectors`,label:`Injectors`},{id:`store`,label:`Store`},{id:`forms`,label:`Forms`},{id:`pipes`,label:`Pipes`},{id:`network`,label:`SSR & HTTP`}];view=j(eU());viewAccent=Q(()=>{let e=this.view();return(e&&YH[e])??null});title=Q(()=>{let e=this.view();return e?JH[e]:`Angular DevTools`});analogKnown=j(!1);comingSoon=Q(()=>{let e=this.view();return e===`analog`?this.analogKnown()&&!this.analog()?$H:void 0:e?QH[e]:void 0});config=Q(()=>tE(this.rpc()));tabEnabled=iE;tabs=Q(()=>{if(this.comingSoon())return[];let e=this.view(),t=e?XH[e]:void 0,n=this.allTabs.filter(e=>iE(e.id,this.config()));return t?n.filter(e=>e.id===t):n.filter(t=>(t.id!==`analog`||this.analog())&&!(e===`angular`&&ZH[t.id]))});tab=wv(()=>{let e=this.view();return e&&XH[e]||`dashboard`});rpc=j(null);connected=j(!1);connectionFailed=j(!1);hiddenPages=j([]);pageId=JT();backgroundNote=Q(()=>{let e=this.hiddenPages();return this.pageId?e.includes(this.pageId)?`Tab in background, showing the last data.`:``:e.length?e.length===1?`A tab is in the background, showing its last data.`:`${e.length} tabs are in the background, showing their last data.`:``});stopVisibility=()=>{};stopFollowing=()=>{};nav=Lv(`nav`);main=Lv(`main`);injector=E(xs);navObserver;navFade=j({start:!1,end:!1});constructor(){Id(()=>{let e=this.nav()?.nativeElement;e&&typeof ResizeObserver<`u`&&(this.navObserver=new ResizeObserver(()=>this.measureNav()),this.navObserver.observe(e))}),$v(()=>{this.tab(),this.tabs(),Sv(()=>{this.revealActiveTab(),this.measureNav()})})}measureNav(){let e=this.nav()?.nativeElement;if(!e)return;let t=e.scrollWidth-e.clientWidth,n=e.scrollLeft>1,r=t>1&&e.scrollLeftn?e.scrollLeft=Math.max(0,n):e.scrollLeftthis.showView(e)));try{window.parent!==window&&lH(window.parent.document)}catch{}let e=gH(location.hash,_H(this.tabScope()),this.tabs().map(e=>e.id));e&&this.tab.set(e);let t=xH();OT(t?{baseURL:t}:{}).then(e=>{this.rpc.set(e),this.connected.set(!0),this.watchVisibility(e),e.scope(`ng-devtools`).rpc.call(`analog-project`).then(e=>{let t=!!e?.analog;this.analog.set(t),this.analogKnown.set(!0),!t&&this.tab()===`analog`&&!this.view()&&this.tab.set(`dashboard`)},()=>{this.analogKnown.set(!0),this.tab()===`analog`&&!this.view()&&this.tab.set(`dashboard`)}),e.events.on(`connection:status`,e=>{this.connected.set(e===`connected`)})},()=>{this.connectionFailed.set(!0),this.analogKnown.set(!0)})}ngOnDestroy(){this.stopFollowing(),this.stopVisibility(),this.navObserver?.disconnect()}showView(e){if(e===this.view())return;this.view.set(e);let t=new URL(location.href);t.searchParams.set(`view`,e),t.hash=``,history.replaceState(history.state,``,t)}formFocus=j(null);componentFocus=wv({source:this.tab,computation:()=>null});showForm(e){this.formFocus.set({id:e}),this.switchTab(`forms`)}inspectFromPanel({source:e,origin:t,data:n}){if(e!==window.parent||t!==location.origin)return;let r=n;r?.type===`ng-devtools:inspect-component`&&typeof r.id==`string`&&this.tab()===`components`&&this.config().inspectors.components&&this.componentFocus.set({id:r.id})}switchTab(e){let t=ZH[e];if(this.view()===`angular`&&t){this.activateDock(t,e);return}this.setTab(e),history.replaceState(history.state,``,`#tab=${e}`)}setTab(e){this.keepFocus(),this.tab.set(e),vH(this.tabScope(),e)}tabScope(){return this.view()??`panel`}async watchVisibility(e){try{let t=await e.scope(`ng-devtools`).rpc.sharedState(`page-visibility`),n=e=>{let t=e?.hidden;this.hiddenPages.set(Array.isArray(t)?t.filter(e=>typeof e==`string`):[])};n(t.value()),this.stopVisibility(),this.stopVisibility=t.on(`updated`,n)}catch{}}keepFocus(){let e=document.activeElement,t=this.main()?.nativeElement;(!e||e===document.body||t?.contains(e))&&Id(()=>{let e=document.activeElement;e&&e!==document.body||(this.nav()?.nativeElement.querySelector(`button.active`)??this.main()?.nativeElement)?.focus()},{injector:this.injector})}async activateDock(e,t){if(await mH(e))return;if(window.parent===window){this.keepFocus(),this.showView(e);return}let n=this.rpc();if(!n?.call){this.setTab(t);return}try{await n.call(`hub:docks:activate`,{dockId:`ng-devtools:${e}`}),this.keepFocus(),this.showView(e)}catch{this.setTab(t)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=Bh({type:e,selectors:[[`app-root`]],viewQuery:function(e,t){e&1&&e_(t.nav,SH,5)(t.main,CH,5),e&2&&t_(2)},hostVars:2,hostBindings:function(e,t){e&1&&G(`message`,function(e){return t.inspectFromPanel(e)},ju),e&2&&C_(`--%NS%accent`,t.viewAccent())},decls:26,vars:18,consts:[[`nav`,``],[`main`,``],[1,`brand`],[1,`mark`],[`width`,`22`,`height`,`22`,`viewBox`,`0 0 256 256`,`aria-hidden`,`true`],[`width`,`24`,`height`,`17`,`viewBox`,`0 0 256 182`,`aria-hidden`,`true`],[`width`,`22`,`height`,`22`,`viewBox`,`0 0 24 24`,`fill`,`currentColor`,`aria-hidden`,`true`],[`width`,`20`,`height`,`22`,`viewBox`,`0 0 223 236`,`aria-hidden`,`true`],[`width`,`20`,`height`,`22`,`viewBox`,`0 0 223 236`,`fill`,`currentColor`,`aria-hidden`,`true`],[1,`title`],[`aria-label`,`Inspectors`,3,`scroll`],[`role`,`status`,1,`status`],[`aria-hidden`,`true`,1,`dot`],[`tabindex`,`-1`],[`role`,`status`,1,`background-note`],[`role`,`alert`,1,`connection-error`],[3,`info`],[1,`turned-off`],[`fill`,`#3c5afd`,`d`,`M237.248 18.752q18.061 18.06 18.748 45.247V192c-.457 18.12-6.707 33.207-18.748 45.247c-12.04 12.04-27.127 18.291-45.251 18.752H63.999q-27.187-.69-45.247-18.752C6.712 225.208.46 210.121 0 192.001V64q.69-27.187 18.752-45.247Q36.812.692 63.999 0h127.998c18.124.46 33.211 6.711 45.251 18.752m-17.655 103q-6.033-6.003-6.28-15.066V64q-.192-9.063-6.221-15.091c-4.02-4.023-9.054-6.093-15.095-6.22h-21.312v106.626L85.315 42.687H63.999c-6.042.128-11.072 2.198-15.091 6.221c-4.023 4.02-6.093 9.05-6.22 15.09v42.688q-.249 9.063-6.281 15.066q-6.03 5.996-15.091 6.246q9.062.255 15.09 6.25c4.024 4.002 6.115 9.024 6.281 15.066V192c.128 6.037 2.198 11.072 6.221 15.091q6.03 6.03 15.09 6.22h21.317V106.687l85.37 106.627h21.312c6.041-.128 11.076-2.202 15.095-6.221s6.093-9.054 6.22-15.09v-42.688q.249-9.063 6.281-15.066q6.03-5.995 15.091-6.25q-9.062-.25-15.09-6.246`],[`fill`,`#53b9ff`,`d`,`M39.863 54.115L.311 93.716l60.995 61.179L0 216.385l39.428 39.619l61.43-61.507l61.097 61.068l39.552-39.602z`],[`fill`,`#119eff`,`d`,`m140.517 154.896l-39.658 39.601l61.097 61.069l39.552-39.602z`],[`fill-opacity`,`.2`,`d`,`m140.517 154.896l-39.658 39.601l15.267 15.182z`],[`fill`,`#53b9ff`,`d`,`M194.57 100.985L256 39.478L216.431 0l-61.412 61.384L93.917.311L54.365 39.913L216.01 201.761l39.552-39.602z`],[`fill`,`#119eff`,`d`,`m115.36 100.987l39.659-39.602L93.917.313L54.365 39.914z`],[`fill-opacity`,`.2`,`d`,`m115.359 100.985l39.659-39.601l-15.271-15.186z`],[`fill`,`#c30f2e`,`d`,`M152.228.001L48.455 181.046H256L152.228 0z`],[`fill`,`#dd0330`,`d`,`M88.314 26.967L0 181.52h176.628L88.315 26.967z`],[`fill`,`#fff`,`d`,`M18.167 135.294h220.236v-2.419H18.167z`],[`fill`,`#fff`,`d`,`M204.38 170.667c-.861 0-1.67-.358-2.348-1.034c-4.045-4.063-4.221-20.586-4.026-45.33c.11-13.521.257-32.043-1.9-33.504c-2.104.873-2.315 16.172-2.451 26.301c-.162 11.785-.327 23.98-2.242 30.189c-.57 1.84-1.306 3.525-2.786 3.39c-2.086-.185-2.76-3.48-4.317-16.478c-.647-5.4-1.317-10.98-2.101-13.14a11 11 0 0 0-.269-.66c-.835 1.889-1.8 7.079-2.47 10.682c-.927 4.976-1.803 9.676-2.9 11.726c-.847 1.575-2.19 3.63-4.067 3.231c-2.558-.537-3.323-5.693-3.552-8.719c0-25.455-3.33-28.417-3.997-28.753l-.107.081l-.162-.036c-2.377 1.038-2.506 9.294-2.627 17.276c-.096 5.856-.198 12.492-1.053 18.701c-1.108 8.05-2.448 9.603-4.115 9.507c-3.838-.262-3.95-13.482-3.95-14.987c0-.472.012-1.028.027-1.642c.074-3.076.205-8.8-1.687-10.604c-.25-.239-.603-.515-.879-.437c-1.347.339-2.745 4.714-3.209 6.153c-.147.457-.265.833-.364 1.09c-.078.214-.177.515-.294.88c-1.02 3.095-2.18 6.183-4.16 6.944c-.732.284-1.498.222-2.216-.183c-.953-.541-1.73-1.646-2.455-3.482c-.397-1.016-.735-2.046-1.082-3.081c-.419-1.263-.85-2.569-1.384-3.808c-.419-.965-1.464-1.4-2.796-1.164c-2.768.494-3.232 3.29-3.622 7.5c-.07.733-.137 1.452-.228 2.128c-.011.198-.501 6.38-.814 8.344c-.865 5.39-2.002 7.512-3.89 7.358c-4.66-.398-6.798-20.836-6.684-29.47c.088-6.592-1.104-9-1.818-9.382c-.074-.034-.189-.096-.46.095c-.843.571-1.594 2.348-1.363 4.215c2.566 20.32.674 43.592-3.96 48.833c-1.46 1.649-3.448 1.627-4.832.236c-4.049-4.064-4.218-20.586-4.026-45.33c.11-13.521.254-32.043-1.9-33.504c-2.105.873-2.311 16.172-2.45 26.301c-.163 11.785-.329 23.98-2.246 30.189c-.57 1.84-1.307 3.525-2.782 3.39c-2.091-.186-2.761-3.48-4.321-16.478c-.649-5.4-1.319-10.98-2.101-13.14c-.1-.273-.189-.49-.27-.66c-.832 1.889-1.796 7.079-2.466 10.682c-.927 4.976-1.803 9.676-2.904 11.726c-.846 1.575-2.19 3.63-4.063 3.231c-2.558-.537-3.324-5.693-3.552-8.719c-.003-25.455-3.33-28.417-3.997-28.753l-.106.081l-.166-.036c-2.374 1.038-2.503 9.293-2.629 17.276c-.091 5.856-.194 12.492-1.048 18.701c-1.107 8.05-2.437 9.618-4.111 9.507c-3.846-.262-3.958-13.482-3.958-14.987c0-.472.016-1.028.03-1.642c.074-3.076.207-8.8-1.685-10.604c-.25-.239-.603-.515-.88-.438c-1.347.34-2.75 4.715-3.206 6.155a47 47 0 0 1-.364 1.09q-.16.432-.298.875c-1.02 3.096-2.18 6.187-4.155 6.95c-.736.282-1.506.22-2.22-.185c-.953-.541-1.734-1.646-2.454-3.482c-.398-1.016-.74-2.046-1.083-3.081c-.42-1.263-.854-2.569-1.387-3.808c-.416-.965-1.465-1.4-2.797-1.164c-3.188.567-3.943 4.52-4.55 9.238l-.106.839l-2.411-.32l.114-.824c.527-4.137 1.328-10.39 6.53-11.31c2.446-.435 4.585.581 5.446 2.583c.578 1.34 1.031 2.695 1.466 4.008c.324.99.654 1.98 1.037 2.959c.674 1.708 1.197 2.15 1.392 2.257c1.218-.38 2.462-4.167 2.873-5.414c.13-.402.24-.732.328-.968c.085-.233.195-.571.328-.98c1.097-3.43 2.474-7.144 4.918-7.762c.747-.191 1.903-.166 3.157 1.035c2.665 2.544 2.525 8.48 2.433 12.41c-.014.59-.028 1.126-.028 1.583c0 6.272.93 10.655 1.64 12.16c.367-.77.998-2.63 1.598-7.007c.831-6.066.938-12.624 1.027-18.41c.161-10.24.275-17.663 3.982-19.408c.552-.339 1.469-.522 2.436-.033c3.586 1.803 5.326 11.885 5.326 30.817c.225 2.926 1.013 6.006 1.66 6.448c.004-.066.53-.39 1.394-2.01c.925-1.718 1.845-6.665 2.655-11.026c1.792-9.614 2.606-12.989 4.726-13.166c1.615-.158 2.362 1.896 2.676 2.76c.883 2.422 1.537 7.888 2.23 13.678c.54 4.49 1.31 10.902 2.094 13.497c.084-.228.18-.5.283-.836c1.815-5.878 1.98-17.887 2.14-29.507c.22-16.14.503-26.139 3.448-28.226a2.44 2.44 0 0 1 2.233-.316c3.448 1.144 3.714 11.254 3.519 35.8c-.14 17.799-.313 39.952 3.323 43.603c.317.32.542.32.622.32c.17 0 .413-.161.67-.452c3.681-4.162 6.01-26.022 3.372-46.927c-.328-2.602.677-5.337 2.392-6.514c.946-.652 2.036-.736 2.978-.232c2.145 1.14 3.187 5.024 3.102 11.546c-.15 11.387 2.584 24.714 4.37 26.842c.282-.471.842-1.763 1.379-5.145c.301-1.87.799-8.153.806-8.216c.09-.71.155-1.398.217-2.097c.369-3.924.82-8.804 5.613-9.654c2.444-.435 4.583.577 5.448 2.583c.577 1.34 1.027 2.695 1.46 4.008c.332.99.664 1.98 1.046 2.959c.67 1.708 1.197 2.15 1.387 2.257c1.218-.38 2.467-4.167 2.875-5.41c.132-.402.243-.737.328-.973c.088-.228.195-.57.324-.979c1.1-3.43 2.477-7.144 4.924-7.762c.74-.191 1.9-.166 3.154 1.035c2.665 2.543 2.526 8.48 2.437 12.41q-.029.792-.033 1.583c0 6.272.931 10.655 1.641 12.16c.365-.77.994-2.63 1.601-7.007c.832-6.066.931-12.624 1.027-18.41c.159-10.24.273-17.663 3.98-19.408c.55-.339 1.467-.522 2.44-.033c3.58 1.803 5.325 11.884 5.325 30.817c.224 2.926 1.012 6.006 1.656 6.448c.008-.066.526-.39 1.399-2.01c.923-1.718 1.84-6.665 2.653-11.026c1.786-9.614 2.602-12.989 4.722-13.166c1.62-.158 2.367 1.896 2.68 2.76c.88 2.422 1.535 7.888 2.233 13.678c.534 4.49 1.304 10.902 2.092 13.497c.08-.228.176-.5.28-.836c1.813-5.878 1.976-17.887 2.138-29.507c.216-16.14.504-26.139 3.448-28.226a2.45 2.45 0 0 1 2.234-.316c3.452 1.144 3.718 11.254 3.52 35.8c-.141 17.799-.314 39.952 3.319 43.603c.324.32.544.32.63.32c.165 0 .408-.161.662-.452c3.687-4.162 6.014-26.022 3.375-46.927c-.342-2.723.43-5.47 1.84-6.526c.71-.537 1.575-.647 2.37-.313c2.054.877 3.445 4.63 4.255 11.484c.339 2.87.641 5.974.931 9.036c.641 6.683 1.509 15.69 2.684 17.67c.36-.46 1.096-1.704 2.19-5.038l2.307.753c-1.696 5.157-3.026 7.1-4.755 6.902c-2.69-.299-3.468-5.734-4.84-20.055c-.29-3.048-.59-6.132-.928-8.989c-1.03-8.74-2.782-9.532-2.801-9.54c-.342.174-1.137 1.992-.842 4.31c2.558 20.32.673 43.597-3.964 48.834c-.747.842-1.587 1.27-2.485 1.27`],[`d`,`M12.024.017V0L12 .008L11.976 0v.017L.812 3.892l1.605 14.875l9.559 5.207V24l.024-.013l.024.013v-.026l9.559-5.207l1.605-14.875zm6.868 14.244q-1.64 3.948-6.031 4.166c-2.829 0-4.661-1.7-4.66-1.7q-1.745-1.359-2.398-3.417c-.695-.76-.702-.841-.774-1.145c-.072-.303.045-.388.249-.685q.204-.298.098-.85q-.26-.36-.3-1.128q0-.37.496-.783q.495-.413.607-.632q.083-.119.065-1.031q-.006-.897.995-.975c1-.08 1.565-.832 1.879-1.174c.21-.228.52-.339.91-.341c.551-.026 1.052.185 1.484.62c1.075-.055 2.176.235 3.292.863q2.379 1.414 2.596 3.055q-.257 2.158-5.788-.113q-2.895.819-2.846 3.552q0 2.508 2.422 3.643c-.787-.772-1.122-1.422-1.01-1.959q2.456 2.906 5.588 2.173c-.92.032-1.65-.264-2.198-.893q2.116-.05 3.998-1.972c-.724.576-1.482.794-2.284.657q3.26-2.563 2.307-5.98l-.002-.006a3.02 3.02 0 0 1 .788 2.03q.023 1.175-.795 2.477q.613-.478 1.413-2.047c.23 2.117-.625 3.724-2.574 4.825q.934-.085 2.473-1.23m-5.567-6.63a.319.319 0 1 1 .638 0a.319.319 0 0 1-.638 0`],[`id`,`ng-grad`,`x1`,`49`,`x2`,`226`,`y1`,`214`,`y2`,`130`,`gradientUnits`,`userSpaceOnUse`],[`stop-color`,`#E40035`],[`offset`,`.24`,`stop-color`,`#F60A48`],[`offset`,`.352`,`stop-color`,`#F20755`],[`offset`,`.494`,`stop-color`,`#DC087D`],[`offset`,`.745`,`stop-color`,`#9717E7`],[`offset`,`1`,`stop-color`,`#6C00F5`],[`fill`,`url(#ng-grad)`,`d`,`m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z`],[`d`,`m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z`],[`type`,`button`,3,`active`],[`type`,`button`,3,`click`],[3,`name`],[3,`rpc`],[3,`rpc`,`focus`],[3,`navigate`,`rpc`],[3,`focusHandled`,`showForm`,`rpc`,`focus`],[3,`focusHandled`,`rpc`,`focus`]],template:function(e,t){if(e&1&&(z(0,`header`)(1,`h1`,2)(2,`span`,3),P(3,TH,2,0,`:svg:svg`,4)(4,EH,7,0,`:svg:svg`,4)(5,DH,5,0,`:svg:svg`,5)(6,OH,2,0,`:svg:svg`,6)(7,kH,10,0,`:svg:svg`,7)(8,AH,2,0,`:svg:svg`,8),B(),z(9,`span`,9),J(10),B()(),z(11,`nav`,10,0),G(`scroll`,function(){return t.measureNav()}),P(13,MH,2,0),B(),z(14,`span`,11)(15,`span`,12),V(16,`span`),B(),J(17),B()(),z(18,`main`,13,1)(20,`p`,14),J(21),B(),P(22,NH,2,0,`p`,15)(23,PH,1,1,`app-coming-soon`,16)(24,FH,5,0,`p`,17)(25,KH,10,1),B()),e&2){let e;M(2),q(`ng-mark`,t.view()===`angular`),M(),F(t.view()===`nativescript`?3:t.view()===`capacitor`?4:t.view()===`analog`?5:t.view()===`ngrx`?6:t.view()===`angular`?7:8),M(6),q(`ng-text`,t.view()===`angular`),M(),Y(t.title()),M(),q(`fade-start`,t.navFade().start)(`fade-end`,t.navFade().end),M(2),F(t.tabs().length>1?13:-1),M(),q(`connected`,t.connected())(`failed`,t.connectionFailed()),M(3),X(` `,t.connected()?`Live`:t.connectionFailed()?`Disconnected`:`Connecting…`,` `),M(4),Y(t.backgroundNote()),M(),F(t.connectionFailed()?22:(e=t.comingSoon())?23:t.tabEnabled(t.tab(),t.config())?25:24,e)}},dependencies:[BE,WO,fM,CN,jP,tI,$L,QR,aV,eH,sH,hE],styles:[`[_nghost-%COMP%] { + --%NS%accent-soft: color-mix(in srgb, var(--%NS%accent) 12%, transparent); + --%NS%accent-line: color-mix(in srgb, var(--%NS%accent) 45%, transparent); + display: flex; + flex-direction: column; + height: 100vh; + height: 100dvh; + min-width: 0; + background: radial-gradient(900px 300px at 10% -10%, color-mix(in srgb, var(--%NS%accent) 7%, transparent), transparent 70%), var(--%NS%bg); +} + +header[_ngcontent-%COMP%] { + position: sticky; + top: 0; + z-index: 10; + display: flex; + flex-wrap: nowrap; + flex-shrink: 0; + align-items: center; + gap: 8px 16px; + height: 45px; + padding: 0 16px; + background: color-mix(in srgb, var(--%NS%surface) 82%, transparent); + backdrop-filter: blur(12px) saturate(1.3); + border-bottom: 1px solid var(--%NS%border); +} + +.brand[_ngcontent-%COMP%] { + display: flex; + flex-shrink: 0; + align-items: center; + gap: 10px; + min-width: 0; + margin: 0; + color: var(--%NS%accent); + font-size: 15px; + font-weight: 650; + line-height: 1.2; + letter-spacing: -0.01em; + white-space: nowrap; +} + +.title[_ngcontent-%COMP%] { + overflow: hidden; + text-overflow: ellipsis; +} + +.mark[_ngcontent-%COMP%] { + display: grid; + flex-shrink: 0; + place-items: center; + width: 30px; + height: 30px; + border-radius: 8px; + background: color-mix(in srgb, var(--%NS%accent) 8%, transparent); + box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--%NS%accent) 28%, transparent); +} + +.mark.ng-mark[_ngcontent-%COMP%] { + background: linear-gradient(135deg, color-mix(in srgb, #f60a48 12%, transparent), color-mix(in srgb, #9717e7 12%, transparent)); + box-shadow: inset 0 0 0 1px color-mix(in srgb, #dc087d 34%, transparent); +} + +.ng-text[_ngcontent-%COMP%] { + background: linear-gradient(90deg, #ff4d75 0%, #f23d9a 45%, #c06bf5 80%, #a98bff 100%); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +nav[_ngcontent-%COMP%] { + position: relative; + display: flex; + flex: 0 1 auto; + flex-wrap: nowrap; + gap: 2px; + min-width: 0; + height: 34px; + padding: 2px; + overflow-x: auto; + overflow-y: hidden; + overscroll-behavior-x: contain; + scroll-padding-inline: 24px; + scrollbar-width: none; + border: 1px solid var(--%NS%border); + border-radius: 10px; + background: var(--%NS%bg); +} + +nav[_ngcontent-%COMP%]::-webkit-scrollbar { + display: none; +} + +nav.fade-start[_ngcontent-%COMP%] { + mask-image: linear-gradient(90deg, transparent, #000 28px); +} + +nav.fade-end[_ngcontent-%COMP%] { + mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); +} + +nav.fade-start.fade-end[_ngcontent-%COMP%] { + mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); +} + +nav[_ngcontent-%COMP%]:empty { + display: none; +} + +nav[_ngcontent-%COMP%] button[_ngcontent-%COMP%] { + position: relative; + display: inline-flex; + flex-shrink: 0; + align-items: center; + gap: 6px; + height: 28px; + padding: 0 10px; + border: none; + border-radius: 8px; + background: transparent; + color: var(--%NS%text-2); + font: inherit; + font-size: 13px; + font-weight: 500; + line-height: 1; + white-space: nowrap; + cursor: pointer; + -webkit-tap-highlight-color: transparent; + transition: background-color 0.16s var(--%NS%ease), color 0.16s var(--%NS%ease), box-shadow 0.16s var(--%NS%ease), transform 0.12s var(--%NS%ease); +} + +nav[_ngcontent-%COMP%] button[_ngcontent-%COMP%] app-tab-icon[_ngcontent-%COMP%] { + color: var(--%NS%text-3); + transition: color 0.16s var(--%NS%ease); +} + +nav[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:hover { + background: var(--%NS%surface-2); + color: var(--%NS%text); +} + +nav[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:hover app-tab-icon[_ngcontent-%COMP%] { + color: var(--%NS%text-2); +} + +nav[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:active { + transform: scale(0.97); +} + +nav[_ngcontent-%COMP%] button.active[_ngcontent-%COMP%] { + background: var(--%NS%surface-3); + color: var(--%NS%text-strong); + box-shadow: inset 0 0 0 1px var(--%NS%border-strong), 0 4px 14px -8px rgba(0, 0, 0, 0.9); +} + +nav[_ngcontent-%COMP%] button.active[_ngcontent-%COMP%] app-tab-icon[_ngcontent-%COMP%] { + color: var(--%NS%accent); +} + +nav[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:focus-visible { + outline: 2px solid var(--%NS%accent); + outline-offset: -2px; +} + +.status[_ngcontent-%COMP%] { + display: inline-flex; + flex-shrink: 0; + align-items: center; + gap: 6px; + height: 24px; + margin-left: auto; + padding: 0 10px 0 6px; + border: 1px solid var(--%NS%border); + border-radius: 999px; + background: var(--%NS%surface); + color: var(--%NS%text-2); + font-size: 11px; + font-weight: 600; + line-height: 1; + letter-spacing: 0.06em; + text-transform: uppercase; + white-space: nowrap; + transition: color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease), background-color 0.2s var(--%NS%ease); +} + +.dot[_ngcontent-%COMP%] { + position: relative; + display: grid; + place-items: center; + width: 12px; + height: 12px; +} + +.dot[_ngcontent-%COMP%] span[_ngcontent-%COMP%] { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--%NS%warn); + animation: _ngcontent-%COMP%_blink 1.2s ease-in-out infinite; +} + +.dot[_ngcontent-%COMP%]::before { + content: ""; + position: absolute; + inset: 0; + border-radius: 50%; + background: var(--%NS%warn); + opacity: 0; +} + +.status.connected[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%ok) 28%, transparent); + background: color-mix(in srgb, var(--%NS%ok) 8%, transparent); + color: var(--%NS%text); +} + +.status.connected[_ngcontent-%COMP%] .dot[_ngcontent-%COMP%] span[_ngcontent-%COMP%] { + background: var(--%NS%ok); + box-shadow: 0 0 6px var(--%NS%ok); + animation: none; +} + +.status.failed[_ngcontent-%COMP%] { + border-color: color-mix(in srgb, var(--%NS%danger) 36%, transparent); + color: var(--%NS%text); +} + +.status.failed[_ngcontent-%COMP%] .dot[_ngcontent-%COMP%] span[_ngcontent-%COMP%] { + background: var(--%NS%danger); + animation: none; +} + +.status.connected[_ngcontent-%COMP%] .dot[_ngcontent-%COMP%]::before { + background: var(--%NS%ok); + animation: _ngcontent-%COMP%_ping 2s var(--%NS%ease) infinite; +} + +@keyframes _ngcontent-%COMP%_blink { + 50% { + opacity: 0.3; + } +} +@keyframes _ngcontent-%COMP%_ping { + 0% { + transform: scale(0.5); + opacity: 0.55; + } + 80%, 100% { + transform: scale(1.6); + opacity: 0; + } +} +main[_ngcontent-%COMP%] { + flex: 1; + min-height: 0; + overflow: auto; + overscroll-behavior: contain; + scrollbar-gutter: stable; + padding: 20px; +} + +main[_ngcontent-%COMP%]:focus { + outline: none; +} + +main[_ngcontent-%COMP%] > *[_ngcontent-%COMP%] { + animation: enter 0.28s var(--%NS%ease) both; +} + +.background-note[_ngcontent-%COMP%] { + margin: 0 0 12px; + color: var(--%NS%text-2); + font-size: 12px; +} +.background-note[_ngcontent-%COMP%]:empty { + display: none; +} + +.turned-off[_ngcontent-%COMP%] { + max-width: 60ch; + margin: 0; + padding: 12px 14px; + border: 1px solid var(--%NS%border); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + color: var(--%NS%text); +} + +.connection-error[_ngcontent-%COMP%] { + max-width: 60ch; + margin: 0; + padding: 12px 14px; + border: 1px solid color-mix(in srgb, var(--%NS%danger) 36%, transparent); + border-radius: var(--%NS%radius); + background: var(--%NS%surface); + color: var(--%NS%text); +} + +@media (max-width: 720px) { + header[_ngcontent-%COMP%] { + flex-wrap: wrap; + height: auto; + padding: 8px 16px; + } + nav[_ngcontent-%COMP%] { + order: 3; + flex: 1 1 100%; + } +} +@media (max-width: 560px) { + header[_ngcontent-%COMP%] { + padding-inline: 12px; + } + main[_ngcontent-%COMP%] { + padding: 16px 12px; + } +} +@media (max-width: 400px) { + .brand[_ngcontent-%COMP%] { + flex-shrink: 1; + gap: 8px; + } +}`]})}).catch(console.error);export{Gx as t}; \ No newline at end of file diff --git a/extension/ui/assets/index-DBeQs79F.js b/extension/ui/assets/index-DBeQs79F.js deleted file mode 100644 index 5b52f24..0000000 --- a/extension/ui/assets/index-DBeQs79F.js +++ /dev/null @@ -1,11847 +0,0 @@ -(function(){let e=document.createElement(`link`).relList;if(e&&e.supports&&e.supports(`modulepreload`))return;for(let e of document.querySelectorAll(`link[rel="modulepreload"]`))n(e);new MutationObserver(e=>{for(let t of e)if(t.type===`childList`)for(let e of t.addedNodes)e.tagName===`LINK`&&e.rel===`modulepreload`&&n(e)}).observe(document,{childList:!0,subtree:!0});function t(e){let t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),t.credentials=e.crossOrigin===`use-credentials`?`include`:e.crossOrigin===`anonymous`?`omit`:`same-origin`,t}function n(e){if(e.ep)return;e.ep=!0;let n=t(e);fetch(e.href,n)}})();var e=Object.defineProperty,t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable,i=(t,n,r)=>n in t?e(t,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[n]=r,a=(e,a)=>{for(var o in a||={})n.call(a,o)&&i(e,o,a[o]);if(t)for(var o of t(a))r.call(a,o)&&i(e,o,a[o]);return e},o=(e,t,n)=>(i(e,typeof t==`symbol`?t:t+``,n),n),s=globalThis;function c(e){let t=s.__Zone_symbol_prefix;return(typeof t==`string`?t:`__zone_symbol__`)+e}function l(){let e=s.performance;function t(t){e&&e.mark&&e.mark(t)}function n(t,n){e&&e.measure&&e.measure(t,n)}t(`Zone`);let r=class e{constructor(e,t){o(this,`_parent`),o(this,`_name`),o(this,`_properties`),o(this,`_zoneDelegate`),this._parent=e,this._name=t?t.name||`unnamed`:``,this._properties=t&&t.properties||{},this._zoneDelegate=new l(this,this._parent&&this._parent._zoneDelegate,t)}static assertZonePatched(){if(s.Promise!==fe.ZoneAwarePromise)throw Error("Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten.\nMost likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.)")}static get root(){let t=e.current;for(;t.parent;)t=t.parent;return t}static get current(){return me.zone}static get currentTask(){return he}static __load_patch(r,i,a=!1){if(Object.hasOwn(fe,r)){let e=s[c(`forceDuplicateZoneCheck`)]===!0;if(!a&&e)throw Error(`Already loaded patch: `+r)}else if(!s[`__Zone_disable_`+r]){let a=`Zone:`+r;t(a),fe[r]=i(s,e,pe),n(a,a)}}get parent(){return this._parent}get name(){return this._name}get(e){let t=this.getZoneWith(e);if(t)return t._properties[e]}getZoneWith(e){let t=this;for(;t;){if(Object.hasOwn(t._properties,e))return t;t=t._parent}return null}fork(e){if(!e)throw Error(`ZoneSpec required!`);return this._zoneDelegate.fork(this,e)}wrap(e,t){if(typeof e!=`function`)throw Error(`Expecting function got: `+e);let n=this._zoneDelegate.intercept(this,e,t),r=this;return function(){return r.runGuarded(n,this,arguments,t)}}run(e,t,n,r){me={parent:me,zone:this};try{return this._zoneDelegate.invoke(this,e,t,n,r)}finally{me=me.parent}}runGuarded(e,t=null,n,r){me={parent:me,zone:this};try{try{return this._zoneDelegate.invoke(this,e,t,n,r)}catch(e){if(this._zoneDelegate.handleError(this,e))throw e}}finally{me=me.parent}}runTask(e,t,n){if(e.zone!=this)throw Error(`A task can only be run in the zone of creation! (Creation: `+(e.zone||ne).name+`; Execution: `+this.name+`)`);let r=e,{type:i,data:{isPeriodic:a=!1,isRefreshable:o=!1}={}}=e;if(e.state===re&&(i===de||i===ue))return;let s=e.state!=oe;s&&r._transitionTo(oe,ae);let c=he;he=r,me={parent:me,zone:this};try{i==ue&&e.data&&!a&&!o&&(e.cancelFn=void 0);try{return this._zoneDelegate.invokeTask(this,r,t,n)}catch(e){if(this._zoneDelegate.handleError(this,e))throw e}}finally{let t=e.state;if(t!==re&&t!==ce){if(i==de||a||o&&t===ie)s&&r._transitionTo(ae,oe,ie);else{let e=r._zoneDelegates;this._updateTaskCount(r,-1),s&&r._transitionTo(re,oe,re),o&&(r._zoneDelegates=e)}}me=me.parent,he=c}}scheduleTask(e){if(e.zone&&e.zone!==this){let t=this;for(;t;){if(t===e.zone)throw Error(`can not reschedule task to ${this.name} which is descendants of the original zone ${e.zone.name}`);t=t.parent}}e._transitionTo(ie,re);let t=[];e._zoneDelegates=t,e._zone=this;try{e=this._zoneDelegate.scheduleTask(this,e)}catch(t){throw e._transitionTo(ce,ie,re),this._zoneDelegate.handleError(this,t),t}return e._zoneDelegates===t&&this._updateTaskCount(e,1),e.state==ie&&e._transitionTo(ae,ie),e}scheduleMicroTask(e,t,n,r){return this.scheduleTask(new u(le,e,t,n,r,void 0))}scheduleMacroTask(e,t,n,r,i){return this.scheduleTask(new u(ue,e,t,n,r,i))}scheduleEventTask(e,t,n,r,i){return this.scheduleTask(new u(de,e,t,n,r,i))}cancelTask(e){if(e.zone!=this)throw Error(`A task can only be cancelled in the zone of creation! (Creation: `+(e.zone||ne).name+`; Execution: `+this.name+`)`);if(e.state===ae||e.state===oe){e._transitionTo(se,ae,oe);try{this._zoneDelegate.cancelTask(this,e)}catch(t){throw e._transitionTo(ce,se),this._zoneDelegate.handleError(this,t),t}return this._updateTaskCount(e,-1),e._transitionTo(re,se),e.runCount=-1,e}}_updateTaskCount(e,t){let n=e._zoneDelegates;t==-1&&(e._zoneDelegates=null);for(let r=0;re.hasTask(n,r),onScheduleTask:(e,t,n,r)=>e.scheduleTask(n,r),onInvokeTask:(e,t,n,r,i,a)=>e.invokeTask(n,r,i,a),onCancelTask:(e,t,n,r)=>e.cancelTask(n,r)};class l{constructor(e,t,n){o(this,`_zone`),o(this,`_taskCounts`,{microTask:0,macroTask:0,eventTask:0}),o(this,`_forkDlgt`),o(this,`_forkZS`),o(this,`_forkCurrZone`),o(this,`_interceptDlgt`),o(this,`_interceptZS`),o(this,`_interceptCurrZone`),o(this,`_invokeDlgt`),o(this,`_invokeZS`),o(this,`_invokeCurrZone`),o(this,`_handleErrorDlgt`),o(this,`_handleErrorZS`),o(this,`_handleErrorCurrZone`),o(this,`_scheduleTaskDlgt`),o(this,`_scheduleTaskZS`),o(this,`_scheduleTaskCurrZone`),o(this,`_invokeTaskDlgt`),o(this,`_invokeTaskZS`),o(this,`_invokeTaskCurrZone`),o(this,`_cancelTaskDlgt`),o(this,`_cancelTaskZS`),o(this,`_cancelTaskCurrZone`),o(this,`_hasTaskDlgt`),o(this,`_hasTaskDlgtOwner`),o(this,`_hasTaskZS`),o(this,`_hasTaskCurrZone`),this._zone=e,this._forkZS=n&&(n&&n.onFork?n:t._forkZS),this._forkDlgt=n&&(n.onFork?t:t._forkDlgt),this._forkCurrZone=n&&(n.onFork?this._zone:t._forkCurrZone),this._interceptZS=n&&(n.onIntercept?n:t._interceptZS),this._interceptDlgt=n&&(n.onIntercept?t:t._interceptDlgt),this._interceptCurrZone=n&&(n.onIntercept?this._zone:t._interceptCurrZone),this._invokeZS=n&&(n.onInvoke?n:t._invokeZS),this._invokeDlgt=n&&(n.onInvoke?t:t._invokeDlgt),this._invokeCurrZone=n&&(n.onInvoke?this._zone:t._invokeCurrZone),this._handleErrorZS=n&&(n.onHandleError?n:t._handleErrorZS),this._handleErrorDlgt=n&&(n.onHandleError?t:t._handleErrorDlgt),this._handleErrorCurrZone=n&&(n.onHandleError?this._zone:t._handleErrorCurrZone),this._scheduleTaskZS=n&&(n.onScheduleTask?n:t._scheduleTaskZS),this._scheduleTaskDlgt=n&&(n.onScheduleTask?t:t._scheduleTaskDlgt),this._scheduleTaskCurrZone=n&&(n.onScheduleTask?this._zone:t._scheduleTaskCurrZone),this._invokeTaskZS=n&&(n.onInvokeTask?n:t._invokeTaskZS),this._invokeTaskDlgt=n&&(n.onInvokeTask?t:t._invokeTaskDlgt),this._invokeTaskCurrZone=n&&(n.onInvokeTask?this._zone:t._invokeTaskCurrZone),this._cancelTaskZS=n&&(n.onCancelTask?n:t._cancelTaskZS),this._cancelTaskDlgt=n&&(n.onCancelTask?t:t._cancelTaskDlgt),this._cancelTaskCurrZone=n&&(n.onCancelTask?this._zone:t._cancelTaskCurrZone),this._hasTaskZS=null,this._hasTaskDlgt=null,this._hasTaskDlgtOwner=null,this._hasTaskCurrZone=null;let r=n&&n.onHasTask,i=t&&t._hasTaskZS;(r||i)&&(this._hasTaskZS=r?n:a,this._hasTaskDlgt=t,this._hasTaskDlgtOwner=this,this._hasTaskCurrZone=this._zone,n.onScheduleTask||(this._scheduleTaskZS=a,this._scheduleTaskDlgt=t,this._scheduleTaskCurrZone=this._zone),n.onInvokeTask||(this._invokeTaskZS=a,this._invokeTaskDlgt=t,this._invokeTaskCurrZone=this._zone),n.onCancelTask||(this._cancelTaskZS=a,this._cancelTaskDlgt=t,this._cancelTaskCurrZone=this._zone))}get zone(){return this._zone}fork(e,t){return this._forkZS?this._forkZS.onFork(this._forkDlgt,this.zone,e,t):new i(e,t)}intercept(e,t,n){return this._interceptZS?this._interceptZS.onIntercept(this._interceptDlgt,this._interceptCurrZone,e,t,n):t}invoke(e,t,n,r,i){return this._invokeZS?this._invokeZS.onInvoke(this._invokeDlgt,this._invokeCurrZone,e,t,n,r,i):t.apply(n,r)}handleError(e,t){return!this._handleErrorZS||this._handleErrorZS.onHandleError(this._handleErrorDlgt,this._handleErrorCurrZone,e,t)}scheduleTask(e,t){let n=t;if(this._scheduleTaskZS)this._hasTaskZS&&n._zoneDelegates.push(this._hasTaskDlgtOwner),n=this._scheduleTaskZS.onScheduleTask(this._scheduleTaskDlgt,this._scheduleTaskCurrZone,e,t),n||=t;else if(t.scheduleFn)t.scheduleFn(t);else if(t.type==le)v(t);else throw Error(`Task is missing scheduleFn.`);return n}invokeTask(e,t,n,r){return this._invokeTaskZS?this._invokeTaskZS.onInvokeTask(this._invokeTaskDlgt,this._invokeTaskCurrZone,e,t,n,r):t.callback.apply(n,r)}cancelTask(e,t){let n;if(this._cancelTaskZS)n=this._cancelTaskZS.onCancelTask(this._cancelTaskDlgt,this._cancelTaskCurrZone,e,t);else{if(!t.cancelFn)throw Error(`Task is not cancelable`);n=t.cancelFn(t)}return n}hasTask(e,t){try{this._hasTaskZS&&this._hasTaskZS.onHasTask(this._hasTaskDlgt,this._hasTaskCurrZone,e,t)}catch(t){this.handleError(e,t)}}_updateTaskCount(e,t){let n=this._taskCounts,r=n[e],i=n[e]=r+t;if(i<0)throw Error(`More tasks executed then were scheduled.`);if(r==0||i==0){let t={microTask:n.microTask>0,macroTask:n.macroTask>0,eventTask:n.eventTask>0,change:e};this.hasTask(this._zone,t)}}}class u{constructor(e,t,n,r,i,a){if(o(this,`type`),o(this,`source`),o(this,`invoke`),o(this,`callback`),o(this,`data`),o(this,`scheduleFn`),o(this,`cancelFn`),o(this,`_zone`,null),o(this,`runCount`,0),o(this,`_zoneDelegates`,null),o(this,`_state`,`notScheduled`),this.type=e,this.source=t,this.data=r,this.scheduleFn=i,this.cancelFn=a,!n)throw Error(`callback is not defined`);this.callback=n;let c=this;this.invoke=e===de&&r&&r.useG?u.invokeTask:function(){return u.invokeTask.call(s,c,this,arguments)}}static invokeTask(e,t,n){e||=this,ge++;try{return e.runCount++,e.zone.runTask(e,t,n)}finally{try{ge===1&&!s[m]&&te()}finally{ge--}}}get zone(){return this._zone}get state(){return this._state}cancelScheduleRequest(){this._transitionTo(re,ie)}_transitionTo(e,t,n){if(this._state===t||this._state===n)this._state=e,e==re&&(this._zoneDelegates=null);else throw Error(`${this.type} '${this.source}': can not transition to '${e}', expecting state '${t}'${n?` or '`+n+`'`:``}, was '${this._state}'.`)}toString(){return this.data&&this.data.handleId!==void 0?this.data.handleId.toString():Object.prototype.toString.call(this)}toJSON(){return{type:this.type,state:this.state,source:this.source,zone:this.zone.name,runCount:this.runCount}}}let d=c(`setTimeout`),f=c(`Promise`),p=c(`then`),m=c(`enable_native_microtask_draining`),h=[],g=!1,_;function ee(e){!_&&s[f]&&(_=s[f].resolve(0)),_?(_[p]??_.then).call(_,e):s[d](e,0)}function v(e){let t=s[m],n=t&&h.length===0&&!g,r=!t&&ge===0&&h.length===0;(n||r)&&ee(te),e&&h.push(e)}function te(){if(!g){g=!0;try{for(;h.length;){let e=h;h=[];for(let t of e)try{t.zone.runTask(t,null,null)}catch(e){pe.onUnhandledError(e)}}}finally{if(s[m])g=!1,pe.microtaskDrainDone();else try{pe.microtaskDrainDone()}finally{g=!1}}}}let ne={name:`NO ZONE`},re=`notScheduled`,ie=`scheduling`,ae=`scheduled`,oe=`running`,se=`canceling`,ce=`unknown`,le=`microTask`,ue=`macroTask`,de=`eventTask`,fe=Object.create(null),pe={symbol:c,currentZoneFrame:()=>me,onUnhandledError:_e,microtaskDrainDone:_e,scheduleMicroTask:v,showUncaughtError:()=>!i[c(`ignoreConsoleErrorUncaughtError`)],patchEventTarget:()=>[],patchOnProperties:_e,patchMethod:()=>_e,bindArguments:()=>[],patchThen:()=>_e,patchMacroTask:()=>_e,patchEventPrototype:()=>_e,getGlobalObjects:()=>void 0,ObjectDefineProperty:()=>_e,ObjectGetOwnPropertyDescriptor:()=>void 0,ObjectCreate:()=>void 0,ArraySlice:()=>[],patchClass:()=>_e,wrapWithCurrentZone:()=>_e,filterProperties:()=>[],attachOriginToPatched:()=>_e,_redefineProperty:()=>_e,patchCallbacks:()=>_e,nativeScheduleMicroTask:ee},me={parent:null,zone:new i(null,null)},he=null,ge=0;function _e(){}return n(`Zone`,`Zone`),i}function u(){let e=globalThis,t=e[c(`forceDuplicateZoneCheck`)]===!0;if(e.Zone&&(t||typeof e.Zone.__symbol__!=`function`))throw Error(`Zone already loaded.`);return e.Zone??=l(),e.Zone}var d=Object.getOwnPropertyDescriptor,f=Object.defineProperty,p=Object.getPrototypeOf,m=Object.create,h=Array.prototype.slice,g=`addEventListener`,_=`removeEventListener`,ee=c(g),v=c(_),te=`true`,ne=`false`,re=c(``);function ie(e,t){return Zone.current.wrap(e,t)}function ae(e,t,n,r,i){return Zone.current.scheduleMacroTask(e,t,n,r,i)}var oe=c,se=typeof window<`u`,ce=se?window:void 0,le=se&&ce||globalThis,ue=`removeAttribute`;function de(e,t){for(let n=e.length-1;n>=0;n--)typeof e[n]==`function`&&(e[n]=ie(e[n],t+`_`+n));return e}function fe(e,t){let n=e.constructor.name;for(let r=0;r{let t=function(){return e.apply(this,de(arguments,n+`.`+i))};return De(t,e),t})(a)}}}function pe(e){return e?e.writable===!1?!1:typeof e.get!=`function`||e.set!==void 0:!0}var me=typeof WorkerGlobalScope<`u`&&self instanceof WorkerGlobalScope,he=!(`nw`in le)&&le.process!==void 0&&le.process.toString()===`[object process]`,ge=!he&&!me&&!!(se&&ce.HTMLElement),_e=le.process!==void 0&&le.process.toString()===`[object process]`&&!me&&!!(se&&ce.HTMLElement),ve=Object.create(null),ye=oe(`enable_beforeunload`),be=function(e){if(e||=le.event,!e)return;let t=ve[e.type];t||=ve[e.type]=oe(`ON_PROPERTY`+e.type);let n=this||e.target||le,r=n[t],i;if(ge&&n===ce&&e.type===`error`){let t=e;i=r&&r.call(this,t.message,t.filename,t.lineno,t.colno,t.error),i===!0&&e.preventDefault()}else i=r&&r.apply(this,arguments),e.type===`beforeunload`&&le[ye]&&typeof i==`string`?e.returnValue=i:i!=null&&!i&&e.preventDefault();return i};function xe(e,t,n){let r=d(e,t);if(!r&&n&&d(n,t)&&(r={enumerable:!0,configurable:!0}),!r||!r.configurable)return;let i=oe(`on`+t+`patched`);if(Object.hasOwn(e,i)&&e[i])return;delete r.writable,delete r.value;let a=r.get,o=r.set,s=t.slice(2),c=ve[s];c||=ve[s]=oe(`ON_PROPERTY`+s),r.set=function(t){let n=this;!n&&e===le&&(n=le),n&&(typeof n[c]==`function`&&n.removeEventListener(s,be),o?.call(n,null),n[c]=t,typeof t==`function`&&n.addEventListener(s,be,!1))},r.get=function(){let n=this;if(!n&&e===le&&(n=le),!n)return null;let i=n[c];if(i)return i;if(a){let e=a.call(this);if(e)return r.set.call(this,e),typeof n[ue]==`function`&&n.removeAttribute(t),e}return null},f(e,t,r),e[i]=!0}function Se(e,t,n){if(t)for(let r=0;rfunction(t,r){let a=n(t,r);return a.cbIdx>=0&&typeof r[a.cbIdx]==`function`?ae(a.name,r[a.cbIdx],a,i):e.apply(t,r)})}function De(e,t){e[oe(`OriginalDelegate`)]=t}function Oe(e){return typeof e==`function`}function ke(e){return typeof e==`number`}var Ae={useG:!0},je=Object.create(null),Me={},Ne=RegExp(`^`+re+`(\\w+)(true|false)$`),Pe=oe(`propagationStopped`),Fe=[`capture`,`once`,`passive`,`signal`];function Ie(e,t){let n=(t?t(e):e)+ne,r=(t?t(e):e)+te,i=re+n,a=re+r;je[e]={[ne]:i,[te]:a}}function Le(e,t,n,r){let i=r&&r.add||g,o=r&&r.rm||_,s=r&&r.listeners||`eventListeners`,c=r&&r.rmAll||`removeAllListeners`,l=oe(i),u=`.`+i+`:`,d=function(e,t,n){if(e.isRemoved)return;let r=e.callback;typeof r==`object`&&r.handleEvent&&(e.callback=e=>r.handleEvent(e),e.originalDelegate=r);let i;try{e.invoke(e,t,[n])}catch(e){i=e}let a=e.options;if(a&&typeof a==`object`&&a.once){let r=e.originalDelegate?e.originalDelegate:e.callback;t[o].call(t,n.type,r,a)}return i};function f(n,r,i){if(r||=e.event,!r)return;let a=n||r.target||e,o=a[je[r.type][i?te:ne]];if(o){let e=[];if(o.length===1){let t=d(o[0],a,r);t&&e.push(t)}else{let t=o.slice();for(let n=0;n{throw r})}}}let m=function(e){return f(this,e,!1)},h=function(e){return f(this,e,!0)};function ee(t,n){if(!t)return!1;let r=!0;n&&n.useG!==void 0&&(r=n.useG);let d=n&&n.vh,f=!0;n&&n.chkDup!==void 0&&(f=n.chkDup);let g=!1;n&&n.rt!==void 0&&(g=n.rt);let _=t;for(;_&&!Object.hasOwn(_,i);)_=p(_);if(!_&&t[i]&&(_=t),!_||_[l])return!1;let ee=n&&n.eventNameToString,v={},ie=_[l]=_[i],ae=_[oe(o)]=_[o],se=_[oe(s)]=_[s],ce=_[oe(c)]=_[c],le;n&&n.prepend&&(le=_[oe(n.prepend)]=_[n.prepend]);function ue(e,t){return t?typeof e==`boolean`?{capture:e,passive:!0}:e?(typeof e==`object`&&e.passive!==!1&&(e.passive=!0),e):{passive:!0}:e}let de=function(e){if(!v.isExisting)return ie.call(v.target,v.eventName,v.capture?h:m,v.options)},fe=function(e){if(!e.isRemoved){let t=je[e.eventName],n;t&&(n=t[e.capture?te:ne]);let r=n&&e.target[n];if(r){for(let t=0;tge.zone.cancelTask(ge);t.call(_,`abort`,e,{once:!0}),ge.removeAbortListener=()=>_.removeEventListener(`abort`,e)}if(v.target=null,me&&(me.taskData=null),ie&&(v.options.once=!0),typeof ge.options!=`boolean`&&(ge.options=g),ge.target=l,ge.capture=re,ge.eventName=u,m&&(ge.originalDelegate=p),c?ce.unshift(ge):ce.push(ge),s)return l}};return _[i]=Ce(ie,u,_e,ve,g),le&&(_.prependListener=Ce(le,`.prependListener:`,me,ve,g,!0)),_[o]=function(){let t=this||e,r=arguments[0];n&&n.transferEventName&&(r=n.transferEventName(r));let i=arguments[2],a=i?typeof i==`boolean`||i.capture:!1,o=arguments[1];if(!o)return ae.apply(this,arguments);if(d&&!d(ae,o,t,arguments))return;let s=je[r],c;s&&(c=s[a?te:ne]);let l=c&&t[c];if(l)for(let e=0;efunction(t,n){t[Pe]=!0,e&&e.apply(t,n)})}function Be(e,t){t.patchMethod(e,`queueMicrotask`,e=>function(e,t){Zone.current.scheduleMicroTask(`queueMicrotask`,t[0])})}var Ve=oe(`zoneTask`);function He(e,t,n,r){let i=null,a=null;t+=r,n+=r;let o={};function s(t){let n=t.data;n.args[0]=function(){return t.invoke.apply(this,arguments)};let r=i.apply(e,n.args);return ke(r)?n.handleId=r:(n.handle=r,n.isRefreshable=Oe(r?.refresh)),t}function c(t){let{handle:n,handleId:r}=t.data;return a.call(e,n??r)}i=Te(e,t,n=>function(i,a){if(Oe(a[0])){let e={isRefreshable:!1,isPeriodic:r===`Interval`,delay:r===`Timeout`||r===`Interval`?a[1]||0:void 0,args:a},n=a[0];a[0]=function(){try{return n.apply(this,arguments)}finally{let{handle:t,handleId:n,isPeriodic:r,isRefreshable:i}=e;!r&&!i&&(n?delete o[n]:t&&(t[Ve]=null))}};let i=ae(t,a[0],e,s,c);if(!i)return i;let{handleId:l,handle:u,isRefreshable:d,isPeriodic:f}=i.data;if(l)o[l]=i;else if(u&&(u[Ve]=i,d&&!f)){let e=u.refresh;u.refresh=function(){let{zone:t,state:n}=i;return n===`notScheduled`?(i._state=`scheduled`,t._updateTaskCount(i,1)):n===`running`&&(i._state=`scheduling`),e.call(this)}}return u??l??i}return n.apply(e,a)}),a=Te(e,n,t=>function(n,r){let i=r[0],a;ke(i)?(a=o[i],delete o[i]):(a=i?.[Ve],a?i[Ve]=null:a=i),a?.type?a.cancelFn&&a.zone.cancelTask(a):t.apply(e,r)})}function Ue(e,t){let{isBrowser:n,isMix:r}=t.getGlobalObjects();(n||r)&&e.customElements&&`customElements`in e&&t.patchCallbacks(t,e.customElements,`customElements`,`define`,[`connectedCallback`,`disconnectedCallback`,`adoptedCallback`,`attributeChangedCallback`,`formAssociatedCallback`,`formDisabledCallback`,`formResetCallback`,`formStateRestoreCallback`])}function We(e,t){if(Zone[t.symbol(`patchEventTarget`)])return;let{eventNames:n,zoneSymbolEventNames:r,TRUE_STR:i,FALSE_STR:a,ZONE_SYMBOL_PREFIX:o}=t.getGlobalObjects();for(let e=0;et.target===e);if(r.length===0)return t;let i=r[0].ignoreProperties;return t.filter(e=>i.indexOf(e)===-1)}function qe(e,t,n,r){e&&Se(e,Ke(e,t,n),r)}function Je(e){return Object.getOwnPropertyNames(e).filter(e=>e.startsWith(`on`)&&e.length>2).map(e=>e.substring(2))}function Ye(e,t){if(he&&!_e||Zone[e.symbol(`patchEvents`)])return;let n=t.__Zone_ignore_on_properties,r=[];if(ge){let e=window;r=r.concat([`Document`,`SVGElement`,`Element`,`HTMLElement`,`HTMLBodyElement`,`HTMLMediaElement`,`HTMLFrameSetElement`,`HTMLFrameElement`,`HTMLIFrameElement`,`HTMLMarqueeElement`,`Worker`]),qe(e,Je(e),n,p(e))}r=r.concat([`XMLHttpRequest`,`XMLHttpRequestEventTarget`,`IDBIndex`,`IDBRequest`,`IDBOpenDBRequest`,`IDBDatabase`,`IDBTransaction`,`IDBCursor`,`WebSocket`]);for(let e=0;e{let t=`clear`;He(e,`set`,t,`Timeout`),He(e,`set`,t,`Interval`),He(e,`set`,t,`Immediate`)}),e.__load_patch(`requestAnimationFrame`,e=>{He(e,`request`,`cancel`,`AnimationFrame`),He(e,`mozRequest`,`mozCancel`,`AnimationFrame`),He(e,`webkitRequest`,`webkitCancel`,`AnimationFrame`)}),e.__load_patch(`blocking`,(e,t)=>{let n=[`alert`,`prompt`,`confirm`];for(let r=0;rfunction(r,a){return t.current.run(n,e,a,i)})}}),e.__load_patch(`EventTarget`,(e,t,n)=>{Ge(e,n),We(e,n);let r=e.XMLHttpRequestEventTarget;r&&r.prototype&&n.patchEventTarget(e,n,[r.prototype])}),e.__load_patch(`MutationObserver`,(e,t,n)=>{we(`MutationObserver`),we(`WebKitMutationObserver`)}),e.__load_patch(`IntersectionObserver`,(e,t,n)=>{we(`IntersectionObserver`)}),e.__load_patch(`FileReader`,(e,t,n)=>{we(`FileReader`)}),e.__load_patch(`on_property`,(e,t,n)=>{Ye(n,e)}),e.__load_patch(`customElements`,(e,t,n)=>{Ue(e,n)}),e.__load_patch(`XHR`,(e,t)=>{c(e);let n=oe(`xhrTask`),r=oe(`xhrSync`),i=oe(`xhrListener`),a=oe(`xhrScheduled`),o=oe(`xhrURL`),s=oe(`xhrErrorBeforeScheduled`);function c(e){let c=e.XMLHttpRequest;if(!c)return;let l=c.prototype;function u(e){return e[n]}let d=l[ee],f=l[v];if(!d){let t=e.XMLHttpRequestEventTarget;if(t){let e=t.prototype;d=e[ee],f=e[v]}}let p=`readystatechange`,m=`scheduled`;function h(e){let r=e.data,o=r.target;o[a]=!1,o[s]=!1;let c=o[i];d||(d=o[ee],f=o[v]),c&&f.call(o,p,c);let l=o[i]=()=>{if(o.readyState===o.DONE){if(!r.aborted&&o[a]&&e.state===m){let n=o[t.__symbol__(`loadfalse`)];if(o.status!==0&&n&&n.length>0){let i=e.invoke;e.invoke=function(){let n=o[t.__symbol__(`loadfalse`)];for(let t=0;tfunction(e,t){return e[r]=t[2]==0,e[o]=t[1],te.apply(e,t)}),ne=oe(`fetchTaskAborting`),re=oe(`fetchTaskScheduling`),ie=Te(l,`send`,()=>function(e,n){if(t.current[re]===!0||e[r])return ie.apply(e,n);{let t={target:e,url:e[o],isPeriodic:!1,args:n,aborted:!1},r=ae(`XMLHttpRequest.send`,g,t,h,_);e&&e[s]===!0&&!t.aborted&&r.state===m&&r.invoke()}}),se=Te(l,`abort`,()=>function(e,n){let r=u(e);if(r&&typeof r.type==`string`){if(r.cancelFn==null||r.data&&r.data.aborted)return;r.zone.cancelTask(r)}else if(t.current[ne]===!0)return se.apply(e,n)})}}),e.__load_patch(`geolocation`,e=>{e.navigator&&e.navigator.geolocation&&fe(e.navigator.geolocation,[`getCurrentPosition`,`watchPosition`])}),e.__load_patch(`PromiseRejectionEvent`,(e,t)=>{function n(t){return function(n){Re(e,t).forEach(r=>{let i=e.PromiseRejectionEvent;if(i){let e=new i(t,{promise:n.promise,reason:n.rejection});r.invoke(e)}})}}e.PromiseRejectionEvent&&(t[oe(`unhandledPromiseRejectionHandler`)]=n(`unhandledrejection`),t[oe(`rejectionHandledHandler`)]=n(`rejectionhandled`))}),e.__load_patch(`queueMicrotask`,(e,t,n)=>{Be(e,n)})}function Ze(e){e.__load_patch(`ZoneAwarePromise`,(e,t,n)=>{let r=Object.getOwnPropertyDescriptor,i=Object.defineProperty;function a(e){return e&&e.toString===Object.prototype.toString?(e.constructor&&e.constructor.name||``)+`: `+JSON.stringify(e):e?e.toString():Object.prototype.toString.call(e)}let o=n.symbol,s=[],c=e[o(`DISABLE_WRAPPING_UNCAUGHT_PROMISE_REJECTION`)]!==!1,l=o(`Promise`),u=o(`then`);n.onUnhandledError=e=>{if(n.showUncaughtError()){let t=e&&e.rejection;t&&e.zone&&e.task?console.error(`Unhandled Promise rejection:`,t instanceof Error?t.message:t,`; Zone:`,e.zone.name,`; Task:`,e.task&&e.task.source,`; Value:`,t,t instanceof Error?t.stack:void 0):console.error(e)}},n.microtaskDrainDone=()=>{for(;s.length;){let e=s.shift();try{e.zone.runGuarded(()=>{throw e.throwOriginal?e.rejection:e})}catch(e){f(e)}}};let d=o(`unhandledPromiseRejectionHandler`);function f(e){n.onUnhandledError(e);try{let n=t[d];typeof n==`function`&&n.call(this,e)}catch{}}function p(e){return e&&typeof e.then==`function`}function m(e){return e}function h(e){return de.reject(e)}let g=o(`state`),_=o(`value`),ee=o(`finally`),v=o(`parentPromiseValue`),te=o(`parentPromiseState`);function ne(e,t){return n=>{try{ae(e,t,n)}catch(t){ae(e,!1,t)}}}let re=function(){let e=!1;return function(t){return function(){e||(e=!0,t.apply(null,arguments))}}},ie=o(`currentTaskTrace`);function ae(e,r,o){let l=re();if(e===o)throw TypeError(`Promise resolved with itself`);if(e[g]===null){let u=null;try{(typeof o==`object`||typeof o==`function`)&&(u=o&&o.then)}catch(t){return l(()=>{ae(e,!1,t)})(),e}if(r!==!1&&o instanceof de&&Object.hasOwn(o,g)&&Object.hasOwn(o,_)&&o[g]!==null)se(o),ae(e,o[g],o[_]);else if(r!==!1&&typeof u==`function`)try{u.call(o,l(ne(e,r)),l(ne(e,!1)))}catch(t){l(()=>{ae(e,!1,t)})()}else{e[g]=r;let l=e[_];if(e[_]=o,e[ee]===ee&&r===!0&&(e[g]=e[te],e[_]=e[v]),r===!1&&o instanceof Error){let e=t.currentTask&&t.currentTask.data&&t.currentTask.data.__creationTrace__;e&&i(o,ie,{configurable:!0,enumerable:!1,writable:!0,value:e})}for(let t=0;t{try{let r=e[_],i=!!n&&ee===n[ee];i&&(n[v]=r,n[te]=a),ae(n,!0,t.run(o,void 0,i&&o!==h&&o!==m?[]:[r]))}catch(e){ae(n,!1,e)}},n)}let le=function(){},ue=e.AggregateError;class de{static toString(){return`function ZoneAwarePromise() { [native code] }`}static resolve(e){return e instanceof de?e:ae(new this(null),!0,e)}static reject(e){return ae(new this(null),!1,e)}static withResolvers(){let e={};return e.promise=new de((t,n)=>{e.resolve=t,e.reject=n}),e}static any(e){if(!e||typeof e[Symbol.iterator]!=`function`)return Promise.reject(new ue([],`All promises were rejected`));let t=[],n=0;try{for(let r of e)n++,t.push(de.resolve(r))}catch{return Promise.reject(new ue([],`All promises were rejected`))}if(n===0)return Promise.reject(new ue([],`All promises were rejected`));let r=!1,i=[];return new de((e,a)=>{for(let o=0;o{r||(r=!0,e(t))},e=>{i.push(e),n--,n===0&&(r=!0,a(new ue(i,`All promises were rejected`)))})})}static race(e){let t,n,r=new this((e,r)=>{t=e,n=r});function i(e){t(e)}function a(e){n(e)}for(let t of e)p(t)||(t=this.resolve(t)),t.then(i,a);return r}static all(e){return de.allWithCallback(e)}static allSettled(e){return(this&&this.prototype instanceof de?this:de).allWithCallback(e,{thenCallback:e=>({status:`fulfilled`,value:e}),errorCallback:e=>({status:`rejected`,reason:e})})}static allWithCallback(e,t){let n,r,i=new this((e,t)=>{n=e,r=t}),a=2,o=0,s=[];for(let i of e){p(i)||(i=this.resolve(i));let e=o;try{i.then(r=>{s[e]=t?t.thenCallback(r):r,a--,a===0&&n(s)},i=>{t?(s[e]=t.errorCallback(i),a--,a===0&&n(s)):r(i)})}catch(e){r(e)}a++,o++}return a-=2,a===0&&n(s),i}constructor(e){let t=this;if(!(t instanceof de))throw Error(`Must be an instanceof Promise.`);t[g]=null,t[_]=[];try{let n=re();e&&e(n(ne(t,!0)),n(ne(t,!1)))}catch(e){ae(t,!1,e)}}get[Symbol.toStringTag](){return`Promise`}get[Symbol.species](){return de}then(e,n){let r=this.constructor?.[Symbol.species];(!r||typeof r!=`function`)&&(r=this.constructor||de);let i=new r(le),a=t.current;return this[g]==null?this[_].push(a,i,e,n):ce(this,a,i,e,n),i}catch(e){return this.then(null,e)}finally(e){let n=this.constructor?.[Symbol.species];(!n||typeof n!=`function`)&&(n=de);let r=new n(le);r[ee]=ee;let i=t.current;return this[g]==null?this[_].push(i,r,e,e):ce(this,i,r,e,e),r}}de.resolve=de.resolve,de.reject=de.reject,de.race=de.race,de.all=de.all;let fe=e[l]=e.Promise;e.Promise=de;let pe=o(`thenPatched`);function me(e){let t=e.prototype,n=r(t,`then`);if(n&&(n.writable===!1||!n.configurable))return;let i=t.then;t[u]=i,e.prototype.then=function(e,t){return new de((e,t)=>{i.call(this,e,t)}).then(e,t)},e[pe]=!0}n.patchThen=me;function he(e){return function(t,n){let r=e.apply(t,n);if(r instanceof de)return r;let i=r.constructor;return i[pe]||me(i),r}}if(fe){me(fe);let t=fe.try;t&&typeof t==`function`&&(de.try=t),Te(e,`fetch`,e=>he(e))}return Promise[t.__symbol__(`uncaughtPromiseErrors`)]=s,de})}function Qe(e){e.__load_patch(`toString`,e=>{let t=Function.prototype.toString,n=oe(`OriginalDelegate`),r=oe(`Promise`),i=oe(`Error`),a=function(){if(typeof this==`function`){let a=this[n];if(a)return typeof a==`function`?t.call(a):Object.prototype.toString.call(a);if(this===Promise){let n=e[r];if(n)return t.call(n)}if(this===Error){let n=e[i];if(n)return t.call(n)}}return t.call(this)};a[n]=t,Function.prototype.toString=a;let o=Object.prototype.toString;Object.prototype.toString=function(){return typeof Promise==`function`&&this instanceof Promise?`[object Promise]`:o.call(this)}})}function $e(e,t,n,r,i){let a=Zone.__symbol__(r);if(t[a])return;let o=t[a]=t[r];t[r]=function(a,s,c){return s&&s.prototype&&i.forEach(function(t){let i=`${n}.${r}::`+t,a=s.prototype;try{if(Object.hasOwn(a,t)){let n=e.ObjectGetOwnPropertyDescriptor(a,t);n&&n.value?(n.value=e.wrapWithCurrentZone(n.value,i),e._redefineProperty(s.prototype,t,n)):a[t]&&(a[t]=e.wrapWithCurrentZone(a[t],i))}else a[t]&&(a[t]=e.wrapWithCurrentZone(a[t],i))}catch{}}),o.call(t,a,s,c)},e.attachOriginToPatched(t[r],o)}function et(e){e.__load_patch(`util`,(e,t,n)=>{let r=Je(e);n.patchOnProperties=Se,n.patchMethod=Te,n.bindArguments=de,n.patchMacroTask=Ee;let i=t.__symbol__(`BLACK_LISTED_EVENTS`),a=t.__symbol__(`UNPATCHED_EVENTS`);e[a]&&(e[i]=e[a]),e[i]&&(t[i]=t[a]=e[i]),n.patchEventPrototype=ze,n.patchEventTarget=Le,n.ObjectDefineProperty=f,n.ObjectGetOwnPropertyDescriptor=d,n.ObjectCreate=m,n.ArraySlice=h,n.patchClass=we,n.wrapWithCurrentZone=ie,n.filterProperties=Ke,n.attachOriginToPatched=De,n._redefineProperty=Object.defineProperty,n.patchCallbacks=$e,n.getGlobalObjects=()=>({globalSources:Me,zoneSymbolEventNames:je,eventNames:r,isBrowser:ge,isMix:_e,isNode:he,TRUE_STR:te,FALSE_STR:ne,ZONE_SYMBOL_PREFIX:re,ADD_EVENT_LISTENER_STR:g,REMOVE_EVENT_LISTENER_STR:_})})}function tt(e){Ze(e),Qe(e),et(e)}var nt=u();tt(nt),Xe(nt);var rt=(function(e){return e[e.NONE=0]=`NONE`,e[e.HTML=1]=`HTML`,e[e.STYLE=2]=`STYLE`,e[e.SCRIPT=3]=`SCRIPT`,e[e.URL=4]=`URL`,e[e.RESOURCE_URL=5]=`RESOURCE_URL`,e[e.ATTRIBUTE_NO_BINDING=6]=`ATTRIBUTE_NO_BINDING`,e})(rt||{}),it=(function(e){return e[e.None=0]=`None`,e[e.Const=1]=`Const`,e})(it||{}),at=class{modifiers;constructor(e=it.None){this.modifiers=e}hasModifier(e){return(this.modifiers&e)!==0}},ot=(function(e){return e[e.Dynamic=0]=`Dynamic`,e[e.Bool=1]=`Bool`,e[e.String=2]=`String`,e[e.Int=3]=`Int`,e[e.Number=4]=`Number`,e[e.Function=5]=`Function`,e[e.Inferred=6]=`Inferred`,e[e.None=7]=`None`,e})(ot||{}),st=class extends at{name;constructor(e,t){super(t),this.name=e}visitType(e,t){return e.visitBuiltinType(this,t)}};ot.Dynamic;var ct=new st(ot.Inferred);ot.Bool,ot.Int,ot.Number,ot.String,ot.Function,ot.None;var y=(function(e){return e[e.Equals=0]=`Equals`,e[e.NotEquals=1]=`NotEquals`,e[e.Assign=2]=`Assign`,e[e.Identical=3]=`Identical`,e[e.NotIdentical=4]=`NotIdentical`,e[e.Minus=5]=`Minus`,e[e.Plus=6]=`Plus`,e[e.Divide=7]=`Divide`,e[e.Multiply=8]=`Multiply`,e[e.Modulo=9]=`Modulo`,e[e.And=10]=`And`,e[e.Or=11]=`Or`,e[e.BitwiseOr=12]=`BitwiseOr`,e[e.BitwiseAnd=13]=`BitwiseAnd`,e[e.Lower=14]=`Lower`,e[e.LowerEquals=15]=`LowerEquals`,e[e.Bigger=16]=`Bigger`,e[e.BiggerEquals=17]=`BiggerEquals`,e[e.NullishCoalesce=18]=`NullishCoalesce`,e[e.Exponentiation=19]=`Exponentiation`,e[e.In=20]=`In`,e[e.InstanceOf=21]=`InstanceOf`,e[e.AdditionAssignment=22]=`AdditionAssignment`,e[e.SubtractionAssignment=23]=`SubtractionAssignment`,e[e.MultiplicationAssignment=24]=`MultiplicationAssignment`,e[e.DivisionAssignment=25]=`DivisionAssignment`,e[e.RemainderAssignment=26]=`RemainderAssignment`,e[e.ExponentiationAssignment=27]=`ExponentiationAssignment`,e[e.AndAssignment=28]=`AndAssignment`,e[e.OrAssignment=29]=`OrAssignment`,e[e.NullishCoalesceAssignment=30]=`NullishCoalesceAssignment`,e})(y||{});function lt(e,t){return e==null||t==null?e==t:e.isEquivalent(t)}function ut(e,t,n){let r=e.length;if(r!==t.length)return!1;for(let i=0;ie.isEquivalent(t))}var ft=class{leadingComments;type;sourceSpan;constructor(e,t,n){this.leadingComments=n,this.type=e||null,this.sourceSpan=t||null}prop(e,t){return new St(this,e,null,t)}key(e,t,n){return new Ct(this,e,t,n)}callFn(e,t,n,r){return new ht(this,e,null,t,n,r)}instantiate(e,t,n,r){return new gt(this,e,t,n)}conditional(e,t=null,n,r){return new bt(this,e,t,null,n)}equals(e,t){return new xt(y.Equals,this,e,null,t)}notEquals(e,t){return new xt(y.NotEquals,this,e,null,t)}identical(e,t){return new xt(y.Identical,this,e,null,t)}notIdentical(e,t){return new xt(y.NotIdentical,this,e,null,t)}minus(e,t){return new xt(y.Minus,this,e,null,t)}plus(e,t){return new xt(y.Plus,this,e,null,t)}divide(e,t){return new xt(y.Divide,this,e,null,t)}multiply(e,t){return new xt(y.Multiply,this,e,null,t)}modulo(e,t){return new xt(y.Modulo,this,e,null,t)}power(e,t){return new xt(y.Exponentiation,this,e,null,t)}and(e,t){return new xt(y.And,this,e,null,t)}bitwiseOr(e,t){return new xt(y.BitwiseOr,this,e,null,t)}bitwiseAnd(e,t){return new xt(y.BitwiseAnd,this,e,null,t)}or(e,t){return new xt(y.Or,this,e,null,t)}lower(e,t){return new xt(y.Lower,this,e,null,t)}lowerEquals(e,t){return new xt(y.LowerEquals,this,e,null,t)}bigger(e,t){return new xt(y.Bigger,this,e,null,t)}biggerEquals(e,t){return new xt(y.BiggerEquals,this,e,null,t)}isBlank(e){return this.equals(Ot,e)}nullishCoalesce(e,t){return new xt(y.NullishCoalesce,this,e,null,t)}toStmt(e){return new jt(this,null,e)}},pt=class e extends ft{name;constructor(e,t,n,r){super(t,n,r),this.name=e}isEquivalent(t){return t instanceof e&&this.name===t.name}isConstant(){return!1}visitExpression(e,t){return e.visitReadVarExpr(this,t)}clone(){return new e(this.name,this.type,this.sourceSpan)}set(e){return new xt(y.Assign,this,e,null,this.sourceSpan)}},mt=class e extends ft{expr;constructor(e,t,n,r){super(t,n,r),this.expr=e}visitExpression(e,t){return e.visitTypeofExpr(this,t)}isEquivalent(t){return t instanceof e&&t.expr.isEquivalent(this.expr)}isConstant(){return this.expr.isConstant()}clone(){return new e(this.expr.clone())}},ht=class e extends ft{fn;args;pure;isOptional;constructor(e,t,n,r,i=!1,a,o=!1){super(n,r,a),this.fn=e,this.args=t,this.pure=i,this.isOptional=o}get receiver(){return this.fn}isEquivalent(t){return t instanceof e&&this.fn.isEquivalent(t.fn)&&dt(this.args,t.args)&&this.pure===t.pure}isConstant(){return!1}visitExpression(e,t){return e.visitInvokeFunctionExpr(this,t)}clone(){return new e(this.fn.clone(),this.args.map(e=>e.clone()),this.type,this.sourceSpan,this.pure,[],this.isOptional)}},gt=class e extends ft{classExpr;args;constructor(e,t,n,r,i){super(n,r,i),this.classExpr=e,this.args=t}isEquivalent(t){return t instanceof e&&this.classExpr.isEquivalent(t.classExpr)&&dt(this.args,t.args)}isConstant(){return!1}visitExpression(e,t){return e.visitInstantiateExpr(this,t)}clone(){return new e(this.classExpr.clone(),this.args.map(e=>e.clone()),this.type,this.sourceSpan)}},_t=class e extends ft{body;flags;constructor(e,t,n,r){super(null,n,r),this.body=e,this.flags=t}isEquivalent(t){return t instanceof e&&this.body===t.body&&this.flags===t.flags}isConstant(){return!0}visitExpression(e,t){return e.visitRegularExpressionLiteral(this,t)}clone(){return new e(this.body,this.flags,this.sourceSpan)}},vt=class e extends ft{value;constructor(e,t,n,r){super(t,n,r),this.value=e}isEquivalent(t){return t instanceof e&&this.value===t.value}isConstant(){return!0}visitExpression(e,t){return e.visitLiteralExpr(this,t)}clone(){return new e(this.value,this.type,this.sourceSpan)}},yt=class e extends ft{value;typeParams;constructor(e,t,n=null,r,i){super(t,r,i),this.value=e,this.typeParams=n}isEquivalent(t){return t instanceof e&&this.value.name===t.value.name&&this.value.moduleName===t.value.moduleName}isConstant(){return!1}visitExpression(e,t){return e.visitExternalExpr(this,t)}clone(){return new e(this.value,this.type,this.typeParams,this.sourceSpan)}},bt=class e extends ft{condition;falseCase;trueCase;constructor(e,t,n=null,r,i,a){super(r||t.type,i,a),this.condition=e,this.falseCase=n,this.trueCase=t}isEquivalent(t){return t instanceof e&&this.condition.isEquivalent(t.condition)&&this.trueCase.isEquivalent(t.trueCase)&<(this.falseCase,t.falseCase)}isConstant(){return!1}visitExpression(e,t){return e.visitConditionalExpr(this,t)}clone(){return new e(this.condition.clone(),this.trueCase.clone(),this.falseCase?.clone(),this.type,this.sourceSpan)}},xt=class e extends ft{operator;rhs;lhs;constructor(e,t,n,r,i,a){super(r||t.type,i,a),this.operator=e,this.rhs=n,this.lhs=t}isEquivalent(t){return t instanceof e&&this.operator===t.operator&&this.lhs.isEquivalent(t.lhs)&&this.rhs.isEquivalent(t.rhs)}isConstant(){return!1}visitExpression(e,t){return e.visitBinaryOperatorExpr(this,t)}clone(){return new e(this.operator,this.lhs.clone(),this.rhs.clone(),this.type,this.sourceSpan)}isAssignment(){let e=this.operator;return e===y.Assign||e===y.AdditionAssignment||e===y.SubtractionAssignment||e===y.MultiplicationAssignment||e===y.DivisionAssignment||e===y.RemainderAssignment||e===y.ExponentiationAssignment||e===y.AndAssignment||e===y.OrAssignment||e===y.NullishCoalesceAssignment}},St=class e extends ft{receiver;name;isOptional;constructor(e,t,n,r,i,a=!1){super(n,r,i),this.receiver=e,this.name=t,this.isOptional=a}get index(){return this.name}isEquivalent(t){return t instanceof e&&this.receiver.isEquivalent(t.receiver)&&this.name===t.name&&this.isOptional===t.isOptional}isConstant(){return!1}visitExpression(e,t){return e.visitReadPropExpr(this,t)}set(e){return new xt(y.Assign,this.receiver.prop(this.name),e,null,this.sourceSpan)}clone(){return new e(this.receiver.clone(),this.name,this.type,this.sourceSpan,[],this.isOptional)}},Ct=class e extends ft{receiver;index;isOptional;constructor(e,t,n,r,i,a=!1){super(n,r,i),this.receiver=e,this.index=t,this.isOptional=a}isEquivalent(t){return t instanceof e&&this.receiver.isEquivalent(t.receiver)&&this.index.isEquivalent(t.index)&&this.isOptional===t.isOptional}isConstant(){return!1}visitExpression(e,t){return e.visitReadKeyExpr(this,t)}set(e){return new xt(y.Assign,this.receiver.key(this.index),e,null,this.sourceSpan)}clone(){return new e(this.receiver.clone(),this.index.clone(),this.type,this.sourceSpan,[],this.isOptional)}},wt=class e extends ft{entries;constructor(e,t,n,r){super(t,n,r),this.entries=e}isConstant(){return this.entries.every(e=>e.isConstant())}isEquivalent(t){return t instanceof e&&dt(this.entries,t.entries)}visitExpression(e,t){return e.visitLiteralArrayExpr(this,t)}clone(){return new e(this.entries.map(e=>e.clone()),this.type,this.sourceSpan)}},Tt=class e{expression;constructor(e){this.expression=e}isEquivalent(t){return t instanceof e&&this.expression.isEquivalent(t.expression)}clone(){return new e(this.expression.clone())}isConstant(){return this.expression.isConstant()}},Et=class e extends ft{entries;valueType=null;constructor(e,t,n,r){super(t,n,r),this.entries=e,t&&(this.valueType=t.valueType)}isEquivalent(t){return t instanceof e&&dt(this.entries,t.entries)}isConstant(){return this.entries.every(e=>e.isConstant())}visitExpression(e,t){return e.visitLiteralMapExpr(this,t)}clone(){let t=this.entries.map(e=>e.clone());return new e(t,this.type,this.sourceSpan)}},Dt=class e extends ft{expression;constructor(e,t,n){super(null,t,n),this.expression=e}isEquivalent(t){return t instanceof e&&this.expression.isEquivalent(t.expression)}isConstant(){return this.expression.isConstant()}visitExpression(e,t){return e.visitSpreadElementExpr(this,t)}clone(){return new e(this.expression.clone(),this.sourceSpan)}},Ot=new vt(null,ct,null),kt=(function(e){return e[e.None=0]=`None`,e[e.Final=1]=`Final`,e[e.Private=2]=`Private`,e[e.Exported=4]=`Exported`,e[e.Static=8]=`Static`,e})(kt||{}),At=class{modifiers;sourceSpan;leadingComments;constructor(e=kt.None,t=null,n){this.modifiers=e,this.sourceSpan=t,this.leadingComments=n}hasModifier(e){return(this.modifiers&e)!==0}addLeadingComment(e){this.leadingComments=this.leadingComments??[],this.leadingComments.push(e)}},jt=class e extends At{expr;constructor(e,t,n){super(kt.None,t,n),this.expr=e}isEquivalent(t){return t instanceof e&&this.expr.isEquivalent(t.expr)}visitStatement(e,t){return e.visitExpressionStmt(this,t)}};(class e{static INSTANCE=new e;keyOf(e){if(e instanceof vt&&typeof e.value==`string`)return`"${e.value}"`;if(e instanceof vt)return String(e.value);if(e instanceof _t)return`/${e.body}/${e.flags??``}`;if(e instanceof wt){let t=[];for(let n of e.entries)t.push(this.keyOf(n));return`[${t.join(`,`)}]`}if(e instanceof Et){let t=[];for(let n of e.entries)if(n instanceof Tt)t.push(`...`+this.keyOf(n.expression));else{let e=n.key;n.quoted&&(e=`"${e}"`),t.push(e+`:`+this.keyOf(n.value))}return`{${t.join(`,`)}}`}if(e instanceof yt)return`import("${e.value.moduleName}", ${e.value.name})`;if(e instanceof pt)return`read(${e.name})`;if(e instanceof mt)return`typeof(${this.keyOf(e.expr)})`;if(e instanceof Dt)return`...${this.keyOf(e.expression)}`;throw Error(`${this.constructor.name} does not handle expressions of type ${e.constructor.name}`)}});var b=`@angular/core`,x=(()=>{class e{static core={name:null,moduleName:b};static namespaceHTML={name:`ɵɵnamespaceHTML`,moduleName:b};static namespaceMathML={name:`ɵɵnamespaceMathML`,moduleName:b};static namespaceSVG={name:`ɵɵnamespaceSVG`,moduleName:b};static element={name:`ɵɵelement`,moduleName:b};static elementStart={name:`ɵɵelementStart`,moduleName:b};static elementEnd={name:`ɵɵelementEnd`,moduleName:b};static foreignComponent={name:`ɵɵforeignComponent`,moduleName:b};static foreignContent={name:`ɵɵforeignContent`,moduleName:b};static foreignContentFn={name:`ɵɵforeignContentFn`,moduleName:b};static domElement={name:`ɵɵdomElement`,moduleName:b};static domElementStart={name:`ɵɵdomElementStart`,moduleName:b};static domElementEnd={name:`ɵɵdomElementEnd`,moduleName:b};static domElementContainer={name:`ɵɵdomElementContainer`,moduleName:b};static domElementContainerStart={name:`ɵɵdomElementContainerStart`,moduleName:b};static domElementContainerEnd={name:`ɵɵdomElementContainerEnd`,moduleName:b};static domTemplate={name:`ɵɵdomTemplate`,moduleName:b};static domListener={name:`ɵɵdomListener`,moduleName:b};static advance={name:`ɵɵadvance`,moduleName:b};static syntheticHostProperty={name:`ɵɵsyntheticHostProperty`,moduleName:b};static syntheticHostListener={name:`ɵɵsyntheticHostListener`,moduleName:b};static attribute={name:`ɵɵattribute`,moduleName:b};static classProp={name:`ɵɵclassProp`,moduleName:b};static elementContainerStart={name:`ɵɵelementContainerStart`,moduleName:b};static elementContainerEnd={name:`ɵɵelementContainerEnd`,moduleName:b};static elementContainer={name:`ɵɵelementContainer`,moduleName:b};static styleMap={name:`ɵɵstyleMap`,moduleName:b};static classMap={name:`ɵɵclassMap`,moduleName:b};static styleProp={name:`ɵɵstyleProp`,moduleName:b};static interpolate={name:`ɵɵinterpolate`,moduleName:b};static interpolate1={name:`ɵɵinterpolate1`,moduleName:b};static interpolate2={name:`ɵɵinterpolate2`,moduleName:b};static interpolate3={name:`ɵɵinterpolate3`,moduleName:b};static interpolate4={name:`ɵɵinterpolate4`,moduleName:b};static interpolate5={name:`ɵɵinterpolate5`,moduleName:b};static interpolate6={name:`ɵɵinterpolate6`,moduleName:b};static interpolate7={name:`ɵɵinterpolate7`,moduleName:b};static interpolate8={name:`ɵɵinterpolate8`,moduleName:b};static interpolateV={name:`ɵɵinterpolateV`,moduleName:b};static nextContext={name:`ɵɵnextContext`,moduleName:b};static resetView={name:`ɵɵresetView`,moduleName:b};static templateCreate={name:`ɵɵtemplate`,moduleName:b};static defer={name:`ɵɵdefer`,moduleName:b};static deferWhen={name:`ɵɵdeferWhen`,moduleName:b};static deferOnIdle={name:`ɵɵdeferOnIdle`,moduleName:b};static deferOnImmediate={name:`ɵɵdeferOnImmediate`,moduleName:b};static deferOnTimer={name:`ɵɵdeferOnTimer`,moduleName:b};static deferOnHover={name:`ɵɵdeferOnHover`,moduleName:b};static deferOnInteraction={name:`ɵɵdeferOnInteraction`,moduleName:b};static deferOnViewport={name:`ɵɵdeferOnViewport`,moduleName:b};static deferPrefetchWhen={name:`ɵɵdeferPrefetchWhen`,moduleName:b};static deferPrefetchOnIdle={name:`ɵɵdeferPrefetchOnIdle`,moduleName:b};static deferPrefetchOnImmediate={name:`ɵɵdeferPrefetchOnImmediate`,moduleName:b};static deferPrefetchOnTimer={name:`ɵɵdeferPrefetchOnTimer`,moduleName:b};static deferPrefetchOnHover={name:`ɵɵdeferPrefetchOnHover`,moduleName:b};static deferPrefetchOnInteraction={name:`ɵɵdeferPrefetchOnInteraction`,moduleName:b};static deferPrefetchOnViewport={name:`ɵɵdeferPrefetchOnViewport`,moduleName:b};static deferHydrateWhen={name:`ɵɵdeferHydrateWhen`,moduleName:b};static deferHydrateNever={name:`ɵɵdeferHydrateNever`,moduleName:b};static deferHydrateOnIdle={name:`ɵɵdeferHydrateOnIdle`,moduleName:b};static deferHydrateOnImmediate={name:`ɵɵdeferHydrateOnImmediate`,moduleName:b};static deferHydrateOnTimer={name:`ɵɵdeferHydrateOnTimer`,moduleName:b};static deferHydrateOnHover={name:`ɵɵdeferHydrateOnHover`,moduleName:b};static deferHydrateOnInteraction={name:`ɵɵdeferHydrateOnInteraction`,moduleName:b};static deferHydrateOnViewport={name:`ɵɵdeferHydrateOnViewport`,moduleName:b};static deferEnableTimerScheduling={name:`ɵɵdeferEnableTimerScheduling`,moduleName:b};static enableIncrementalHydrationRuntime={name:`ɵɵenableIncrementalHydrationRuntime`,moduleName:b};static conditionalCreate={name:`ɵɵconditionalCreate`,moduleName:b};static conditionalBranchCreate={name:`ɵɵconditionalBranchCreate`,moduleName:b};static conditional={name:`ɵɵconditional`,moduleName:b};static repeater={name:`ɵɵrepeater`,moduleName:b};static repeaterCreate={name:`ɵɵrepeaterCreate`,moduleName:b};static repeaterTrackByIndex={name:`ɵɵrepeaterTrackByIndex`,moduleName:b};static repeaterTrackByIdentity={name:`ɵɵrepeaterTrackByIdentity`,moduleName:b};static componentInstance={name:`ɵɵcomponentInstance`,moduleName:b};static text={name:`ɵɵtext`,moduleName:b};static enableBindings={name:`ɵɵenableBindings`,moduleName:b};static disableBindings={name:`ɵɵdisableBindings`,moduleName:b};static getCurrentView={name:`ɵɵgetCurrentView`,moduleName:b};static textInterpolate={name:`ɵɵtextInterpolate`,moduleName:b};static textInterpolate1={name:`ɵɵtextInterpolate1`,moduleName:b};static textInterpolate2={name:`ɵɵtextInterpolate2`,moduleName:b};static textInterpolate3={name:`ɵɵtextInterpolate3`,moduleName:b};static textInterpolate4={name:`ɵɵtextInterpolate4`,moduleName:b};static textInterpolate5={name:`ɵɵtextInterpolate5`,moduleName:b};static textInterpolate6={name:`ɵɵtextInterpolate6`,moduleName:b};static textInterpolate7={name:`ɵɵtextInterpolate7`,moduleName:b};static textInterpolate8={name:`ɵɵtextInterpolate8`,moduleName:b};static textInterpolateV={name:`ɵɵtextInterpolateV`,moduleName:b};static restoreView={name:`ɵɵrestoreView`,moduleName:b};static pureFunction0={name:`ɵɵpureFunction0`,moduleName:b};static pureFunction1={name:`ɵɵpureFunction1`,moduleName:b};static pureFunction2={name:`ɵɵpureFunction2`,moduleName:b};static pureFunction3={name:`ɵɵpureFunction3`,moduleName:b};static pureFunction4={name:`ɵɵpureFunction4`,moduleName:b};static pureFunction5={name:`ɵɵpureFunction5`,moduleName:b};static pureFunction6={name:`ɵɵpureFunction6`,moduleName:b};static pureFunction7={name:`ɵɵpureFunction7`,moduleName:b};static pureFunction8={name:`ɵɵpureFunction8`,moduleName:b};static pureFunctionV={name:`ɵɵpureFunctionV`,moduleName:b};static pipeBind1={name:`ɵɵpipeBind1`,moduleName:b};static pipeBind2={name:`ɵɵpipeBind2`,moduleName:b};static pipeBind3={name:`ɵɵpipeBind3`,moduleName:b};static pipeBind4={name:`ɵɵpipeBind4`,moduleName:b};static pipeBindV={name:`ɵɵpipeBindV`,moduleName:b};static domProperty={name:`ɵɵdomProperty`,moduleName:b};static ariaProperty={name:`ɵɵariaProperty`,moduleName:b};static property={name:`ɵɵproperty`,moduleName:b};static control={name:`ɵɵcontrol`,moduleName:b};static controlCreate={name:`ɵɵcontrolCreate`,moduleName:b};static animationEnterListener={name:`ɵɵanimateEnterListener`,moduleName:b};static animationLeaveListener={name:`ɵɵanimateLeaveListener`,moduleName:b};static animationEnter={name:`ɵɵanimateEnter`,moduleName:b};static animationLeave={name:`ɵɵanimateLeave`,moduleName:b};static i18n={name:`ɵɵi18n`,moduleName:b};static i18nAttributes={name:`ɵɵi18nAttributes`,moduleName:b};static i18nExp={name:`ɵɵi18nExp`,moduleName:b};static i18nStart={name:`ɵɵi18nStart`,moduleName:b};static i18nEnd={name:`ɵɵi18nEnd`,moduleName:b};static i18nApply={name:`ɵɵi18nApply`,moduleName:b};static i18nPostprocess={name:`ɵɵi18nPostprocess`,moduleName:b};static pipe={name:`ɵɵpipe`,moduleName:b};static projection={name:`ɵɵprojection`,moduleName:b};static projectionDef={name:`ɵɵprojectionDef`,moduleName:b};static reference={name:`ɵɵreference`,moduleName:b};static inject={name:`ɵɵinject`,moduleName:b};static injectAttribute={name:`ɵɵinjectAttribute`,moduleName:b};static directiveInject={name:`ɵɵdirectiveInject`,moduleName:b};static invalidFactory={name:`ɵɵinvalidFactory`,moduleName:b};static invalidFactoryDep={name:`ɵɵinvalidFactoryDep`,moduleName:b};static templateRefExtractor={name:`ɵɵtemplateRefExtractor`,moduleName:b};static forwardRef={name:`forwardRef`,moduleName:b};static resolveForwardRef={name:`resolveForwardRef`,moduleName:b};static replaceMetadata={name:`ɵɵreplaceMetadata`,moduleName:b};static getReplaceMetadataURL={name:`ɵɵgetReplaceMetadataURL`,moduleName:b};static ɵɵdefineInjectable={name:`ɵɵdefineInjectable`,moduleName:b};static declareInjectable={name:`ɵɵngDeclareInjectable`,moduleName:b};static InjectableDeclaration={name:`ɵɵInjectableDeclaration`,moduleName:b};static defineService={name:`ɵɵdefineService`,moduleName:b};static declareService={name:`ɵɵngDeclareService`,moduleName:b};static resolveWindow={name:`ɵɵresolveWindow`,moduleName:b};static resolveDocument={name:`ɵɵresolveDocument`,moduleName:b};static resolveBody={name:`ɵɵresolveBody`,moduleName:b};static getComponentDepsFactory={name:`ɵɵgetComponentDepsFactory`,moduleName:b};static defineComponent={name:`ɵɵdefineComponent`,moduleName:b};static declareComponent={name:`ɵɵngDeclareComponent`,moduleName:b};static setComponentScope={name:`ɵɵsetComponentScope`,moduleName:b};static ChangeDetectionStrategy={name:`ChangeDetectionStrategy`,moduleName:b};static ViewEncapsulation={name:`ViewEncapsulation`,moduleName:b};static ComponentDeclaration={name:`ɵɵComponentDeclaration`,moduleName:b};static FactoryDeclaration={name:`ɵɵFactoryDeclaration`,moduleName:b};static declareFactory={name:`ɵɵngDeclareFactory`,moduleName:b};static FactoryTarget={name:`ɵɵFactoryTarget`,moduleName:b};static defineDirective={name:`ɵɵdefineDirective`,moduleName:b};static declareDirective={name:`ɵɵngDeclareDirective`,moduleName:b};static DirectiveDeclaration={name:`ɵɵDirectiveDeclaration`,moduleName:b};static InjectorDef={name:`ɵɵInjectorDef`,moduleName:b};static InjectorDeclaration={name:`ɵɵInjectorDeclaration`,moduleName:b};static defineInjector={name:`ɵɵdefineInjector`,moduleName:b};static declareInjector={name:`ɵɵngDeclareInjector`,moduleName:b};static NgModuleDeclaration={name:`ɵɵNgModuleDeclaration`,moduleName:b};static ModuleWithProviders={name:`ModuleWithProviders`,moduleName:b};static defineNgModule={name:`ɵɵdefineNgModule`,moduleName:b};static declareNgModule={name:`ɵɵngDeclareNgModule`,moduleName:b};static setNgModuleScope={name:`ɵɵsetNgModuleScope`,moduleName:b};static registerNgModuleType={name:`ɵɵregisterNgModuleType`,moduleName:b};static PipeDeclaration={name:`ɵɵPipeDeclaration`,moduleName:b};static definePipe={name:`ɵɵdefinePipe`,moduleName:b};static declarePipe={name:`ɵɵngDeclarePipe`,moduleName:b};static declareClassMetadata={name:`ɵɵngDeclareClassMetadata`,moduleName:b};static declareClassMetadataAsync={name:`ɵɵngDeclareClassMetadataAsync`,moduleName:b};static setClassMetadata={name:`ɵsetClassMetadata`,moduleName:b};static setClassMetadataAsync={name:`ɵsetClassMetadataAsync`,moduleName:b};static setClassDebugInfo={name:`ɵsetClassDebugInfo`,moduleName:b};static queryRefresh={name:`ɵɵqueryRefresh`,moduleName:b};static viewQuery={name:`ɵɵviewQuery`,moduleName:b};static loadQuery={name:`ɵɵloadQuery`,moduleName:b};static contentQuery={name:`ɵɵcontentQuery`,moduleName:b};static viewQuerySignal={name:`ɵɵviewQuerySignal`,moduleName:b};static contentQuerySignal={name:`ɵɵcontentQuerySignal`,moduleName:b};static queryAdvance={name:`ɵɵqueryAdvance`,moduleName:b};static twoWayProperty={name:`ɵɵtwoWayProperty`,moduleName:b};static twoWayBindingSet={name:`ɵɵtwoWayBindingSet`,moduleName:b};static twoWayListener={name:`ɵɵtwoWayListener`,moduleName:b};static declareLet={name:`ɵɵdeclareLet`,moduleName:b};static storeLet={name:`ɵɵstoreLet`,moduleName:b};static readContextLet={name:`ɵɵreadContextLet`,moduleName:b};static arrowFunction={name:`ɵɵarrowFunction`,moduleName:b};static attachSourceLocations={name:`ɵɵattachSourceLocations`,moduleName:b};static NgOnChangesFeature={name:`ɵɵNgOnChangesFeature`,moduleName:b};static ControlFeature={name:`ɵɵControlFeature`,moduleName:b};static InheritDefinitionFeature={name:`ɵɵInheritDefinitionFeature`,moduleName:b};static ProvidersFeature={name:`ɵɵProvidersFeature`,moduleName:b};static HostDirectivesFeature={name:`ɵɵHostDirectivesFeature`,moduleName:b};static ExternalStylesFeature={name:`ɵɵExternalStylesFeature`,moduleName:b};static listener={name:`ɵɵlistener`,moduleName:b};static getInheritedFactory={name:`ɵɵgetInheritedFactory`,moduleName:b};static sanitizeHtml={name:`ɵɵsanitizeHtml`,moduleName:b};static sanitizeStyle={name:`ɵɵsanitizeStyle`,moduleName:b};static validateAttribute={name:`ɵɵvalidateAttribute`,moduleName:b};static sanitizeResourceUrl={name:`ɵɵsanitizeResourceUrl`,moduleName:b};static sanitizeScript={name:`ɵɵsanitizeScript`,moduleName:b};static sanitizeUrl={name:`ɵɵsanitizeUrl`,moduleName:b};static sanitizeUrlOrResourceUrl={name:`ɵɵsanitizeUrlOrResourceUrl`,moduleName:b};static trustConstantHtml={name:`ɵɵtrustConstantHtml`,moduleName:b};static trustConstantResourceUrl={name:`ɵɵtrustConstantResourceUrl`,moduleName:b};static inputDecorator={name:`Input`,moduleName:b};static outputDecorator={name:`Output`,moduleName:b};static viewChildDecorator={name:`ViewChild`,moduleName:b};static viewChildrenDecorator={name:`ViewChildren`,moduleName:b};static contentChildDecorator={name:`ContentChild`,moduleName:b};static contentChildrenDecorator={name:`ContentChildren`,moduleName:b};static InputSignalBrandWriteType={name:`ɵINPUT_SIGNAL_BRAND_WRITE_TYPE`,moduleName:b};static UnwrapDirectiveSignalInputs={name:`ɵUnwrapDirectiveSignalInputs`,moduleName:b};static unwrapWritableSignal={name:`ɵunwrapWritableSignal`,moduleName:b};static assertType={name:`ɵassertType`,moduleName:b}}return e})();y.And,y.Bigger,y.BiggerEquals,y.BitwiseOr,y.BitwiseAnd,y.Divide,y.Assign,y.Equals,y.Identical,y.Lower,y.LowerEquals,y.Minus,y.Modulo,y.Exponentiation,y.Multiply,y.NotEquals,y.NotIdentical,y.NullishCoalesce,y.Or,y.Plus,y.In,y.InstanceOf,y.AdditionAssignment,y.SubtractionAssignment,y.MultiplicationAssignment,y.DivisionAssignment,y.RemainderAssignment,y.ExponentiationAssignment,y.AndAssignment,y.OrAssignment,y.NullishCoalesceAssignment;var Mt=class{span;sourceSpan;constructor(e,t){this.span=e,this.sourceSpan=t}toString(){return`AST`}},Nt=class extends Mt{receiver;args;argumentSpan;constructor(e,t,n,r,i){super(e,t),this.receiver=n,this.args=r,this.argumentSpan=i}visit(e,t=null){return e.visitCall(this,t)}},Pt=(function(e){return e[e.Property=0]=`Property`,e[e.Attribute=1]=`Attribute`,e[e.Class=2]=`Class`,e[e.Style=3]=`Style`,e[e.LegacyAnimation=4]=`LegacyAnimation`,e[e.TwoWay=5]=`TwoWay`,e[e.Animation=6]=`Animation`,e})(Pt||{}),Ft=`(:(where|is)\\()?`,It=`-shadowcsshost`,Lt=`-shadowcsscontext`,Rt=`[^)(]*`,zt=String.raw`(?:\(${Rt}\)|${Rt})+?`,Bt=String.raw`(?:\(${zt}\)|${Rt})+?`,Vt=String.raw`(?:\((${Bt})\))`;String.raw`(:nth-[-\w]+)`+Vt,It+Vt+``,`${Ft}`,Lt+Vt+``;var S=(function(e){return e[e.ListEnd=0]=`ListEnd`,e[e.Statement=1]=`Statement`,e[e.Variable=2]=`Variable`,e[e.ElementStart=3]=`ElementStart`,e[e.Element=4]=`Element`,e[e.ForeignComponent=5]=`ForeignComponent`,e[e.Template=6]=`Template`,e[e.ElementEnd=7]=`ElementEnd`,e[e.ContainerStart=8]=`ContainerStart`,e[e.Container=9]=`Container`,e[e.ContainerEnd=10]=`ContainerEnd`,e[e.DisableBindings=11]=`DisableBindings`,e[e.ConditionalCreate=12]=`ConditionalCreate`,e[e.ConditionalBranchCreate=13]=`ConditionalBranchCreate`,e[e.Conditional=14]=`Conditional`,e[e.EnableBindings=15]=`EnableBindings`,e[e.Text=16]=`Text`,e[e.Listener=17]=`Listener`,e[e.InterpolateText=18]=`InterpolateText`,e[e.Binding=19]=`Binding`,e[e.Property=20]=`Property`,e[e.StyleProp=21]=`StyleProp`,e[e.ClassProp=22]=`ClassProp`,e[e.StyleMap=23]=`StyleMap`,e[e.ClassMap=24]=`ClassMap`,e[e.Advance=25]=`Advance`,e[e.Pipe=26]=`Pipe`,e[e.Attribute=27]=`Attribute`,e[e.ExtractedAttribute=28]=`ExtractedAttribute`,e[e.Defer=29]=`Defer`,e[e.DeferOn=30]=`DeferOn`,e[e.DeferWhen=31]=`DeferWhen`,e[e.I18nMessage=32]=`I18nMessage`,e[e.DomProperty=33]=`DomProperty`,e[e.Namespace=34]=`Namespace`,e[e.ProjectionDef=35]=`ProjectionDef`,e[e.EnableIncrementalHydrationRuntime=36]=`EnableIncrementalHydrationRuntime`,e[e.Projection=37]=`Projection`,e[e.Content=38]=`Content`,e[e.RepeaterCreate=39]=`RepeaterCreate`,e[e.Repeater=40]=`Repeater`,e[e.TwoWayProperty=41]=`TwoWayProperty`,e[e.TwoWayListener=42]=`TwoWayListener`,e[e.DeclareLet=43]=`DeclareLet`,e[e.StoreLet=44]=`StoreLet`,e[e.I18nStart=45]=`I18nStart`,e[e.I18n=46]=`I18n`,e[e.I18nEnd=47]=`I18nEnd`,e[e.I18nExpression=48]=`I18nExpression`,e[e.I18nApply=49]=`I18nApply`,e[e.IcuStart=50]=`IcuStart`,e[e.IcuEnd=51]=`IcuEnd`,e[e.IcuPlaceholder=52]=`IcuPlaceholder`,e[e.I18nContext=53]=`I18nContext`,e[e.I18nAttributes=54]=`I18nAttributes`,e[e.SourceLocation=55]=`SourceLocation`,e[e.Animation=56]=`Animation`,e[e.AnimationString=57]=`AnimationString`,e[e.AnimationBinding=58]=`AnimationBinding`,e[e.AnimationListener=59]=`AnimationListener`,e[e.Control=60]=`Control`,e[e.ControlCreate=61]=`ControlCreate`,e})(S||{}),Ht=(function(e){return e[e.LexicalRead=0]=`LexicalRead`,e[e.Context=1]=`Context`,e[e.TrackContext=2]=`TrackContext`,e[e.ReadVariable=3]=`ReadVariable`,e[e.NextContext=4]=`NextContext`,e[e.Reference=5]=`Reference`,e[e.StoreLet=6]=`StoreLet`,e[e.ContextLetReference=7]=`ContextLetReference`,e[e.GetCurrentView=8]=`GetCurrentView`,e[e.RestoreView=9]=`RestoreView`,e[e.ResetView=10]=`ResetView`,e[e.PureFunctionExpr=11]=`PureFunctionExpr`,e[e.PureFunctionParameterExpr=12]=`PureFunctionParameterExpr`,e[e.PipeBinding=13]=`PipeBinding`,e[e.PipeBindingVariadic=14]=`PipeBindingVariadic`,e[e.SafePropertyRead=15]=`SafePropertyRead`,e[e.SafeKeyedRead=16]=`SafeKeyedRead`,e[e.SafeNavigationMigration=17]=`SafeNavigationMigration`,e[e.SafeTernaryExpr=18]=`SafeTernaryExpr`,e[e.EmptyExpr=19]=`EmptyExpr`,e[e.AssignTemporaryExpr=20]=`AssignTemporaryExpr`,e[e.ReadTemporaryExpr=21]=`ReadTemporaryExpr`,e[e.SlotLiteralExpr=22]=`SlotLiteralExpr`,e[e.ConditionalCase=23]=`ConditionalCase`,e[e.ConstCollected=24]=`ConstCollected`,e[e.TwoWayBindingSet=25]=`TwoWayBindingSet`,e[e.ForeignContent=26]=`ForeignContent`,e[e.ArrowFunction=27]=`ArrowFunction`,e})(Ht||{}),Ut=(function(e){return e[e.None=0]=`None`,e[e.AlwaysInline=1]=`AlwaysInline`,e})(Ut||{}),Wt=(function(e){return e[e.Context=0]=`Context`,e[e.Identifier=1]=`Identifier`,e[e.SavedView=2]=`SavedView`,e[e.Alias=3]=`Alias`,e})(Wt||{}),Gt=(function(e){return e[e.Attribute=0]=`Attribute`,e[e.ClassName=1]=`ClassName`,e[e.StyleProperty=2]=`StyleProperty`,e[e.Property=3]=`Property`,e[e.Template=4]=`Template`,e[e.I18n=5]=`I18n`,e[e.LegacyAnimation=6]=`LegacyAnimation`,e[e.TwoWayProperty=7]=`TwoWayProperty`,e[e.Animation=8]=`Animation`,e})(Gt||{}),Kt=(function(e){return e[e.Creation=0]=`Creation`,e[e.Postproccessing=1]=`Postproccessing`,e})(Kt||{}),qt=(function(e){return e[e.I18nText=0]=`I18nText`,e[e.I18nAttribute=1]=`I18nAttribute`,e})(qt||{}),Jt=(function(e){return e[e.None=0]=`None`,e[e.ElementTag=1]=`ElementTag`,e[e.TemplateTag=2]=`TemplateTag`,e[e.OpenTag=4]=`OpenTag`,e[e.CloseTag=8]=`CloseTag`,e[e.ExpressionIndex=16]=`ExpressionIndex`,e})(Jt||{}),Yt=(function(e){return e[e.HTML=0]=`HTML`,e[e.SVG=1]=`SVG`,e[e.Math=2]=`Math`,e})(Yt||{}),Xt=(function(e){return e[e.Idle=0]=`Idle`,e[e.Immediate=1]=`Immediate`,e[e.Timer=2]=`Timer`,e[e.Hover=3]=`Hover`,e[e.Interaction=4]=`Interaction`,e[e.Viewport=5]=`Viewport`,e[e.Never=6]=`Never`,e})(Xt||{}),Zt=(function(e){return e[e.RootI18n=0]=`RootI18n`,e[e.Icu=1]=`Icu`,e[e.Attr=2]=`Attr`,e})(Zt||{}),Qt=(function(e){return e[e.NgTemplate=0]=`NgTemplate`,e[e.Structural=1]=`Structural`,e[e.Block=2]=`Block`,e})(Qt||{}),$t=(function(e){return e[e.None=0]=`None`,e[e.InChildOperation=1]=`InChildOperation`,e[e.InArrowFunctionOperation=2]=`InArrowFunctionOperation`,e[e.InSafeNavigationMigration=4]=`InSafeNavigationMigration`,e})($t||{});S.Element,S.ElementStart,S.Container,S.ContainerStart,S.Template,S.RepeaterCreate,S.ConditionalCreate,S.ConditionalBranchCreate;var C=(function(e){return e[e.Tmpl=0]=`Tmpl`,e[e.Host=1]=`Host`,e[e.Both=2]=`Both`,e})(C||{}),en=(function(e){return e[e.Full=0]=`Full`,e[e.DomOnly=1]=`DomOnly`,e})(en||{});x.ariaProperty,x.ariaProperty,x.attribute,x.attribute,x.classProp,x.classProp,x.element,x.element,x.elementContainer,x.elementContainer,x.elementContainerEnd,x.elementContainerEnd,x.elementContainerStart,x.elementContainerStart,x.elementEnd,x.elementEnd,x.elementStart,x.elementStart,x.domProperty,x.domProperty,x.i18nExp,x.i18nExp,x.listener,x.listener,x.listener,x.listener,x.property,x.property,x.styleProp,x.styleProp,x.syntheticHostListener,x.syntheticHostListener,x.syntheticHostProperty,x.syntheticHostProperty,x.templateCreate,x.templateCreate,x.twoWayProperty,x.twoWayProperty,x.twoWayListener,x.twoWayListener,x.declareLet,x.declareLet,x.conditionalCreate,x.conditionalBranchCreate,x.conditionalBranchCreate,x.conditionalBranchCreate,x.domElement,x.domElement,x.domElementStart,x.domElementStart,x.domElementEnd,x.domElementEnd,x.domElementContainer,x.domElementContainer,x.domElementContainerStart,x.domElementContainerStart,x.domElementContainerEnd,x.domElementContainerEnd,x.domListener,x.domListener,x.domTemplate,x.domTemplate,x.animationEnter,x.animationEnter,x.animationLeave,x.animationLeave,x.animationEnterListener,x.animationEnterListener,x.animationLeaveListener,x.animationLeaveListener,y.And,y.Bigger,y.BiggerEquals,y.BitwiseOr,y.BitwiseAnd,y.Divide,y.Assign,y.Equals,y.Identical,y.Lower,y.LowerEquals,y.Minus,y.Modulo,y.Exponentiation,y.Multiply,y.NotEquals,y.NotIdentical,y.NullishCoalesce,y.Or,y.Plus,y.In,y.InstanceOf,y.AdditionAssignment,y.SubtractionAssignment,y.MultiplicationAssignment,y.DivisionAssignment,y.RemainderAssignment,y.ExponentiationAssignment,y.AndAssignment,y.OrAssignment,y.NullishCoalesceAssignment,S.Property,S.Property,S.Property,S.Attribute,S.Attribute,S.Property,S.TwoWayProperty,S.Container,S.ContainerStart,S.ContainerEnd,S.Element,S.ElementStart,S.ElementEnd,S.Template,S.ElementEnd,S.ElementStart,S.Element,S.ContainerEnd,S.ContainerStart,S.Container,S.I18nEnd,S.I18nStart,S.I18n,S.Pipe;var tn=` \f -\r \v ᠎ - \u2028\u2029  　`;`${tn}`,`${tn}`;var nn=(function(e){return e[e.Character=0]=`Character`,e[e.Identifier=1]=`Identifier`,e[e.PrivateIdentifier=2]=`PrivateIdentifier`,e[e.Keyword=3]=`Keyword`,e[e.String=4]=`String`,e[e.Operator=5]=`Operator`,e[e.Number=6]=`Number`,e[e.RegExpBody=7]=`RegExpBody`,e[e.RegExpFlags=8]=`RegExpFlags`,e[e.Error=9]=`Error`,e})(nn||{}),rn=(function(e){return e[e.Plain=0]=`Plain`,e[e.TemplateLiteralPart=1]=`TemplateLiteralPart`,e[e.TemplateLiteralEnd=2]=`TemplateLiteralEnd`,e})(rn||{});nn.Character,S.StyleMap,S.ClassMap,S.StyleProp,S.ClassProp,S.Attribute,S.Property,S.Attribute,S.Control,S.DomProperty,S.DomProperty,S.Attribute,S.StyleMap,S.ClassMap,S.StyleProp,S.ClassProp,S.Listener,S.TwoWayListener,S.AnimationListener,S.StyleMap,S.ClassMap,S.StyleProp,S.ClassProp,S.Property,S.TwoWayProperty,S.DomProperty,S.Attribute,S.Animation,S.Control,Xt.Idle,x.deferOnIdle,x.deferPrefetchOnIdle,x.deferHydrateOnIdle,Xt.Immediate,x.deferOnImmediate,x.deferPrefetchOnImmediate,x.deferHydrateOnImmediate,Xt.Timer,x.deferOnTimer,x.deferPrefetchOnTimer,x.deferHydrateOnTimer,Xt.Hover,x.deferOnHover,x.deferPrefetchOnHover,x.deferHydrateOnHover,Xt.Interaction,x.deferOnInteraction,x.deferPrefetchOnInteraction,x.deferHydrateOnInteraction,Xt.Viewport,x.deferOnViewport,x.deferPrefetchOnViewport,x.deferHydrateOnViewport,Xt.Never,x.deferHydrateNever,x.deferHydrateNever,x.deferHydrateNever,x.pipeBind1,x.pipeBind2,x.pipeBind3,x.pipeBind4,x.textInterpolate,x.textInterpolate1,x.textInterpolate2,x.textInterpolate3,x.textInterpolate4,x.textInterpolate5,x.textInterpolate6,x.textInterpolate7,x.textInterpolate8,x.textInterpolateV,x.interpolate,x.interpolate1,x.interpolate2,x.interpolate3,x.interpolate4,x.interpolate5,x.interpolate6,x.interpolate7,x.interpolate8,x.interpolateV,x.pureFunction0,x.pureFunction1,x.pureFunction2,x.pureFunction3,x.pureFunction4,x.pureFunction5,x.pureFunction6,x.pureFunction7,x.pureFunction8,x.pureFunctionV,x.resolveWindow,x.resolveDocument,x.resolveBody,rt.HTML,x.sanitizeHtml,rt.RESOURCE_URL,x.sanitizeResourceUrl,rt.SCRIPT,x.sanitizeScript,rt.STYLE,x.sanitizeStyle,rt.URL,x.sanitizeUrl,rt.ATTRIBUTE_NO_BINDING,x.validateAttribute,rt.HTML,x.trustConstantHtml,rt.RESOURCE_URL,x.trustConstantResourceUrl;var an=(function(e){return e[e.None=0]=`None`,e[e.ViewContextRead=1]=`ViewContextRead`,e[e.ViewContextWrite=2]=`ViewContextWrite`,e[e.SideEffectful=4]=`SideEffectful`,e})(an||{});C.Tmpl,C.Tmpl,C.Both,C.Host,C.Tmpl,C.Tmpl,C.Tmpl,C.Both,C.Both,C.Both,C.Tmpl,C.Both,C.Both,C.Tmpl,C.Both,C.Tmpl,C.Both,C.Both,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Both,C.Both,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Both,C.Both,C.Both,C.Tmpl,C.Tmpl,C.Both,C.Tmpl,C.Tmpl,C.Tmpl,C.Both,C.Both,C.Tmpl,C.Both,C.Both,C.Both,C.Both,C.Both,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Both,C.Tmpl,C.Both,C.Tmpl,C.Both,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Tmpl,C.Both,C.Both,C.Both,Pt.Property,Gt.Property,Pt.TwoWay,Gt.TwoWayProperty,Pt.Attribute,Gt.Attribute,Pt.Class,Gt.ClassName,Pt.Style,Gt.StyleProperty,Pt.LegacyAnimation,Gt.LegacyAnimation,Pt.Animation,Gt.Animation;var on=`%COMP%`;`${on}`,`${on}`,class e{static SINGLETON=new e;static veWillInferAnyFor(t){let n=e.SINGLETON;return t instanceof Nt?t.visit(n):t.receiver.visit(n)}visitUnary(e){return e.expr.visit(this)}visitBinary(e){return e.left.visit(this)||e.right.visit(this)}visitChain(){return!1}visitConditional(e){return e.condition.visit(this)||e.trueExp.visit(this)||e.falseExp.visit(this)}visitCall(){return!0}visitSafeCall(){return!1}visitImplicitReceiver(){return!1}visitThisReceiver(){return!1}visitInterpolation(e){return e.expressions.some(e=>e.visit(this))}visitKeyedRead(){return!1}visitLiteralArray(){return!0}visitLiteralMap(){return!0}visitLiteralPrimitive(){return!1}visitPipe(){return!0}visitPrefixNot(e){return e.expression.visit(this)}visitTypeofExpression(e){return e.expression.visit(this)}visitVoidExpression(e){return e.expression.visit(this)}visitNonNullAssert(e){return e.expression.visit(this)}visitPropertyRead(){return!1}visitSafePropertyRead(){return!1}visitSafeKeyedRead(){return!1}visitTemplateLiteral(){return!1}visitTemplateLiteralElement(){return!1}visitTaggedTemplateLiteral(){return!1}visitParenthesizedExpression(e){return e.expression.visit(this)}visitRegularExpressionLiteral(){return!1}visitSpreadElement(e){return e.expression.visit(this)}visitArrowFunction(e,t){return!1}};var sn=null,cn=!1,ln=1,un=null,dn=Symbol(`SIGNAL`);function w(e){let t=sn;return sn=e,t}function fn(){return sn}var pn={version:0,lastCleanEpoch:0,dirty:!1,producers:void 0,producersTail:void 0,consumers:void 0,consumersTail:void 0,recomputing:!1,consumerAllowSignalWrites:!1,consumerIsAlwaysLive:!1,kind:`unknown`,producerMustRecompute:()=>!1,producerRecomputeValue:()=>{},consumerMarkedDirty:()=>{},consumerOnSignalRead:()=>{}};function mn(e){if(cn)throw Error(``);if(sn===null)return;sn.consumerOnSignalRead(e);let t=sn.producersTail;if(t!==void 0&&t.producer===e)return;let n,r=sn.recomputing;if(r&&(n=t===void 0?sn.producers:t.nextProducer,n!==void 0&&n.producer===e)){sn.producersTail=n,n.lastReadVersion=e.version,n.knownValidAtEpoch=ln;return}let i=e.consumersTail;if(i!==void 0&&i.consumer===sn&&(!r||i.knownValidAtEpoch===ln))return;let a=kn(sn),o={producer:e,consumer:sn,nextProducer:n,prevConsumer:void 0,knownValidAtEpoch:ln,lastReadVersion:e.version,nextConsumer:void 0};sn.producersTail=o,t===void 0?sn.producers=o:t.nextProducer=o,a&&Dn(e,o)}function hn(){ln++}function gn(e){if((!kn(e)||e.dirty)&&(e.dirty||e.lastCleanEpoch!==ln)){if(!e.producerMustRecompute(e)&&!Tn(e)){bn(e);return}e.producerRecomputeValue(e),bn(e)}}function _n(e){if(e.consumers===void 0)return;let t=cn;cn=!0;try{for(let t=e.consumers;t!==void 0;t=t.nextConsumer){let e=t.consumer;e.dirty||yn(e)}}finally{cn=t}}function vn(){return sn?.consumerAllowSignalWrites!==!1}function yn(e){e.dirty=!0,_n(e),e.consumerMarkedDirty?.(e)}function bn(e){e.dirty=!1,e.lastCleanEpoch=ln}function xn(e){return e&&Sn(e),w(e)}function Sn(e){if(e.producersTail?.knownValidAtEpoch===ln){let t=e.producers;for(;t!==void 0;)t.knownValidAtEpoch=null,t=t.nextProducer}e.producersTail=void 0,e.recomputing=!0}function Cn(e,t){w(t),e&&wn(e)}function wn(e){e.recomputing=!1;let t=e.producersTail,n=t===void 0?e.producers:t.nextProducer;if(n!==void 0){if(kn(e))do n=On(n);while(n!==void 0);t===void 0?e.producers=void 0:t.nextProducer=void 0}}function Tn(e){for(let t=e.producers;t!==void 0;t=t.nextProducer){let e=t.producer,n=t.lastReadVersion;if(n!==e.version||(gn(e),n!==e.version))return!0}return!1}function En(e){if(kn(e)){let t=e.producers;for(;t!==void 0;)t=On(t)}e.producers=void 0,e.producersTail=void 0,e.consumers=void 0,e.consumersTail=void 0}function Dn(e,t){let n=e.consumersTail,r=kn(e);if(n===void 0?(t.nextConsumer=void 0,e.consumers=t):(t.nextConsumer=n.nextConsumer,n.nextConsumer=t),t.prevConsumer=n,e.consumersTail=t,!r)for(let t=e.producers;t!==void 0;t=t.nextProducer)Dn(t.producer,t)}function On(e){let t=e.producer,n=e.nextProducer,r=e.nextConsumer,i=e.prevConsumer;if(e.nextConsumer=void 0,e.prevConsumer=void 0,r===void 0?t.consumersTail=i:r.prevConsumer=i,i!==void 0)i.nextConsumer=r;else if(t.consumers=r,!kn(t)){let e=t.producers;for(;e!==void 0;)e=On(e)}return n}function kn(e){return e.consumerIsAlwaysLive||e.consumers!==void 0}function An(e){un?.(e)}function jn(e,t){return Object.is(e,t)}function Mn(e,t){let n=Object.create(In);n.computation=e,t!==void 0&&(n.equal=t);let r=()=>{if(gn(n),mn(n),n.value===Fn)throw n.error;return n.value};return r[dn]=n,An(n),r}var Nn=Symbol(`UNSET`),Pn=Symbol(`COMPUTING`),Fn=Symbol(`ERRORED`),In={...pn,value:Nn,dirty:!0,error:null,equal:jn,kind:`computed`,producerMustRecompute(e){return e.value===Nn||e.value===Pn},producerRecomputeValue(e){if(e.value===Pn)throw Error(``);let t=e.value;e.value=Pn;let n=xn(e),r,i=!1;try{r=e.computation(),w(null),i=t!==Nn&&t!==Fn&&r!==Fn&&e.equal(t,r)}catch(t){r=Fn,e.error=t}finally{Cn(e,n)}if(i){e.value=t;return}e.value=r,e.version++}};function Ln(){throw Error()}var Rn=Ln;function zn(e){Rn(e)}function Bn(e){Rn=e}var Vn=null;function Hn(e,t){let n=Object.create(Kn);n.value=e,t!==void 0&&(n.equal=t);let r=()=>Un(n);return r[dn]=n,An(n),[r,e=>Wn(n,e),e=>Gn(n,e)]}function Un(e){return mn(e),e.value}function Wn(e,t){vn()||zn(e),e.equal(e.value,t)||(e.value=t,qn(e))}function Gn(e,t){vn()||zn(e),Wn(e,t(e.value))}var Kn={...pn,equal:jn,value:void 0,kind:`signal`};function qn(e){e.version++,hn(),_n(e),Vn?.(e)}var Jn={...pn,consumerIsAlwaysLive:!0,consumerAllowSignalWrites:!0,dirty:!0,kind:`effect`};function Yn(e){if(e.dirty=!1,e.version>0&&!Tn(e))return;e.version++;let t=xn(e);try{e.cleanup(),e.fn()}finally{Cn(e,t)}}var Xn=void 0;function Zn(){return Xn}function Qn(e){let t=Xn;return Xn=e,t}var $n=Symbol(`NotFound`);function er(e){return e===$n||e?.name===`ɵNotFound`}function tr(e,t,n){let r=Object.create(ir);r.source=e,r.computation=t,n!=null&&(r.equal=n);let i=()=>{if(gn(r),mn(r),r.value===Fn)throw r.error;return r.value};return i[dn]=r,An(r),i}function nr(e,t){gn(e),Wn(e,t),bn(e)}function rr(e,t){if(gn(e),e.value===Fn)throw e.error;Gn(e,t),bn(e)}var ir={...pn,value:Nn,dirty:!0,error:null,equal:jn,kind:`linkedSignal`,producerMustRecompute(e){return e.value===Nn||e.value===Pn},producerRecomputeValue(e){if(e.value===Pn)throw Error(``);let t=e.value;e.value=Pn;let n=xn(e),r,i=!1;try{let n=e.source(),a=t!==Nn&&t!==Fn,o=a?{source:e.sourceValue,value:t}:void 0;r=e.computation(n,o),e.sourceValue=n,w(null),i=a&&r!==Fn&&e.equal(t,r)}catch(t){r=Fn,e.error=t}finally{Cn(e,n)}if(i){e.value=t;return}e.value=r,e.version++}};function ar(e){let t=w(null);try{return e()}finally{w(t)}}var or=function(e,t){return or=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},or(e,t)};function sr(e,t){if(typeof t!=`function`&&t!==null)throw TypeError(`Class extends value `+String(t)+` is not a constructor or null`);or(e,t);function n(){this.constructor=e}e.prototype=t===null?Object.create(t):(n.prototype=t.prototype,new n)}function cr(e){var t=typeof Symbol==`function`&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&typeof e.length==`number`)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw TypeError(t?`Object is not iterable.`:`Symbol.iterator is not defined.`)}function lr(e,t){var n=typeof Symbol==`function`&&e[Symbol.iterator];if(!n)return e;var r=n.call(e),i,a=[],o;try{for(;(t===void 0||t-->0)&&!(i=r.next()).done;)a.push(i.value)}catch(e){o={error:e}}finally{try{i&&!i.done&&(n=r.return)&&n.call(r)}finally{if(o)throw o.error}}return a}function ur(e,t,n){if(n||arguments.length===2)for(var r=0,i=t.length,a;r0},enumerable:!1,configurable:!0}),t.prototype._trySubscribe=function(t){return this._throwIfClosed(),e.prototype._trySubscribe.call(this,t)},t.prototype._subscribe=function(e){return this._throwIfClosed(),this._checkFinalizedStatuses(e),this._innerSubscribe(e)},t.prototype._innerSubscribe=function(e){var t=this,n=this,r=n.hasError,i=n.isStopped,a=n.observers;return r||i?gr:(this.currentObservers=null,a.push(e),new hr(function(){t.currentObservers=null,mr(a,e)}))},t.prototype._checkFinalizedStatuses=function(e){var t=this,n=t.hasError,r=t.thrownError,i=t.isStopped;n?e.error(r):i&&e.complete()},t.prototype.asObservable=function(){var e=new Hr;return e.source=this,e},t.create=function(e,t){return new Qr(e,t)},t}(Hr),Qr=function(e){sr(t,e);function t(t,n){var r=e.call(this)||this;return r.destination=t,r.source=n,r}return t.prototype.next=function(e){var t,n;(n=(t=this.destination)?.next)==null||n.call(t,e)},t.prototype.error=function(e){var t,n;(n=(t=this.destination)?.error)==null||n.call(t,e)},t.prototype.complete=function(){var e,t;(t=(e=this.destination)?.complete)==null||t.call(e)},t.prototype._subscribe=function(e){return this.source?.subscribe(e)??gr},t}(Zr),$r=function(e){sr(t,e);function t(t){var n=e.call(this)||this;return n._value=t,n}return Object.defineProperty(t.prototype,"value",{get:function(){return this.getValue()},enumerable:!1,configurable:!0}),t.prototype._subscribe=function(t){var n=e.prototype._subscribe.call(this,t);return!n.closed&&t.next(this._value),n},t.prototype.getValue=function(){var e=this,t=e.hasError,n=e.thrownError,r=e._value;if(t)throw n;return this._throwIfClosed(),r},t.prototype.next=function(t){e.prototype.next.call(this,this._value=t)},t}(Zr);function ei(e,t){return qr(function(n,r){var i=0;n.subscribe(Jr(r,function(n){r.next(e.call(t,n,i++))}))})}var ti=`https://angular.dev/best-practices/security#preventing-cross-site-scripting-xss`,T=class extends Error{code;constructor(e,t){super(ri(e,t)),this.code=e}};function ni(e){return`NG0${Math.abs(e)}`}function ri(e,t){return`${ni(e)}${t?`: `+t:``}`}function ii(e){for(let t in e)if(e[t]===ii)return t;throw Error(``)}function ai(e){if(typeof e==`string`)return e;if(Array.isArray(e))return`[${e.map(ai).join(`, `)}]`;if(e==null)return``+e;let t=e.overriddenName||e.name;if(t)return`${t}`;let n=e.toString();if(n==null)return``+n;let r=n.indexOf(` -`);return r>=0?n.slice(0,r):n}function oi(e,t){return e?t?`${e} ${t}`:e:t||``}var si=ii({__forward_ref__:ii});function ci(e){return e.__forward_ref__=ci,e}function li(e){return ui(e)?e():e}function ui(e){return typeof e==`function`&&Object.hasOwn(e,si)&&e.__forward_ref__===ci}function di(e){return{token:e.token,providedIn:e.providedIn||null,factory:e.factory,value:void 0}}function fi(e){return pi(e,gi)}function pi(e,t){return Object.hasOwn(e,t)&&e[t]||null}function mi(e){return(e?.[gi]??null)||null}function hi(e){return e&&Object.hasOwn(e,_i)?e[_i]:null}var gi=ii({ɵprov:ii}),_i=ii({ɵinj:ii}),vi=class{_desc;ngMetadataName=`InjectionToken`;ɵprov;constructor(e,t){this._desc=e,this.ɵprov=void 0,typeof t==`number`?this.__NG_ELEMENT_ID__=t:t!==void 0&&(this.ɵprov=di({token:this,providedIn:t.providedIn||`root`,factory:t.factory}))}get multi(){return this}toString(){return`InjectionToken ${this._desc}`}};function yi(e){return e&&!!e.ɵproviders}var bi=ii({ɵcmp:ii}),xi=ii({ɵdir:ii}),Si=ii({ɵpipe:ii}),Ci=ii({ɵfac:ii}),wi=ii({__NG_ELEMENT_ID__:ii}),Ti=ii({__NG_ENV_ID__:ii});function Ei(e){return ki(e,`@Component`),e[bi]||null}function Di(e){return ki(e,`@Directive`),e[xi]||null}function Oi(e){return ki(e,`@Pipe`),e[Si]||null}function ki(e,t){if(e==null)throw new T(-919,!1)}function Ai(e){return typeof e==`string`?e:e==null?``:String(e)}var ji=ii({ngErrorCode:ii}),Mi=ii({ngErrorMessage:ii}),Ni=ii({ngTokenPath:ii});function Pi(e,t){return Ii(``,-200,t)}function Fi(e,t){throw new T(-201,!1)}function Ii(e,t,n){let r=new T(t,e);return r[ji]=t,r[Mi]=e,n&&(r[Ni]=n),r}function Li(e){return e[ji]}var Ri;function zi(){return Ri}function Bi(e){let t=Ri;return Ri=e,t}function Vi(e,t,n){let r=fi(e);if(r&&r.providedIn==`root`)return r.value===void 0?r.value=r.factory():r.value;if(n&8)return null;if(t!==void 0)return t;Fi(e,``)}var Hi=globalThis,Ui={},Wi=`__NG_DI_FLAG__`,Gi=class{injector;constructor(e){this.injector=e}retrieve(e,t){let n=Ji(t)||0;try{return this.injector.get(e,n&8?null:Ui,n)}catch(e){if(er(e))return e;throw e}}};function Ki(e,t=0){let n=Zn();if(n===void 0)throw new T(-203,!1);if(n===null)return Vi(e,void 0,t);{let r=Yi(t),i=n.retrieve(e,r);if(er(i)){if(r.optional)return null;throw i}return i}}function qi(e,t=0){return(zi()||Ki)(li(e),t)}function E(e,t){return qi(e,Ji(t))}function Ji(e){return e===void 0||typeof e==`number`?e:0|(e.optional&&8)|(e.host&&1)|(e.self&&2)|(e.skipSelf&&4)}function Yi(e){return{optional:!!(e&8),host:!!(e&1),self:!!(e&2),skipSelf:!!(e&4)}}function Xi(e){let t=[];for(let n=0;nArray.isArray(e)?ta(e,t):t(e))}function na(e,t,n){t>=e.length?e.push(n):e.splice(t,0,n)}function ra(e,t){return t>=e.length-1?e.pop():e.splice(t,1)[0]}function ia(e,t,n,r){let i=e.length;if(i==t)e.push(n,r);else if(i===1)e.push(r,e[0]),e[0]=n;else{for(i--,e.push(e[i-1],e[i]);i>t;){let t=i-2;e[i]=e[t],i--}e[t]=n,e[t+1]=r}}function aa(e,t,n){let r=sa(e,t);return r>=0?e[r|1]=n:(r=~r,ia(e,r,t,n)),r}function oa(e,t){let n=sa(e,t);if(n>=0)return e[n|1]}function sa(e,t){return ca(e,t,1)}function ca(e,t,n){let r=0,i=e.length>>n;for(;i!==r;){let a=r+(i-r>>1),o=e[a<t?i=a:r=a+1}return~(i<{n.push(e)};return ta(t,e=>{let t=e;va(t,a,[],r)&&(i||=[],i.push(t))}),i!==void 0&&_a(i,a),n}function _a(e,t){for(let n=0;n{t(e,r)})}}function va(e,t,n,r){if(e=li(e),!e)return!1;let i=null,a=hi(e),o=!a&&Ei(e);if(!a&&!o){let t=e.ngModule;if(a=hi(t),a)i=t;else return!1}else if(o&&!o.standalone)return!1;else i=e;let s=r.has(i);if(o){if(s)return!1;if(r.add(i),o.dependencies){let e=typeof o.dependencies==`function`?o.dependencies():o.dependencies;for(let i of e)va(i,t,n,r)}}else if(a){if(a.imports!=null&&!s){r.add(i);let e;try{ta(a.imports,i=>{va(i,t,n,r)&&(e||=[],e.push(i))})}finally{}e!==void 0&&_a(e,t)}if(!s){let e=Qi(i)||(()=>new i);t({provide:i,useFactory:e,deps:ua},i),t({provide:pa,useValue:i,multi:!0},i),t({provide:da,useValue:()=>qi(i),multi:!0},i)}let o=a.providers;if(o!=null&&!s){let n=e;ya(o,e=>{t(e,n)})}}else return!1;return i!==e&&e.providers!==void 0}function ya(e,t){for(let n of e)yi(n)&&(n=n.ɵproviders),Array.isArray(n)?ya(n,t):t(n)}var ba=ii({provide:String,useValue:ii});function xa(e){return typeof e==`object`&&!!e&&ba in e}function Sa(e){return!!(e&&e.useExisting)}function Ca(e){return!!(e&&e.useFactory)}function wa(e){return typeof e==`function`}var Ta=new vi(``),Ea={},Da={},Oa=void 0;function ka(){return Oa===void 0&&(Oa=new ma),Oa}var Aa=class{},ja=class extends Aa{parent;source;scopes;records=new Map;_ngOnDestroyHooks=new Set;_onDestroyHooks=[];get destroyed(){return this._destroyed}_destroyed=!1;injectorDefTypes;constructor(e,t,n,r){super(),this.parent=t,this.source=n,this.scopes=r,Va(e,e=>this.processProvider(e)),this.records.set(fa,La(void 0,this)),r.has(`environment`)&&this.records.set(Aa,La(void 0,this));let i=this.records.get(Ta);i!=null&&typeof i.value==`string`&&this.scopes.add(i.value),this.injectorDefTypes=new Set(this.get(pa,ua,{self:!0}))}retrieve(e,t){let n=Ji(t)||0;try{return this.get(e,Ui,n)}catch(e){if(er(e))return e;throw e}}destroy(){Ia(this),this._destroyed=!0;let e=w(null);try{for(let e of this._ngOnDestroyHooks)e.ngOnDestroy();let e=this._onDestroyHooks;this._onDestroyHooks=[];for(let t of e)t()}finally{this.records.clear(),this._ngOnDestroyHooks.clear(),this.injectorDefTypes.clear(),w(e)}}onDestroy(e){return Ia(this),this._onDestroyHooks.push(e),()=>this.removeOnDestroy(e)}runInContext(e){Ia(this);let t=Qn(this),n=Bi(void 0);try{return e()}finally{Qn(t),Bi(n)}}get(e,t=Ui,n){if(Ia(this),Object.hasOwn(e,Ti))return e[Ti](this);let r=Ji(n),i=Qn(this),a=Bi(void 0);try{if(!(r&4)){let t=this.records.get(e);if(t===void 0){let n=Ba(e)&&fi(e);t=n&&this.injectableDefInScope(n)?La(Ma(e),Ea):null,this.records.set(e,t)}if(t!=null)return this.hydrate(e,t,r)}let n=r&2?ka():this.parent;return t=r&8&&t===Ui?null:t,n.get(e,t)}catch(e){let t=Li(e);throw t===-200||t===-201?new T(t,null):e}finally{Bi(a),Qn(i)}}resolveInjectorInitializers(){let e=w(null),t=Qn(this),n=Bi(void 0);try{let e=this.get(da,ua,{self:!0});for(let t of e)t()}finally{Qn(t),Bi(n),w(e)}}toString(){return`R3Injector[...]`}processProvider(e){e=li(e);let t=wa(e)?e:li(e&&e.provide),n=Pa(e);if(!wa(e)&&e.multi===!0){let n=this.records.get(t);n||(n=La(void 0,Ea,!0),n.factory=()=>Xi(n.multi),this.records.set(t,n)),t=e,n.multi.push(e)}this.records.set(t,n)}hydrate(e,t,n){let r=w(null);try{if(t.value===Da)throw Pi(``);return t.value===Ea&&(t.value=Da,t.value=t.factory(void 0,n)),typeof t.value==`object`&&t.value&&za(t.value)&&this._ngOnDestroyHooks.add(t.value),t.value}finally{w(r)}}injectableDefInScope(e){if(!e.providedIn)return!1;let t=li(e.providedIn);return typeof t==`string`?t===`any`||this.scopes.has(t):this.injectorDefTypes.has(t)}removeOnDestroy(e){let t=this._onDestroyHooks.indexOf(e);t!==-1&&this._onDestroyHooks.splice(t,1)}};function Ma(e){let t=fi(e),n=t===null?Qi(e):t.factory;if(n!==null)return n;if(e instanceof vi)throw new T(-204,!1);if(e instanceof Function)return Na(e);throw new T(-204,!1)}function Na(e){if(e.length>0)throw new T(-204,!1);let t=mi(e);return t===null?()=>new e:()=>t.factory(e)}function Pa(e){return xa(e)?La(void 0,e.useValue):La(Fa(e),Ea)}function Fa(e,t,n){let r;if(wa(e)){let t=li(e);return Qi(t)||Ma(t)}if(xa(e))r=()=>li(e.useValue);else if(Ca(e))r=()=>e.useFactory(...Xi(e.deps||[]));else if(Sa(e))r=(t,n)=>qi(li(e.useExisting),n!==void 0&&n&8?8:void 0);else{let t=li(e&&(e.useClass||e.provide));if(Ra(e))r=()=>new t(...Xi(e.deps));else return Qi(t)||Ma(t)}return r}function Ia(e){if(e.destroyed)throw new T(-205,!1)}function La(e,t,n=!1){return{factory:e,value:t,multi:n?[]:void 0}}function Ra(e){return!!e.deps}function za(e){return typeof e==`object`&&!!e&&typeof e.ngOnDestroy==`function`}function Ba(e){return typeof e==`function`||typeof e==`object`&&e.ngMetadataName===`InjectionToken`}function Va(e,t){for(let n of e)Array.isArray(n)?Va(n,t):n&&yi(n)?Va(n.ɵproviders,t):t(n)}function Ha(e,t){let n;e instanceof ja?(Ia(e),n=e):n=new Gi(e);let r=Qn(n),i=Bi(void 0);try{return t()}finally{Qn(r),Bi(i)}}function Ua(){return zi()!==void 0||Zn()!=null}var Wa=1;function Ga(e){return Array.isArray(e)&&typeof e[Wa]==`object`}function Ka(e){return Array.isArray(e)&&e[Wa]===!0}function qa(e){return!!(e.flags&4)}function Ja(e){return e.componentOffset>-1}function Ya(e){return(e.flags&1)==1}function Xa(e){return!!e.template}function Za(e){return!!(e[2]&512)}function Qa(e){return(e[2]&256)==256}var $a=(function(e){return e[e.NONE=0]=`NONE`,e[e.HTML=1]=`HTML`,e[e.STYLE=2]=`STYLE`,e[e.SCRIPT=3]=`SCRIPT`,e[e.URL=4]=`URL`,e[e.RESOURCE_URL=5]=`RESOURCE_URL`,e[e.ATTRIBUTE_NO_BINDING=6]=`ATTRIBUTE_NO_BINDING`,e})($a||{}),eo=`math`;function to(e){for(;Array.isArray(e);)e=e[0];return e}function no(e,t){return to(t[e])}function ro(e,t){return to(t[e.index])}function io(e,t){return e.data[t]}function ao(e,t){return e[t]}function oo(e,t,n,r){n>=e.data.length&&(e.data[n]=null,e.blueprint[n]=null),t[n]=r}function so(e,t){let n=t[e];return Ga(n)?n:n[0]}function co(e){return(e[2]&128)==128}function lo(e){return Ka(e[3])}function uo(e,t){return t==null?null:e[t]}function fo(e){e[17]=0}function po(e){e[2]&1024||(e[2]|=1024,co(e)&&_o(e))}function mo(e,t){for(;e>0;)t=t[14],e--;return t}function ho(e){return!!(e[2]&9216||e[24]?.dirty)}function go(e){e[10].changeDetectionScheduler?.notify(8),e[2]&64&&(e[2]|=1024),ho(e)&&_o(e)}function _o(e){e[10].changeDetectionScheduler?.notify(0);let t=bo(e);for(;t!==null&&!(t[2]&8192||(t[2]|=8192,!co(t)));)t=bo(t)}function vo(e,t){if(Qa(e))throw new T(911,!1);e[21]===null&&(e[21]=[]),e[21].push(t)}function yo(e,t){if(e[21]===null)return;let n=e[21].indexOf(t);n!==-1&&e[21].splice(n,1)}function bo(e){let t=e[3];return Ka(t)?t[3]:t}function xo(e){return e[7]??=[]}function So(e){return e.cleanup??=[]}function Co(e,t,n,r){let i=xo(t);i.push(n),e.firstCreatePass&&So(e).push(r,i.length-1)}var wo={lFrame:as(null),bindingsEnabled:!0,skipHydrationRootTNode:null},To=!1;function Eo(){return wo.lFrame.elementDepthCount}function Do(){wo.lFrame.elementDepthCount++}function Oo(){wo.lFrame.elementDepthCount--}function ko(){return wo.bindingsEnabled}function Ao(){return wo.skipHydrationRootTNode!==null}function jo(e){return wo.skipHydrationRootTNode===e}function Mo(){wo.skipHydrationRootTNode=null}function D(){return wo.lFrame.lView}function No(){return wo.lFrame.tView}function O(e){return wo.lFrame.contextLView=e,e[8]}function k(e){return wo.lFrame.contextLView=null,e}function Po(){let e=Fo();for(;e!==null&&e.type===64;)e=e.parent;return e}function Fo(){return wo.lFrame.currentTNode}function Io(){let e=wo.lFrame,t=e.currentTNode;return e.isParent?t:t.parent}function Lo(e,t){let n=wo.lFrame;n.currentTNode=e,n.isParent=t}function Ro(){return wo.lFrame.isParent}function zo(){wo.lFrame.isParent=!1}function Bo(){return wo.lFrame.contextLView}function Vo(){return To}function Ho(e){let t=To;return To=e,t}function Uo(){let e=wo.lFrame,t=e.bindingRootIndex;return t===-1&&(t=e.bindingRootIndex=e.tView.bindingStartIndex),t}function Wo(){return wo.lFrame.bindingIndex}function Go(e){return wo.lFrame.bindingIndex=e}function Ko(){return wo.lFrame.bindingIndex++}function qo(e){let t=wo.lFrame,n=t.bindingIndex;return t.bindingIndex+=e,n}function Jo(){return wo.lFrame.inI18n}function Yo(e,t){let n=wo.lFrame;n.bindingIndex=n.bindingRootIndex=e,Zo(t)}function Xo(){return wo.lFrame.currentDirectiveIndex}function Zo(e){wo.lFrame.currentDirectiveIndex=e}function Qo(e){let t=wo.lFrame.currentDirectiveIndex;return t===-1?null:e[t]}function $o(){return wo.lFrame.currentQueryIndex}function es(e){wo.lFrame.currentQueryIndex=e}function ts(e){let t=e[1];return t.type===2?t.declTNode:t.type===1?e[5]:null}function ns(e,t,n){if(n&4){let r=t,i=e;for(;r=r.parent,r===null&&!(n&1)&&(r=ts(i),!(r===null||(i=i[14],r.type&10))););if(r===null)return!1;t=r,e=i}let r=wo.lFrame=is();return r.currentTNode=t,r.lView=e,!0}function rs(e){let t=is(),n=e[1];wo.lFrame=t,t.currentTNode=n.firstChild,t.lView=e,t.tView=n,t.contextLView=e,t.bindingIndex=n.bindingStartIndex,t.inI18n=!1}function is(){let e=wo.lFrame,t=e===null?null:e.child;return t===null?as(e):t}function as(e){let t={currentTNode:null,isParent:!0,lView:null,tView:null,selectedIndex:-1,contextLView:null,elementDepthCount:0,currentNamespace:null,currentDirectiveIndex:-1,bindingRootIndex:-1,bindingIndex:-1,currentQueryIndex:0,parent:e,child:null,inI18n:!1};return e!==null&&(e.child=t),t}function os(){let e=wo.lFrame;return wo.lFrame=e.parent,e.currentTNode=null,e.lView=null,e}var ss=os;function cs(){let e=os();e.isParent=!0,e.tView=null,e.selectedIndex=-1,e.contextLView=null,e.elementDepthCount=0,e.currentDirectiveIndex=-1,e.currentNamespace=null,e.bindingRootIndex=-1,e.bindingIndex=-1,e.currentQueryIndex=0}function ls(e){return(wo.lFrame.contextLView=mo(e,wo.lFrame.contextLView))[8]}function us(){return wo.lFrame.selectedIndex}function ds(e){wo.lFrame.selectedIndex=e}function fs(){let e=wo.lFrame;return io(e.tView,e.selectedIndex)}function ps(){wo.lFrame.currentNamespace=`svg`}function ms(){hs()}function hs(){wo.lFrame.currentNamespace=null}function gs(){return wo.lFrame.currentNamespace}var _s=!0;function vs(){return _s}function ys(e){_s=e}function bs(e,t=null,n=null,r){let i=xs(e,t,n,r);return i.resolveInjectorInitializers(),i}function xs(e,t=null,n=null,r,i=new Set){return new ja([n||ua,ha(e)],t||ka(),null,i)}var Ss=class e{static THROW_IF_NOT_FOUND=Ui;static NULL=new ma;static create(e,t){if(Array.isArray(e))return bs({name:``},t,e,``);{let t=e.name??``;return bs({name:t},e.parent,e.providers,t)}}static ɵprov=di({token:e,providedIn:`any`,factory:()=>qi(fa)});static __NG_ELEMENT_ID__=-1},Cs=new vi(``),ws=class{static __NG_ELEMENT_ID__=Es;static __NG_ENV_ID__=e=>e},Ts=class extends ws{_lView;constructor(e){super(),this._lView=e}get destroyed(){return Qa(this._lView)}onDestroy(e){let t=this._lView;return vo(t,e),()=>yo(t,e)}};function Es(){return new Ts(D())}var Ds=new vi(``),Os=(()=>{class e{taskId=0;pendingTasks=new Set;destroyed=!1;pendingTask=new $r(!1);debugTaskTracker=E(Ds,{optional:!0});get hasPendingTasks(){return!this.destroyed&&this.pendingTask.value}get hasPendingTasksObservable(){return this.destroyed?new Hr(e=>{e.next(!1),e.complete()}):this.pendingTask}add(){!this.hasPendingTasks&&!this.destroyed&&this.pendingTask.next(!0);let e=this.taskId++;return this.pendingTasks.add(e),this.debugTaskTracker?.add(e),e}has(e){return this.pendingTasks.has(e)}remove(e){this.pendingTasks.delete(e),this.debugTaskTracker?.remove(e),this.pendingTasks.size===0&&this.hasPendingTasks&&this.pendingTask.next(!1)}ngOnDestroy(){this.pendingTasks.clear(),this.hasPendingTasks&&this.pendingTask.next(!1),this.destroyed=!0,this.pendingTask.unsubscribe()}static ɵprov=di({token:e,providedIn:`root`,factory:()=>new e})}return e})(),ks=class extends Zr{__isAsync;destroyRef=void 0;pendingTasks=void 0;constructor(e=!1){super(),this.__isAsync=e,Ua()&&(this.destroyRef=E(ws,{optional:!0})??void 0,this.pendingTasks=E(Os,{optional:!0})??void 0)}emit(e){let t=w(null);try{super.next(e)}finally{w(t)}}subscribe(e,t,n){let r=e,i=t||(()=>null),a=n;if(e&&typeof e==`object`){let t=e;r=t.next?.bind(t),i=t.error?.bind(t),a=t.complete?.bind(t)}this.__isAsync&&(i=this.wrapInTimeout(i),r&&=this.wrapInTimeout(r),a&&=this.wrapInTimeout(a));let o=super.subscribe({next:r,error:i,complete:a});return e instanceof hr&&e.add(o),o}wrapInTimeout(e){return t=>{let n=this.pendingTasks?.add();setTimeout(()=>{try{e(t)}finally{n!==void 0&&this.pendingTasks?.remove(n)}})}}};function As(...e){}function js(e){let t,n;function r(){e=As;try{n!==void 0&&typeof cancelAnimationFrame==`function`&&cancelAnimationFrame(n),t!==void 0&&clearTimeout(t)}catch{}}return t=setTimeout(()=>{e(),r()}),typeof requestAnimationFrame==`function`&&(n=requestAnimationFrame(()=>{e(),r()})),()=>r()}function Ms(e){return queueMicrotask(()=>e()),()=>{e=As}}var Ns=`isAngularZone`,Ps=`isAngularZone_ID`,Fs=0,Is=class e{hasPendingMacrotasks=!1;hasPendingMicrotasks=!1;isStable=!0;onUnstable=new ks(!1);onMicrotaskEmpty=new ks(!1);onStable=new ks(!1);onError=new ks(!1);constructor(e){let{enableLongStackTrace:t=!1,shouldCoalesceEventChangeDetection:n=!1,shouldCoalesceRunChangeDetection:r=!1,scheduleInRootZone:i=!1}=e;if(typeof Zone>`u`)throw new T(908,!1);Zone.assertZonePatched();let a=this;a._nesting=0,a._outer=a._inner=Zone.current,Zone.TaskTrackingZoneSpec&&(a._inner=a._inner.fork(new Zone.TaskTrackingZoneSpec)),t&&Zone.longStackTraceZoneSpec&&(a._inner=a._inner.fork(Zone.longStackTraceZoneSpec)),a.shouldCoalesceEventChangeDetection=!r&&n,a.shouldCoalesceRunChangeDetection=r,a.callbackScheduled=!1,a.scheduleInRootZone=i,Bs(a)}static isInAngularZone(){return typeof Zone<`u`&&Zone.current.get(Ns)===!0}static assertInAngularZone(){if(!e.isInAngularZone())throw new T(909,!1)}static assertNotInAngularZone(){if(e.isInAngularZone())throw new T(909,!1)}run(e,t,n){return this._inner.run(e,t,n)}runTask(e,t,n,r){let i=this._inner,a=i.scheduleEventTask(`NgZoneEvent: `+r,e,Ls,As,As);try{return i.runTask(a,t,n)}finally{i.cancelTask(a)}}runGuarded(e,t,n){return this._inner.runGuarded(e,t,n)}runOutsideAngular(e){return this._outer.run(e)}},Ls={};function Rs(e){if(e._nesting==0&&!e.hasPendingMicrotasks&&!e.isStable)try{e._nesting++,e.onMicrotaskEmpty.emit(null)}finally{if(e._nesting--,!e.hasPendingMicrotasks)try{e.runOutsideAngular(()=>e.onStable.emit(null))}finally{e.isStable=!0}}}function zs(e){if(e.isCheckStableRunning||e.callbackScheduled)return;e.callbackScheduled=!0;function t(){js(()=>{e.callbackScheduled=!1,Vs(e),e.isCheckStableRunning=!0,Rs(e),e.isCheckStableRunning=!1})}e.scheduleInRootZone?Zone.root.run(()=>{t()}):e._outer.run(()=>{t()}),Vs(e)}function Bs(e){let t=()=>{zs(e)},n=Fs++;e._inner=e._inner.fork({name:`angular`,properties:{[Ns]:!0,[Ps]:n,[Ps+n]:!0},onInvokeTask:(n,r,i,a,o,s)=>{if(Gs(s))return n.invokeTask(i,a,o,s);try{return Hs(e),n.invokeTask(i,a,o,s)}finally{(e.shouldCoalesceEventChangeDetection&&a.type===`eventTask`||e.shouldCoalesceRunChangeDetection)&&t(),Us(e)}},onInvoke:(n,r,i,a,o,s,c)=>{try{return Hs(e),n.invoke(i,a,o,s,c)}finally{e.shouldCoalesceRunChangeDetection&&!e.callbackScheduled&&!Ks(s)&&t(),Us(e)}},onHasTask:(t,n,r,i)=>{t.hasTask(r,i),n===r&&(i.change==`microTask`?(e._hasPendingMicrotasks=i.microTask,Vs(e),Rs(e)):i.change==`macroTask`&&(e.hasPendingMacrotasks=i.macroTask))},onHandleError:(t,n,r,i)=>(t.handleError(r,i),e.runOutsideAngular(()=>e.onError.emit(i)),!1)})}function Vs(e){e.hasPendingMicrotasks=!!(e._hasPendingMicrotasks||(e.shouldCoalesceEventChangeDetection||e.shouldCoalesceRunChangeDetection)&&e.callbackScheduled===!0)}function Hs(e){e._nesting++,e.isStable&&(e.isStable=!1,e.onUnstable.emit(null))}function Us(e){e._nesting--,Rs(e)}var Ws=class{hasPendingMicrotasks=!1;hasPendingMacrotasks=!1;isStable=!0;onUnstable=new ks;onMicrotaskEmpty=new ks;onStable=new ks;onError=new ks;run(e,t,n){return e.apply(t,n)}runGuarded(e,t,n){return e.apply(t,n)}runOutsideAngular(e){return e()}runTask(e,t,n,r){return e.apply(t,n)}};function Gs(e){return qs(e,`__ignore_ng_zone__`)}function Ks(e){return qs(e,`__scheduler_tick__`)}function qs(e,t){return!Array.isArray(e)||e.length!==1?!1:e[0]?.data?.[t]===!0}var Js=class{_console=console;handleError(e){this._console.error(`ERROR`,e)}},Ys=new vi(``,{factory:()=>{let e=E(Is),t=E(Aa),n;return r=>{e.runOutsideAngular(()=>{t.destroyed&&!n?setTimeout(()=>{throw r}):(n??=t.get(Js),n.handleError(r))})}}}),Xs={provide:da,useValue:()=>{E(Js,{optional:!0})},multi:!0};function A(e,t){let[n,r,i]=Hn(e,t?.equal),a=n;return a[dn],a.set=r,a.update=i,a.asReadonly=Zs.bind(a),a}function Zs(){let e=this[dn];if(e.readonlyFn===void 0){let t=()=>this();t[dn]=e,e.readonlyFn=t}return e.readonlyFn}var Qs=new vi(``,{factory:()=>$s}),$s=`ng`,ec=new vi(``),tc=new vi(``,{providedIn:`platform`,factory:()=>`unknown`}),nc=new vi(``,{factory:()=>E(Cs).body?.querySelector(`[ngCspNonce]`)?.getAttribute(`ngCspNonce`)||null}),rc=(()=>{class e{view;node;constructor(e,t){this.view=e,this.node=t}static __NG_ELEMENT_ID__=ic}return e})();function ic(){return new rc(D(),Po())}var ac=class{},oc=new vi(``,{factory:()=>!0}),sc=new vi(``),cc=(()=>{class e{static ɵprov=di({token:e,providedIn:`root`,factory:()=>new lc})}return e})(),lc=class{dirtyEffectCount=0;queues=new Map;add(e){this.enqueue(e),this.schedule(e)}schedule(e){e.dirty&&this.dirtyEffectCount++}remove(e){let t=e.zone,n=this.queues.get(t);n.has(e)&&(n.delete(e),e.dirty&&this.dirtyEffectCount--)}enqueue(e){let t=e.zone;this.queues.has(t)||this.queues.set(t,new Set);let n=this.queues.get(t);n.has(e)||n.add(e)}flush(){for(;this.dirtyEffectCount>0;){let e=!1;for(let[t,n]of this.queues)e||=t===null?this.flushQueue(n):t.run(()=>this.flushQueue(n));e||(this.dirtyEffectCount=0)}}flushQueue(e){let t=!1;for(let n of e)n.dirty&&(this.dirtyEffectCount--,t=!0,n.run());return t}},uc=class{[dn];constructor(e){this[dn]=e}destroy(){this[dn].destroy()}};function dc(e,t){let n=t?.injector??E(Ss),r=t?.manualCleanup===!0?null:n.get(ws),i,a=n.get(rc,null,{optional:!0}),o=n.get(ac);return a===null?i=gc(e,n.get(cc),o):(i=hc(a.view,o,e),r instanceof Ts&&r._lView===a.view&&(r=null)),i.injector=n,r!==null&&(i.onDestroyFns=[r.onDestroy(()=>i.destroy())]),new uc(i)}var fc={...Jn,cleanupFns:void 0,zone:null,onDestroyFns:null,run(){let e=Ho(!1);try{Yn(this)}finally{Ho(e)}},cleanup(){if(!this.cleanupFns?.length)return;let e=w(null);try{for(;this.cleanupFns.length;)this.cleanupFns.pop()()}finally{this.cleanupFns=[],w(e)}}},pc={...fc,consumerMarkedDirty(){this.scheduler.schedule(this),this.notifier.notify(12)},destroy(){if(En(this),this.onDestroyFns!==null)for(let e of this.onDestroyFns)e();this.cleanup(),this.scheduler.remove(this)}},mc={...fc,consumerMarkedDirty(){this.view[2]|=8192,_o(this.view),this.notifier.notify(13)},destroy(){if(En(this),this.onDestroyFns!==null)for(let e of this.onDestroyFns)e();this.cleanup(),this.view[23]?.delete(this)}};function hc(e,t,n){let r=Object.create(mc);return r.view=e,r.zone=typeof Zone<`u`?Zone.current:null,r.notifier=t,r.fn=_c(r,n),e[23]??=new Set,e[23].add(r),r.consumerMarkedDirty(r),r}function gc(e,t,n){let r=Object.create(pc);return r.fn=_c(r,e),r.scheduler=t,r.notifier=n,r.zone=typeof Zone<`u`?Zone.current:null,r.scheduler.add(r),r.notifier.notify(12),r}function _c(e,t){return()=>{t(t=>(e.cleanupFns??=[]).push(t))}}function vc(e){return typeof e==`function`&&e[dn]!==void 0}function yc(e){return vc(e)&&typeof e.set==`function`}var bc=Symbol(`InputSignalNode#UNSET`),xc={...Kn,transformFn:void 0,applyValueToInputSignal(e,t){Wn(e,t)}};function Sc(e){return{toString:e}.toString()}var Cc=(function(e){return e[e.TemplateCreateStart=0]=`TemplateCreateStart`,e[e.TemplateCreateEnd=1]=`TemplateCreateEnd`,e[e.TemplateUpdateStart=2]=`TemplateUpdateStart`,e[e.TemplateUpdateEnd=3]=`TemplateUpdateEnd`,e[e.LifecycleHookStart=4]=`LifecycleHookStart`,e[e.LifecycleHookEnd=5]=`LifecycleHookEnd`,e[e.OutputStart=6]=`OutputStart`,e[e.OutputEnd=7]=`OutputEnd`,e[e.BootstrapApplicationStart=8]=`BootstrapApplicationStart`,e[e.BootstrapApplicationEnd=9]=`BootstrapApplicationEnd`,e[e.BootstrapComponentStart=10]=`BootstrapComponentStart`,e[e.BootstrapComponentEnd=11]=`BootstrapComponentEnd`,e[e.ChangeDetectionStart=12]=`ChangeDetectionStart`,e[e.ChangeDetectionEnd=13]=`ChangeDetectionEnd`,e[e.ChangeDetectionSyncStart=14]=`ChangeDetectionSyncStart`,e[e.ChangeDetectionSyncEnd=15]=`ChangeDetectionSyncEnd`,e[e.AfterRenderHooksStart=16]=`AfterRenderHooksStart`,e[e.AfterRenderHooksEnd=17]=`AfterRenderHooksEnd`,e[e.ComponentStart=18]=`ComponentStart`,e[e.ComponentEnd=19]=`ComponentEnd`,e[e.DeferBlockStateStart=20]=`DeferBlockStateStart`,e[e.DeferBlockStateEnd=21]=`DeferBlockStateEnd`,e[e.DynamicComponentStart=22]=`DynamicComponentStart`,e[e.DynamicComponentEnd=23]=`DynamicComponentEnd`,e[e.HostBindingsUpdateStart=24]=`HostBindingsUpdateStart`,e[e.HostBindingsUpdateEnd=25]=`HostBindingsUpdateEnd`,e})(Cc||{});function wc(e,t,n,r){t===null?e[n]=r:t.applyValueToInputSignal(t,r)}var Tc=null;function Ec(){return Tc}var Dc=[],Oc=function(e,t=null,n){for(let r=0;r=r)break}else t[c]<0&&(e[17]+=65536),(s>14>16&&(e[2]&3)===t&&(e[2]+=16384,Fc(o,a)):Fc(o,a)}var Lc=-1,Rc=class{factory;name;injectImpl;resolving=!1;canSeeViewProviders;multi;componentProviders;index;providerFactory;constructor(e,t,n,r){this.factory=e,this.name=r,this.canSeeViewProviders=t,this.injectImpl=n}};function zc(e){return!!(e.flags&8)}function Bc(e){return!!(e.flags&16)}function Vc(e,t,n){let r=0;for(;rt){o=a-1;break}}}for(;a>16}function Yc(e,t){let n=Jc(e),r=t;for(;n>0;)r=r[14],n--;return r}var Xc=!0;function Zc(e){let t=Xc;return Xc=e,t}var Qc=255,$c=5,el=0,tl={};function nl(e,t,n){let r;typeof n==`string`?r=n.charCodeAt(0)||0:Object.hasOwn(n,wi)&&(r=n[wi]),r??=n[wi]=el++;let i=r&Qc,a=1<>$c)]|=a}function rl(e,t){let n=al(e,t);if(n!==-1)return n;let r=t[1];r.firstCreatePass&&(e.injectorIndex=t.length,il(r.data,e),il(t,null),il(r.blueprint,null));let i=ol(e,t),a=e.injectorIndex;if(Kc(i)){let e=qc(i),n=Yc(i,t),r=n[1].data;for(let i=0;i<8;i++)t[a+i]=n[e+i]|r[e+i]}return t[a+8]=i,a}function il(e,t){e.push(0,0,0,0,0,0,0,0,t)}function al(e,t){return e.injectorIndex===-1||e.parent&&e.parent.injectorIndex===e.injectorIndex||t[e.injectorIndex+8]===null?-1:e.injectorIndex}function ol(e,t){if(e.parent&&e.parent.injectorIndex!==-1)return e.parent.injectorIndex;let n=0,r=null,i=t;for(;i!==null;){if(r=xl(i),r===null)return Lc;if(n++,i=i[14],r.injectorIndex!==-1)return r.injectorIndex|n<<16}return Lc}function sl(e,t,n){nl(e,t,n)}function cl(e,t,n){if(n&8||e!==void 0)return e;Fi(t,`NodeInjector`)}function ll(e,t,n,r){if(n&8&&r===void 0&&(r=null),!(n&3)){let i=e[9],a=Bi(void 0);try{return i?i.get(t,r,n&8):Vi(t,r,n&8)}finally{Bi(a)}}return cl(r,t,n)}function ul(e,t,n,r=0,i){if(e!==null){if(t[2]&2048&&!(r&2)){let i=bl(e,t,n,r,tl);if(i!==tl)return i}let i=dl(e,t,n,r,tl);if(i!==tl)return i}return ll(t,n,r,i)}function dl(e,t,n,r,i){let a=hl(n);if(typeof a==`function`){if(!ns(t,e,r))return r&1?cl(i,n,r):ll(t,n,r,i);try{let e;if(e=a(r),e==null&&!(r&8))Fi(n);else return e}finally{ss()}}else if(typeof a==`number`){let i=null,o=al(e,t),s=Lc,c=r&1?t[15][5]:null;for((o===-1||r&4)&&(s=o===-1?ol(e,t):t[o+8],s===Lc||!_l(r,!1)?o=-1:(i=t[1],o=qc(s),t=Yc(s,t)));o!==-1;){let e=t[1];if(gl(a,o,e.data)){let e=fl(o,t,n,i,r,c);if(e!==tl)return e}s=t[o+8],s!==Lc&&_l(r,t[1].data[o+8]===c)&&gl(a,o,t)?(i=e,o=qc(s),t=Yc(s,t)):o=-1}}return i}function fl(e,t,n,r,i,a){let o=t[1],s=o.data[e+8],c=pl(s,o,n,r==null?Ja(s)&&Xc:r!=o&&!!(s.type&3),i&1&&a===s);return c===null?tl:ml(t,o,c,s,i)}function pl(e,t,n,r,i){let a=e.providerIndexes,o=t.data,s=a&1048575,c=e.directiveStart,l=e.directiveEnd,u=a>>20,d=r?s:s+u,f=i?s+u:l;for(let e=d;e=c&&t.type===n)return e}if(i){let e=o[c];if(e&&Xa(e)&&e.type===n)return c}return null}function ml(e,t,n,r,i){let a=e[n],o=t.data;if(a instanceof Rc){let s=a;if(s.resolving)throw Pi(``);let c=Zc(s.canSeeViewProviders);s.resolving=!0,o[n].type||o[n];let l=s.injectImpl?Bi(s.injectImpl):null;ns(e,r,0);try{a=e[n]=s.factory(void 0,i,o,e,r),t.firstCreatePass&&n>=r.directiveStart&&kc(n,o[n],t)}finally{l!==null&&Bi(l),Zc(c),s.resolving=!1,ss()}}return a}function hl(e){if(typeof e==`string`)return e.charCodeAt(0)||0;let t=Object.hasOwn(e,wi)?e[wi]:void 0;return typeof t==`number`?t>=0?t&Qc:yl:t}function gl(e,t,n){let r=1<>$c)]&r)}function _l(e,t){return!(e&2)&&!(e&1&&t)}var vl=class{_tNode;_lView;constructor(e,t){this._tNode=e,this._lView=t}get(e,t,n){return ul(this._tNode,this._lView,e,Ji(n),t)}};function yl(){return new vl(Po(),D())}function bl(e,t,n,r,i){let a=e,o=t;for(;a!==null&&o!==null&&o[2]&2048&&!Za(o);){let e=dl(a,o,n,r|2,tl);if(e!==tl)return e;r&=-5;let t=a.parent;if(!t){let e=o[20];if(e){let t=e.get(n,tl,r);if(t!==tl)return t}t=xl(o),o=o[14]}a=t}return i}function xl(e){let t=e[1],n=t.type;return n===2?t.declTNode:n===1?e[5]:null}function Sl(e){return{token:e.token,providedIn:e.autoProvided===!1?null:`root`,factory:e.factory,value:void 0}}function Cl(){return wl(Po(),D())}function wl(e,t){return new Tl(ro(e,t))}var Tl=(()=>{class e{nativeElement;constructor(e){this.nativeElement=e}static __NG_ELEMENT_ID__=Cl}return e})();function El(e){return e instanceof Tl?e.nativeElement:e}function Dl(){return this._results[Symbol.iterator]()}var Ol=class{_emitDistinctChangesOnly;dirty=!0;_onDirty=void 0;_results=[];_changesDetected=!1;_changes=void 0;length=0;first=void 0;last=void 0;get changes(){return this._changes??=new Zr}constructor(e=!1){this._emitDistinctChangesOnly=e}get(e){return this._results[e]}map(e){return this._results.map(e)}filter(e){return this._results.filter(e)}find(e){return this._results.find(e)}reduce(e,t){return this._results.reduce(e,t)}forEach(e){this._results.forEach(e)}some(e){return this._results.some(e)}toArray(){return this._results.slice()}toString(){return this._results.toString()}reset(e,t){this.dirty=!1;let n=ea(e);(this._changesDetected=!$i(this._results,n,t))&&(this._results=n,this.length=n.length,this.last=n[this.length-1],this.first=n[0])}notifyOnChanges(){this._changes!==void 0&&(this._changesDetected||!this._emitDistinctChangesOnly)&&this._changes.next(this)}onDirty(e){this._onDirty=e}setDirty(){this.dirty=!0,this._onDirty?.()}destroy(){this._changes!==void 0&&(this._changes.complete(),this._changes.unsubscribe())}[Symbol.iterator]=Dl};function kl(e){return(e.flags&128)==128}var Al=(function(e){return e[e.OnPush=0]=`OnPush`,e[e.Eager=1]=`Eager`,e[e.Default=1]=`Default`,e})(Al||{}),jl=new Map,Ml=0;function Nl(){return Ml++}function Pl(e){jl.set(e[19],e)}function Fl(e){jl.delete(e[19])}var Il=`__ngContext__`;function Ll(e,t){Ga(t)?(e[Il]=t[19],Pl(t)):e[Il]=t}function Rl(e){return Bl(e[12])}function zl(e){return Bl(e[4])}function Bl(e){for(;e!==null&&!Ka(e);)e=e[4];return e}var Vl=void 0;function Hl(e){Vl=e}function Ul(){if(Vl!==void 0)return Vl;if(typeof document<`u`)return document;throw new T(210,!1)}var Wl=!1,Gl=new vi(``,{factory:()=>Wl}),Kl=new WeakMap;function ql(e,t){if(typeof e!=`object`||!e)return;let n=Kl.get(e);n||(n=new WeakSet,Kl.set(e,n)),n.add(t)}function Jl(e){return(e.flags&32)==32}var Yl=()=>null;function Xl(e,t,n=!1){return Yl(e,t,n)}function Zl(e,t){let n=e.contentQueries;if(n!==null){let r=w(null);try{for(let r=0;r-1){let e;for(;++ia?``:i[u+1].toLowerCase(),r&2&&l!==e){if(Du(r))return!1;o=!0}}}}}return Du(r)||o}function Du(e){return!(e&1)}function Ou(e,t,n,r){if(t===null)return-1;let i=0;if(r||!n){let n=!1;for(;i-1)for(n++;n0?`="`+t+`"`:``)+`]`}else r&8?i+=`.`+o:r&4&&(i+=` `+o)}else i!==``&&!Du(o)&&(t+=Mu(a,i),i=``),r=o,a||=!Du(r);n++}return i!==``&&(t+=Mu(a,i)),t}function Pu(e){return e.map(Nu).join(`,`)}function Fu(e){let t=[],n=[],r=1,i=2;for(;r!1});function Vu(e){if(!e)return 0;let t=e.toLowerCase().indexOf(`ms`)>-1?1:1e3;return parseFloat(e)*t}function Hu(e,t){return e.getPropertyValue(t).split(`,`).map(e=>e.trim())}function Uu(e){let t=Hu(e,`transition-property`),n=Hu(e,`transition-duration`),r=Hu(e,`transition-delay`),i={propertyName:``,duration:0,animationName:void 0};for(let e=0;ei.duration&&(i.propertyName=t[e],i.duration=a)}return i}function Wu(e){let t=Hu(e,`animation-name`),n=Hu(e,`animation-delay`),r=Hu(e,`animation-duration`),i=Hu(e,`animation-iteration-count`),a={animationName:``,propertyName:void 0,duration:0};for(let e=0;ea.duration&&s!==`infinite`&&(a.animationName=t[e],a.duration=o)}return a}function Gu(e,t){return e!==void 0&&e.duration>t.duration}function Ku(e){return(e.animationName!=null||e.propertyName!=null)&&e.duration>0}function qu(e){let t=e.effect?.getTiming();if(t===void 0)return;let n=typeof t.duration==`number`?t.duration:0,r=(t.delay??0)+n,i=e.playbackRate;return i!==void 0&&i!==0&&i!==1&&(r/=Math.abs(i)),r}function Ju(e,t){let n=getComputedStyle(e),r=Wu(n),i=Uu(n),a=r.duration>i.duration?r:i;Gu(t.get(e),a)||Ku(a)&&t.set(e,a)}function Yu(e,t,n){if(!n)return;let r=e.getAnimations();return r.length===0?Ju(e,t):Xu(e,t,r)}function Xu(e,t,n){let r={animationName:void 0,propertyName:void 0,duration:0};for(let e of n){if(e.effect?.getTiming()?.iterations===1/0)continue;let t=qu(e)??0,n,i;e.animationName?i=e.animationName:n=e.transitionProperty,t>=r.duration&&(r={animationName:i,propertyName:n,duration:t})}Gu(t.get(e),r)||Ku(r)&&t.set(e,r)}var Zu=new Set,Qu=!1,$u=1,ed=typeof document<`u`&&typeof document?.documentElement?.getAnimations==`function`;function td(e){return e[9].get(Bu,Qu)}function nd(e,t,n){let r=id.get(e);if(r){for(let e of t)r.classList.push(e);for(let e of n)r.cleanupFns.push(e)}else id.set(e,{classList:t,cleanupFns:n})}function rd(e){let t=id.get(e);if(t){for(let e of t.cleanupFns)e();id.delete(e)}ad.delete(e)}var id=new WeakMap,ad=new WeakMap,od=new WeakMap;function sd(e){return e?e[14]??e:null}var cd=new WeakSet;function ld(e,t,n){let r=od.get(e);if(!r||r.length===0)return;let i=t.parentNode,a=t.previousSibling,o=sd(n);for(let e=r.length-1;e>=0;e--){let{el:n,declarationView:s}=r[e],c=n.parentNode;n===t?(r.splice(e,1),cd.add(n),n.dispatchEvent(new CustomEvent(`animationend`,{detail:{cancel:!0}}))):(a&&n===a||c&&i&&c!==i&&(o===null||s===null||o===s))&&(r.splice(e,1),n.dispatchEvent(new CustomEvent(`animationend`,{detail:{cancel:!0}})),n.parentNode?.removeChild(n))}}function ud(e,t,n){let r=sd(n),i=od.get(e);i?i.some(e=>e.el===t)||i.push({el:t,declarationView:r}):od.set(e,[{el:t,declarationView:r}])}function dd(e){let t=e[26]??={};return t.enter??=new Map}function fd(e){let t=typeof e==`function`?e():e,n=Array.isArray(t)?t:null;return typeof t==`string`&&(n=t.trim().split(/\s+/).filter(e=>e)),n}function pd(e){return e.composedPath?e.composedPath()[0]:e.target}function md(e,t){let n=ad.get(t);if(n===void 0)return!0;if(t!==pd(e))return!1;let r=e.animation;if(r){let e=qu(r);if(e!==void 0&&e+$u{class e{impl=null;execute(){this.impl?.execute()}static ɵprov=di({token:e,providedIn:`root`,factory:()=>new e})}return e})(),xd=[0,1,2,3],Sd=(()=>{class e{ngZone=E(Is);scheduler=E(ac);errorHandler=E(Js,{optional:!0});sequences=new Set;deferredRegistrations=new Set;executing=!1;constructor(){E(_d,{optional:!0})}execute(){let e=this.sequences.size>0;e&&Oc(Cc.AfterRenderHooksStart),this.executing=!0;for(let e of xd)for(let t of this.sequences)if(!t.erroredOrDestroyed&&t.hooks[e])try{t.pipelinedValue=this.ngZone.runOutsideAngular(()=>this.maybeTrace(()=>{let n=t.hooks[e];return n(t.pipelinedValue)},t.snapshot))}catch(e){t.erroredOrDestroyed=!0,this.errorHandler?.handleError(e)}this.executing=!1;for(let e of this.sequences)e.afterRun(),e.once&&(this.sequences.delete(e),e.destroy());for(let e of this.deferredRegistrations)this.sequences.add(e);this.deferredRegistrations.size>0&&this.scheduler.notify(7),this.deferredRegistrations.clear(),e&&Oc(Cc.AfterRenderHooksEnd)}register(e){let{view:t}=e;t===void 0?this.executing?this.deferredRegistrations.add(e):this.addSequence(e):((t[25]??=[]).push(e),_o(t),t[2]|=8192)}addSequence(e){this.sequences.add(e),this.scheduler.notify(7)}unregister(e){this.executing&&this.sequences.has(e)?(e.erroredOrDestroyed=!0,e.pipelinedValue=void 0,e.once=!0):(this.sequences.delete(e),this.deferredRegistrations.delete(e))}maybeTrace(e,t){return t?t.run(gd.AFTER_NEXT_RENDER,e):e()}static ɵprov=di({token:e,providedIn:`root`,factory:()=>new e})}return e})(),Cd=class{impl;hooks;view;once;snapshot;erroredOrDestroyed=!1;pipelinedValue=void 0;unregisterOnDestroy;constructor(e,t,n,r,i,a=null){this.impl=e,this.hooks=t,this.view=n,this.once=r,this.snapshot=a,this.unregisterOnDestroy=i?.onDestroy(()=>this.destroy())}afterRun(){this.erroredOrDestroyed=!1,this.pipelinedValue=void 0,this.snapshot?.dispose(),this.snapshot=null}destroy(){this.impl.unregister(this),this.unregisterOnDestroy?.();let e=this.view?.[25];e&&(this.view[25]=e.filter(e=>e!==this))}};function wd(e,t){let n=t?.injector??E(Ss);return yd(`NgAfterNextRender`),Ed(e,n,t,!0)}function Td(e){return e instanceof Function?[void 0,void 0,e,void 0]:[e.earlyRead,e.write,e.mixedReadWrite,e.read]}function Ed(e,t,n,r){let i=t.get(bd);i.impl??=t.get(Sd);let a=t.get(_d,null,{optional:!0}),o=n?.manualCleanup===!0?null:t.get(ws),s=t.get(rc,null,{optional:!0}),c=new Cd(i.impl,Td(e),s?.view,r,o,a?.snapshot(null));return i.impl.register(c),c}var Dd=new vi(``,{factory:()=>{let e=E(Aa),t=new Set;return e.onDestroy(()=>t.clear()),{queue:t,isScheduled:!1,scheduler:null,injector:e}}});function Od(e,t,n){let r=e.get(Dd);if(Array.isArray(t))for(let e of t)r.queue.add(e),n?.detachedLeaveAnimationFns?.push(e);else r.queue.add(t),n?.detachedLeaveAnimationFns?.push(t);r.scheduler&&r.scheduler(e)}function kd(e,t){let n=e.get(Dd);if(Array.isArray(t))for(let e of t)n.queue.delete(e);else n.queue.delete(t)}function Ad(e,t){let n=e.get(Dd);if(t.detachedLeaveAnimationFns){for(let e of t.detachedLeaveAnimationFns)n.queue.delete(e);t.detachedLeaveAnimationFns=void 0}}function jd(e){let t=e.get(Dd);t.isScheduled||=(wd(()=>{t.isScheduled=!1;for(let e of t.queue)e();t.queue.clear()},{injector:t.injector}),!0)}function Md(e){let t=e.get(Dd);t.scheduler=jd,t.scheduler(e)}function Nd(e,t){for(let[n,r]of t)Od(e,r.animateFns)}function Pd(e,t,n,r){let i=e?.[26]?.enter;t!==null&&i&&i.has(n.index)&&Nd(r,i)}function Fd(e,t,n,r){try{n.get(fa)}catch{return r(!1)}let i=e?.[26];i?.enter?.has(t.index)&&kd(n,i.enter.get(t.index).animateFns);let a=Id(e,t,i);if(a.size===0){let n=!1;if(e){let r=[];Rd(e,t,r),n=r.length>0}if(!n)return r(!1)}e&&Zu.add(e[19]),Od(n,()=>Ld(e,t,i||void 0,a,r),i||void 0)}function Id(e,t,n){let r=new Map,i=n?.leave;if(i&&i.has(t.index)&&r.set(t.index,i.get(t.index)),e&&i)for(let[n,a]of i){if(r.has(n))continue;let i=e[1].data[n].parent;for(;i;){if(i===t){r.set(n,a);break}i=i.parent}}return r}function Ld(e,t,n,r,i){let a=[];if(n&&n.leave)for(let[e]of r){if(!n.leave.has(e))continue;let t=n.leave.get(e);for(let e of t.animateFns){let{promise:t}=e();a.push(t)}n.detachedLeaveAnimationFns=void 0}if(e&&Rd(e,t,a),a.length>0){let t=n||e?.[26];if(t){let n=t.running;n&&a.push(n),t.running=Promise.allSettled(a),Bd(e,t.running,i)}else Promise.allSettled(a).then(()=>{e&&Zu.delete(e[19]),i(!0)})}else e&&Zu.delete(e[19]),i(!1)}function Rd(e,t,n){if(t.type&12){let r=e[t.index];if(Ka(r))for(let e=10;e{e[26]?.running===t&&(e[26].running=void 0,Zu.delete(e[19])),n(!0)})}function Vd(e,t,n,r,i,a,o,s){if(i!=null){let c,l=!1;Ka(i)?c=i:Ga(i)&&(l=!0,i=i[0]);let u=to(i);e===0&&r!==null?(Pd(s,r,a,n),o==null?du(t,r,u):uu(t,r,u,o||null,!0)):e===1&&r!==null?(Pd(s,r,a,n),uu(t,r,u,o||null,!0),ld(a,u,s)):e===2?(s?.[26]?.leave?.has(a.index)&&ud(a,u,s),cd.delete(u),Fd(s,a,n,e=>{if(cd.has(u)){cd.delete(u);return}pu(t,u,l,e)})):e===3&&(cd.delete(u),Fd(s,a,n,()=>{t.destroyNode(u)})),c!=null&&df(t,e,n,c,a,r,o)}}function Hd(e,t){Wd(e,t),t[0]=null,t[5]=null}function Ud(e,t,n,r,i,a){r[0]=i,r[5]=t,cf(e,r,n,1,i,a)}function Wd(e,t){t[10].changeDetectionScheduler?.notify(9),cf(e,t,t[11],2,null,null)}function Gd(e){let t=e[12];if(!t)return Jd(e[1],e);for(;t;){let n=null;if(Ga(t))n=t[12];else{let e=t[10];e&&(n=e)}if(!n){for(;t&&!t[4]&&t!==e;)Ga(t)&&Jd(t[1],t),t=t[3];t===null&&(t=e),Ga(t)&&Jd(t[1],t),n=t&&t[4]}t=n}}function Kd(e,t){let n=e[9],r=n.indexOf(t);n.splice(r,1)}function qd(e,t){if(Qa(t))return;let n=t[11];n.destroyNode&&cf(e,t,n,3,null,null),Gd(t)}function Jd(e,t){if(Qa(t))return;let n=w(null);try{t[2]&=-129,t[2]|=256,t[24]&&En(t[24]),Xd(e,t),Yd(e,t),t[1].type===1&&t[11].destroy();let n=t[16];if(n!==null&&Ka(t[3])){n!==t[3]&&Kd(n,t);let r=t[18];r!==null&&r.detachView(e)}Fl(t)}finally{w(n)}}function Yd(e,t){let n=e.cleanup,r=t[7];if(n!==null)for(let e=0;e=0?r[t]():r[-t].unsubscribe(),e+=2}else{let t=r[n[e+1]];n[e].call(t)}r!==null&&(t[7]=null);let i=t[21];if(i!==null){t[21]=null;for(let e=0;e27&&xf(e,t,27,!1),Oc(o?Cc.TemplateUpdateStart:Cc.TemplateCreateStart,i,n),n(r,i)}finally{ds(a),Oc(o?Cc.TemplateUpdateEnd:Cc.TemplateCreateEnd,i,n)}}function Tf(e,t,n){Mf(e,t,n),(n.flags&64)==64&&Nf(e,t,n)}function Ef(e,t,n=ro){let r=t.localNames;if(r!==null){let i=t.index+1;for(let a=0;a{_o(e.lView)},consumerOnSignalRead(){this.lView[24]=this}};function rp(e){let t=e[24]??Object.create(ip);return t.lView=e,t}var ip={...pn,consumerIsAlwaysLive:!0,kind:`template`,consumerMarkedDirty:e=>{let t=bo(e.lView);for(;t&&!ap(t[1]);)t=bo(t);t&&po(t)},consumerOnSignalRead(){this.lView[24]=this}};function ap(e){return e.type!==2}function op(e){if(e[23]===null)return;let t=!0;for(;t;){let n=!1;for(let t of e[23])if(t.dirty&&(n=!0,t.zone===null||Zone.current===t.zone?t.run():t.zone.run(()=>t.run()),e[23]===null))return;t=n&&!!(e[2]&8192)}}var sp=100;function cp(e,t=0){let n=e[10].rendererFactory;n.begin?.();try{lp(e,t)}finally{n.end?.()}}function lp(e,t){let n=Vo();try{Ho(!0),hp(e,t);let n=0;for(;ho(e);){if(n===sp)throw new T(103,!1);n++,hp(e,1)}}finally{Ho(n)}}function up(e,t,n,r){if(Qa(t))return;let i=t[2];rs(t);let a=!0,o=null,s=null;ap(e)?(s=$f(t),o=xn(s)):fn()===null?(a=!1,s=rp(t),o=xn(s)):t[24]&&=(En(t[24]),null);try{fo(t),Go(e.bindingStartIndex),n!==null&&wf(e,t,n,2,r);let a=(i&3)==3;if(a){let n=e.preOrderCheckHooks;n!==null&&jc(t,n,null)}else{let n=e.preOrderHooks;n!==null&&Mc(t,n,0,null),Nc(t,0)}if(fp(t),op(t),dp(t,0),e.contentQueries!==null&&Zl(e,t),a){let n=e.contentCheckHooks;n!==null&&jc(t,n)}else{let n=e.contentHooks;n!==null&&Mc(t,n,1),Nc(t,1)}_p(e,t);let o=e.components;o!==null&&gp(t,o,0);let s=e.viewQuery;if(s!==null&&Ql(2,s,r),a){let n=e.viewCheckHooks;n!==null&&jc(t,n)}else{let n=e.viewHooks;n!==null&&Mc(t,n,2),Nc(t,2)}if(e.firstUpdatePass===!0&&(e.firstUpdatePass=!1),t[22]){for(let e of t[22])e();t[22]=null}Zf(t),t[2]&=-73}catch(e){throw _o(t),e}finally{s!==null&&(Cn(s,o),a&&tp(s)),cs()}}function dp(e,t){for(let n=Rl(e);n!==null;n=zl(n))for(let e=10;e0&&(e[n-1][4]=r[4]);let a=ra(e,10+t);Hd(r[1],r);let o=a[18];o!==null&&o.detachView(a[1]),r[3]=null,r[4]=null,r[2]&=-129}return r}function wp(e,t,n,r){let i=10+r,a=n.length;r>0&&(n[i-1][4]=t),r-1&&(Cp(e,n),ra(t,n))}this._attachedToViewContainer=!1}qd(this._lView[1],this._lView)}onDestroy(e){vo(this._lView,e)}markForCheck(){vp(this._cdRefInjectingView||this._lView,4)}detach(){this._lView[2]&=-129}reattach(){go(this._lView),this._lView[2]|=128}detectChanges(){this._lView[2]|=1024,cp(this._lView)}checkNoChanges(){}attachToViewContainerRef(){if(this._appRef)throw new T(902,!1);this._attachedToViewContainer=!0}detachFromAppRef(){this._appRef=null;let e=Za(this._lView),t=this._lView[16];t!==null&&!e&&Kd(t,this._lView),Wd(this._lView[1],this._lView)}attachToAppRef(e){if(this._attachedToViewContainer)throw new T(902,!1);this._appRef=e;let t=Za(this._lView),n=this._lView[16];n!==null&&!t&&Tp(n,this._lView),go(this._lView)}},Dp=(()=>{class e{_declarationLView;_declarationTContainer;elementRef;static __NG_ELEMENT_ID__=Op;constructor(e,t,n){this._declarationLView=e,this._declarationTContainer=t,this.elementRef=n}get ssrId(){return this._declarationTContainer.tView?.ssrId||null}createEmbeddedView(e,t){return this.createEmbeddedViewImpl(e,t)}createEmbeddedViewImpl(e,t,n){return new Ep(qf(this._declarationLView,this._declarationTContainer,e,{embeddedViewInjector:t,dehydratedView:n}))}}return e})();function Op(){return kp(Po(),D())}function kp(e,t){return e.type&4?new Dp(t,e,wl(e,t)):null}function Ap(e,t,n,r,i){let a=e.data[t];if(a===null)a=jp(e,t,n,r,i),Jo()&&(a.flags|=32);else if(a.type&64){a.type=n,a.value=r,a.attrs=i;let e=Io();a.injectorIndex=e===null?-1:e.injectorIndex}return Lo(a,!0),a}function jp(e,t,n,r,i){let a=Fo(),o=Ro(),s=o?a:a&&a.parent,c=e.data[t]=Np(e,s,n,t,r,i);return Mp(e,c,a,o),c}function Mp(e,t,n,r){e.firstChild===null&&(e.firstChild=t),n!==null&&(r?n.child==null&&t.parent!==null&&(n.child=t):n.next===null&&(n.next=t,t.prev=n))}function Np(e,t,n,r,i,a){let o=t?t.injectorIndex:-1,s=0;return Ao()&&(s|=128),{type:n,index:r,insertBeforeIndex:null,injectorIndex:o,directiveStart:-1,directiveEnd:-1,directiveStylingLast:-1,componentOffset:-1,controlDirectiveIndex:-1,customControlIndex:-1,propertyBindings:null,flags:s,providerIndexes:0,value:i,namespace:gs(),attrs:a,mergedAttrs:null,localNames:null,initialInputs:null,inputs:null,hostDirectiveInputs:null,outputs:null,hostDirectiveOutputs:null,directiveToIndex:null,tView:null,next:null,prev:null,projectionNext:null,child:null,parent:t,projection:null,styles:null,stylesWithoutHost:null,residualStyles:void 0,classes:null,classesWithoutHost:null,residualClasses:void 0,classBindings:0,styleBindings:0}}function Pp(e){let t=e[6]??[],n=e[3][11],r=[];for(let e of t)e.data.di===void 0?Fp(e,n):r.push(e);e[6]=r}function Fp(e,t){let n=0,r=e.firstChild;if(r){let i=e.data.r;for(;nnull,Lp=()=>null;function Rp(e,t){return Ip(e,t)}function zp(e,t,n){return Lp(e,t,n)}var Bp=class{},Vp=class{},Hp=(()=>{class e{static ɵprov=di({token:e,providedIn:`root`,factory:()=>null})}return e})();function Up(e){return e.debugInfo?.className||e.type.name||null}var Wp={},Gp=class{injector;parentInjector;constructor(e,t){this.injector=e,this.parentInjector=t}get(e,t,n){let r=this.injector.get(e,Wp,n);return r!==Wp||t===Wp?r:this.parentInjector.get(e,t,n)}};function Kp(e,t,n){return e[t]=n}function qp(e,t){return e[t]}function Jp(e,t,n){if(n===Iu)return!1;let r=e[t];return!Object.is(r,n)&&(e[t]=n,!0)}function Yp(e,t,n,r){let i=Jp(e,t,n);return Jp(e,t+1,r)||i}function Xp(e,t,n,r,i){let a=Yp(e,t,n,r);return Jp(e,t+2,i)||a}function Zp(e,t,n,r,i,a){let o=Yp(e,t,n,r);return Yp(e,t+2,i,a)||o}function Qp(e,t,n){return function r(i){let a=r.__ngNativeEl__;a!==void 0&&ql(i,a),vp(Ja(e)?so(e.index,t):t,5);let o=t[8],s=$p(t,o,n,i),c=r.__ngNextListenerFn__;for(;c;)s=$p(t,o,c,i)&&s,c=c.__ngNextListenerFn__;return s}}function $p(e,t,n,r){let i=w(null);try{return Oc(Cc.OutputStart,t,n),n(r)!==!1}catch(t){return Vf(e,t),!1}finally{Oc(Cc.OutputEnd,t,n),w(i)}}function em(e,t,n,r,i,a,o,s){let c=Ya(e),l=!1,u=null;if(!r&&c&&(u=nm(t,n,a,e.index)),u!==null){let e=u.__ngLastListenerFn__||u;e.__ngNextListenerFn__=o,u.__ngLastListenerFn__=o,l=!0}else{let o=ro(e,n),c=r?r(o):o;r||(s.__ngNativeEl__=o);let l=i.listen(c,a,s);tm(a)||rm(r?t=>r(to(t[e.index])):e.index,t,n,a,s,l,!1)}return l}function tm(e){return e.startsWith(`animation`)||e.startsWith(`transition`)}function nm(e,t,n,r){let i=e.cleanup;if(i!=null)for(let e=0;er?n[r]:null}typeof a==`string`&&(e+=2)}return null}function rm(e,t,n,r,i,a,o){let s=t.firstCreatePass?So(t):null,c=xo(n),l=c.length;c.push(i,a),s&&s.push(r,e,l,(l+1)*(o?-1:1))}function im(e,t,n,r,i,a){let o=t[n],s=t[1],c=o[s.data[n].outputs[r]].subscribe(a);rm(e.index,s,t,i,a,c,!0)}var am=Symbol(`BINDING`),om=new vi(``);function sm(e,t,n){let r=n?e.styles:null,i=n?e.classes:null,a=0;if(t!==null)for(let e=0;e0&&(n.directiveToIndex=new Map);for(let c=0;c0;){let n=e[--t];if(typeof n==`number`&&n<0)return n}return 0}function xm(e,t,n){if(n){if(t.exportAs)for(let r=0;r{let[n,r,i]=e[t],a={propName:n,templateName:t,isSignal:(r&Sf.SignalBased)!==0};return i&&(a.transform=i),a})}function km(e){return Object.keys(e).map(t=>({propName:e[t],templateName:t}))}function Am(e,t,n){let r=t instanceof Aa?t:t?.injector;return r&&e.getStandaloneInjector!==null&&(r=e.getStandaloneInjector(r)||r),r?new Gp(n,r):n}function jm(e){let t=e.get(Vp,null);if(t===null)throw new T(407,!1);return{rendererFactory:t,sanitizer:e.get(Hp,null),changeDetectionScheduler:e.get(ac,null),ngReflect:!1,tracingService:e.get(_d,null,{optional:!0})}}function Mm(e,t,n){let r=Pm(e);return lu(t,r,r===`svg`?`svg`:r===`math`?eo:n)}function Nm(e){if((e&&`localName`in e&&typeof e.localName==`string`?e.localName:e?.tagName)?.toLowerCase()===`script`)throw new T(905,!1)}function Pm(e){return(e.selectors[0][0]||`div`).toLowerCase()}var Fm=class{componentDef;ngModule;selector;componentType;ngContentSelectors;isBoundToModule;cachedInputs=null;cachedOutputs=null;get inputs(){return this.cachedInputs??=Om(this.componentDef.inputs),this.cachedInputs}get outputs(){return this.cachedOutputs??=km(this.componentDef.outputs),this.cachedOutputs}constructor(e,t){this.componentDef=e,this.ngModule=t,this.componentType=e.type,this.selector=Pu(e.selectors),this.ngContentSelectors=e.ngContentSelectors??[],this.isBoundToModule=!!t}create(e,t,n,r,i,a,o){Oc(Cc.DynamicComponentStart);let s=w(null);try{let s=this.componentDef,c=Am(s,r||this.ngModule,e),l=jm(c),u=l.tracingService;return u&&u.componentCreate?u.componentCreate(Up(s),()=>this.createComponentRef(l,c,t,n,i,a,o)):this.createComponentRef(l,c,t,n,i,a,o)}finally{w(s)}}createComponentRef(e,t,n,r,i,a,o){let s=this.componentDef,c=Im(r,s,a,i),l=e.rendererFactory.createRenderer(null,s),u=r?Df(l,r,s.encapsulation,t):Mm(s,l,o??null);Nm(u);let d=t.get(om,null),f=Lm(u,()=>t.get(Cs,null)??Ul());d&&d.addHost(f);let p=a?.some(zm)||i?.some(e=>typeof e!=`function`&&e.bindings.some(zm)),m=gf(null,c,null,512|vf(s),null,null,e,l,t,null,Xl(u,t,!0));d&&Em&&f instanceof ShadowRoot&&vo(m,()=>{d.removeHost(f)}),m[27]=u,rs(m);let h=null;try{let e=Cm(27,m,2,`#host`,()=>c.directiveRegistry,!0,0);gu(l,u,e),Ll(u,m),Tf(c,m,e),$l(c,e,m),wm(c,e),n!==void 0&&Vm(e,this.ngContentSelectors,n),h=so(e.index,m),m[8]=h[8],Gf(c,m,null)}catch(e){throw h!==null&&Fl(h),Fl(m),e}finally{Oc(Cc.DynamicComponentEnd),cs()}return new Bm(this.componentType,m,!!p)}};function Im(e,t,n,r){let i=e?[`ng-version`,`22.1.7`]:Fu(t.selectors[0]),a=null,o=null,s=0;if(n)for(let e of n)s+=e[am].requiredVars,e.create&&(e.targetIdx=0,(a??=[]).push(e)),e.update&&(e.targetIdx=0,(o??=[]).push(e));if(r)for(let e=0;e{if(n&1&&e)for(let t of e)t.create();if(n&2&&t)for(let e of t)e.update()}}function zm(e){let t=e[am].kind;return t===`input`||t===`twoWay`}var Bm=class extends Bp{_rootLView;_hasInputBindings;instance;hostView;changeDetectorRef;componentType;location;previousInputValues=null;_tNode;constructor(e,t,n){super(),this._rootLView=t,this._hasInputBindings=n,this._tNode=io(t[1],27),this.location=wl(this._tNode,t),this.instance=so(this._tNode.index,t)[8],this.hostView=this.changeDetectorRef=new Ep(t,void 0),this.componentType=e}setInput(e,t){this._hasInputBindings;let n=this._tNode;if(this.previousInputValues??=new Map,this.previousInputValues.has(e)&&Object.is(this.previousInputValues.get(e),t))return;let r=this._rootLView;Hf(n,r[1],r,e,t),this.previousInputValues.set(e,t),vp(so(n.index,r),1)}get injector(){return new vl(this._tNode,this._rootLView)}destroy(){this.hostView.destroy()}onDestroy(e){this.hostView.onDestroy(e)}};function Vm(e,t,n){let r=e.projection=[];for(let e=0;e{class e{static __NG_ELEMENT_ID__=Um}return e})();function Um(){return qm(Po(),D())}var Wm=class e extends Hm{_lContainer;_hostTNode;_hostLView;constructor(e,t,n){super(),this._lContainer=e,this._hostTNode=t,this._hostLView=n}get element(){return wl(this._hostTNode,this._hostLView)}get injector(){return new vl(this._hostTNode,this._hostLView)}get parentInjector(){let e=ol(this._hostTNode,this._hostLView);if(Kc(e)){let t=Yc(e,this._hostLView),n=qc(e),r=t[1].data[n+8];return new vl(r,t)}return new vl(null,this._hostLView)}clear(){for(;this.length>0;)this.remove(this.length-1)}get(e){let t=Gm(this._lContainer);return t!==null&&t[e]||null}get length(){return this._lContainer.length-10}createEmbeddedView(e,t,n){let r,i;typeof n==`number`?r=n:n!=null&&(r=n.index,i=n.injector);let a=Rp(this._lContainer,e.ssrId),o=e.createEmbeddedViewImpl(t||{},i,a);return this.insertImpl(o,r,Jf(this._hostTNode,a)),o}createComponent(e,t,n,r,i,a,o){let s,c=t||{};s=c.index,n=c.injector,r=c.projectableNodes,i=c.environmentInjector||c.ngModuleRef,a=c.directives,o=c.bindings;let l=new Fm(Ei(e)),u=n||this.parentInjector;if(!i&&l.ngModule==null){let e=this.parentInjector.get(Aa,null);e&&(i=e)}let d=Ei(l.componentType??{}),f=Rp(this._lContainer,d?.id??null),p=f?.firstChild??null,m=l.create(u,r,p,i,a,o,this._getHostElementNamespace());return this.insertImpl(m.hostView,s,Jf(this._hostTNode,f)),m}_getHostElementNamespace(){if(this._hostTNode.type&2){let e=this._hostTNode.parent??this._hostLView[5];return e!==null&&e.type&2&&typeof e.value==`string`&&e.value.toLowerCase()===`foreignobject`?null:e?.namespace??null}return this._hostTNode.namespace}insert(e,t){return this.insertImpl(e,t,!0)}insertImpl(t,n,r){let i=t._lView;if(lo(i)){let n=this.indexOf(t);if(n!==-1)this.detach(n);else{let n=i[3],r=new e(n,n[5],n[3]);r.detach(r.indexOf(t))}}let a=this._adjustIndex(n),o=this._lContainer;return xp(o,i,a,r),t.attachToViewContainerRef(),na(Km(o),a,t),t}move(e,t){return this.insert(e,t)}indexOf(e){let t=Gm(this._lContainer);return t===null?-1:t.indexOf(e)}remove(e){let t=this._adjustIndex(e,-1),n=Cp(this._lContainer,t);n&&(ra(Km(this._lContainer),t),qd(n[1],n))}detach(e){let t=this._adjustIndex(e,-1),n=Cp(this._lContainer,t);return n&&ra(Km(this._lContainer),t)!=null?new Ep(n):null}_adjustIndex(e,t=0){return e??this.length+t}};function Gm(e){return e[8]}function Km(e){return e[8]||=[]}function qm(e,t){let n,r=t[e.index];return Ka(r)?n=r:(n=yp(r,t,null,e),t[e.index]=n,bf(t,n)),Ym(n,t,e,r),new Wm(n,e,t)}function Jm(e,t){let n=e[11],r=n.createComment(``),i=ro(t,e);return uu(n,n.parentNode(i),r,n.nextSibling(i),!1),r}var Ym=Qm,Xm=()=>!1;function Zm(e,t,n){return Xm(e,t,n)}function Qm(e,t,n,r){if(e[7])return;let i;i=n.type&8?to(r):Jm(t,n),e[7]=i}var $m=class e{queryList;matches=null;constructor(e){this.queryList=e}clone(){return new e(this.queryList)}setDirty(){this.queryList.setDirty()}},eh=class e{queries;constructor(e=[]){this.queries=e}createEmbeddedView(t){let n=t.queries;if(n!==null){let r=t.contentQueries===null?n.length:t.contentQueries[0],i=[];for(let e=0;e0)r.push(o[e/2]);else{let i=a[e+1],o=t[-n];for(let e=10;ee.trim())}function mh(e,t,n){e.queries===null&&(e.queries=new nh),e.queries.track(new rh(t,n))}function hh(e,t){return e.queries.getByIndex(t)}function gh(e,t){let n=e[1],r=hh(n,t);return r.crossesNgTemplate?lh(n,e,t,[]):ch(n,e,r,t)}function _h(e,t,n){let r,i=Mn(()=>{r._dirtyCounter();let n=xh(r,e);if(t&&n===void 0)throw new T(-951,!1);return n});return r=i[dn],r._dirtyCounter=A(0),r._flatValue=void 0,i}function vh(e){return _h(!0,!1,e)}function yh(e){return _h(!0,!0,e)}function bh(e,t){let n=e[dn];n._lView=D(),n._queryIndex=t,n._queryList=uh(n._lView,t),n._queryList.onDirty(()=>n._dirtyCounter.update(e=>e+1))}function xh(e,t){let n=e._lView,r=e._queryIndex;if(n===void 0||r===void 0||n[2]&4)return t?void 0:ua;let i=uh(n,r),a=gh(n,r);return i.reset(a,El),t?i.first:i._changesDetected||e._flatValue===void 0?e._flatValue=i.toArray():e._flatValue}function Sh(e){return!!e&&typeof e.then==`function`}function Ch(e){return!!e&&typeof e.subscribe==`function`}var wh=class{},Th=class extends wh{injector;instance=null;constructor(e){super();let t=new ja([...e.providers,{provide:wh,useValue:this}],e.parent||ka(),e.debugName,new Set([`environment`]));this.injector=t,e.runEnvironmentInitializers&&t.resolveInjectorInitializers()}destroy(){this.injector.destroy()}onDestroy(e){this.injector.onDestroy(e)}};function Eh(e,t,n=null){return new Th({providers:e,parent:t,debugName:n,runEnvironmentInitializers:!0}).injector}var Dh=(()=>{class e{_injector;cachedInjectors=new Map;constructor(e){this._injector=e}getOrCreateStandaloneInjector(e){if(!e.standalone)return null;if(!this.cachedInjectors.has(e)){let t=ga(!1,e.type),n=t.length>0?Eh([t],this._injector,``):null;this.cachedInjectors.set(e,n)}return this.cachedInjectors.get(e)}ngOnDestroy(){try{for(let e of this.cachedInjectors.values())e!==null&&e.destroy()}finally{this.cachedInjectors.clear()}}static ɵprov=di({token:e,providedIn:`environment`,factory:()=>new e(qi(Aa))})}return e})();function Oh(e){return Sc(()=>{let t=Nh(e),n={...t,decls:e.decls,vars:e.vars,template:e.template,consts:e.consts||null,ngContentSelectors:e.ngContentSelectors,onPush:e.changeDetection!==Al.Eager,directiveDefs:null,pipeDefs:null,dependencies:t.standalone&&e.dependencies||null,getStandaloneInjector:t.standalone?e=>e.get(Dh).getOrCreateStandaloneInjector(n):null,getExternalStyles:null,signals:e.signals??!1,data:e.data||{},encapsulation:e.encapsulation||eu.Emulated,styles:e.styles||ua,_:null,schemas:e.schemas||null,tView:null,id:``};t.standalone&&yd(`NgStandalone`),Ph(n);let r=e.dependencies;return n.directiveDefs=Fh(r,kh),n.pipeDefs=Fh(r,Oi),n.id=Ih(n),n})}function kh(e){return Ei(e)||Di(e)}function Ah(e,t){if(e==null)return la;let n={};for(let r in e)if(Object.hasOwn(e,r)){let i=e[r],a,o,s,c;Array.isArray(i)?(s=i[0],a=i[1],o=i[2]??a,c=i[3]||null):(a=i,o=i,s=Sf.None,c=null),n[a]=[r,s,c],t[a]=o}return n}function jh(e){if(e==null)return la;let t={};for(let n in e)Object.hasOwn(e,n)&&(t[e[n]]=n);return t}function Mh(e){return{type:e.type,name:e.name,factory:null,pure:e.pure!==!1,standalone:e.standalone??!0,onDestroy:e.type.prototype.ngOnDestroy||null}}function Nh(e){let t={};return{type:e.type,providersResolver:null,viewProvidersResolver:null,factory:null,hostBindings:e.hostBindings||null,hostVars:e.hostVars||0,hostAttrs:e.hostAttrs||null,contentQueries:e.contentQueries||null,declaredInputs:t,inputConfig:e.inputs||la,exportAs:e.exportAs||null,standalone:e.standalone??!0,signals:e.signals===!0,selectors:e.selectors||ua,viewQuery:e.viewQuery||null,features:e.features||null,setInput:null,resolveHostDirectives:null,hostDirectives:null,controlDef:null,signalFormsInputPresence:null,inputs:Ah(e.inputs,t),outputs:jh(e.outputs),debugInfo:null}}function Ph(e){e.features?.forEach(t=>t(e))}function Fh(e,t){return e?()=>{let n=typeof e==`function`?e():e,r=[];for(let e of n){let n=t(e);n!==null&&r.push(n)}return r}:null}function Ih(e){let t=0,n=typeof e.consts==`function`?``:e.consts,r=[e.selectors,e.ngContentSelectors,e.hostVars,e.hostAttrs,n,e.vars,e.decls,e.encapsulation,e.standalone,e.signals,e.exportAs,JSON.stringify(e.inputs),JSON.stringify(e.outputs),Object.getOwnPropertyNames(e.type.prototype),!!e.contentQueries,!!e.viewQuery];for(let e of r.join(`|`))t=Math.imul(31,t)+e.charCodeAt(0)<<0;return t+=2147483648,`c`+t}var Lh=new vi(``),Rh=(()=>{class e{resolve;reject;initialized=!1;done=!1;donePromise=new Promise((e,t)=>{this.resolve=e,this.reject=t});appInits=E(Lh,{optional:!0})??[];injector=E(Ss);constructor(){}runInitializers(){if(this.initialized)return;let e=[];for(let t of this.appInits){let n=Ha(this.injector,t);if(Sh(n))e.push(n);else if(Ch(n)){let t=new Promise((e,t)=>{n.subscribe({complete:e,error:t})});e.push(t)}}let t=()=>{this.done=!0,this.resolve()};Promise.all(e).then(()=>{t()}).catch(e=>{this.reject(e)}),e.length===0&&t(),this.initialized=!0}static ɵfac=function(t){return new(t||e)};static ɵprov=Sl({token:e,factory:e.ɵfac})}return e})();function zh(e,t,n,r,i,a,o,s){if(n.firstCreatePass){e.mergedAttrs=Wc(e.mergedAttrs,e.attrs);let t=e.tView=pf(2,e,i,a,o,n.directiveRegistry,n.pipeRegistry,null,n.schemas,n.consts,null);n.queries!==null&&(n.queries.template(n,e),t.queries=n.queries.embeddedTView(e))}s&&(e.flags|=s),Lo(e,!1);let c=Vh(n,t,e,r);vs()&&nf(n,t,c,e),Ll(c,t);let l=yp(c,t,c,e);t[r+27]=l,bf(t,l),Zm(l,e,t)}function Bh(e,t,n,r,i,a,o,s,c,l,u){let d=n+27,f;if(t.firstCreatePass){if(f=Ap(t,d,4,o||null,s||null),l!=null){let e=uo(t.consts,l);f.localNames=[];for(let t=0;t{throw new T(600,``)})}var Kh=10,qh=(()=>{class e{_runningTick=!1;_destroyed=!1;_destroyListeners=[];_views=[];internalErrorHandler=E(Ys);afterRenderManager=E(bd);zonelessEnabled=E(oc);rootEffectScheduler=E(cc);dirtyFlags=0;tracingSnapshot=null;allTestViews=new Set;autoDetectTestViews=new Set;includeAllTestViews=!1;afterTick=new Zr;get allViews(){return[...(this.includeAllTestViews?this.allTestViews:this.autoDetectTestViews).keys(),...this._views]}get destroyed(){return this._destroyed}componentTypes=[];components=[];internalPendingTask=E(Os);get isStable(){return this.internalPendingTask.hasPendingTasksObservable.pipe(ei(e=>!e))}constructor(){E(_d,{optional:!0})}whenStable(){let e;return new Promise(t=>{e=this.isStable.subscribe({next:e=>{e&&t()}})}).finally(()=>{e.unsubscribe()})}_injector=E(Aa);_rendererFactory=null;get injector(){return this._injector}bootstrap(e,t){return this.bootstrapImpl(e,t)}bootstrapImpl(e,t,n=Ss.NULL){return this._injector.get(Is).run(()=>{if(Oc(Cc.BootstrapComponentStart),!this._injector.get(Rh).done)throw new T(405,``);let r=Ei(e),i=this._injector.get(wh),a=new Fm(r,i);this.componentTypes.push(e);let{hostElement:o,directives:s,bindings:c}=Jh(t),l=o||a.selector,u=a.create(n,[],l,i.injector,s,c),d=u.location.nativeElement,f=u.injector.get(Uh,null);return f?.registerApplication(d),u.onDestroy(()=>{this.detachView(u.hostView),Yh(this.components,u),f?.unregisterApplication(d)}),this._loadComponent(u),Oc(Cc.BootstrapComponentEnd,u),u})}tick(){this.zonelessEnabled||(this.dirtyFlags|=1),this._tick()}_tick(){Oc(Cc.ChangeDetectionStart),this.tracingSnapshot===null?this.tickImpl():this.tracingSnapshot.run(gd.CHANGE_DETECTION,this.tickImpl)}tickImpl=()=>{if(this._runningTick)throw Oc(Cc.ChangeDetectionEnd),new T(101,!1);let e=w(null);try{this._runningTick=!0,this.synchronize()}finally{this._runningTick=!1,this.tracingSnapshot?.dispose(),this.tracingSnapshot=null,w(e),this.afterTick.next(),Oc(Cc.ChangeDetectionEnd)}};synchronize(){this._rendererFactory===null&&!this._injector.destroyed&&(this._rendererFactory=this._injector.get(Vp,null,{optional:!0}));let e=0;for(;this.dirtyFlags!==0&&e++ho(e))){this.dirtyFlags|=2;return}this.dirtyFlags&=-8}attachView(e){let t=e;this._views.push(t),t.attachToAppRef(this)}detachView(e){let t=e;Yh(this._views,t),t.detachFromAppRef()}_loadComponent(e){this.attachView(e.hostView);try{this.tick()}catch(e){this.internalErrorHandler(e)}this.components.push(e),this._injector.get(Wh,[]).forEach(t=>t(e))}ngOnDestroy(){if(!this._destroyed)try{this._destroyListeners.forEach(e=>e()),this._views.slice().forEach(e=>e.destroy())}finally{this._destroyed=!0,this._views=[],this._destroyListeners=[]}}onDestroy(e){return this._destroyListeners.push(e),()=>Yh(this._destroyListeners,e)}destroy(){if(this._destroyed)throw new T(406,!1);let e=this._injector;e.destroy&&!e.destroyed&&e.destroy()}get viewCount(){return this._views.length}static ɵfac=function(t){return new(t||e)};static ɵprov=Sl({token:e,factory:e.ɵfac})}return e})();function Jh(e){return e===void 0||typeof e==`string`||e instanceof Element?{hostElement:e}:e}function Yh(e,t){let n=e.indexOf(t);n>-1&&e.splice(n,1)}function M(e,t,n,r){let i=D();return Jp(i,Ko(),t)&&(No(),If(fs(),i,e,t,n,r)),M}function Xh(e){if(yd(`NgAnimateEnter`),!ed)return Xh;let t=D();if(td(t))return Xh;let n=Po(),r=t[9].get(Is);return hd(dd(t),n,()=>Zh(t,n,e,r)),Md(t[9]),Nd(t[9],dd(t)),Xh}function Zh(e,t,n,r){let i=ro(t,e),a=e[11],o=fd(n),s=[],c=!1,l=e=>{if(pd(e)!==i)return;let t=e instanceof AnimationEvent?`animationend`:`transitionend`;r.runOutsideAngular(()=>{a.listen(i,t,u)})},u=e=>{pd(e)===i&&(md(e,i)&&(c=!0),Qh(e,i,a))};if(o&&o.length>0){r.runOutsideAngular(()=>{s.push(a.listen(i,`animationstart`,l)),s.push(a.listen(i,`transitionstart`,l))}),nd(i,o,s);for(let e of o)a.addClass(i,e);r.runOutsideAngular(()=>{requestAnimationFrame(()=>{if(!c&&(Yu(i,ad,ed),!ad.has(i))){for(let e of o)a.removeClass(i,e);rd(i)}})})}}function Qh(e,t,n){let r=id.get(t);if(pd(e)===t&&r&&md(e,t)){e.stopPropagation();for(let e of r.classList)n.removeClass(t,e);rd(t)}}var $h=class{destroy(e){}updateValue(e,t){}swap(e,t){let n=Math.min(e,t),r=Math.max(e,t),i=this.detach(r);if(r-n>1){let e=this.detach(n);this.attach(n,i),this.attach(r,e)}else this.attach(n,i)}move(e,t){this.attach(t,this.detach(e))}};function eg(e,t,n,r,i){return e===n&&Object.is(t,r)?1:Object.is(i(e,t),i(n,r))?-1:0}function tg(e,t,n,r){let i,a,o=0,s=e.length-1;if(Array.isArray(t)){w(r);let c=t.length-1;for(w(null);o<=s&&o<=c;){let r=e.at(o),l=t[o],u=eg(o,r,o,l,n);if(u!==0){u<0&&e.updateValue(o,l),o++;continue}let d=e.at(s),f=t[c],p=eg(s,d,c,f,n);if(p!==0){p<0&&e.updateValue(s,f),s--,c--;continue}let m=n(o,r),h=n(s,d),g=n(o,l);if(Object.is(g,h)){let t=n(c,f);Object.is(t,m)?(e.swap(o,s),e.updateValue(s,f),c--,s--):e.move(s,o),e.updateValue(o,l),o++;continue}if(i??=new ag,a??=ig(e,o,s,n),ng(e,i,o,g))e.updateValue(o,l),o++,s++;else if(a.has(g))i.set(m,e.detach(o)),s--;else{let n=e.create(o,t[o]);e.attach(o,n),o++,s++}}for(;o<=c;)rg(e,i,n,o,t[o]),o++}else if(t!=null){w(r);let c=t[Symbol.iterator]();w(null);let l=c.next();for(;!l.done&&o<=s;){let t=e.at(o),r=l.value,u=eg(o,t,o,r,n);if(u!==0)u<0&&e.updateValue(o,r),o++,l=c.next();else{i??=new ag,a??=ig(e,o,s,n);let u=n(o,r);if(ng(e,i,o,u))e.updateValue(o,r),o++,s++,l=c.next();else if(!a.has(u))e.attach(o,e.create(o,r)),o++,s++,l=c.next();else{let r=n(o,t);i.set(r,e.detach(o)),s--}}}for(;!l.done;)rg(e,i,n,e.length,l.value),l=c.next()}for(;o<=s;)e.destroy(e.detach(s--));i?.forEach(t=>{e.destroy(t)})}function ng(e,t,n,r){return t!==void 0&&t.has(r)?(e.attach(n,t.get(r)),t.delete(r),!0):!1}function rg(e,t,n,r,i){if(ng(e,t,r,n(r,i)))e.updateValue(r,i);else{let t=e.create(r,i);e.attach(r,t)}}function ig(e,t,n,r){let i=new Set;for(let a=t;a<=n;a++)i.add(r(a,e.at(a)));return i}var ag=class{kvMap=new Map;_vMap=void 0;has(e){return this.kvMap.has(e)}delete(e){if(!this.has(e))return!1;let t=this.kvMap.get(e);return this._vMap!==void 0&&this._vMap.has(t)?(this.kvMap.set(e,this._vMap.get(t)),this._vMap.delete(t)):this.kvMap.delete(e),!0}get(e){return this.kvMap.get(e)}set(e,t){if(this.kvMap.has(e)){let n=this.kvMap.get(e);this._vMap===void 0&&(this._vMap=new Map);let r=this._vMap;for(;r.has(n);)n=r.get(n);r.set(n,t)}else this.kvMap.set(e,t)}forEach(e){for(let[t,n]of this.kvMap)if(e(n,t),this._vMap!==void 0){let r=this._vMap;for(;r.has(n);)n=r.get(n),e(n,t)}}};function N(e,t,n,r,i,a,o,s){yd(`NgControlFlow`);let c=D(),l=No();return Bh(c,l,e,t,n,r,i,uo(l.consts,a),256,o,s),og}function og(e,t,n,r,i,a,o,s){yd(`NgControlFlow`);let c=D(),l=No();return Bh(c,l,e,t,n,r,i,uo(l.consts,a),512,o,s),og}function P(e,t){yd(`NgControlFlow`);let n=D(),r=Ko(),i=n[r]===Iu?-1:n[r],a=i===-1?void 0:fg(n,27+i);if(Jp(n,r,e)){let r=w(null);try{if(a!==void 0&&Sp(a,0),e!==-1){let r=27+e,i=fg(n,r),a=_g(n[1],r),o=zp(i,a,n);xp(i,qf(n,a,t,{dehydratedView:o}),0,Jf(a,o))}}finally{w(r)}}else if(a!==void 0){let e=bp(a,0);e!==void 0&&(e[8]=t)}}var sg=class{lContainer;$implicit;$index;constructor(e,t,n){this.lContainer=e,this.$implicit=t,this.$index=n}get $count(){return this.lContainer.length-10}};function cg(e){return e}function lg(e,t){return t}var ug=class{hasEmptyBlock;trackByFn;liveCollection;constructor(e,t,n){this.hasEmptyBlock=e,this.trackByFn=t,this.liveCollection=n}};function F(e,t,n,r,i,a,o,s,c,l,u,d,f){yd(`NgControlFlow`);let p=D(),m=No(),h=c!==void 0,g=D(),_=new ug(h,s?o.bind(g[15][8]):o);g[27+e]=_,Bh(p,m,e+1,t,n,r,i,uo(m.consts,a),256),h&&Bh(p,m,e+2,c,l,u,d,uo(m.consts,f),512)}var dg=class extends $h{lContainer;hostLView;templateTNode;operationsCounter=void 0;needsIndexUpdate=!1;constructor(e,t,n){super(),this.lContainer=e,this.hostLView=t,this.templateTNode=n}get length(){return this.lContainer.length-10}at(e){return this.getLView(e)[8].$implicit}attach(e,t){let n=t[6];this.needsIndexUpdate||=e!==this.length,xp(this.lContainer,t,e,Jf(this.templateTNode,n)),pg(this.lContainer,e)}detach(e){return this.needsIndexUpdate||=e!==this.length-1,mg(this.lContainer,e),hg(this.lContainer,e)}create(e,t){let n=Rp(this.lContainer,this.templateTNode.tView.ssrId);return qf(this.hostLView,this.templateTNode,new sg(this.lContainer,t,e),{dehydratedView:n})}destroy(e){qd(e[1],e)}updateValue(e,t){this.getLView(e)[8].$implicit=t}reset(){this.needsIndexUpdate=!1}updateIndexes(){if(this.needsIndexUpdate)for(let e=0;e0){let e=n[9];Ad(e,r),Zu.delete(n[19]),r.detachedLeaveAnimationFns=void 0}}function mg(e,t){if(e.length<=10)return;let n=e[10+t],r=n?n[26]:void 0;r&&r.leave&&r.leave.size>0&&(r.detachedLeaveAnimationFns=[])}function hg(e,t){return Cp(e,t)}function gg(e,t){return bp(e,t)}function _g(e,t){return io(e,t)}function L(e,t,n){let r=D();return Jp(r,Ko(),t)&&(No(),kf(fs(),r,e,t,r[11],n)),L}function vg(e,t,n,r,i){Hf(t,e,n,i?`class`:`style`,r)}function R(e,t,n,r){let i=D(),a=i[1],o=e+27,s=a.firstCreatePass?Cm(o,i,2,t,Ff,ko(),n,r):a.data[o];if(Ja(s)){let n=i[10].tracingService;if(n&&n.componentCreate){let o=a.data[s.directiveStart+s.componentOffset];return n.componentCreate(Up(o),()=>(yg(e,t,i,s,r),R))}}return yg(e,t,i,s,r),R}function yg(e,t,n,r,i){if(zf(r,n,e,t,bg),Ya(r)){let e=n[1];Tf(e,n,r),$l(e,r,n)}i!=null&&Ef(n,r)}function z(){let e=No(),t=Bf(Po());return e.firstCreatePass&&wm(e,t),jo(t)&&Mo(),Oo(),t.classesWithoutHost!=null&&zc(t)&&vg(e,t,D(),t.classesWithoutHost,!0),t.stylesWithoutHost!=null&&Bc(t)&&vg(e,t,D(),t.stylesWithoutHost,!1),z}function B(e,t,n,r){return R(e,t,n,r),z(),B}function V(e,t,n,r){let i=D(),a=i[1],o=e+27,s=a.firstCreatePass?Tm(o,a,2,t,n,r):a.data[o];return zf(s,i,e,t,bg),r!=null&&Ef(i,s),V}function H(){return jo(Bf(Po()))&&Mo(),Oo(),H}function U(e,t,n,r){return V(e,t,n,r),H(),U}var bg=(e,t,n,r,i)=>(ys(!0),lu(t[11],r,gs()));function W(){return D()}function xg(e,t,n){let r=D();return Jp(r,Ko(),t)&&(No(),Af(fs(),r,e,t,r[11],n)),xg}var Sg=void 0;function Cg(e){let t=Math.floor(Math.abs(e)),n=e.toString().replace(/^[^.]*\.?/,``).length;return t===1&&n===0?1:5}var wg=[`en`,[[`a`,`p`],[`AM`,`PM`]],[[`AM`,`PM`]],[[`S`,`M`,`T`,`W`,`T`,`F`,`S`],[`Sun`,`Mon`,`Tue`,`Wed`,`Thu`,`Fri`,`Sat`],[`Sunday`,`Monday`,`Tuesday`,`Wednesday`,`Thursday`,`Friday`,`Saturday`],[`Su`,`Mo`,`Tu`,`We`,`Th`,`Fr`,`Sa`]],Sg,[[`J`,`F`,`M`,`A`,`M`,`J`,`J`,`A`,`S`,`O`,`N`,`D`],[`Jan`,`Feb`,`Mar`,`Apr`,`May`,`Jun`,`Jul`,`Aug`,`Sep`,`Oct`,`Nov`,`Dec`],[`January`,`February`,`March`,`April`,`May`,`June`,`July`,`August`,`September`,`October`,`November`,`December`]],Sg,[[`B`,`A`],[`BC`,`AD`],[`Before Christ`,`Anno Domini`]],0,[6,0],[`M/d/yy`,`MMM d, y`,`MMMM d, y`,`EEEE, MMMM d, y`],[`h:mm a`,`h:mm:ss a`,`h:mm:ss a z`,`h:mm:ss a zzzz`],[`{1}, {0}`,Sg,Sg,Sg],[`.`,`,`,`;`,`%`,`+`,`-`,`E`,`×`,`‰`,`∞`,`NaN`,`:`],[`#,##0.###`,`#,##0%`,`¤#,##0.00`,`#E0`],`USD`,`$`,`US Dollar`,{},`ltr`,Cg],Tg=Object.create(null);function Eg(e){let t=kg(e),n=Dg(t);if(n)return n;let r=t.split(`-`)[0];if(n=Dg(r),n)return n;if(r===`en`)return wg;throw new T(701,!1)}function Dg(e){if(!(e in Tg)){let t=Hi.ng&&Hi.ng.common&&Hi.ng.common.locales&&Hi.ng.common.locales[e];return t!==void 0&&(Tg[e]=t),t}return Tg[e]}var Og={LocaleId:0,DayPeriodsFormat:1,DayPeriodsStandalone:2,DaysFormat:3,DaysStandalone:4,MonthsFormat:5,MonthsStandalone:6,Eras:7,FirstDayOfWeek:8,WeekendRange:9,DateFormat:10,TimeFormat:11,DateTimeFormat:12,NumberSymbols:13,NumberFormats:14,CurrencyCode:15,CurrencySymbol:16,CurrencyName:17,Currencies:18,Directionality:19,PluralCase:20,ExtraData:21};function kg(e){return e.toLowerCase().replace(/_/g,`-`)}var Ag=`en-US`;function jg(e){typeof e==`string`&&e.toLowerCase().replace(/_/g,`-`)}function G(e,t,n){let r=D(),i=No(),a=Po();return Mg(i,r,r[11],a,e,t,n),G}function K(e,t,n){let r=D(),i=No(),a=Po();return(a.type&3||n)&&em(a,i,r,n,r[11],e,t,Qp(a,r,t)),K}function Mg(e,t,n,r,i,a,o){let s=!0,c=null;if((r.type&3||o)&&(c??=Qp(r,t,a),em(r,e,t,o,n,i,a,c)&&(s=!1)),s){let e=r.outputs?.[i],n=r.hostDirectiveOutputs?.[i];if(n&&n.length)for(let e=0;e>17&32767}function Rg(e){return(e&2)==2}function zg(e,t){return e&131071|t<<17}function Bg(e){return e|2}function Vg(e){return(e&131068)>>2}function Hg(e,t){return e&-131069|t<<2}function Ug(e){return(e&1)==1}function Wg(e){return e|1}function Gg(e,t,n,r,i,a){let o=a?t.classBindings:t.styleBindings,s=Lg(o),c=Vg(o);e[r]=n;let l=!1,u;if(Array.isArray(n)){let e=n;u=e[1],(u===null||sa(e,u)>0)&&(l=!0)}else u=n;if(i){if(c!==0){let t=Lg(e[s+1]);e[r+1]=Ig(t,s),t!==0&&(e[t+1]=Hg(e[t+1],r)),e[s+1]=zg(e[s+1],r)}else e[r+1]=Ig(s,0),s!==0&&(e[s+1]=Hg(e[s+1],r)),s=r}else e[r+1]=Ig(c,0),s===0?s=r:e[c+1]=Hg(e[c+1],r),c=r;l&&(e[r+1]=Bg(e[r+1])),qg(e,u,r,!0),qg(e,u,r,!1),Kg(t,u,e,r,a),o=Ig(s,c),a?t.classBindings=o:t.styleBindings=o}function Kg(e,t,n,r,i){let a=i?e.residualClasses:e.residualStyles;a!=null&&typeof t==`string`&&sa(a,t)>=0&&(n[r+1]=Wg(n[r+1]))}function qg(e,t,n,r){let i=e[n+1],a=t===null,o=r?Lg(i):Vg(i),s=!1;for(;o!==0&&(s===!1||a);){let n=e[o],i=e[o+1];Jg(n,t)&&(s=!0,e[o+1]=r?Wg(i):Bg(i)),o=r?Lg(i):Vg(i)}s&&(e[n+1]=r?Bg(i):Wg(i))}function Jg(e,t){return e===null||t==null||(Array.isArray(e)?e[1]:e)===t?!0:Array.isArray(e)&&typeof t==`string`?sa(e,t)>=0:!1}var Yg={textEnd:0,key:0,keyEnd:0,value:0,valueEnd:0};function Xg(e){return e.substring(Yg.key,Yg.keyEnd)}function Zg(e){return $g(e),Qg(e,e_(e,0,Yg.textEnd))}function Qg(e,t){let n=Yg.textEnd;return n===t?-1:(t=Yg.keyEnd=t_(e,Yg.key=t,n),e_(e,t,n))}function $g(e){Yg.key=0,Yg.keyEnd=0,Yg.value=0,Yg.valueEnd=0,Yg.textEnd=e.length}function e_(e,t,n){for(;t32;)t++;return t}function n_(e,t,n){return a_(e,t,n,!1),n_}function J(e,t){return a_(e,t,null,!0),J}function r_(e){o_(g_,i_,e,!0)}function i_(e,t){for(let n=Zg(t);n>=0;n=Qg(t,n))aa(e,Xg(t),!0)}function a_(e,t,n,r){let i=D(),a=No(),o=qo(2);if(a.firstUpdatePass&&c_(a,e,o,r),t!==Iu&&Jp(i,o,t)){let s=a.data[us()];v_(a,s,i,i[11],e,i[o+1]=x_(t,n),r,o)}}function o_(e,t,n,r){let i=No(),a=qo(2);i.firstUpdatePass&&c_(i,null,a,r);let o=D();if(n!==Iu&&Jp(o,a,n)){let s=i.data[us()];if(S_(s,r)&&!s_(i,a)){let e=r?s.classesWithoutHost:s.stylesWithoutHost;e!==null&&(n=oi(e,n||``)),vg(i,s,o,n,r)}else __(i,s,o,o[11],o[a+1],o[a+1]=h_(e,t,n),r,a)}}function s_(e,t){return t>=e.expandoStartIndex}function c_(e,t,n,r){let i=e.data;if(i[n+1]===null){let a=i[us()],o=s_(e,n);S_(a,r)&&t===null&&!o&&(t=!1),t=l_(i,a,t,r),Gg(i,a,t,n,o,r)}}function l_(e,t,n,r){let i=Qo(e),a=r?t.residualClasses:t.residualStyles;if(i===null)(r?t.classBindings:t.styleBindings)===0&&(n=p_(null,e,t,n,r),n=m_(n,t.attrs,r),a=null);else{let o=t.directiveStylingLast;if(o===-1||e[o]!==i){if(n=p_(i,e,t,n,r),a===null){let n=u_(e,t,r);n!==void 0&&Array.isArray(n)&&(n=p_(null,e,t,n[1],r),n=m_(n,t.attrs,r),d_(e,t,r,n))}else a=f_(e,t,r)}}return a!==void 0&&(r?t.residualClasses=a:t.residualStyles=a),n}function u_(e,t,n){let r=n?t.classBindings:t.styleBindings;if(Vg(r)!==0)return e[Lg(r)]}function d_(e,t,n,r){let i=n?t.classBindings:t.styleBindings;e[Lg(i)]=r}function f_(e,t,n){let r,i=t.directiveEnd;for(let a=1+t.directiveStylingLast;a0;){let t=e[i],a=Array.isArray(t),c=a?t[1]:t,l=c===null,u=n[i+1];u===Iu&&(u=l?ua:void 0);let d=l?oa(u,r):c===r?u:void 0;if(a&&!b_(d)&&(d=oa(t,r)),b_(d)&&(s=d,o))return s;let f=e[i+1];i=o?Lg(f):Vg(f)}if(t!==null){let e=a?t.residualClasses:t.residualStyles;e!=null&&(s=oa(e,r))}return s}function b_(e){return e!==void 0}function x_(e,t){return e==null||e===``||(typeof t==`string`?e=nu(e)+t:typeof e==`object`&&(e=ai(nu(e)))),e}function S_(e,t){return!!(e.flags&(t?8:16))}function Y(e,t=``){let n=D(),r=No(),i=e+27,a=r.firstCreatePass?Ap(r,i,1,t,null):r.data[i],o=C_(r,n,a,t);n[i]=o,vs()&&nf(r,n,o,a),Lo(a,!1)}var C_=(e,t,n,r)=>(ys(!0),su(t[11],r));function w_(e,t,n,r=``){return Jp(e,Ko(),n)?t+Ai(n)+r:Iu}function T_(e,t,n,r,i,a=``){let o=Yp(e,Wo(),n,i);return qo(2),o?t+Ai(n)+r+Ai(i)+a:Iu}function E_(e,t,n,r,i,a,o,s=``){let c=Xp(e,Wo(),n,i,o);return qo(3),c?t+Ai(n)+r+Ai(i)+a+Ai(o)+s:Iu}function D_(e,t,n,r,i,a,o,s,c,l=``){let u=Zp(e,Wo(),n,i,o,c);return qo(4),u?t+Ai(n)+r+Ai(i)+a+Ai(o)+s+Ai(c)+l:Iu}function X(e){return Z(``,e),X}function Z(e,t,n){let r=D(),i=w_(r,e,t,n);return i!==Iu&&j_(r,us(),i),Z}function O_(e,t,n,r,i){let a=D(),o=T_(a,e,t,n,r,i);return o!==Iu&&j_(a,us(),o),O_}function k_(e,t,n,r,i,a,o){let s=D(),c=E_(s,e,t,n,r,i,a,o);return c!==Iu&&j_(s,us(),c),k_}function A_(e,t,n,r,i,a,o,s,c){let l=D(),u=D_(l,e,t,n,r,i,a,o,s,c);return u!==Iu&&j_(l,us(),u),A_}function j_(e,t,n){let r=no(t,e);cu(e[11],r,n)}function M_(e,t,n){yc(t)&&(t=t());let r=D();return Jp(r,Ko(),t)&&(No(),kf(fs(),r,e,t,r[11],n)),M_}function N_(e,t){let n=yc(e);return n&&e.set(t),n}function P_(e,t){let n=D(),r=No(),i=Po();return Mg(r,n,n[11],i,e,t),P_}var F_={};function I_(e){yd(`NgLet`);let t=No(),n=D(),r=e+27;return Lo(Ap(t,r,128,null,null),!1),oo(t,n,r,F_),I_}function L_(e){return oo(No(),D(),us(),e),e}function R_(e){let t=ao(Bo(),27+e);if(t===F_)throw new T(314,!1);return t}function z_(e,t){let n=Uo()+e,r=D();return r[n]===Iu?Kp(r,n,t()):qp(r,n)}function B_(e,t){let n=e[t];return n===Iu?void 0:n}function V_(e,t,n,r,i,a){let o=t+n;return Jp(e,o,i)?Kp(e,o+1,a?r.call(a,i):r(i)):B_(e,o+1)}function H_(e,t,n,r,i,a,o){let s=t+n;return Yp(e,s,i,a)?Kp(e,s+2,o?r.call(o,i,a):r(i,a)):B_(e,s+2)}function U_(e,t){let n=No(),r,i=e+27;n.firstCreatePass?(r=W_(t,n.pipeRegistry),n.data[i]=r,r.onDestroy&&(n.destroyHooks??=[]).push(i,r.onDestroy)):r=n.data[i];let a=r.factory||(r.factory=Qi(r.type,!0)),o=Bi(cm);try{let e=Zc(!1),t=a();return Zc(e),oo(n,D(),i,t),t}finally{Bi(o)}}function W_(e,t){if(t)for(let n=t.length-1;n>=0;n--){let r=t[n];if(e===r.name)return r}}function G_(e,t,n){let r=e+27,i=D(),a=ao(i,r);return q_(i,r)?V_(i,Uo(),t,a.transform,n,a):a.transform(n)}function K_(e,t,n,r){let i=e+27,a=D(),o=ao(a,i);return q_(a,i)?H_(a,Uo(),t,o.transform,n,r,o):o.transform(n,r)}function q_(e,t){return e[1].data[t].pure}var J_=(()=>{class e{applicationErrorHandler=E(Ys);appRef=E(qh);taskService=E(Os);ngZone=E(Is);zonelessEnabled=E(oc);tracing=E(_d,{optional:!0});zoneIsDefined=typeof Zone<`u`&&!!Zone.root.run;schedulerTickApplyArgs=[{data:{__scheduler_tick__:!0}}];subscriptions=new hr;angularZoneId=this.zoneIsDefined?this.ngZone._inner?.get(Ps):null;scheduleInRootZone=!this.zonelessEnabled&&this.zoneIsDefined&&(E(sc,{optional:!0})??!1);cancelScheduledCallback=null;useMicrotaskScheduler=!1;runningTick=!1;pendingRenderTaskId=null;constructor(){this.subscriptions.add(this.appRef.afterTick.subscribe(()=>{let e=this.taskService.add();if(!this.runningTick&&(this.cleanup(),!this.zonelessEnabled||this.appRef.includeAllTestViews)){this.taskService.remove(e);return}this.switchToMicrotaskScheduler(),this.taskService.remove(e)})),this.subscriptions.add(this.ngZone.onUnstable.subscribe(()=>{this.runningTick||this.cleanup()}))}switchToMicrotaskScheduler(){this.ngZone.runOutsideAngular(()=>{let e=this.taskService.add();this.useMicrotaskScheduler=!0,queueMicrotask(()=>{this.useMicrotaskScheduler=!1,this.taskService.remove(e)})})}notify(e){if(!this.zonelessEnabled&&e===5)return;switch(e){case 0:case 2:this.appRef.dirtyFlags|=2;break;case 3:case 4:case 5:case 1:this.appRef.dirtyFlags|=4;break;case 6:this.appRef.dirtyFlags|=2;break;case 12:this.appRef.dirtyFlags|=16;break;case 13:this.appRef.dirtyFlags|=2;break;case 11:break;default:this.appRef.dirtyFlags|=8}if(this.appRef.tracingSnapshot=this.tracing?.snapshot(this.appRef.tracingSnapshot)??null,!this.shouldScheduleTick())return;let t=this.useMicrotaskScheduler?Ms:js;this.pendingRenderTaskId=this.taskService.add(),this.cancelScheduledCallback=this.scheduleInRootZone?Zone.root.run(()=>t(()=>this.tick())):this.ngZone.runOutsideAngular(()=>t(()=>this.tick()))}shouldScheduleTick(){return!(this.appRef.destroyed||this.pendingRenderTaskId!==null||this.runningTick||this.appRef._runningTick||!this.zonelessEnabled&&this.zoneIsDefined&&Zone.current.get(`isAngularZone_ID`+this.angularZoneId))}tick(){if(this.runningTick||this.appRef.destroyed)return;if(this.appRef.dirtyFlags===0){this.cleanup();return}!this.zonelessEnabled&&this.appRef.dirtyFlags&7&&(this.appRef.dirtyFlags|=1);let e=this.taskService.add();try{this.ngZone.run(()=>{this.runningTick=!0,this.appRef._tick()},void 0,this.schedulerTickApplyArgs)}catch(e){this.applicationErrorHandler(e)}finally{this.taskService.remove(e),this.cleanup()}}ngOnDestroy(){this.subscriptions.unsubscribe(),this.cleanup()}cleanup(){if(this.runningTick=!1,this.cancelScheduledCallback?.(),this.cancelScheduledCallback=null,this.pendingRenderTaskId!==null){let e=this.pendingRenderTaskId;this.pendingRenderTaskId=null,this.taskService.remove(e)}}static ɵfac=function(t){return new(t||e)};static ɵprov=Sl({token:e,factory:e.ɵfac})}return e})();function Y_(){return[{provide:ac,useExisting:J_},{provide:Is,useClass:Ws},{provide:oc,useValue:!0}]}function X_(){return typeof $localize<`u`&&$localize.locale||`en-US`}var Z_=new vi(``,{factory:()=>E(Z_,{optional:!0,skipSelf:!0})||X_()}),Q_=class{destroyed=!1;listeners=null;errorHandler=E(Js,{optional:!0});isEmitting=!1;hasNullListeners=!1;destroyRef=E(ws);constructor(){this.destroyRef.onDestroy(()=>{this.destroyed=!0,this.listeners=null})}subscribe(e){if(this.destroyed)throw new T(953,!1);return(this.listeners??=[]).push(e),{unsubscribe:()=>{let t=this.listeners?this.listeners.indexOf(e):-1;t>-1&&(this.isEmitting?(this.hasNullListeners=!0,this.listeners[t]=null):this.listeners.splice(t,1))}}}emit(e){if(this.destroyed){console.warn(ri(953,!1));return}if(this.listeners===null)return;this.isEmitting=!0;let t=w(null);try{for(let t of this.listeners)try{t!==null&&t(e)}catch(e){this.errorHandler?.handleError(e)}}finally{this.hasNullListeners&&(this.hasNullListeners=!1,this.listeners&&$_(this.listeners)),w(t),this.isEmitting=!1}}};function $_(e){let t=e.length-1;for(;t>-1;)e[t]===null&&e.splice(t,1),t--}function Q(e,t){return Mn(e,t?.equal)}function ev(e){return ar(e)}(class e extends Error{_brand;constructor(e){super(e)}static IDLE=new e(`IDLE`);static LOADING=new e(`LOADING`)});var tv=e=>e;function nv(e,t){return typeof e==`function`?rv(tr(e,tv,t?.equal),t?.debugName,t?.set):rv(tr(e.source,e.computation,e.equal),e.debugName,e.set)}function rv(e,t,n){let r=e[dn],i=e;if(n!==void 0){let t=e=>nr(r,e);i.set=e=>n(e,t),i.update=r=>n(r(ev(e)),t)}else i.set=e=>nr(r,e),i.update=e=>rr(r,e);return i.asReadonly=Zs.bind(e),i}function iv(e,t){let n=Object.create(xc);n.value=e,n.transformFn=t?.transform;function r(){if(mn(n),n.value===bc)throw new T(-950,null);return n.value}return r[dn]=n,r}function av(e){return new Q_}function ov(e,t){return iv(e,t)}function sv(e){return iv(bc,e)}var $=(ov.required=sv,ov);function cv(e,t){let n=Object.create(xc),r=new Q_;n.value=e;function i(){return mn(n),lv(n.value),n.value}return i[dn]=n,i.asReadonly=Zs.bind(i),i.set=e=>{n.equal(n.value,e)||(Wn(n,e),r.emit(e))},i.update=e=>{lv(n.value),i.set(e(n.value))},i.subscribe=r.subscribe.bind(r),i.destroyRef=r.destroyRef,i}function lv(e){if(e===bc)throw new T(952,!1)}function uv(e,t){return cv(e,t)}function dv(e){return cv(bc,e)}var fv=(uv.required=dv,uv);function pv(e,t){return vh(t)}function mv(e,t){return yh(t)}var hv=(pv.required=mv,pv),gv=new vi(``),_v=new vi(``);function vv(e){return!e.moduleRef}function yv(e){let t=vv(e)?e.r3Injector:e.moduleRef.injector,n=t.get(Is);return n.run(()=>{vv(e)?e.r3Injector.resolveInjectorInitializers():e.moduleRef.resolveInjectorInitializers();let r=t.get(Ys),i;if(n.runOutsideAngular(()=>{i=n.onError.subscribe({next:r})}),vv(e)){let n=()=>t.destroy(),r=e.platformInjector.get(gv);r.add(n),t.onDestroy(()=>{i.unsubscribe(),r.delete(n)})}else{let t=()=>e.moduleRef.destroy(),n=e.platformInjector.get(gv);n.add(t),e.moduleRef.onDestroy(()=>{Yh(e.allPlatformModules,e.moduleRef),i.unsubscribe(),n.delete(t)})}return xv(r,n,()=>{let n=t.get(Os),r=n.add(),i=t.get(Rh);return i.runInitializers(),i.donePromise.then(()=>{if(jg(t.get(Z_,Ag)||`en-US`),!t.get(_v,!0))return vv(e)?t.get(qh):(e.allPlatformModules.push(e.moduleRef),e.moduleRef);if(vv(e)){let n=t.get(qh);return e.rootComponent!==void 0&&n.bootstrap(e.rootComponent),n}return bv?.(e.moduleRef,e.allPlatformModules),e.moduleRef}).finally(()=>void n.remove(r))})})}var bv;function xv(e,t,n){try{let r=n();return Sh(r)?r.catch(n=>{throw t.runOutsideAngular(()=>e(n)),n}):r}catch(n){throw t.runOutsideAngular(()=>e(n)),n}}var Sv=null;function Cv(e=[],t){return Ss.create({name:t,providers:[{provide:Ta,useValue:`platform`},{provide:gv,useValue:new Set([()=>Sv=null])},...e]})}function wv(e=[]){if(Sv)return Sv;let t=Cv(e);return Sv=t,Gh(),Tv(t),t}function Tv(e){let t=e.get(ec,null);Ha(e,()=>{t?.forEach(e=>e())})}function Ev(e){let{rootComponent:t,appProviders:n,platformProviders:r,platformRef:i}=e;Oc(Cc.BootstrapApplicationStart);try{let e=i?.injector??wv(r);return yv({r3Injector:new Th({providers:[Y_(),Xs,...n||[]],parent:e,debugName:``,runEnvironmentInitializers:!1}).injector,platformInjector:e,rootComponent:t})}catch(e){return Promise.reject(e)}finally{Oc(Cc.BootstrapApplicationEnd)}}var Dv=Symbol(`NOT_SET`),Ov=new Set,kv={...Kn,kind:`afterRenderEffectPhase`,consumerIsAlwaysLive:!0,consumerAllowSignalWrites:!0,value:Dv,cleanup:null,consumerMarkedDirty(){if(this.sequence.impl.executing){if(this.sequence.lastPhase===null||this.sequence.lastPhase(mn(r),r.value),r.signal[dn]=r,r.registerCleanupFn=e=>(r.cleanup??=new Set).add(e),this.nodes[e]=r,this.hooks[e]=e=>r.phaseFn(e)}}afterRun(){super.afterRun(),this.lastPhase=null}destroy(){if(this.onDestroyFns!==null)for(let e of this.onDestroyFns)e();super.destroy();for(let e of this.nodes)if(e)try{for(let t of e.cleanup??Ov)t()}finally{En(e)}}};function jv(e,t){let n=t?.injector??E(Ss),r=n.get(ac),i=n.get(bd),a=n.get(_d,null,{optional:!0});i.impl??=n.get(Sd);let o=e;typeof o==`function`&&(o={mixedReadWrite:e});let s=n.get(rc,null,{optional:!0}),c=new Av(i.impl,[o.earlyRead,o.write,o.mixedReadWrite,o.read],s?.view,r,n,a?.snapshot(null));return i.impl.register(c),c}var Mv=null;function Nv(){return Mv}function Pv(e){Mv??=e}var Fv=class{},Iv=(function(e){return e[e.Format=0]=`Format`,e[e.Standalone=1]=`Standalone`,e})(Iv||{}),Lv=(function(e){return e[e.Narrow=0]=`Narrow`,e[e.Abbreviated=1]=`Abbreviated`,e[e.Wide=2]=`Wide`,e[e.Short=3]=`Short`,e})(Lv||{}),Rv=(function(e){return e[e.Short=0]=`Short`,e[e.Medium=1]=`Medium`,e[e.Long=2]=`Long`,e[e.Full=3]=`Full`,e})(Rv||{}),zv={Decimal:0,Group:1,List:2,PercentSign:3,PlusSign:4,MinusSign:5,Exponential:6,SuperscriptingExponent:7,PerMille:8,Infinity:9,NaN:10,TimeSeparator:11,CurrencyDecimal:12,CurrencyGroup:13};function Bv(e){return Eg(e)[Og.LocaleId]}function Vv(e,t,n){let r=Eg(e);return Qv(Qv([r[Og.DayPeriodsFormat],r[Og.DayPeriodsStandalone]],t),n)}function Hv(e,t,n){let r=Eg(e);return Qv(Qv([r[Og.DaysFormat],r[Og.DaysStandalone]],t),n)}function Uv(e,t,n){let r=Eg(e);return Qv(Qv([r[Og.MonthsFormat],r[Og.MonthsStandalone]],t),n)}function Wv(e,t){let n=Eg(e)[Og.Eras];return Qv(n,t)}function Gv(e,t){return Qv(Eg(e)[Og.DateFormat],t)}function Kv(e,t){return Qv(Eg(e)[Og.TimeFormat],t)}function qv(e,t){let n=Eg(e)[Og.DateTimeFormat];return Qv(n,t)}function Jv(e,t){let n=Eg(e),r=n[Og.NumberSymbols][t];if(r===void 0){if(t===zv.CurrencyDecimal)return n[Og.NumberSymbols][zv.Decimal];if(t===zv.CurrencyGroup)return n[Og.NumberSymbols][zv.Group]}return r}function Yv(e){if(!e[Og.ExtraData])throw new T(2303,!1)}function Xv(e){let t=Eg(e);return Yv(t),(t[Og.ExtraData][2]||[]).map(e=>typeof e==`string`?$v(e):[$v(e[0]),$v(e[1])])}function Zv(e,t,n){let r=Eg(e);return Yv(r),Qv(Qv([r[Og.ExtraData][0],r[Og.ExtraData][1]],t)||[],n)||[]}function Qv(e,t){for(let n=t;n>-1;n--)if(e[n]!==void 0)return e[n];throw new T(2304,!1)}function $v(e){let[t,n]=e.split(`:`);return{hours:+t,minutes:+n}}var ey=/^(\d{4,})-?(\d\d)-?(\d\d)(?:T(\d\d)(?::?(\d\d)(?::?(\d\d)(?:\.(\d+))?)?)?(Z|([+-])(\d\d):?(\d\d))?)?$/,ty=Object.create(null),ny=/((?:[^BEGHLMOSWYZabcdhmswyz']+)|(?:'(?:[^']|'')*')|(?:G{1,5}|y{1,4}|Y{1,4}|M{1,5}|L{1,5}|w{1,2}|W{1}|d{1,2}|E{1,6}|c{1,6}|a{1,5}|b{1,5}|B{1,5}|h{1,2}|H{1,2}|m{1,2}|s{1,2}|S{1,3}|z{1,4}|Z{1,5}|O{1,4}))([\s\S]*)/,ry=256;function iy(e,t,n,r){let i=Dy(e);ay(t),t=sy(n,t)||t;let a=[],o;for(;t;)if(o=ny.exec(t),o){a=a.concat(o.slice(1));let e=a.pop();if(!e)break;t=e}else{a.push(t);break}let s=i.getTimezoneOffset();r&&(s=wy(r,s),i=Ey(i,r));let c=``;return a.forEach(e=>{let t=Cy(e);c+=t?t(i,n,s):e===`''`?`'`:e.replace(/(^'|'$)/g,``).replace(/''/g,`'`)}),c}function ay(e){if(e.length>ry)throw new T(2300,!1)}function oy(e,t,n){let r=new Date(0);return r.setFullYear(e,t,n),r.setHours(0,0,0),r}function sy(e,t){let n=Bv(e);if(ty[n]??=Object.create(null),ty[n][t])return ty[n][t];let r=``;switch(t){case`shortDate`:r=Gv(e,Rv.Short);break;case`mediumDate`:r=Gv(e,Rv.Medium);break;case`longDate`:r=Gv(e,Rv.Long);break;case`fullDate`:r=Gv(e,Rv.Full);break;case`shortTime`:r=Kv(e,Rv.Short);break;case`mediumTime`:r=Kv(e,Rv.Medium);break;case`longTime`:r=Kv(e,Rv.Long);break;case`fullTime`:r=Kv(e,Rv.Full);break;case`short`:let t=sy(e,`shortTime`),n=sy(e,`shortDate`);r=cy(qv(e,Rv.Short),[t,n]);break;case`medium`:let i=sy(e,`mediumTime`),a=sy(e,`mediumDate`);r=cy(qv(e,Rv.Medium),[i,a]);break;case`long`:let o=sy(e,`longTime`),s=sy(e,`longDate`);r=cy(qv(e,Rv.Long),[o,s]);break;case`full`:let c=sy(e,`fullTime`),l=sy(e,`fullDate`);r=cy(qv(e,Rv.Full),[c,l])}return r&&(ty[n][t]=r),r}function cy(e,t){return t&&(e=e.replace(/\{([^}]+)}/g,function(e,n){return Object.hasOwn(t,n)?t[n]:e})),e}function ly(e,t,n=`-`,r,i){let a=``;(e<0||i&&e<=0)&&(i?e=-e+1:(e=-e,a=n));let o=String(e);for(;o.length0||s>-n)&&(s+=n),e===3)s===0&&n===-12&&(s=12);else if(e===6)return uy(s,t);let c=Jv(o,zv.MinusSign);return ly(s,t,c,r,i)}}function fy(e,t){switch(e){case 0:return t.getFullYear();case 1:return t.getMonth();case 2:return t.getDate();case 3:return t.getHours();case 4:return t.getMinutes();case 5:return t.getSeconds();case 6:return t.getMilliseconds();case 7:return t.getDay();default:throw new T(2301,!1)}}function py(e,t,n=Iv.Format,r=!1){return function(i,a){return my(i,a,e,t,n,r)}}function my(e,t,n,r,i,a){switch(n){case 2:return Uv(t,i,r)[e.getMonth()];case 1:return Hv(t,i,r)[e.getDay()];case 0:let n=e.getHours(),o=e.getMinutes();if(a){let e=Xv(t),a=Zv(t,i,r),s=e.findIndex(e=>{if(Array.isArray(e)){let[t,r]=e,i=n>=t.hours&&o>=t.minutes,a=n0?Math.floor(i/60):Math.ceil(i/60);switch(e){case 0:return(i>=0?`+`:``)+ly(o,2,a)+ly(Math.abs(i%60),2,a);case 1:return`GMT`+(i>=0?`+`:``)+ly(o,1,a);case 2:return`GMT`+(i>=0?`+`:``)+ly(o,2,a)+`:`+ly(Math.abs(i%60),2,a);case 3:return r===0?`Z`:(i>=0?`+`:``)+ly(o,2,a)+`:`+ly(Math.abs(i%60),2,a);default:throw new T(2310,!1)}}}var gy=0,_y=4;function vy(e){let t=oy(e,gy,1).getDay();return oy(e,0,1+(t<=_y?_y:11)-t)}function yy(e){let t=e.getDay(),n=t===0?-3:_y-t;return oy(e.getFullYear(),e.getMonth(),e.getDate()+n)}function by(e,t=!1){return function(n,r){let i;if(t){let e=new Date(n.getFullYear(),n.getMonth(),1).getDay()-1,t=n.getDate();i=1+Math.floor((t+e)/7)}else{let e=yy(n),t=vy(e.getFullYear()),r=e.getTime()-t.getTime();i=1+Math.round(r/6048e5)}return ly(i,e,Jv(r,zv.MinusSign))}}function xy(e,t=!1){return function(n,r){return ly(yy(n).getFullYear(),e,Jv(r,zv.MinusSign),t)}}var Sy=Object.create(null);function Cy(e){if(Sy[e])return Sy[e];let t;switch(e){case`G`:case`GG`:case`GGG`:t=py(3,Lv.Abbreviated);break;case`GGGG`:t=py(3,Lv.Wide);break;case`GGGGG`:t=py(3,Lv.Narrow);break;case`y`:t=dy(0,1,0,!1,!0);break;case`yy`:t=dy(0,2,0,!0,!0);break;case`yyy`:t=dy(0,3,0,!1,!0);break;case`yyyy`:t=dy(0,4,0,!1,!0);break;case`Y`:t=xy(1);break;case`YY`:t=xy(2,!0);break;case`YYY`:t=xy(3);break;case`YYYY`:t=xy(4);break;case`M`:case`L`:t=dy(1,1,1);break;case`MM`:case`LL`:t=dy(1,2,1);break;case`MMM`:t=py(2,Lv.Abbreviated);break;case`MMMM`:t=py(2,Lv.Wide);break;case`MMMMM`:t=py(2,Lv.Narrow);break;case`LLL`:t=py(2,Lv.Abbreviated,Iv.Standalone);break;case`LLLL`:t=py(2,Lv.Wide,Iv.Standalone);break;case`LLLLL`:t=py(2,Lv.Narrow,Iv.Standalone);break;case`w`:t=by(1);break;case`ww`:t=by(2);break;case`W`:t=by(1,!0);break;case`d`:t=dy(2,1);break;case`dd`:t=dy(2,2);break;case`c`:case`cc`:t=dy(7,1);break;case`ccc`:t=py(1,Lv.Abbreviated,Iv.Standalone);break;case`cccc`:t=py(1,Lv.Wide,Iv.Standalone);break;case`ccccc`:t=py(1,Lv.Narrow,Iv.Standalone);break;case`cccccc`:t=py(1,Lv.Short,Iv.Standalone);break;case`E`:case`EE`:case`EEE`:t=py(1,Lv.Abbreviated);break;case`EEEE`:t=py(1,Lv.Wide);break;case`EEEEE`:t=py(1,Lv.Narrow);break;case`EEEEEE`:t=py(1,Lv.Short);break;case`a`:case`aa`:case`aaa`:t=py(0,Lv.Abbreviated);break;case`aaaa`:t=py(0,Lv.Wide);break;case`aaaaa`:t=py(0,Lv.Narrow);break;case`b`:case`bb`:case`bbb`:t=py(0,Lv.Abbreviated,Iv.Standalone,!0);break;case`bbbb`:t=py(0,Lv.Wide,Iv.Standalone,!0);break;case`bbbbb`:t=py(0,Lv.Narrow,Iv.Standalone,!0);break;case`B`:case`BB`:case`BBB`:t=py(0,Lv.Abbreviated,Iv.Format,!0);break;case`BBBB`:t=py(0,Lv.Wide,Iv.Format,!0);break;case`BBBBB`:t=py(0,Lv.Narrow,Iv.Format,!0);break;case`h`:t=dy(3,1,-12);break;case`hh`:t=dy(3,2,-12);break;case`H`:t=dy(3,1);break;case`HH`:t=dy(3,2);break;case`m`:t=dy(4,1);break;case`mm`:t=dy(4,2);break;case`s`:t=dy(5,1);break;case`ss`:t=dy(5,2);break;case`S`:t=dy(6,1);break;case`SS`:t=dy(6,2);break;case`SSS`:t=dy(6,3);break;case`Z`:case`ZZ`:case`ZZZ`:t=hy(0);break;case`ZZZZZ`:t=hy(3);break;case`O`:case`OO`:case`OOO`:case`z`:case`zz`:case`zzz`:t=hy(1);break;case`OOOO`:case`ZZZZ`:case`zzzz`:t=hy(2);break;default:return null}return Sy[e]=t,t}function wy(e,t){e=e.replace(/:/g,``);let n=Date.parse(`Jan 01, 1970 00:00:00 `+e)/6e4;return isNaN(n)?t:n}function Ty(e,t){return e=new Date(e.getTime()),e.setMinutes(e.getMinutes()+t),e}function Ey(e,t,n){let r=e.getTimezoneOffset();return Ty(e,-1*(wy(t,r)-r))}function Dy(e){if(ky(e))return e;if(typeof e==`number`&&!isNaN(e))return new Date(e);if(typeof e==`string`){if(e=e.trim(),/^(\d{4}(-\d{1,2}(-\d{1,2})?)?)$/.test(e)){let[t,n=1,r=1]=e.split(`-`).map(e=>+e);return oy(t,n-1,r)}let t=parseFloat(e);if(!isNaN(e-t))return new Date(t);let n;if(n=e.match(ey))return Oy(n)}let t=new Date(e);if(!ky(t))throw new T(2311,!1);return t}function Oy(e){let t=new Date(0),n=0,r=0,i=e[8]?t.setUTCFullYear:t.setFullYear,a=e[8]?t.setUTCHours:t.setHours;e[9]&&(n=Number(e[9]+e[10]),r=Number(e[9]+e[11])),i.call(t,Number(e[1]),Number(e[2])-1,Number(e[3]));let o=Number(e[4]||0)-n,s=Number(e[5]||0)-r,c=Number(e[6]||0),l=Math.floor(parseFloat(`0.`+(e[7]||0))*1e3);return a.call(t,o,s,c,l),t}function ky(e){return e instanceof Date&&!isNaN(e.valueOf())}function Ay(e,t){return new T(2100,!1)}var jy=`mediumDate`,My=new vi(``),Ny=new vi(``),Py=(()=>{class e{locale;defaultTimezone;defaultOptions;constructor(e,t,n){this.locale=e,this.defaultTimezone=t,this.defaultOptions=n}transform(t,n,r,i){if(t==null||t===``||t!==t)return null;try{let e=n??this.defaultOptions?.dateFormat??jy,a=r??this.defaultOptions?.timezone??this.defaultTimezone??void 0;return iy(t,e,i||this.locale,a)}catch(t){throw Ay(e,t.message)}}static ɵfac=function(t){return new(t||e)(cm(Z_,16),cm(My,24),cm(Ny,24))};static ɵpipe=Mh({name:`date`,type:e,pure:!0})}return e})(),Fy=(()=>{class e{transform(e){return JSON.stringify(e,null,2)}static ɵfac=function(t){return new(t||e)};static ɵpipe=Mh({name:`json`,type:e,pure:!1})}return e})();function Iy(e,t){t=encodeURIComponent(t);for(let n of e.split(`;`)){let e=n.indexOf(`=`),[r,i]=e==-1?[n,``]:[n.slice(0,e),n.slice(e+1)];if(r.trim()!==t)continue;let a=i;try{a=decodeURIComponent(i)}catch{}return a.length>1&&a[0]===`"`&&a[a.length-1]===`"`&&(a=a.slice(1,-1)),a}return null}var Ly=`browser`,Ry=class{_doc;constructor(e){this._doc=e}manager},zy=(()=>{class e extends Ry{constructor(e){super(e)}supports(e){return!0}addEventListener(e,t,n,r){return e.addEventListener(t,n,r),()=>this.removeEventListener(e,t,n,r)}removeEventListener(e,t,n,r){return e.removeEventListener(t,n,r)}static ɵfac=function(t){return new(t||e)(qi(Cs))};static ɵprov=di({token:e,factory:e.ɵfac})}return e})(),By=new vi(``),Vy=(()=>{class e{_zone;_plugins;_eventNameToPlugin=new Map;constructor(e,t){this._zone=t,e.forEach(e=>{e.manager=this});let n=e.filter(e=>!(e instanceof zy));this._plugins=n.slice().reverse();let r=e.find(e=>e instanceof zy);r&&this._plugins.push(r)}addEventListener(e,t,n,r){return this._findPluginFor(t).addEventListener(e,t,n,r)}getZone(){return this._zone}_findPluginFor(e){let t=this._eventNameToPlugin.get(e);if(t)return t;if(t=this._plugins.find(t=>t.supports(e)),!t)throw new T(-5101,!1);return this._eventNameToPlugin.set(e,t),t}static ɵfac=function(t){return new(t||e)(qi(By),qi(Is))};static ɵprov=di({token:e,factory:e.ɵfac})}return e})(),Hy=`ng-app-id`;function Uy(e){for(let t of e)t.remove()}function Wy(e,t){let n=t.createElement(`style`);return n.textContent=e,n}function Gy(e,t,n,r){let i=e.head?.querySelectorAll(`style[${Hy}="${t}"],link[${Hy}="${t}"]`);if(!i||i.length===0)return!1;for(let e of i)e.removeAttribute(Hy),e instanceof HTMLLinkElement?r.set(e.href.slice(e.href.lastIndexOf(`/`)+1),{usage:0,elements:[e]}):e.textContent&&n.set(e.textContent,{usage:0,elements:[e]});return!0}function Ky(e,t){let n=t.createElement(`link`);return n.setAttribute(`rel`,`stylesheet`),n.setAttribute(`href`,e),n}var qy=(()=>{class e{doc;appId;nonce;inline=new Map;external=new Map;hosts=new Set;constructor(e,t,n,r={}){this.doc=e,this.appId=t,this.nonce=n,Gy(e,t,this.inline,this.external)&&this.hosts.add(e.head)}addStyles(e,t){for(let t of e)this.addUsage(t,this.inline,Wy);t?.forEach(e=>this.addUsage(e,this.external,Ky))}removeStyles(e,t){for(let t of e)this.removeUsage(t,this.inline);t?.forEach(e=>this.removeUsage(e,this.external))}addUsage(e,t,n){let r=t.get(e);r?r.usage++:t.set(e,{usage:1,elements:[...this.hosts].map(t=>this.addElement(t,n(e,this.doc)))})}removeUsage(e,t){let n=t.get(e);n&&(n.usage--,n.usage<=0&&(Uy(n.elements),t.delete(e)))}ngOnDestroy(){for(let[,{elements:e}]of[...this.inline,...this.external])Uy(e);this.hosts.clear()}addHost(e){if(!this.hosts.has(e)){this.hosts.add(e);for(let[t,{elements:n}]of this.inline)n.push(this.addElement(e,Wy(t,this.doc)));for(let[t,{elements:n}]of this.external)n.push(this.addElement(e,Ky(t,this.doc)))}}removeHost(e){this.hosts.delete(e);for(let t of[...this.inline.values(),...this.external.values()]){let n=[];for(let r of t.elements)r.parentNode===e?r.remove():n.push(r);t.elements=n}}addElement(e,t){return this.nonce&&t.setAttribute(`nonce`,this.nonce),e.appendChild(t)}static ɵfac=function(t){return new(t||e)(qi(Cs),qi(Qs),qi(nc,8),qi(tc))};static ɵprov=di({token:e,factory:e.ɵfac})}return e})(),Jy={svg:`http://www.w3.org/2000/svg`,xhtml:`http://www.w3.org/1999/xhtml`,xlink:`http://www.w3.org/1999/xlink`,xml:`http://www.w3.org/XML/1998/namespace`,xmlns:`http://www.w3.org/2000/xmlns/`,math:`http://www.w3.org/1998/Math/MathML`},Yy=/%COMP%/g,Xy=`%COMP%`,Zy=`_nghost-${Xy}`,Qy=`_ngcontent-${Xy}`,$y=!0,eb=new vi(``,{factory:()=>$y}),tb=new vi(``);function nb(e){return Qy.replace(Yy,e)}function rb(e){return Zy.replace(Yy,e)}function ib(e,t){return t.map(t=>t.replace(Yy,e))}var ab=(()=>{class e{eventManager;sharedStylesHost;appId;removeStylesOnCompDestroy;doc;ngZone;nonce;tracingService;rendererByCompId=new Map;defaultRenderer;cssVarNamespace;constructor(e,t,n,r,i,a,o=null,s=null,c=null){this.eventManager=e,this.sharedStylesHost=t,this.appId=n,this.removeStylesOnCompDestroy=r,this.doc=i,this.ngZone=a,this.nonce=o,this.tracingService=s,this.cssVarNamespace=c??``,this.defaultRenderer=new ob(e,i,a,this.tracingService,this.cssVarNamespace)}createRenderer(e,t){if(!e||!t)return this.defaultRenderer;let n=this.getOrCreateRenderer(e,t);return n instanceof ub?n.applyToHost(e):n instanceof lb&&n.applyStyles(),n}getOrCreateRenderer(e,t){let n=this.rendererByCompId,r=n.get(t.id);if(!r){let i=this.doc,a=this.ngZone,o=this.eventManager,s=this.sharedStylesHost,c=this.removeStylesOnCompDestroy,l=this.tracingService;switch(t.encapsulation){case eu.Emulated:r=new ub(o,s,t,this.appId,c,i,a,l,this.cssVarNamespace);break;case eu.ShadowDom:return new cb(o,e,t,i,a,this.nonce,l,this.cssVarNamespace,s);case eu.ExperimentalIsolatedShadowDom:return new cb(o,e,t,i,a,this.nonce,l,this.cssVarNamespace);default:r=new lb(o,s,t,c,i,a,l,this.cssVarNamespace)}n.set(t.id,r)}return r}ngOnDestroy(){this.rendererByCompId.clear()}componentReplaced(e){this.rendererByCompId.delete(e)}static ɵfac=function(t){return new(t||e)(qi(Vy),qi(om),qi(Qs),qi(eb),qi(Cs),qi(Is),qi(nc),qi(_d,8),qi(tb,8))};static ɵprov=di({token:e,factory:e.ɵfac})}return e})(),ob=class{eventManager;doc;ngZone;tracingService;cssVarNamespace;data=Object.create(null);throwOnSyntheticProps=!0;constructor(e,t,n,r,i=``){this.eventManager=e,this.doc=t,this.ngZone=n,this.tracingService=r,this.cssVarNamespace=i}destroy(){}destroyNode=null;createElement(e,t){return t?this.doc.createElementNS(Jy[t]||t,e):this.doc.createElement(e)}createComment(e){return this.doc.createComment(e)}createText(e){return this.doc.createTextNode(e)}appendChild(e,t){(sb(e)?e.content:e).appendChild(t)}insertBefore(e,t,n){if(e){let r=sb(e)?e.content:e;if(n!=null&&n.parentNode!==r)throw new T(-5106,!1);r.insertBefore(t,n)}}removeChild(e,t){t.remove()}selectRootElement(e,t){let n=typeof e==`string`?this.doc.querySelector(e):e;if(!n)throw new T(-5104,!1);return t||(n.textContent=``),n}parentNode(e){return e.parentNode}nextSibling(e){return e.nextSibling}setAttribute(e,t,n,r){if(r){t=r+`:`+t;let i=Jy[r];i?e.setAttributeNS(i,t,n):e.setAttribute(t,n)}else e.setAttribute(t,n)}removeAttribute(e,t,n){if(n){let r=Jy[n];r?e.removeAttributeNS(r,t):e.removeAttribute(`${n}:${t}`)}else e.removeAttribute(t)}addClass(e,t){e.classList.add(t)}removeClass(e,t){e.classList.remove(t)}setStyle(e,t,n,r){let i=t.startsWith(`--`);i&&(t=t.replace(`%NS%`,this.cssVarNamespace)),i||r&(Lu.DashCase|Lu.Important)?e.style.setProperty(t,n,r&Lu.Important?`important`:``):e.style[t]=n}removeStyle(e,t,n){let r=t.startsWith(`--`);r&&(t=t.replace(`%NS%`,this.cssVarNamespace)),r||n&Lu.DashCase?e.style.removeProperty(t):e.style[t]=``}setProperty(e,t,n){e!=null&&(e[t]=n)}setValue(e,t){e.nodeValue=t}listen(e,t,n,r){if(typeof e==`string`&&(e=Nv().getGlobalEventTarget(this.doc,e),!e))throw new T(-5102,!1);let i=this.decoratePreventDefault(n);return this.tracingService?.wrapEventListener&&(i=this.tracingService.wrapEventListener(e,t,i)),this.eventManager.addEventListener(e,t,i,r)}decoratePreventDefault(e){return t=>{if(t===`__ngUnwrap__`)return e;e(t)===!1&&t.preventDefault()}}};function sb(e){return e.tagName===`TEMPLATE`&&e.content!==void 0}var cb=class extends ob{hostEl;sharedStylesHost;shadowRoot;constructor(e,t,n,r,i,a,o,s,c){super(e,r,i,o,s),this.hostEl=t,this.sharedStylesHost=c,this.shadowRoot=t.attachShadow({mode:`open`}),this.sharedStylesHost&&this.sharedStylesHost.addHost(this.shadowRoot);let l=n.styles;l=ib(n.id,l).map(e=>e.replace(/%NS%/g,s));for(let e of l){let t=document.createElement(`style`);a&&t.setAttribute(`nonce`,a),t.textContent=e,this.shadowRoot.appendChild(t)}let u=n.getExternalStyles?.();if(u)for(let e of u){let t=Ky(e,r);a&&t.setAttribute(`nonce`,a),this.shadowRoot.appendChild(t)}}nodeOrShadowRoot(e){return e===this.hostEl?this.shadowRoot:e}appendChild(e,t){return super.appendChild(this.nodeOrShadowRoot(e),t)}insertBefore(e,t,n){return super.insertBefore(this.nodeOrShadowRoot(e),t,n)}removeChild(e,t){return super.removeChild(null,t)}parentNode(e){return this.nodeOrShadowRoot(super.parentNode(this.nodeOrShadowRoot(e)))}destroy(){this.sharedStylesHost&&this.sharedStylesHost.removeHost(this.shadowRoot)}},lb=class extends ob{sharedStylesHost;removeStylesOnCompDestroy;styles;styleUrls;constructor(e,t,n,r,i,a,o,s,c){super(e,i,a,o,s),this.sharedStylesHost=t,this.removeStylesOnCompDestroy=r;let l=n.styles,u=c?ib(c,l):l;this.styles=u.map(e=>e.replace(/%NS%/g,s)),this.styleUrls=n.getExternalStyles?.(c)}applyStyles(){this.sharedStylesHost.addStyles(this.styles,this.styleUrls)}destroy(){this.removeStylesOnCompDestroy&&Zu.size===0&&this.sharedStylesHost.removeStyles(this.styles,this.styleUrls)}},ub=class extends lb{contentAttr;hostAttr;constructor(e,t,n,r,i,a,o,s,c){let l=r+`-`+n.id;super(e,t,n,i,a,o,s,c,l),this.contentAttr=nb(l),this.hostAttr=rb(l)}applyToHost(e){this.applyStyles(),this.setAttribute(e,this.hostAttr,``)}createElement(e,t){let n=super.createElement(e,t);return super.setAttribute(n,this.contentAttr,``),n}},db=class e extends Fv{supportsDOMEvents=!0;static makeCurrent(){Pv(new e)}onAndCancel(e,t,n,r){return e.addEventListener(t,n,r),()=>{e.removeEventListener(t,n,r)}}dispatchEvent(e,t){e.dispatchEvent(t)}remove(e){e.remove()}createElement(e,t){return t||=this.getDefaultDocument(),t.createElement(e)}createHtmlDocument(){return document.implementation.createHTMLDocument(`fakeTitle`)}getDefaultDocument(){return document}isElementNode(e){return e.nodeType===Node.ELEMENT_NODE}isShadowRoot(e){return e instanceof DocumentFragment}getGlobalEventTarget(e,t){return t===`window`?window:t===`document`?e:t===`body`?e.body:null}getBaseHref(e){let t=pb();return t==null?null:mb(t)}resetBaseElement(){fb=null}getUserAgent(){return window.navigator.userAgent}getCookie(e){return Iy(document.cookie,e)}},fb=null;function pb(){return fb||=document.head.querySelector(`base`),fb?fb.getAttribute(`href`):null}function mb(e){return new URL(e,document.baseURI).pathname}var hb=[`alt`,`control`,`meta`,`shift`],gb={"\b":`Backspace`," ":`Tab`,"":`Delete`,"\x1B":`Escape`,Del:`Delete`,Esc:`Escape`,Left:`ArrowLeft`,Right:`ArrowRight`,Up:`ArrowUp`,Down:`ArrowDown`,Menu:`ContextMenu`,Scroll:`ScrollLock`,Win:`OS`},_b={alt:e=>e.altKey,control:e=>e.ctrlKey,meta:e=>e.metaKey,shift:e=>e.shiftKey},vb=(()=>{class e extends Ry{constructor(e){super(e)}supports(t){return e.parseEventName(t)!=null}addEventListener(t,n,r,i){let a=e.parseEventName(n),o=e.eventCallback(a.fullKey,r,this.manager.getZone());return this.manager.getZone().runOutsideAngular(()=>Nv().onAndCancel(t,a.domEventName,o,i))}static parseEventName(t){let n=t.toLowerCase().split(`.`),r=n.shift();if(n.length===0||r!==`keydown`&&r!==`keyup`)return null;let i=e._normalizeKey(n.pop()),a=``,o=n.indexOf(`code`);if(o>-1&&(n.splice(o,1),a=`code.`),hb.forEach(e=>{let t=n.indexOf(e);t>-1&&(n.splice(t,1),a+=e+`.`)}),a+=i,n.length!=0||i.length===0)return null;let s={};return s.domEventName=r,s.fullKey=a,s}static matchEventFullKeyCode(e,t){let n=gb[e.key]||e.key,r=``;return t.indexOf(`code.`)>-1&&(n=e.code,r=`code.`),n==null||!n?!1:(n=n.toLowerCase(),n===` `?n=`space`:n===`.`&&(n=`dot`),hb.forEach(t=>{if(t!==n){let n=_b[t];n(e)&&(r+=t+`.`)}}),r+=n,r===t)}static eventCallback(t,n,r){return i=>{e.matchEventFullKeyCode(i,t)&&r.runGuarded(()=>n(i))}}static _normalizeKey(e){return e===`esc`?`escape`:e}static ɵfac=function(t){return new(t||e)(qi(Cs))};static ɵprov=di({token:e,factory:e.ɵfac})}return e})();async function yb(e,t,n){return Ev({rootComponent:e,...bb(t,n)})}function bb(e,t){return{platformRef:t?.platformRef,appProviders:[...Tb,...e?.providers??[]],platformProviders:wb}}function xb(){db.makeCurrent()}function Sb(){return new Js}function Cb(){return Hl(document),document}var wb=[{provide:tc,useValue:Ly},{provide:ec,useValue:xb,multi:!0},{provide:Cs,useFactory:Cb}],Tb=[{provide:Ta,useValue:`root`},{provide:Js,useFactory:Sb},{provide:By,useClass:zy,multi:!0},{provide:By,useClass:vb,multi:!0},ab,{provide:om,useClass:qy},{provide:qy,useExisting:om},Vy,{provide:Vp,useExisting:ab},[]];function Eb(e,t){let n=`\x1B[${e}m`,r=`\x1B[${t}m`;return((e,...t)=>{if(Array.isArray(e)&&`raw`in e){let i=e,a=``;for(let e=0;e{let r=new Ab({code:i,why:Ob(a.why,e),fix:Ob(a.fix,e),docs:o,cause:e.cause,sources:e.sources,data:Ob(a.data,e)},s);for(let e of t)e(r,n);return r};n[i]=s}return n}function Nb(e){return t=>{let n=`${e.bold(e.red(`[${t.name}]`))} ${t.message}`,r=[];return t.fix&&r.push(`${e.dim(`fix:`)} ${t.fix}`),t.sources?.length&&r.push(`${e.dim(`sources:`)} ${t.sources.join(`, `)}`),t.docs&&r.push(`${e.dim(`see:`)} ${e.cyan(t.docs)}`),r.length===0?n:[n,...r.map((t,n)=>`${e.dim(n{e=n,t=r}),resolve:e,reject:t}}var zb=Math.random.bind(Math),Bb=`useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict`;function Vb(e=21){let t=``,n=e;for(;n--;)t+=Bb[zb()*64|0];return t}var Hb=6e4,Ub=e=>e,Wb=Ub,{clearTimeout:Gb,setTimeout:Kb}=globalThis;function qb(e,t){let{post:n,on:r,off:i=()=>{},eventNames:a=[],serialize:o=Ub,deserialize:s=Wb,resolver:c,bind:l=`rpc`,timeout:u=Hb,proxify:d=!0}=t,f=!1,p=new Map,m,h;async function g(e,r,i,a){if(f)throw Error(`[birpc] rpc is closed, cannot call "${e}"`);let s={m:e,a:r,t:`q`};a&&(s.o=!0);let c=async e=>n(o(e));if(i){await c(s);return}if(m)try{await m}finally{m=void 0}let{promise:l,resolve:d,reject:g}=Rb(),_=Vb();s.i=_;let ee;async function v(n=s){return u>=0&&(ee=Kb(()=>{try{if(t.onTimeoutError?.call(h,e,r)!==!0)throw Error(`[birpc] timeout on calling "${e}"`)}catch(e){g(e)}p.delete(_)},u),typeof ee==`object`&&(ee=ee.unref?.())),p.set(_,{resolve:d,reject:g,timeoutId:ee,method:e}),await c(n),l}try{t.onRequest?await t.onRequest.call(h,s,v,d):await v()}catch(e){if(t.onGeneralError?.call(h,e)!==!0)throw e;return}finally{Gb(ee),p.delete(_)}return l}let _={$call:(e,...t)=>g(e,t,!1),$callOptional:(e,...t)=>g(e,t,!1,!0),$callEvent:(e,...t)=>g(e,t,!0),$callRaw:e=>g(e.method,e.args,e.event,e.optional),$rejectPendingCalls:v,get $closed(){return f},get $meta(){return t.meta},$close:ee,$functions:e};h=d?new Proxy({},{get(t,n){if(Object.hasOwn(_,n))return _[n];if(n===`then`&&!a.includes(`then`)&&!(`then`in e))return;let r=(...e)=>g(n,e,!0);if(a.includes(n))return r.asEvent=r,r;let i=(...e)=>g(n,e,!1);return i.asEvent=r,i}}):_;function ee(e){f=!0,p.forEach(({reject:t,method:n})=>{let r=Error(`[birpc] rpc is closed, cannot call "${n}"`);if(e)return e.cause??=r,t(e);t(r)}),p.clear(),i(te)}function v(e){let t=Array.from(p.values()).map(({method:t,reject:n})=>e?e({method:t,reject:n}):n(Error(`[birpc]: rejected pending call "${t}".`)));return p.clear(),t}async function te(r,...i){let a;try{a=s(r)}catch(e){if(t.onGeneralError?.call(h,e)!==!0)throw e;return}if(a.t===`q`){let{m:r,a:s,o:u}=a,d,f,p=await(c?c.call(h,r,e[r]):e[r]);if(u&&(p||=()=>void 0),!p)f=Error(`[birpc] function "${r}" not found`);else try{d=await p.apply(l===`rpc`?h:e,s)}catch(e){f=e}if(a.i){if(f&&t.onFunctionError&&t.onFunctionError.call(h,f,r,s)===!0)return;if(!f)try{await n(o({t:`s`,i:a.i,r:d}),...i);return}catch(e){if(f=e,t.onGeneralError?.call(h,e,r,s)!==!0)throw e}try{await n(o({t:`s`,i:a.i,e:f}),...i)}catch(e){if(t.onGeneralError?.call(h,e,r,s)!==!0)throw e}}}else{let{i:e,r:t,e:n}=a,r=p.get(e);r&&(Gb(r.timeoutId),n?r.reject(n):r.resolve(t)),p.delete(e)}}return m=r(te),h}function Jb(e,t){return t.safety?t.safety:e===`static`||e===`query`||e==null?`read`:`action`}var Yb=Object.freeze({type:`object`,additionalProperties:!0});function Xb(e){let t=e[`~standard`];if(t.jsonSchema)try{return t.jsonSchema.input({target:`draft-2020-12`})}catch{return Yb}return Yb}function Zb(e){if(!e||e.length===0)return{type:`object`,properties:{}};let t={},n=[];for(let r=0;rn[`arg${t}`]);if(`arg0`in n){let e=[];for(;`arg${e.length}`in n;)e.push(n[`arg${e.length}`]);return e}return Object.keys(n).length===0?[]:void 0}function $b(e,t){return Qb(e,t)??[e]}function ex(e){return typeof e==`string`?`'${e}'`:new ix().serialize(e)}var tx=` _-,;:!?.'"()[]{}@*/\\&#%\`^+<=>|~$0123456789abcdefghijklmnopqrstuvwxyz`,nx=(function(){let e=new Uint8Array(128);for(let t=0;t<69;t++)e[tx.charCodeAt(t)]=t+1;for(let t=65;t<=90;t++)e[t]=e[t+32];return e})();function rx(e,t){if(e===t)return 0;let n=Math.min(e.length,t.length),r=0;for(let i=0;ia?-1:1)}return e.length===t.length?r:e.lengththis.compare(e[0],t[0])),r=`${e}{`;for(let e=0;ethis.compare(e,t)))}`}$Map(e){return this.serializeObjectEntries(`Map`,e.entries())}}for(let t of[`Error`,`RegExp`,`URL`])e.prototype[`$`+t]=function(e){return`${t}(${e})`};for(let t of[`Int8Array`,`Uint8Array`,`Uint8ClampedArray`,`Int16Array`,`Uint16Array`,`Int32Array`,`Uint32Array`,`Float32Array`,`Float64Array`])e.prototype[`$`+t]=function(e){return`${t}[${e.join(`,`)}]`};for(let t of[`BigInt64Array`,`BigUint64Array`])e.prototype[`$`+t]=function(e){return`${t}[${e.join(`n,`)}${e.length>0?`n`:``}]`};return e})(),ax=[1779033703,-1150833019,1013904242,-1521486534,1359893119,-1694144372,528734635,1541459225],ox=[1116352408,1899447441,-1245643825,-373957723,961987163,1508970993,-1841331548,-1424204075,-670586216,310598401,607225278,1426881987,1925078388,-2132889090,-1680079193,-1046744716,-459576895,-272742522,264347078,604807628,770255983,1249150122,1555081692,1996064986,-1740746414,-1473132947,-1341970488,-1084653625,-958395405,-710438585,113926993,338241895,666307205,773529912,1294757372,1396182291,1695183700,1986661051,-2117940946,-1838011259,-1564481375,-1474664885,-1035236496,-949202525,-778901479,-694614492,-200395387,275423344,430227734,506948616,659060556,883997877,958139571,1322822218,1537002063,1747873779,1955562222,2024104815,-2067236844,-1933114872,-1866530822,-1538233109,-1090935817,-965641998],sx=`ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_`,cx=[],lx=class{_data=new ux;_hash=new ux([...ax]);_nDataBytes=0;_minBufferSize=0;finalize(e){e&&this._append(e);let t=this._nDataBytes*8,n=this._data.sigBytes*8;return this._data.words[n>>>5]|=128<<24-n%32,this._data.words[(n+64>>>9<<4)+14]=Math.floor(t/4294967296),this._data.words[(n+64>>>9<<4)+15]=t,this._data.sigBytes=this._data.words.length*4,this._process(),this._hash}_doProcessBlock(e,t){let n=this._hash.words,r=n[0],i=n[1],a=n[2],o=n[3],s=n[4],c=n[5],l=n[6],u=n[7];for(let n=0;n<64;n++){if(n<16)cx[n]=e[t+n]|0;else{let e=cx[n-15],t=(e<<25|e>>>7)^(e<<14|e>>>18)^e>>>3,r=cx[n-2],i=(r<<15|r>>>17)^(r<<13|r>>>19)^r>>>10;cx[n]=t+cx[n-7]+i+cx[n-16]}let d=s&c^~s&l,f=r&i^r&a^i&a,p=(r<<30|r>>>2)^(r<<19|r>>>13)^(r<<10|r>>>22),m=(s<<26|s>>>6)^(s<<21|s>>>11)^(s<<7|s>>>25),h=u+m+d+ox[n]+cx[n],g=p+f;u=l,l=c,c=s,s=o+h|0,o=a,a=i,i=r,r=h+g|0}n[0]=n[0]+r|0,n[1]=n[1]+i|0,n[2]=n[2]+a|0,n[3]=n[3]+o|0,n[4]=n[4]+s|0,n[5]=n[5]+c|0,n[6]=n[6]+l|0,n[7]=n[7]+u|0}_append(e){typeof e==`string`&&(e=ux.fromUtf8(e)),this._data.concat(e),this._nDataBytes+=e.sigBytes}_process(e){let t,n=this._data.sigBytes/64;n=e?Math.ceil(n):Math.max((n|0)-this._minBufferSize,0);let r=n*16,i=Math.min(r*4,this._data.sigBytes);if(r){for(let e=0;e>>2]|=(n.charCodeAt(e)&255)<<24-e%4*8;return new e(i,r)}toBase64(){let e=[];for(let t=0;t>>2]>>>24-t%4*8&255,r=this.words[t+1>>>2]>>>24-(t+1)%4*8&255,i=this.words[t+2>>>2]>>>24-(t+2)%4*8&255,a=n<<16|r<<8|i;for(let n=0;n<4&&t*8+n*6>>6*(3-n)&63))}return e.join(``)}concat(e){if(this.words[this.sigBytes>>>2]&=4294967295<<32-this.sigBytes%4*8,this.words.length=Math.ceil(this.sigBytes/4),this.sigBytes%4)for(let t=0;t>>2]>>>24-t%4*8&255;this.words[this.sigBytes+t>>>2]|=n<<24-(this.sigBytes+t)%4*8}else for(let t=0;t>>2]=e.words[t>>>2];this.sigBytes+=e.sigBytes}};function dx(e){return new lx().finalize(e).toBase64()}function fx(e){return dx(ex(e))}function px(e){return fx(e)}function mx(){let e={};function t(t,...n){let r=e[t]||[];for(let e=0,t=r.length;e{e[t]=e[t]?.filter(e=>n!==e)}}function i(e,t){let n=r(e,((...e)=>(n(),t(...e))));return n}return{_listeners:e,emit:t,emitOnce:n,on:r,once:i}}var hx=/^[\w+.-]{2,}:\/\//;function gx(e){return e.endsWith(`/`)?e:`${e}/`}function _x(e){return(e.endsWith(`/`)?e.slice(0,-1):e)||`/`}function vx(e,...t){let n=e;for(let e of t)e&&e!==`/`&&(n=n?gx(n)+e.replace(/^\.?\//,``):e);return n}function yx(e,t){if(!t||t===`/`||hx.test(e))return e;let n=_x(t);return e.startsWith(n)?e:vx(n,e)}function bx(e,t){let n=e.match(hx);return t+(n?e.slice(n[0].length):e)}var xx=`useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict`;function Sx(e=21){let t=``,n=e;for(;n--;)t+=xx[Math.random()*64|0];return t}var Cx=Symbol.for(`immer-nothing`),wx=Symbol.for(`immer-draftable`),Tx=Symbol.for(`immer-state`),Ex=[function(e){return`The plugin for '${e}' has not been loaded into Immer. To enable the plugin, import and call \`enable${e}()\` when initializing your application.`},function(e){return`produce can only be called on things that are draftable: plain objects, arrays, Map, Set or classes that are marked with '[immerable]: true'. Got '${e}'`},`This object has been frozen and should not be mutated`,function(e){return`Cannot use a proxy that has been revoked. Did you pass an object from inside an immer function to an async process? `+e},`An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft.`,`Immer forbids circular references`,"The first or second argument to `produce` must be a function","The third argument to `produce` must be a function or undefined","First argument to `createDraft` must be a plain object, an array, or an immerable object","First argument to `finishDraft` must be a draft returned by `createDraft`",function(e){return`'current' expects a draft, got: ${e}`},`Object.defineProperty() cannot be used on an Immer draft`,`Object.setPrototypeOf() cannot be used on an Immer draft`,`Immer only supports deleting array indices`,`Immer only supports setting array indices and the 'length' property`,function(e){return`'original' expects a draft, got: ${e}`}];function Dx(e,...t){{let n=Ex[e],r=Zx(n)?n.apply(null,t):n;throw Error(`[Immer] ${r}`)}}var Ox=Object,kx=Ox.getPrototypeOf,Ax=`constructor`,jx=`prototype`,Mx=`configurable`,Nx=`enumerable`,Px=`writable`,Fx=`value`,Ix=e=>!!e&&!!e[Tx];function Lx(e){return e?Bx(e)||qx(e)||!!e[wx]||!!e[Ax]?.[wx]||Jx(e)||Yx(e):!1}var Rx=Ox[jx][Ax].toString(),zx=new WeakMap;function Bx(e){if(!e||!Xx(e))return!1;let t=kx(e);if(t===null||t===Ox[jx])return!0;let n=Ox.hasOwnProperty.call(t,Ax)&&t[Ax];if(n===Object)return!0;if(!Zx(n))return!1;let r=zx.get(n);return r===void 0&&(r=Function.toString.call(n),zx.set(n,r)),r===Rx}function Vx(e,t,n=!0){Hx(e)===0?(n?Reflect.ownKeys(e):Ox.keys(e)).forEach(n=>{t(n,e[n],e)}):e.forEach((n,r)=>t(r,n,e))}function Hx(e){let t=e[Tx];return t?t.type_:qx(e)?1:Jx(e)?2:Yx(e)?3:0}var Ux=(e,t,n=Hx(e))=>n===2?e.has(t):Ox[jx].hasOwnProperty.call(e,t),Wx=(e,t,n=Hx(e))=>n===2?e.get(t):e[t],Gx=(e,t,n,r=Hx(e))=>{r===2?e.set(t,n):r===3?e.add(n):e[t]=n};function Kx(e,t){return e===t?e!==0||1/e==1/t:e!==e&&t!==t}var qx=Array.isArray,Jx=e=>e instanceof Map,Yx=e=>e instanceof Set,Xx=e=>typeof e==`object`,Zx=e=>typeof e==`function`,Qx=e=>typeof e==`boolean`;function $x(e){let t=+e;return Number.isInteger(t)&&String(t)===e}var eS=e=>Xx(e)?e?.[Tx]:null,tS=e=>e.copy_||e.base_,nS=e=>e.modified_?e.copy_:e.base_;function rS(e,t){if(Jx(e))return new Map(e);if(Yx(e))return new Set(e);if(qx(e))return Array[jx].slice.call(e);let n=Bx(e);if(t===!0||t===`class_only`&&!n){let t=Ox.getOwnPropertyDescriptors(e);delete t[Tx];let n=Reflect.ownKeys(t);for(let r=0;r1&&Ox.defineProperties(e,{set:oS,add:oS,clear:oS,delete:oS}),Ox.freeze(e),t&&Vx(e,(e,t)=>{iS(t,!0)},!1),e)}function aS(){Dx(2)}var oS={[Fx]:aS};function sS(e){return e===null||!Xx(e)||Ox.isFrozen(e)}var cS=`MapSet`,lS=`Patches`,uS=`ArrayMethods`,dS={};function fS(e){let t=dS[e];return t||Dx(0,e),t}var pS=e=>!!dS[e];function mS(e,t){dS[e]||(dS[e]=t)}var hS,gS=()=>hS,_S=(e,t)=>({drafts_:[],parent_:e,immer_:t,canAutoFreeze_:!0,unfinalizedDrafts_:0,handledSet_:new Set,processedForPatches_:new Set,mapSetPlugin_:pS(cS)?fS(cS):void 0,arrayMethodsPlugin_:pS(uS)?fS(uS):void 0});function vS(e,t){t&&(e.patchPlugin_=fS(lS),e.patches_=[],e.inversePatches_=[],e.patchListener_=t)}function yS(e){bS(e),e.drafts_.forEach(SS),e.drafts_=null}function bS(e){e===hS&&(hS=e.parent_)}var xS=e=>hS=_S(hS,e);function SS(e){let t=e[Tx];t.type_===0||t.type_===1?t.revoke_():t.revoked_=!0}function CS(e,t){t.unfinalizedDrafts_=t.drafts_.length;let n=t.drafts_[0];if(e!==void 0&&e!==n){n[Tx].modified_&&(yS(t),Dx(4)),Lx(e)&&(e=wS(t,e));let{patchPlugin_:r}=t;r&&r.generateReplacementPatches_(n[Tx].base_,e,t)}else e=wS(t,n);return TS(t,e,!0),yS(t),t.patches_&&t.patchListener_(t.patches_,t.inversePatches_),e===Cx?void 0:e}function wS(e,t){if(sS(t))return t;let n=t[Tx];if(!n)return NS(t,e.handledSet_,e);if(!DS(n,e))return t;if(!n.modified_)return n.base_;if(!n.finalized_){let{callbacks_:t}=n;if(t)for(;t.length>0;)t.pop()(e);jS(n,e)}return n.copy_}function TS(e,t,n=!1){!e.parent_&&e.immer_.autoFreeze_&&e.canAutoFreeze_&&iS(t,n)}function ES(e){e.finalized_=!0,e.scope_.unfinalizedDrafts_--}var DS=(e,t)=>e.scope_===t,OS=[];function kS(e,t,n,r){let i=tS(e),a=e.type_;if(r!==void 0&&Wx(i,r,a)===t){Gx(i,r,n,a);return}if(!e.draftLocations_){let t=e.draftLocations_=new Map;Vx(i,(e,n)=>{if(Ix(n)){let r=t.get(n)||[];r.push(e),t.set(n,r)}})}let o=e.draftLocations_.get(t)??OS;for(let e of o)Gx(i,e,n,a)}function AS(e,t,n){e.callbacks_.push(function(r){let i=t;if(!i||!DS(i,r))return;r.mapSetPlugin_?.fixSetContents(i);let a=nS(i);kS(e,i.draft_??i,a,n),jS(i,r)})}function jS(e,t){if(e.modified_&&!e.finalized_&&(e.type_===3||e.type_===1&&e.allIndicesReassigned_||(e.assigned_?.size??0)>0)){let{patchPlugin_:n}=t;if(n){let r=n.getPath(e);r&&n.generatePatches_(e,r,t)}ES(e)}}function MS(e,t,n){let{scope_:r}=e;if(Ix(n)){let i=n[Tx];DS(i,r)&&i.callbacks_.push(function(){HS(e),kS(e,n,nS(i),t)})}else Lx(n)&&e.callbacks_.push(function(){let i=tS(e);e.type_===3?i.has(n)&&NS(n,r.handledSet_,r):Wx(i,t,e.type_)===n&&r.drafts_.length>1&&(e.assigned_.get(t)??!1)===!0&&e.copy_&&NS(Wx(e.copy_,t,e.type_),r.handledSet_,r)})}function NS(e,t,n){return!n.immer_.autoFreeze_&&n.unfinalizedDrafts_<1||Ix(e)||t.has(e)||!Lx(e)||sS(e)?e:(t.add(e),Vx(e,(r,i)=>{if(Ix(i)){let t=i[Tx];DS(t,n)&&(Gx(e,r,nS(t),e.type_),ES(t))}else Lx(i)&&NS(i,t,n)}),e)}function PS(e,t){let n=qx(e),r={type_:+!!n,scope_:t?t.scope_:gS(),modified_:!1,finalized_:!1,assigned_:void 0,parent_:t,base_:e,draft_:null,copy_:null,revoke_:null,isManual_:!1,callbacks_:void 0},i=r,a=FS;n&&(i=[r],a=IS);let{revoke:o,proxy:s}=Proxy.revocable(i,a);return r.draft_=s,r.revoke_=o,[s,r]}var FS={get(e,t){if(t===Tx)return e;let n=e.scope_.arrayMethodsPlugin_,r=e.type_===1&&typeof t==`string`;if(r&&n?.isArrayOperationMethod(t))return n.createMethodInterceptor(e,t);let i=tS(e);if(!Ux(i,t,e.type_))return zS(e,i,t);let a=i[t];if(e.finalized_||!Lx(a)||r&&e.operationMethod&&n?.isMutatingArrayMethod(e.operationMethod)&&$x(t))return a;if(a===LS(e.base_,t)||RS(e,t,a)){HS(e);let n=e.type_===1?+t:t,r=WS(e.scope_,a,e,n);return e.copy_[n]=r}return a},has(e,t){return t in tS(e)},ownKeys(e){return Reflect.ownKeys(tS(e))},set(e,t,n){let r=BS(tS(e),t);if(r?.set)return r.set.call(e.draft_,n),!0;if(!e.modified_){let r=LS(tS(e),t),i=r?.[Tx];if(i&&i.base_===n)return e.copy_[t]=n,e.assigned_.set(t,!1),!0;if(Kx(n,r)&&(n!==void 0||Ux(e.base_,t,e.type_)))return!0;HS(e),VS(e)}return e.copy_[t]===n&&(n!==void 0||Ux(e.copy_,t,e.type_))||Number.isNaN(n)&&Number.isNaN(e.copy_[t])?!0:(e.copy_[t]=n,e.assigned_.set(t,!0),MS(e,t,n),!0)},deleteProperty(e,t){return HS(e),LS(e.base_,t)!==void 0||t in e.base_?(e.assigned_.set(t,!1),VS(e)):e.assigned_.delete(t),e.copy_&&delete e.copy_[t],!0},getOwnPropertyDescriptor(e,t){let n=tS(e),r=Reflect.getOwnPropertyDescriptor(n,t);return r&&{[Px]:!0,[Mx]:e.type_!==1||t!==`length`,[Nx]:r[Nx],[Fx]:n[t]}},defineProperty(){Dx(11)},getPrototypeOf(e){return kx(e.base_)},setPrototypeOf(){Dx(12)}},IS={};for(let e in FS){let t=FS[e];IS[e]=function(){let e=arguments;return e[0]=e[0][0],t.apply(this,e)}}IS.deleteProperty=function(e,t){return isNaN(parseInt(t))&&Dx(13),IS.set.call(this,e,t,void 0)},IS.set=function(e,t,n){return t!==`length`&&isNaN(parseInt(t))&&Dx(14),FS.set.call(this,e[0],t,n,e[0])};function LS(e,t){let n=e[Tx];return(n?tS(n):e)[t]}function RS(e,t,n){return e.type_!==1||!e.allIndicesReassigned_||e.assigned_?.get(t)||!Lx(n)||n[Tx]?!1:e.baseRefs_.has(n)}function zS(e,t,n){let r=BS(t,n);return r?Fx in r?r[Fx]:r.get?.call(e.draft_):void 0}function BS(e,t){if(!(t in e))return;let n=kx(e);for(;n;){let e=Object.getOwnPropertyDescriptor(n,t);if(e)return e;n=kx(n)}}function VS(e){e.modified_||(e.modified_=!0,e.parent_&&VS(e.parent_))}function HS(e){e.copy_||=(e.assigned_=new Map,rS(e.base_,e.scope_.immer_.useStrictShallowCopy_))}var US=class{constructor(e){this.autoFreeze_=!0,this.useStrictShallowCopy_=!1,this.useStrictIteration_=!1,this.produce=(e,t,n)=>{if(Zx(e)&&!Zx(t)){let n=t;t=e;let r=this;return function(e=n,...i){return r.produce(e,e=>t.call(this,e,...i))}}Zx(t)||Dx(6),n!==void 0&&!Zx(n)&&Dx(7);let r;if(Lx(e)){let i=xS(this),a=WS(i,e,void 0),o=!0;try{r=t(a),o=!1}finally{o?yS(i):bS(i)}return vS(i,n),CS(r,i)}if(!e||!Xx(e)){if(r=t(e),r===void 0&&(r=e),r===Cx&&(r=void 0),this.autoFreeze_&&iS(r,!0),n){let t=[],i=[];fS(lS).generateReplacementPatches_(e,r,{patches_:t,inversePatches_:i}),n(t,i)}return r}Dx(1,e)},this.produceWithPatches=(e,t)=>{if(Zx(e))return(t,...n)=>this.produceWithPatches(t,t=>e(t,...n));let n,r;return[this.produce(e,t,(e,t)=>{n=e,r=t}),n,r]},Qx(e?.autoFreeze)&&this.setAutoFreeze(e.autoFreeze),Qx(e?.useStrictShallowCopy)&&this.setUseStrictShallowCopy(e.useStrictShallowCopy),Qx(e?.useStrictIteration)&&this.setUseStrictIteration(e.useStrictIteration)}createDraft(e){Lx(e)||Dx(8),Ix(e)&&(e=GS(e));let t=xS(this),n=WS(t,e,void 0);return n[Tx].isManual_=!0,bS(t),n}finishDraft(e,t){let n=e&&e[Tx];(!n||!n.isManual_)&&Dx(9);let{scope_:r}=n;return vS(r,t),CS(void 0,r)}setAutoFreeze(e){this.autoFreeze_=e}setUseStrictShallowCopy(e){this.useStrictShallowCopy_=e}setUseStrictIteration(e){this.useStrictIteration_=e}shouldUseStrictIteration(){return this.useStrictIteration_}applyPatches(e,t){let n;for(n=t.length-1;n>=0;n--){let r=t[n];if(r.path.length===0&&r.op===`replace`){e=r.value;break}}n>-1&&(t=t.slice(n+1));let r=fS(lS).applyPatches_;return Ix(e)?r(e,t):this.produce(e,e=>r(e,t))}};function WS(e,t,n,r){let[i,a]=Jx(t)?fS(cS).proxyMap_(t,n):Yx(t)?fS(cS).proxySet_(t,n):PS(t,n);return(n?.scope_??gS()).drafts_.push(i),a.callbacks_=n?.callbacks_??[],a.key_=r,n&&r!==void 0?AS(n,a,r):a.callbacks_.push(function(e){e.mapSetPlugin_?.fixSetContents(a);let{patchPlugin_:t}=e;a.modified_&&t&&t.generatePatches_(a,[],e)}),i}function GS(e){return Ix(e)||Dx(10,e),KS(e)}function KS(e){if(!Lx(e)||sS(e))return e;let t=e[Tx],n,r=!0;if(t){if(!t.modified_)return t.base_;t.finalized_=!0,n=rS(e,t.scope_.immer_.useStrictShallowCopy_),r=t.scope_.immer_.shouldUseStrictIteration()}else n=rS(e,!0);return Vx(n,(e,t)=>{Gx(n,e,KS(t))},r),t&&(t.finalized_=!1),n}function qS(){Ex.push(`Sets cannot have "replace" patches.`,function(e){return`Unsupported patch operation: `+e},function(e){return`Cannot apply patch, path doesn't resolve: `+e},`Patching reserved attributes like __proto__, prototype and constructor is not allowed`);function e(n,r=[]){if(n.key_!==void 0){let e=n.parent_.copy_??n.parent_.base_,t=eS(Wx(e,n.key_)),i=Wx(e,n.key_);if(i===void 0||i!==n.draft_&&i!==n.base_&&i!==n.copy_||t!=null&&t.base_!==n.base_)return null;let a=n.parent_.type_===3,o;if(a){let e=n.parent_;o=Array.from(e.drafts_.keys()).indexOf(n.key_)}else o=n.key_;if(!(a&&e.size>o||Ux(e,o)))return null;r.push(o)}if(n.parent_)return e(n.parent_,r);r.reverse();try{t(n.copy_,r)}catch{return null}return r}function t(e,t){let n=e;for(let e=0;e{let u=Wx(o,e,c),f=Wx(s,e,c),p=l?Ux(o,e)?n:`add`:r;if(u===f&&p===n)return;let m=t.concat(e);i.push(p===r?{op:p,path:m}:{op:p,path:m,value:d(f)}),a.push(p===`add`?{op:r,path:m}:p===r?{op:`add`,path:m,value:d(u)}:{op:n,path:m,value:d(u)})})}function s(e,t,n,i){let{base_:a,copy_:o}=e,s=0;a.forEach(e=>{if(!o.has(e)){let a=t.concat([s]);n.push({op:r,path:a,value:e}),i.unshift({op:`add`,path:a,value:e})}s++}),s=0,o.forEach(e=>{if(!a.has(e)){let a=t.concat([s]);n.push({op:`add`,path:a,value:e}),i.unshift({op:r,path:a,value:e})}s++})}function c(e,t,r){let{patches_:i,inversePatches_:a}=r;i.push({op:n,path:[],value:t===Cx?void 0:t}),a.push({op:n,path:[],value:e})}function l(e,t){return t.forEach(t=>{let{path:i,op:a}=t,o=e;for(let e=0;e[e,u(t)]));if(Yx(e))return new Set(Array.from(e).map(u));let t=Object.create(kx(e));for(let n in e)t[n]=u(e[n]);return Ux(e,wx)&&(t[wx]=e[wx]),t}function d(e){return Ix(e)?u(e):e}mS(lS,{applyPatches_:l,generatePatches_:i,generateReplacementPatches_:c,getPath:e})}globalThis.Iterator?.from;var JS=new US,YS=JS.produce,XS=JS.produceWithPatches.bind(JS),ZS=JS.applyPatches.bind(JS),QS=1e3;function $S(e,t){if(e.add(t),e.size>QS){let t=e.values().next().value;t!==void 0&&e.delete(t)}}function eC(e){let{enablePatches:t=!1}=e;t&&qS();let n=mx(),r=e.initialValue,i=new Set;return{on:n.on,value:()=>r,patch:(e,t=Sx())=>{i.has(t)||(qS(),r=ZS(r,e),$S(i,t),n.emit(`updated`,r,void 0,t))},mutate:(e,a=Sx())=>{if(!i.has(a)){if($S(i,a),t){let[t,i]=XS(r,e);if(t===r)return;r=t,n.emit(`updated`,r,i,a)}else{let t=YS(r,e);if(t===r)return;r=t,n.emit(`updated`,r,void 0,a)}}},syncIds:i}}var tC=typeof self==`object`?self:globalThis,nC=new Set([`Error`,`EvalError`,`RangeError`,`ReferenceError`,`SyntaxError`,`TypeError`,`URIError`,`AggregateError`]),rC=new Set([`Boolean`,`Number`,`String`,`Int8Array`,`Uint8Array`,`Uint8ClampedArray`,`Int16Array`,`Uint16Array`,`Int32Array`,`Uint32Array`,`Float16Array`,`Float32Array`,`Float64Array`,`BigInt64Array`,`BigUint64Array`]);function iC(e,t){let n=(t,n)=>(e.set(n,t),t),r=i=>{if(e.has(i))return e.get(i);let[a,o]=t[i];switch(a){case 0:case-1:return n(o,i);case 1:{let e=n([],i);for(let t of o)e.push(r(t));return e}case 2:{let e=n({},i);for(let[t,n]of o)e[r(t)]=r(n);return e}case 3:return n(new Date(o),i);case 4:{let{source:e,flags:t}=o;return n(new RegExp(e,t),i)}case 5:{let e=n(new Map,i);for(let[t,n]of o)e.set(r(t),r(n));return e}case 6:{let e=n(new Set,i);for(let t of o)e.add(r(t));return e}case 7:{let{name:e,message:t}=o,r=nC.has(e)?tC[e]:void 0;return n(new(r??tC.Error)(t),i)}case 8:return n(BigInt(o),i);case`BigInt`:return n(Object(BigInt(o)),i);case`ArrayBuffer`:return n(new Uint8Array(o).buffer,o);case`DataView`:{let{buffer:e}=new Uint8Array(o);return n(new DataView(e),o)}}if(typeof a==`string`&&rC.has(a))return n(new tC[a](o),i);throw TypeError(`unable to deserialize unsafe or unknown type: ${String(a)}`)};return r}function aC(e){return iC(new Map,e)(0)}var oC=``,{toString:sC}={},{keys:cC}=Object;function lC(e){let t=typeof e;if(t!==`object`||!e)return[0,t];let n=sC.call(e).slice(8,-1);switch(n){case`Array`:return[1,oC];case`Object`:return[2,oC];case`Date`:return[3,oC];case`RegExp`:return[4,oC];case`Map`:return[5,oC];case`Set`:return[6,oC];case`DataView`:return[1,n]}return n.includes(`Array`)?[1,n]:n.includes(`Error`)?[7,n]:[2,n]}function uC([e,t]){return e===0&&(t===`function`||t===`symbol`)}function dC(e,t,n,r){let i=(e,t)=>{let i=r.push(e)-1;return n.set(t,i),i},a=r=>{if(n.has(r))return n.get(r);let[o,s]=lC(r);switch(o){case 0:{let t=r;switch(s){case`bigint`:o=8,t=r.toString();break;case`function`:case`symbol`:if(e)throw TypeError(`unable to serialize ${s}`);t=null;break;case`undefined`:return i([-1],r)}return i([o,t],r)}case 1:{if(s){let e=r;return s===`DataView`?e=new Uint8Array(r.buffer):s===`ArrayBuffer`&&(e=new Uint8Array(r)),i([s,[...e]],r)}let e=[],t=i([o,e],r);for(let t of r)e.push(a(t));return t}case 2:{if(s)switch(s){case`BigInt`:return i([s,r.toString()],r);case`Boolean`:case`Number`:case`String`:return i([s,r.valueOf()],r)}if(t&&`toJSON`in r)return a(r.toJSON());let n=[],c=i([o,n],r);for(let t of cC(r))(e||!uC(lC(r[t])))&&n.push([a(t),a(r[t])]);return c}case 3:return i([o,r.toISOString()],r);case 4:{let{source:e,flags:t}=r;return i([o,{source:e,flags:t}],r)}case 5:{let t=[],n=i([o,t],r);for(let[n,i]of r)(e||!(uC(lC(n))||uC(lC(i))))&&t.push([a(n),a(i)]);return n}case 6:{let t=[],n=i([o,t],r);for(let n of r)(e||!uC(lC(n)))&&t.push(a(n));return n}}let{message:c}=r;return i([o,{name:s,message:c}],r)};return a}function fC(e,t={}){let n=[];return dC(!(t.json||t.lossy),!!t.json,new Map,n)(e),n}var{parse:pC,stringify:mC}=JSON,hC={json:!0,lossy:!0};function gC(e){return aC(pC(e))}function _C(e){return mC(fC(e,hC))}function vC(e){return aC(e)}function yC(e){return _C(e)}function bC(e){return gC(e)}var xC=256,SC=class extends Error{name=`StreamClosedError`};function CC(e={}){let t=e.id??Sx(),n=Math.max(0,e.replayWindow??0),r=mx(),i=new AbortController,a=[],o=!1,s=0;function c(e){if(o)throw new SC(`Cannot write to a closed stream "${t}"`);s+=1,n>0&&(a.push({seq:s,chunk:e}),a.length>n&&(a.length-n===1?a.shift():a.splice(0,a.length-n))),r.emit(`chunk`,s,e)}function l(e){if(o)return;o=!0;let t=TC(e);i.abort(e),r.emit(`end`,t)}function u(){o||(o=!0,i.signal.aborted||i.abort(`stream closed`),r.emit(`end`,void 0))}function d(e){o||i.signal.aborted||i.abort(e??`aborted`)}let f=new WritableStream({write(e){c(e)},close(){u()},abort(e){l(e)}});return{id:t,signal:i.signal,get closed(){return o},get lastSeq(){return s},write:c,error:l,close:u,abort:d,writable:f,events:r,buffer:a}}function wC(e={}){let t=e.id??Sx(),n=Math.max(1,e.highWaterMark??xC),r=[],i=0,a=!1,o=!1,s,c,l,u;function d(){if(c){if(r.length>0){let e=r.shift(),t=c;c=void 0,t.resolve({value:e,done:!1});return}if(a){let e=c;if(c=void 0,s){let t=Error(s.message);t.name=s.name,e.reject(t)}else e.resolve({value:void 0,done:!0})}}}function f(){if(l){for(;r.length>0;){let e=r.shift();try{l.enqueue(e)}catch{break}}if(a&&l){try{if(s){let e=Error(s.message);e.name=s.name,l.error(e)}else l.close()}catch{}l=void 0}}}function p(t,s){if(!(a||o)&&!(t<=i)){if(i=t,r.push(s),r.length>n){let t=r.length-n;r.splice(0,t),e.onOverflow?.(t)}d(),u&&f()}}function m(e){a||(a=!0,s=e,d(),u&&f())}function h(){o||a||(o=!0,e.onCancel?.(),m(void 0))}function g(){return u||(u=new ReadableStream({start(e){l=e,f()},cancel(){h()}}),u)}return{id:t,get cancelled(){return o},get done(){return a},get lastSeenSeq(){return i},get readable(){return g()},cancel:h,_push:p,_end:m,[Symbol.asyncIterator](){return{next(){if(r.length>0)return Promise.resolve({value:r.shift(),done:!1});if(a){if(s){let e=Error(s.message);return e.name=s.name,Promise.reject(e)}return Promise.resolve({value:void 0,done:!0})}return new Promise((e,t)=>{c={resolve:e,reject:t}})},return(){return h(),Promise.resolve({value:void 0,done:!0})}}}}}function TC(e){if(e instanceof Error)return{name:e.name||`Error`,message:e.message};if(typeof e==`string`)return{name:`Error`,message:e};try{return{name:`Error`,message:JSON.stringify(e)}}catch{return{name:`Error`,message:String(e)}}}var EC=128;function DC(e){return e.replace(/[^\w-]+/g,`_`).slice(0,EC)}var OC=`modulepreload`,kC=function(e,t){return new URL(e,t).href},AC={},jC=function(e,t,n){let r=Promise.resolve();if(t&&t.length>0){let e=document.getElementsByTagName(`link`),i=document.querySelector(`meta[property=csp-nonce]`),a=i?.nonce||i?.getAttribute(`nonce`);function o(e){return Promise.all(e.map(e=>Promise.resolve(e).then(e=>({status:`fulfilled`,value:e}),e=>({status:`rejected`,reason:e}))))}function s(e){return import.meta.resolve?import.meta.resolve(e):new URL(e,import.meta.url).href}r=o(t.map(t=>{if(t=kC(t,n),t=s(t),t in AC)return;AC[t]=!0;let r=t.endsWith(`.css`);for(let n=e.length-1;n>=0;n--){let i=e[n];if(i.href===t&&(!r||i.rel===`stylesheet`))return}let i=document.createElement(`link`);if(i.rel=r?`stylesheet`:OC,r||(i.as=`script`),i.crossOrigin=``,i.href=t,a&&i.setAttribute(`nonce`,a),document.head.appendChild(i),r)return new Promise((e,n)=>{i.addEventListener(`load`,e),i.addEventListener(`error`,()=>n(Error(`Unable to preload CSS for ${t}`)))})}).filter(e=>e!==void 0))}function i(e){let t=new Event(`vite:preloadError`,{cancelable:!0});if(t.payload=e,window.dispatchEvent(t),!t.defaultPrevented)throw e}return r.then(t=>{for(let e of t||[])e.status===`rejected`&&i(e.reason);return e().catch(i)})},MC=`__connection.json`,NC=`__DEVFRAME_CONNECTION__`,PC=`x-birpc-session`,FC=`__rpc-dump/index.json`,IC=`devframe:services`,LC=`devframe_otp`,RC=`devframe_auth_token`;Pb.postMessage.remoteAssetsError;var zC=class{cacheMap=new Map;options;keySerializer;constructor(e){this.options=e,this.keySerializer=e.keySerializer||(e=>px(e))}updateOptions(e){this.options={...this.options,...e}}cached(e,t){let n=this.cacheMap.get(e);if(n)return n.get(this.keySerializer(t))}has(e,t){return this.cacheMap.get(e)?.has(this.keySerializer(t))??!1}apply(e,t){let n=this.cacheMap.get(e.m)||new Map;n.set(this.keySerializer(e.a),t),this.cacheMap.set(e.m,n)}validate(e){return this.options.functions.includes(e)}clear(e){e?this.cacheMap.delete(e):this.cacheMap.clear()}},BC=Lb({docsBase:`https://devfra.me/errors`,codes:{DF0019:{why:e=>`RPC function "${e.name}" has \`agent\` set but \`jsonSerializable\` is \`false\`; MCP requires JSON-serializable data.`,fix:"Remove `jsonSerializable: false`, or remove `agent` to keep it RPC-only."},DF0020:{why:e=>`RPC function "${e.name}" declares \`jsonSerializable: true\` but the value at "${e.path}" is a ${e.type}.`,fix:"Either drop `jsonSerializable: true` (falls back to structured-clone) or change the value to a JSON-safe shape."},DF0021:{why:e=>`RPC function "${e.name}" is already registered`,fix:"Use the `force` parameter to overwrite an existing registration."},DF0022:{why:e=>`RPC function "${e.name}" is not registered. Use register() to add new functions.`},DF0023:{why:e=>`RPC function "${e.name}" is not registered`},DF0024:{why:e=>`Either handler or setup function must be provided for RPC function "${e.name}"`},DF0025:{why:e=>`Function "${e.name}" not found in dump store`},DF0026:{why:e=>`No dump match for "${e.name}" with args: ${e.args}`},DF0027:{why:e=>`Function "${e.name}" with type "${e.type}" cannot have dump configuration. Only "static" and "query" types support dumps.`},DF0028:{why:e=>`Function "${e.name}" with type "${e.type}" cannot use \`snapshot: true\`. Only "query" functions support this sugar; "static" functions have equivalent default behavior already.`,fix:"Remove `snapshot: true`, or change the function type to `query`."},DF0043:{why:e=>`RPC function "${e.name}" received an invalid argument at position ${e.index}: ${e.issues}`,fix:"Pass a value that satisfies the `args` schema declared for this function."},DF0044:{why:e=>`RPC function "${e.name}" returned a value that failed its \`returns\` schema: ${e.issues}`,fix:"Make the handler return a value that satisfies the `returns` schema, or relax the schema."}}});function VC(e){if(e.agent&&e.jsonSerializable===!1)throw BC.DF0019({name:e.name});e.agent&&!e.jsonSerializable&&(e.jsonSerializable=!0)}async function HC(e,t){let n=e[`~standard`].validate(t);return n instanceof Promise?await n:n}function UC(e){return e.map(e=>{let t=e.path?.map(e=>typeof e==`object`?e.key:e).join(`.`);return t?`${t}: ${e.message}`:e.message}).join(`; `)}async function WC(e,t,n){let r=n.slice();if(!t||t.length===0)return r;for(let r=0;r{n.get(t)===r&&n.delete(t)}),n.set(t,r)),await r}if(!e.__promise){let n=Promise.resolve(e.setup(t));n.catch(()=>{e.__promise===n&&(e.__promise=void 0)}),e.__promise=n}return await e.__promise}async function qC(e,t){let n=e.handler;if(!n){let r=await KC(e,t);if(!r.handler)throw BC.DF0024({name:e.name});n=r.handler}let r=e.args,i=e.returns;if(!r&&!i)return n;let a=n;return async(...t)=>{let n=await WC(e.name,r,t),o=await a(...n);return await GC(e.name,i,o)}}var JC=class{context;definitions=new Map;functions;_onChanged=[];constructor(e){this.context=e;let t=this.definitions,n=this;this.functions=new Proxy({},{get(e,r){let i=t.get(r);if(i)return qC(i,n.context)},has(e,n){return t.has(n)},getOwnPropertyDescriptor(e,n){return{value:t.get(n)?.handler,configurable:!0,enumerable:!0}},ownKeys(){return Array.from(t.keys())}})}register(e,t=!1){if(this.definitions.has(e.name)&&!t)throw BC.DF0021({name:e.name});VC(e),this.definitions.set(e.name,e),this._onChanged.forEach(t=>t(e.name))}update(e,t=!1){if(!this.definitions.has(e.name)&&!t)throw BC.DF0022({name:e.name});VC(e),this.definitions.set(e.name,e),this._onChanged.forEach(t=>t(e.name))}onChanged(e){return this._onChanged.push(e),()=>{let t=this._onChanged.indexOf(e);t!==-1&&this._onChanged.splice(t,1)}}async getHandler(e){return await qC(this.definitions.get(e),this.context)}getSchema(e){let t=this.definitions.get(e);if(!t)throw BC.DF0023({name:String(e)});return{args:t.args,returns:t.returns}}has(e){return this.definitions.has(e)}get(e){return this.definitions.get(e)}list(){return Array.from(this.definitions.keys())}};function YC(e,t=``){return JSON.stringify(e,function(e,n){let r=this,i=r==null?n:r[e];if(i===void 0){if(Array.isArray(r))throw ZC(t,`undefined`,r,e);return n}return i!==null&&XC(i,r,e,t),n})}function XC(e,t,n,r){if(typeof e==`bigint`)throw ZC(r,`BigInt`,t,n);if(typeof e!=`object`)return;if(e instanceof Map)throw ZC(r,`Map`,t,n);if(e instanceof Set)throw ZC(r,`Set`,t,n);if(e instanceof Date)throw ZC(r,`Date`,t,n);if(Array.isArray(e))return;let i=Object.getPrototypeOf(e);if(i!==null&&i!==Object.prototype)throw ZC(r,e.constructor?.name??`class instance`,t,n)}function ZC(e,t,n,r){let i=QC(n,r);return BC.DF0020({name:e||``,type:t,path:i})}function QC(e,t){return Array.isArray(e)?`[${t}]`:t===``?``:t}var $C=`__DEVFRAME_CONNECTION_META__`,ew=`__DEVFRAME_CONNECTION_AUTH_TOKEN__`;function tw(e){let t=[()=>window?.[e],()=>globalThis?.[e],()=>parent.window?.[e]];for(let e of t)try{let t=e();if(t)return t}catch{}}function nw(){return tw(NC)}function rw(){return tw($C)}function iw(e){if(e)return e;try{let e=localStorage.getItem(ew);if(e)return e}catch{}return tw(ew)}function aw(e){globalThis[NC]=e,globalThis[$C]={...e.connectionMeta,baseUrl:e.metaBaseUrl},e.authToken&&ow(e.authToken)}function ow(e){try{localStorage.setItem(ew,e)}catch{}globalThis[ew]=e;let t=nw();t&&(globalThis[NC]={...t,authToken:e})}function sw(e){let t=yx(MC,e);try{return new URL(t,globalThis.location?.href).href}catch{return t}}function cw(e,t){return t&&t!==e.authToken?{...e,authToken:t}:e}function lw(){let e=nw();if(e)return cw(e,iw()??e.authToken??e.connectionMeta.authToken);let t=rw();if(t)return{connectionMeta:t,metaBaseUrl:t.baseUrl??sw(`./`),authToken:iw(t.authToken)}}async function uw(e={}){if(e.connection){let t=cw(e.connection,iw(e.authToken??e.connection.authToken??e.connection.connectionMeta.authToken));return aw(t),t}let t=Array.isArray(e.baseURL)?e.baseURL:[e.baseURL??`./`];if(e.connectionMeta){let n={connectionMeta:e.connectionMeta,metaBaseUrl:sw(t[0]??`./`),authToken:iw(e.authToken??e.connectionMeta.authToken)};return aw(n),n}let n=lw();if(n){let t=cw(n,iw(e.authToken??n.authToken??n.connectionMeta.authToken));return aw(t),t}let r=[];for(let n of t){let t=yx(MC,n),i=sw(n);try{let n=await fetch(t);if(!n.ok)throw Error(`Failed to fetch connection meta from ${i}: ${n.status}`);let r=await n.json(),a=n.url||i,o={connectionMeta:r,metaBaseUrl:r.baseUrl?new URL(r.baseUrl,a).href:a,authToken:iw(e.authToken??r.authToken)};return aw(o),o}catch(e){r.push(e)}}throw Error(`Failed to get connection meta from ${t.join(`, `)}`,{cause:r})}var dw=class extends Error{name=`DevframeConnectionError`;kind;constructor(e,t,n){super(t,n),this.kind=e}};function fw(e=LC){try{let t=globalThis.location?.hash?.replace(/^#/,``)??``;return new URLSearchParams(t).get(e)||void 0}catch{return}}function pw(e){try{let t=new URL(globalThis.location.href),n=new URLSearchParams(t.hash.replace(/^#/,``));if(!n.has(e))return;n.delete(e),t.hash=n.toString(),globalThis.history?.replaceState(globalThis.history.state,``,t.href)}catch{}}function mw(e=LC){let t=fw(e);return t&&pw(e),t}async function hw(e,t={}){let n=mw(t.param??`devframe_otp`);return n?e.isTrusted?!0:e.requestTrustWithCode(n):!1}function gw(e){let t={},n=new WeakMap,r,i=()=>(r??=e.sharedState.get(IC,{initialValue:{}}).then(e=>(t=e.value(),e.on(`updated`,e=>{t=e}),e)),r);return i(),{state:i,has:e=>e in t,keys:()=>Object.keys(t),get:r=>{let i=t[r];if(!i)return;let a=n.get(i);return a||(a={...i,rpc:e.scope(i.scope).rpc},n.set(i,a)),a}}}function _w(e){let t=new Map,n=new Map,r=new Map,i=new Set,a=e.connectionMeta.backend===`static`;function o(e,t){let n=r.get(e);return n&&typeof n==`object`&&!Array.isArray(n)&&typeof t==`object`&&!Array.isArray(t)?{...n,...t}:t}e.client.register({name:Pb.broadcast.clientStateUpdated,type:`event`,handler:(e,n,r)=>{let i=t.get(e);i&&!i.syncIds.has(r)&&i.mutate(()=>o(e,n),r)}}),e.client.register({name:Pb.broadcast.clientStatePatch,type:`event`,handler:(e,n,r)=>{let i=t.get(e);i&&!i.syncIds.has(r)&&i.patch(n,r)}});function s(t,n){let r=[];return r.push(n.on(`updated`,(n,r,i)=>{a||(r?e.callEvent(`devframe:rpc:server-state:patch`,t,r,i):e.callEvent(`devframe:rpc:server-state:set`,t,n,i))})),()=>{for(let e of r)e()}}return{keys:()=>Array.from(t.keys()),onKeyAdded(e){return i.add(e),()=>{i.delete(e)}},delete(e){let i=n.get(e);n.delete(e);let a=t.delete(e);return r.delete(e),i?.(),a},get:async(c,l)=>{if(l?.initialValue!==void 0&&r.set(c,l.initialValue),t.has(c))return t.get(c);let u=eC({initialValue:l?.initialValue,enablePatches:!1});async function d(){if(a||e.callEvent(`devframe:rpc:server-state:subscribe`,c),l?.initialValue!==void 0){t.set(c,u);for(let e of i)e(c);return e.call(`devframe:rpc:server-state:get`,c).then(e=>{e!==void 0&&u.mutate(()=>o(c,e))}).catch(e=>{console.error(`Error getting server state`,e)}),n.set(c,s(c,u)),u}{let r=await e.call(`devframe:rpc:server-state:get`,c);u.mutate(()=>o(c,r)),t.set(c,u);for(let e of i)e(c);return n.set(c,s(c,u)),u}}return new Promise(t=>{if(e.isTrusted)d().then(t);else{t(u);let n=!1;e.events.on(Pb.client.isTrustedUpdated,e=>{e&&!n&&(n=!0,d())})}})}}}var vw=new Map;function yw(e=vw){let t=new Map;return{serialize:n=>{let r;return n.t===`q`?r=n.m:(r=t.get(n.i),t.delete(n.i)),!(n.t===`s`&&`e`in n)&&r&&e.get(r)?.jsonSerializable===!0?YC(n,r??``):`s:${yC(n)}`},deserialize:e=>{let n=e.startsWith(`s:`)?bC(e.slice(2)):JSON.parse(e);return n.t===`q`&&n.i&&n.m&&t.set(n.i,n.m),n}}}function bw(){}function xw(e){let t=e.search(/\n\n|\r\n\r\n/);if(!(t<0))return{frame:e.slice(0,t),rest:e.slice(t+(e[t]===`\r`?4:2))}}function Sw(e){let t=`message`,n=[];for(let r of e.split(/\r?\n/))r.startsWith(`:`)||(r.startsWith(`event:`)?t=r.slice(6).trimStart():r.startsWith(`data:`)&&n.push(r.slice(5).replace(/^ /,``)));return{event:t,data:n}}function Cw(e){let{onConnected:t=bw,onError:n=bw,onDisconnected:r=bw,definitions:i,fetch:a=globalThis.fetch.bind(globalThis)}=e,o=e.url;e.authToken&&(o=`${o}${o.includes(`?`)?`&`:`?`}${RC}=${encodeURIComponent(e.authToken)}`);let s=yw(i),c=new AbortController,l=!1,u,d,f,p,m=new Promise((e,t)=>{f=e,p=t});m.catch(()=>{});function h(e){l||(l=!0,p(e),n(e),r())}function g(){l||(l=!0,p(Error(`Devframe SSE stream closed`)),r())}function _(e,n){if(e===`session`){f(n),t();return}u?.(n)}async function ee(e){let t=e.getReader();d=t;let n=new TextDecoder,r=``;for(;;){let{done:e,value:i}=await t.read();if(e)break;for(r+=n.decode(i,{stream:!0});;){let e=xw(r);if(!e)break;r=e.rest;let{event:t,data:n}=Sw(e.frame);n.length>0&&_(t,n.join(` -`))}}g()}return(async()=>{try{let e=await a(o,{headers:{accept:`text/event-stream`},signal:c.signal});if(!e.ok||!e.body)throw Error(`Devframe SSE stream request failed: ${e.status}`);await ee(e.body)}catch(e){if(c.signal.aborted){g();return}h(e instanceof Error?e:Error(String(e)))}})(),{close:()=>{l=!0,c.abort(),d?.cancel().catch(()=>{})},on:e=>{u=e},post:async e=>{let t;try{t=await m}catch{return}if(l){n(Error(`Devframe SSE channel is closed; message dropped`));return}try{let n=await a(o,{method:`POST`,headers:{"content-type":`text/plain; charset=utf-8`,[PC]:t},body:e});if(n.status===200){let e=await n.text();e&&u?.(e);return}if(!n.ok)throw Error(`Devframe SSE POST failed: ${n.status}`)}catch(e){n(e instanceof Error?e:Error(String(e)))}},serialize:s.serialize,deserialize:s.deserialize}}function ww(e,t){let{channel:n,rpcOptions:r={}}=t;return qb(e,{...n,timeout:-1,...r,proxify:!1})}function Tw(e){let{transport:t,authToken:n,connectionMeta:r,events:i,clientRpc:a,rpcOptions:o={},callTimeout:s=0}=e,c=!1,l=`connecting`,u=null,d=Promise.withResolvers();function f(e,t=null){if(t?u=t:e===`connected`&&(u=null),e===l)return;let n=l;l=e,i.emit(Pb.client.connectionStatus,e,n)}let p=new Set;function m(e){for(let t of[...p])t.reject(e)}function h(){return l===`disconnected`||l===`error`?new dw(`connection`,`[devframe] Not connected to the devframe server`,{cause:u??void 0}):l===`unauthorized`?new dw(`auth`,`[devframe] Not authorized by the devframe server`,{cause:u??void 0}):null}function g(e,t){return new Promise((n,r)=>{let a=!1,o,c={reject(e){a||(l(),i.emit(Pb.client.error,e,t),r(e))}};function l(){a=!0,p.delete(c),o&&clearTimeout(o)}p.add(c),s>0&&(o=setTimeout(()=>{c.reject(new dw(`timeout`,`[devframe] RPC call "${t}" timed out after ${s}ms`))},s)),e.then(e=>{a||(l(),n(e))},e=>{if(a)return;l();let n=e instanceof Error?e:Error(String(e));i.emit(Pb.client.error,n,t),r(n)})})}let _=new Map;for(let e of r.jsonSerializableMethods??[])_.set(e,{jsonSerializable:!0});let ee=e.createChannel({definitions:_,onError(e){f(`error`,e),i.emit(Pb.client.connectionError,e),m(new dw(`connection`,`[devframe] Connection to the devframe server failed`,{cause:e}))},onDisconnected(){l!==`error`&&f(`disconnected`),m(new dw(`connection`,`[devframe] Disconnected from the devframe server`,{cause:u??void 0}))}}),v=ww(a.functions,{channel:ee,rpcOptions:o});a.register({name:Pb.broadcast.authRevoked,type:`event`,handler:()=>{c=!1;let e=new dw(`auth`,`[devframe] The devframe server revoked this client's trust`);f(`unauthorized`,e),i.emit(Pb.client.connectionError,e),m(e),i.emit(Pb.client.isTrustedUpdated,!1)}});let te=n;async function ne(e){te=e;let t=await v.$call(`anonymous:devframe:auth`,{authToken:e,ua:navigator.userAgent,origin:location.origin});if(c=t.isTrusted,c)d.resolve(!0),f(`connected`);else{let e=new dw(`auth`,`[devframe] The devframe server refused this client's credentials`);f(`unauthorized`,e),i.emit(Pb.client.connectionError,e)}return i.emit(Pb.client.isTrustedUpdated,c),t.isTrusted}async function re(e){let t=(await v.$call(`anonymous:devframe:auth:exchange`,{code:e,ua:navigator.userAgent,origin:location.origin}))?.authToken??null;return t&&(te=t,c=!0,d.resolve(!0),f(`connected`),i.emit(Pb.client.isTrustedUpdated,!0)),t}async function ie(e={}){await v.$call(`anonymous:devframe:auth:request-code`,{ua:navigator.userAgent,origin:location.origin,...e.reissue?{reissue:!0}:{}})}async function ae(){return c?!0:ne(te??``)}async function oe(e=6e4){if(c&&d.resolve(!0),e<=0)return d.promise;let t;try{return await Promise.race([d.promise,new Promise((n,r)=>{t=setTimeout(()=>{r(Error(`[devframe] Timeout waiting for rpc to be trusted`))},e)})]),c}finally{clearTimeout(t)}}return{transport:t,get isTrusted(){return c},get status(){return l},get connectionError(){return u},requestTrust:ae,requestTrustWithToken:ne,requestTrustWithCode:re,requestAuthCode:ie,ensureTrusted:oe,call:(...e)=>{let t=String(e[0]),n=h();return n?(i.emit(Pb.client.error,n,t),Promise.reject(n)):g(v.$call(...e),t)},callEvent:(...e)=>{let t=h();if(t){i.emit(Pb.client.error,t,String(e[0]));return}return v.$callEvent(...e)},callOptional:(...e)=>{let t=String(e[0]),n=h();return n?(i.emit(Pb.client.error,n,t),Promise.reject(n)):g(v.$callOptional(...e),t)},close:()=>{ee.close()}}}function Ew(e,t,n){let r=(()=>{try{return new URL(t,n.href)}catch{return new URL(n.href)}})();if(e&&typeof e==`object`){if(e.host!=null||e.port!=null){let t=e.host??`${r.hostname}:${e.port}`;return new URL(e.path??`/`,`${r.protocol}//${t}`).href}return new URL(e.path??``,r).href}let i=e??``;return/^https?:\/\//i.test(i)?i:new URL(i,r).href}function Dw(e){let{authToken:t,connectionMeta:n,metaBaseUrl:r,events:i,clientRpc:a,rpcOptions:o={},sseOptions:s={},callTimeout:c=0}=e,l=Ew(n.sse,r??`./`,location);return Tw({transport:`sse`,authToken:t,connectionMeta:n,events:i,clientRpc:a,rpcOptions:o,callTimeout:c,createChannel:e=>Cw({url:l,authToken:t,definitions:e.definitions,...s,onConnected(){s.onConnected?.()},onError(t){e.onError(t),s.onError?.(t)},onDisconnected(){e.onDisconnected(),s.onDisconnected?.()}})})}function Ow(e){let{name:t,message:n,cause:r,...i}=e,a=r instanceof Error?r:kw(r)?Ow(r):r,o=a===void 0?Error(n):Error(n,{cause:a});return o.name=t,Object.assign(o,i),o}function kw(e){return typeof e==`object`&&!!e&&typeof e.message==`string`&&typeof e.name==`string`}function Aw(e){return typeof e==`object`&&!!e&&e.type===`static`&&typeof e.path==`string`}function jw(e){return typeof e==`object`&&!!e&&e.type===`query`&&typeof e.records==`object`&&e.records!==null}function Mw(e){return typeof e==`object`&&!!e&&(`output`in e||`error`in e)}function Nw(e){if(e.error)throw Ow(e.error);return e.output}function Pw(e){return e.some(e=>e!=null)}function Fw(e){return typeof e==`object`&&e&&`serialization`in e&&`data`in e?e.data:e}function Iw(e,t){let n=new Map,r=new Map;function i(e,t){return t===`structured-clone`&&Array.isArray(e)?vC(e):e}function a(e,t){return i(Fw(e),t)}async function o(e){n.has(e.path)||n.set(e.path,t(e.path).then(t=>a(t,e.serialization)));let r=await n.get(e.path);return Mw(r)?Nw(r):r}async function s(e,n){return r.has(e)||r.set(e,t(e).then(e=>a(e,n))),await r.get(e)}async function c(t,n){if(!(t in e))throw Error(`[devframe-rpc] Function "${t}" not found in dump store`);let r=e[t];if(Aw(r)){if(Pw(n))throw Error(`[devframe-rpc] No dump match for "${t}" with args: ${JSON.stringify(n)}`);return await o(r)}if(jw(r)){let e=px(n),i=r.records[e];if(i)return Nw(await s(i,r.serialization));if(r.fallback)return Nw(await s(r.fallback,r.serialization));throw Error(`[devframe-rpc] No dump match for "${t}" with args: ${JSON.stringify(n)}`)}if(!Pw(n))return r;throw Error(`[devframe-rpc] No dump match for "${t}" with args: ${JSON.stringify(n)}`)}return{call:async(e,t)=>await c(e,t),callOptional:async(t,n)=>{if(t in e)return await c(t,n)},callEvent:async(e,t)=>{}}}async function Lw(e){let t=Iw(await e.fetchJsonFromBases(FC),e.fetchJsonFromBases);return{transport:`static`,isTrusted:!0,status:`connected`,connectionError:null,requestTrust:async()=>!0,requestTrustWithToken:async()=>!0,requestTrustWithCode:async()=>null,requestAuthCode:async()=>{},ensureTrusted:async()=>!0,call:(...e)=>t.call(e[0],e.slice(1)),callEvent:(...e)=>t.callEvent(e[0],e.slice(1)),callOptional:(...e)=>t.callOptional(e[0],e.slice(1)),close:()=>{}}}var Rw=``;function zw(e,t){return`${e}${Rw}${t}`}function Bw(e){let t=new Map,n=new Map;e.client.register({name:Pb.broadcast.streamingChunk,type:`event`,handler(e,n,r,i){t.get(zw(e,n))?._push(r,i)}}),e.client.register({name:Pb.broadcast.streamingEnd,type:`event`,handler(e,n,r){let i=zw(e,n),a=t.get(i);a&&(a._end(r),t.delete(i))}}),e.client.register({name:Pb.broadcast.streamingUploadCancel,type:`event`,handler(e,t){let r=zw(e,t),i=n.get(r);i&&(i.abort(`server cancelled upload`),n.delete(r))}}),e.events.on(Pb.client.isTrustedUpdated,n=>{if(n)for(let[n,r]of t){if(r.cancelled||r.done)continue;let t=n.indexOf(Rw);if(t<0)continue;let i=n.slice(0,t),a=n.slice(t+1);e.callEvent(`devframe:streaming:subscribe`,i,a,{afterSeq:r.lastSeenSeq})}});function r(n,r,i={}){let a=zw(n,r),o=t.get(a);if(o)return o;let s=wC({id:r,highWaterMark:i.highWaterMark,onOverflow(e){console.warn(`[devframe] DF0029: Stream "${n}#${r}" dropped ${e} chunk(s) after exceeding the client high-water mark.`)},onCancel(){e.callEvent(`devframe:streaming:cancel`,n,r),t.delete(a)}});if(t.set(a,s),e.isTrusted)e.callEvent(`devframe:streaming:subscribe`,n,r,{afterSeq:0});else{let i=e.events.on(Pb.client.isTrustedUpdated,o=>{o&&(i(),t.has(a)&&!s.cancelled&&!s.done&&e.callEvent(`devframe:streaming:subscribe`,n,r,{afterSeq:s.lastSeenSeq}))})}return s}function i(t,r){let i=zw(t,r),a=n.get(i);if(a)return a;let o=CC({id:r});return o.events.on(`chunk`,(n,i)=>{e.callEvent(`devframe:streaming:upload-chunk`,t,r,n,i)}),o.events.on(`end`,a=>{e.callEvent(`devframe:streaming:upload-end`,t,r,a),n.delete(i)}),n.set(i,o),o}return{subscribe:r,upload:i}}function Vw(){}var Hw=new Map;function Uw(e){let t=e.url;e.authToken&&(t=`${t}?${RC}=${encodeURIComponent(e.authToken)}`);let n=new WebSocket(t),{onConnected:r=Vw,onError:i=Vw,onDisconnected:a=Vw,definitions:o=Hw}=e;n.addEventListener(`open`,e=>{r(e)}),n.addEventListener(`error`,e=>{let t=e instanceof Error?e:Error(e.type);i(t)}),n.addEventListener(`close`,e=>{a(e)});let s=yw(o);return{close:()=>{n.close()},on:e=>{n.addEventListener(`message`,t=>{e(t.data)})},post:e=>{if(n.readyState===WebSocket.OPEN){n.send(e);return}if(n.readyState===WebSocket.CONNECTING){let t=()=>{i(),n.readyState===WebSocket.OPEN&&n.send(e)},r=()=>i();function i(){n.removeEventListener(`open`,t),n.removeEventListener(`close`,r)}n.addEventListener(`open`,t),n.addEventListener(`close`,r);return}i(Error(`Devframe WebSocket is not open; message dropped`))},serialize:s.serialize,deserialize:s.deserialize}}function Ww(e,t,n){let r=(()=>{try{return new URL(t,n.href)}catch{return new URL(n.href)}})(),i=r.protocol===`https:`?`wss:`:`ws:`;if(e&&typeof e==`object`){if(e.host!=null||e.port!=null){let t=e.host??`${r.hostname}:${e.port}`,n=new URL(e.path??`/`,`${i}//${t}`);return n.protocol=i,n.href}let t=new URL(e.path??``,r);return t.protocol=i,t.href}if(typeof e==`number`)return`${i}//${r.hostname}:${e}`;let a=e??``;if(/^wss?:\/\//i.test(a))return a;if(/^https?:\/\//i.test(a))return bx(a,/^https/i.test(a)?`wss://`:`ws://`);let o=new URL(a,r);return o.protocol=i,o.href}function Gw(e){let{authToken:t,connectionMeta:n,metaBaseUrl:r,events:i,clientRpc:a,rpcOptions:o={},wsOptions:s={},callTimeout:c=0}=e,l=Ww(n.websocket,r??`./`,location);return Tw({transport:`websocket`,authToken:t,connectionMeta:n,events:i,clientRpc:a,rpcOptions:o,callTimeout:c,createChannel:e=>Uw({url:l,authToken:t,definitions:e.definitions,...s,onConnected(e){s.onConnected?.(e)},onError(t){e.onError(t),s.onError?.(t)},onDisconnected(t){e.onDisconnected(),s.onDisconnected?.(t)}})})}function Kw(e){return e.includes(`:`)}function qw(e,t){return Kw(t)?t:`${e}:${t}`}function Jw(e){return{async get(t){return(await e()).value()[t]},async set(t,n){(await e()).mutate(e=>{e[t]=n})},async delete(t){(await e()).mutate(e=>{delete e[t]})},async all(){return(await e()).value()},async onChange(t){return(await e()).on(`updated`,e=>t(e))}}}function Yw(e,t,n){let r=`devframe:settings:${n}:${t}`,i;function a(){return i||=e.sharedState.get(r,{initialValue:{}}),i}return Jw(a)}function Xw(e,t){return{global:Yw(e,t,`global`),project:Yw(e,t,`project`)}}function Zw(e,t){return{namespace:t,base:e,rpc:{namespace:t,register(n){if(Kw(n.name))throw Error(`[devframe] Scoped client RPC registration for namespace "${t}" received an already-namespaced function name "${n.name}". Pass a bare name without a ":" separator.`);e.client.register({...n,name:`${t}:${n.name}`})},call:((n,...r)=>e.call(qw(t,n),...r)),callEvent:((n,...r)=>e.callEvent(qw(t,n),...r)),callOptional:((n,...r)=>e.callOptional(qw(t,n),...r)),sharedState:((n,r)=>e.sharedState.get(qw(t,n),r)),streaming:{subscribe:(n,r,i)=>e.streaming.subscribe(qw(t,n),r,i),upload:(n,r)=>e.streaming.upload(qw(t,n),r)}},settings:Xw(e,t),scope:e.scope}}function Qw(){if(typeof document<`u`){let e=document.modelContext;if(e)return e}if(typeof navigator<`u`){let e=navigator.modelContext;if(e)return e}}function $w(e,t={}){let n=t.modelContext??Qw();if(!n)return()=>{};let r=n,i=new Map,a=new Map;function o(t,n){let o=DC(t.name),s=a.get(o);if(s&&s!==t.name){console.warn(`[devframe] WebMCP tool name "${o}" (from "${t.name}") collides with "${s}"; keeping the first registration.`);return}let c=new AbortController,l=Jb(t.type,n),u=r.registerTool({name:o,description:n.description,inputSchema:Zb(t.args),annotations:{title:n.title??t.name,readOnlyHint:l===`read`,destructiveHint:l===`destructive`},execute:n=>eT(t,e.context,n)},{signal:c.signal});u&&`then`in u&&u.then(()=>{},()=>{}),a.set(o,t.name),i.set(t.name,()=>{c.abort(),u&&`unregister`in u&&typeof u.unregister==`function`&&u.unregister(),a.delete(o)})}function s(t){let n=t?[t]:[...e.definitions.keys()];for(let t of n){i.get(t)?.(),i.delete(t);let n=e.definitions.get(t),r=n?.agent;n&&r&&o(n,r)}}s();let c=e.onChanged(e=>s(e));return()=>{c();for(let e of i.values())e();i.clear()}}async function eT(e,t,n){try{let r=$b(n,e.args?.length);return{content:[{type:`text`,text:tT(await(await qC(e,t))(...r))}]}}catch(e){return{isError:!0,content:[{type:`text`,text:nT(e)}]}}}function tT(e){return e===void 0?`undefined`:typeof e==`string`?e:JSON.stringify(e,null,2)}function nT(e){if(!(e instanceof Error))return String(e);let t=e.cause instanceof Error?` (cause: ${e.cause.message})`:``;return`${e.name}: ${e.message}${t}`}function rT(e,t){if(t.backend===`static`)return`static`;let n=t.websocket!==void 0,r=t.sse!==void 0;if(e===`websocket`){if(!n)throw Error(`[devframe] transport: 'websocket' was requested, but this server does not advertise a WebSocket endpoint`);return`websocket`}if(e===`sse`){if(!r)throw Error(`[devframe] transport: 'sse' was requested, but this server does not advertise an SSE endpoint`);return`sse`}if(t.backend===`sse`&&r)return`sse`;if(n)return`websocket`;if(r)return`sse`;throw Error(`[devframe] This server advertises no RPC transport (backend "none"), so there is nothing to connect to. Enable the WebSocket or SSE endpoint on the server, or use its static/MCP surfaces instead.`)}async function iT(e={}){let{baseURL:t=`./`,rpcOptions:n={},cacheOptions:r=!1}=e,i=mx(),a=Array.isArray(t)?t:[t],o=await uw(e),{connectionMeta:s,metaBaseUrl:c,authToken:l}=o,u=a[0]??`./`;try{u=new URL(`.`,c).href}catch{}let d=new zC({functions:[],...typeof e.cacheOptions==`object`?e.cacheOptions:{}}),f={rpc:void 0},p=new JC(f),m=e.webmcp===!1?void 0:$w(p),h,g=!1;async function _(e){let t=[u,...a.filter(e=>e!==u)].filter(e=>e!=null),n=[];for(let r of t)try{return await fetch(yx(e,r)).then(t=>{if(!t.ok)throw Error(`Failed to fetch ${e} from ${r}: ${t.status}`);return t.json()})}catch(e){n.push(e)}throw Error(`Failed to load ${e} from ${t.join(`, `)}`,{cause:n})}let ee={authToken:l,connectionMeta:s,metaBaseUrl:c,events:i,clientRpc:p,callTimeout:e.callTimeout,rpcOptions:{...n,async onRequest(e,t,i){if(await n.onRequest?.call(this,e,t,i),r&&d?.validate(e.m)){if(d.has(e.m,e.a))return i(d.cached(e.m,e.a));let n=await t(e);d.apply(e,n)}else await t(e)}}},v=rT(e.transport??`auto`,s),te=v===`static`?await Lw({fetchJsonFromBases:_}):v===`sse`?Dw({...ee,sseOptions:e.sseOptions}):Gw({...ee,wsOptions:e.wsOptions}),ne;try{ne=new BroadcastChannel(`devframe-auth`)}catch{}let re,ie=!1;function ae(e){return((...t)=>ie||!re?e(...t):re.then(()=>e(...t)))}function oe(){g=!0;try{h?.(),m?.()}finally{try{ne?.close()}finally{te.close?.()}}}let se={events:i,get isTrusted(){return te.isTrusted},get status(){return te.status},get connectionError(){return te.connectionError},get transport(){return te.transport??v},get connection(){return o},connectionMeta:s,ensureTrusted:te.ensureTrusted,requestTrust:te.requestTrust,requestTrustWithToken:async e=>(ow(e),o={...o,authToken:e},te.requestTrustWithToken(e)),requestTrustWithCode:async e=>{let t=await te.requestTrustWithCode(e);if(!t)return!1;ow(t),o={...o,authToken:t};try{ne?.postMessage({type:`auth-update`,authToken:t})}catch{}return!0},requestAuthCode:e=>te.requestAuthCode(e),call:ae(te.call),callEvent:ae(te.callEvent),callOptional:ae(te.callOptional),client:p,sharedState:void 0,services:void 0,streaming:void 0,cacheManager:d,scope:void 0,close:oe};se.sharedState=_w(se),se.streaming=Bw(se),se.services=gw(se);let ce=new Map;se.scope=(e=>{if(!e)return se;let t=ce.get(e);return t||(t=Zw(se,e),ce.set(e,t)),t}),f.rpc=se;function le(){try{return typeof window<`u`&&window.self===window.top}catch{return!1}}async function ue(){if(e.simpleAuth!==!1&&le()&&typeof globalThis.prompt==`function`)for(await se.requestAuthCode().catch(()=>{});!se.isTrusted;){let e=globalThis.prompt(`devframe: enter the authentication code shown in your terminal`);if(e==null)return;let t=e.trim();if(t&&await se.requestTrustWithCode(t))return}}async function de(){let t=await te.requestTrust(),n=e.otpParam??`devframe_otp`,r=n?await hw(se,{param:n}):!1;t||r||se.isTrusted||await ue()}return re=de().then(()=>{ie=!0},()=>{ie=!0}),s.mcp&&jC(async()=>{let{setupBrowserAgentRpcBridge:e}=await import(`./browser-agent-rpc-BXhoSh1z-BkMFKrGq.js`);return{setupBrowserAgentRpcBridge:e}},[],import.meta.url).then(({setupBrowserAgentRpcBridge:e})=>{g||(h=e(se))}).catch(()=>{}),ne&&(ne.onmessage=e=>{e.data?.type===`auth-update`&&e.data.authToken&&se.requestTrustWithToken(e.data.authToken)}),se}var aT=iT,oT=[`components`,`injectors`,`signals`,`ngrx`,`forms`,`router`,`pipes`,`http`,`analog`],sT=[`forms`,`router`,`ngrx`,`http`,`analog`],cT={refreshMs:{default:3e3,min:500,max:8e3},navigations:{default:50,min:5,max:500},formTimeline:{default:200,min:10,max:2e3},httpCalls:{default:200,min:10,max:2e3},changeLog:{default:200,min:10,max:2e3}},lT=`ng-devtools`;function uT(e){return e&&typeof e==`object`&&!Array.isArray(e)?e:{}}function dT(e,t){return typeof e==`boolean`?e:t}var fT=100,pT=100;function mT(e){if(!Array.isArray(e))return[];let t=e.filter(e=>typeof e==`string`).map(e=>e.trim()).filter(e=>e&&e.length<=pT);return[...new Set(t)].slice(0,fT)}function hT(e,t){let{default:n,min:r,max:i}=cT[t];return typeof e!=`number`||!Number.isFinite(e)?n:Math.min(i,Math.max(r,Math.round(e)))}function gT(e,t){return Object.fromEntries(e.map(e=>[e,t(e)]))}function _T(e){let t=uT(e),n=uT(t.agent),r=uT(t.inspectors),i=uT(n.tools),a=uT(t.actions),o=dT(t.actions,!0),s=uT(t.redaction),c=uT(t.limits),l=gT(oT,e=>dT(r[e],!0));return{inspectors:l,agent:{readOnly:dT(n.readOnly,!1),tools:gT(oT,e=>l[e]&&dT(i[e],!0))},actions:gT(sT,e=>l[e]&&dT(a[e],o)),redaction:{secretNames:mT(s.secretNames),unmask:mT(s.unmask)},limits:Object.fromEntries(Object.keys(cT).map(e=>[e,hT(c[e],e)]))}}function vT(e){let t=e?.configs;return _T(t?.[lT])}function yT(e){return`${{forms:`Writing to forms`,router:`Navigating`,ngrx:`Restoring NgRx state`,http:`Changing HTTP mock rules and clearing HTTP calls`,analog:`Calling API routes`}[e]} is turned off in the devtools config (actions.${e}).`}var bT={components:`Components`,injectors:`Injectors`,signals:`Signals`,ngrx:`NgRx`,forms:`Forms`,router:`Router`,pipes:`Pipes`,http:`HTTP`,analog:`Analog`},xT={forms:`Form writes`,router:`Navigation`,ngrx:`NgRx restore`,http:`HTTP mocking`,analog:`Analog API calls`},ST={refreshMs:e=>`poll every ${e} ms`,navigations:e=>`${e} navigations`,formTimeline:e=>`${e} form events`,httpCalls:e=>`${e} HTTP calls`,changeLog:e=>`${e} NgRx changes`};function CT(e){let t=[],n=(e,n)=>{n.length&&t.push({label:e,value:n.join(`, `)})},r=oT.filter(t=>e.inspectors[t]);return n(`Inspectors off`,oT.filter(t=>!e.inspectors[t]).map(e=>bT[e])),n(`Agent`,e.agent.readOnly?[`Read-only`]:[]),n(`Hidden from the agent`,r.filter(t=>!e.agent.tools[t]).map(e=>bT[e])),n(`Blocked actions`,sT.filter(t=>e.inspectors[t]&&!e.actions[t]).map(e=>xT[e])),n(`Extra secret names`,e.redaction.secretNames),n(`Unmasked names`,e.redaction.unmask),n(`Limits`,Object.keys(cT).filter(t=>e.limits[t]!==cT[t].default).map(t=>ST[t](e.limits[t]))),t}var wT=`ng-devtools-page-id`;function TT(){try{return new URLSearchParams(location.search).get(`pageId`)||(window.top===window?null:sessionStorage.getItem(wT)||null)}catch{return null}}function ET(e,t,n){return e?e.scope(`ng-devtools`).rpc.call(t,...n===void 0?[]:[n]):Promise.resolve(null)}function DT(e,t,n){return ET(e,t,n).then(e=>e,()=>null)}function OT(e){return e?.connectionMeta.backend===`static`}function kT(e){return vT(e?.connectionMeta)}function AT(e,t){return kT(e).actions[t]}var jT={components:`components`,routes:`router`,signals:`signals`,injectors:`injectors`,store:`ngrx`,forms:`forms`,pipes:`pipes`,network:`http`,analog:`analog`};function MT(e,t){let n=jT[e];return!n||t.inspectors[n]}function NT(e,t){e&1&&(ps(),U(0,`rect`,3)(1,`rect`,4)(2,`rect`,5)(3,`rect`,6))}function PT(e,t){e&1&&(ps(),U(0,`path`,7)(1,`path`,8)(2,`path`,9))}function FT(e,t){e&1&&(ps(),U(0,`circle`,10)(1,`path`,11)(2,`circle`,12))}function IT(e,t){e&1&&(ps(),U(0,`path`,1))}function LT(e,t){e&1&&(ps(),U(0,`path`,13)(1,`path`,14)(2,`path`,15)(3,`path`,16))}function RT(e,t){e&1&&(ps(),U(0,`ellipse`,17)(1,`path`,18)(2,`path`,19))}function zT(e,t){e&1&&(ps(),U(0,`rect`,20)(1,`path`,21)(2,`path`,22)(3,`path`,23))}function BT(e,t){e&1&&(ps(),U(0,`circle`,24)(1,`path`,25)(2,`path`,26))}function VT(e,t){e&1&&(ps(),U(0,`path`,27)(1,`path`,28)(2,`path`,29)(3,`path`,30)(4,`circle`,31))}function HT(e,t){e&1&&(ps(),U(0,`path`,2))}var UT=class e{name=$.required();static ɵfac=function(t){return new(t||e)};static ɵcmp=Oh({type:e,selectors:[[`app-tab-icon`]],inputs:{name:[1,`name`]},decls:11,vars:1,consts:[[`viewBox`,`0 0 24 24`,`width`,`16`,`height`,`16`,`fill`,`none`,`stroke`,`currentColor`,`stroke-width`,`1.8`,`stroke-linecap`,`round`,`stroke-linejoin`,`round`,`aria-hidden`,`true`],[`d`,`M22 12h-4l-3 9L9 3l-3 9H2`],[`d`,`m8 3 4 8 5-5 5 15H2L8 3z`],[`x`,`3`,`y`,`3`,`width`,`7`,`height`,`9`,`rx`,`1.5`],[`x`,`14`,`y`,`3`,`width`,`7`,`height`,`5`,`rx`,`1.5`],[`x`,`14`,`y`,`12`,`width`,`7`,`height`,`9`,`rx`,`1.5`],[`x`,`3`,`y`,`16`,`width`,`7`,`height`,`5`,`rx`,`1.5`],[`d`,`M12 2 3 7l9 5 9-5-9-5Z`],[`d`,`m3 12 9 5 9-5`],[`d`,`m3 17 9 5 9-5`],[`cx`,`6`,`cy`,`19`,`r`,`3`],[`d`,`M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15`],[`cx`,`18`,`cy`,`5`,`r`,`3`],[`d`,`M12 22v-5`],[`d`,`M9 8V2`],[`d`,`M15 8V2`],[`d`,`M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z`],[`cx`,`12`,`cy`,`5`,`rx`,`9`,`ry`,`3`],[`d`,`M3 5v14a9 3 0 0 0 18 0V5`],[`d`,`M3 12a9 3 0 0 0 18 0`],[`x`,`3`,`y`,`4`,`width`,`18`,`height`,`16`,`rx`,`2`],[`d`,`M7 9h10`],[`d`,`M7 13h6`],[`d`,`M7 17h8`],[`cx`,`12`,`cy`,`12`,`r`,`9`],[`d`,`M3 12h18`],[`d`,`M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18Z`],[`d`,`M4 7h10`],[`d`,`M4 17h6`],[`d`,`m14 13 4 4-4 4`],[`d`,`M10 17h8`],[`cx`,`18`,`cy`,`7`,`r`,`3`]],template:function(e,t){if(e&1&&(ps(),V(0,`svg`,0),N(1,NT,4,0)(2,PT,3,0)(3,FT,3,0)(4,IT,1,0,`:svg:path`,1)(5,LT,4,0)(6,RT,3,0)(7,zT,4,0)(8,BT,3,0)(9,VT,5,0)(10,HT,1,0,`:svg:path`,2),H()),e&2){let e;j(),P((e=t.name())===`dashboard`?1:e===`components`?2:e===`routes`?3:e===`signals`?4:e===`injectors`?5:e===`store`?6:e===`forms`?7:e===`network`?8:e===`pipes`?9:e===`analog`?10:-1)}},styles:[`[_nghost-%COMP%] { - display: inline-flex; - flex-shrink: 0; -}`]})},WT=(e,t)=>t.tab,GT=(e,t)=>t.label;function KT(e,t){e&1&&Y(0),e&2&&Z(` `,q().meta()?.projectName,` `)}function qT(e,t){e&1&&Y(0,` Project details unavailable `)}function JT(e,t){e&1&&Y(0,` Loading… `)}function YT(e,t){e&1&&(Y(0,` Run `),R(1,`code`),Y(2,`ng-devtools build`),z(),Y(3,` again to rebuild the report. `))}function XT(e,t){e&1&&Y(0,` Check that the dev server is running, then reload the panel. `)}function ZT(e,t){if(e&1&&(R(0,`p`,4),N(1,YT,4,0)(2,XT,1,0),z()),e&2){let e=q();j(),P(e.staticReport()?1:2)}}function QT(e,t){e&1&&(R(0,`li`,6)(1,`span`),Y(2,`Analog`),z(),Y(3),z()),e&2&&(j(3),X(t))}function $T(e,t){if(e&1&&(R(0,`span`,17),Y(1),z(),R(2,`span`,18),Y(3),z()),e&2){let e=q().$implicit,t=q();j(),X(t.cards()[e.tab]?.value),j(2),X(t.cards()[e.tab]?.sub)}}function eE(e,t){e&1&&(R(0,`span`,19),Y(1,`–`),z(),R(2,`span`,18),Y(3,`Count unavailable`),z())}function tE(e,t){e&1&&(B(0,`span`,20),R(1,`span`,18),Y(2,`Counting…`),z())}function nE(e,t){if(e&1){let e=W();R(0,`button`,11),G(`click`,function(){let t=O(e).$implicit;return k(q().navigate.emit(t.tab))}),R(1,`span`,12)(2,`span`,13),B(3,`app-tab-icon`,14),z(),R(4,`span`,15),Y(5,`→`),z()(),R(6,`span`,16),Y(7),z(),N(8,$T,4,2)(9,eE,4,0)(10,tE,3,0),z()}if(e&2){let e,n=t.$implicit,r=t.$index,i=q().stateOf(n.tab);n_(`animation-delay`,60*r,`ms`),M(`aria-busy`,i===`loading`),j(3),L(`name`,n.tab),j(4),X(n.label),j(),P((e=i)===`ready`?8:e===`error`?9:10)}}function rE(e,t){if(e&1&&(R(0,`div`)(1,`dt`),Y(2),z(),R(3,`dd`),Y(4),z()()),e&2){let e=t.$implicit;j(2),X(e.label),j(2),X(e.value)}}function iE(e,t){if(e&1&&(R(0,`dl`),F(1,rE,5,2,`div`,null,GT),z()),e&2){let e=q();j(),I(e.configItems())}}function aE(e,t){e&1&&(R(0,`p`),Y(1,`Defaults`),z())}var oE=[{tab:`components`,label:`Components`},{tab:`routes`,label:`Routes`},{tab:`signals`,label:`Signals`},{tab:`injectors`,label:`Injectors`},{tab:`store`,label:`NgRx declarations`},{tab:`pipes`,label:`Pipes`}],sE=new Set([`signal`,`computed`,`linkedSignal`,`effect`]),cE={action:[`action`,`actions`],reducer:[`reducer`,`reducers`],effect:[`effect`,`effects`],selector:[`selector`,`selectors`],feature:[`feature`,`features`],"store-setup":[`setup call`,`setup calls`],"signal-store":[`signal store`,`signal stores`],"signal-state":[`signal state`,`signal states`],"signal-method":[`signal method`,`signal methods`]};function lE(e,t,n){return`${e} ${e===1?t:n}`}function uE(e,t){for(let n of e??[])t(n),uE(n.children,t)}function dE(e){if(!e.some(e=>e.kind))return{value:e.length,sub:`discovered in source`};let t=e.filter(e=>e.kind===`directive`).length;return{value:e.length-t,sub:`components · ${lE(t,`directive`,`directives`)}`}}function fE(e){if(!e.some(e=>e.kind))return{value:e.length,sub:`route entries in source`};let t=e.filter(e=>e.kind===`redirect`).length;return{value:new Set(e.filter(e=>e.kind===`page`).map(e=>e.fullPath??e.path??``)).size,sub:`navigable paths · ${lE(t,`redirect`,`redirects`)}`}}function pE(e){let t=new Map;for(let n of e)n.kind&&t.set(n.kind,(t.get(n.kind)??0)+1);if(!t.size)return{value:e.length,sub:`declarations in source`};let n=[...t].sort((e,t)=>t[1]-e[1]).map(([e,t])=>{let[n,r]=cE[e]??[e,e];return lE(t,n,r)});return{value:e.length,sub:n.join(` · `)}}var mE=class e{rpc=$(null);navigate=av();staticReport=Q(()=>OT(this.rpc()));meta=A(null);config=Q(()=>kT(this.rpc()));stats=Q(()=>oE.filter(e=>MT(e.tab,this.config())));configItems=Q(()=>CT(this.config()));metaState=A(`loading`);states=A({});rows=A({});injectorTree=A(null);signalGraph=A(null);pageId=TT();destroyRef=E(ws);stopLive=[];liveInjectors=Q(()=>{let e=this.injectorTree();if(!e?.roots?.length)return null;let t=0,n=0,r=e=>{t++,n+=e.providers?.length??0};return uE(e.roots,r),uE(e.environment,r),{injectors:t,providers:n}});liveSignals=Q(()=>{let e=this.signalGraph(),t=this.pageId&&e?.pages?.[this.pageId]||e?.graph;return t?.nodes?.length?t.nodes.filter(e=>sE.has(e.kind??``)).length:null});cards=Q(()=>{let e=this.rows(),t={};if(e.components&&(t.components=dE(e.components)),e.routes&&(t.routes=fE(e.routes)),e.store&&(t.store=pE(e.store)),e.pipes){let n=e.pipes.filter(e=>e.builtin).length;t.pipes={value:e.pipes.length-n,sub:n?`custom pipes · ${n} built-in in use`:`custom pipes in source`}}let n=this.liveSignals();n===null?e.signals&&(t.signals={value:e.signals.length,sub:`signal declarations in source`}):t.signals={value:n,sub:e.signals?`live on the page · ${e.signals.length} declared in source`:`live on the page`};let r=this.liveInjectors();return r?t.injectors={value:r.injectors,sub:`live injectors · ${lE(r.providers,`provider`,`providers`)}`}:e.injectors&&(t.injectors={value:e.injectors.filter(e=>e.type!==`injection`).length,sub:`provider declarations in source`}),t});constructor(){dc(()=>{let e=this.rpc();if(!e)return;let t=e.scope(`ng-devtools`);this.metaState.set(`loading`),this.states.set({}),this.rows.set({}),t.rpc.call(`build-meta`).then(e=>{this.meta.set(e),this.metaState.set(`ready`)}).catch(()=>this.metaState.set(`error`));let n=kT(e),r=e=>MT(e,n);r(`components`)&&this.load(t.rpc.call(`get-components`),`components`),r(`routes`)&&this.load(t.rpc.call(`get-routes`),`routes`),r(`signals`)&&this.load(t.rpc.call(`get-signals`),`signals`),r(`injectors`)&&this.load(t.rpc.call(`get-providers`),`injectors`),r(`store`)&&this.load(t.rpc.call(`get-ngrx-store`),`store`),r(`pipes`)&&this.load(t.rpc.call(`get-pipes`),`pipes`),this.watchLive(e,n)}),this.destroyRef.onDestroy(()=>this.unwatch())}stateOf(e){return(e===`signals`?this.liveSignals():e===`injectors`?this.liveInjectors():null)===null?this.states()[e]??`loading`:`ready`}load(e,t){let n=e=>this.states.update(n=>({...n,[t]:e}));e.then(e=>{this.rows.update(n=>({...n,[t]:Array.isArray(e)?e:[]})),n(`ready`)}).catch(()=>n(`error`))}async watchLive(e,t){this.unwatch();let n=e.scope(`ng-devtools`).rpc,r=async(t,r)=>{try{let i=await n.sharedState(t);if(this.destroyRef.destroyed||this.rpc()!==e)return;r(i.value()),this.stopLive.push(i.on(`updated`,e=>r(e)))}catch{r(null)}};await Promise.all([t.inspectors.injectors&&r(`injector-tree`,e=>this.injectorTree.set(e)),t.inspectors.signals&&r(`signal-graph`,e=>this.signalGraph.set(e))])}unwatch(){for(let e of this.stopLive.splice(0))e()}static ɵfac=function(t){return new(t||e)};static ɵcmp=Oh({type:e,selectors:[[`app-dashboard`]],inputs:{rpc:[1,`rpc`]},outputs:{navigate:`navigate`},decls:31,vars:12,consts:[[`aria-labelledby`,`project-title`,1,`project`],[1,`project-head`],[1,`eyebrow`],[`id`,`project-title`],[1,`hint`],[1,`chips`],[1,`analog`],[1,`grid`],[`type`,`button`,1,`stat`,3,`animation-delay`],[`aria-labelledby`,`config-title`,1,`config`],[`id`,`config-title`],[`type`,`button`,1,`stat`,3,`click`],[1,`top`],[1,`icon`],[3,`name`],[`aria-hidden`,`true`,1,`go`],[1,`label`],[1,`big`],[1,`sub`],[1,`big`,`muted`],[`aria-hidden`,`true`,1,`big`,`skeleton`]],template:function(e,t){if(e&1&&(R(0,`section`,0)(1,`div`,1)(2,`p`,2),Y(3,`Project`),z(),R(4,`h2`,3),N(5,KT,1,1)(6,qT,1,0)(7,JT,1,0),z(),N(8,ZT,3,1,`p`,4),z(),R(9,`ul`,5)(10,`li`)(11,`span`),Y(12,`Angular`),z(),Y(13),z(),R(14,`li`)(15,`span`),Y(16,`TypeScript`),z(),Y(17),z(),R(18,`li`)(19,`span`),Y(20,`SSR`),z(),Y(21),z(),N(22,QT,4,1,`li`,6),z()(),R(23,`div`,7),F(24,nE,11,6,`button`,8,WT),z(),R(26,`section`,9)(27,`h2`,10),Y(28,`Configuration`),z(),N(29,iE,3,0,`dl`)(30,aE,2,0,`p`),z()),e&2){let e,n;M(`aria-busy`,t.metaState()===`loading`),j(4),J(`muted`,t.metaState()!==`ready`),j(),P((e=t.metaState())===`ready`?5:e===`error`?6:7),j(3),P(t.metaState()===`error`?8:-1),j(),J(`pending`,t.metaState()===`loading`),j(4),X(t.meta()?.angularVersion??`…`),j(4),X(t.meta()?.typescript??`…`),j(4),X(t.meta()?t.meta()?.ssr?`On`:`Off`:`…`),j(),P((n=t.meta()?.analog)?22:-1,n),j(2),I(t.stats()),j(5),P(t.configItems().length?29:30)}},dependencies:[UT],styles:[`[_nghost-%COMP%] { - display: block; - max-width: 1200px; -} - -.project[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - align-items: flex-end; - justify-content: space-between; - gap: 16px 24px; - margin-bottom: 16px; - padding: 24px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: radial-gradient(420px 180px at 100% 0%, var(--%NS%accent-soft), transparent 70%), linear-gradient(180deg, var(--%NS%surface-2), var(--%NS%surface)); - box-shadow: var(--%NS%shadow); -} - -.project-head[_ngcontent-%COMP%] { - flex: 1 1 240px; - min-width: 0; -} - -.eyebrow[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - margin: 0 0 4px; - color: var(--%NS%accent); -} - -h2[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-strong); - font-size: 24px; - line-height: 1.25; - letter-spacing: -0.02em; - overflow-wrap: anywhere; -} - -h2.muted[_ngcontent-%COMP%] { - color: var(--%NS%text-2); - font-weight: 600; -} - -.hint[_ngcontent-%COMP%] { - margin: 8px 0 0; - color: var(--%NS%text-2); - font-size: 13px; - line-height: 1.5; -} - -.chips[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 8px; - min-width: 0; - margin: 0; - padding: 0; - list-style: none; -} - -.chips[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - gap: 8px; - height: 28px; - max-width: 100%; - padding: 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: 99px; - background: var(--%NS%bg); - color: var(--%NS%text-strong); - font-size: 12px; - font-weight: 600; - font-variant-numeric: tabular-nums; - white-space: nowrap; -} - -.chips[_ngcontent-%COMP%] span[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-weight: 500; -} - -.chips.pending[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { - color: var(--%NS%text-3); -} - -.chips[_ngcontent-%COMP%] .analog[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, #dd0330 55%, transparent); -} - -.grid[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); - gap: 12px; -} - -.stat[_ngcontent-%COMP%] { - display: flex; - flex-direction: column; - align-items: flex-start; - min-width: 0; - padding: 16px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - color: inherit; - text-align: left; - font: inherit; - cursor: pointer; - animation: enter 0.4s var(--%NS%ease) both; - transition: border-color 0.2s var(--%NS%ease), transform 0.2s var(--%NS%ease), background-color 0.2s var(--%NS%ease), box-shadow 0.2s var(--%NS%ease); -} - -.stat[_ngcontent-%COMP%]:hover { - border-color: var(--%NS%accent-line); - background: var(--%NS%surface-2); - box-shadow: var(--%NS%shadow); - transform: translateY(-2px); -} - -.stat[_ngcontent-%COMP%]:active { - transform: translateY(0); - background: var(--%NS%surface-3); -} - -.stat[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.top[_ngcontent-%COMP%] { - display: flex; - align-items: center; - justify-content: space-between; - align-self: stretch; - margin-bottom: 12px; -} - -.icon[_ngcontent-%COMP%] { - display: grid; - place-items: center; - width: 32px; - height: 32px; - border: 1px solid var(--%NS%accent-line); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%accent-soft); - color: var(--%NS%accent); -} - -.go[_ngcontent-%COMP%] { - display: grid; - place-items: center; - width: 24px; - height: 24px; - color: var(--%NS%text-3); - transition: transform 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease); -} - -.stat[_ngcontent-%COMP%]:hover .go[_ngcontent-%COMP%], -.stat[_ngcontent-%COMP%]:focus-visible .go[_ngcontent-%COMP%] { - color: var(--%NS%accent); - transform: translateX(3px); -} - -.label[_ngcontent-%COMP%] { - max-width: 100%; - overflow: hidden; - color: var(--%NS%text-2); - font-size: 13px; - font-weight: 500; - line-height: 16px; - text-overflow: ellipsis; - white-space: nowrap; -} - -.big[_ngcontent-%COMP%] { - margin: 4px 0; - color: var(--%NS%text-strong); - font-size: 32px; - font-weight: 750; - line-height: 40px; - letter-spacing: -0.03em; - font-variant-numeric: tabular-nums; -} - -.big.muted[_ngcontent-%COMP%] { - color: var(--%NS%text-3); -} - -.skeleton[_ngcontent-%COMP%] { - display: block; - width: 56px; - height: 32px; - margin-block: 8px; - border-radius: var(--%NS%radius-sm); - background: linear-gradient(90deg, var(--%NS%surface-2), var(--%NS%surface-3), var(--%NS%surface-2)) 0 0/200% 100%; - animation: _ngcontent-%COMP%_shimmer 1.4s linear infinite; -} - -.sub[_ngcontent-%COMP%] { - max-width: 100%; - color: var(--%NS%text-3); - font-size: 12px; - line-height: 16px; -} - -.config[_ngcontent-%COMP%] { - margin-top: 16px; - padding: 16px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); -} - -.config[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - margin: 0 0 8px; - color: var(--%NS%text-2); -} - -.config[_ngcontent-%COMP%] p[_ngcontent-%COMP%], -.config[_ngcontent-%COMP%] dl[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text); - font-size: 13px; - line-height: 1.5; -} - -.config[_ngcontent-%COMP%] dl[_ngcontent-%COMP%] { - display: grid; - gap: 4px; -} - -.config[_ngcontent-%COMP%] dl[_ngcontent-%COMP%] div[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 4px 8px; -} - -.config[_ngcontent-%COMP%] dt[_ngcontent-%COMP%] { - color: var(--%NS%text-2); -} - -.config[_ngcontent-%COMP%] dt[_ngcontent-%COMP%]::after { - content: ":"; -} - -.config[_ngcontent-%COMP%] dd[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-strong); - overflow-wrap: anywhere; -} - -@keyframes _ngcontent-%COMP%_shimmer { - to { - background-position: -200% 0; - } -} -@media (max-width: 480px) { - .project[_ngcontent-%COMP%] { - padding: 16px; - } - h2[_ngcontent-%COMP%] { - font-size: 20px; - } - .stat[_ngcontent-%COMP%] { - padding: 12px; - } - .big[_ngcontent-%COMP%] { - font-size: 28px; - line-height: 36px; - } -} -@media (prefers-reduced-motion: reduce) { - .stat[_ngcontent-%COMP%], - .stat[_ngcontent-%COMP%]:hover, - .stat[_ngcontent-%COMP%]:active { - transform: none; - } - .stat[_ngcontent-%COMP%]:hover .go[_ngcontent-%COMP%] { - transform: none; - } - .skeleton[_ngcontent-%COMP%] { - animation: none; - } -}`]})},hE=()=>[],gE=(e,t)=>t.node.id,_E=(e,t)=>t.outlet+t.route,vE=(e,t)=>t.formId,yE=(e,t)=>t.name+e,bE=(e,t)=>t.name,xE=(e,t)=>t.token+e;function SE(e,t){return this.sourceKey(t)}function CE(e,t){e&1&&(V(0,`p`,8),Y(1,`The page has more components than the tree shows.`),H())}function wE(e,t){if(e&1){let e=W();V(0,`div`,11)(1,`p`,16),Y(2),H(),V(3,`button`,17),K(`click`,function(){return O(e),k(q(2).filter.set(``))}),Y(4,`Clear filter`),H()()}if(e&2){let e=q(2);j(2),Z(`No components match “`,e.filter().trim(),`”`)}}function TE(e,t){if(e&1){let e=W();V(0,`span`,25),K(`click`,function(t){O(e);let n=q().$implicit;return k(q(2).toggle(n.node.id,t))}),ps(),V(1,`svg`,26),U(2,`path`,27),H()()}if(e&2){let e=q().$implicit;J(`open`,e.expanded)}}function EE(e,t){e&1&&U(0,`span`,20)}function DE(e,t){if(e&1&&(V(0,`span`,23),Y(1),H()),e&2){let e=t.$implicit;j(),X(e.route||`/`)}}function OE(e,t){if(e&1&&(V(0,`span`,24),Y(1),V(2,`span`,10),Y(3),H()()),e&2){let e=q().$implicit;M(`title`,e.node.directives.join(`, `)),j(),Z(` +`,e.node.directives.length,` `),j(2),Z(` `,e.node.directives.length===1?`directive`:`directives`,` `)}}function kE(e,t){if(e&1){let e=W();V(0,`div`,18),K(`click`,function(){let t=O(e).$implicit;return k(q(2).select(t.node.id))})(`focus`,function(){let t=O(e).$implicit,n=q(2);return n.focusId.set(t.node.id),k(n.highlight(t.node.id))})(`blur`,function(){return O(e),k(q(2).highlight(null))})(`mouseenter`,function(){let t=O(e).$implicit;return k(q(2).highlight(t.node.id))})(`mouseleave`,function(){return O(e),k(q(2).highlight(null))}),N(1,TE,3,2,`span`,19)(2,EE,1,0,`span`,20),V(3,`span`,21),Y(4),H(),V(5,`span`,22),Y(6),H(),F(7,DE,2,1,`span`,23,_E),N(9,OE,4,3,`span`,24),H()}if(e&2){let e=t.$implicit,n=q(2);n_(`--%NS%depth`,e.depth),J(`selected`,n.selectedId()===e.node.id),M(`aria-level`,e.depth+1)(`aria-expanded`,e.hasChildren?e.expanded:null)(`aria-selected`,n.selectedId()===e.node.id)(`tabindex`,n.rovingId()===e.node.id?0:-1)(`data-id`,e.node.id),j(),P(e.hasChildren?1:2),j(3),X(e.node.name),j(2),Z(`<`,e.node.tag,`>`),j(),I(n.routedById().get(e.node.id)??z_(13,hE)),j(2),P(e.node.directives?.length?9:-1)}}function AE(e,t){if(e&1){let e=W();V(0,`button`,36),K(`click`,function(){let t=O(e).$implicit;return k(q(5).showForm.emit(t.formId))}),Y(1),H()}if(e&2){let e=t.$implicit;j(),Z(` Show `,e.label,` in Forms `)}}function jE(e,t){if(e&1&&(V(0,`div`,34),F(1,AE,2,1,`button`,35,vE),H()),e&2){let e=q(),t=q(3);j(),I(t.formsIn(e.file))}}function ME(e,t){if(e&1&&(V(0,`p`,33),Y(1),H(),N(2,jE,3,0,`div`,34)),e&2){let e=t,n=q(3);j(),O_(``,e.file,`:`,e.line),j(),P(n.formsIn(e.file).length?2:-1)}}function NE(e,t){if(e&1&&(V(0,`dt`),Y(1,`Routed`),H(),V(2,`dd`,38),Y(3),H()),e&2){let e=t.$implicit;j(3),O_(``,e.route||`/`,` in outlet `,e.outlet)}}function PE(e,t){if(e&1&&(V(0,`span`,47),Y(1),H()),e&2){let e=q().$implicit;j(),Z(`(`,e.prop,`)`)}}function FE(e,t){if(e&1&&(V(0,`li`,45)(1,`span`,46),Y(2),N(3,PE,2,1,`span`,47),H(),V(4,`pre`),Y(5),U_(6,`json`),H()()),e&2){let e=t.$implicit;j(2),Z(` `,e.name,` `),j(),P(e.prop===e.name?-1:3),j(2),X(G_(6,3,e.value))}}function IE(e,t){if(e&1&&(V(0,`ul`,41),F(1,FE,7,5,`li`,45,bE),H()),e&2){let e=q();j(),I(e.inputs)}}function LE(e,t){e&1&&(V(0,`p`,42),Y(1,`No inputs.`),H())}function RE(e,t){if(e&1&&(V(0,`li`,49)(1,`span`,38),Y(2),H(),V(3,`span`,50),Y(4),H()()),e&2){let e=t.$implicit;J(`on`,e.listened),j(2),X(e.name),j(2),X(e.listened?`listened`:`no listener`)}}function zE(e,t){if(e&1&&(V(0,`ul`,43),F(1,RE,5,4,`li`,48,bE),H()),e&2){let e=q();j(),I(e.outputs)}}function BE(e,t){e&1&&(V(0,`p`,42),Y(1,`No outputs.`),H())}function VE(e,t){if(e&1&&(V(0,`li`,51),Y(1),H()),e&2){let e=t.$implicit;j(),X(e)}}function HE(e,t){if(e&1&&(V(0,`div`,39)(1,`h3`),Y(2,` DOM listeners `),V(3,`span`,40),Y(4),H()(),V(5,`ul`,43),F(6,VE,2,1,`li`,51,lg),H()()),e&2){let e=q();j(4),X(e.listeners.length),j(2),I(e.listeners)}}function UE(e,t){if(e&1&&(V(0,`li`,45)(1,`span`,46),Y(2),H(),V(3,`pre`),Y(4),U_(5,`json`),H()()),e&2){let e=t.$implicit;j(2),X(e.name),j(2),X(G_(5,2,e.value))}}function WE(e,t){if(e&1&&(V(0,`ul`,41),F(1,UE,6,4,`li`,45,bE),H()),e&2){let e=q().$implicit;j(),I(e.inputs)}}function GE(e,t){if(e&1&&(V(0,`li`,49)(1,`span`,38),Y(2),H(),V(3,`span`,50),Y(4),H()()),e&2){let e=t.$implicit;J(`on`,e.listened),j(2),X(e.name),j(2),X(e.listened?`listened`:`no listener`)}}function KE(e,t){if(e&1&&(V(0,`ul`,43),F(1,GE,5,4,`li`,48,bE),H()),e&2){let e=q().$implicit;j(),I(e.outputs)}}function qE(e,t){e&1&&(V(0,`p`,42),Y(1,`No inputs or outputs.`),H())}function JE(e,t){if(e&1&&(V(0,`div`,39)(1,`h3`)(2,`span`,38),Y(3),H(),V(4,`span`,52),Y(5,`directive on host`),H()(),N(6,WE,3,0,`ul`,41),N(7,KE,3,0,`ul`,43),N(8,qE,2,0,`p`,42),H()),e&2){let e=t.$implicit;j(3),X(e.name),j(3),P(e.inputs.length?6:-1),j(),P(e.outputs.length?7:-1),j(),P(!e.inputs.length&&!e.outputs.length?8:-1)}}function YE(e,t){if(e&1&&(V(0,`span`,52),Y(1),H()),e&2){let e=t.$implicit;j(),X(e)}}function XE(e,t){if(e&1&&(V(0,`span`,55),Y(1,`from `),V(2,`span`,38),Y(3),H()()),e&2){let e=q().$implicit;j(3),X(e.providedByName??`an injector`)}}function ZE(e,t){e&1&&(V(0,`span`,56),Y(1,`not provided`),H())}function QE(e,t){if(e&1&&(V(0,`li`,53)(1,`span`,54),Y(2),H(),F(3,YE,2,1,`span`,52,lg),N(5,XE,4,1,`span`,55)(6,ZE,2,0,`span`,56),H()),e&2){let e=t.$implicit;j(2),X(e.token),j(),I(e.flags),j(2),P(e.providedBy?5:6)}}function $E(e,t){if(e&1&&(V(0,`ul`,44),F(1,QE,7,2,`li`,53,xE),H()),e&2){let e=q();j(),I(e.dependencies)}}function eD(e,t){e&1&&(V(0,`p`,42),Y(1,`Nothing is injected through the constructor or inject().`),H())}function tD(e,t){if(e&1&&(V(0,`dl`,37)(1,`dt`),Y(2,`Change detection`),H(),V(3,`dd`),Y(4),H(),V(5,`dt`),Y(6,`Encapsulation`),H(),V(7,`dd`),Y(8),H(),V(9,`dt`),Y(10,`Host path`),H(),V(11,`dd`,38),Y(12),H(),F(13,NE,4,2,null,null,_E),H(),V(15,`div`,39)(16,`h3`),Y(17,` Inputs `),V(18,`span`,40),Y(19),H()(),N(20,IE,3,0,`ul`,41)(21,LE,2,0,`p`,42),H(),V(22,`div`,39)(23,`h3`),Y(24,` Outputs `),V(25,`span`,40),Y(26),H()(),N(27,zE,3,0,`ul`,43)(28,BE,2,0,`p`,42),H(),N(29,HE,8,1,`div`,39),F(30,JE,9,4,`div`,39,yE),V(32,`div`,39)(33,`h3`),Y(34,` Injected `),V(35,`span`,40),Y(36),H()(),N(37,$E,3,0,`ul`,44)(38,eD,2,0,`p`,42),H()),e&2){let e=t,n=q(),r=q(2);j(4),X(e.changeDetection??`Unknown`),j(4),X(e.encapsulation??`Unknown`),j(4),X(e.path),j(),I(r.routedById().get(n.id)??z_(10,hE)),j(6),X(e.inputs.length),j(),P(e.inputs.length?20:21),j(6),X(e.outputs.length),j(),P(e.outputs.length?27:28),j(2),P(e.listeners.length?29:-1),j(),I(e.directives),j(6),X(e.dependencies.length),j(),P(e.dependencies.length?37:38)}}function nD(e,t){e&1&&(V(0,`div`,32),U(1,`span`,57),V(2,`p`,58),Y(3,`Reading live values from the page…`),H()())}function rD(e,t){if(e&1&&(V(0,`section`,14)(1,`header`,28)(2,`span`,29),Y(3,`component`),H(),V(4,`h2`,30),Y(5),H(),V(6,`span`,31),Y(7),H(),N(8,ME,3,3),H(),N(9,tD,39,11)(10,nD,4,0,`div`,32),H()),e&2){let e,n,r=t,i=q(2);j(5),X(r.name),j(2),Z(`<`,r.tag,`>`),j(),P((e=i.sourceFor(r))?8:-1,e),j(),P((n=i.detail())?9:10,n)}}function iD(e,t){e&1&&(V(0,`div`,15)(1,`p`,58),Y(2,` Select a component to see its live inputs, outputs, change detection and injected services. `),H()())}function aD(e,t){if(e&1){let e=W();V(0,`p`,0),Y(1,` Every component instance on the page, in the order Angular rendered them. Hover a row to highlight its host in the page, and select it to read its live inputs, outputs and injected services. `),H(),V(2,`div`,1)(3,`div`,2),ps(),V(4,`svg`,3),U(5,`circle`,4)(6,`path`,5),H(),ms(),V(7,`input`,6),K(`input`,function(t){return O(e),k(q().filter.set(t.target.value))})(`keydown.escape`,function(){return O(e),k(q().filter.set(``))}),H()(),V(8,`span`,7),Y(9),H()(),N(10,CE,2,0,`p`,8),V(11,`div`,9)(12,`div`)(13,`h2`,10),Y(14,`Component tree`),H(),N(15,wE,5,1,`div`,11),V(16,`div`,12),K(`keydown`,function(t){return O(e),k(q().onTreeKey(t))}),F(17,kE,10,14,`div`,13,gE),H()(),N(19,rD,11,4,`section`,14)(20,iD,3,0,`div`,15),H()}if(e&2){let e,t=q();j(7),xg(`value`,t.filter()),j(2),O_(` `,t.page().count,` `,t.page().count===1?`instance`:`instances`,` `),j(),P(t.page().truncated?10:-1),j(5),P(t.rows().length?-1:15),j(),xg(`hidden`,!t.rows().length),j(),I(t.rows()),j(2),P((e=t.selectedNode())?19:20,e)}}function oD(e,t){e&1&&(V(0,`p`,59),Y(1,` The page reported no component instances. The live tree needs a development build with Angular's debug API. Showing what the source declares instead. `),H())}function sD(e,t){e&1&&(V(0,`p`,8),Y(1,` No page is connected, so this lists what the source declares. Open the app in a browser with the devtools connected to see each rendered instance. `),H())}function cD(e,t){if(e&1&&Y(0),e&2){let e=q(3);O_(` `,e.filteredSource().length,` of `,e.source().length,` `)}}function lD(e,t){if(e&1&&Y(0),e&2){let e=q(3);A_(` `,e.sourceCounts().components,` `,e.sourceCounts().components===1?`component`:`components`,` · `,e.sourceCounts().directives,` `,e.sourceCounts().directives===1?`directive`:`directives`,` `)}}function uD(e,t){if(e&1&&(V(0,`span`,7),N(1,cD,1,2)(2,lD,1,4),H()),e&2){let e=q(2);j(),P(e.filter().trim()?1:2)}}function dD(e,t){e&1&&(V(0,`div`,65),U(1,`span`,57),V(2,`p`,16),Y(3,`Scanning components…`),H()())}function fD(e,t){e&1&&(Y(0,` Run `),V(1,`code`),Y(2,`ng-devtools build`),H(),Y(3,` again to rebuild the report. `))}function pD(e,t){e&1&&Y(0,` Check that the dev server is running, then try again. `)}function mD(e,t){if(e&1){let e=W();V(0,`div`,66)(1,`p`,16),Y(2,`Could not load components`),H(),V(3,`p`,58),N(4,fD,4,0)(5,pD,1,0),H(),V(6,`button`,17),K(`click`,function(){return O(e),k(q(2).refresh())}),Y(7,`Retry`),H()()}if(e&2){let e=q(2);j(4),P(e.staticReport()?4:5)}}function hD(e,t){e&1&&(V(0,`div`,67)(1,`p`,16),Y(2,`No components found`),H(),V(3,`p`,58),Y(4,`No @Component or @Directive was found in the source.`),H()())}function gD(e,t){if(e&1){let e=W();V(0,`div`,67)(1,`p`,16),Y(2),H(),V(3,`button`,17),K(`click`,function(){return O(e),k(q(2).filter.set(``))}),Y(4,`Clear filter`),H()()}if(e&2){let e=q(2);j(2),Z(`No components match “`,e.filter().trim(),`”`)}}function _D(e,t){if(e&1&&Y(0),e&2){let e=q().$implicit;Z(` `,q(3).bareName(e.className),` · `)}}function vD(e,t){if(e&1&&(V(0,`dt`),Y(1,`Change detection`),H(),V(2,`dd`),Y(3),H()),e&2){let e=q(2).$implicit;j(3),X(e.changeDetection??`Unknown`)}}function yD(e,t){if(e&1){let e=W();V(0,`button`,36),K(`click`,function(){let t=O(e).$implicit;return k(q(5).showForm.emit(t.formId))}),Y(1),H()}if(e&2){let e=t.$implicit;j(),Z(` Show `,e.label,` in Forms `)}}function bD(e,t){if(e&1&&(V(0,`div`,77)(1,`dl`,37)(2,`dt`),Y(3,`Class`),H(),V(4,`dd`,38),Y(5),H(),V(6,`dt`),Y(7,`File`),H(),V(8,`dd`,38),Y(9),H(),V(10,`dt`),Y(11,`Standalone`),H(),V(12,`dd`),Y(13),H(),N(14,vD,4,1),V(15,`dt`),Y(16,`Inputs`),H(),V(17,`dd`,38),Y(18),H(),V(19,`dt`),Y(20,`Outputs`),H(),V(21,`dd`,38),Y(22),H()(),F(23,yD,2,1,`button`,35,vE),H()),e&2){let e=q(),t=e.$implicit,n=e.$index,r=q(3);xg(`id`,`ct-source-`+n),j(5),X(r.bareName(t.className)),j(4),O_(``,t.file,`:`,t.line),j(4),X(t.isStandalone?`Yes`:`No`),j(),P(t.kind===`component`?14:-1),j(4),X(t.inputs.join(`, `)||`None`),j(4),X(t.outputs.join(`, `)||`None`),j(),I(r.formsIn(t.file))}}function xD(e,t){if(e&1){let e=W();V(0,`li`,70)(1,`button`,71),K(`click`,function(){let t=O(e).$implicit,n=q(3);return k(n.openKey.set(n.openKey()===n.sourceKey(t)?null:n.sourceKey(t)))}),V(2,`span`,72),Y(3),H(),V(4,`span`,73)(5,`span`,74),Y(6),H(),V(7,`span`,75),N(8,_D,1,1),Y(9),H()(),ps(),V(10,`svg`,76),U(11,`path`,27),H()(),N(12,bD,25,8,`div`,77),H()}if(e&2){let e=t.$implicit,n=t.$index,r=q(3);J(`expanded`,r.openKey()===r.sourceKey(e)),j(),M(`aria-expanded`,r.openKey()===r.sourceKey(e))(`aria-controls`,r.openKey()===r.sourceKey(e)?`ct-source-`+n:null),j(),J(`directive`,e.kind===`directive`),j(),X(e.kind),j(3),X(r.sourceLabel(e)),j(2),P(e.selector?8:-1),j(),O_(` `,e.file,`:`,e.line,` `),j(3),P(r.openKey()===r.sourceKey(e)?12:-1)}}function SD(e,t){if(e&1&&(V(0,`ul`,68),F(1,xD,13,12,`li`,69,SE,!0),H()),e&2){let e=q(2);j(),I(e.filteredSource())}}function CD(e,t){if(e&1){let e=W();N(0,oD,2,0,`p`,59)(1,sD,2,0,`p`,8),V(2,`div`,1)(3,`div`,2),ps(),V(4,`svg`,3),U(5,`circle`,4)(6,`path`,5),H(),ms(),V(7,`input`,60),K(`input`,function(t){return O(e),k(q().filter.set(t.target.value))})(`keydown.escape`,function(){return O(e),k(q().filter.set(``))}),H()(),N(8,uD,3,1,`span`,7),V(9,`button`,61),K(`click`,function(){return O(e),k(q().refresh())}),ps(),V(10,`svg`,62),U(11,`path`,63)(12,`path`,64),H(),Y(13,` Refresh `),H()(),N(14,dD,4,0,`div`,65)(15,mD,8,1,`div`,66)(16,hD,5,0,`div`,67)(17,gD,5,1,`div`,67)(18,SD,3,0,`ul`,68)}if(e&2){let e=q();P(+!e.page()),j(7),xg(`value`,e.filter()),j(),P(e.source().length?8:-1),j(),J(`spinning`,e.loading()),M(`aria-busy`,e.loading()),j(5),P(e.loading()&&!e.source().length?14:e.error()&&!e.source().length?15:e.source().length?e.filteredSource().length?18:17:16)}}function wD(e){return e.replace(/^_(?=[A-Z])/,``)}var TD=class e{rpc=$(null);staticReport=Q(()=>OT(this.rpc()));focus=$(null);showForm=av();focusHandled=av();filter=A(``);loading=A(!1);error=A(!1);source=A([]);formOwners=A([]);pages=A({});selectedId=A(null);focusId=A(null);collapsed=A(new Set);openKey=A(null);outlets=A([]);pageId=TT();destroyRef=E(ws);injector=E(Ss);cleanups=[];page=Q(()=>{let e=this.pages();if(this.pageId)return e[this.pageId]??null;let t=null;for(let n of Object.values(e))(!t||n.reportedAt>t.reportedAt)&&(t=n);return t});live=Q(()=>(this.page()?.roots.length??0)>0);index=Q(()=>{let e=new Map,t=new Map,n=(r,i)=>{for(let a of r)e.set(a.id,a),i&&t.set(a.id,i),n(a.children,a.id)};return n(this.page()?.roots??[],null),{map:e,parents:t}});query=Q(()=>this.filter().trim().toLowerCase());visible=Q(()=>{let e=this.page()?.roots??[],t=this.query();if(!t)return e;let n=e=>e.name.toLowerCase().includes(t)||e.tag.toLowerCase().includes(t)||!!e.directives?.some(e=>e.toLowerCase().includes(t)),r=e=>e.flatMap(e=>{let t=r(e.children);return n(e)||t.length?[{...e,children:t}]:[]});return r(e)});rows=Q(()=>{let e=[],t=this.collapsed(),n=!!this.query(),r=(i,a)=>{for(let o of i){let i=n||!t.has(o.id);e.push({node:o,depth:a,hasChildren:o.children.length>0,expanded:i}),i&&r(o.children,a+1)}};return r(this.visible(),0),e});selectedNode=Q(()=>{let e=this.selectedId();return e?this.index().map.get(e)??null:null});detail=Q(()=>{let e=this.page()?.detail;return e&&e.id===this.selectedId()?e:null});rovingId=Q(()=>{let e=this.rows(),t=new Set(e.map(e=>e.node.id)),n=this.focusId();if(n&&t.has(n))return n;let r=this.selectedId();return r&&t.has(r)?r:e[0]?.node.id??null});routedById=Q(()=>{let e=new Map,t=n=>{for(let r of n){if(r.activated&&r.devtoolsId){let t=e.get(r.devtoolsId)??[];t.push({route:r.route??``,outlet:r.outlet}),e.set(r.devtoolsId,t)}r.children&&t(r.children)}};return t(this.outlets()),e});sourceByClass=Q(()=>{let e=new Map;for(let t of this.source()){let n=wD(t.className);e.set(n,[...e.get(n)??[],t])}return e});filteredSource=Q(()=>{let e=this.query(),t=this.source();return e?t.filter(t=>t.selector.toLowerCase().includes(e)||t.className.toLowerCase().includes(e)||t.file.toLowerCase().includes(e)):t});sourceCounts=Q(()=>{let e=this.source().filter(e=>e.kind===`component`).length;return{components:e,directives:this.source().length-e}});constructor(){dc(()=>{let e=this.rpc();e&&(this.refresh(),this.watch(e))}),dc(()=>{let e=this.focus();e&&this.live()&&ev(()=>{this.index().map.has(e.id)&&this.reveal(e.id),this.focusHandled.emit()})}),this.destroyRef.onDestroy(()=>{this.highlight(null);for(let e of this.cleanups.splice(0))e()})}async watch(e){for(let e of this.cleanups.splice(0))e();let t=e.scope(`ng-devtools`);try{let e=await t.rpc.sharedState(`component-tree`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e?.pages;this.pages.set(t&&typeof t==`object`?t:{})};n(e.value()),this.cleanups.push(e.on(`updated`,n))}catch{this.pages.set({})}try{let e=await t.rpc.sharedState(`router`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e?.pages??[],n=this.pageId?t.find(e=>e.pageId===this.pageId):t.find(e=>e.snapshot)??t[0];this.outlets.set(n?.outlets??[])};n(e.value()),this.cleanups.push(e.on(`updated`,n))}catch{this.outlets.set([])}}async refresh(){let e=this.rpc();if(!e)return;this.loading.set(!0);let t=e.scope(`ng-devtools`);try{this.source.set(await t.rpc.call(`get-components`)),this.error.set(!1)}catch{this.error.set(!0)}finally{this.loading.set(!1)}let n=await t.rpc.call(`forms-owners`).catch(()=>[]);this.formOwners.set(n??[])}formsIn(e){return this.formOwners().filter(t=>t.file===e)}sourceFor(e){let t=(this.sourceByClass().get(wD(e.name))??[]).filter(e=>e.kind===`component`);return t.find(t=>t.selector===e.tag)??t[0]??null}sourceKey(e){return`${e.file}#${e.className}`}sourceLabel(e){return e.selector?e.kind===`component`&&/^[a-z][\w-]*$/i.test(e.selector)?`<${e.selector}>`:e.selector:wD(e.className)}bareName(e){return wD(e)}select(e){let t=this.selectedId()===e?null:e;this.selectedId.set(t),this.focusId.set(e);let n=this.rpc();n&&n.scope(`ng-devtools`).rpc.call(`select-component`,{pageId:this.page()?.pageId,id:t}).catch(()=>{})}reveal(e){let{parents:t}=this.index();this.collapsed.update(n=>{let r=new Set(n);for(let n=t.get(e);n;n=t.get(n))r.delete(n);return r}),this.rows().some(t=>t.node.id===e)||this.filter.set(``),this.selectedId()!==e&&this.select(e),wd(()=>document.querySelector(`.row[data-id="${CSS.escape(e)}"]`)?.scrollIntoView({block:`nearest`}),{injector:this.injector})}toggle(e,t){t?.stopPropagation(),!this.query()&&this.collapsed.update(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})}highlight(e){let t=this.rpc();if(!t)return;let n=e?{pageId:this.page()?.pageId,id:e}:null;t.scope(`ng-devtools`).rpc.call(`request-page-highlight`,n).catch(()=>{})}onTreeKey(e){let t=this.rows();if(!t.length)return;let n=t.findIndex(e=>e.node.id===this.rovingId()),r=Math.max(n,0),i=t[r],a=-1;switch(e.key){case`ArrowDown`:a=Math.min(r+1,t.length-1);break;case`ArrowUp`:a=Math.max(r-1,0);break;case`Home`:a=0;break;case`End`:a=t.length-1;break;case`ArrowRight`:i.hasChildren&&!i.expanded?this.toggle(i.node.id):i.hasChildren&&(a=r+1);break;case`ArrowLeft`:if(i.hasChildren&&i.expanded&&!this.query())this.toggle(i.node.id);else{let e=this.index().parents.get(i.node.id);a=t.findIndex(t=>t.node.id===e)}break;case`Enter`:case` `:this.select(i.node.id);break;default:return}if(e.preventDefault(),a>=0){let e=t[a].node.id;this.focusId.set(e),queueMicrotask(()=>{let t=document.querySelector(`.row[data-id="${CSS.escape(e)}"]`);t?.focus(),t?.scrollIntoView({block:`nearest`})})}}static ɵfac=function(t){return new(t||e)};static ɵcmp=Oh({type:e,selectors:[[`app-component-tree`]],inputs:{rpc:[1,`rpc`],focus:[1,`focus`]},outputs:{showForm:`showForm`,focusHandled:`focusHandled`},decls:2,vars:1,consts:[[1,`intro`],[1,`toolbar`],[1,`search`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`search-icon`],[`cx`,`11`,`cy`,`11`,`r`,`7`],[`d`,`m20 20-3.5-3.5`],[`type`,`search`,`placeholder`,`Filter by class, tag or directive…`,`aria-label`,`Filter components by class, tag or directive`,`autocomplete`,`off`,`spellcheck`,`false`,3,`input`,`keydown.escape`,`value`],[`aria-live`,`polite`,1,`count`],[1,`notice`],[1,`layout`],[1,`sr-only`],[1,`state`,`compact`,`tree`],[`role`,`tree`,`aria-label`,`Component instances`,1,`tree`,3,`keydown`,`hidden`],[`role`,`treeitem`,1,`row`,3,`selected`,`--%NS%depth`],[`aria-labelledby`,`ct-detail-title`,1,`detail`],[1,`detail`,`placeholder`],[1,`state-title`],[`type`,`button`,3,`click`],[`role`,`treeitem`,1,`row`,3,`click`,`focus`,`blur`,`mouseenter`,`mouseleave`],[`aria-hidden`,`true`,1,`twisty`,3,`open`],[`aria-hidden`,`true`,1,`twisty-space`],[1,`name`,`mono`],[1,`tag`,`mono`],[1,`routed`],[1,`dirs`],[`aria-hidden`,`true`,1,`twisty`,3,`click`],[`viewBox`,`0 0 24 24`],[`d`,`m9 6 6 6-6 6`],[1,`detail-head`],[1,`badge`],[`id`,`ct-detail-title`,1,`mono`],[1,`mono`,`muted`],[`role`,`status`,1,`state`,`compact`],[1,`where`,`mono`],[1,`actions`],[`type`,`button`,1,`show-form`],[`type`,`button`,1,`show-form`,3,`click`],[1,`facts`],[1,`mono`],[1,`block`],[1,`pill`],[1,`props`],[1,`empty-line`],[1,`chips`],[1,`deps`],[1,`prop`],[1,`prop-name`,`mono`],[1,`muted`],[1,`chip`,3,`on`],[1,`chip`],[1,`chip-note`],[1,`chip`,`mono`],[1,`flag`],[1,`dep`],[1,`token`,`mono`],[1,`from`],[1,`from`,`missing`],[`aria-hidden`,`true`,1,`spinner`],[1,`state-hint`],[`role`,`status`,1,`notice`],[`type`,`search`,`placeholder`,`Filter by selector, class or file…`,`aria-label`,`Filter components by selector, class or file`,`autocomplete`,`off`,`spellcheck`,`false`,3,`input`,`keydown.escape`,`value`],[`type`,`button`,1,`refresh`,3,`click`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`d`,`M20 12a8 8 0 1 1-2.34-5.66`],[`d`,`M20 4v5h-5`],[`role`,`status`,1,`state`],[`role`,`alert`,1,`state`],[1,`state`],[`role`,`list`,1,`source-list`],[1,`source-item`,3,`expanded`],[1,`source-item`],[`type`,`button`,1,`source-toggle`,3,`click`],[1,`kind-flag`],[1,`row-main`],[1,`selector`,`mono`],[1,`file`,`mono`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`chevron`],[1,`inline-detail`,3,`id`]],template:function(e,t){e&1&&N(0,aD,21,7)(1,CD,19,7),e&2&&P(+!t.live())},dependencies:[Fy],styles:[`[_nghost-%COMP%] { - display: block; - color: var(--%NS%text); - font-size: 13px; -} - -.mono[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); -} - -.muted[_ngcontent-%COMP%] { - color: var(--%NS%text-2); -} - -.intro[_ngcontent-%COMP%] { - max-width: 720px; - margin: 0 0 12px; - color: var(--%NS%text-2); - line-height: 1.5; -} - -.notice[_ngcontent-%COMP%] { - margin: 0 0 12px; - padding: 10px 12px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface); - color: var(--%NS%text-2); - line-height: 1.5; -} - -.toolbar[_ngcontent-%COMP%] { - position: sticky; - top: 0; - z-index: 2; - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 8px 12px; - margin: 0 0 12px; - padding: 8px; - background: color-mix(in srgb, var(--%NS%surface) 85%, transparent); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); -} - -.search[_ngcontent-%COMP%] { - position: relative; - flex: 1 1 220px; - min-width: 0; -} - -.search-icon[_ngcontent-%COMP%] { - position: absolute; - top: 50%; - left: 12px; - width: 14px; - height: 14px; - transform: translateY(-50%); - fill: none; - stroke: var(--%NS%text-3); - stroke-width: 2.2; - stroke-linecap: round; - pointer-events: none; -} - -.search[_ngcontent-%COMP%]:focus-within .search-icon[_ngcontent-%COMP%] { - stroke: var(--%NS%accent); -} - -input[type=search][_ngcontent-%COMP%] { - width: 100%; - height: 34px; - padding: 0 12px 0 34px; - background: var(--%NS%bg); - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - color: var(--%NS%text); - font: inherit; - font-size: 13px; -} - -input[type=search][_ngcontent-%COMP%]::placeholder { - color: var(--%NS%text-3); -} - -input[type=search][_ngcontent-%COMP%]:focus-visible { - outline: none; - border-color: var(--%NS%accent); - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -.count[_ngcontent-%COMP%] { - flex: none; - color: var(--%NS%text-2); - font-size: 12px; - font-variant-numeric: tabular-nums; - white-space: nowrap; -} - -button[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 8px; - height: 34px; - padding: 0 14px; - background: var(--%NS%surface-2); - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - color: var(--%NS%text); - cursor: pointer; - font: inherit; - font-size: 13px; - font-weight: 500; - transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease); -} - -button[_ngcontent-%COMP%]:hover { - background: var(--%NS%surface-3); - border-color: var(--%NS%accent-line); -} - -button[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -button[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] { - flex: none; - width: 14px; - height: 14px; - fill: none; - stroke: currentColor; - stroke-width: 2.2; - stroke-linecap: round; - stroke-linejoin: round; -} - -.refresh.spinning[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] { - animation: spin 0.8s linear infinite; -} - -.layout[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: minmax(0, 1fr); - gap: 12px; - align-items: start; -} - -@media (min-width: 880px) { - .layout[_ngcontent-%COMP%] { - grid-template-columns: minmax(0, 1fr) minmax(340px, 44%); - } - .detail[_ngcontent-%COMP%] { - position: sticky; - top: 64px; - max-height: calc(100vh - 150px); - overflow: auto; - } -} -.tree[_ngcontent-%COMP%] { - min-width: 0; - padding: 6px; - background: var(--%NS%surface); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - animation: enter 0.35s var(--%NS%ease) both; -} - -.row[_ngcontent-%COMP%] { - position: relative; - display: flex; - align-items: center; - gap: 6px; - min-height: 32px; - padding: 0 8px 0 calc(4px + var(--%NS%depth, 0) * 18px); - border-radius: var(--%NS%radius-sm); - cursor: pointer; - transition: background-color 120ms var(--%NS%ease); -} - -.row[_ngcontent-%COMP%]::before { - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: 14px; - width: calc(var(--%NS%depth, 0) * 18px); - background: repeating-linear-gradient(to right, var(--%NS%border) 0 1px, transparent 1px 18px); - pointer-events: none; -} - -.row[_ngcontent-%COMP%]:hover { - background: var(--%NS%surface-2); -} - -.row[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: -2px; -} - -.row.selected[_ngcontent-%COMP%] { - background: var(--%NS%accent-soft); - box-shadow: inset 2px 0 0 var(--%NS%accent); -} - -.twisty[_ngcontent-%COMP%], -.twisty-space[_ngcontent-%COMP%] { - flex: none; - width: 20px; - height: 20px; -} - -.twisty[_ngcontent-%COMP%] { - display: grid; - place-items: center; - border-radius: 4px; - color: var(--%NS%text-3); -} - -.twisty[_ngcontent-%COMP%]:hover { - color: var(--%NS%text); - background: var(--%NS%surface-3); -} - -.twisty[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] { - width: 14px; - height: 14px; - fill: none; - stroke: currentColor; - stroke-width: 2.2; - stroke-linecap: round; - stroke-linejoin: round; - transition: transform 150ms var(--%NS%ease); -} - -.twisty.open[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] { - transform: rotate(90deg); -} - -.name[_ngcontent-%COMP%] { - min-width: 0; - color: var(--%NS%text-strong); - font-size: 12px; - font-weight: 600; - overflow: hidden; - min-width: 0; - text-overflow: ellipsis; - white-space: nowrap; -} - -.tag[_ngcontent-%COMP%] { - flex: 0 1 auto; - min-width: 0; - color: var(--%NS%text-2); - font-size: 12px; - overflow: hidden; - min-width: 0; - text-overflow: ellipsis; - white-space: nowrap; -} - -.routed[_ngcontent-%COMP%] { - flex: none; - max-width: 40%; - padding: 0 8px; - border: 1px solid var(--%NS%accent-line); - border-radius: 99px; - background: var(--%NS%accent-soft); - color: var(--%NS%accent); - font-family: var(--%NS%font-mono); - font-size: 11px; - line-height: 18px; - overflow: hidden; - min-width: 0; - text-overflow: ellipsis; - white-space: nowrap; -} - -.dirs[_ngcontent-%COMP%] { - flex: none; - margin-left: auto; - padding: 0 7px; - border-radius: 99px; - background: var(--%NS%surface-3); - color: var(--%NS%text-2); - font-size: 11px; - line-height: 18px; -} - -.detail[_ngcontent-%COMP%] { - min-width: 0; - background: var(--%NS%surface); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - animation: enter 0.35s var(--%NS%ease) both; -} - -.detail.placeholder[_ngcontent-%COMP%] { - padding: 24px 16px; - border-style: dashed; - text-align: center; -} - -.detail-head[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 6px 10px; - padding: 14px 16px; - border-bottom: 1px solid var(--%NS%border); -} - -.detail-head[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] { - min-width: 0; - margin: 0; - color: var(--%NS%text-strong); - font-size: 15px; - font-weight: 600; - overflow-wrap: anywhere; -} - -.where[_ngcontent-%COMP%] { - width: 100%; - margin: 0; - color: var(--%NS%text-2); - font-size: 12px; - overflow-wrap: anywhere; -} - -.badge[_ngcontent-%COMP%] { - padding: 2px 8px; - border-radius: 99px; - border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent); - background: color-mix(in srgb, var(--%NS%accent) 12%, transparent); - color: var(--%NS%accent); - font-size: 10px; - font-weight: 700; - letter-spacing: 0.06em; - text-transform: uppercase; -} - -.actions[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 8px; - width: 100%; -} - -.show-form[_ngcontent-%COMP%] { - background: var(--%NS%accent); - border-color: var(--%NS%accent); - color: var(--%NS%accent-ink); - font-weight: 600; -} - -.show-form[_ngcontent-%COMP%]:hover { - background: var(--%NS%accent-hover); - border-color: var(--%NS%accent-hover); -} - -.facts[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: max-content minmax(0, 1fr); - gap: 8px 16px; - margin: 0; - padding: 14px 16px; - border-bottom: 1px solid var(--%NS%border); -} - -.facts[_ngcontent-%COMP%] dt[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - align-self: center; -} - -.facts[_ngcontent-%COMP%] dd[_ngcontent-%COMP%] { - min-width: 0; - margin: 0; - color: var(--%NS%text); - overflow-wrap: anywhere; -} - -.block[_ngcontent-%COMP%] { - padding: 14px 16px; - border-bottom: 1px solid var(--%NS%border); -} - -.block[_ngcontent-%COMP%]:last-child { - border-bottom: 0; -} - -h3[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - display: flex; - align-items: center; - gap: 6px; - margin: 0 0 8px; -} - -.pill[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - justify-content: center; - min-width: 18px; - height: 16px; - padding: 0 5px; - border-radius: 99px; - background: var(--%NS%surface-3); - color: var(--%NS%text-2); - font-size: 10px; - font-weight: 600; - letter-spacing: 0; -} - -.props[_ngcontent-%COMP%], -.deps[_ngcontent-%COMP%], -.chips[_ngcontent-%COMP%] { - display: grid; - gap: 6px; - margin: 0; - padding: 0; - list-style: none; -} - -.chips[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; -} - -.prop[_ngcontent-%COMP%], -.dep[_ngcontent-%COMP%] { - min-width: 0; - padding: 8px 10px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%bg); -} - -.prop-name[_ngcontent-%COMP%] { - display: block; - margin-bottom: 4px; - color: var(--%NS%text-strong); - font-size: 12px; - font-weight: 600; -} - -pre[_ngcontent-%COMP%] { - max-height: 200px; - margin: 0; - overflow: auto; - color: var(--%NS%text); - font-family: var(--%NS%font-mono); - font-size: 12px; - line-height: 1.5; - white-space: pre-wrap; - overflow-wrap: anywhere; -} - -.chip[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - gap: 6px; - padding: 2px 10px; - border: 1px solid var(--%NS%border-strong); - border-radius: 99px; - color: var(--%NS%text); - font-size: 12px; -} - -.chip.on[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); - background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); - color: var(--%NS%ok); -} - -.chip-note[_ngcontent-%COMP%] { - color: var(--%NS%text-2); - font-size: 11px; -} - -.chip.on[_ngcontent-%COMP%] .chip-note[_ngcontent-%COMP%] { - color: inherit; -} - -.dep[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 6px 8px; -} - -.token[_ngcontent-%COMP%] { - min-width: 0; - color: var(--%NS%text-strong); - font-size: 12px; - font-weight: 600; - overflow-wrap: anywhere; -} - -.flag[_ngcontent-%COMP%] { - padding: 0 6px; - border: 1px solid var(--%NS%border-strong); - border-radius: 5px; - color: var(--%NS%text-2); - font-family: var(--%NS%font-mono); - font-size: 10px; - font-weight: 400; - letter-spacing: 0; - line-height: 16px; - text-transform: none; -} - -.from[_ngcontent-%COMP%] { - margin-left: auto; - color: var(--%NS%text-2); - font-size: 12px; -} - -.from[_ngcontent-%COMP%] .mono[_ngcontent-%COMP%] { - color: var(--%NS%text); -} - -.from.missing[_ngcontent-%COMP%] { - color: var(--%NS%warn); -} - -.empty-line[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-2); -} - -.state[_ngcontent-%COMP%] { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; - padding: 40px 16px; - text-align: center; - background: var(--%NS%surface); - border: 1px dashed var(--%NS%border-strong); - border-radius: var(--%NS%radius); -} - -.state.compact[_ngcontent-%COMP%] { - padding: 24px 12px; - border: 0; - background: none; -} - -.state-title[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-strong); - font-size: 14px; - font-weight: 600; - overflow-wrap: anywhere; -} - -.state-hint[_ngcontent-%COMP%] { - max-width: 440px; - margin: 0 auto; - color: var(--%NS%text-2); - line-height: 1.5; -} - -.spinner[_ngcontent-%COMP%] { - width: 20px; - height: 20px; - border: 2px solid var(--%NS%border-strong); - border-top-color: var(--%NS%accent); - border-radius: 50%; - animation: spin 0.8s linear infinite; -} - -@media (prefers-reduced-motion: reduce) { - .spinner[_ngcontent-%COMP%], - .refresh.spinning[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] { - animation: none; - } -} -.source-list[_ngcontent-%COMP%] { - display: flex; - flex-direction: column; - gap: 8px; - margin: 0; - padding: 0; - list-style: none; -} - -.source-item[_ngcontent-%COMP%] { - min-width: 0; - background: var(--%NS%surface); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - overflow: hidden; -} - -.source-item.expanded[_ngcontent-%COMP%] { - border-color: var(--%NS%accent-line); - box-shadow: inset 2px 0 0 var(--%NS%accent); -} - -.source-toggle[_ngcontent-%COMP%] { - justify-content: flex-start; - gap: 12px; - width: 100%; - height: auto; - min-height: 52px; - padding: 10px 16px; - background: none; - border: 0; - border-radius: 0; - text-align: left; -} - -.source-toggle[_ngcontent-%COMP%]:hover { - background: var(--%NS%surface-2); -} - -.source-toggle[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: -2px; -} - -.kind-flag[_ngcontent-%COMP%] { - flex: none; - padding: 1px 8px; - border-radius: 99px; - border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent); - background: color-mix(in srgb, var(--%NS%accent) 12%, transparent); - color: var(--%NS%accent); - font-size: 10px; - font-weight: 700; - letter-spacing: 0.06em; - text-transform: uppercase; -} - -.kind-flag.directive[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); - background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); - color: var(--%NS%ok); -} - -.row-main[_ngcontent-%COMP%] { - display: flex; - flex: 1; - flex-direction: column; - gap: 2px; - min-width: 0; -} - -.selector[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-weight: 600; - overflow-wrap: anywhere; -} - -.file[_ngcontent-%COMP%] { - color: var(--%NS%text-2); - font-size: 12px; - overflow: hidden; - min-width: 0; - text-overflow: ellipsis; - white-space: nowrap; -} - -.chevron[_ngcontent-%COMP%] { - flex: none; - width: 16px; - height: 16px; - fill: none; - stroke: var(--%NS%text-3); - stroke-width: 2.2; - transition: transform 200ms var(--%NS%ease); -} - -.expanded[_ngcontent-%COMP%] .chevron[_ngcontent-%COMP%] { - transform: rotate(90deg); - stroke: var(--%NS%accent); -} - -.inline-detail[_ngcontent-%COMP%] { - padding: 0 0 12px; - border-top: 1px solid var(--%NS%border); -} - -.inline-detail[_ngcontent-%COMP%] .facts[_ngcontent-%COMP%] { - border-bottom: 0; -} - -.inline-detail[_ngcontent-%COMP%] .show-form[_ngcontent-%COMP%] { - margin: 0 16px; -}`]})};function ED(e){return e.line?`${e.file}:${e.line}`:e.file}function DD(e,t){let n=t.filter(t=>t.fullPath===e.fullPath&&t.redirectTo!==void 0==(e.redirectTo!==void 0));return n.find(t=>!!e.component&&t.component===e.component)??n.find(t=>!t.component||!e.component)}var OD=DT;function kD(e,t,n){return OD(e,`request-router-action`,{pageId:t,request:n})}function AD(e){return e===`succeeded`?`good`:e===`redirected`||e===`pending`||e===`skipped`?`warn`:e===`cancelled`||e===`failed`?`bad`:``}var jD=()=>[],MD=(e,t)=>t[0],ND=(e,t)=>t.input;function PD(e,t){if(e&1&&(V(0,`p`,3),Y(1,` The browser shows `),V(2,`code`),Y(3),H(),Y(4,`, not the router URL (skipLocationChange, browserUrl, a failed navigation or code that changed history). `),H()),e&2){let e=q();j(3),X(e.browserUrl)}}function FD(e,t){if(e&1&&(V(0,`p`,12),Y(1),H()),e&2){let e=q(3);j(),X(e.navigationOff)}}function ID(e,t){if(e&1){let e=W();V(0,`div`,8),U(1,`span`,9),V(2,`span`,10),Y(3,`Navigating to `),V(4,`code`),Y(5),H(),Y(6),H(),V(7,`button`,11),K(`click`,function(){return O(e),k(q(2).abort())}),Y(8,` Abort `),H()(),N(9,FD,2,1,`p`,12)}if(e&2){let e=t,n=q(2);j(5),X(e.url),j(),Z(` (#`,e.id,`)`),j(),xg(`disabled`,!n.navigationAllowed()),M(`aria-describedby`,n.navigationAllowed()?null:`route-current-writes-off`),j(2),P(n.navigationAllowed()?-1:9)}}function LD(e,t){if(e&1&&(V(0,`p`,4),Y(1),H()),e&2){let e=q(2);j(),X(e.message())}}function RD(e,t){if(e&1&&(V(0,`dt`),Y(1,`Document title`),H(),V(2,`dd`),Y(3),H()),e&2){let e=q();j(3),X(e.title)}}function zD(e,t){if(e&1&&(V(0,`dt`),Y(1,`Query params`),H(),V(2,`dd`)(3,`code`),Y(4),U_(5,`json`),H()()),e&2){let e=q();j(4),X(G_(5,1,e.queryParams))}}function BD(e,t){if(e&1&&(V(0,`dt`),Y(1,`Fragment`),H(),V(2,`dd`)(3,`code`),Y(4),H()()),e&2){let e=q();j(4),X(e.fragment)}}function VD(e,t){if(e&1&&(V(0,`span`,14),Y(1),H()),e&2){let e=q().$implicit;j(),X(e.route.outlet)}}function HD(e,t){e&1&&(V(0,`span`,14),Y(1,`lazy`),H())}function UD(e,t){if(e&1&&(V(0,`div`,15),Y(1),H()),e&2){let e=q().$implicit;j(),O_(` title `,e.route.title,``,e.route.ownTitle===!1?` (inherited)`:``,` `)}}function WD(e,t){if(e&1&&(V(0,`code`,16),Y(1),H()),e&2){let e=q().$implicit;j(),X(e.route.component)}}function GD(e,t){e&1&&(V(0,`span`,19),Y(1,`–`),H(),V(2,`span`,20),Y(3,`none`),H())}function KD(e,t){e&1&&(V(0,`span`,14),Y(1,`inherited`),H())}function qD(e,t){if(e&1&&(V(0,`div`,17)(1,`code`),Y(2),U_(3,`json`),H(),N(4,KD,2,0,`span`,14),H()),e&2){let e=t.$implicit,n=q().$implicit;j(2),O_(``,e[0],`: `,G_(3,3,e[1])),j(2),P(n.route.paramSources?.[e[0]]===`inherited`?4:-1)}}function JD(e,t){e&1&&(V(0,`span`,19),Y(1,`–`),H(),V(2,`span`,20),Y(3,`none`),H())}function YD(e,t){e&1&&(V(0,`span`,14),Y(1),H()),e&2&&(j(),X(t))}function XD(e,t){if(e&1&&(V(0,`div`,18)(1,`code`),Y(2),U_(3,`json`),H(),N(4,YD,2,1,`span`,14),H()),e&2){let e,n=t.$implicit,r=q().$implicit;j(2),O_(``,n[0],`: `,G_(3,3,n[1])),j(2),P((e=r.route.dataSources?.[n[0]])?4:-1,e)}}function ZD(e,t){e&1&&(V(0,`span`,19),Y(1,`–`),H(),V(2,`span`,20),Y(3,`none`),H())}function QD(e,t){if(e&1&&(V(0,`span`,14),Y(1),H()),e&2){let e=t.$implicit;j(),X(e)}}function $D(e,t){if(e&1&&(V(0,`span`,14),Y(1),H()),e&2){let e=t.$implicit;j(),Z(`resolve `,e)}}function eO(e,t){e&1&&(V(0,`span`,19),Y(1,`–`),H(),V(2,`span`,20),Y(3,`none`),H())}function tO(e,t){if(e&1&&(V(0,`tr`)(1,`td`,13),Y(2),N(3,VD,2,1,`span`,14),N(4,HD,2,0,`span`,14),N(5,UD,2,2,`div`,15),H(),V(6,`td`),N(7,WD,2,1,`code`,16)(8,GD,4,0),H(),V(9,`td`),F(10,qD,5,5,`div`,17,MD,!1,JD,4,0),H(),V(13,`td`),F(14,XD,5,5,`div`,18,MD,!1,ZD,4,0),H(),V(17,`td`),F(18,QD,2,1,`span`,14,lg),F(20,$D,2,1,`span`,14,lg),N(22,eO,4,0),H()()),e&2){let e=t.$implicit,n=q(2);j(),n_(`padding-left`,14+e.depth*16,`px`),j(),Z(` `,e.depth===0&&!e.route.path?`(root)`:`/`+e.route.path,` `),j(),P(e.route.outlet===`primary`?-1:3),j(),P(e.route.lazy?4:-1),j(),P(e.route.title?5:-1),j(2),P(e.route.component?7:8),j(3),I(n.entries(e.route.params)),j(4),I(n.entries(e.route.data)),j(4),I(n.guardList(e.route)),j(2),I(e.route.resolvers??z_(10,jD)),j(2),P(!n.guardList(e.route).length&&!e.route.resolvers?.length?22:-1)}}function nO(e,t){if(e&1&&(V(0,`code`),Y(1),H(),Y(2,` for `),V(3,`code`),Y(4),H()),e&2){let e=q().$implicit;j(),X(e.outlet.component??`?`),j(3),X(e.outlet.route??`?`)}}function rO(e,t){e&1&&(V(0,`span`,23),Y(1,`not activated`),H())}function iO(e,t){e&1&&(V(0,`span`,14),Y(1,`detached by reuse strategy`),H())}function aO(e,t){if(e&1&&(V(0,`span`,14),Y(1),H()),e&2){let e=t.$implicit;j(),O_(`input `,e.input,` ← `,e.source)}}function oO(e,t){if(e&1&&(V(0,`li`)(1,`span`,14),Y(2),H(),N(3,nO,5,2)(4,rO,2,0,`span`,23),N(5,iO,2,0,`span`,14),F(6,aO,2,2,`span`,14,ND),H()),e&2){let e=t.$implicit,n=q(3);n_(`padding-left`,10+e.depth*16,`px`),j(2),X(e.outlet.outlet),j(),P(e.outlet.activated?3:4),j(2),P(e.outlet.detached?5:-1),j(),I(n.boundInputs(e.outlet))}}function sO(e,t){if(e&1&&(V(0,`h3`),Y(1,`Outlets`),H(),V(2,`ul`,21),F(3,oO,8,5,`li`,22,cg),H()),e&2){let e=q(2);j(3),I(e.outletRows())}}function cO(e,t){if(e&1&&(V(0,`p`,1)(1,`span`,2),Y(2,`URL`),H(),V(3,`code`),Y(4),H()(),N(5,PD,5,1,`p`,3),N(6,ID,10,5),N(7,LD,2,1,`p`,4),V(8,`dl`,5),N(9,RD,4,1),N(10,zD,6,3),N(11,BD,5,1),H(),V(12,`h3`),Y(13,`Active routes`),H(),V(14,`div`,6)(15,`table`)(16,`thead`)(17,`tr`)(18,`th`,7),Y(19,`Route`),H(),V(20,`th`,7),Y(21,`Component`),H(),V(22,`th`,7),Y(23,`Params`),H(),V(24,`th`,7),Y(25,`Data`),H(),V(26,`th`,7),Y(27,`Guards and resolvers`),H()()(),V(28,`tbody`),F(29,tO,23,11,`tr`,null,cg),H()()(),N(31,sO,5,0)),e&2){let e,n=t,r=q();j(4),X(n.url),j(),P(n.urlDrift&&n.browserUrl?5:-1),j(),P((e=n.pending)?6:-1,e),j(),P(r.message()?7:-1),j(2),P(n.title?9:-1),j(),P(r.hasKeys(n.queryParams)?10:-1),j(),P(n.fragment?11:-1),j(18),I(r.rows()),j(2),P(r.outletRows().length?31:-1)}}function lO(e,t){e&1&&(V(0,`div`,0)(1,`p`,24),Y(2,`This page reports no Router.`),H(),V(3,`p`,23),Y(4,` Add `),V(5,`code`),Y(6,`provideRouter()`),H(),Y(7,` to the app config and navigate once to see the active routes here. `),H()())}var uO=class e{page=$.required();rpc=$(null);navigationAllowed=Q(()=>AT(this.rpc(),`router`));navigationOff=yT(`router`);message=A(``);rows=Q(()=>{let e=[],t=(n,r)=>{e.push({route:n,depth:r});for(let e of n.children)t(e,r+1)},n=this.page().snapshot?.root;return n&&t(n,0),e});outletRows=Q(()=>{let e=[],t=(n,r)=>{for(let i of n)e.push({outlet:i,depth:r}),i.children&&t(i.children,r+1)};return t(this.page().outlets??[],0),e});hasKeys(e){return Object.keys(e).length>0}entries(e){return Object.entries(e)}guardList(e){return Object.entries(e.guards??{}).flatMap(([e,t])=>t.map(t=>`${e} ${t}`))}boundInputs(e){return(e.inputs??[]).filter(e=>e.source!==`unset`)}async abort(){let e=await kD(this.rpc(),this.page().pageId,{action:`abort`});this.message.set(e?.error?String(e.error):`Aborted navigation #${e?.aborted}`)}static ɵfac=function(t){return new(t||e)};static ɵcmp=Oh({type:e,selectors:[[`app-route-current`]],inputs:{page:[1,`page`],rpc:[1,`rpc`]},decls:2,vars:1,consts:[[1,`empty`],[1,`url`],[1,`url-label`],[`role`,`note`,1,`note`],[`role`,`status`,1,`muted`],[1,`facts`],[`role`,`region`,`aria-label`,`Active routes`,`tabindex`,`0`,1,`table-scroll`],[`scope`,`col`],[`role`,`status`,1,`pending`],[`aria-hidden`,`true`,1,`pulse`],[1,`pending-text`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`id`,`route-current-writes-off`,1,`muted`],[1,`path`],[1,`tag`],[1,`sub`],[1,`component`],[1,`entry`],[1,`entry`,`data`],[`aria-hidden`,`true`,1,`nil`],[1,`visually-hidden`],[1,`outlets`],[3,`padding-left`],[1,`muted`],[1,`empty-title`]],template:function(e,t){if(e&1&&N(0,cO,32,8)(1,lO,8,0,`div`,0),e&2){let e;P((e=t.page().snapshot)?0:1,e)}},dependencies:[Fy],styles:[`.muted[_ngcontent-%COMP%] { - color: var(--%NS%text-2); - font-size: 13px; - line-height: 1.5; -} - -.nil[_ngcontent-%COMP%] { - color: var(--%NS%text-3); -} - -code[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); - font-size: 12.5px; - color: var(--%NS%text); - overflow-wrap: anywhere; -} - -.tag[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - max-width: 100%; - min-height: 20px; - margin: 2px 4px 2px 0; - padding: 0 8px; - border: 1px solid var(--%NS%border); - border-radius: 99px; - background: var(--%NS%surface-2); - color: var(--%NS%text); - font-family: var(--%NS%font-mono); - font-size: 11.5px; - line-height: 1.4; - vertical-align: middle; - overflow-wrap: anywhere; - white-space: normal; -} - -.badge[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - min-height: 20px; - padding: 0 8px; - border: 1px solid var(--%NS%border-strong); - border-radius: 99px; - background: var(--%NS%surface-2); - color: var(--%NS%text); - font-size: 11px; - font-weight: 600; - line-height: 1.4; - white-space: nowrap; - vertical-align: middle; -} - -.badge[data-tone=good][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); - background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); - color: var(--%NS%ok); -} - -.badge[data-tone=warn][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); - background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); - color: var(--%NS%warn); -} - -.badge[data-tone=bad][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); - color: var(--%NS%danger); -} - -button.small[_ngcontent-%COMP%] { - display: inline-flex; - flex: none; - align-items: center; - justify-content: center; - gap: 6px; - height: 34px; - padding: 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - font-weight: 500; - white-space: nowrap; - cursor: pointer; - transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease); -} - -button.small[_ngcontent-%COMP%]:hover:not(:disabled) { - background: var(--%NS%surface-3); - border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%border-strong)); -} - -button.small[_ngcontent-%COMP%]:active:not(:disabled) { - transform: translateY(1px); -} - -button.small[_ngcontent-%COMP%]:disabled { - opacity: 0.55; - cursor: not-allowed; -} - -button.small.primary[_ngcontent-%COMP%] { - border-color: var(--%NS%accent); - background: var(--%NS%accent); - color: var(--%NS%accent-ink); - font-weight: 600; -} - -button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) { - border-color: var(--%NS%accent-hover); - background: var(--%NS%accent-hover); -} - -button.small[_ngcontent-%COMP%]:focus-visible, -.table-scroll[_ngcontent-%COMP%]:focus-visible, -input[type=checkbox][_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -input.field[_ngcontent-%COMP%], -select[_ngcontent-%COMP%] { - height: 34px; - padding: 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background-color: var(--%NS%bg); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease); -} - -input.field[_ngcontent-%COMP%] { - text-overflow: ellipsis; -} - -input.field[_ngcontent-%COMP%]::placeholder { - color: var(--%NS%text-3); -} - -input.field[_ngcontent-%COMP%]:hover:not(:focus), -select[_ngcontent-%COMP%]:hover:not(:focus) { - border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%border-strong)); -} - -input.field[_ngcontent-%COMP%]:focus-visible, -select[_ngcontent-%COMP%]:focus-visible { - outline: none; - border-color: var(--%NS%accent); - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -.note[_ngcontent-%COMP%] { - margin: 0; - padding: 10px 14px; - border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent); - border-radius: var(--%NS%radius-sm); - background: color-mix(in srgb, var(--%NS%warn) 10%, transparent); - color: var(--%NS%text); - font-size: 13px; - line-height: 1.5; -} - -.empty[_ngcontent-%COMP%] { - display: grid; - gap: 6px; - justify-items: center; - margin: 0; - padding: 40px 24px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - text-align: center; - animation: enter 0.35s var(--%NS%ease) both; -} - -.empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { - margin: 0; - max-width: 480px; - line-height: 1.6; -} - -.empty-title[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-size: 14px; - font-weight: 600; -} - -.empty[_ngcontent-%COMP%] .small[_ngcontent-%COMP%] { - margin-top: 8px; -} - -.facts[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: max-content minmax(0, 1fr); - align-items: baseline; - gap: 8px 24px; - margin: 0; - padding: 14px 16px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - font-size: 13px; -} - -.facts[_ngcontent-%COMP%]:empty { - display: none; -} - -dt[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -dd[_ngcontent-%COMP%] { - min-width: 0; - margin: 0; - color: var(--%NS%text); - overflow-wrap: anywhere; - font-variant-numeric: tabular-nums; -} - -.table-scroll[_ngcontent-%COMP%] { - overflow-x: auto; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - box-shadow: var(--%NS%shadow); - animation: enter 0.35s var(--%NS%ease) both; -} - -table[_ngcontent-%COMP%] { - width: 100%; - border-collapse: collapse; - font-size: 13px; - font-variant-numeric: tabular-nums; -} - -th[_ngcontent-%COMP%] { - padding: 10px 14px; - border-bottom: 1px solid var(--%NS%border); - background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface)); - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.06em; - text-align: left; - text-transform: uppercase; - white-space: nowrap; -} - -td[_ngcontent-%COMP%] { - padding: 10px 14px; - border-bottom: 1px solid var(--%NS%border); - color: var(--%NS%text); - line-height: 1.5; - vertical-align: top; - transition: background-color 0.15s var(--%NS%ease); -} - -tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child td[_ngcontent-%COMP%] { - border-bottom: none; -} - -tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover td[_ngcontent-%COMP%] { - background: var(--%NS%surface-2); -} - -.path[_ngcontent-%COMP%] { - color: var(--%NS%accent); - font-family: var(--%NS%font-mono); - font-size: 12.5px; - white-space: nowrap; -} - -h3[_ngcontent-%COMP%] { - margin: 8px 0 -4px; - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -@media (max-width: 480px) { - .facts[_ngcontent-%COMP%] { - grid-template-columns: minmax(0, 1fr); - gap: 2px; - } - .facts[_ngcontent-%COMP%] dd[_ngcontent-%COMP%] + dt[_ngcontent-%COMP%] { - margin-top: 8px; - } -} -[_nghost-%COMP%] { - display: grid; - gap: 16px; - min-width: 0; -} - -.url[_ngcontent-%COMP%] { - display: flex; - align-items: baseline; - gap: 12px; - min-width: 0; - margin: 0; - padding: 12px 16px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - box-shadow: var(--%NS%shadow); -} - -.url-label[_ngcontent-%COMP%] { - flex: none; - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.url[_ngcontent-%COMP%] code[_ngcontent-%COMP%] { - min-width: 0; - color: var(--%NS%accent); - font-size: 14px; - font-weight: 500; -} - -.pending[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 8px 12px; - align-items: center; - padding: 6px 6px 6px 14px; - border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent); - border-radius: var(--%NS%radius-sm); - background: color-mix(in srgb, var(--%NS%warn) 10%, transparent); - color: var(--%NS%warn); - font-size: 13px; -} - -.pending-text[_ngcontent-%COMP%] { - flex: 1 1 200px; - min-width: 0; -} - -.pending[_ngcontent-%COMP%] code[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); -} - -.pulse[_ngcontent-%COMP%] { - flex: none; - width: 8px; - height: 8px; - border-radius: 99px; - background: var(--%NS%warn); - animation: _ngcontent-%COMP%_pulse 1.2s ease-in-out infinite; -} - -@keyframes _ngcontent-%COMP%_pulse { - 50% { - opacity: 0.35; - } -} -@media (prefers-reduced-motion: reduce) { - .pulse[_ngcontent-%COMP%] { - animation: none; - } -} -.sub[_ngcontent-%COMP%] { - margin-top: 4px; - color: var(--%NS%text-2); - font-family: var(--%NS%font-sans); - font-size: 12px; - white-space: normal; -} - -.component[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); -} - -.entry[_ngcontent-%COMP%] + .entry[_ngcontent-%COMP%] { - margin-top: 2px; -} - -.data[_ngcontent-%COMP%] { - max-width: 360px; -} - -.outlets[_ngcontent-%COMP%] { - display: grid; - gap: 2px; - margin: 0; - padding: 6px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - color: var(--%NS%text); - font-size: 13px; - list-style: none; - animation: enter 0.35s var(--%NS%ease) both; -} - -.outlets[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { - padding-top: 6px; - padding-right: 10px; - padding-bottom: 6px; - border-radius: var(--%NS%radius-sm); - line-height: 1.8; - overflow-wrap: anywhere; - transition: background-color 0.15s var(--%NS%ease); -} - -.outlets[_ngcontent-%COMP%] li[_ngcontent-%COMP%]:hover { - background: var(--%NS%surface-2); -}`]})};function dO(e,t){if(e&1&&(V(0,`span`,7),Y(1),H()),e&2){let e=q(2);j(),Z(``,e.counts().error,` error(s)`)}}function fO(e,t){if(e&1&&(V(0,`span`,8),Y(1),H()),e&2){let e=q(2);j(),Z(``,e.counts().warning,` warning(s)`)}}function pO(e,t){if(e&1&&(V(0,`span`,9),Y(1),H()),e&2){let e=q(2);j(),Z(``,e.counts().info,` info`)}}function mO(e,t){if(e&1&&(V(0,`span`,3),N(1,dO,2,1,`span`,7),N(2,fO,2,1,`span`,8),N(3,pO,2,1,`span`,9),H()),e&2){let e=q();j(),P(e.counts().error?1:-1),j(),P(e.counts().warning?2:-1),j(),P(e.counts().info?3:-1)}}function hO(e,t){e&1&&(V(0,`p`,4),Y(1,`Checking…`),H())}function gO(e,t){if(e&1&&(V(0,`li`)(1,`div`,10)(2,`span`,9),Y(3),H(),V(4,`code`,11),Y(5),H(),V(6,`code`,12),Y(7),H()(),V(8,`p`,13),Y(9),H(),V(10,`p`,14)(11,`span`,15),Y(12,`Fix`),H(),V(13,`span`,16),Y(14),V(15,`span`,2),Y(16),H()()()()),e&2){let e=t.$implicit,n=q(2);M(`data-severity`,e.severity),j(2),M(`data-tone`,n.severityTone(e.severity)),j(),X(e.severity),j(2),X(e.rule),j(2),X(e.route),j(2),X(e.message),j(5),Z(``,e.fix,` `),j(2),Z(`(Angular `,e.angular===`throws`?`throws`:e.angular===`warns`?`warns`:`does not warn`,`)`)}}function _O(e,t){if(e&1&&(V(0,`ul`,5),F(1,gO,17,8,`li`,null,cg),H()),e&2){let e=q();j(),I(e.findings())}}function vO(e,t){e&1&&(V(0,`div`,6)(1,`span`,17),ps(),V(2,`svg`,18),U(3,`path`,19),H()(),ms(),V(4,`p`,20),Y(5,`No route config problems found.`),H(),V(6,`p`,2),Y(7,`The check runs again after each navigation or config change.`),H()())}var yO=class e{page=$.required();rpc=$(null);findings=A([]);loading=A(!1);counts=Q(()=>{let e={error:0,warning:0,info:0};for(let t of this.findings())e[t.severity]++;return e});key=Q(()=>`${this.page().pageId}:${this.page().generation}:${this.page().navigations.length}`);constructor(){dc(()=>{this.key(),ev(()=>void this.run())})}severityTone(e){return e===`error`?`bad`:e===`warning`?`warn`:``}async run(){this.loading.set(!0),this.findings.set(await OD(this.rpc(),`router-lint`,this.page().pageId)??[]),this.loading.set(!1)}static ɵfac=function(t){return new(t||e)};static ɵcmp=Oh({type:e,selectors:[[`app-route-lint`]],inputs:{page:[1,`page`],rpc:[1,`rpc`]},decls:9,vars:4,consts:[[1,`toolbar`],[`type`,`button`,1,`small`,3,`click`],[1,`muted`],[1,`summary`],[`role`,`status`,1,`muted`,`empty`],[1,`findings`],[1,`empty`],[`data-tone`,`bad`,1,`badge`],[`data-tone`,`warn`,1,`badge`],[1,`badge`],[1,`head`],[1,`rule`],[1,`route`],[1,`message`],[1,`fix`],[1,`fix-label`],[1,`fix-text`],[`aria-hidden`,`true`,1,`ok-mark`],[`width`,`16`,`height`,`16`,`viewBox`,`0 0 24 24`,`fill`,`none`,`stroke`,`currentColor`,`stroke-width`,`2.5`,`stroke-linecap`,`round`,`stroke-linejoin`,`round`],[`d`,`M20 6 9 17l-5-5`],[1,`empty-title`]],template:function(e,t){e&1&&(V(0,`div`,0)(1,`button`,1),K(`click`,function(){return t.run()}),Y(2),H(),V(3,`span`,2),Y(4,`Checks the live config, links and recent navigations. Lazy routes that have not loaded are skipped.`),H(),N(5,mO,4,3,`span`,3),H(),N(6,hO,2,0,`p`,4)(7,_O,3,0,`ul`,5)(8,vO,8,0,`div`,6)),e&2&&(j(),M(`aria-busy`,t.loading()),j(),Z(` `,t.loading()?`Checking…`:`Check again`,` `),j(3),P(!t.loading()&&t.findings().length?5:-1),j(),P(t.loading()?6:t.findings().length?7:8))},styles:[`.muted[_ngcontent-%COMP%] { - color: var(--%NS%text-2); - font-size: 13px; - line-height: 1.5; -} - -.nil[_ngcontent-%COMP%] { - color: var(--%NS%text-3); -} - -code[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); - font-size: 12.5px; - color: var(--%NS%text); - overflow-wrap: anywhere; -} - -.tag[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - max-width: 100%; - min-height: 20px; - margin: 2px 4px 2px 0; - padding: 0 8px; - border: 1px solid var(--%NS%border); - border-radius: 99px; - background: var(--%NS%surface-2); - color: var(--%NS%text); - font-family: var(--%NS%font-mono); - font-size: 11.5px; - line-height: 1.4; - vertical-align: middle; - overflow-wrap: anywhere; - white-space: normal; -} - -.badge[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - min-height: 20px; - padding: 0 8px; - border: 1px solid var(--%NS%border-strong); - border-radius: 99px; - background: var(--%NS%surface-2); - color: var(--%NS%text); - font-size: 11px; - font-weight: 600; - line-height: 1.4; - white-space: nowrap; - vertical-align: middle; -} - -.badge[data-tone=good][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); - background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); - color: var(--%NS%ok); -} - -.badge[data-tone=warn][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); - background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); - color: var(--%NS%warn); -} - -.badge[data-tone=bad][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); - color: var(--%NS%danger); -} - -button.small[_ngcontent-%COMP%] { - display: inline-flex; - flex: none; - align-items: center; - justify-content: center; - gap: 6px; - height: 34px; - padding: 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - font-weight: 500; - white-space: nowrap; - cursor: pointer; - transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease); -} - -button.small[_ngcontent-%COMP%]:hover:not(:disabled) { - background: var(--%NS%surface-3); - border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%border-strong)); -} - -button.small[_ngcontent-%COMP%]:active:not(:disabled) { - transform: translateY(1px); -} - -button.small[_ngcontent-%COMP%]:disabled { - opacity: 0.55; - cursor: not-allowed; -} - -button.small.primary[_ngcontent-%COMP%] { - border-color: var(--%NS%accent); - background: var(--%NS%accent); - color: var(--%NS%accent-ink); - font-weight: 600; -} - -button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) { - border-color: var(--%NS%accent-hover); - background: var(--%NS%accent-hover); -} - -button.small[_ngcontent-%COMP%]:focus-visible, -.table-scroll[_ngcontent-%COMP%]:focus-visible, -input[type=checkbox][_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -input.field[_ngcontent-%COMP%], -select[_ngcontent-%COMP%] { - height: 34px; - padding: 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background-color: var(--%NS%bg); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease); -} - -input.field[_ngcontent-%COMP%] { - text-overflow: ellipsis; -} - -input.field[_ngcontent-%COMP%]::placeholder { - color: var(--%NS%text-3); -} - -input.field[_ngcontent-%COMP%]:hover:not(:focus), -select[_ngcontent-%COMP%]:hover:not(:focus) { - border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%border-strong)); -} - -input.field[_ngcontent-%COMP%]:focus-visible, -select[_ngcontent-%COMP%]:focus-visible { - outline: none; - border-color: var(--%NS%accent); - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -.note[_ngcontent-%COMP%] { - margin: 0; - padding: 10px 14px; - border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent); - border-radius: var(--%NS%radius-sm); - background: color-mix(in srgb, var(--%NS%warn) 10%, transparent); - color: var(--%NS%text); - font-size: 13px; - line-height: 1.5; -} - -.empty[_ngcontent-%COMP%] { - display: grid; - gap: 6px; - justify-items: center; - margin: 0; - padding: 40px 24px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - text-align: center; - animation: enter 0.35s var(--%NS%ease) both; -} - -.empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { - margin: 0; - max-width: 480px; - line-height: 1.6; -} - -.empty-title[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-size: 14px; - font-weight: 600; -} - -.empty[_ngcontent-%COMP%] .small[_ngcontent-%COMP%] { - margin-top: 8px; -} - -.facts[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: max-content minmax(0, 1fr); - align-items: baseline; - gap: 8px 24px; - margin: 0; - padding: 14px 16px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - font-size: 13px; -} - -.facts[_ngcontent-%COMP%]:empty { - display: none; -} - -dt[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -dd[_ngcontent-%COMP%] { - min-width: 0; - margin: 0; - color: var(--%NS%text); - overflow-wrap: anywhere; - font-variant-numeric: tabular-nums; -} - -.table-scroll[_ngcontent-%COMP%] { - overflow-x: auto; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - box-shadow: var(--%NS%shadow); - animation: enter 0.35s var(--%NS%ease) both; -} - -table[_ngcontent-%COMP%] { - width: 100%; - border-collapse: collapse; - font-size: 13px; - font-variant-numeric: tabular-nums; -} - -th[_ngcontent-%COMP%] { - padding: 10px 14px; - border-bottom: 1px solid var(--%NS%border); - background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface)); - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.06em; - text-align: left; - text-transform: uppercase; - white-space: nowrap; -} - -td[_ngcontent-%COMP%] { - padding: 10px 14px; - border-bottom: 1px solid var(--%NS%border); - color: var(--%NS%text); - line-height: 1.5; - vertical-align: top; - transition: background-color 0.15s var(--%NS%ease); -} - -tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child td[_ngcontent-%COMP%] { - border-bottom: none; -} - -tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover td[_ngcontent-%COMP%] { - background: var(--%NS%surface-2); -} - -.path[_ngcontent-%COMP%] { - color: var(--%NS%accent); - font-family: var(--%NS%font-mono); - font-size: 12.5px; - white-space: nowrap; -} - -h3[_ngcontent-%COMP%] { - margin: 8px 0 -4px; - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -@media (max-width: 480px) { - .facts[_ngcontent-%COMP%] { - grid-template-columns: minmax(0, 1fr); - gap: 2px; - } - .facts[_ngcontent-%COMP%] dd[_ngcontent-%COMP%] + dt[_ngcontent-%COMP%] { - margin-top: 8px; - } -} -[_nghost-%COMP%] { - display: grid; - gap: 12px; - min-width: 0; -} - -.toolbar[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 8px 12px; - align-items: center; - padding: 8px 12px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); -} - -.toolbar[_ngcontent-%COMP%] .muted[_ngcontent-%COMP%] { - flex: 1 1 240px; - font-size: 12px; -} - -.summary[_ngcontent-%COMP%] { - display: inline-flex; - flex-wrap: wrap; - gap: 6px; - font-variant-numeric: tabular-nums; -} - -.ok-mark[_ngcontent-%COMP%] { - display: grid; - place-items: center; - width: 32px; - height: 32px; - margin-bottom: 4px; - border: 1px solid color-mix(in srgb, var(--%NS%ok) 30%, transparent); - border-radius: 99px; - background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); - color: var(--%NS%ok); -} - -.findings[_ngcontent-%COMP%] { - display: grid; - gap: 8px; - margin: 0; - padding: 0; - list-style: none; -} - -.findings[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { - padding: 12px 16px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - color: var(--%NS%text); - font-size: 13px; - line-height: 1.5; - animation: enter 0.35s var(--%NS%ease) both; - transition: border-color 0.15s var(--%NS%ease); -} - -.findings[_ngcontent-%COMP%] li[_ngcontent-%COMP%]:hover { - border-color: var(--%NS%border-strong); -} - -.findings[_ngcontent-%COMP%] li[data-severity=error][_ngcontent-%COMP%] { - box-shadow: inset 3px 0 0 var(--%NS%danger); -} - -.findings[_ngcontent-%COMP%] li[data-severity=warning][_ngcontent-%COMP%] { - box-shadow: inset 3px 0 0 var(--%NS%warn); -} - -.head[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 8px; - align-items: center; - min-width: 0; -} - -.rule[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-weight: 500; -} - -.route[_ngcontent-%COMP%] { - color: var(--%NS%accent); -} - -.message[_ngcontent-%COMP%] { - margin: 8px 0 0; -} - -.fix[_ngcontent-%COMP%] { - display: flex; - gap: 10px; - align-items: baseline; - margin: 10px 0 0; - padding: 8px 12px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - color: var(--%NS%text); -} - -.fix-label[_ngcontent-%COMP%] { - flex: none; - color: var(--%NS%accent); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.fix-text[_ngcontent-%COMP%] { - min-width: 0; - overflow-wrap: anywhere; -} - -.fix[_ngcontent-%COMP%] .muted[_ngcontent-%COMP%] { - font-size: 12px; -}`]})},bO=(e,t)=>t.name,xO=(e,t)=>t[0];function SO(e,t){e&1&&(V(0,`p`,1),Y(1,` Events-only mode: this build has no debug utils (production build or unusual setup), so the route config, lint and actions are limited. `),H())}function CO(e,t){if(e&1&&(V(0,`dt`),Y(1,`Angular`),H(),V(2,`dd`),Y(3),H()),e&2){let e=q();j(3),X(e.angularVersion)}}function wO(e,t){if(e&1&&(V(0,`dt`),Y(1,`Base href`),H(),V(2,`dd`)(3,`code`),Y(4),H()()),e&2){let e=q();j(4),X(e.baseHref)}}function TO(e,t){if(e&1&&(V(0,`dt`),Y(1,`Hydration`),H(),V(2,`dd`),Y(3),H()),e&2){let e=q();j(3),Z(``,e.hydrated,` component(s) hydrated from server HTML`)}}function EO(e,t){if(e&1&&(V(0,`tr`)(1,`td`,5)(2,`code`),Y(3),H()(),V(4,`td`)(5,`code`),Y(6),H()(),V(7,`td`,6)(8,`span`,7),Y(9),H()()()),e&2){let e=t.$implicit;j(3),X(e.name),j(3),X(e.value),j(2),M(`data-tone`,e.set?`warn`:``),j(),X(e.set?`set`:`default`)}}function DO(e,t){if(e&1&&(V(0,`li`)(1,`span`,7),Y(2),H()()),e&2){let e=t.$implicit;j(),M(`data-tone`,e[1]===`off`?``:`good`),j(),O_(``,e[0],`: `,e[1])}}function OO(e,t){if(e&1&&(V(0,`h3`),Y(1,`Features`),H(),V(2,`ul`,8),F(3,DO,3,3,`li`,null,xO),H()),e&2){let e=q(),t=q();j(3),I(t.entries(e.features))}}function kO(e,t){if(e&1&&(V(0,`dt`),Y(1),H(),V(2,`dd`)(3,`code`),Y(4),H()()),e&2){let e=t.$implicit;j(),X(e[0]),j(3),X(e[1])}}function AO(e,t){if(e&1&&(V(0,`h3`),Y(1,`Strategies`),H(),V(2,`dl`,2),F(3,kO,5,2,null,null,xO),H()),e&2){let e=q(),t=q();j(3),I(t.entries(e.strategies))}}function jO(e,t){if(e&1&&(N(0,SO,2,0,`p`,1),V(1,`dl`,2)(2,`dt`),Y(3,`Set up with`),H(),V(4,`dd`),Y(5),H(),N(6,CO,4,1),N(7,wO,5,1),N(8,TO,4,1),H(),V(9,`h3`),Y(10,`Options`),H(),V(11,`div`,3)(12,`table`)(13,`thead`)(14,`tr`)(15,`th`,4),Y(16,`Option`),H(),V(17,`th`,4),Y(18,`Value`),H(),V(19,`th`,4),Y(20,`Source`),H()()(),V(21,`tbody`),F(22,EO,10,4,`tr`,null,bO),H()()(),N(24,OO,5,0),N(25,AO,5,0)),e&2){let e=t,n=q();P(e.mode===`events-only`?0:-1),j(5),O_(` `,e.setupKind,``,e.routers>1?`, `+e.routers+` routers on the page`:``,` `),j(),P(e.angularVersion?6:-1),j(),P(e.baseHref?7:-1),j(),P(e.hydrated?8:-1),j(14),I(e.options),j(2),P(n.entries(e.features).length?24:-1),j(),P(n.entries(e.strategies).length?25:-1)}}function MO(e,t){e&1&&(V(0,`div`,0)(1,`p`,9),Y(2,`The page has not reported its router setup yet.`),H(),V(3,`p`,10),Y(4,` It appears after the app finishes bootstrapping. Reload the app if it stays empty. `),H()())}var NO=class e{page=$.required();entries(e){return Object.entries(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=Oh({type:e,selectors:[[`app-route-setup`]],inputs:{page:[1,`page`]},decls:2,vars:1,consts:[[1,`empty`],[`role`,`note`,1,`note`],[1,`facts`],[`role`,`region`,`aria-label`,`Router options`,`tabindex`,`0`,1,`table-scroll`],[`scope`,`col`],[1,`name`],[1,`source`],[1,`badge`],[1,`chips`],[1,`empty-title`],[1,`muted`]],template:function(e,t){if(e&1&&N(0,jO,26,8)(1,MO,5,0,`div`,0),e&2){let e;P((e=t.page().setup)?0:1,e)}},styles:[`.muted[_ngcontent-%COMP%] { - color: var(--%NS%text-2); - font-size: 13px; - line-height: 1.5; -} - -.nil[_ngcontent-%COMP%] { - color: var(--%NS%text-3); -} - -code[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); - font-size: 12.5px; - color: var(--%NS%text); - overflow-wrap: anywhere; -} - -.tag[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - max-width: 100%; - min-height: 20px; - margin: 2px 4px 2px 0; - padding: 0 8px; - border: 1px solid var(--%NS%border); - border-radius: 99px; - background: var(--%NS%surface-2); - color: var(--%NS%text); - font-family: var(--%NS%font-mono); - font-size: 11.5px; - line-height: 1.4; - vertical-align: middle; - overflow-wrap: anywhere; - white-space: normal; -} - -.badge[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - min-height: 20px; - padding: 0 8px; - border: 1px solid var(--%NS%border-strong); - border-radius: 99px; - background: var(--%NS%surface-2); - color: var(--%NS%text); - font-size: 11px; - font-weight: 600; - line-height: 1.4; - white-space: nowrap; - vertical-align: middle; -} - -.badge[data-tone=good][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); - background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); - color: var(--%NS%ok); -} - -.badge[data-tone=warn][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); - background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); - color: var(--%NS%warn); -} - -.badge[data-tone=bad][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); - color: var(--%NS%danger); -} - -button.small[_ngcontent-%COMP%] { - display: inline-flex; - flex: none; - align-items: center; - justify-content: center; - gap: 6px; - height: 34px; - padding: 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - font-weight: 500; - white-space: nowrap; - cursor: pointer; - transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease); -} - -button.small[_ngcontent-%COMP%]:hover:not(:disabled) { - background: var(--%NS%surface-3); - border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%border-strong)); -} - -button.small[_ngcontent-%COMP%]:active:not(:disabled) { - transform: translateY(1px); -} - -button.small[_ngcontent-%COMP%]:disabled { - opacity: 0.55; - cursor: not-allowed; -} - -button.small.primary[_ngcontent-%COMP%] { - border-color: var(--%NS%accent); - background: var(--%NS%accent); - color: var(--%NS%accent-ink); - font-weight: 600; -} - -button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) { - border-color: var(--%NS%accent-hover); - background: var(--%NS%accent-hover); -} - -button.small[_ngcontent-%COMP%]:focus-visible, -.table-scroll[_ngcontent-%COMP%]:focus-visible, -input[type=checkbox][_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -input.field[_ngcontent-%COMP%], -select[_ngcontent-%COMP%] { - height: 34px; - padding: 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background-color: var(--%NS%bg); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease); -} - -input.field[_ngcontent-%COMP%] { - text-overflow: ellipsis; -} - -input.field[_ngcontent-%COMP%]::placeholder { - color: var(--%NS%text-3); -} - -input.field[_ngcontent-%COMP%]:hover:not(:focus), -select[_ngcontent-%COMP%]:hover:not(:focus) { - border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%border-strong)); -} - -input.field[_ngcontent-%COMP%]:focus-visible, -select[_ngcontent-%COMP%]:focus-visible { - outline: none; - border-color: var(--%NS%accent); - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -.note[_ngcontent-%COMP%] { - margin: 0; - padding: 10px 14px; - border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent); - border-radius: var(--%NS%radius-sm); - background: color-mix(in srgb, var(--%NS%warn) 10%, transparent); - color: var(--%NS%text); - font-size: 13px; - line-height: 1.5; -} - -.empty[_ngcontent-%COMP%] { - display: grid; - gap: 6px; - justify-items: center; - margin: 0; - padding: 40px 24px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - text-align: center; - animation: enter 0.35s var(--%NS%ease) both; -} - -.empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { - margin: 0; - max-width: 480px; - line-height: 1.6; -} - -.empty-title[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-size: 14px; - font-weight: 600; -} - -.empty[_ngcontent-%COMP%] .small[_ngcontent-%COMP%] { - margin-top: 8px; -} - -.facts[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: max-content minmax(0, 1fr); - align-items: baseline; - gap: 8px 24px; - margin: 0; - padding: 14px 16px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - font-size: 13px; -} - -.facts[_ngcontent-%COMP%]:empty { - display: none; -} - -dt[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -dd[_ngcontent-%COMP%] { - min-width: 0; - margin: 0; - color: var(--%NS%text); - overflow-wrap: anywhere; - font-variant-numeric: tabular-nums; -} - -.table-scroll[_ngcontent-%COMP%] { - overflow-x: auto; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - box-shadow: var(--%NS%shadow); - animation: enter 0.35s var(--%NS%ease) both; -} - -table[_ngcontent-%COMP%] { - width: 100%; - border-collapse: collapse; - font-size: 13px; - font-variant-numeric: tabular-nums; -} - -th[_ngcontent-%COMP%] { - padding: 10px 14px; - border-bottom: 1px solid var(--%NS%border); - background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface)); - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.06em; - text-align: left; - text-transform: uppercase; - white-space: nowrap; -} - -td[_ngcontent-%COMP%] { - padding: 10px 14px; - border-bottom: 1px solid var(--%NS%border); - color: var(--%NS%text); - line-height: 1.5; - vertical-align: top; - transition: background-color 0.15s var(--%NS%ease); -} - -tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child td[_ngcontent-%COMP%] { - border-bottom: none; -} - -tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover td[_ngcontent-%COMP%] { - background: var(--%NS%surface-2); -} - -.path[_ngcontent-%COMP%] { - color: var(--%NS%accent); - font-family: var(--%NS%font-mono); - font-size: 12.5px; - white-space: nowrap; -} - -h3[_ngcontent-%COMP%] { - margin: 8px 0 -4px; - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -@media (max-width: 480px) { - .facts[_ngcontent-%COMP%] { - grid-template-columns: minmax(0, 1fr); - gap: 2px; - } - .facts[_ngcontent-%COMP%] dd[_ngcontent-%COMP%] + dt[_ngcontent-%COMP%] { - margin-top: 8px; - } -} -[_nghost-%COMP%] { - display: grid; - gap: 16px; - min-width: 0; -} - -.name[_ngcontent-%COMP%] code[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); -} - -.source[_ngcontent-%COMP%] { - width: 1%; - white-space: nowrap; -} - -.chips[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 6px; - margin: 0; - padding: 0; - list-style: none; -} - -.chips[_ngcontent-%COMP%] .badge[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); - font-weight: 500; -} - -.facts[_ngcontent-%COMP%] code[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); -}`]})};function PO(e){return new Date(e).toLocaleTimeString()}var FO=(e,t)=>t.id,IO=(e,t)=>t.phase;function LO(e,t){if(e&1&&(V(0,`p`,6),Y(1),H()),e&2){let e=q();j(),X(e.message())}}function RO(e,t){if(e&1&&(V(0,`p`,7),Y(1),H()),e&2){let e=q();j(),X(e.navigationOff)}}function zO(e,t){e&1&&(V(0,`span`,15),Y(1,`→`),H(),V(2,`span`,16),Y(3,`then`),H())}function BO(e,t){if(e&1&&(N(0,zO,4,0),V(1,`code`),Y(2),H()),e&2){let e=t.$implicit,n=t.$index;P(n===0?-1:0),j(2),X(e)}}function VO(e,t){if(e&1&&(V(0,`li`)(1,`code`),Y(2),H(),V(3,`span`,15),Y(4,` → `),H(),V(5,`span`,16),Y(6,` to `),H(),V(7,`code`),Y(8),H(),Y(9),H()),e&2){let e=t.$implicit,n=q(3);j(2),X(e.from),j(6),X(e.to),j(),Z(`: `,n.hopCause(e),` `)}}function HO(e,t){if(e&1&&(V(0,`div`,10)(1,`p`,11)(2,`span`,12),Y(3),H(),F(4,BO,3,2,null,null,cg),H(),V(6,`ol`,13),F(7,VO,10,3,`li`,null,cg),H(),V(9,`p`,14),Y(10),H()()),e&2){let e=t.$implicit,n=q(2);j(3),X(n.loopTitle(e)),j(),I(e.cycle),j(3),I(e.hops),j(3),X(n.loopMeta(e))}}function UO(e,t){if(e&1&&(V(0,`section`,8)(1,`h3`,9),Y(2),H(),F(3,HO,11,2,`div`,10,cg),H()),e&2){let e=q();j(2),Z(` `,e.loops().length===1?`Loop detected`:e.loops().length+` loops detected`,` `),j(),I(e.loops())}}function WO(e,t){if(e&1&&(V(0,`span`),U(1,`i`),Y(2),H()),e&2){let e=t.$implicit,n=q(2);j(),n_(`background`,n.color(e)),j(),X(e)}}function GO(e,t){if(e&1&&(V(0,`time`),Y(1),H()),e&2){let e=q().$implicit,t=q(2);j(),X(t.time(e.startedAt))}}function KO(e,t){if(e&1&&(V(0,`span`,15),Y(1,`→`),H(),V(2,`span`,16),Y(3,`redirected to`),H(),V(4,`code`,24),Y(5),H()),e&2){let e=q().$implicit;j(5),X(e.finalUrl)}}function qO(e,t){if(e&1&&(V(0,`span`,27),Y(1),H()),e&2){let e=q().$implicit;j(),X(e.endedAt===void 0&&e.outcome!==`pending`?`before DevTools connected`:`started before DevTools connected`)}}function JO(e,t){if(e&1&&(V(0,`span`,28),Y(1),H()),e&2){let e=q().$implicit;j(),Z(``,e.phases?.total,`ms`)}}function YO(e,t){if(e&1&&(V(0,`span`,28),Y(1),H()),e&2){let e=q().$implicit;j(),Z(``,e.endedAt-e.startedAt,`ms`)}}function XO(e,t){e&1&&(V(0,`span`,29),Y(1,`probe`),H())}function ZO(e,t){if(e&1&&(V(0,`span`,12),Y(1,`loop`),V(2,`span`,16),Y(3),H()()),e&2){let e=t,n=q(3);j(3),O_(`: part of `,n.loopTitle(e),` `,e.cycle.join(` then `))}}function QO(e,t){if(e&1&&U(0,`span`),e&2){let e=t.$implicit,n=q(4);n_(`width`,e.width,`%`)(`background`,n.color(e.phase)),M(`title`,e.phase+` `+e.ms+`ms`)}}function $O(e,t){if(e&1&&(V(0,`div`,30),F(1,QO,1,5,`span`,35,IO),H()),e&2){let e=q().$implicit,t=q(2);M(`aria-label`,t.barLabel(e)),j(),I(t.bars(e))}}function ek(e,t){if(e&1&&(V(0,`dt`),Y(1,`From`),H(),V(2,`dd`)(3,`code`),Y(4),H()()),e&2){let e=q().$implicit;j(4),X(e.from)}}function tk(e,t){if(e&1&&(V(0,`dt`),Y(1,`Started by`),H(),V(2,`dd`),Y(3),H()),e&2){let e=q().$implicit;j(3),O_(``,e.caller,` (`,e.trigger,`)`)}}function nk(e,t){if(e&1&&(V(0,`dt`),Y(1,`Extras`),H(),V(2,`dd`),Y(3),H()),e&2){let e=q().$implicit;j(3),X(e.extras?.join(`, `))}}function rk(e,t){if(e&1&&(V(0,`dt`),Y(1,`Redirect of`),H(),V(2,`dd`),Y(3),H()),e&2){let e=q().$implicit;j(3),Z(`#`,e.redirectedFrom)}}function ik(e,t){if(e&1&&(V(0,`div`),Y(1,` This navigation: `),V(2,`code`),Y(3),H(),Y(4,` to `),V(5,`code`),Y(6),H(),Y(7),H()),e&2){let e=t.$implicit,n=q(4);j(3),X(e.from),j(3),X(e.to),j(),Z(`, `,n.hopCause(e),` `)}}function ak(e,t){if(e&1&&(V(0,`dt`),Y(1,`Loop`),H(),V(2,`dd`,36),Y(3),F(4,ik,8,3,`div`,null,cg),H()),e&2){let e=t,n=q().$implicit,r=q(2);j(3),Z(` `,e.cycle.join(` → `),` `),j(),I(r.hopsOf(e,n))}}function ok(e,t){if(e&1&&(V(0,`dt`),Y(1,`Redirects to`),H(),V(2,`dd`)(3,`code`),Y(4),H(),Y(5),H()),e&2){let e=q().$implicit;j(4),X(e.redirectTo),j(),Z(` (`,e.redirectKind,`) `)}}function sk(e,t){if(e&1&&(V(0,`dt`),Y(1,`Guards`),H(),V(2,`dd`),Y(3),H()),e&2){let e=q().$implicit,t=q(2);j(3),O_(``,e.guards.names.join(`, `)||`none`,`: `,t.guardResult(e))}}function ck(e,t){if(e&1&&(V(0,`div`)(1,`code`),Y(2),H(),Y(3),V(4,`code`),Y(5),H(),Y(6,`: `),V(7,`strong`),Y(8),H(),Y(9),H()),e&2){let e=t.$implicit,n=q(4);j(2),X(e.guard),j(),Z(` `,e.kind,` on `),j(2),X(e.route),j(2),J(`bad`,n.isBad(e.result)),j(),X(e.result),j(),Z(` (`,e.ms,`ms) `)}}function lk(e,t){if(e&1&&(V(0,`dt`),Y(1,`Runs`),H(),V(2,`dd`),F(3,ck,10,7,`div`,null,cg),H()),e&2){let e=q().$implicit;j(3),I(e.runs)}}function uk(e,t){if(e&1&&Y(0),e&2){let e=q(2).$implicit;Z(` leaving `,e.checked.deactivate.join(`, `),`; `)}}function dk(e,t){if(e&1&&(V(0,`dt`),Y(1,`Checked`),H(),V(2,`dd`),N(3,uk,1,1),Y(4),H()),e&2){let e=q().$implicit;j(3),P(e.checked.deactivate.length?3:-1),j(),Z(` entering `,e.checked.activate.join(`, `)||`nothing new`,` `)}}function fk(e,t){if(e&1&&(V(0,`dt`),Y(1,`Resolvers`),H(),V(2,`dd`),Y(3),H()),e&2){let e=q().$implicit;j(3),X(e.resolvers?.names?.join(`, `))}}function pk(e,t){if(e&1&&(V(0,`dt`),Y(1,`Lazy loaded`),H(),V(2,`dd`),Y(3),H()),e&2){let e=q().$implicit;j(3),X(e.lazyLoaded?.join(`, `))}}function mk(e,t){if(e&1&&(V(0,`dt`),Y(1,`Reused`),H(),V(2,`dd`),Y(3),H()),e&2){let e=q().$implicit;j(3),Z(` `,e.reused?.join(`, `),` (component kept, only inputs and params change) `)}}function hk(e,t){if(e&1&&(V(0,`dt`),Y(1,`HTTP`),H(),V(2,`dd`),Y(3),H()),e&2){let e=q().$implicit;j(3),O_(``,e.requests.count,` request(s): `,e.requests.urls.join(`, `))}}function gk(e,t){if(e&1&&(V(0,`dt`),Y(1,`Scroll`),H(),V(2,`dd`),Y(3),H()),e&2){let e=q().$implicit;j(3),X(e.scroll)}}function _k(e,t){if(e&1&&(V(0,`dt`),Y(1,`Title after`),H(),V(2,`dd`),Y(3),H()),e&2){let e=q().$implicit;j(3),X(e.title)}}function vk(e,t){if(e&1&&(V(0,`dt`),Y(1,`Warnings`),H(),V(2,`dd`),Y(3),H()),e&2){let e=q().$implicit;j(3),X(e.warnings?.join(` · `))}}function yk(e,t){if(e&1&&(V(0,`dt`),Y(1,`Reason`),H(),V(2,`dd`,36),Y(3),H()),e&2){let e=q().$implicit,t=q(2);j(3),X(t.reasonText(e))}}function bk(e,t){if(e&1&&(V(0,`dt`),Y(1,`Error`),H(),V(2,`dd`,36),Y(3),H()),e&2){let e=q().$implicit;j(3),X(e.errorCode)}}function xk(e,t){if(e&1&&(V(0,`dt`),Y(1,`Error handler`),H(),V(2,`dd`),Y(3),H()),e&2){let e=q().$implicit;j(3),X(e.errorHandler)}}function Sk(e,t){if(e&1&&(V(0,`dt`),Y(1,`Earlier`),H(),V(2,`dd`),Y(3),H()),e&2){let e=q().$implicit;j(3),Z(``,e.earlier,` navigation(s) before DevTools connected`)}}function Ck(e,t){if(e&1){let e=W();V(0,`li`)(1,`div`,22),N(2,GO,2,1,`time`),V(3,`span`,23),Y(4),H(),V(5,`code`,24),Y(6),H(),N(7,KO,6,1),V(8,`span`,25)(9,`span`,26),Y(10),H(),N(11,qO,2,1,`span`,27)(12,JO,2,1,`span`,28)(13,YO,2,1,`span`,28),N(14,XO,2,0,`span`,29),N(15,ZO,4,2,`span`,12),H()(),N(16,$O,3,1,`div`,30),V(17,`dl`,31),N(18,ek,5,1),N(19,tk,4,2),N(20,nk,4,1),N(21,rk,4,1),N(22,ak,6,1),N(23,ok,6,2),N(24,sk,4,2),N(25,lk,5,0),N(26,dk,5,2),N(27,fk,4,1),N(28,pk,4,1),N(29,mk,4,1),N(30,hk,4,2),N(31,gk,4,1),N(32,_k,4,1),N(33,vk,4,1),N(34,yk,4,1),N(35,bk,4,1),N(36,xk,4,1),N(37,Sk,4,1),H(),V(38,`div`,32)(39,`button`,33),K(`click`,function(){let t=O(e).$implicit;return k(q(2).replay(t))}),Y(40,` Replay `),H(),V(41,`button`,34),K(`click`,function(){let t=O(e).$implicit;return k(q(2).copy(t))}),Y(42,` Copy repro `),H()()()}if(e&2){let e,n,r=t.$implicit,i=q(2);J(`in-loop`,!!i.loopOf(r)),j(2),P(r.beforeConnect?-1:2),j(2),Z(`#`,r.id),j(2),X(r.url),j(),P(r.finalUrl&&r.finalUrl!==r.url?7:-1),j(2),M(`data-tone`,i.tone(r.outcome)),j(),X(r.outcome),j(),P(r.beforeConnect?11:r.phases?.total===void 0?r.endedAt===void 0?-1:13:12),j(3),P(r.probe?14:-1),j(),P((e=i.loopOf(r))?15:-1,e),j(),P(i.bars(r).length?16:-1),j(2),P(r.from?18:-1),j(),P(r.caller?19:-1),j(),P(r.extras?.length?20:-1),j(),P(r.redirectedFrom===void 0?-1:21),j(),P((n=i.loopOf(r))?22:-1,n),j(),P(r.redirectTo?23:-1),j(),P(r.guards&&(r.guards.names.length||r.guards.passed===!1)?24:-1),j(),P(r.runs?.length?25:-1),j(),P(r.checked&&(r.checked.activate.length||r.checked.deactivate.length)?26:-1),j(),P(r.resolvers?.names?.length?27:-1),j(),P(r.lazyLoaded?.length?28:-1),j(),P(r.reused?.length?29:-1),j(),P(r.requests?30:-1),j(),P(r.scroll?31:-1),j(),P(r.title?32:-1),j(),P(r.warnings?.length?33:-1),j(),P(r.reason||r.code?34:-1),j(),P(r.errorCode?35:-1),j(),P(r.errorHandler?36:-1),j(),P(r.earlier?37:-1),j(2),xg(`disabled`,!i.navigationAllowed()),M(`aria-describedby`,i.navigationAllowed()?null:`route-timeline-writes-off`)(`aria-label`,`Replay navigation `+r.id),j(2),M(`aria-label`,`Copy repro for navigation `+r.id)}}function wk(e,t){if(e&1&&(V(0,`div`,17)(1,`span`,18),Y(2),H(),V(3,`div`,19),F(4,WO,3,3,`span`,null,lg),H()(),V(6,`ol`,20),F(7,Ck,43,36,`li`,21,FO),H()),e&2){let e=q();j(2),O_(``,e.items().length,` of `,e.page().navigations.length,` navigation(s)`),j(2),I(e.phases),j(3),I(e.items())}}function Tk(e,t){if(e&1){let e=W();V(0,`div`,37)(1,`p`,38),Y(2,`No navigations match the current filters.`),H(),V(3,`p`,27),Y(4),H(),V(5,`button`,34),K(`click`,function(){O(e);let t=q(2),n=Fg(2);return t.clearFilters(),k(n.focus())}),Y(6,` Clear filters `),H()()}if(e&2){let e=q(2);j(4),Z(` `,e.page().navigations.length,` navigation(s) are hidden. Clear the filters to see them. `)}}function Ek(e,t){e&1&&(V(0,`div`,37)(1,`p`,38),Y(2,`No navigations since DevTools connected.`),H(),V(3,`p`,27),Y(4,`Earlier ones are not visible. Click a link in the app to record one.`),H()())}function Dk(e,t){e&1&&N(0,Tk,7,1,`div`,37)(1,Ek,5,0,`div`,37),e&2&&P(+!q().page().navigations.length)}var Ok=[`recognize`,`guards`,`resolve`,`activate`],kk={recognize:`#60a5fa`,guards:`#f59e0b`,resolve:`#2dd4bf`,activate:`#34d399`},Ak=class e{page=$.required();rpc=$(null);navigationAllowed=Q(()=>AT(this.rpc(),`router`));navigationOff=yT(`router`);phases=Ok;filter=A(``);onlyProblems=A(!1);message=A(``);loops=Q(()=>this.page().loops??[]);loopById=Q(()=>{let e=new Map;for(let t of this.loops())for(let n of t.ids)e.set(n,t);return e});items=Q(()=>{let e=this.filter().toLowerCase();return[...this.page().navigations].reverse().filter(t=>(!e||t.url.toLowerCase().includes(e)||!!t.finalUrl?.toLowerCase().includes(e))&&(!this.onlyProblems()||![`succeeded`,`pending`].includes(t.outcome)||this.loopById().has(t.id)))});loopOf(e){return this.loopById().get(e.id)}loopTitle(e){return e.kind===`burst`?`navigation loop`:`redirect loop`}hopsOf(e,t){return e.hops.filter(e=>e.id===t.id)}hopCause(e){return e.via===`navigate`?`#${e.id} started by ${e.by??`code`}`:`${e.via===`redirectTo`?`config`:`${e.via} redirect`}${e.by?` ${e.by}`:e.via===`redirectTo`?` redirectTo`:``} in #${e.id}`}loopMeta(e){let t=e.ids.length>1?`Navigations #${e.ids[0]} to #${e.ids[e.ids.length-1]}`:`Navigation #${e.ids[0]}`,n=e.bounces>1?`, came back ${e.bounces} times`:``,r=e.guards.length?` Guards involved: ${e.guards.join(`, `)}.`:``;return`${t}${n}; ${e.end}.${r}`}reasonText(e){return[e.code,e.reason].filter(Boolean).join(`: `)}clearFilters(){this.filter.set(``),this.onlyProblems.set(!1)}tone(e){return AD(e)}color(e){return kk[e]}bars(e){let t=e.phases?.total;return t?Ok.filter(t=>(e.phases?.[t]??0)>0).map(n=>({phase:n,ms:e.phases[n],width:Math.max(1,e.phases[n]/t*100)})):[]}barLabel(e){return`Phases: ${this.bars(e).map(e=>`${e.phase} ${e.ms}ms`).join(`, `)}`}guardResult(e){let t=e.guards?.passed;return t===!0?`passed`:t===!1?e.outcome===`redirected`?`redirected`:`blocked`:e.outcome===`pending`?`running`:`did not finish, navigation ${e.outcome}`}isBad(e){return e===`false`||/^(UrlTree|RedirectCommand|threw)/.test(e)}time=PO;async toggleInstrument(e){let t=e.target.checked,n=await kD(this.rpc(),this.page().pageId,{action:`instrument`,on:t});this.message.set(n?.error?String(n.error):t?`Recording each guard and resolver.`:`Stopped recording guards and resolvers.`)}async replay(e){this.message.set(`Replaying #${e.id}…`);let t=await kD(this.rpc(),this.page().pageId,{action:`replay`,id:e.id});if(!t||t.error){this.message.set(String(t?.error??`Replay failed.`));return}let n=t.replay;this.message.set(`Replay of #${e.id}: ${n?.outcome??`unknown`}${t.same?` (same as before)`:` (different from before)`}.`)}async copy(e){let t=await OD(this.rpc(),`router-export`,{pageId:this.page().pageId,id:e.id});if(!t){this.message.set(`Could not build the repro.`);return}try{await navigator.clipboard.writeText(t),this.message.set(`Copied a markdown repro of #${e.id}.`)}catch{this.message.set(`The clipboard is not available here.`)}}exportJson(){let e=new Blob([JSON.stringify(this.page().navigations,null,2)],{type:`application/json`}),t=URL.createObjectURL(e),n=document.createElement(`a`);n.href=t,n.download=`navigations-${this.page().pageId}.json`,n.click(),URL.revokeObjectURL(t)}static ɵfac=function(t){return new(t||e)};static ɵcmp=Oh({type:e,selectors:[[`app-route-timeline`]],inputs:{page:[1,`page`],rpc:[1,`rpc`]},decls:16,vars:7,consts:[[`filterInput`,``],[1,`toolbar`],[`type`,`text`,`aria-label`,`Filter navigations by URL`,`placeholder`,`Filter by URL`,1,`field`,3,`input`,`value`],[1,`check`],[`type`,`checkbox`,3,`change`,`checked`],[`type`,`button`,1,`small`,`export`,3,`click`],[`role`,`status`,1,`message`],[`id`,`route-timeline-writes-off`,1,`message`],[`aria-labelledby`,`loops-heading`,1,`loops`],[`id`,`loops-heading`],[1,`loop`],[1,`chain`],[`data-tone`,`bad`,1,`badge`],[1,`hops`],[1,`muted`,`loop-meta`],[`aria-hidden`,`true`,1,`arrow`],[1,`visually-hidden`],[1,`meta-row`],[1,`muted`,`count`],[`aria-hidden`,`true`,1,`legend`],[1,`navs`],[3,`in-loop`],[1,`head`],[1,`id`],[1,`url`],[1,`meta`],[1,`badge`],[1,`muted`],[1,`muted`,`ms`],[1,`tag`],[`role`,`img`,1,`bar`],[1,`details`],[1,`actions`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`type`,`button`,1,`small`,3,`click`],[3,`width`,`background`],[1,`reason`],[1,`empty`],[1,`empty-title`]],template:function(e,t){e&1&&(V(0,`div`,1)(1,`input`,2,0),K(`input`,function(e){return t.filter.set(e.target.value)}),H(),V(3,`label`,3)(4,`input`,4),K(`change`,function(e){return t.onlyProblems.set(e.target.checked)}),H(),Y(5,` Only problems `),H(),V(6,`label`,3)(7,`input`,4),K(`change`,function(e){return t.toggleInstrument(e)}),H(),Y(8,` Record each guard and resolver `),H(),V(9,`button`,5),K(`click`,function(){return t.exportJson()}),Y(10,`Export JSON`),H()(),N(11,LO,2,1,`p`,6),N(12,RO,2,1,`p`,7),N(13,UO,5,1,`section`,8),N(14,wk,9,2)(15,Dk,2,1)),e&2&&(j(),xg(`value`,t.filter()),j(3),xg(`checked`,t.onlyProblems()),j(3),xg(`checked`,t.page().instrumented),j(4),P(t.message()?11:-1),j(),P(t.navigationAllowed()?-1:12),j(),P(t.loops().length?13:-1),j(),P(t.items().length?14:15))},styles:[`.muted[_ngcontent-%COMP%] { - color: var(--%NS%text-2); - font-size: 13px; - line-height: 1.5; -} - -.nil[_ngcontent-%COMP%] { - color: var(--%NS%text-3); -} - -code[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); - font-size: 12.5px; - color: var(--%NS%text); - overflow-wrap: anywhere; -} - -.tag[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - max-width: 100%; - min-height: 20px; - margin: 2px 4px 2px 0; - padding: 0 8px; - border: 1px solid var(--%NS%border); - border-radius: 99px; - background: var(--%NS%surface-2); - color: var(--%NS%text); - font-family: var(--%NS%font-mono); - font-size: 11.5px; - line-height: 1.4; - vertical-align: middle; - overflow-wrap: anywhere; - white-space: normal; -} - -.badge[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - min-height: 20px; - padding: 0 8px; - border: 1px solid var(--%NS%border-strong); - border-radius: 99px; - background: var(--%NS%surface-2); - color: var(--%NS%text); - font-size: 11px; - font-weight: 600; - line-height: 1.4; - white-space: nowrap; - vertical-align: middle; -} - -.badge[data-tone=good][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); - background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); - color: var(--%NS%ok); -} - -.badge[data-tone=warn][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); - background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); - color: var(--%NS%warn); -} - -.badge[data-tone=bad][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); - color: var(--%NS%danger); -} - -button.small[_ngcontent-%COMP%] { - display: inline-flex; - flex: none; - align-items: center; - justify-content: center; - gap: 6px; - height: 34px; - padding: 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - font-weight: 500; - white-space: nowrap; - cursor: pointer; - transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease); -} - -button.small[_ngcontent-%COMP%]:hover:not(:disabled) { - background: var(--%NS%surface-3); - border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%border-strong)); -} - -button.small[_ngcontent-%COMP%]:active:not(:disabled) { - transform: translateY(1px); -} - -button.small[_ngcontent-%COMP%]:disabled { - opacity: 0.55; - cursor: not-allowed; -} - -button.small.primary[_ngcontent-%COMP%] { - border-color: var(--%NS%accent); - background: var(--%NS%accent); - color: var(--%NS%accent-ink); - font-weight: 600; -} - -button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) { - border-color: var(--%NS%accent-hover); - background: var(--%NS%accent-hover); -} - -button.small[_ngcontent-%COMP%]:focus-visible, -.table-scroll[_ngcontent-%COMP%]:focus-visible, -input[type=checkbox][_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -input.field[_ngcontent-%COMP%], -select[_ngcontent-%COMP%] { - height: 34px; - padding: 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background-color: var(--%NS%bg); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease); -} - -input.field[_ngcontent-%COMP%] { - text-overflow: ellipsis; -} - -input.field[_ngcontent-%COMP%]::placeholder { - color: var(--%NS%text-3); -} - -input.field[_ngcontent-%COMP%]:hover:not(:focus), -select[_ngcontent-%COMP%]:hover:not(:focus) { - border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%border-strong)); -} - -input.field[_ngcontent-%COMP%]:focus-visible, -select[_ngcontent-%COMP%]:focus-visible { - outline: none; - border-color: var(--%NS%accent); - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -.note[_ngcontent-%COMP%] { - margin: 0; - padding: 10px 14px; - border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent); - border-radius: var(--%NS%radius-sm); - background: color-mix(in srgb, var(--%NS%warn) 10%, transparent); - color: var(--%NS%text); - font-size: 13px; - line-height: 1.5; -} - -.empty[_ngcontent-%COMP%] { - display: grid; - gap: 6px; - justify-items: center; - margin: 0; - padding: 40px 24px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - text-align: center; - animation: enter 0.35s var(--%NS%ease) both; -} - -.empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { - margin: 0; - max-width: 480px; - line-height: 1.6; -} - -.empty-title[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-size: 14px; - font-weight: 600; -} - -.empty[_ngcontent-%COMP%] .small[_ngcontent-%COMP%] { - margin-top: 8px; -} - -.facts[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: max-content minmax(0, 1fr); - align-items: baseline; - gap: 8px 24px; - margin: 0; - padding: 14px 16px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - font-size: 13px; -} - -.facts[_ngcontent-%COMP%]:empty { - display: none; -} - -dt[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -dd[_ngcontent-%COMP%] { - min-width: 0; - margin: 0; - color: var(--%NS%text); - overflow-wrap: anywhere; - font-variant-numeric: tabular-nums; -} - -.table-scroll[_ngcontent-%COMP%] { - overflow-x: auto; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - box-shadow: var(--%NS%shadow); - animation: enter 0.35s var(--%NS%ease) both; -} - -table[_ngcontent-%COMP%] { - width: 100%; - border-collapse: collapse; - font-size: 13px; - font-variant-numeric: tabular-nums; -} - -th[_ngcontent-%COMP%] { - padding: 10px 14px; - border-bottom: 1px solid var(--%NS%border); - background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface)); - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.06em; - text-align: left; - text-transform: uppercase; - white-space: nowrap; -} - -td[_ngcontent-%COMP%] { - padding: 10px 14px; - border-bottom: 1px solid var(--%NS%border); - color: var(--%NS%text); - line-height: 1.5; - vertical-align: top; - transition: background-color 0.15s var(--%NS%ease); -} - -tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child td[_ngcontent-%COMP%] { - border-bottom: none; -} - -tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover td[_ngcontent-%COMP%] { - background: var(--%NS%surface-2); -} - -.path[_ngcontent-%COMP%] { - color: var(--%NS%accent); - font-family: var(--%NS%font-mono); - font-size: 12.5px; - white-space: nowrap; -} - -h3[_ngcontent-%COMP%] { - margin: 8px 0 -4px; - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -@media (max-width: 480px) { - .facts[_ngcontent-%COMP%] { - grid-template-columns: minmax(0, 1fr); - gap: 2px; - } - .facts[_ngcontent-%COMP%] dd[_ngcontent-%COMP%] + dt[_ngcontent-%COMP%] { - margin-top: 8px; - } -} -[_nghost-%COMP%] { - display: grid; - gap: 12px; - min-width: 0; -} - -.toolbar[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 8px 16px; - align-items: center; - padding: 8px 12px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - color: var(--%NS%text); - font-size: 13px; -} - -.toolbar[_ngcontent-%COMP%] .field[_ngcontent-%COMP%] { - flex: 1 1 200px; - min-width: 0; -} - -.export[_ngcontent-%COMP%] { - margin-left: auto; -} - -.check[_ngcontent-%COMP%] { - display: inline-flex; - gap: 8px; - align-items: center; - min-height: 34px; - color: var(--%NS%text-2); - cursor: pointer; - user-select: none; - transition: color 0.15s var(--%NS%ease); -} - -.check[_ngcontent-%COMP%]:hover { - color: var(--%NS%text); -} - -.check[_ngcontent-%COMP%] input[_ngcontent-%COMP%] { - flex: none; - width: 14px; - height: 14px; - margin: 0; - accent-color: var(--%NS%accent); - cursor: pointer; -} - -.message[_ngcontent-%COMP%] { - margin: 0; - padding: 8px 12px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - color: var(--%NS%text); - font-size: 13px; - overflow-wrap: anywhere; -} - -.meta-row[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 6px 16px; - align-items: center; - justify-content: space-between; - padding: 0 4px; -} - -.count[_ngcontent-%COMP%] { - font-size: 12px; - font-variant-numeric: tabular-nums; -} - -.legend[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 6px 16px; - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.legend[_ngcontent-%COMP%] span[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - gap: 6px; -} - -.legend[_ngcontent-%COMP%] i[_ngcontent-%COMP%] { - display: inline-block; - width: 8px; - height: 8px; - border-radius: 99px; -} - -.navs[_ngcontent-%COMP%] { - display: grid; - gap: 8px; - margin: 0; - padding: 0; - list-style: none; -} - -.navs[_ngcontent-%COMP%] > li[_ngcontent-%COMP%] { - min-width: 0; - padding: 12px 16px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - font-size: 13px; - animation: enter 0.35s var(--%NS%ease) both; - transition: border-color 0.15s var(--%NS%ease); -} - -.navs[_ngcontent-%COMP%] > li[_ngcontent-%COMP%]:hover { - border-color: var(--%NS%border-strong); -} - -.head[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 6px 8px; - align-items: center; - min-width: 0; - font-variant-numeric: tabular-nums; -} - -.head[_ngcontent-%COMP%] .url[_ngcontent-%COMP%] { - min-width: 0; - color: var(--%NS%text-strong); - font-weight: 500; -} - -.id[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-family: var(--%NS%font-mono); - font-size: 12px; -} - -.arrow[_ngcontent-%COMP%] { - color: var(--%NS%text-3); -} - -.meta[_ngcontent-%COMP%] { - display: inline-flex; - flex-wrap: wrap; - gap: 6px 8px; - align-items: center; - margin-left: auto; -} - -.ms[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); - font-size: 12px; -} - -time[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-family: var(--%NS%font-mono); - font-size: 12px; - font-variant-numeric: tabular-nums; -} - -.bar[_ngcontent-%COMP%] { - display: flex; - gap: 2px; - height: 6px; - margin: 12px 0 4px; - overflow: hidden; - border-radius: 99px; - background: var(--%NS%surface-3); -} - -.bar[_ngcontent-%COMP%] span[_ngcontent-%COMP%] { - display: block; - min-width: 2px; -} - -.details[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: max-content minmax(0, 1fr); - align-items: baseline; - gap: 6px 16px; - margin: 12px 0 0; - font-size: 12.5px; - line-height: 1.5; -} - -.details[_ngcontent-%COMP%]:empty { - display: none; -} - -.details[_ngcontent-%COMP%] dt[_ngcontent-%COMP%] { - letter-spacing: 0.06em; -} - -.reason[_ngcontent-%COMP%], -.bad[_ngcontent-%COMP%] { - color: var(--%NS%danger); -} - -.navs[_ngcontent-%COMP%] > li.in-loop[_ngcontent-%COMP%] { - box-shadow: inset 3px 0 0 var(--%NS%danger); -} - -.loops[_ngcontent-%COMP%] { - display: grid; - gap: 8px; - padding: 12px 16px; - border: 1px solid color-mix(in srgb, var(--%NS%danger) 35%, var(--%NS%border)); - border-radius: var(--%NS%radius); - background: color-mix(in srgb, var(--%NS%danger) 6%, var(--%NS%surface)); - color: var(--%NS%text); - font-size: 13px; - line-height: 1.5; -} - -.loops[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-strong); - font-size: 13px; - letter-spacing: normal; - text-transform: none; -} - -.loop[_ngcontent-%COMP%] + .loop[_ngcontent-%COMP%] { - padding-top: 8px; - border-top: 1px solid var(--%NS%border); -} - -.chain[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 4px 8px; - align-items: center; - margin: 0; -} - -.hops[_ngcontent-%COMP%] { - margin: 6px 0 0; - padding-left: 20px; -} - -.hops[_ngcontent-%COMP%] li[_ngcontent-%COMP%] + li[_ngcontent-%COMP%] { - margin-top: 2px; -} - -.loop-meta[_ngcontent-%COMP%] { - margin: 6px 0 0; - font-size: 12px; -} - -.actions[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 8px; - margin-top: 12px; - padding-top: 12px; - border-top: 1px solid var(--%NS%border); -} - -@media (max-width: 480px) { - .details[_ngcontent-%COMP%] { - grid-template-columns: minmax(0, 1fr); - gap: 2px; - } - .details[_ngcontent-%COMP%] dd[_ngcontent-%COMP%] + dt[_ngcontent-%COMP%] { - margin-top: 6px; - } - .export[_ngcontent-%COMP%] { - margin-left: 0; - } -}`]})},jk=()=>[],Mk=(e,t)=>t.node.id;function Nk(e,t){if(e&1&&(Y(0,` with `),V(1,`code`),Y(2),U_(3,`json`),H()),e&2){let e=q(2);j(2),X(G_(3,1,e.params))}}function Pk(e,t){if(e&1&&(V(0,`span`,15),Y(1,`match`),H(),Y(2,` Matches `),V(3,`code`,16),Y(4),H(),N(5,Nk,4,3)),e&2){let e=q(),t=q();j(4),X(t.chainText(e)),j(),P(t.hasKeys(e.params)?5:-1)}}function Fk(e,t){if(e&1&&(Y(0,` Nearest: `),V(1,`code`),Y(2),H()),e&2){let e=q(2);j(2),X(e.nearest.join(`, `))}}function Ik(e,t){if(e&1&&(V(0,`span`,17),Y(1,`no match`),H(),Y(2,` Matches no route (NG04002). `),N(3,Fk,3,1)),e&2){let e=q();j(3),P(e.nearest.length?3:-1)}}function Lk(e,t){if(e&1&&(V(0,`div`,14),Y(1),H()),e&2){let e=t.$implicit;j(),X(e)}}function Rk(e,t){if(e&1&&(V(0,`div`,6),N(1,Pk,6,2)(2,Ik,4,1),F(3,Lk,2,1,`div`,14,lg),H()),e&2){let e=t;M(`data-matched`,e.matched),j(),P(e.matched?1:2),j(2),I(e.notes)}}function zk(e,t){if(e&1&&(V(0,`p`,7),Y(1),H()),e&2){let e=q();j(),X(e.message())}}function Bk(e,t){if(e&1&&(V(0,`p`,8),Y(1),H()),e&2){let e=q();j(),X(e.navigationOff)}}function Vk(e,t){e&1&&Y(0),e&2&&Z(` `,t,` route(s) left out: the page lists at most 200 routes per level and 1000 in total. `)}function Hk(e,t){if(e&1&&(V(0,`p`,11),Y(1),N(2,Vk,1,1),H()),e&2){let e,t=q();j(),O_(` Generation `,t.page().generation,` · `,t.rows().length,` route(s). Lazy routes show their children once loaded. `),j(),P((e=t.page().configTruncated)?2:-1,e)}}function Uk(e,t){if(e&1&&(V(0,`div`,12)(1,`p`,18),Y(2),H(),V(3,`p`,14),Y(4),H()()),e&2){let e=q();j(2),Z(` `,e.page().setup?.mode===`events-only`?`This build has no debug utils, so the live config cannot be read.`:`The page has not reported its route config yet.`,` `),j(2),Z(` `,e.page().setup?.mode===`events-only`?`Run the app with the development build to inspect the live config.`:`It appears once the router initializes. Navigate in the app if it stays empty.`,` `)}}function Wk(e,t){if(e&1){let e=W();V(0,`div`,12)(1,`p`,18),Y(2,`No routes match the filter.`),H(),V(3,`p`,14),Y(4,`Try a shorter path or a component name.`),H(),V(5,`button`,5),K(`click`,function(){O(e);let t=q(),n=Fg(13);return t.filter.set(``),k(n.focus())}),Y(6,` Clear filter `),H()()}}function Gk(e,t){e&1&&(V(0,`span`,23),Y(1,`active`),H())}function Kk(e,t){if(e&1&&(V(0,`span`,23),Y(1),H()),e&2){let e=q().$implicit;j(),Z(`lazy `,e.node.lazy)}}function qk(e,t){if(e&1&&(V(0,`span`,23),Y(1),H()),e&2){let e=q().$implicit;j(),Z(`outlet `,e.node.outlet)}}function Jk(e,t){if(e&1&&(V(0,`span`,24)(1,`span`,20),Y(2,`declared in `),H(),Y(3),H()),e&2){let e=q().$implicit;j(3),X(e.source)}}function Yk(e,t){if(e&1&&(V(0,`span`,25),Y(1,`redirect `),V(2,`span`,29),Y(3,`→`),H(),V(4,`code`),Y(5),H()()),e&2){let e=q().$implicit;j(5),X(e.node.redirectTo)}}function Xk(e,t){if(e&1&&Y(0),e&2){let e=q().$implicit;Z(` `,e.node.component??(e.node.lazy===`unloaded`?`lazy, not loaded yet`:e.node.kind),` `)}}function Zk(e,t){if(e&1&&(V(0,`span`,23),Y(1),H()),e&2){let e=t.$implicit;j(),X(e)}}function Qk(e,t){if(e&1&&(V(0,`span`,23),Y(1),H()),e&2){let e=t.$implicit;j(),Z(`resolve `,e)}}function $k(e,t){e&1&&(V(0,`span`,30),Y(1,`–`),H(),V(2,`span`,20),Y(3,`none`),H())}function eA(e,t){if(e&1&&Y(0),e&2){let e=q().$implicit;Z(` `,e.node.title,` `)}}function tA(e,t){e&1&&(V(0,`span`,30),Y(1,`–`),H(),V(2,`span`,20),Y(3,`none`),H())}function nA(e,t){if(e&1){let e=W();V(0,`input`,33),K(`input`,function(t){let n=O(e).$implicit,r=q(2).$implicit;return k(q(2).setParam(r.node.id,n,t.target.value))}),H()}if(e&2){let e=t.$implicit,n=q(2).$implicit;xg(`placeholder`,e),M(`aria-label`,e+` for `+n.node.fullPath)}}function rA(e,t){if(e&1){let e=W();F(0,nA,1,2,`input`,31,lg),V(2,`button`,32),K(`click`,function(){O(e);let t=q().$implicit;return k(q(2).navigate(t.node))}),Y(3,` Go `),H()}if(e&2){let e=q().$implicit,t=q(2);I(t.params(e.node)),j(2),xg(`disabled`,!t.navigationAllowed()),M(`aria-describedby`,t.navigationAllowed()?null:`route-tree-writes-off`)(`aria-label`,`Navigate to `+e.node.fullPath)}}function iA(e,t){if(e&1){let e=W();V(0,`button`,5),K(`click`,function(){O(e);let t=q().$implicit;return k(q(2).resolveLazy(t.node))}),Y(1,` Read lazy `),H()}if(e&2){let e=q().$implicit;M(`aria-label`,`Read lazy routes of `+e.node.fullPath)}}function aA(e,t){if(e&1&&(V(0,`tr`)(1,`td`,22),Y(2),N(3,Gk,2,0,`span`,23),N(4,Kk,2,1,`span`,23),N(5,qk,2,1,`span`,23),N(6,Jk,4,1,`span`,24),H(),V(7,`td`),N(8,Yk,6,1,`span`,25)(9,Xk,1,1),H(),V(10,`td`),F(11,Zk,2,1,`span`,23,lg),F(13,Qk,2,1,`span`,23,lg),N(15,$k,4,0),H(),V(16,`td`),N(17,eA,1,1)(18,tA,4,0),H(),V(19,`td`,26)(20,`div`,27),N(21,rA,4,3),N(22,iA,2,1,`button`,28),H()()()),e&2){let e=t.$implicit,n=q(2);J(`active`,n.isActive(e.node)),j(),n_(`padding-left`,14+e.depth*16,`px`),j(),Z(` `,e.node.fullPath,` `),j(),P(n.isActive(e.node)?3:-1),j(),P(e.node.lazy?4:-1),j(),P(e.node.outlet?5:-1),j(),P(e.source?6:-1),j(2),P(e.node.redirectTo===void 0?9:8),j(3),I(n.guardList(e.node)),j(2),I(e.node.resolvers??z_(14,jk)),j(2),P(!n.guardList(e.node).length&&!e.node.resolvers?.length?15:-1),j(2),P(e.node.title?17:18),j(4),P(n.canNavigate(e.node)?21:-1),j(),P(e.node.kind===`lazy`&&e.node.lazy===`unloaded`?22:-1)}}function oA(e,t){if(e&1&&(V(0,`div`,13)(1,`table`)(2,`thead`)(3,`tr`)(4,`th`,19),Y(5,`Path`),H(),V(6,`th`,19),Y(7,`Target`),H(),V(8,`th`,19),Y(9,`Guards and resolvers`),H(),V(10,`th`,19),Y(11,`Title`),H(),V(12,`th`,19)(13,`span`,20),Y(14,`Actions`),H()()()(),V(15,`tbody`),F(16,aA,23,15,`tr`,21,Mk),H()()()),e&2){let e=q();j(16),I(e.rows())}}var sA=class e{page=$.required();rpc=$(null);navigationAllowed=Q(()=>AT(this.rpc(),`router`));navigationOff=yT(`router`);sources=$([]);filter=A(``);testUrl=A(``);match=A(null);message=A(``);paramValues=new Map;active=Q(()=>new Set(this.page().activeIds??[]));rows=Q(()=>{let e=this.filter().toLowerCase(),t=this.sources(),n=[],r=(i,a)=>{for(let o of i){let i=DD(o,t),s=i&&ED(i);(!e||o.fullPath.toLowerCase().includes(e)||o.component?.toLowerCase().includes(e)||s?.toLowerCase().includes(e))&&n.push({node:o,depth:a,source:s}),o.children&&r(o.children,a+1)}};return r(this.page().config??[],0),n});hasKeys(e){return Object.keys(e).length>0}isActive(e){return this.active().has(e.id)}guardList(e){return Object.entries(e.guards??{}).flatMap(([e,t])=>t.map(t=>`${e} ${t}`))}params(e){return(e.fullPath.match(/:([A-Za-z0-9_]+)/g)??[]).map(e=>e.slice(1))}canNavigate(e){return e.redirectTo===void 0&&!e.outlet&&!e.fullPath.includes(`**`)&&(!!e.component||e.kind===`component`||e.kind===`lazy`)}setParam(e,t,n){this.paramValues.set(e,{...this.paramValues.get(e),[t]:n})}chainText(e){return e.chain.map(e=>e.fullPath).join(` → `)}async predict(){let e=this.testUrl().trim();e&&this.match.set(await OD(this.rpc(),`router-match`,{pageId:this.page().pageId,url:e}))}async probe(){let e=this.testUrl().trim();if(!e)return;this.message.set(`Running the real matcher in the app…`);let t=await kD(this.rpc(),this.page().pageId,{action:`probe`,url:e});if(!t||t.error){this.message.set(String(t?.error??`Probe failed.`));return}this.message.set(t.matched?`The app recognized ${e} and its canMatch guards passed. The probe stopped before canActivate guards and resolvers, so those did not run. See the probe entry in Navigations.`:`The app could not recognize ${e}: ${String(t.reason??``)}`)}async navigate(e){let t=this.paramValues.get(e.id)??{};this.message.set(`Navigating to ${e.fullPath}…`);let n=await kD(this.rpc(),this.page().pageId,{action:`navigate`,pattern:e.fullPath,params:t});this.message.set(!n||n.error?String(n?.error??`Navigation failed.`):`Navigation #${n.id}: ${n.outcome}${n.finalUrl?` at ${n.finalUrl}`:``}.`)}async resolveLazy(e){let t=await kD(this.rpc(),this.page().pageId,{action:`resolve-lazy`,id:e.id});if(!t||t.error){this.message.set(String(t?.error??`Could not read the lazy routes.`));return}let n=t.routes??[];this.message.set(`${e.fullPath} declares ${n.length} route(s): ${n.map(e=>`/${e.path}`).join(`, `)}. The router loads them for real on the first navigation that needs them.`)}static ɵfac=function(t){return new(t||e)};static ɵcmp=Oh({type:e,selectors:[[`app-route-tree`]],inputs:{page:[1,`page`],rpc:[1,`rpc`],sources:[1,`sources`]},decls:18,vars:7,consts:[[`filterInput`,``],[1,`test`,3,`submit`],[`for`,`test-url`],[`id`,`test-url`,`type`,`text`,`placeholder`,`/users/42`,1,`field`,3,`input`,`value`],[`type`,`submit`,1,`small`,`primary`],[`type`,`button`,1,`small`,3,`click`],[`role`,`status`,1,`result`],[`role`,`status`,1,`message`],[`id`,`route-tree-writes-off`,1,`message`],[1,`filter-row`],[`type`,`text`,`aria-label`,`Filter routes`,`placeholder`,`Filter by path, component or file`,1,`field`,`filter`,3,`input`,`value`],[1,`muted`,`summary`],[1,`empty`],[`role`,`region`,`aria-label`,`Live route config`,`tabindex`,`0`,1,`table-scroll`],[1,`muted`],[`data-tone`,`good`,1,`badge`],[1,`chain`],[`data-tone`,`bad`,1,`badge`],[1,`empty-title`],[`scope`,`col`],[1,`visually-hidden`],[3,`active`],[1,`path`],[1,`tag`],[1,`src`],[1,`redirect`],[1,`actions`],[1,`actions-inner`],[`type`,`button`,1,`small`],[`aria-hidden`,`true`],[`aria-hidden`,`true`,1,`nil`],[`type`,`text`,1,`field`,`param`,3,`placeholder`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`type`,`text`,1,`field`,`param`,3,`input`,`placeholder`]],template:function(e,t){if(e&1){let e=W();V(0,`form`,1),K(`submit`,function(n){return O(e),n.preventDefault(),k(t.predict())}),V(1,`label`,2),Y(2,`Test a URL`),H(),V(3,`input`,3),K(`input`,function(e){return t.testUrl.set(e.target.value)}),H(),V(4,`button`,4),Y(5,`Predict`),H(),V(6,`button`,5),K(`click`,function(){return t.probe()}),Y(7,`Probe in app`),H()(),N(8,Rk,5,2,`div`,6),N(9,zk,2,1,`p`,7),N(10,Bk,2,1,`p`,8),V(11,`div`,9)(12,`input`,10,0),K(`input`,function(e){return t.filter.set(e.target.value)}),H(),N(14,Hk,3,3,`p`,11),H(),N(15,Uk,5,2,`div`,12)(16,Wk,7,0,`div`,12)(17,oA,18,0,`div`,13)}if(e&2){let e;j(3),xg(`value`,t.testUrl()),j(5),P((e=t.match())?8:-1,e),j(),P(t.message()?9:-1),j(),P(t.navigationAllowed()?-1:10),j(2),xg(`value`,t.filter()),j(2),P(t.page().config?14:-1),j(),P(t.page().config?t.rows().length?17:16:15)}},dependencies:[Fy],styles:[`.muted[_ngcontent-%COMP%] { - color: var(--%NS%text-2); - font-size: 13px; - line-height: 1.5; -} - -.nil[_ngcontent-%COMP%] { - color: var(--%NS%text-3); -} - -code[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); - font-size: 12.5px; - color: var(--%NS%text); - overflow-wrap: anywhere; -} - -.tag[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - max-width: 100%; - min-height: 20px; - margin: 2px 4px 2px 0; - padding: 0 8px; - border: 1px solid var(--%NS%border); - border-radius: 99px; - background: var(--%NS%surface-2); - color: var(--%NS%text); - font-family: var(--%NS%font-mono); - font-size: 11.5px; - line-height: 1.4; - vertical-align: middle; - overflow-wrap: anywhere; - white-space: normal; -} - -.badge[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - min-height: 20px; - padding: 0 8px; - border: 1px solid var(--%NS%border-strong); - border-radius: 99px; - background: var(--%NS%surface-2); - color: var(--%NS%text); - font-size: 11px; - font-weight: 600; - line-height: 1.4; - white-space: nowrap; - vertical-align: middle; -} - -.badge[data-tone=good][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); - background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); - color: var(--%NS%ok); -} - -.badge[data-tone=warn][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); - background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); - color: var(--%NS%warn); -} - -.badge[data-tone=bad][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); - color: var(--%NS%danger); -} - -button.small[_ngcontent-%COMP%] { - display: inline-flex; - flex: none; - align-items: center; - justify-content: center; - gap: 6px; - height: 34px; - padding: 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - font-weight: 500; - white-space: nowrap; - cursor: pointer; - transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease); -} - -button.small[_ngcontent-%COMP%]:hover:not(:disabled) { - background: var(--%NS%surface-3); - border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%border-strong)); -} - -button.small[_ngcontent-%COMP%]:active:not(:disabled) { - transform: translateY(1px); -} - -button.small[_ngcontent-%COMP%]:disabled { - opacity: 0.55; - cursor: not-allowed; -} - -button.small.primary[_ngcontent-%COMP%] { - border-color: var(--%NS%accent); - background: var(--%NS%accent); - color: var(--%NS%accent-ink); - font-weight: 600; -} - -button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) { - border-color: var(--%NS%accent-hover); - background: var(--%NS%accent-hover); -} - -button.small[_ngcontent-%COMP%]:focus-visible, -.table-scroll[_ngcontent-%COMP%]:focus-visible, -input[type=checkbox][_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -input.field[_ngcontent-%COMP%], -select[_ngcontent-%COMP%] { - height: 34px; - padding: 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background-color: var(--%NS%bg); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease); -} - -input.field[_ngcontent-%COMP%] { - text-overflow: ellipsis; -} - -input.field[_ngcontent-%COMP%]::placeholder { - color: var(--%NS%text-3); -} - -input.field[_ngcontent-%COMP%]:hover:not(:focus), -select[_ngcontent-%COMP%]:hover:not(:focus) { - border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%border-strong)); -} - -input.field[_ngcontent-%COMP%]:focus-visible, -select[_ngcontent-%COMP%]:focus-visible { - outline: none; - border-color: var(--%NS%accent); - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -.note[_ngcontent-%COMP%] { - margin: 0; - padding: 10px 14px; - border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent); - border-radius: var(--%NS%radius-sm); - background: color-mix(in srgb, var(--%NS%warn) 10%, transparent); - color: var(--%NS%text); - font-size: 13px; - line-height: 1.5; -} - -.empty[_ngcontent-%COMP%] { - display: grid; - gap: 6px; - justify-items: center; - margin: 0; - padding: 40px 24px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - text-align: center; - animation: enter 0.35s var(--%NS%ease) both; -} - -.empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { - margin: 0; - max-width: 480px; - line-height: 1.6; -} - -.empty-title[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-size: 14px; - font-weight: 600; -} - -.empty[_ngcontent-%COMP%] .small[_ngcontent-%COMP%] { - margin-top: 8px; -} - -.facts[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: max-content minmax(0, 1fr); - align-items: baseline; - gap: 8px 24px; - margin: 0; - padding: 14px 16px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - font-size: 13px; -} - -.facts[_ngcontent-%COMP%]:empty { - display: none; -} - -dt[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -dd[_ngcontent-%COMP%] { - min-width: 0; - margin: 0; - color: var(--%NS%text); - overflow-wrap: anywhere; - font-variant-numeric: tabular-nums; -} - -.table-scroll[_ngcontent-%COMP%] { - overflow-x: auto; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - box-shadow: var(--%NS%shadow); - animation: enter 0.35s var(--%NS%ease) both; -} - -table[_ngcontent-%COMP%] { - width: 100%; - border-collapse: collapse; - font-size: 13px; - font-variant-numeric: tabular-nums; -} - -th[_ngcontent-%COMP%] { - padding: 10px 14px; - border-bottom: 1px solid var(--%NS%border); - background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface)); - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.06em; - text-align: left; - text-transform: uppercase; - white-space: nowrap; -} - -td[_ngcontent-%COMP%] { - padding: 10px 14px; - border-bottom: 1px solid var(--%NS%border); - color: var(--%NS%text); - line-height: 1.5; - vertical-align: top; - transition: background-color 0.15s var(--%NS%ease); -} - -tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child td[_ngcontent-%COMP%] { - border-bottom: none; -} - -tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover td[_ngcontent-%COMP%] { - background: var(--%NS%surface-2); -} - -.path[_ngcontent-%COMP%] { - color: var(--%NS%accent); - font-family: var(--%NS%font-mono); - font-size: 12.5px; - white-space: nowrap; -} - -h3[_ngcontent-%COMP%] { - margin: 8px 0 -4px; - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -@media (max-width: 480px) { - .facts[_ngcontent-%COMP%] { - grid-template-columns: minmax(0, 1fr); - gap: 2px; - } - .facts[_ngcontent-%COMP%] dd[_ngcontent-%COMP%] + dt[_ngcontent-%COMP%] { - margin-top: 8px; - } -} -[_nghost-%COMP%] { - display: grid; - gap: 12px; - min-width: 0; -} - -.test[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 8px; - align-items: center; - padding: 8px 12px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - box-shadow: var(--%NS%shadow); - color: var(--%NS%text); - font-size: 13px; -} - -.test[_ngcontent-%COMP%] label[_ngcontent-%COMP%] { - margin-right: 4px; - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - white-space: nowrap; -} - -.test[_ngcontent-%COMP%] input[_ngcontent-%COMP%] { - flex: 1 1 200px; - min-width: 0; - font-family: var(--%NS%font-mono); - font-size: 12.5px; -} - -.result[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 4px 8px; - align-items: center; - padding: 10px 14px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - color: var(--%NS%text); - font-size: 13px; - line-height: 1.5; - animation: enter 0.35s var(--%NS%ease) both; -} - -.result[data-matched=true][_ngcontent-%COMP%] { - box-shadow: inset 3px 0 0 var(--%NS%ok); -} - -.result[data-matched=false][_ngcontent-%COMP%] { - box-shadow: inset 3px 0 0 var(--%NS%danger); -} - -.result[_ngcontent-%COMP%] .muted[_ngcontent-%COMP%] { - flex-basis: 100%; - font-size: 12px; -} - -.chain[_ngcontent-%COMP%] { - color: var(--%NS%accent); -} - -.message[_ngcontent-%COMP%] { - margin: 0; - padding: 8px 12px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - color: var(--%NS%text); - font-size: 13px; - overflow-wrap: anywhere; -} - -.filter-row[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 8px 16px; - align-items: center; -} - -.filter[_ngcontent-%COMP%] { - flex: 0 1 320px; - min-width: 0; -} - -.summary[_ngcontent-%COMP%] { - flex: 1 1 240px; - margin: 0; - font-size: 12px; - font-variant-numeric: tabular-nums; -} - -td[_ngcontent-%COMP%] { - vertical-align: middle; -} - -.redirect[_ngcontent-%COMP%] { - color: var(--%NS%text-2); -} - -.src[_ngcontent-%COMP%] { - display: block; - margin-top: 2px; - color: var(--%NS%text-2); - font-family: var(--%NS%font-mono); - font-size: 11.5px; - overflow-wrap: anywhere; -} - -tr.active[_ngcontent-%COMP%] td[_ngcontent-%COMP%] { - background: var(--%NS%accent-soft); - color: var(--%NS%text-strong); -} - -tr.active[_ngcontent-%COMP%]:hover td[_ngcontent-%COMP%] { - background: color-mix(in srgb, var(--%NS%accent) 16%, transparent); -} - -tr.active[_ngcontent-%COMP%] td[_ngcontent-%COMP%]:first-child { - box-shadow: inset 3px 0 0 var(--%NS%accent); -} - -.actions[_ngcontent-%COMP%] { - width: 1%; - padding-top: 6px; - padding-bottom: 6px; - white-space: nowrap; -} - -.actions-inner[_ngcontent-%COMP%] { - display: flex; - gap: 6px; - align-items: center; - justify-content: flex-end; -} - -.param[_ngcontent-%COMP%] { - width: 96px; - font-family: var(--%NS%font-mono); - font-size: 12px; -} - -@media (max-width: 480px) { - .filter[_ngcontent-%COMP%] { - flex-basis: 100%; - } -}`]})},cA=[`trigger`],lA=[`list`],uA=(e,t)=>t.value;function dA(e,t){if(e&1&&(V(0,`span`,4),Y(1),H()),e&2){let e=q();j(),X(e.current().hint)}}function fA(e,t){if(e&1&&(V(0,`span`,15),Y(1),H()),e&2){let e=q().$implicit;j(),X(e.hint)}}function pA(e,t){if(e&1){let e=W();V(0,`li`,11),K(`pointerenter`,function(){let t=O(e).$index;return k(q(2).active.set(t))})(`pointerdown`,function(e){return e.preventDefault()})(`click`,function(){let t=O(e).$index;return k(q(2).choose(t))}),ps(),V(1,`svg`,12),U(2,`path`,13),H(),ms(),V(3,`span`,14),Y(4),H(),N(5,fA,2,1,`span`,15),H()}if(e&2){let e=t.$implicit,n=t.$index,r=q(2);J(`active`,n===r.active())(`selected`,e.value===r.value()),M(`id`,r.uid+`-opt-`+n)(`aria-selected`,e.value===r.value())(`aria-disabled`,e.disabled||null),j(4),X(e.label),j(),P(e.hint?5:-1)}}function mA(e,t){if(e&1&&(V(0,`li`,10),Y(1),H()),e&2){let e=q(2);j(),X(e.emptyText())}}function hA(e,t){if(e&1&&(V(0,`ul`,8,1),Xh(`list-in`),F(2,pA,6,9,`li`,9,uA,!1,mA,2,1,`li`,10),H()),e&2){let e=q();J(`up`,e.dropUp()),M(`id`,e.uid+`-list`)(`aria-labelledby`,e.labelledBy()||e.uid+`-trigger`),j(2),I(e.options())}}var gA=0,_A=class e{options=$.required();value=fv(null);placeholder=$(`Select…`);ariaLabel=$(``);labelledBy=$(``);disabled=$(!1);emptyText=$(`Nothing to choose`);uid=`app-select-${++gA}`;open=A(!1);active=A(-1);dropUp=A(!1);current=Q(()=>this.options().find(e=>e.value===this.value())??null);host=E(Tl);injector=E(Ss);trigger=hv.required(`trigger`);list=hv(`list`);typed=``;typedAt=0;toggle(){this.open()?this.close():this.show()}choose(e){let t=this.options()[e];t&&!t.disabled&&(this.value.set(t.value),this.close(),this.trigger().nativeElement.focus())}onKey(e){let t=this.options(),n=this.open();switch(e.key){case`ArrowDown`:case`ArrowUp`:if(e.preventDefault(),!n){this.show();return}this.move(e.key===`ArrowDown`?1:-1);return;case`Home`:case`End`:if(!n)return;e.preventDefault(),this.setActive(e.key===`Home`?this.firstEnabled(0,1):this.firstEnabled(t.length-1,-1));return;case`Enter`:case` `:e.preventDefault(),n&&this.active()>=0?this.choose(this.active()):this.show();return;case`Escape`:if(!n)return;e.preventDefault(),e.stopPropagation(),this.close();return;case`Tab`:n&&this.close();return;default:e.key.length===1&&!e.metaKey&&!e.ctrlKey&&!e.altKey&&this.typeAhead(e.key)}}onBlur(e){let t=e.relatedTarget;t&&this.host.nativeElement.contains(t)||this.close()}onOutside(e){this.open()&&!this.host.nativeElement.contains(e.target)&&this.close()}show(){if(this.disabled())return;let e=this.host.nativeElement.getBoundingClientRect(),t=window.innerHeight-e.bottom;this.dropUp.set(t<220&&e.top>t);let n=this.options().findIndex(e=>e.value===this.value());this.open.set(!0),this.setActive(n>=0?n:this.firstEnabled(0,1))}close(){this.open.set(!1),this.active.set(-1)}move(e){let t=this.options(),n=this.active();for(let r=0;r=0&&r{(this.list()?.nativeElement.querySelector(`#${this.uid}-opt-${e}`))?.scrollIntoView({block:`nearest`})},{injector:this.injector})}typeAhead(e){let t=performance.now();this.typed=t-this.typedAt>600?e.toLowerCase():this.typed+e.toLowerCase(),this.typedAt=t;let n=this.options().findIndex(e=>!e.disabled&&e.label.toLowerCase().startsWith(this.typed));n<0||(this.open()?this.setActive(n):this.value.set(this.options()[n].value))}static ɵfac=function(t){return new(t||e)};static ɵcmp=Oh({type:e,selectors:[[`app-select`]],viewQuery:function(e,t){e&1&&Ng(t.trigger,cA,5)(t.list,lA,5),e&2&&Pg(2)},hostAttrs:[1,`app-select`],hostVars:2,hostBindings:function(e,t){e&1&&G(`pointerdown`,function(e){return t.onOutside(e)},bu),e&2&&J(`open`,t.open())},inputs:{options:[1,`options`],value:[1,`value`],placeholder:[1,`placeholder`],ariaLabel:[1,`ariaLabel`],labelledBy:[1,`labelledBy`],disabled:[1,`disabled`],emptyText:[1,`emptyText`]},outputs:{value:`valueChange`},decls:8,vars:12,consts:[[`trigger`,``],[`list`,``],[`type`,`button`,`role`,`combobox`,`aria-haspopup`,`listbox`,1,`trigger`,3,`click`,`keydown`,`blur`,`disabled`],[1,`value`],[1,`value-hint`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`chevron`],[`d`,`m6 9 6 6 6-6`],[`role`,`listbox`,`tabindex`,`-1`,1,`list`,3,`up`],[`role`,`listbox`,`tabindex`,`-1`,1,`list`],[`role`,`option`,3,`active`,`selected`],[`role`,`option`,`aria-disabled`,`true`,1,`empty`],[`role`,`option`,3,`pointerenter`,`pointerdown`,`click`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`check`],[`d`,`m5 12 5 5 9-10`],[1,`label`],[1,`hint`]],template:function(e,t){e&1&&(V(0,`button`,2,0),K(`click`,function(){return t.toggle()})(`keydown`,function(e){return t.onKey(e)})(`blur`,function(e){return t.onBlur(e)}),V(2,`span`,3),Y(3),H(),N(4,dA,2,1,`span`,4),ps(),V(5,`svg`,5),U(6,`path`,6),H()(),N(7,hA,5,5,`ul`,7)),e&2&&(xg(`disabled`,t.disabled()),M(`id`,t.uid+`-trigger`)(`aria-controls`,t.uid+`-list`)(`aria-expanded`,t.open())(`aria-label`,t.ariaLabel()||null)(`aria-labelledby`,t.labelledBy()||null)(`aria-activedescendant`,t.open()&&t.active()>=0?t.uid+`-opt-`+t.active():null),j(2),J(`placeholder`,!t.current()),j(),Z(` `,t.current()?.label??t.placeholder(),` `),j(),P(t.current()?.hint?4:-1),j(3),P(t.open()?7:-1))},styles:[`[_nghost-%COMP%] { - position: relative; - display: inline-flex; - min-width: 0; - vertical-align: middle; -} - -.trigger[_ngcontent-%COMP%] { - display: flex; - align-items: center; - gap: 8px; - width: 100%; - min-width: 0; - height: var(--%NS%control-h, 34px); - padding: 0 10px 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%bg); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - text-align: left; - cursor: pointer; - transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease), background-color 150ms var(--%NS%ease); -} - -.trigger[_ngcontent-%COMP%]:hover:not(:disabled) { - border-color: color-mix(in srgb, var(--%NS%border-strong) 55%, var(--%NS%text-3)); -} - -.trigger[_ngcontent-%COMP%]:focus-visible, -.open[_nghost-%COMP%] .trigger[_ngcontent-%COMP%] { - outline: none; - border-color: var(--%NS%accent); - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -.trigger[_ngcontent-%COMP%]:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.value[_ngcontent-%COMP%] { - flex: 1 1 auto; - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.value.placeholder[_ngcontent-%COMP%] { - color: var(--%NS%text-3); -} - -.value-hint[_ngcontent-%COMP%] { - flex: 0 1 auto; - min-width: 0; - overflow: hidden; - color: var(--%NS%text-3); - font-size: 12px; - text-overflow: ellipsis; - white-space: nowrap; -} - -.chevron[_ngcontent-%COMP%] { - flex: none; - width: 14px; - height: 14px; - fill: none; - stroke: var(--%NS%text-3); - stroke-width: 2.2; - stroke-linecap: round; - stroke-linejoin: round; - transition: transform 150ms var(--%NS%ease); -} - -.open[_nghost-%COMP%] .chevron[_ngcontent-%COMP%] { - transform: rotate(180deg); - stroke: var(--%NS%accent); -} - -.list[_ngcontent-%COMP%] { - position: absolute; - top: calc(100% + 6px); - left: 0; - z-index: 50; - box-sizing: border-box; - min-width: 100%; - max-width: min(480px, 100vw - 24px); - max-height: 280px; - margin: 0; - padding: 4px; - overflow: auto; - list-style: none; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.2); - overscroll-behavior: contain; -} - -.list.up[_ngcontent-%COMP%] { - top: auto; - bottom: calc(100% + 6px); -} - -.list-in[_ngcontent-%COMP%] { - animation: _ngcontent-%COMP%_list-in 140ms var(--%NS%ease) both; -} - -@keyframes _ngcontent-%COMP%_list-in { - from { - opacity: 0; - transform: translateY(-4px) scale(0.98); - } -} -li[_ngcontent-%COMP%] { - display: flex; - align-items: center; - gap: 8px; - min-height: 32px; - padding: 0 10px 0 8px; - border-radius: 6px; - color: var(--%NS%text); - font-size: 13px; - cursor: pointer; - white-space: nowrap; -} - -li.active[_ngcontent-%COMP%] { - background: var(--%NS%surface-3); -} - -li.selected[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-weight: 600; -} - -li[aria-disabled=true][_ngcontent-%COMP%] { - color: var(--%NS%text-3); - cursor: default; -} - -.check[_ngcontent-%COMP%] { - flex: none; - width: 14px; - height: 14px; - fill: none; - stroke: var(--%NS%accent); - stroke-width: 2.4; - stroke-linecap: round; - stroke-linejoin: round; - visibility: hidden; -} - -li.selected[_ngcontent-%COMP%] .check[_ngcontent-%COMP%] { - visibility: visible; -} - -.label[_ngcontent-%COMP%] { - flex: 1 1 auto; - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; -} - -.hint[_ngcontent-%COMP%] { - flex: none; - max-width: 50%; - overflow: hidden; - color: var(--%NS%text-3); - font-size: 12px; - font-weight: 400; - text-overflow: ellipsis; -} - -.empty[_ngcontent-%COMP%] { - justify-content: center; -} - -@media (prefers-reduced-motion: reduce) { - .list-in[_ngcontent-%COMP%] { - animation: none; - } - .chevron[_ngcontent-%COMP%] { - transition: none; - } -}`]})},vA=(e,t)=>t.id;function yA(e,t){if(e&1){let e=W();R(0,`div`,4)(1,`span`,5),Y(2,`Page`),z(),R(3,`app-select`,6),G(`valueChange`,function(t){return O(e),k(q(2).pageId.set(t))}),z()()}if(e&2){let e=q(),t=q();j(3),L(`options`,t.pageOptions())(`value`,e.pageId)}}function bA(e,t){e&1&&N(0,yA,4,2,`div`,4),e&2&&P(q().pages().length>1?0:-1)}function xA(e,t){if(e&1){let e=W();R(0,`div`,1)(1,`p`,7),Y(2,`Could not load the live router state.`),z(),R(3,`p`,8),Y(4,` Check that the dev server with ng-devtools is still running, then retry. `),z(),R(5,`button`,9),G(`click`,function(){return O(e),k(q().retry())}),Y(6,`Retry`),z()()}}function SA(e,t){e&1&&(R(0,`p`,2),Y(1,`Loading the live router state…`),z())}function CA(e,t){if(e&1&&(R(0,`span`,17),Y(1),z(),R(2,`span`,18),Y(3),z()),e&2){let e=q(3);j(),X(e.problems()),j(2),Z(`, `,e.problems(),` problem navigations`)}}function wA(e,t){if(e&1){let e=W();R(0,`button`,16),G(`click`,function(){let t=O(e).$implicit;return k(q(2).selected.set(t.id))}),Y(1),N(2,CA,4,2),z()}if(e&2){let e=t.$implicit,n=q(2);L(`id`,`router-tab-`+e.id),M(`aria-selected`,e.id===n.selected())(`aria-controls`,`router-panel-`+e.id)(`tabindex`,e.id===n.selected()?0:-1),j(),Z(` `,e.label,` `),j(),P(e.id===`navigations`&&n.problems()>0?2:-1)}}function TA(e,t){if(e&1&&B(0,`app-route-current`,13),e&2){let e=q(),t=q();L(`page`,e)(`rpc`,t.rpc())}}function EA(e,t){if(e&1&&B(0,`app-route-timeline`,13),e&2){let e=q(),t=q();L(`page`,e)(`rpc`,t.rpc())}}function DA(e,t){if(e&1&&B(0,`app-route-tree`,14),e&2){let e=q(),t=q();L(`page`,e)(`rpc`,t.rpc())(`sources`,t.sources())}}function OA(e,t){e&1&&B(0,`app-route-setup`,15),e&2&&L(`page`,q())}function kA(e,t){if(e&1&&B(0,`app-route-lint`,13),e&2){let e=q(),t=q();L(`page`,e)(`rpc`,t.rpc())}}function AA(e,t){if(e&1){let e=W();R(0,`div`,10),G(`keydown`,function(t){return O(e),k(q().onKey(t))}),F(1,wA,3,6,`button`,11,vA),z(),R(3,`div`,12),N(4,TA,1,2,`app-route-current`,13)(5,EA,1,2,`app-route-timeline`,13)(6,DA,1,3,`app-route-tree`,14)(7,OA,1,1,`app-route-setup`,15)(8,kA,1,2,`app-route-lint`,13),z()}if(e&2){let e,t=q();j(),I(t.tabs),j(2),L(`id`,`router-panel-`+t.selected()),M(`aria-labelledby`,`router-tab-`+t.selected()),j(),P((e=t.selected())===`current`?4:e===`navigations`?5:e===`routes`?6:e===`setup`?7:e===`lint`?8:-1)}}function jA(e,t){e&1&&(R(0,`div`,3)(1,`p`,7),Y(2,`No page is reporting router state yet.`),z(),R(3,`p`,8),Y(4,` Open the app in a browser. This view updates as soon as a page connects. `),z()())}var MA=[{id:`current`,label:`Current`},{id:`navigations`,label:`Navigations`},{id:`routes`,label:`Routes`},{id:`setup`,label:`Setup`},{id:`lint`,label:`Lint`}],NA=class e{rpc=$(null);sources=$([]);tabs=MA;selected=A(`current`);pages=A([]);hostPageId=TT();loading=A(!0);failed=A(!1);pageId=nv({source:this.pages,computation:(e,t)=>t?.value&&e.some(e=>e.pageId===t.value)?t.value:e.find(e=>e.pageId===this.hostPageId&&e.snapshot)?.pageId??e.find(e=>e.snapshot)?.pageId??e[0]?.pageId??null});unsubscribe=null;destroyRef=E(ws);page=Q(()=>{let e=this.pages();return e.find(e=>e.pageId===this.pageId())??e[0]??null});problems=Q(()=>(this.page()?.navigations??[]).filter(e=>!e.probe&&[`failed`,`cancelled`,`redirected`].includes(e.outcome)).length);constructor(){dc(()=>{let e=this.rpc();e&&this.load(e)}),this.destroyRef.onDestroy(()=>this.unsubscribe?.())}async load(e){this.loading.set(!0),this.failed.set(!1);try{let t=await e.scope(`ng-devtools`).rpc.sharedState(`router`);if(this.destroyRef.destroyed)return;let n=e=>{this.pages.set(e?.pages??[])};n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.failed.set(!0)}finally{this.loading.set(!1)}}retry(){let e=this.rpc();e&&this.load(e)}pageOptions=Q(()=>this.pages().map(e=>({value:e.pageId,label:e.snapshot?.url??e.pageId,hint:e.pageId})));onKey(e){let t=this.tabs.map(e=>e.id),n=t.indexOf(this.selected()),r=n;if(e.key===`ArrowRight`)r=(n+1)%t.length;else if(e.key===`ArrowLeft`)r=(n-1+t.length)%t.length;else if(e.key===`Home`)r=0;else if(e.key===`End`)r=t.length-1;else return;e.preventDefault(),this.selected.set(t[r]);let i=e.currentTarget;queueMicrotask(()=>i.querySelector(`#router-tab-${t[r]}`)?.focus())}static ɵfac=function(t){return new(t||e)};static ɵcmp=Oh({type:e,selectors:[[`app-live-route`]],inputs:{rpc:[1,`rpc`],sources:[1,`sources`]},decls:8,vars:2,consts:[[1,`section-head`],[`role`,`alert`,1,`empty`],[`role`,`status`,1,`muted`,`empty`],[1,`empty`],[1,`page-pick`],[`id`,`live-route-page-label`,1,`page-label`],[`labelledBy`,`live-route-page-label`,3,`valueChange`,`options`,`value`],[1,`empty-title`],[1,`muted`],[`type`,`button`,1,`retry`,3,`click`],[`role`,`tablist`,`aria-label`,`Router views`,1,`tabs`,3,`keydown`],[`type`,`button`,`role`,`tab`,3,`id`],[`role`,`tabpanel`,1,`panel`,3,`id`],[3,`page`,`rpc`],[3,`page`,`rpc`,`sources`],[3,`page`],[`type`,`button`,`role`,`tab`,3,`click`,`id`],[`aria-hidden`,`true`,1,`count`],[1,`visually-hidden`]],template:function(e,t){if(e&1&&(R(0,`div`,0)(1,`h2`),Y(2,`Live router`),z(),N(3,bA,1,1),z(),N(4,xA,7,0,`div`,1)(5,SA,2,0,`p`,2)(6,AA,9,3)(7,jA,5,0,`div`,3)),e&2){let e,n;j(3),P((e=t.page())?3:-1,e),j(),P(t.failed()?4:t.loading()?5:(n=t.page())?6:7,n)}},dependencies:[uO,yO,NO,Ak,sA,_A],styles:[`[_nghost-%COMP%] { - display: grid; - gap: 16px; - min-width: 0; - margin-bottom: 32px; -} - -.section-head[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 8px 16px; - align-items: center; - justify-content: space-between; - min-height: 34px; -} - -h2[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.muted[_ngcontent-%COMP%] { - color: var(--%NS%text-2); - font-size: 13px; - line-height: 1.5; -} - -.empty[_ngcontent-%COMP%] { - display: grid; - gap: 6px; - justify-items: center; - margin: 0; - padding: 40px 24px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - text-align: center; - animation: enter 0.35s var(--%NS%ease) both; -} - -.empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { - margin: 0; - max-width: 480px; -} - -.empty-title[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-size: 14px; - font-weight: 600; -} - -.retry[_ngcontent-%COMP%] { - height: 34px; - margin-top: 8px; - padding: 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - font-weight: 500; - cursor: pointer; - transition: background-color 0.15s var(--%NS%ease); -} - -.retry[_ngcontent-%COMP%]:hover { - background: var(--%NS%surface-3); -} - -.retry[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.page-pick[_ngcontent-%COMP%] { - display: flex; - flex: 0 1 420px; - gap: 10px; - align-items: center; - min-width: 0; -} - -.page-label[_ngcontent-%COMP%] { - flex: none; - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.page-pick[_ngcontent-%COMP%] app-select[_ngcontent-%COMP%] { - flex: 1 1 auto; - width: 100%; -} - -.tabs[_ngcontent-%COMP%] { - display: flex; - justify-self: start; - max-width: 100%; - gap: 2px; - padding: 3px; - overflow-x: auto; - border: 1px solid var(--%NS%border); - border-radius: 10px; - background: var(--%NS%bg); -} - -[role=tab][_ngcontent-%COMP%] { - display: inline-flex; - flex: none; - align-items: center; - gap: 6px; - height: 26px; - padding: 0 12px; - border: none; - border-radius: 7px; - background: transparent; - color: var(--%NS%text-2); - font: inherit; - font-size: 13px; - font-weight: 500; - white-space: nowrap; - cursor: pointer; - transition: background-color 0.15s var(--%NS%ease), color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease); -} - -[role=tab][_ngcontent-%COMP%]:hover { - background: var(--%NS%surface-2); - color: var(--%NS%text); -} - -[role=tab][aria-selected=true][_ngcontent-%COMP%] { - background: var(--%NS%surface-3); - color: var(--%NS%text-strong); - box-shadow: inset 0 0 0 1px var(--%NS%border-strong); -} - -[role=tab][_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: -2px; -} - -.panel[_ngcontent-%COMP%] { - min-width: 0; - animation: enter 0.35s var(--%NS%ease) both; -} - -.count[_ngcontent-%COMP%] { - min-width: 18px; - padding: 0 6px; - border: 1px solid color-mix(in srgb, var(--%NS%danger) 30%, transparent); - border-radius: 99px; - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); - color: var(--%NS%danger); - font-size: 11px; - font-weight: 600; - line-height: 16px; - text-align: center; - font-variant-numeric: tabular-nums; -}`]})};function PA(e,t){e&1&&Y(0,` The Routes tab above shows what the router uses. `)}function FA(e,t){if(e&1){let e=W();R(0,`button`,13),G(`click`,function(){O(e);let t=q();return k(t.expanded.set(!t.expanded()))}),Y(1),z()}if(e&2){let e=q();M(`aria-expanded`,e.expanded()),j(),Z(` `,e.expanded()?`Hide table`:`Show table`,` `)}}function IA(e,t){e&1&&(Y(0,` Run `),R(1,`code`),Y(2,`ng-devtools build`),z(),Y(3,` again to rebuild the report. `))}function LA(e,t){e&1&&Y(0,` Check that the dev server is running, then refresh. `)}function RA(e,t){if(e&1&&(R(0,`div`,11)(1,`p`,14),Y(2,`Could not scan the route files.`),z(),R(3,`p`,15),N(4,IA,4,0)(5,LA,1,0),z()()),e&2){let e=q();j(4),P(e.staticReport()?4:5)}}function zA(e,t){e&1&&(R(0,`p`,12),Y(1,`Scanning routes…`),z())}function BA(e,t){if(e&1){let e=W();R(0,`div`,16)(1,`p`,14),Y(2,`No routes match the filter.`),z(),R(3,`p`,15),Y(4,`Search by path, component, guard, title or file name.`),z(),R(5,`button`,10),G(`click`,function(){O(e);let t=q(2),n=Fg(12);return t.filter.set(``),k(n.focus())}),Y(6,` Clear filter `),z()()}}function VA(e,t){e&1&&(R(0,`div`,16)(1,`p`,14),Y(2,`No routes found.`),z(),R(3,`p`,15),Y(4,` Routes are read from `),R(5,`code`),Y(6,`*.routes.ts`),z(),Y(7,` and `),R(8,`code`),Y(9,`*routing.module.ts`),z(),Y(10,` files, the files they lazy load, plus Analog pages. Add one and refresh. `),z()())}function HA(e,t){e&1&&N(0,BA,7,0,`div`,16)(1,VA,11,0,`div`,16),e&2&&P(+!q().routes().length)}function UA(e,t){if(e&1&&(R(0,`span`,21),Y(1),z()),e&2){let e=q().$implicit;j(),X(e.kind)}}function WA(e,t){if(e&1&&(R(0,`span`,22)(1,`span`,25),Y(2,`→`),z(),R(3,`span`,26),Y(4,`redirects to`),z(),Y(5),z()),e&2){let e=q().$implicit;j(5),Z(` `,e.redirectTo)}}function GA(e,t){if(e&1&&(R(0,`code`,23),Y(1),z()),e&2){let e=q().$implicit;j(),X(e.component)}}function KA(e,t){e&1&&(R(0,`span`,27),Y(1,`–`),z(),R(2,`span`,26),Y(3,`none`),z())}function qA(e,t){if(e&1&&(R(0,`span`,21),Y(1),z()),e&2){let e=t.$implicit;j(),X(e)}}function JA(e,t){e&1&&(R(0,`span`,27),Y(1,`–`),z(),R(2,`span`,26),Y(3,`none`),z())}function YA(e,t){if(e&1&&Y(0),e&2){let e=q().$implicit;Z(` `,e.title,` `)}}function XA(e,t){e&1&&(R(0,`span`,27),Y(1,`–`),z(),R(2,`span`,26),Y(3,`none`),z())}function ZA(e,t){if(e&1&&(R(0,`tr`)(1,`td`,20),Y(2),N(3,UA,2,1,`span`,21),z(),R(4,`td`),N(5,WA,6,1,`span`,22)(6,GA,2,1,`code`,23)(7,KA,4,0),z(),R(8,`td`),F(9,qA,2,1,`span`,21,cg,!1,JA,4,0),z(),R(12,`td`),N(13,YA,1,1)(14,XA,4,0),z(),R(15,`td`,24),Y(16),z()()),e&2){let e=t.$implicit,n=q(2);j(2),Z(` `,e.fullPath,` `),j(),P(e.kind===`page`?-1:3),j(2),P(e.redirectTo===void 0?e.component?6:7:5),j(4),I(n.checks(e)),j(4),P(e.title?13:14),j(3),X(n.location(e))}}function QA(e,t){if(e&1&&(R(0,`p`,17),Y(1),z(),R(2,`div`,18)(3,`table`)(4,`thead`)(5,`tr`)(6,`th`,19),Y(7,`Path`),z(),R(8,`th`,19),Y(9,`Component / Target`),z(),R(10,`th`,19),Y(11,`Guards and resolvers`),z(),R(12,`th`,19),Y(13,`Title`),z(),R(14,`th`,19),Y(15,`Declared in`),z()()(),R(16,`tbody`),F(17,ZA,17,6,`tr`,null,cg),z()()()),e&2){let e=q();j(),k_(` `,e.filtered().length,` of `,e.routes().length,` route entries, `,e.navigable(),` navigable `),j(16),I(e.filtered())}}var $A=class e{rpc=$(null);staticReport=Q(()=>OT(this.rpc()));routes=A([]);filter=A(``);loading=A(!1);error=A(!1);live=hv(NA);liveHasConfig=Q(()=>!!this.live()?.page()?.config);expanded=nv(()=>!this.liveHasConfig());navigable=Q(()=>this.filtered().filter(e=>e.kind===`page`).length);filtered=Q(()=>{let e=this.filter().toLowerCase().trim(),t=this.routes();return e?t.filter(t=>t.fullPath.toLowerCase().includes(e)||t.component&&t.component.toLowerCase().includes(e)||t.redirectTo&&t.redirectTo.toLowerCase().includes(e)||t.title&&t.title.toLowerCase().includes(e)||this.checks(t).some(t=>t.toLowerCase().includes(e))||t.file.toLowerCase().includes(e)):t});constructor(){dc(()=>{this.rpc()&&this.refresh()})}checks(e){return[...Object.entries(e.guards??{}).flatMap(([e,t])=>t.map(t=>`${e} ${t}`)),...(e.resolvers??[]).map(e=>`resolve ${e}`)]}location(e){return ED(e)}onFilterInput(e){let t=e.target;this.filter.set(t?.value??``)}async refresh(){let e=this.rpc();if(e){this.loading.set(!0),this.error.set(!1);try{let t=await e.scope(`ng-devtools`).rpc.call(`get-routes`);this.routes.set(t)}catch{this.error.set(!0)}finally{this.loading.set(!1)}}}static ɵfac=function(t){return new(t||e)};static ɵcmp=Oh({type:e,selectors:[[`app-route-inspector`]],viewQuery:function(e,t){e&1&&Ng(t.live,NA,5),e&2&&Pg()},inputs:{rpc:[1,`rpc`]},decls:19,vars:9,consts:[[`filterInput`,``],[3,`rpc`,`sources`],[`aria-labelledby`,`config-heading`,1,`config`],[1,`section-head`],[`id`,`config-heading`],[1,`muted`,`hint`],[`type`,`button`,`aria-controls`,`config-body`,1,`small`,`toggle`],[`id`,`config-body`,1,`config-body`,3,`hidden`],[1,`toolbar`],[`type`,`text`,`aria-label`,`Filter source routes`,`placeholder`,`Filter routes…`,1,`field`,3,`input`,`value`],[`type`,`button`,1,`small`,3,`click`],[`role`,`alert`,1,`empty`],[`role`,`status`,1,`muted`,`empty`],[`type`,`button`,`aria-controls`,`config-body`,1,`small`,`toggle`,3,`click`],[1,`empty-title`],[1,`muted`],[1,`empty`],[1,`muted`,`count`],[`role`,`region`,`aria-label`,`Source route config`,`tabindex`,`0`,1,`table-scroll`],[`scope`,`col`],[1,`path`],[1,`tag`],[1,`redirect`],[1,`component`],[1,`file`],[`aria-hidden`,`true`],[1,`visually-hidden`],[`aria-hidden`,`true`,1,`nil`]],template:function(e,t){e&1&&(B(0,`app-live-route`,1),R(1,`section`,2)(2,`div`,3)(3,`h2`,4),Y(4,`Source route config`),z(),R(5,`span`,5),Y(6,` Read from your source files. `),N(7,PA,1,0),z(),N(8,FA,2,2,`button`,6),z(),R(9,`div`,7)(10,`div`,8)(11,`input`,9,0),G(`input`,function(e){return t.onFilterInput(e)}),z(),R(13,`button`,10),G(`click`,function(){return t.refresh()}),Y(14),z()(),N(15,RA,6,1,`div`,11)(16,zA,2,0,`p`,12)(17,HA,2,1)(18,QA,19,3),z()()),e&2&&(L(`rpc`,t.rpc())(`sources`,t.routes()),j(7),P(t.liveHasConfig()?7:-1),j(),P(t.liveHasConfig()?8:-1),j(),L(`hidden`,!t.expanded()),j(2),L(`value`,t.filter()),j(2),M(`aria-busy`,t.loading()),j(),Z(` `,t.loading()?`Scanning…`:`Refresh`,` `),j(),P(t.error()?15:t.loading()&&t.routes().length===0?16:t.filtered().length===0?17:18))},dependencies:[NA],styles:[`.muted[_ngcontent-%COMP%] { - color: var(--%NS%text-2); - font-size: 13px; - line-height: 1.5; -} - -.nil[_ngcontent-%COMP%] { - color: var(--%NS%text-3); -} - -code[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); - font-size: 12.5px; - color: var(--%NS%text); - overflow-wrap: anywhere; -} - -.tag[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - max-width: 100%; - min-height: 20px; - margin: 2px 4px 2px 0; - padding: 0 8px; - border: 1px solid var(--%NS%border); - border-radius: 99px; - background: var(--%NS%surface-2); - color: var(--%NS%text); - font-family: var(--%NS%font-mono); - font-size: 11.5px; - line-height: 1.4; - vertical-align: middle; - overflow-wrap: anywhere; - white-space: normal; -} - -.badge[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - min-height: 20px; - padding: 0 8px; - border: 1px solid var(--%NS%border-strong); - border-radius: 99px; - background: var(--%NS%surface-2); - color: var(--%NS%text); - font-size: 11px; - font-weight: 600; - line-height: 1.4; - white-space: nowrap; - vertical-align: middle; -} - -.badge[data-tone=good][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); - background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); - color: var(--%NS%ok); -} - -.badge[data-tone=warn][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); - background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); - color: var(--%NS%warn); -} - -.badge[data-tone=bad][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); - color: var(--%NS%danger); -} - -button.small[_ngcontent-%COMP%] { - display: inline-flex; - flex: none; - align-items: center; - justify-content: center; - gap: 6px; - height: 34px; - padding: 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - font-weight: 500; - white-space: nowrap; - cursor: pointer; - transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease); -} - -button.small[_ngcontent-%COMP%]:hover:not(:disabled) { - background: var(--%NS%surface-3); - border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%border-strong)); -} - -button.small[_ngcontent-%COMP%]:active:not(:disabled) { - transform: translateY(1px); -} - -button.small[_ngcontent-%COMP%]:disabled { - opacity: 0.55; - cursor: not-allowed; -} - -button.small.primary[_ngcontent-%COMP%] { - border-color: var(--%NS%accent); - background: var(--%NS%accent); - color: var(--%NS%accent-ink); - font-weight: 600; -} - -button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) { - border-color: var(--%NS%accent-hover); - background: var(--%NS%accent-hover); -} - -button.small[_ngcontent-%COMP%]:focus-visible, -.table-scroll[_ngcontent-%COMP%]:focus-visible, -input[type=checkbox][_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -input.field[_ngcontent-%COMP%], -select[_ngcontent-%COMP%] { - height: 34px; - padding: 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background-color: var(--%NS%bg); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease); -} - -input.field[_ngcontent-%COMP%] { - text-overflow: ellipsis; -} - -input.field[_ngcontent-%COMP%]::placeholder { - color: var(--%NS%text-3); -} - -input.field[_ngcontent-%COMP%]:hover:not(:focus), -select[_ngcontent-%COMP%]:hover:not(:focus) { - border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%border-strong)); -} - -input.field[_ngcontent-%COMP%]:focus-visible, -select[_ngcontent-%COMP%]:focus-visible { - outline: none; - border-color: var(--%NS%accent); - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -.note[_ngcontent-%COMP%] { - margin: 0; - padding: 10px 14px; - border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent); - border-radius: var(--%NS%radius-sm); - background: color-mix(in srgb, var(--%NS%warn) 10%, transparent); - color: var(--%NS%text); - font-size: 13px; - line-height: 1.5; -} - -.empty[_ngcontent-%COMP%] { - display: grid; - gap: 6px; - justify-items: center; - margin: 0; - padding: 40px 24px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - text-align: center; - animation: enter 0.35s var(--%NS%ease) both; -} - -.empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { - margin: 0; - max-width: 480px; - line-height: 1.6; -} - -.empty-title[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-size: 14px; - font-weight: 600; -} - -.empty[_ngcontent-%COMP%] .small[_ngcontent-%COMP%] { - margin-top: 8px; -} - -.facts[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: max-content minmax(0, 1fr); - align-items: baseline; - gap: 8px 24px; - margin: 0; - padding: 14px 16px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - font-size: 13px; -} - -.facts[_ngcontent-%COMP%]:empty { - display: none; -} - -dt[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -dd[_ngcontent-%COMP%] { - min-width: 0; - margin: 0; - color: var(--%NS%text); - overflow-wrap: anywhere; - font-variant-numeric: tabular-nums; -} - -.table-scroll[_ngcontent-%COMP%] { - overflow-x: auto; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - box-shadow: var(--%NS%shadow); - animation: enter 0.35s var(--%NS%ease) both; -} - -table[_ngcontent-%COMP%] { - width: 100%; - border-collapse: collapse; - font-size: 13px; - font-variant-numeric: tabular-nums; -} - -th[_ngcontent-%COMP%] { - padding: 10px 14px; - border-bottom: 1px solid var(--%NS%border); - background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface)); - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.06em; - text-align: left; - text-transform: uppercase; - white-space: nowrap; -} - -td[_ngcontent-%COMP%] { - padding: 10px 14px; - border-bottom: 1px solid var(--%NS%border); - color: var(--%NS%text); - line-height: 1.5; - vertical-align: top; - transition: background-color 0.15s var(--%NS%ease); -} - -tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child td[_ngcontent-%COMP%] { - border-bottom: none; -} - -tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover td[_ngcontent-%COMP%] { - background: var(--%NS%surface-2); -} - -.path[_ngcontent-%COMP%] { - color: var(--%NS%accent); - font-family: var(--%NS%font-mono); - font-size: 12.5px; - white-space: nowrap; -} - -h3[_ngcontent-%COMP%] { - margin: 8px 0 -4px; - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -@media (max-width: 480px) { - .facts[_ngcontent-%COMP%] { - grid-template-columns: minmax(0, 1fr); - gap: 2px; - } - .facts[_ngcontent-%COMP%] dd[_ngcontent-%COMP%] + dt[_ngcontent-%COMP%] { - margin-top: 8px; - } -} -[_nghost-%COMP%] { - display: block; - min-width: 0; -} - -.config[_ngcontent-%COMP%] { - display: grid; - gap: 12px; - min-width: 0; -} - -.section-head[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 4px 12px; - align-items: baseline; -} - -h2[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.hint[_ngcontent-%COMP%], -.count[_ngcontent-%COMP%] { - margin: 0; - font-size: 12px; - font-variant-numeric: tabular-nums; -} - -.count[_ngcontent-%COMP%] { - margin-bottom: -4px; - padding: 0 4px; -} - -.config-body[_ngcontent-%COMP%] { - display: grid; - gap: 12px; - min-width: 0; -} - -.config-body[hidden][_ngcontent-%COMP%] { - display: none; -} - -.toggle[_ngcontent-%COMP%] { - margin-left: auto; -} - -.toolbar[_ngcontent-%COMP%] { - display: flex; - gap: 8px; - align-items: center; -} - -.toolbar[_ngcontent-%COMP%] .field[_ngcontent-%COMP%] { - flex: 1; - min-width: 0; -} - -.component[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); -} - -.redirect[_ngcontent-%COMP%] { - color: var(--%NS%text-2); - font-family: var(--%NS%font-mono); - font-size: 12.5px; - overflow-wrap: anywhere; -} - -.file[_ngcontent-%COMP%] { - min-width: 160px; - color: var(--%NS%text-2); - font-family: var(--%NS%font-mono); - font-size: 12px; - overflow-wrap: anywhere; -}`]})},ej=(e,t)=>t.kind,tj=(e,t)=>t.name+t.file+t.line,nj=(e,t)=>t.id,rj=(e,t)=>t.epoch;function ij(e,t){if(e&1){let e=W();R(0,`div`,2)(1,`span`,8),Y(2,`Component`),z(),R(3,`app-select`,9),G(`valueChange`,function(t){return O(e),k(q().pickComponent(t))}),z()()}if(e&2){let e=q();j(3),L(`options`,e.componentOptions())(`value`,e.pickerValue())}}function aj(e,t){if(e&1&&(R(0,`span`,13),Y(1),z()),e&2){let e=q(2);j(),X(e.sourceNote(e.graph().source))}}function oj(e,t){e&1&&(R(0,`p`,14),Y(1,` The picked component is gone or has no signal graph, so this shows another one. `),z())}function sj(e,t){if(e&1&&(R(0,`p`,10)(1,`span`,11),Y(2),z(),R(3,`span`,12),Y(4),z(),N(5,aj,2,1,`span`,13),z(),N(6,oj,2,0,`p`,14)),e&2){let e=t,n=q();j(2),X(e.name),j(2),X(e.path),j(),P(n.graph().source?5:-1),j(),P(n.picked()&&n.graph().source!==`selected`?6:-1)}}function cj(e,t){e&1&&Y(0,` The live signal graph of one component. Only signals that its template or an effect has read appear here; a signal nothing has read yet is not part of the graph. Pick a kind to filter. `)}function lj(e,t){e&1&&Y(0,` Every signal, computed and effect found in your source. Pick a kind to filter. `)}function uj(e,t){if(e&1){let e=W();R(0,`button`,15),G(`click`,function(){let t=O(e).$implicit,n=q(2);return k(n.kind.set(n.kind()===t.kind?null:t.kind))}),B(1,`span`,18),R(2,`span`,19),Y(3),z(),R(4,`span`,16),Y(5),z()()}if(e&2){let e=t.$implicit,n=q(2);J(`active`,n.kind()===e.kind),M(`aria-pressed`,n.kind()===e.kind),j(),n_(`background`,n.kindColor(e.kind)),j(2),X(e.kind),j(2),X(e.count)}}function dj(e,t){if(e&1){let e=W();R(0,`div`,4)(1,`button`,15),G(`click`,function(){return O(e),k(q().kind.set(null))}),Y(2,` All `),R(3,`span`,16),Y(4),z()(),F(5,uj,6,7,`button`,17,ej),z()}if(e&2){let e=q();j(),J(`active`,!e.kind()),M(`aria-pressed`,!e.kind()),j(3),X(e.kindTotal()),j(),I(e.kindCounts())}}function fj(e,t){e&1&&(R(0,`div`,5),B(1,`span`,20),R(2,`p`,21),Y(3,`Scanning source for signals…`),z()())}function pj(e,t){e&1&&(R(0,`div`,6)(1,`p`,21),Y(2,`No signals found.`),z(),R(3,`p`,22),Y(4,` No `),R(5,`code`),Y(6,`signal()`),z(),Y(7,`, `),R(8,`code`),Y(9,`computed()`),z(),Y(10,` or `),R(11,`code`),Y(12,`effect()`),z(),Y(13,` calls were found in your source. To see the live graph, run Angular 19+ with the overlay connected and select a component. `),z()())}function mj(e,t){if(e&1&&(R(0,`span`,32),Y(1,`·`),z(),R(2,`span`),Y(3),z()),e&2){let e=q().$implicit;j(3),Z(`in <`,e.component,`>`)}}function hj(e,t){if(e&1&&(R(0,`div`,25)(1,`div`,27)(2,`span`,28),Y(3),z(),R(4,`span`,29),Y(5),z()(),R(6,`div`,30)(7,`span`,31),Y(8),z(),N(9,mj,4,1),z()()),e&2){let e=t.$implicit,n=q(2);j(2),n_(`background`,n.kindColor(e.kind)),j(),X(e.kind),j(2),X(e.name),j(2),L(`title`,e.file+`:`+e.line),j(),O_(``,e.file,`:`,e.line),j(),P(e.component?9:-1)}}function gj(e,t){if(e&1){let e=W();R(0,`div`,26)(1,`p`,21),Y(2,`No signals match.`),z(),R(3,`p`,22),Y(4,`Try a different name or kind.`),z(),R(5,`button`,33),G(`click`,function(){return O(e),k(q(2).clearFilters())}),Y(6,`Clear filters`),z()()}}function _j(e,t){if(e&1&&(R(0,`p`,23),Y(1,`Signals from source scan (static analysis):`),z(),R(2,`div`,24),F(3,hj,10,8,`div`,25,tj,!1,gj,7,0,`div`,26),z()),e&2){let e=q();j(3),I(e.filteredSourceSignals())}}function vj(e,t){if(e&1&&(R(0,`span`,36),Y(1),z()),e&2){let e=t;j(),O_(``,e,` `,e===1?`change`:`changes`)}}function yj(e,t){if(e&1&&(R(0,`span`,38),Y(1),U_(2,`json`),z()),e&2){let e=q().$implicit;j(),X(G_(2,1,e.value))}}function bj(e,t){if(e&1&&(R(0,`span`,32),Y(1,`·`),z(),R(2,`span`),Y(3),z()),e&2){let e=q().$implicit,t=q(2);j(3),Z(`Deps: `,t.getDependencies(e).length)}}function xj(e,t){if(e&1&&(R(0,`span`,32),Y(1,`·`),z(),R(2,`span`),Y(3),z()),e&2){let e=q().$implicit,t=q(2);j(3),Z(`Consumers: `,t.getConsumers(e).length)}}function Sj(e,t){if(e&1&&(R(0,`dt`),Y(1,`Value`),z(),R(2,`dd`)(3,`pre`),Y(4),U_(5,`json`),z()()),e&2){let e=q(4);j(4),X(G_(5,1,e.selectedNode().value))}}function Cj(e,t){if(e&1&&(R(0,`li`)(1,`span`,40),Y(2),z(),R(3,`span`,41),Y(4),z()()),e&2){let e=t.$implicit,n=q(5);j(),n_(`background`,n.kindColor(e.kind)),j(),X(e.kind),j(2),X(e.label??e.id)}}function wj(e,t){if(e&1&&(R(0,`h3`),Y(1,`Dependencies (producers)`),z(),R(2,`ul`),F(3,Cj,5,4,`li`,null,nj),z()),e&2){let e=q(4);j(3),I(e.getDependencies(e.selectedNode()))}}function Tj(e,t){if(e&1&&(R(0,`li`)(1,`span`,40),Y(2),z(),R(3,`span`,41),Y(4),z()()),e&2){let e=t.$implicit,n=q(5);j(),n_(`background`,n.kindColor(e.kind)),j(),X(e.kind),j(2),X(e.label??e.id)}}function Ej(e,t){if(e&1&&(R(0,`h3`),Y(1,`Consumers`),z(),R(2,`ul`),F(3,Tj,5,4,`li`,null,nj),z()),e&2){let e=q(4);j(3),I(e.getConsumers(e.selectedNode()))}}function Dj(e,t){if(e&1&&(R(0,`span`,47),Y(1),z()),e&2){let e=q().$implicit;j(),Z(``,e.missed,` earlier not captured`)}}function Oj(e,t){if(e&1&&(R(0,`li`)(1,`span`,45)(2,`time`),Y(3),U_(4,`date`),z(),R(5,`span`,46),Y(6),z(),R(7,`span`),Y(8),z(),N(9,Dj,2,1,`span`,47),z(),R(10,`pre`),Y(11),U_(12,`json`),z()()),e&2){let e=t.$implicit,n=q(5);j(3),X(K_(4,7,e.at,`HH:mm:ss.SSS`)),j(2),r_(`source-`+e.source),j(),X(n.sourceLabel(e.source)),j(2),Z(`epoch `,e.epoch),j(),P(e.missed?9:-1),j(2),X(G_(12,10,e.value))}}function kj(e,t){if(e&1&&(R(0,`h3`,42),Y(1,`Value history`),z(),R(2,`p`,43),Y(3),z(),R(4,`ol`,44),F(5,Oj,13,12,`li`,null,rj),z()),e&2){let e=q(4);j(3),Z(` `,e.changeCount(e.selectedNode().id),` changes recorded, newest first. `),j(2),I(e.selectedHistory())}}function Aj(e,t){if(e&1&&(R(0,`div`,39)(1,`h2`),Y(2),z(),R(3,`dl`)(4,`dt`),Y(5,`Kind`),z(),R(6,`dd`),Y(7),z(),R(8,`dt`),Y(9,`Epoch`),z(),R(10,`dd`),Y(11),z(),N(12,Sj,6,3),z(),N(13,wj,5,0),N(14,Ej,5,0),N(15,kj,7,1),z()),e&2){let e=q().$implicit,t=q(2);L(`id`,`signal-detail-`+e.id),j(2),X(t.selectedNode().label??t.selectedNode().id),j(5),X(t.selectedNode().kind),j(4),X(t.selectedNode().epoch),j(),P(t.selectedNode().value===void 0?-1:12),j(),P(t.getDependencies(t.selectedNode()).length?13:-1),j(),P(t.getConsumers(t.selectedNode()).length?14:-1),j(),P(t.selectedHistory().length?15:-1)}}function jj(e,t){if(e&1){let e=W();R(0,`li`)(1,`button`,35),G(`click`,function(){let t=O(e).$implicit;return k(q(2).selectNode(t))}),R(2,`span`,27)(3,`span`,28),Y(4),z(),R(5,`span`,29),Y(6),z(),N(7,vj,2,2,`span`,36),B(8,`span`,37),z(),N(9,yj,3,3,`span`,38),R(10,`span`,30)(11,`span`),Y(12),z(),N(13,bj,4,1),N(14,xj,4,1),z()(),N(15,Aj,16,8,`div`,39),z()}if(e&2){let e,n=t.$implicit,r=q(2);j(),J(`selected`,r.selectedId()===n.id),M(`aria-expanded`,r.selectedId()===n.id)(`aria-controls`,`signal-detail-`+n.id),j(2),n_(`background`,r.kindColor(n.kind)),j(),X(n.kind),j(2),X(n.label??`(unnamed)`),j(),P((e=r.changeCount(n.id))?7:-1,e),j(2),P(n.value===void 0?-1:9),j(3),Z(`Epoch: `,n.epoch),j(),P(r.getDependencies(n).length?13:-1),j(),P(r.getConsumers(n).length?14:-1),j(),P(r.selectedId()===n.id&&r.selectedNode()?15:-1)}}function Mj(e,t){if(e&1){let e=W();R(0,`button`,33),G(`click`,function(){return O(e),k(q(3).clearFilters())}),Y(1,`Clear filters`),z()}}function Nj(e,t){if(e&1&&(R(0,`li`,34)(1,`p`,21),Y(2),z(),R(3,`p`,22),Y(4),z(),N(5,Mj,2,0,`button`,48),z()),e&2){let e=q(2);j(2),Z(` `,e.graph().nodes.length?`No signals match.`:`No signals in this component.`,` `),j(2),Z(` `,e.graph().nodes.length?`Try a different name or kind.`:`Select a component that reads signals, or interact with the page to create some.`,` `),j(),P(e.graph().nodes.length?5:-1)}}function Pj(e,t){if(e&1&&(R(0,`ul`,7),F(1,jj,16,14,`li`,null,nj,!1,Nj,6,3,`li`,34),z()),e&2){let e=q();j(),I(e.filteredNodes())}}var Fj=`follow`,Ij={selected:`picked`,routed:`rendered by the router`,root:`first component with signals`},Lj={write:`set`,sample:`sampled`,initial:`initial`},Rj={signal:`#facc15`,computed:`#60a5fa`,linkedSignal:`#34d399`,effect:`#fb923c`,template:`#94a3b8`,afterRenderEffectPhase:`#f472b6`,childSignalProp:`#fef08a`,"input (signal)":`#f59e0b`,"input.required (signal)":`#f59e0b`,"output (signal)":`#ec4899`,"model (signal)":`#14b8a6`,"model.required (signal)":`#14b8a6`,"viewChild (signal)":`#a3e635`,"viewChild.required (signal)":`#a3e635`,"viewChildren (signal)":`#a3e635`,"contentChild (signal)":`#fda4af`,"contentChild.required (signal)":`#fda4af`,"contentChildren (signal)":`#fda4af`,resource:`#06b6d4`,unknown:`var(--text-2)`},zj=class e{rpc=$(null);destroyRef=E(ws);pageId=TT();cleanups=[];treePages=A({});picked=A(null);graph=A(null);sourceSignals=A([]);sourceLoaded=A(!1);filter=A(``);kind=A(null);kindCounts=Q(()=>{let e=this.graph()?(this.graph()?.nodes??[]).map(e=>e.kind):this.sourceSignals().map(e=>e.kind),t=new Map;for(let n of e)t.set(n,(t.get(n)??0)+1);return[...t].map(([e,t])=>({kind:e,count:t}))});kindTotal=Q(()=>this.kindCounts().reduce((e,t)=>e+t.count,0));selectedId=A(null);selectedNode=Q(()=>this.graph()?.nodes.find(e=>e.id===this.selectedId())??null);selectedHistory=Q(()=>{let e=this.selectedId();return e?[...this.graph()?.history?.[e]??[]].reverse():[]});kindLegend=Object.entries(Rj).map(([e,t])=>({kind:e,color:t}));filteredNodes=Q(()=>{let e=this.graph();if(!e)return[];let t=this.filter().toLowerCase(),n=this.kind();return e.nodes.filter(e=>(!n||e.kind===n)&&(!t||(e.label??``).toLowerCase().includes(t)||e.kind.toLowerCase().includes(t))).sort((e,t)=>e.id.localeCompare(t.id,void 0,{numeric:!0}))});filteredSourceSignals=Q(()=>{let e=this.filter().toLowerCase(),t=this.kind();return this.sourceSignals().filter(n=>(!t||n.kind===t)&&(!e||n.name.toLowerCase().includes(e)||n.kind.toLowerCase().includes(e)||n.file.toLowerCase().includes(e)))});targetPageId=Q(()=>this.pageId??this.graph()?.pageId??this.latestTreePage()?.pageId??null);latestTreePage=Q(()=>{let e=null;for(let[t,n]of Object.entries(this.treePages())){let r=n.reportedAt??0;(!e||r>e.reportedAt)&&(e={pageId:t,reportedAt:r})}return e});componentOptions=Q(()=>{let e=this.targetPageId(),t=(e?this.treePages()[e]?.roots:void 0)??[],n=[],r=e=>{for(let t of e)n.push(t),r(t.children)};if(r(t),!n.length)return[];let i=new Map;for(let e of n)i.set(e.name,(i.get(e.name)??0)+1);let a=new Map,o=[{value:Fj,label:`Follow the routed component`,hint:`automatic`}];for(let e of n){let t=(a.get(e.name)??0)+1;a.set(e.name,t),o.push({value:e.id,label:(i.get(e.name)??0)>1?`${e.name} #${t}`:e.name,hint:`<${e.tag}>`})}return o});pickerValue=Q(()=>{let e=this.picked();return e&&this.componentOptions().some(t=>t.value===e)?e:Fj});constructor(){dc(()=>{let e=this.rpc();e&&(this.loadSignalGraph(e),this.loadSourceSignals(e))}),this.destroyRef.onDestroy(()=>{for(let e of this.cleanups.splice(0))e()})}async loadSignalGraph(e){for(let e of this.cleanups.splice(0))e();let t=e.scope(`ng-devtools`);try{let e=await t.rpc.sharedState(`signal-graph`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e,n=(this.pageId?t?.pages?.[this.pageId]:t?.graph)??null;n?.component?.id!==this.graph()?.component?.id&&this.selectedId.set(null),this.graph.set(n)};n(e.value()),this.cleanups.push(e.on(`updated`,n))}catch{this.graph.set(null)}try{let e=await t.rpc.sharedState(`component-tree`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e?.pages;this.treePages.set(t&&typeof t==`object`?t:{})};n(e.value()),this.cleanups.push(e.on(`updated`,n))}catch{this.treePages.set({})}}pickComponent(e){let t=e&&e!==Fj?e:null;this.picked.set(t);let n=this.rpc();n&&n.scope(`ng-devtools`).rpc.call(`select-signal-target`,{pageId:this.targetPageId()??void 0,id:t}).catch(()=>{})}sourceNote(e){return Ij[e]}async loadSourceSignals(e){let t=e.scope(`ng-devtools`);try{let e=await t.rpc.call(`get-signals`);this.sourceSignals.set(e)}catch{}finally{this.sourceLoaded.set(!0)}}clearFilters(){this.filter.set(``),this.kind.set(null)}selectNode(e){this.selectedId.set(this.selectedId()===e.id?null:e.id)}changeCount(e){return(this.graph()?.history?.[e]??[]).reduce((e,t)=>e+(t.source===`initial`?0:1+(t.missed??0)),0)}sourceLabel(e){return Lj[e]}kindColor(e){return Rj[e]??Rj.unknown}getDependencies(e){let t=this.graph();if(!t)return[];let n=t.nodes.findIndex(t=>t.id===e.id);return t.edges.filter(e=>e.consumer===n).map(e=>t.nodes[e.producer]).filter(Boolean)}getConsumers(e){let t=this.graph();if(!t)return[];let n=t.nodes.findIndex(t=>t.id===e.id);return t.edges.filter(e=>e.producer===n).map(e=>t.nodes[e.consumer]).filter(Boolean)}static ɵfac=function(t){return new(t||e)};static ɵcmp=Oh({type:e,selectors:[[`app-signal-inspector`]],inputs:{rpc:[1,`rpc`]},decls:12,vars:9,consts:[[1,`toolbar`],[`type`,`text`,`placeholder`,`Filter by name or kind…`,`aria-label`,`Filter signals by name or kind`,3,`input`,`value`],[1,`picker`],[1,`intro`],[`role`,`group`,`aria-label`,`Filter by kind`,1,`kinds`],[`role`,`status`,1,`empty`],[1,`empty`],[`role`,`list`,1,`nodes`],[`id`,`signals-component-label`,1,`label-key`],[`labelledBy`,`signals-component-label`,3,`valueChange`,`options`,`value`],[1,`showing`],[1,`showing-name`],[1,`mono`],[1,`source-note`],[`role`,`status`,1,`fallback`],[`type`,`button`,1,`kind-chip`,3,`click`],[1,`count`],[`type`,`button`,1,`kind-chip`,3,`active`],[`aria-hidden`,`true`,1,`dot`],[1,`chip-text`],[`aria-hidden`,`true`,1,`spinner`],[1,`empty-title`],[1,`hint`],[1,`source-label`],[1,`nodes`],[1,`node-card`],[`role`,`status`,1,`empty`,`compact`],[1,`node-header`],[1,`kind-badge`],[1,`node-label`],[1,`node-meta`],[1,`file`,3,`title`],[`aria-hidden`,`true`,1,`sep`],[`type`,`button`,1,`reset`,3,`click`],[1,`empty`,`compact`],[`type`,`button`,1,`node-card`,3,`click`],[1,`changed-badge`],[`aria-hidden`,`true`,1,`chevron`],[1,`node-value`],[1,`detail-panel`,3,`id`],[1,`kind-badge`,`sm`],[1,`rel-label`],[`id`,`value-history-heading`],[`aria-live`,`polite`,1,`history-summary`],[`aria-labelledby`,`value-history-heading`,1,`history`],[1,`history-meta`],[1,`source-tag`],[1,`missed`],[`type`,`button`,1,`reset`]],template:function(e,t){if(e&1&&(R(0,`div`,0)(1,`input`,1),G(`input`,function(e){return t.filter.set(e.target.value)}),z(),N(2,ij,4,2,`div`,2),z(),N(3,sj,7,4),R(4,`p`,3),N(5,cj,1,0)(6,lj,1,0),z(),N(7,dj,7,4,`div`,4),N(8,fj,4,0,`div`,5),N(9,pj,14,0,`div`,6),N(10,_j,6,1),N(11,Pj,4,1,`ul`,7)),e&2){let e;j(),L(`value`,t.filter()),j(),P(t.componentOptions().length?2:-1),j(),P((e=t.graph()?.component)?3:-1,e),j(2),P(t.graph()?5:6),j(2),P(t.kindCounts().length?7:-1),j(),P(!t.graph()&&!t.sourceLoaded()?8:-1),j(),P(!t.graph()&&t.sourceLoaded()&&t.sourceSignals().length===0?9:-1),j(),P(!t.graph()&&t.sourceSignals().length>0?10:-1),j(),P(t.graph()?11:-1)}},dependencies:[_A,Py,Fy],styles:[`[_nghost-%COMP%] { - display: block; - min-width: 0; - color: var(--%NS%text); - font-size: 13px; -} - -.toolbar[_ngcontent-%COMP%] { - position: sticky; - top: 0; - z-index: 2; - display: flex; - flex-wrap: wrap; - gap: 8px 12px; - align-items: center; - margin: 0 0 16px; - padding: 10px 12px; - background: color-mix(in srgb, var(--%NS%surface) 85%, transparent); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); -} - -input[_ngcontent-%COMP%] { - flex: 1 1 200px; - min-width: 0; - height: 34px; - padding: 0 12px; - background: var(--%NS%bg); - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - outline: none; - transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease); -} - -input[_ngcontent-%COMP%]::placeholder { - color: var(--%NS%text-3); -} - -input[_ngcontent-%COMP%]:hover { - border-color: color-mix(in srgb, var(--%NS%text-3) 60%, var(--%NS%border-strong)); -} - -input[_ngcontent-%COMP%]:focus-visible { - outline: none; - border-color: var(--%NS%accent); - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -.empty[_ngcontent-%COMP%] { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; - text-align: center; - padding: 40px 24px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - animation: enter 0.35s var(--%NS%ease) both; -} - -.empty.compact[_ngcontent-%COMP%] { - padding: 24px 16px; - border-style: dashed; - background: transparent; -} - -.empty-title[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-strong); - font-size: 14px; - font-weight: 600; -} - -.hint[_ngcontent-%COMP%] { - max-width: 460px; - margin: 0; - color: var(--%NS%text-2); - font-size: 13px; - line-height: 1.55; - overflow-wrap: anywhere; -} - -.hint[_ngcontent-%COMP%] code[_ngcontent-%COMP%] { - padding: 1px 5px; - font-family: var(--%NS%font-mono); - font-size: 12px; - color: var(--%NS%text); - background: var(--%NS%surface-3); - border: 1px solid var(--%NS%border); - border-radius: 5px; -} - -.reset[_ngcontent-%COMP%] { - height: 34px; - margin-top: 4px; - padding: 0 14px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - font-weight: 500; - cursor: pointer; - transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease); -} - -.reset[_ngcontent-%COMP%]:hover { - background: var(--%NS%surface-3); -} - -.reset[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.spinner[_ngcontent-%COMP%] { - width: 18px; - height: 18px; - border: 2px solid var(--%NS%border-strong); - border-top-color: var(--%NS%accent); - border-radius: 50%; - animation: spin 0.8s linear infinite; -} - -@media (prefers-reduced-motion: reduce) { - .spinner[_ngcontent-%COMP%] { - animation: none; - border-top-color: var(--%NS%border-strong); - } -} -.intro[_ngcontent-%COMP%] { - margin: 0 0 12px; - color: var(--%NS%text-2); - font-size: 13px; - line-height: 1.5; -} - -.kinds[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 6px; - margin-bottom: 16px; -} - -.kind-chip[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - gap: 6px; - max-width: 100%; - height: 28px; - padding: 0 10px; - border: 1px solid var(--%NS%border); - border-radius: 99px; - background: var(--%NS%surface-2); - color: var(--%NS%text-2); - font: inherit; - font-size: 12px; - font-weight: 500; - cursor: pointer; - transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), color 0.15s var(--%NS%ease); -} - -.kind-chip[_ngcontent-%COMP%]:hover { - border-color: var(--%NS%border-strong); - background: var(--%NS%surface-3); - color: var(--%NS%text); -} - -.kind-chip[_ngcontent-%COMP%]:active { - transform: translateY(0.5px); -} - -.kind-chip.active[_ngcontent-%COMP%] { - border-color: var(--%NS%accent-line); - background: var(--%NS%accent-soft); - color: var(--%NS%text-strong); -} - -.kind-chip[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.chip-text[_ngcontent-%COMP%] { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.kind-chip[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] { - flex: none; - min-width: 18px; - padding: 0 5px; - border-radius: 99px; - background: var(--%NS%surface-3); - color: var(--%NS%text-2); - font-size: 11px; - line-height: 16px; - text-align: center; - font-variant-numeric: tabular-nums; -} - -.kind-chip.active[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] { - background: color-mix(in srgb, var(--%NS%accent) 22%, transparent); - color: var(--%NS%text-strong); -} - -.dot[_ngcontent-%COMP%] { - flex: none; - width: 8px; - height: 8px; - border-radius: 50%; -} - -.node-header[_ngcontent-%COMP%] { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 6px 8px; - min-width: 0; -} - -.kind-badge[_ngcontent-%COMP%] { - flex: none; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 10.5px; - line-height: 18px; - padding: 0 8px; - border-radius: 99px; - color: var(--%NS%bg); - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.06em; -} - -.node-label[_ngcontent-%COMP%] { - min-width: 0; - font-family: var(--%NS%font-mono); - font-size: 13px; - font-weight: 500; - color: var(--%NS%text-strong); - overflow-wrap: anywhere; -} - -.node-meta[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 2px 6px; - min-width: 0; - margin-top: 6px; - font-size: 12px; - color: var(--%NS%text-3); - font-variant-numeric: tabular-nums; -} - -.node-meta[_ngcontent-%COMP%] .file[_ngcontent-%COMP%] { - min-width: 0; - font-family: var(--%NS%font-mono); - font-size: 11.5px; - overflow-wrap: anywhere; -} - -.sep[_ngcontent-%COMP%] { - color: var(--%NS%border-strong); -} - -dl[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: max-content minmax(0, 1fr); - gap: 8px 16px; - margin: 0; - font-size: 13px; -} - -dt[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - padding-top: 2px; -} - -dd[_ngcontent-%COMP%] { - min-width: 0; - margin: 0; - color: var(--%NS%text); - font-variant-numeric: tabular-nums; - overflow-wrap: anywhere; -} - -pre[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); - font-size: 12.5px; - line-height: 1.55; - white-space: pre-wrap; - overflow-wrap: anywhere; - margin: 0; - color: var(--%NS%text); -} - -.nodes[_ngcontent-%COMP%] { - display: flex; - flex-direction: column; - gap: 8px; - list-style: none; - padding: 0; - margin: 0; - animation: enter 0.35s var(--%NS%ease) both; -} - -.node-card[_ngcontent-%COMP%] { - display: block; - width: 100%; - min-width: 0; - text-align: left; - font: inherit; - color: inherit; - background: var(--%NS%surface); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - padding: 12px 16px; - transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease); -} - -.node-card[_ngcontent-%COMP%]:hover { - background: var(--%NS%surface-2); - border-color: var(--%NS%border-strong); -} - -.picker[_ngcontent-%COMP%] { - display: flex; - align-items: center; - gap: 8px; - flex: 1 1 260px; - min-width: 0; -} - -.picker[_ngcontent-%COMP%] app-select[_ngcontent-%COMP%] { - flex: 1 1 auto; - min-width: 0; -} - -.label-key[_ngcontent-%COMP%] { - flex: none; - color: var(--%NS%text-2); - font-size: 12px; -} - -.showing[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - align-items: baseline; - gap: 4px 10px; - margin: 0 0 8px; - font-size: 12px; - color: var(--%NS%text-2); -} - -.showing-name[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-family: var(--%NS%font-mono); - font-size: 13px; - font-weight: 600; -} - -.mono[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); - overflow-wrap: anywhere; -} - -.source-note[_ngcontent-%COMP%] { - padding: 0 8px; - border: 1px solid var(--%NS%border-strong); - border-radius: 99px; - line-height: 18px; -} - -.fallback[_ngcontent-%COMP%] { - margin: 0 0 8px; - color: var(--%NS%warn); - font-size: 12px; -} - -.source-label[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - margin: 0 0 12px; -} - -.nodes[_ngcontent-%COMP%] > li[_ngcontent-%COMP%] { - display: block; - min-width: 0; - padding: 0; -} - -button.node-card[_ngcontent-%COMP%] { - cursor: pointer; -} - -.node-card[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.node-card.selected[_ngcontent-%COMP%] { - background: var(--%NS%accent-soft); - border-color: var(--%NS%accent-line); - box-shadow: inset 2px 0 0 var(--%NS%accent); -} - -.chevron[_ngcontent-%COMP%] { - flex: none; - width: 7px; - height: 7px; - margin-left: auto; - border-right: 1.5px solid var(--%NS%text-3); - border-bottom: 1.5px solid var(--%NS%text-3); - transform: translateY(-2px) rotate(45deg); - transition: transform 0.2s var(--%NS%ease), border-color 0.15s var(--%NS%ease); -} - -.node-card[_ngcontent-%COMP%]:hover .chevron[_ngcontent-%COMP%] { - border-color: var(--%NS%text); -} - -.node-card.selected[_ngcontent-%COMP%] .chevron[_ngcontent-%COMP%] { - border-color: var(--%NS%accent); - transform: translateY(2px) rotate(-135deg); -} - -.node-value[_ngcontent-%COMP%] { - display: block; - margin-top: 8px; - padding: 4px 8px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-family: var(--%NS%font-mono); - font-size: 12px; - color: var(--%NS%text-2); - background: var(--%NS%bg); - border: 1px solid var(--%NS%border); - border-radius: 6px; -} - -.node-card.selected[_ngcontent-%COMP%] .node-value[_ngcontent-%COMP%] { - background: color-mix(in srgb, var(--%NS%bg) 70%, transparent); -} - -.kind-badge.sm[_ngcontent-%COMP%] { - font-size: 10px; - line-height: 16px; - padding: 0 6px; -} - -.changed-badge[_ngcontent-%COMP%] { - flex: none; - font-size: 11px; - font-weight: 500; - line-height: 16px; - padding: 0 8px; - border: 1px solid; - border-radius: 99px; - font-variant-numeric: tabular-nums; -} - -.changed-badge[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); - background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); - color: var(--%NS%warn); -} - -.detail-panel[_ngcontent-%COMP%] { - margin-top: 8px; - padding: 16px; - background: var(--%NS%surface); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - box-shadow: var(--%NS%shadow); - animation: enter 0.25s var(--%NS%ease) both; -} - -.detail-panel[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] { - margin: 0 0 16px; - font-family: var(--%NS%font-mono); - font-size: 14px; - font-weight: 600; - color: var(--%NS%accent); - overflow-wrap: anywhere; -} - -.detail-panel[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - margin: 20px 0 8px; -} - -.detail-panel[_ngcontent-%COMP%] dd[_ngcontent-%COMP%] pre[_ngcontent-%COMP%] { - max-height: 240px; - overflow: auto; - padding: 8px 12px; - background: var(--%NS%surface-2); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); -} - -.detail-panel[_ngcontent-%COMP%] ul[_ngcontent-%COMP%] { - display: flex; - flex-direction: column; - gap: 2px; - list-style: none; - padding: 0; - margin: 0; - font-size: 13px; -} - -.detail-panel[_ngcontent-%COMP%] ul[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { - display: flex; - align-items: center; - gap: 8px; - min-width: 0; - min-height: 28px; - padding: 4px 8px; - color: var(--%NS%text-2); - border-radius: 6px; - transition: background-color 0.15s var(--%NS%ease); -} - -.detail-panel[_ngcontent-%COMP%] ul[_ngcontent-%COMP%] li[_ngcontent-%COMP%]:hover { - background: var(--%NS%surface-2); - color: var(--%NS%text); -} - -.rel-label[_ngcontent-%COMP%] { - min-width: 0; - font-family: var(--%NS%font-mono); - font-size: 12.5px; - overflow-wrap: anywhere; -} - -.history-summary[_ngcontent-%COMP%] { - margin: 0 0 8px; - font-size: 12px; - color: var(--%NS%text-2); - font-variant-numeric: tabular-nums; -} - -.history[_ngcontent-%COMP%] { - list-style: none; - padding: 4px; - margin: 0; - max-height: 320px; - overflow: auto; - background: var(--%NS%surface-2); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); -} - -.history[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { - display: block; - padding: 8px; - border-radius: 6px; - transition: background-color 0.15s var(--%NS%ease); -} - -.history[_ngcontent-%COMP%] li[_ngcontent-%COMP%] + li[_ngcontent-%COMP%] { - border-top: 1px solid var(--%NS%border); -} - -.history[_ngcontent-%COMP%] li[_ngcontent-%COMP%]:hover { - background: var(--%NS%surface-3); -} - -.history-meta[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 4px 8px; - align-items: center; - margin-bottom: 4px; - font-size: 11px; - color: var(--%NS%text-2); - font-variant-numeric: tabular-nums; -} - -.history-meta[_ngcontent-%COMP%] time[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); - color: var(--%NS%text); -} - -.source-tag[_ngcontent-%COMP%] { - line-height: 16px; - padding: 0 8px; - border-radius: 99px; - background: var(--%NS%surface-3); - border: 1px solid var(--%NS%border-strong); - color: var(--%NS%text); -} - -.source-write[_ngcontent-%COMP%] { - color: #93c5fd; - background: color-mix(in srgb, #60a5fa 12%, transparent); - border-color: color-mix(in srgb, #60a5fa 30%, transparent); -} - -.missed[_ngcontent-%COMP%] { - color: var(--%NS%warn); -} - -@media (max-width: 480px) { - .toolbar[_ngcontent-%COMP%] { - padding: 8px; - } - .toolbar[_ngcontent-%COMP%] input[_ngcontent-%COMP%], - .picker[_ngcontent-%COMP%] { - flex-basis: 100%; - } - .node-card[_ngcontent-%COMP%], - .detail-panel[_ngcontent-%COMP%] { - padding: 12px; - } - dl[_ngcontent-%COMP%] { - grid-template-columns: minmax(0, 1fr); - gap: 4px; - } - dd[_ngcontent-%COMP%] + dt[_ngcontent-%COMP%] { - margin-top: 8px; - } -}`]})},Bj=(e,t)=>t.node.injector.id,Vj=(e,t)=>t.id,Hj=(e,t)=>t.from+t.token+e,Uj=(e,t)=>t.token+e,Wj=(e,t)=>t.type,Gj=(e,t)=>t.token+t.file+t.line;function Kj(e,t){if(e&1){let e=W();V(0,`label`,12)(1,`input`,13),K(`change`,function(){O(e);let t=q(2);return k(t.componentsOnly.set(!t.componentsOnly()))}),H(),Y(2,` Components only `),H()}if(e&2){let e=q(2);j(),xg(`checked`,e.componentsOnly())}}function qj(e,t){if(e&1){let e=W();V(0,`button`,22),K(`click`,function(){let t=O(e).$implicit;return k(q(3).reveal(t.id))}),U(1,`span`,23),V(2,`span`,24),Y(3),H(),V(4,`span`,25),Y(5),H()()}if(e&2){let e=t.$implicit,n=q(3);j(),n_(`background`,n.tone(e.kind)),j(2),X(e.label),j(2),X(e.tokens)}}function Jj(e,t){if(e&1&&(V(0,`div`,14)(1,`span`,20),Y(2,`Provided by`),H(),F(3,qj,6,4,`button`,21,Vj),H()),e&2){let e=q(2);j(3),I(e.providedBy())}}function Yj(e,t){if(e&1){let e=W();V(0,`div`,15),Y(1),V(2,`button`,26),K(`click`,function(){return O(e),k(q(2).query.set(``))}),Y(3,`Clear search`),H()()}if(e&2){let e=q(2);j(),Z(` Nothing here matches “`,e.query().trim(),`”. `)}}function Xj(e,t){e&1&&Y(0,` None of them provide anything themselves. `)}function Zj(e,t){e&1&&Y(0,` Turn off “Components only” to see directives. `)}function Qj(e,t){e&1&&Y(0,` Try a different search. `)}function $j(e,t){if(e&1&&(V(0,`div`,1)(1,`p`,27),Y(2,`No injectors to show`),H(),V(3,`p`,28),N(4,Xj,1,0)(5,Zj,1,0)(6,Qj,1,0),H()()),e&2){let e=q(2);j(4),P(e.onlyProviding()?4:e.componentsOnly()&&e.view()===`element`?5:6)}}function eM(e,t){if(e&1){let e=W();V(0,`span`,38),K(`click`,function(t){O(e);let n=q().$implicit;return k(q(2).toggle(n.node.injector.id,t))}),ps(),V(1,`svg`,39),U(2,`path`,40),H()()}if(e&2){let e=q().$implicit;J(`open`,e.expanded)}}function tM(e,t){e&1&&U(0,`span`,31)}function nM(e,t){if(e&1&&(V(0,`span`,34),Y(1),H()),e&2){let e=q().$implicit;j(),X(e.node.injector.component)}}function rM(e,t){if(e&1&&(V(0,`span`,34),Y(1),H()),e&2){let e=q().$implicit;j(),X(e.node.injector.directives.join(`, `))}}function iM(e,t){if(e&1&&(V(0,`span`,36),ps(),V(1,`svg`,41),U(2,`path`,42),H(),Y(3),H()),e&2){let e=q().$implicit;M(`title`,e.node.dependencies.length+` injected`),j(3),Z(` `,e.node.dependencies.length,` `)}}function aM(e,t){if(e&1&&(V(0,`span`,37),ps(),V(1,`svg`,41),U(2,`path`,43),H(),Y(3),H()),e&2){let e=q().$implicit;M(`title`,e.node.injector.providerCount+` provided`),j(3),Z(` `,e.node.injector.providerCount,` `)}}function oM(e,t){if(e&1){let e=W();V(0,`div`,29),K(`click`,function(){let t=O(e).$implicit;return k(q(2).select(t.node.injector.id))})(`focus`,function(){let t=O(e).$implicit,n=q(2);return n.focusId.set(t.node.injector.id),k(n.highlight(t.node))})(`blur`,function(){return O(e),k(q(2).highlight(null))})(`mouseenter`,function(){let t=O(e).$implicit;return k(q(2).highlight(t.node))})(`mouseleave`,function(){return O(e),k(q(2).highlight(null))}),N(1,eM,3,2,`span`,30)(2,tM,1,0,`span`,31),V(3,`span`,32),Y(4),H(),V(5,`span`,33),Y(6),H(),N(7,nM,2,1,`span`,34)(8,rM,2,1,`span`,34),V(9,`span`,35),N(10,iM,4,2,`span`,36),N(11,aM,4,2,`span`,37),H()()}if(e&2){let e=t.$implicit,n=q(2);n_(`--%NS%depth`,e.depth),J(`selected`,n.selected()?.injector?.id===e.node.injector.id),M(`aria-level`,e.depth+1)(`aria-expanded`,e.hasChildren?e.expanded:null)(`aria-selected`,n.selected()?.injector?.id===e.node.injector.id)(`tabindex`,n.rovingId()===e.node.injector.id?0:-1)(`data-id`,e.node.injector.id),j(),P(e.hasChildren?1:2),j(2),n_(`--%NS%tone`,n.tone(n.kind(e.node))),M(`title`,n.kind(e.node)),j(),X(n.kind(e.node)[0].toUpperCase()),j(2),X(n.label(e.node)),j(),P(e.node.injector.component?7:e.node.injector.directives?.length?8:-1),j(3),P((e.node.dependencies?.length??0)>0?10:-1),j(),P(e.node.injector.providerCount>0?11:-1)}}function sM(e,t){if(e&1&&(V(0,`li`),Y(1),H()),e&2){let e=t.$implicit;J(`is-component`,e===q(2).injector.component),j(),X(e)}}function cM(e,t){if(e&1&&(V(0,`ul`,47),F(1,sM,2,3,`li`,54,lg),H()),e&2){let e=q();j(),I(e.injector.directives)}}function lM(e,t){if(e&1&&(V(0,`span`,55),U(1,`span`,23),Y(2,` Null injector `),V(3,`span`,57),Y(4,`throws NullInjectorError`),H()()),e&2){let e=q(4);j(),n_(`background`,e.tone(`null`))}}function uM(e,t){if(e&1&&(V(0,`span`,59),Y(1),H()),e&2){let e=q(2).$implicit;j(),X(e.providers)}}function dM(e,t){if(e&1){let e=W();V(0,`button`,58),K(`click`,function(){O(e);let t=q().$implicit;return k(q(3).reveal(t.id))}),U(1,`span`,23),V(2,`span`,24),Y(3),H(),N(4,uM,2,1,`span`,59),H()}if(e&2){let e=q().$implicit,t=q(3);j(),n_(`background`,t.tone(e.kind)),j(2),X(e.label),j(),P(e.providers?4:-1)}}function fM(e,t){if(e&1&&(V(0,`li`),N(1,lM,5,2,`span`,55)(2,dM,5,4,`button`,56),H()),e&2){let e=t.$implicit,n=t.$index,r=q(3);J(`current`,n===0),j(),P(e.id===r.nullId?1:2)}}function pM(e,t){if(e&1&&(V(0,`span`,65),Y(1),H()),e&2){let e=t.$implicit;j(),X(e)}}function mM(e,t){if(e&1&&(V(0,`span`),Y(1),H()),e&2){let e=q().$implicit;j(),Z(`for `,e.from)}}function hM(e,t){if(e&1){let e=W();V(0,`button`,69),K(`click`,function(){let t=O(e);return k(q(6).reveal(t))}),U(1,`span`,23),Y(2,` from `),V(3,`span`,24),Y(4),H()()}if(e&2){let e=t,n=q(6);j(),n_(`background`,n.tone(n.kindById(e))),j(3),X(n.labelById(e))}}function gM(e,t){e&1&&(V(0,`span`,68),Y(1,`not provided anywhere`),H())}function _M(e,t){if(e&1&&(V(0,`li`,62)(1,`div`,63)(2,`span`,64),Y(3),H(),F(4,pM,2,1,`span`,65,lg),H(),V(6,`div`,66),N(7,mM,2,1,`span`),N(8,hM,5,3,`button`,67)(9,gM,2,0,`span`,68),H()()),e&2){let e,n=t.$implicit,r=q(3);J(`hit`,q(2).matches(n.token)),j(3),X(n.token),j(),I(n.flags),j(3),P(r.injector.directives&&r.injector.directives.length>1?7:-1),j(),P((e=n.providedBy)?8:9,e)}}function vM(e,t){if(e&1&&(V(0,`ul`,60),F(1,_M,10,5,`li`,61,Hj),H()),e&2){let e=q(2);j(),I(e.dependencies)}}function yM(e,t){e&1&&(V(0,`p`,53),Y(1,`Nothing is injected through the constructor or inject().`),H())}function bM(e,t){if(e&1&&(V(0,`div`,48)(1,`h3`),Y(2,` Injected here `),V(3,`span`,6),Y(4),H()(),N(5,vM,3,0,`ul`,60)(6,yM,2,0,`p`,53),H()),e&2){let e=q();j(4),X(e.dependencies?.length??0),j(),P(e.dependencies?.length?5:6)}}function xM(e,t){e&1&&(V(0,`span`,65),Y(1,`viewProviders`),H())}function SM(e,t){e&1&&(V(0,`span`,65),Y(1,`multi`),H())}function CM(e,t){if(e&1&&(V(0,`div`,66),Y(1),H()),e&2){let e=q().$implicit;j(),Z(`via `,e.importPath.join(` › `))}}function wM(e,t){if(e&1&&(V(0,`li`,71)(1,`div`,63)(2,`span`,64),Y(3),H(),V(4,`span`,72),Y(5),H(),N(6,xM,2,0,`span`,65),N(7,SM,2,0,`span`,65),H(),N(8,CM,2,1,`div`,66),H()),e&2){let e=t.$implicit,n=q(4);J(`hit`,n.matches(e.token)),j(3),X(e.token),j(2),X(e.type===`unknown`?`provider`:`use`+n.capital(e.type)),j(),P(e.isViewProvider?6:-1),j(),P(e.multi?7:-1),j(),P(e.importPath?.length?8:-1)}}function TM(e,t){if(e&1&&(V(0,`ul`,52),F(1,wM,9,7,`li`,70,Uj),H()),e&2){let e=q();j(),I(e.providers)}}function EM(e,t){e&1&&Y(0,` No providers or viewProviders on this element. `)}function DM(e,t){e&1&&Y(0,` This injector has no providers of its own. `)}function OM(e,t){if(e&1&&(V(0,`p`,53),N(1,EM,1,0)(2,DM,1,0),H()),e&2){let e=q();j(),P(e.injector.type===`element`?1:2)}}function kM(e,t){if(e&1&&(V(0,`section`,19)(1,`header`,44)(2,`span`,45),Y(3),H(),V(4,`h2`,46),Y(5),H(),N(6,cM,3,0,`ul`,47),H(),V(7,`div`,48)(8,`h3`),Y(9,`Lookup path`),H(),V(10,`p`,49),Y(11,`Angular asks these injectors in order until one has the token.`),H(),V(12,`ol`,50),F(13,fM,3,3,`li`,51,Vj),H()(),N(15,bM,7,2,`div`,48),V(16,`div`,48)(17,`h3`),Y(18,` Provides `),V(19,`span`,6),Y(20),H()(),N(21,TM,3,0,`ul`,52)(22,OM,3,1,`p`,53),H()()),e&2){let e=t,n=q(2);j(2),n_(`--%NS%tone`,n.tone(n.kind(e))),j(),X(n.kind(e)),j(2),X(n.label(e)),j(),P(e.injector.directives?.length?6:-1),j(7),I(n.path()),j(2),P(e.injector.type===`element`?15:-1),j(5),X(e.providers.length),j(),P(e.providers.length?21:22)}}function AM(e,t){if(e&1){let e=W();V(0,`p`,2),Y(1,` Every component and directive gets an injector. When it asks for a token, Angular walks up this tree, then through the environment injectors, until something provides it. `),H(),V(2,`div`,3)(3,`div`,4)(4,`button`,5),K(`click`,function(){return O(e),k(q().setView(`element`))}),Y(5,` Elements `),V(6,`span`,6),Y(7),H()(),V(8,`button`,5),K(`click`,function(){return O(e),k(q().setView(`environment`))}),Y(9,` Environment `),V(10,`span`,6),Y(11),H()()(),V(12,`div`,7),ps(),V(13,`svg`,8),U(14,`circle`,9)(15,`path`,10),H(),ms(),V(16,`input`,11),K(`input`,function(t){return O(e),k(q().query.set(t.target.value))})(`keydown.escape`,function(){return O(e),k(q().query.set(``))}),H()(),N(17,Kj,3,1,`label`,12),V(18,`label`,12)(19,`input`,13),K(`change`,function(){O(e);let t=q();return k(t.onlyProviding.set(!t.onlyProviding()))}),H(),Y(20,` With providers `),H()(),N(21,Jj,5,0,`div`,14)(22,Yj,4,1,`div`,15),V(23,`div`,16),N(24,$j,7,1,`div`,1),V(25,`div`,17),K(`keydown`,function(t){return O(e),k(q().onTreeKey(t))}),F(26,oM,12,18,`div`,18,Bj),H(),N(28,kM,23,8,`section`,19),H()}if(e&2){let e,t=q();j(4),J(`active`,t.view()===`element`),M(`aria-pressed`,t.view()===`element`),j(3),X(t.elementCount()),j(),J(`active`,t.view()===`environment`),M(`aria-pressed`,t.view()===`environment`),j(3),X(t.environmentCount()),j(5),xg(`value`,t.query()),j(),P(t.view()===`element`?17:-1),j(2),xg(`checked`,t.onlyProviding()),j(2),P(t.providedBy().length?21:t.query().trim()&&!t.rows().length?22:-1),j(3),P(t.rows().length?-1:24),j(),xg(`hidden`,!t.rows().length),M(`aria-label`,t.view()===`element`?`Element injectors`:`Environment injectors`),j(),I(t.rows()),j(2),P((e=t.selected())?28:-1,e)}}function jM(e,t){e&1&&(V(0,`div`,0),U(1,`span`,73),V(2,`p`,27),Y(3,`Loading dependency injection data…`),H()())}function MM(e,t){e&1&&(V(0,`div`,1)(1,`p`,27),Y(2,`No DI data found`),H(),V(3,`p`,28),Y(4,` Open the app in a browser with the devtools connected to see its live injectors. No providers, injectables or inject() calls were found in the source either. `),H()())}function NM(e,t){if(e&1){let e=W();V(0,`div`,1)(1,`p`,27),Y(2),H(),V(3,`p`,28),Y(4,`Try part of a token name or a file path.`),H(),V(5,`button`,5),K(`click`,function(){return O(e),k(q(2).query.set(``))}),Y(6,`Clear filter`),H()()}if(e&2){let e=q(2);j(2),Z(`No providers match “`,e.query(),`”`)}}function PM(e,t){if(e&1&&(V(0,`span`,86),Y(1),H()),e&2){let e=q().$implicit;j(),Z(`providedIn: `,e.providedIn)}}function FM(e,t){if(e&1&&(V(0,`span`,88),Y(1),H()),e&2){let e=q().$implicit;j(),Z(`as `,e.source)}}function IM(e,t){if(e&1&&(V(0,`li`,83)(1,`div`,84)(2,`span`,85),Y(3),H(),N(4,PM,2,1,`span`,86),H(),V(5,`div`,87)(6,`span`,50),Y(7),H(),N(8,FM,2,1,`span`,88),H()()),e&2){let e=t.$implicit;j(3),X(e.token),j(),P(e.providedIn?4:-1),j(3),O_(``,e.file,`:`,e.line),j(),P(e.source!==`class`&&e.source!==`providers array`?8:-1)}}function LM(e,t){if(e&1&&(V(0,`section`,80)(1,`h2`),Y(2),V(3,`span`,81),Y(4),H()(),V(5,`ul`,82),F(6,IM,9,5,`li`,83,Gj),H()()),e&2){let e=t.$implicit;j(2),Z(` `,e.label,` `),j(2),X(e.items.length),j(2),I(e.items)}}function RM(e,t){if(e&1&&(V(0,`div`,79),F(1,LM,8,2,`section`,80,Wj),H()),e&2){let e=q(2);j(),I(e.groupedProviders())}}function zM(e,t){if(e&1){let e=W();V(0,`div`,3)(1,`div`,7),ps(),V(2,`svg`,8),U(3,`circle`,9)(4,`path`,10),H(),ms(),V(5,`input`,74),K(`input`,function(t){return O(e),k(q().query.set(t.target.value))})(`keydown.escape`,function(){return O(e),k(q().query.set(``))}),H()(),V(6,`span`,75),Y(7),H()(),V(8,`p`,76),ps(),V(9,`svg`,41),U(10,`circle`,77)(11,`path`,78),H(),ms(),V(12,`span`)(13,`strong`),Y(14,`DI from source scan (static analysis).`),H(),Y(15,` Connect the overlay on Angular 17+ to see the live injector tree. `),H()(),N(16,NM,7,1,`div`,1)(17,RM,3,0,`div`,79)}if(e&2){let e=q();j(5),xg(`value`,e.query()),j(2),O_(` `,e.sourceMatchCount(),` of `,e.sourceProviders().length,` `),j(9),P(e.groupedProviders().length===0?16:17)}}var BM=`inj-null`,VM={component:`var(--accent)`,directive:`#7cb4ff`,environment:`var(--ok)`,null:`var(--text-3)`};function HM(e){return e.injector.type===`element`?e.injector.component?`component`:`directive`:`environment`}function UM(e){return e.injector.type===`element`?`<${e.injector.name}>`:e.injector.name}function WM(e){return Array.isArray(e)}var GM=class e{rpc=$(null);nullId=BM;roots=A([]);environment=A([]);sourceProviders=A([]);loaded=A(!1);view=A(`element`);query=A(``);onlyProviding=A(!1);componentsOnly=A(!0);collapsed=A(new Set);selectedId=A(null);focusId=A(null);index=Q(()=>{let e=new Map,t=new Map,n=(r,i)=>{for(let a of r)e.set(a.injector.id,a),i&&t.set(a.injector.id,i),n(a.children,a.injector.id)};return n(this.roots(),null),n(this.environment(),null),{map:e,parents:t}});elementCount=Q(()=>this.count(this.roots()));environmentCount=Q(()=>this.count(this.environment()));visible=Q(()=>{let e=this.view()===`element`?this.roots():this.environment();this.view()===`element`&&this.componentsOnly()&&(e=this.prune(e,e=>!!e.injector.component)),this.onlyProviding()&&(e=this.prune(e,e=>e.providers.length>0));let t=this.normalizedQuery();return t&&(e=this.prune(e,e=>this.nodeMatches(e,t))),e});rows=Q(()=>{let e=[],t=this.collapsed(),n=!!this.normalizedQuery(),r=(i,a)=>{for(let o of i){let i=n||!t.has(o.injector.id);e.push({node:o,depth:a,hasChildren:o.children.length>0,expanded:i}),i&&r(o.children,a+1)}};return r(this.visible(),0),e});selected=Q(()=>{let e=this.selectedId();return(e?this.index().map.get(e):void 0)??this.rows()[0]?.node??null});rovingId=Q(()=>{let e=this.rows(),t=this.focusId()??this.selected()?.injector.id;return t&&e.some(e=>e.node.injector.id===t)?t:e[0]?.node.injector.id??null});path=Q(()=>{let e=this.selected();if(!e)return[];let{map:t,parents:n}=this.index(),r=e.injector.path??[];if(!r.length){r=[e.injector.id];let t=n.get(e.injector.id);for(;t;)r.push(t),t=n.get(t);r.push(BM)}return r.map(e=>{let n=t.get(e);return{id:e,label:n?UM(n):`Null injector`,kind:n?HM(n):`null`,providers:n?.providers.length??0}})});providedBy=Q(()=>{let e=this.normalizedQuery();if(!e)return[];let t=[];for(let n of this.index().map.values()){let r=n.providers.filter(t=>t.token.toLowerCase().includes(e));r.length&&t.push({id:n.injector.id,label:UM(n),kind:HM(n),tokens:r.map(e=>e.token).join(`, `)})}return t.slice(0,12)});groupedProviders=Q(()=>{let e=this.normalizedQuery(),t=e?this.sourceProviders().filter(t=>t.token.toLowerCase().includes(e)||t.file.toLowerCase().includes(e)):this.sourceProviders(),n=[{type:`root-provider`,label:`Root Providers (provide*)`,items:[]},{type:`injectable`,label:`Injectable Services`,items:[]},{type:`injection`,label:`inject() Calls`,items:[]},{type:`provider`,label:`Component Providers`,items:[]}];for(let e of t)n.find(t=>t.type===e.type)?.items.push(e);return n.filter(e=>e.items.length>0)});sourceMatchCount=Q(()=>this.groupedProviders().reduce((e,t)=>e+t.items.length,0));normalizedQuery=Q(()=>this.query().trim().toLowerCase());destroyRef=E(ws);stopTree=null;constructor(){dc(()=>{let e=this.rpc();e&&(this.loadInjectorTree(e),this.loadSourceProviders(e))}),this.destroyRef.onDestroy(()=>{this.stopTree?.(),this.highlight(null)})}label(e){return UM(e)}kind(e){return HM(e)}tone(e){return VM[e]??VM.null}kindById(e){let t=this.index().map.get(e);return t?HM(t):`null`}labelById(e){let t=this.index().map.get(e);return t?UM(t):`Null injector`}capital(e){return e.charAt(0).toUpperCase()+e.slice(1)}matches(e){let t=this.normalizedQuery();return!!t&&e.toLowerCase().includes(t)}setView(e){this.view()!==e&&(this.view.set(e),this.selectedId.set(null),this.focusId.set(null))}select(e){this.selectedId.set(e),this.focusId.set(e)}toggle(e,t){t?.stopPropagation(),!this.normalizedQuery()&&this.collapsed.update(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})}reveal(e){let t=this.index().map.get(e);if(!t)return;this.setView(t.injector.type===`element`?`element`:`environment`);let{parents:n}=this.index();this.collapsed.update(t=>{let r=new Set(t),i=n.get(e);for(;i;)r.delete(i),i=n.get(i);return r}),this.onlyProviding()&&t.providers.length===0&&this.onlyProviding.set(!1),t.injector.type===`element`&&!t.injector.component&&this.componentsOnly.set(!1),this.select(e),queueMicrotask(()=>this.focusRow(e,!1))}highlight(e){let t=this.rpc();if(!t)return;let n=e?.injector.type===`element`?e.injector.selector??null:null;t.scope(`ng-devtools`).rpc.call(`request-page-highlight`,n).catch(()=>{})}onTreeKey(e){let t=this.rows();if(!t.length)return;let n=this.rovingId(),r=t.findIndex(e=>e.node.injector.id===n),i=Math.max(r,0),a=t[i],o=-1;switch(e.key){case`ArrowDown`:o=Math.min(i+1,t.length-1);break;case`ArrowUp`:o=Math.max(i-1,0);break;case`Home`:o=0;break;case`End`:o=t.length-1;break;case`ArrowRight`:a.hasChildren&&!a.expanded?this.toggle(a.node.injector.id):a.hasChildren&&(o=i+1);break;case`ArrowLeft`:if(a.hasChildren&&a.expanded&&!this.normalizedQuery())this.toggle(a.node.injector.id);else{let e=this.index().parents.get(a.node.injector.id);o=t.findIndex(t=>t.node.injector.id===e)}break;case`Enter`:case` `:this.select(a.node.injector.id);break;default:return}if(e.preventDefault(),o>=0){let e=t[o].node.injector.id;this.focusId.set(e),this.selectedId.set(e),queueMicrotask(()=>this.focusRow(e,!0))}}focusRow(e,t){let n=document.querySelector(`.row[data-id="${CSS.escape(e)}"]`);n&&(t&&n.focus(),n.scrollIntoView({block:`nearest`}))}async loadInjectorTree(e){this.stopTree?.(),this.stopTree=null;let t=e.scope(`ng-devtools`),n;try{n=await t.rpc.sharedState(`injector-tree`)}catch{return}if(this.destroyRef.destroyed)return;let r=TT(),i=e=>{let t=e,n=(r?t?.pages?.[r]:void 0)??t;WM(n?.roots)&&this.roots.set(n.roots),WM(n?.environment)&&this.environment.set(n.environment)};i(n.value()),this.stopTree=n.on(`updated`,i)}async loadSourceProviders(e){let t=e.scope(`ng-devtools`);try{this.sourceProviders.set(await t.rpc.call(`get-providers`))}catch{this.sourceProviders.set([])}finally{this.loaded.set(!0)}}count(e){return e.reduce((e,t)=>e+1+this.count(t.children),0)}nodeMatches(e,t){let n=e.injector;return n.name.toLowerCase().includes(t)||!!n.component?.toLowerCase().includes(t)||!!n.directives?.some(e=>e.toLowerCase().includes(t))||e.providers.some(e=>e.token.toLowerCase().includes(t))||!!e.dependencies?.some(e=>e.token.toLowerCase().includes(t))}prune(e,t){let n=[];for(let r of e){let e=this.prune(r.children,t);(t(r)||e.length)&&n.push({...r,children:e})}return n}static ɵfac=function(t){return new(t||e)};static ɵcmp=Oh({type:e,selectors:[[`app-di-inspector`]],inputs:{rpc:[1,`rpc`]},decls:4,vars:1,consts:[[`role`,`status`,1,`state`],[1,`state`],[1,`intro`],[1,`toolbar`],[`role`,`group`,`aria-label`,`Injector tree`,1,`segmented`],[`type`,`button`,3,`click`],[1,`pill`],[1,`search`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`search-icon`],[`cx`,`11`,`cy`,`11`,`r`,`7`],[`d`,`m20 20-3.5-3.5`],[`type`,`search`,`placeholder`,`Find a token, component or injector…`,`aria-label`,`Find a token, component or injector`,`autocomplete`,`off`,`spellcheck`,`false`,3,`input`,`keydown.escape`,`value`],[1,`checkbox`],[`type`,`checkbox`,3,`change`,`checked`],[`role`,`status`,1,`where`],[`role`,`status`,1,`where`,`muted`],[1,`layout`],[`role`,`tree`,1,`tree`,3,`keydown`,`hidden`],[`role`,`treeitem`,1,`row`,3,`selected`,`--%NS%depth`],[`aria-labelledby`,`di-detail-title`,1,`detail`],[1,`where-label`],[`type`,`button`,1,`chip`],[`type`,`button`,1,`chip`,3,`click`],[`aria-hidden`,`true`,1,`dot`],[1,`mono`],[1,`chip-tokens`],[`type`,`button`,1,`link`,3,`click`],[1,`state-title`],[1,`state-hint`],[`role`,`treeitem`,1,`row`,3,`click`,`focus`,`blur`,`mouseenter`,`mouseleave`],[`aria-hidden`,`true`,1,`twisty`,3,`open`],[`aria-hidden`,`true`,1,`twisty-space`],[`aria-hidden`,`true`,1,`kind`],[1,`name`,`mono`],[1,`sub`],[1,`meta`],[1,`count`],[1,`count`,`provides`],[`aria-hidden`,`true`,1,`twisty`,3,`click`],[`viewBox`,`0 0 24 24`],[`d`,`m9 6 6 6-6 6`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`d`,`M12 5v14M5 12l7 7 7-7`],[`d`,`M21 8 12 3 3 8v8l9 5 9-5z`],[1,`detail-head`],[1,`badge`],[`id`,`di-detail-title`,1,`mono`],[`aria-label`,`Classes on this element`,1,`classes`],[1,`block`],[1,`hint`],[1,`path`],[3,`current`],[1,`providers`],[1,`empty-line`],[3,`is-component`],[1,`step`,`null`],[`type`,`button`,1,`step`],[1,`hint-inline`],[`type`,`button`,1,`step`,3,`click`],[1,`step-count`],[1,`deps`],[1,`dep`,3,`hit`],[1,`dep`],[1,`dep-main`],[1,`token`,`mono`],[1,`flag`],[1,`dep-meta`],[`type`,`button`,1,`from`],[1,`from`,`missing`],[`type`,`button`,1,`from`,3,`click`],[1,`provider`,3,`hit`],[1,`provider`],[1,`flag`,`kind-flag`],[`aria-hidden`,`true`,1,`spinner`],[`type`,`search`,`placeholder`,`Filter by token or file…`,`aria-label`,`Filter by token or file`,`autocomplete`,`off`,`spellcheck`,`false`,3,`input`,`keydown.escape`,`value`],[`aria-live`,`polite`,1,`total`],[1,`notice`],[`cx`,`12`,`cy`,`12`,`r`,`9`],[`d`,`M12 11v5M12 8h.01`],[1,`source-providers`],[1,`provider-group`],[1,`section-count`],[`role`,`list`,1,`provider-list`],[1,`provider-card`],[1,`provider-header`],[1,`token`],[1,`provided-in`],[1,`provider-meta`],[1,`as`]],template:function(e,t){e&1&&N(0,AM,29,16)(1,jM,4,0,`div`,0)(2,MM,5,0,`div`,1)(3,zM,18,4),e&2&&P(t.roots().length>0?0:t.loaded()?t.sourceProviders().length===0?2:3:1)},styles:[`[_nghost-%COMP%] { - display: block; - color: var(--%NS%text); - font-size: 13px; -} - -.mono[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); -} - -.intro[_ngcontent-%COMP%] { - max-width: 720px; - margin: 0 0 12px; - color: var(--%NS%text-2); - line-height: 1.5; -} - -.toolbar[_ngcontent-%COMP%] { - position: sticky; - top: 0; - z-index: 2; - display: flex; - flex-wrap: wrap; - gap: 8px 12px; - align-items: center; - margin: 0 0 12px; - padding: 8px; - background: color-mix(in srgb, var(--%NS%surface) 85%, transparent); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); -} - -.segmented[_ngcontent-%COMP%] { - display: inline-flex; - flex: none; - padding: 3px; - gap: 2px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%bg); -} - -.segmented[_ngcontent-%COMP%] button[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - gap: 6px; - height: 26px; - padding: 0 10px; - border: 0; - border-radius: 6px; - background: none; - color: var(--%NS%text-2); - font-size: 12px; - font-weight: 600; - cursor: pointer; - transition: background-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease); -} - -.segmented[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:hover { - color: var(--%NS%text); -} - -.segmented[_ngcontent-%COMP%] button.active[_ngcontent-%COMP%] { - background: var(--%NS%surface-3); - color: var(--%NS%text-strong); -} - -.segmented[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: -2px; -} - -.pill[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - min-width: 18px; - height: 16px; - padding: 0 5px; - justify-content: center; - border-radius: 99px; - background: var(--%NS%surface-3); - color: var(--%NS%text-2); - font-size: 10px; - font-weight: 600; - letter-spacing: 0; - font-variant-numeric: tabular-nums; -} - -.segmented[_ngcontent-%COMP%] .active[_ngcontent-%COMP%] .pill[_ngcontent-%COMP%] { - background: var(--%NS%accent-soft); - color: var(--%NS%accent); -} - -.search[_ngcontent-%COMP%] { - position: relative; - flex: 1 1 220px; - min-width: 0; -} - -.search-icon[_ngcontent-%COMP%] { - position: absolute; - top: 50%; - left: 12px; - width: 14px; - height: 14px; - transform: translateY(-50%); - fill: none; - stroke: var(--%NS%text-3); - stroke-width: 2.2; - stroke-linecap: round; - pointer-events: none; -} - -.search[_ngcontent-%COMP%]:focus-within .search-icon[_ngcontent-%COMP%] { - stroke: var(--%NS%accent); -} - -input[type=search][_ngcontent-%COMP%] { - width: 100%; - height: 34px; - padding: 0 12px 0 34px; - background: var(--%NS%bg); - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - color: var(--%NS%text); - font-size: 13px; - transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); -} - -input[type=search][_ngcontent-%COMP%]::placeholder { - color: var(--%NS%text-3); -} - -input[type=search][_ngcontent-%COMP%]:focus-visible { - outline: none; - border-color: var(--%NS%accent); - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -.checkbox[_ngcontent-%COMP%] { - display: flex; - align-items: center; - gap: 8px; - height: 34px; - color: var(--%NS%text-2); - white-space: nowrap; - cursor: pointer; -} - -.checkbox[_ngcontent-%COMP%]:hover { - color: var(--%NS%text); -} - -.checkbox[_ngcontent-%COMP%] input[_ngcontent-%COMP%] { - width: 15px; - height: 15px; - margin: 0; - accent-color: var(--%NS%accent); - cursor: pointer; -} - -.checkbox[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.total[_ngcontent-%COMP%] { - flex: none; - color: var(--%NS%text-2); - font-size: 12px; - white-space: nowrap; -} - -.where[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 6px; - margin: 0 0 12px; - padding: 8px 10px; - border: 1px solid var(--%NS%accent-line); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%accent-soft); - animation: enter 0.2s var(--%NS%ease) both; -} - -.where.muted[_ngcontent-%COMP%] { - border-color: var(--%NS%border); - background: var(--%NS%surface); - color: var(--%NS%text-2); -} - -.where-label[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - margin-right: 4px; - color: var(--%NS%accent); -} - -.chip[_ngcontent-%COMP%], -.from[_ngcontent-%COMP%], -.step[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - gap: 6px; - min-width: 0; - max-width: 100%; - height: 26px; - padding: 0 10px; - border: 1px solid var(--%NS%border-strong); - border-radius: 99px; - background: var(--%NS%surface); - color: var(--%NS%text); - font-size: 12px; - cursor: pointer; - transition: border-color 150ms var(--%NS%ease), background-color 150ms var(--%NS%ease); -} - -.chip[_ngcontent-%COMP%]:hover, -.from[_ngcontent-%COMP%]:hover, -.step[_ngcontent-%COMP%]:hover { - border-color: var(--%NS%accent-line); - background: var(--%NS%surface-2); -} - -.chip[_ngcontent-%COMP%]:focus-visible, -.from[_ngcontent-%COMP%]:focus-visible, -.step[_ngcontent-%COMP%]:focus-visible, -.link[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.chip-tokens[_ngcontent-%COMP%] { - color: var(--%NS%text-2); - overflow: hidden; - min-width: 0; - text-overflow: ellipsis; - white-space: nowrap; -} - -.link[_ngcontent-%COMP%] { - padding: 0; - border: 0; - background: none; - color: var(--%NS%accent); - font-size: 13px; - cursor: pointer; - text-decoration: underline; - text-underline-offset: 2px; -} - -.dot[_ngcontent-%COMP%] { - flex: none; - width: 7px; - height: 7px; - border-radius: 50%; -} - -.layout[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: minmax(0, 1fr); - gap: 12px; - align-items: start; -} - -@media (min-width: 880px) { - .layout[_ngcontent-%COMP%] { - grid-template-columns: minmax(0, 1fr) minmax(340px, 44%); - } - .detail[_ngcontent-%COMP%] { - position: sticky; - top: 64px; - max-height: calc(100vh - 150px); - overflow: auto; - } -} -.tree[_ngcontent-%COMP%] { - min-width: 0; - padding: 6px; - background: var(--%NS%surface); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - animation: enter 0.35s var(--%NS%ease) both; -} - -.row[_ngcontent-%COMP%] { - position: relative; - display: flex; - align-items: center; - gap: 6px; - min-height: 32px; - padding: 0 8px 0 calc(4px + var(--%NS%depth, 0) * 18px); - border-radius: var(--%NS%radius-sm); - cursor: pointer; - transition: background-color 120ms var(--%NS%ease); -} - -.row[_ngcontent-%COMP%]::before { - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: 14px; - width: calc(var(--%NS%depth, 0) * 18px); - background: repeating-linear-gradient(to right, var(--%NS%border) 0 1px, transparent 1px 18px); - pointer-events: none; -} - -.row[_ngcontent-%COMP%]:hover { - background: var(--%NS%surface-2); -} - -.row[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: -2px; -} - -.row.selected[_ngcontent-%COMP%] { - background: var(--%NS%accent-soft); - box-shadow: inset 2px 0 0 var(--%NS%accent); -} - -.twisty[_ngcontent-%COMP%], -.twisty-space[_ngcontent-%COMP%] { - flex: none; - width: 20px; - height: 20px; -} - -.twisty[_ngcontent-%COMP%] { - display: grid; - place-items: center; - padding: 0; - border: 0; - border-radius: 4px; - background: none; - color: var(--%NS%text-3); - cursor: pointer; -} - -.twisty[_ngcontent-%COMP%]:hover { - color: var(--%NS%text); - background: var(--%NS%surface-3); -} - -.twisty[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] { - width: 14px; - height: 14px; - fill: none; - stroke: currentColor; - stroke-width: 2.2; - stroke-linecap: round; - stroke-linejoin: round; - transition: transform 150ms var(--%NS%ease); -} - -.twisty.open[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] { - transform: rotate(90deg); -} - -.kind[_ngcontent-%COMP%] { - flex: none; - display: grid; - place-items: center; - width: 18px; - height: 18px; - border-radius: 5px; - background: color-mix(in srgb, var(--%NS%tone) 16%, transparent); - color: var(--%NS%tone); - font-size: 10px; - font-weight: 700; -} - -.name[_ngcontent-%COMP%] { - min-width: 0; - color: var(--%NS%text); - font-size: 12px; - overflow: hidden; - min-width: 0; - text-overflow: ellipsis; - white-space: nowrap; -} - -.row.selected[_ngcontent-%COMP%] .name[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-weight: 600; -} - -.sub[_ngcontent-%COMP%] { - flex: 0 1 auto; - min-width: 0; - color: var(--%NS%text-3); - font-size: 12px; - overflow: hidden; - min-width: 0; - text-overflow: ellipsis; - white-space: nowrap; -} - -.meta[_ngcontent-%COMP%] { - display: inline-flex; - flex: none; - gap: 4px; - margin-left: auto; - padding-left: 8px; -} - -.count[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - gap: 3px; - height: 20px; - padding: 0 7px; - border-radius: 99px; - background: var(--%NS%surface-3); - color: var(--%NS%text-2); - font-size: 11px; -} - -.count.provides[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); - background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); - color: var(--%NS%ok); -} - -.count[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] { - width: 11px; - height: 11px; - fill: none; - stroke: currentColor; - stroke-width: 2.2; - stroke-linecap: round; - stroke-linejoin: round; -} - -.detail[_ngcontent-%COMP%] { - min-width: 0; - background: var(--%NS%surface); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - animation: enter 0.35s var(--%NS%ease) both; -} - -.detail-head[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 8px 10px; - padding: 14px 16px; - border-bottom: 1px solid var(--%NS%border); -} - -.detail-head[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] { - flex: 1 1 auto; - min-width: 0; - margin: 0; - color: var(--%NS%text-strong); - font-size: 15px; - font-weight: 600; - overflow-wrap: anywhere; -} - -.badge[_ngcontent-%COMP%] { - padding: 2px 8px; - border-radius: 99px; - background: color-mix(in srgb, var(--%NS%tone) 14%, transparent); - color: var(--%NS%tone); - font-size: 10px; - font-weight: 700; - letter-spacing: 0.06em; - text-transform: uppercase; -} - -.classes[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 4px; - width: 100%; - margin: 0; - padding: 0; - list-style: none; -} - -.classes[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { - padding: 1px 8px; - border: 1px solid var(--%NS%border-strong); - border-radius: 6px; - color: var(--%NS%text-2); - font-family: var(--%NS%font-mono); - font-size: 11px; -} - -.classes[_ngcontent-%COMP%] li.is-component[_ngcontent-%COMP%] { - border-color: var(--%NS%accent-line); - color: var(--%NS%accent); -} - -.block[_ngcontent-%COMP%] { - padding: 14px 16px; - border-bottom: 1px solid var(--%NS%border); -} - -.block[_ngcontent-%COMP%]:last-child { - border-bottom: 0; -} - -h3[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - display: flex; - align-items: center; - gap: 6px; - margin: 0 0 8px; -} - -.hint[_ngcontent-%COMP%] { - margin: -4px 0 10px; - color: var(--%NS%text-3); - font-size: 12px; -} - -.path[_ngcontent-%COMP%] { - position: relative; - display: grid; - gap: 6px; - margin: 0; - padding: 0 0 0 18px; - list-style: none; -} - -.path[_ngcontent-%COMP%]::before { - content: ""; - position: absolute; - top: 13px; - bottom: 13px; - left: 5px; - width: 1px; - background: var(--%NS%border-strong); -} - -.path[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { - position: relative; - min-width: 0; -} - -.path[_ngcontent-%COMP%] li[_ngcontent-%COMP%]::before { - content: ""; - position: absolute; - top: 12px; - left: -16px; - width: 9px; - height: 1px; - background: var(--%NS%border-strong); -} - -.path[_ngcontent-%COMP%] li.current[_ngcontent-%COMP%] .step[_ngcontent-%COMP%] { - border-color: var(--%NS%accent); - background: var(--%NS%accent-soft); -} - -.step.null[_ngcontent-%COMP%] { - cursor: default; - color: var(--%NS%text-2); -} - -.step.null[_ngcontent-%COMP%]:hover { - border-color: var(--%NS%border-strong); - background: var(--%NS%surface); -} - -.hint-inline[_ngcontent-%COMP%] { - color: var(--%NS%text-3); -} - -.step-count[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; -} - -.deps[_ngcontent-%COMP%], -.providers[_ngcontent-%COMP%] { - display: grid; - gap: 6px; - margin: 0; - padding: 0; - list-style: none; -} - -.dep[_ngcontent-%COMP%], -.provider[_ngcontent-%COMP%] { - min-width: 0; - padding: 8px 10px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%bg); -} - -.dep.hit[_ngcontent-%COMP%], -.provider.hit[_ngcontent-%COMP%] { - border-color: var(--%NS%accent-line); - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -.dep-main[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 6px; -} - -.token[_ngcontent-%COMP%] { - min-width: 0; - color: var(--%NS%text-strong); - font-size: 12px; - font-weight: 600; - overflow-wrap: anywhere; -} - -.flag[_ngcontent-%COMP%] { - padding: 0 6px; - border: 1px solid var(--%NS%border-strong); - border-radius: 5px; - color: var(--%NS%text-2); - font-family: var(--%NS%font-mono); - font-size: 10px; - line-height: 16px; -} - -.kind-flag[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent); - background: color-mix(in srgb, var(--%NS%accent) 12%, transparent); - color: var(--%NS%accent); -} - -.dep-meta[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 6px 10px; - margin-top: 6px; - color: var(--%NS%text-3); - font-size: 12px; - overflow-wrap: anywhere; -} - -.from[_ngcontent-%COMP%] { - height: 22px; - padding: 0 8px; - color: var(--%NS%text-2); -} - -.from[_ngcontent-%COMP%] .mono[_ngcontent-%COMP%] { - color: var(--%NS%text); -} - -.from.missing[_ngcontent-%COMP%] { - cursor: default; - border-color: color-mix(in srgb, var(--%NS%warn) 40%, transparent); - background: none; - color: var(--%NS%warn); -} - -.empty-line[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-2); -} - -.state[_ngcontent-%COMP%] { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; - padding: 40px 16px; - text-align: center; - background: var(--%NS%surface); - border: 1px dashed var(--%NS%border-strong); - border-radius: var(--%NS%radius); - animation: enter 0.35s var(--%NS%ease) both; -} - -.state.compact[_ngcontent-%COMP%] { - padding: 24px 12px; - border: 0; -} - -.state-title[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-strong); - font-size: 14px; - font-weight: 600; -} - -.state-hint[_ngcontent-%COMP%] { - max-width: 440px; - margin: 0; - color: var(--%NS%text-2); - line-height: 1.5; -} - -.spinner[_ngcontent-%COMP%] { - width: 20px; - height: 20px; - border: 2px solid var(--%NS%border-strong); - border-top-color: var(--%NS%accent); - border-radius: 50%; - animation: spin 0.8s linear infinite; -} - -@media (prefers-reduced-motion: reduce) { - .spinner[_ngcontent-%COMP%] { - animation: none; - } -} -button[_ngcontent-%COMP%] { - font: inherit; -} - -.state[_ngcontent-%COMP%] button[_ngcontent-%COMP%], -.provider-group[_ngcontent-%COMP%] button[_ngcontent-%COMP%] { - height: 34px; - padding: 0 14px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - color: var(--%NS%text); - cursor: pointer; -} - -.state-title[_ngcontent-%COMP%] + .state-hint[_ngcontent-%COMP%] + button[_ngcontent-%COMP%] { - margin-top: 8px; -} - -.notice[_ngcontent-%COMP%] { - display: flex; - align-items: flex-start; - gap: 8px; - margin: 0 0 16px; - padding: 12px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface); - color: var(--%NS%text-2); - font-size: 13px; - line-height: 1.5; -} - -.notice[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] { - color: var(--%NS%text); - font-weight: 600; -} - -.notice[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] { - flex: none; - width: 16px; - height: 16px; - margin-top: 2px; - fill: none; - stroke: var(--%NS%accent); - stroke-width: 2; - stroke-linecap: round; -} - -.source-providers[_ngcontent-%COMP%] { - display: flex; - flex-direction: column; - gap: 24px; - animation: enter 0.35s var(--%NS%ease) both; -} - -.provider-group[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - display: flex; - align-items: center; - gap: 8px; - margin: 0 0 8px; -} - -.section-count[_ngcontent-%COMP%] { - padding: 0 6px; - border-radius: 99px; - background: var(--%NS%surface-3); - color: var(--%NS%text-2); - font-size: 10px; - letter-spacing: 0; - line-height: 16px; - font-variant-numeric: tabular-nums; -} - -.provider-list[_ngcontent-%COMP%] { - list-style: none; - margin: 0; - padding: 0; - display: flex; - flex-direction: column; - gap: 6px; -} - -.provider-card[_ngcontent-%COMP%] { - min-width: 0; - background: var(--%NS%surface); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - padding: 8px 12px; - transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease); -} - -.provider-card[_ngcontent-%COMP%]:hover { - background: var(--%NS%surface-2); - border-color: var(--%NS%border-strong); -} - -.provider-header[_ngcontent-%COMP%] { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 4px 8px; -} - -.provider-header[_ngcontent-%COMP%] .token[_ngcontent-%COMP%] { - font-size: 13px; - font-weight: 600; -} - -.provided-in[_ngcontent-%COMP%] { - font-size: 11px; - padding: 1px 8px; - border-radius: 99px; - border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); - background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); - color: var(--%NS%ok); - border-width: 1px; - border-style: solid; -} - -.provider-meta[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 0 8px; - margin-top: 4px; - font-family: var(--%NS%font-mono); - font-size: 11px; - color: var(--%NS%text-3); -} - -.provider-meta[_ngcontent-%COMP%] .path[_ngcontent-%COMP%] { - min-width: 0; - overflow-wrap: anywhere; -} - -.provider-meta[_ngcontent-%COMP%] .as[_ngcontent-%COMP%] { - color: var(--%NS%text-2); -}`]})},KM=`@type`;function qM(e){return!!e&&typeof e==`object`&&!Array.isArray(e)&&KM in e}function JM(e){return/^[A-Za-z_$][\w$]*$/.test(e)?e:JSON.stringify(e)}function YM(e,t=``){if(e===null)return`null`;if(typeof e==`string`)return JSON.stringify(e);if(typeof e!=`object`)return String(e);let n=t+` `;if(Array.isArray(e))return e.length?`[\n${e.map(e=>n+YM(e,n)).join(`, -`)}\n${t}]`:`[]`;if(qM(e)){let r=e;switch(r[KM]){case`undefined`:return`undefined`;case`Date`:return`Date(${r.value})`;case`bigint`:return`${r.value}n`;case`symbol`:return`Symbol(${r.value})`;case`function`:return`ƒ ${r.name}()`;case`Error`:return`${r.name??`Error`}: ${r.message}`;case`Element`:return`<${r.value}>`;case`Map`:{let e=r.entries??[];if(!e.length)return`Map(${r.size}) {}`;let i=e.map(([e,t])=>`${n}${YM(e,n)} => ${YM(t,n)}`);return`Map(${r.size}) {\n${i.join(`, -`)}\n${t}}`}case`Set`:{let e=r.values??[];return e.length?`Set(${r.size}) {\n${e.map(e=>n+YM(e,n)).join(`, -`)}\n${t}}`:`Set(${r.size}) {}`}default:return String(r.value??r[KM])}}let r=Object.entries(e);return r.length?`{\n${r.map(([e,t])=>`${n}${JM(e)}: ${YM(t,n)}`).join(`, -`)}\n${t}}`:`{}`}function XM(e,t=120){let n=YM(e).replace(/\s*\n\s*/g,` `);return n.length>t?`${n.slice(0,t-1)}…`:n}var ZM=[`stateTree`],QM=[`latestButton`],$M=(e,t)=>t.id,eN=(e,t)=>t.seq,tN=(e,t)=>t.key,nN=(e,t)=>t.name,rN=(e,t)=>t.path,iN=(e,t)=>t.kind,aN=(e,t)=>t.name+t.file+t.line;function oN(e,t){if(e&1){let e=W();R(0,`span`,18),Y(1,`Page`),z(),R(2,`app-select`,19),G(`valueChange`,function(t){return O(e),k(q().selectPage(t))}),z()}if(e&2){let e=q();j(2),L(`options`,e.pageOptions())(`value`,e.page()?.pageId??null)}}function sN(e,t){if(e&1&&(R(0,`span`,9),Y(1),z()),e&2){let e=q();j(),X(e.liveStores().length)}}function cN(e,t){if(e&1){let e=W();R(0,`div`,10)(1,`p`,20),Y(2,`Could not load the live store state.`),z(),R(3,`p`,21),Y(4,`Check that the dev server with ng-devtools is still running.`),z(),R(5,`button`,22),G(`click`,function(){return O(e),k(q().retry())}),Y(6,`Retry`),z()()}}function lN(e,t){e&1&&(R(0,`div`,11)(1,`p`,20),Y(2,`No page is reporting NgRx state yet.`),z(),R(3,`p`,21),Y(4,` Open the app in a browser. Stores show up here as soon as the page creates them. `),z()())}function uN(e,t){e&1&&(R(0,`p`,20),Y(1,`No signal store instance on this page yet.`),z(),R(2,`p`,21),Y(3,` A `),R(4,`code`),Y(5,`signalStore`),z(),Y(6,` is created the first time something injects it. Navigate to a page that uses the store and it appears here. `),z())}function dN(e,t){e&1&&(R(0,`p`,20),Y(1,`The @ngrx/store Store was not found on this page.`),z(),R(2,`p`,21),Y(3,` Check that `),R(4,`code`),Y(5,`provideStore()`),z(),Y(6,` or `),R(7,`code`),Y(8,`StoreModule.forRoot()`),z(),Y(9,` is part of the providers of the running app. `),z())}function fN(e,t){e&1&&(R(0,`p`,20),Y(1,`This page has no NgRx store.`),z(),R(2,`p`,21),Y(3,` Stores from `),R(4,`code`),Y(5,`@ngrx/signals`),z(),Y(6,` (`),R(7,`code`),Y(8,`signalStore`),z(),Y(9,`, `),R(10,`code`),Y(11,`signalState`),z(),Y(12,`) and `),R(13,`code`),Y(14,`@ngrx/store`),z(),Y(15,` are listed here once the app creates them. `),z())}function pN(e,t){if(e&1&&(R(0,`div`,11),N(1,uN,7,0)(2,dN,10,0)(3,fN,16,0),z()),e&2){let e=q();j(),P(e.usesSignals()?1:e.usesClassic()?2:3)}}function mN(e,t){if(e&1){let e=W();R(0,`li`)(1,`button`,26),G(`click`,function(){let t=O(e).$implicit;return k(q(2).selectStore(t.id))}),R(2,`span`,27),B(3,`span`,28),R(4,`span`,29),Y(5),z()(),R(6,`span`,30),Y(7),z()()()}if(e&2){let e=t.$implicit,n=q(2);j(),J(`selected`,e.id===n.store()?.id),M(`aria-pressed`,e.id===n.store()?.id),j(2),n_(`background`,n.kindColor(e.kind)),j(2),X(e.label),j(2),A_(` `,n.kindLabel(e.kind),` · `,e.scope,` · `,n.changeCount(e.id),` `,n.changeCount(e.id)===1?`change`:`changes`,` `)}}function hN(e,t){e&1&&(R(0,`li`,24),Y(1,`No stores match this filter.`),z())}function gN(e,t){if(e&1&&(R(0,`span`,34),Y(1),z()),e&2){let e=t;L(`title`,e),j(),X(e)}}function _N(e,t){if(e&1&&(R(0,`span`,33),Y(1),z()),e&2){let e=q();j(),X(e.classic.devtools?`Store DevTools on`:`read-only`)}}function vN(e,t){if(e&1&&(R(0,`code`),Y(1),z(),Y(2)),e&2){let e=t.$implicit,n=t.$index,r=t.$count;j(),X(e),j(),Z(``,n===r-1?``:`, `,` `)}}function yN(e,t){if(e&1&&(R(0,`p`,35),Y(1,` Referenced by `),F(2,vN,3,2,null,null,lg),z()),e&2){let e=q();j(2),I(e.signal.references)}}function bN(e,t){if(e&1&&(R(0,`p`,48),Y(1),z()),e&2){let e=q(4);j(),X(e.restoreOff)}}function xN(e,t){if(e&1){let e=W();R(0,`div`,36)(1,`p`)(2,`strong`),Y(3,`Viewing a past state.`),z(),Y(4,` New actions are logged but do not change the state until you go back to the latest state. `),z(),R(5,`button`,47,1),G(`click`,function(){return O(e),k(q(3).backToLatest())}),Y(7,` Back to latest `),z(),N(8,bN,2,1,`p`,48),z()}if(e&2){let e=q(3);j(5),L(`disabled`,e.busy()||!e.canRestore()),M(`aria-describedby`,e.canRestore()?null:`store-latest-off`),j(3),P(e.canRestore()?-1:8)}}function SN(e,t){if(e&1&&(R(0,`dt`),Y(1),z(),R(2,`dd`)(3,`code`,54),Y(4),z()()),e&2){let e=t.$implicit;j(),X(e.key),j(2),L(`title`,e.full),j(),X(e.value)}}function CN(e,t){if(e&1&&(R(0,`dl`,50),F(1,SN,5,3,null,null,tN),z()),e&2){let e=q(4);j(),I(e.computedEntries())}}function wN(e,t){e&1&&(R(0,`p`,51),Y(1,`No computed signals.`),z())}function TN(e,t){e&1&&(R(0,`span`,56),Y(1,`rxMethod`),z())}function EN(e,t){if(e&1&&(R(0,`li`,55),Y(1),N(2,TN,2,0,`span`,56),R(3,`span`,57),Y(4),z()()),e&2){let e=t.$implicit;j(),Z(` `,e.name,` `),j(),P(e.rx?2:-1),j(2),O_(``,e.calls,` `,e.calls===1?`call`:`calls`)}}function DN(e,t){if(e&1&&(R(0,`ul`,53),F(1,EN,5,4,`li`,55,nN),z()),e&2){let e=q();j(),I(e.methods)}}function ON(e,t){e&1&&(R(0,`p`,51),Y(1,`No methods.`),z())}function kN(e,t){if(e&1&&(R(0,`section`,41)(1,`h4`,49),Y(2,`Computed`),z(),N(3,CN,3,0,`dl`,50)(4,wN,2,0,`p`,51),R(5,`h4`,52),Y(6,`Methods`),z(),N(7,DN,3,0,`ul`,53)(8,ON,2,0,`p`,51),z()),e&2){let e=q(3);j(3),P(e.computedEntries().length?3:4),j(4),P(t.methods.length?7:8)}}function AN(e,t){if(e&1){let e=W();R(0,`li`)(1,`button`,58),G(`click`,function(){let t=O(e).$implicit;return k(q(3).selectEntry(t.seq))}),R(2,`span`,59),Y(3),z(),R(4,`span`,60),Y(5),z(),R(6,`span`,61),Y(7),z()()()}if(e&2){let e=t.$implicit,n=q(3);j(),J(`selected`,e.seq===n.selectedSeq()),M(`aria-pressed`,e.seq===n.selectedSeq()),j(2),Z(`#`,e.seq),j(),L(`title`,e.type),j(),X(e.type),j(2),O_(``,e.diff.length===0?`no change`:e.diff.length+(e.diff.length===1?` change`:` changes`),` · `,n.formatTime(e.timestamp))}}function jN(e,t){e&1&&Y(0,` No entries match this filter. `)}function MN(e,t){e&1&&Y(0,` No actions dispatched since the page connected. `)}function NN(e,t){e&1&&Y(0,` No state changes yet. Method calls and patchState writes that change the state are recorded here. `)}function PN(e,t){if(e&1&&(R(0,`li`,24),N(1,jN,1,0)(2,MN,1,0)(3,NN,1,0),z()),e&2){let e=q(),t=q(2);j(),P(t.filter()?1:e.classic?2:3)}}function FN(e,t){if(e&1&&(R(0,`dt`),Y(1,`Action`),z(),R(2,`dd`)(3,`pre`,66),Y(4),z()()),e&2){let e=q(),t=q(3);j(4),X(t.prettyText(e.action))}}function IN(e,t){if(e&1&&(R(0,`dt`),Y(1,`Arguments`),z(),R(2,`dd`)(3,`pre`,66),Y(4),z()()),e&2){let e=q(),t=q(3);j(4),X(t.prettyText(e.args))}}function LN(e,t){if(e&1&&(R(0,`code`,71),Y(1),z()),e&2){let e=q().$implicit,t=q(5);j(),X(t.shortText(e.before))}}function RN(e,t){e&1&&(R(0,`span`,73),Y(1,`→`),z(),R(2,`span`,74),Y(3,`became`),z())}function zN(e,t){if(e&1&&(R(0,`code`,72),Y(1),z()),e&2){let e=q().$implicit,t=q(5);j(),X(t.shortText(e.after))}}function BN(e,t){if(e&1&&(R(0,`li`)(1,`span`,68),Y(2),z(),R(3,`code`,69),Y(4),z(),R(5,`span`,70),N(6,LN,2,1,`code`,71),N(7,RN,4,0),N(8,zN,2,1,`code`,72),z()()),e&2){let e=t.$implicit,n=q(5);r_(`diff-row `+e.op),j(2),X(n.opLabel(e.op)),j(2),X(e.path),j(2),P(e.op===`add`?-1:6),j(),P(e.op===`change`?7:-1),j(),P(e.op===`remove`?-1:8)}}function VN(e,t){if(e&1&&(R(0,`ul`,64),F(1,BN,9,7,`li`,67,rN),z()),e&2){let e=q();j(),I(e.diff)}}function HN(e,t){e&1&&(R(0,`p`,51),Y(1,`The state did not change.`),z())}function UN(e,t){e&1&&Y(0),e&2&&Z(` Store DevTools jumps the app state to the state right after action #`,q(3).seq,`. Until you go back to the latest state, new actions are logged but do not change the state. `)}function WN(e,t){if(e&1&&Y(0),e&2){let e=q(3);O_(` This sets every state key of `,q().label,` back to its value right after change #`,e.seq,`. Components that read the store update at once, and a new "Restore" entry is added to the log. `)}}function GN(e,t){if(e&1){let e=W();R(0,`div`,75)(1,`p`,76),N(2,UN,1,1)(3,WN,1,2),z(),R(4,`div`,77)(5,`button`,47),G(`click`,function(){O(e);let t=q(2);return k(q(3).restore(t.seq,t.source===`store`))}),Y(6,` Restore `),z(),R(7,`button`,22),G(`click`,function(){return O(e),k(q(5).confirmSeq.set(null))}),Y(8,` Cancel `),z()()()}if(e&2){let e=q(2),t=q(3);j(2),P(e.source===`store`?2:3),j(3),L(`disabled`,t.busy())}}function KN(e,t){if(e&1&&(R(0,`p`,79),Y(1),z()),e&2){let e=q(6);j(),X(e.restoreOff)}}function qN(e,t){if(e&1){let e=W();R(0,`button`,78),G(`click`,function(){O(e);let t=q(2);return k(q(3).confirmSeq.set(t.seq))}),Y(1,` Restore this state `),z(),N(2,KN,2,1,`p`,79)}if(e&2){let e=q(5);L(`disabled`,!e.canRestore()),M(`aria-describedby`,e.canRestore()?null:`store-writes-off`),j(2),P(e.canRestore()?-1:2)}}function JN(e,t){if(e&1&&N(0,GN,9,2,`div`,75)(1,qN,3,3),e&2){let e=q();P(q(3).confirmSeq()===e.seq?0:1)}}function YN(e,t){e&1&&(R(0,`p`,65),Y(1,` Time travel for @ngrx/store needs `),R(2,`code`),Y(3,`provideStoreDevtools()`),z(),Y(4,`. Without it this log is read-only. `),z())}function XN(e,t){if(e&1&&(R(0,`section`,46)(1,`h5`,62),Y(2),z(),R(3,`dl`,50)(4,`dt`),Y(5,`Time`),z(),R(6,`dd`),Y(7),z(),N(8,FN,5,1),N(9,IN,5,1),z(),R(10,`h6`,63),Y(11,`State diff`),z(),N(12,VN,3,0,`ul`,64)(13,HN,2,0,`p`,51),N(14,JN,2,1)(15,YN,5,0,`p`,65),z()),e&2){let e=t,n=q(3);j(2),O_(`#`,e.seq,` `,e.type),j(5),X(n.formatTime(e.timestamp)),j(),P(e.action===void 0?-1:8),j(),P(e.args?.length?9:-1),j(3),P(e.diff.length?12:13),j(2),P(e.restorable?14:e.source===`store`?15:-1)}}function ZN(e,t){if(e&1&&(R(0,`div`,25)(1,`div`,31)(2,`h3`),Y(3),z(),R(4,`div`,32)(5,`span`,33),Y(6),z(),R(7,`span`,33),Y(8),z(),N(9,gN,2,2,`span`,34),N(10,_N,2,1,`span`,33),z(),N(11,yN,4,0,`p`,35),z(),N(12,xN,9,3,`div`,36),R(13,`div`,37)(14,`section`,38)(15,`h4`,39),Y(16,`State`),z(),R(17,`pre`,40,0),Y(19),z()(),N(20,kN,9,2,`section`,41),z(),R(21,`section`,42)(22,`h4`,43),Y(23),R(24,`span`,9),Y(25),z()(),R(26,`div`,44)(27,`ul`,45),F(28,AN,8,8,`li`,null,eN,!1,PN,4,1,`li`,24),z(),N(31,XN,16,7,`section`,46),z()()()),e&2){let e,n,r,i=t,a=q(2);j(3),X(i.label),j(3),X(a.kindLabel(i.kind)),j(2),Z(`scope: `,i.scope),j(),P((e=i.signal?.declaredIn)?9:-1,e),j(),P(i.classic?10:-1),j(),P(i.signal?.references?.length?11:-1),j(),P(i.classic?.paused?12:-1),j(7),X(a.stateText()),j(),P((n=i.signal)?20:-1,n),j(3),Z(` `,i.classic?`Action log`:`Change log`,` `),j(2),X(a.storeLog().length),j(2),M(`aria-label`,i.classic?`Actions`:`Changes`),j(),I(a.storeLog()),j(3),P((r=a.entry())?31:-1,r)}}function QN(e,t){if(e&1&&(R(0,`div`,12)(1,`ul`,23),F(2,mN,8,10,`li`,null,$M,!1,hN,2,0,`li`,24),z(),N(5,ZN,32,14,`div`,25),z()),e&2){let e,t=q();j(2),I(t.filteredStores()),j(3),P((e=t.store())?5:-1,e)}}function $N(e,t){if(e&1&&(R(0,`span`,9),Y(1),z()),e&2){let e=q();j(),X(e.sourceEntries().length)}}function eP(e,t){e&1&&(R(0,`div`,16),B(1,`span`,80),R(2,`p`,20),Y(3,`Scanning source for NgRx declarations…`),z()())}function tP(e,t){e&1&&(R(0,`div`,17)(1,`p`,20),Y(2,`No NgRx declarations found in source.`),z(),R(3,`p`,21),Y(4,` The scan looks for `),R(5,`code`),Y(6,`signalStore`),z(),Y(7,`, `),R(8,`code`),Y(9,`signalState`),z(),Y(10,`, `),R(11,`code`),Y(12,`signalMethod`),z(),Y(13,`, `),R(14,`code`),Y(15,`createAction`),z(),Y(16,`, `),R(17,`code`),Y(18,`createReducer`),z(),Y(19,`, `),R(20,`code`),Y(21,`createEffect`),z(),Y(22,`, `),R(23,`code`),Y(24,`createSelector`),z(),Y(25,` and `),R(26,`code`),Y(27,`createFeature`),z(),Y(28,`. `),z()())}function nP(e,t){if(e&1){let e=W();R(0,`button`,82),G(`click`,function(){let t=O(e).$implicit,n=q(2);return k(n.kind.set(n.kind()===t.kind?null:t.kind))}),B(1,`span`,28),R(2,`span`,87),Y(3),z(),R(4,`span`,83),Y(5),z()()}if(e&2){let e=t.$implicit,n=q(2);J(`active`,n.kind()===e.kind),M(`aria-pressed`,n.kind()===e.kind),j(),n_(`background`,n.kindColor(e.kind)),j(2),X(n.kindLabel(e.kind)),j(2),X(e.count)}}function rP(e,t){if(e&1&&(R(0,`p`,92),Y(1),z()),e&2){let e=q().$implicit;j(),X(e.detail)}}function iP(e,t){if(e&1&&(R(0,`li`,86)(1,`div`,88),B(2,`span`,28),R(3,`span`,89),Y(4),z(),R(5,`span`,33),Y(6),z()(),R(7,`div`,90)(8,`span`,91),Y(9),z()(),N(10,rP,2,1,`p`,92),z()),e&2){let e=t.$implicit,n=q(2);j(2),n_(`background`,n.kindColor(e.kind)),j(2),X(e.name),j(2),X(n.kindLabel(e.kind)),j(2),L(`title`,e.file+`:`+e.line),j(),O_(``,e.file,`:`,e.line),j(),P(e.detail?10:-1)}}function aP(e,t){if(e&1){let e=W();R(0,`li`,16)(1,`p`,20),Y(2,`No declarations match.`),z(),R(3,`button`,22),G(`click`,function(){return O(e),k(q(2).clearFilters())}),Y(4,`Clear filters`),z()()}}function oP(e,t){if(e&1){let e=W();R(0,`div`,81)(1,`button`,82),G(`click`,function(){return O(e),k(q().kind.set(null))}),Y(2,` All `),R(3,`span`,83),Y(4),z()(),F(5,nP,6,7,`button`,84,iN),z(),R(7,`ul`,85),F(8,iP,11,8,`li`,86,aN,!1,aP,5,0,`li`,16),z()}if(e&2){let e=q();j(),J(`active`,!e.kind()),M(`aria-pressed`,!e.kind()),j(3),X(e.sourceEntries().length),j(),I(e.groupedEntries()),j(3),I(e.filteredEntries())}}var sP={action:`#f59e0b`,reducer:`#a78bfa`,effect:`#fb923c`,selector:`#60a5fa`,feature:`#34d399`,"store-setup":`#94a3b8`,"signal-store":`#e879f9`,"signal-state":`#22d3ee`,"signal-method":`#fb7185`,store:`#a78bfa`},cP={"signal-store":`signalStore`,"signal-state":`signalState`,"signal-method":`signalMethod`,"store-setup":`store setup`,store:`@ngrx/store`},lP=new Set([`action`,`reducer`,`effect`,`selector`,`feature`,`store-setup`]),uP=class e{rpc=$(null);canRestore=Q(()=>AT(this.rpc(),`ngrx`));restoreOff=yT(`ngrx`);filter=A(``);kind=A(null);sourceEntries=A([]);sourceLoaded=A(!1);pages=A([]);failed=A(!1);selectedPageId=A(null);hostPageId=TT();selectedStoreId=A(null);selectedSeq=A(null);confirmSeq=A(null);busy=A(!1);focusLatest=A(!1);stateTree=hv(`stateTree`);latestButton=hv(`latestButton`);message=A(``);destroyRef=E(ws);unsubscribe=null;page=Q(()=>{let e=this.pages();return e.find(e=>e.pageId===this.selectedPageId())??e.find(e=>e.pageId===this.hostPageId)??e[0]??null});pageOptions=Q(()=>this.pages().map(e=>({value:e.pageId,label:e.title||e.url,hint:e.url})));liveStores=Q(()=>{let e=this.page();if(!e)return[];let t=e.stores.map(e=>({id:e.id,label:e.name??e.references[0]??e.className,kind:e.kind,scope:e.scope,signal:e}));return e.classic&&t.push({id:`store`,label:`Store`,kind:`store`,scope:e.classic.scope,classic:e.classic}),t});filteredStores=Q(()=>{let e=this.filter().trim().toLowerCase();return e?this.liveStores().filter(t=>t.label.toLowerCase().includes(e)||t.kind.includes(e)||(t.signal?.stateKeys??[]).some(t=>t.toLowerCase().includes(e))||(this.page()?.log??[]).some(n=>n.storeId===t.id&&n.type.toLowerCase().includes(e))):this.liveStores()});store=Q(()=>{let e=this.liveStores();return e.find(e=>e.id===this.selectedStoreId())??e[0]??null});stateText=Q(()=>{let e=this.store();return e?YM(e.signal?e.signal.state:e.classic?.state):``});computedEntries=Q(()=>Object.entries(this.store()?.signal?.computed??{}).map(([e,t])=>({key:e,value:XM(t,160),full:YM(t)})));storeLog=Q(()=>{let e=this.store()?.id,t=this.filter().trim().toLowerCase();return(this.page()?.log??[]).filter(n=>n.storeId===e&&(!t||n.type.toLowerCase().includes(t)||this.storeMatches(t))).reverse()});entry=Q(()=>this.storeLog().find(e=>e.seq===this.selectedSeq())??null);usesSignals=Q(()=>this.sourceEntries().some(e=>e.kind===`signal-store`||e.kind===`signal-state`));usesClassic=Q(()=>this.sourceEntries().some(e=>lP.has(e.kind)));filteredEntries=Q(()=>{let e=this.filter().trim().toLowerCase(),t=this.kind();return this.sourceEntries().filter(n=>(!t||n.kind===t)&&(!e||n.name.toLowerCase().includes(e)||n.kind.includes(e)||(n.detail??``).toLowerCase().includes(e)))});groupedEntries=Q(()=>{let e=new Map;for(let t of this.sourceEntries())e.set(t.kind,(e.get(t.kind)??0)+1);return[...e.entries()].map(([e,t])=>({kind:e,count:t}))});constructor(){dc(()=>{let e=this.rpc();e&&this.load(e)}),jv(()=>{let e=this.latestButton();e&&this.focusLatest()&&!this.busy()&&(this.focusLatest.set(!1),e.nativeElement.focus())}),this.destroyRef.onDestroy(()=>this.unsubscribe?.())}storeMatches(e){let t=this.store();return!!t&&t.label.toLowerCase().includes(e)}async load(e){this.failed.set(!1),ET(e,`get-ngrx-store`).then(e=>this.sourceEntries.set(Array.isArray(e)?e:[])).catch(()=>this.sourceEntries.set([])).finally(()=>this.sourceLoaded.set(!0));try{let t=await e.scope(`ng-devtools`).rpc.sharedState(`ngrx-store`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e;this.pages.set(Array.isArray(t?.pages)?t.pages:[])};n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.failed.set(!0)}}retry(){let e=this.rpc();e&&this.load(e)}selectPage(e){this.selectedPageId.set(e),this.selectedStoreId.set(null),this.selectedSeq.set(null),this.confirmSeq.set(null)}selectStore(e){this.selectedStoreId.set(e),this.selectedSeq.set(null),this.confirmSeq.set(null)}selectEntry(e){this.selectedSeq.set(this.selectedSeq()===e?null:e),this.confirmSeq.set(null)}async restore(e,t){let n=this.page();if(!n)return;this.busy.set(!0),this.focusLatest.set(!1);let r=!1;try{let i=await ET(this.rpc(),`request-ngrx-action`,{pageId:n.pageId,request:{type:`restore`,seq:e}});this.message.set(i?.error??i?.message??`Restored.`),r=t&&!i?.error&&!!i?.paused}catch{this.message.set(`Could not reach the page to restore the state.`)}finally{this.busy.set(!1),this.confirmSeq.set(null),this.focusLatest.set(r),r||this.stateTree()?.nativeElement.focus()}}async backToLatest(){let e=this.page();if(e){this.busy.set(!0);try{let t=await ET(this.rpc(),`request-ngrx-action`,{pageId:e.pageId,request:{type:`latest`}});this.focusLatest.set(!1),this.stateTree()?.nativeElement.focus(),this.message.set(t?.error??t?.message??`Back on the latest state.`)}catch{this.message.set(`Could not reach the page to go back to the latest state.`)}finally{this.busy.set(!1)}}}clearFilters(){this.filter.set(``),this.kind.set(null)}changeCount(e){return(this.page()?.log??[]).filter(t=>t.storeId===e).length}kindColor(e){return sP[e]??`var(--text-3)`}kindLabel(e){return cP[e]??e}opLabel(e){return e===`add`?`added`:e===`remove`?`removed`:`changed`}prettyText(e){return YM(e)}shortText(e){return XM(e)}formatTime=PO;static ɵfac=function(t){return new(t||e)};static ɵcmp=Oh({type:e,selectors:[[`app-store-inspector`]],viewQuery:function(e,t){e&1&&Ng(t.stateTree,ZM,5)(t.latestButton,QM,5),e&2&&Pg(2)},inputs:{rpc:[1,`rpc`]},decls:25,vars:10,consts:[[`stateTree`,``],[`latestButton`,``],[1,`toolbar`],[`type`,`search`,`placeholder`,`Filter stores, changes and declarations…`,`aria-label`,`Filter stores, changes and source declarations`,3,`input`,`value`],[1,`status`],[`aria-hidden`,`true`,1,`live-dot`],[`aria-labelledby`,`ngrx-live-heading`,1,`block`],[1,`section-head`],[`id`,`ngrx-live-heading`],[1,`pill`],[`role`,`alert`,1,`empty`],[1,`empty`],[1,`live-layout`],[`role`,`status`,1,`message`],[`aria-labelledby`,`ngrx-source-heading`,1,`block`],[`id`,`ngrx-source-heading`],[`role`,`status`,1,`empty`,`compact`],[1,`empty`,`compact`],[`id`,`ngrx-page-label`,1,`visually-hidden`],[`labelledBy`,`ngrx-page-label`,1,`page-select`,3,`valueChange`,`options`,`value`],[1,`empty-title`],[1,`hint`],[`type`,`button`,1,`btn`,3,`click`],[`aria-label`,`Stores on this page`,1,`store-list`],[1,`muted`,`pad`],[1,`store-detail`],[`type`,`button`,1,`store-item`,3,`click`],[1,`store-top`],[`aria-hidden`,`true`,1,`dot`],[1,`store-name`],[1,`store-meta`],[1,`detail-head`],[1,`chips`],[1,`chip`],[1,`chip`,`mono`,3,`title`],[1,`refs`],[1,`paused`],[1,`facts`],[`aria-labelledby`,`ngrx-state-heading`,1,`fact`],[`id`,`ngrx-state-heading`],[`tabindex`,`0`,`aria-labelledby`,`ngrx-state-heading`,1,`tree`],[`aria-labelledby`,`ngrx-computed-heading`,1,`fact`],[`aria-labelledby`,`ngrx-log-heading`,1,`log`],[`id`,`ngrx-log-heading`],[1,`log-layout`],[1,`log-list`],[`aria-labelledby`,`ngrx-entry-heading`,1,`entry`],[`type`,`button`,1,`btn`,`primary`,3,`click`,`disabled`],[`id`,`store-latest-off`,1,`hint`,`small`],[`id`,`ngrx-computed-heading`],[1,`kv`],[1,`muted`],[`id`,`ngrx-methods-heading`,1,`spaced`],[`aria-labelledby`,`ngrx-methods-heading`,1,`methods`],[3,`title`],[1,`chip`,`mono`],[1,`tag`],[1,`calls`],[`type`,`button`,1,`log-item`,3,`click`],[1,`seq`],[1,`log-type`,3,`title`],[1,`log-meta`],[`id`,`ngrx-entry-heading`],[1,`sub`],[1,`diff`],[1,`hint`,`small`],[1,`code`],[3,`class`],[1,`op`],[1,`path`],[1,`values`],[1,`before`],[1,`after`],[`aria-hidden`,`true`,1,`arrow`],[1,`visually-hidden`],[`role`,`group`,`aria-labelledby`,`ngrx-confirm-text`,1,`confirm`],[`id`,`ngrx-confirm-text`],[1,`actions`],[`type`,`button`,1,`btn`,`restore`,3,`click`,`disabled`],[`id`,`store-writes-off`,1,`hint`,`small`],[`aria-hidden`,`true`,1,`spinner`],[`role`,`group`,`aria-label`,`Filter declarations by kind`,1,`kinds`],[`type`,`button`,1,`kind-chip`,3,`click`],[1,`count`],[`type`,`button`,1,`kind-chip`,3,`active`],[1,`nodes`],[1,`node-card`],[1,`chip-text`],[1,`node-header`],[1,`node-label`],[1,`node-meta`],[1,`file`,3,`title`],[1,`detail`]],template:function(e,t){e&1&&(R(0,`div`,2)(1,`input`,3),G(`input`,function(e){return t.filter.set(e.target.value)}),z(),N(2,oN,3,2),R(3,`span`,4),B(4,`span`,5),Y(5),z()(),R(6,`section`,6)(7,`div`,7)(8,`h2`,8),Y(9,`Live stores`),z(),N(10,sN,2,1,`span`,9),z(),N(11,cN,7,0,`div`,10)(12,lN,5,0,`div`,11)(13,pN,4,1,`div`,11)(14,QN,6,2,`div`,12),R(15,`p`,13),Y(16),z()(),R(17,`section`,14)(18,`div`,7)(19,`h2`,15),Y(20,`Source declarations`),z(),N(21,$N,2,1,`span`,9),z(),N(22,eP,4,0,`div`,16)(23,tP,29,0,`div`,17)(24,oP,11,5),z()),e&2&&(j(),L(`value`,t.filter()),j(),P(t.pages().length>1?2:-1),j(),J(`on`,!!t.page()),j(2),Z(` `,t.page()?`Live`:`No page connected`,` `),j(5),P(t.liveStores().length?10:-1),j(),P(t.failed()?11:t.page()?t.liveStores().length?14:13:12),j(5),X(t.message()),j(5),P(t.sourceEntries().length?21:-1),j(),P(t.sourceLoaded()?t.sourceEntries().length===0?23:24:22))},dependencies:[_A],styles:[`[_nghost-%COMP%] { - display: grid; - gap: 24px; - min-width: 0; - color: var(--%NS%text); - font-size: 13px; -} - -.toolbar[_ngcontent-%COMP%] { - position: sticky; - top: 0; - z-index: 2; - display: flex; - flex-wrap: wrap; - gap: 8px 12px; - align-items: center; - padding: 10px 12px; - background: color-mix(in srgb, var(--%NS%surface) 85%, transparent); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); -} - -input[_ngcontent-%COMP%] { - flex: 1 1 220px; - min-width: 0; - height: 34px; - padding: 0 12px; - background: var(--%NS%bg); - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - outline: none; - transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease); -} - -input[_ngcontent-%COMP%]::placeholder { - color: var(--%NS%text-3); -} - -input[_ngcontent-%COMP%]:focus-visible { - outline: none; - border-color: var(--%NS%accent); - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -.page-select[_ngcontent-%COMP%] { - flex: 0 1 220px; - min-width: 0; -} - -.status[_ngcontent-%COMP%] { - display: inline-flex; - flex: none; - align-items: center; - gap: 6px; - color: var(--%NS%text-2); - font-size: 12px; - font-weight: 500; -} - -.live-dot[_ngcontent-%COMP%] { - width: 6px; - height: 6px; - border-radius: 50%; - background: var(--%NS%text-3); -} - -.status.on[_ngcontent-%COMP%] .live-dot[_ngcontent-%COMP%] { - background: var(--%NS%ok); - box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%ok) 20%, transparent); - animation: _ngcontent-%COMP%_pulse 2s infinite; -} - -@keyframes _ngcontent-%COMP%_pulse { - 50% { - opacity: 0.4; - } -} -.block[_ngcontent-%COMP%] { - display: grid; - gap: 12px; - min-width: 0; -} - -.section-head[_ngcontent-%COMP%] { - display: flex; - align-items: center; - gap: 8px; - min-height: 24px; -} - -h2[_ngcontent-%COMP%], -h4[_ngcontent-%COMP%], -.sub[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - display: flex; - align-items: center; - gap: 8px; - margin: 0; -} - -h4[_ngcontent-%COMP%] { - margin-bottom: 10px; -} - -.spaced[_ngcontent-%COMP%] { - margin-top: 16px; -} - -.sub[_ngcontent-%COMP%] { - margin: 14px 0 8px; -} - -.pill[_ngcontent-%COMP%] { - min-width: 20px; - padding: 0 7px; - border-radius: 99px; - background: var(--%NS%surface-2); - border: 1px solid var(--%NS%border); - color: var(--%NS%text-2); - font-size: 11px; - font-weight: 500; - letter-spacing: 0; - line-height: 18px; - text-align: center; - font-variant-numeric: tabular-nums; -} - -.empty[_ngcontent-%COMP%] { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; - text-align: center; - padding: 36px 24px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - animation: enter 0.35s var(--%NS%ease) both; -} - -.empty.compact[_ngcontent-%COMP%] { - padding: 24px 16px; - border-style: dashed; - background: transparent; -} - -.empty-title[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-strong); - font-size: 14px; - font-weight: 600; -} - -.hint[_ngcontent-%COMP%] { - max-width: 520px; - margin: 0; - color: var(--%NS%text-2); - line-height: 1.55; - overflow-wrap: anywhere; -} - -.hint.small[_ngcontent-%COMP%] { - margin-top: 12px; - font-size: 12px; -} - -code[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); - font-size: 12px; -} - -.hint[_ngcontent-%COMP%] code[_ngcontent-%COMP%], -.refs[_ngcontent-%COMP%] code[_ngcontent-%COMP%] { - padding: 1px 5px; - color: var(--%NS%text); - background: var(--%NS%surface-3); - border: 1px solid var(--%NS%border); - border-radius: 5px; -} - -.muted[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-2); -} - -.pad[_ngcontent-%COMP%] { - padding: 20px 12px; - text-align: center; - line-height: 1.5; -} - -.btn[_ngcontent-%COMP%] { - height: 32px; - padding: 0 14px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - font-weight: 500; - cursor: pointer; - transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease); -} - -.btn[_ngcontent-%COMP%]:hover { - background: var(--%NS%surface-3); -} - -.btn[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.btn[_ngcontent-%COMP%]:disabled { - opacity: 0.6; - cursor: default; -} - -.btn.primary[_ngcontent-%COMP%], -.btn.restore[_ngcontent-%COMP%] { - border-color: var(--%NS%accent-line); - background: var(--%NS%accent-soft); - color: var(--%NS%text-strong); -} - -.btn.restore[_ngcontent-%COMP%] { - margin-top: 14px; -} - -.live-layout[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); - min-width: 0; - background: var(--%NS%surface); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - box-shadow: var(--%NS%shadow); - overflow: hidden; - animation: enter 0.35s var(--%NS%ease) both; -} - -ul[_ngcontent-%COMP%] { - list-style: none; - margin: 0; - padding: 0; -} - -.store-list[_ngcontent-%COMP%] { - display: flex; - flex-direction: column; - gap: 2px; - padding: 8px; - border-right: 1px solid var(--%NS%border); - background: var(--%NS%surface-2); -} - -.store-item[_ngcontent-%COMP%], -.log-item[_ngcontent-%COMP%] { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 3px; - width: 100%; - padding: 8px 10px; - border: none; - border-radius: var(--%NS%radius-sm); - background: transparent; - color: inherit; - font: inherit; - text-align: left; - cursor: pointer; - transition: background-color 0.15s var(--%NS%ease); -} - -.store-item[_ngcontent-%COMP%]:hover, -.log-item[_ngcontent-%COMP%]:hover { - background: var(--%NS%surface-3); -} - -.store-item[_ngcontent-%COMP%]:focus-visible, -.log-item[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: -2px; -} - -.store-item.selected[_ngcontent-%COMP%], -.log-item.selected[_ngcontent-%COMP%] { - background: var(--%NS%accent-soft); - box-shadow: inset 2px 0 0 var(--%NS%accent); -} - -.store-top[_ngcontent-%COMP%] { - display: flex; - align-items: center; - gap: 8px; - min-width: 0; - max-width: 100%; -} - -.store-name[_ngcontent-%COMP%] { - overflow: hidden; - min-width: 0; - text-overflow: ellipsis; - white-space: nowrap; - font-family: var(--%NS%font-mono); - font-weight: 600; - color: var(--%NS%text-strong); -} - -.store-meta[_ngcontent-%COMP%], -.log-meta[_ngcontent-%COMP%] { - color: var(--%NS%text-2); - font-size: 11.5px; - font-variant-numeric: tabular-nums; -} - -.dot[_ngcontent-%COMP%] { - flex: none; - width: 8px; - height: 8px; - border-radius: 50%; -} - -.store-detail[_ngcontent-%COMP%] { - display: grid; - gap: 16px; - min-width: 0; - padding: 16px; -} - -.detail-head[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] { - margin: 0 0 8px; - color: var(--%NS%accent); - font-family: var(--%NS%font-mono); - font-size: 15px; - font-weight: 600; - overflow-wrap: anywhere; -} - -.chips[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 6px; -} - -.chip[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - gap: 6px; - max-width: 100%; - padding: 1px 8px; - border: 1px solid var(--%NS%border); - border-radius: 99px; - background: var(--%NS%surface-2); - color: var(--%NS%text-2); - font-size: 11.5px; - line-height: 18px; - overflow-wrap: anywhere; -} - -.chip.mono[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); -} - -.refs[_ngcontent-%COMP%] { - margin: 10px 0 0; - color: var(--%NS%text-2); - line-height: 1.8; -} - -.facts[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); - gap: 16px; - min-width: 0; -} - -.fact[_ngcontent-%COMP%] { - min-width: 0; -} - -pre[_ngcontent-%COMP%] { - margin: 0; - font-family: var(--%NS%font-mono); - font-size: 12px; - line-height: 1.55; - white-space: pre-wrap; - overflow-wrap: anywhere; - color: var(--%NS%text); -} - -.tree[_ngcontent-%COMP%], -.code[_ngcontent-%COMP%] { - max-height: 360px; - overflow: auto; - padding: 10px 12px; - background: var(--%NS%surface-2); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); -} - -.code[_ngcontent-%COMP%] { - max-height: 220px; -} - -.tree[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.kv[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: max-content minmax(0, 1fr); - gap: 6px 14px; - margin: 0; -} - -.kv[_ngcontent-%COMP%] dt[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); - font-size: 12px; - color: var(--%NS%text-2); -} - -.kv[_ngcontent-%COMP%] dd[_ngcontent-%COMP%] { - min-width: 0; - margin: 0; - overflow-wrap: anywhere; -} - -.methods[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 6px; -} - -.tag[_ngcontent-%COMP%] { - padding: 0 5px; - border-radius: 4px; - background: var(--%NS%accent-soft); - color: var(--%NS%text-strong); - font-size: 10.5px; -} - -.calls[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-family: var(--%NS%font-sans, inherit); - font-size: 11px; -} - -.log[_ngcontent-%COMP%] { - min-width: 0; - padding-top: 16px; - border-top: 1px solid var(--%NS%border); -} - -.log-layout[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); - gap: 16px; - min-width: 0; -} - -.log-list[_ngcontent-%COMP%] { - display: flex; - flex-direction: column; - gap: 2px; - max-height: 420px; - overflow: auto; - padding: 2px; -} - -.log-item[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: auto minmax(0, 1fr); - column-gap: 8px; - row-gap: 2px; -} - -.seq[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11.5px; - font-variant-numeric: tabular-nums; -} - -.log-type[_ngcontent-%COMP%] { - overflow: hidden; - min-width: 0; - text-overflow: ellipsis; - white-space: nowrap; - max-width: 100%; - font-family: var(--%NS%font-mono); - font-size: 12.5px; - color: var(--%NS%text); -} - -.log-meta[_ngcontent-%COMP%] { - grid-column: 2; -} - -.entry[_ngcontent-%COMP%] { - min-width: 0; - padding: 14px; - border: 1px solid var(--%NS%accent-line); - border-radius: var(--%NS%radius-sm); - animation: enter 0.25s var(--%NS%ease) both; -} - -.entry[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] { - margin: 0 0 12px; - font-family: var(--%NS%font-mono); - font-size: 13px; - font-weight: 600; - color: var(--%NS%text-strong); - overflow-wrap: anywhere; -} - -.diff[_ngcontent-%COMP%] { - display: grid; - gap: 4px; -} - -.diff-row[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr); - gap: 8px; - align-items: baseline; - padding: 5px 8px; - border-radius: 6px; - background: var(--%NS%surface-2); -} - -.op[_ngcontent-%COMP%] { - font-size: 10.5px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.06em; - color: var(--%NS%text-2); -} - -.diff-row.add[_ngcontent-%COMP%] .op[_ngcontent-%COMP%] { - color: var(--%NS%ok); -} - -.diff-row.remove[_ngcontent-%COMP%] .op[_ngcontent-%COMP%] { - color: var(--%NS%danger); -} - -.path[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - overflow-wrap: anywhere; -} - -.values[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 4px 6px; - min-width: 0; - overflow-wrap: anywhere; -} - -.before[_ngcontent-%COMP%] { - color: var(--%NS%text-2); - text-decoration: line-through; -} - -.after[_ngcontent-%COMP%] { - color: var(--%NS%text); -} - -.arrow[_ngcontent-%COMP%] { - color: var(--%NS%text-3); -} - -.confirm[_ngcontent-%COMP%] { - margin-top: 14px; - padding: 12px; - border: 1px solid var(--%NS%accent-line); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%accent-soft); -} - -.confirm[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { - margin: 0 0 10px; - line-height: 1.5; -} - -.actions[_ngcontent-%COMP%] { - display: flex; - gap: 8px; -} - -.paused[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 10px 14px; - margin-bottom: 14px; - padding: 10px 12px; - border: 1px solid color-mix(in srgb, var(--%NS%warn) 40%, transparent); - border-radius: var(--%NS%radius-sm); - background: color-mix(in srgb, var(--%NS%warn) 10%, transparent); -} - -.paused[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { - flex: 1 1 240px; - margin: 0; - line-height: 1.5; -} - -.paused[_ngcontent-%COMP%] .hint.small[_ngcontent-%COMP%] { - flex-basis: 100%; - margin-top: 0; -} - -.message[_ngcontent-%COMP%]:empty { - display: none; -} - -.message[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-2); -} - -.kinds[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 6px; -} - -.kind-chip[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - gap: 6px; - max-width: 100%; - height: 28px; - padding: 0 10px; - border: 1px solid var(--%NS%border); - border-radius: 99px; - background: var(--%NS%surface-2); - color: var(--%NS%text-2); - font: inherit; - font-size: 12px; - font-weight: 500; - cursor: pointer; - transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), color 0.15s var(--%NS%ease); -} - -.kind-chip[_ngcontent-%COMP%]:hover { - border-color: var(--%NS%border-strong); - background: var(--%NS%surface-3); - color: var(--%NS%text); -} - -.kind-chip.active[_ngcontent-%COMP%] { - border-color: var(--%NS%accent-line); - background: var(--%NS%accent-soft); - color: var(--%NS%text-strong); -} - -.kind-chip[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.chip-text[_ngcontent-%COMP%] { - overflow: hidden; - min-width: 0; - text-overflow: ellipsis; - white-space: nowrap; -} - -.kind-chip[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] { - flex: none; - min-width: 18px; - padding: 0 5px; - border-radius: 99px; - background: var(--%NS%surface-3); - color: var(--%NS%text-2); - font-size: 11px; - line-height: 16px; - text-align: center; - font-variant-numeric: tabular-nums; -} - -.nodes[_ngcontent-%COMP%] { - display: flex; - flex-direction: column; - gap: 8px; - animation: enter 0.35s var(--%NS%ease) both; -} - -.node-card[_ngcontent-%COMP%] { - min-width: 0; - padding: 12px 16px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - border-radius: var(--%NS%radius-sm); -} - -.node-header[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 6px 8px; - min-width: 0; -} - -.node-label[_ngcontent-%COMP%] { - min-width: 0; - font-family: var(--%NS%font-mono); - font-weight: 500; - color: var(--%NS%text-strong); - overflow-wrap: anywhere; -} - -.node-meta[_ngcontent-%COMP%] { - margin-top: 6px; - color: var(--%NS%text-3); - font-size: 12px; -} - -.file[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); - font-size: 11.5px; - overflow-wrap: anywhere; -} - -.detail[_ngcontent-%COMP%] { - margin: 6px 0 0; - color: var(--%NS%text-2); - font-size: 12px; - line-height: 1.5; - overflow-wrap: anywhere; -} - -.spinner[_ngcontent-%COMP%] { - width: 18px; - height: 18px; - border: 2px solid var(--%NS%border-strong); - border-top-color: var(--%NS%accent); - border-radius: 50%; - animation: spin 0.8s linear infinite; -} - -@media (prefers-reduced-motion: reduce) { - .spinner[_ngcontent-%COMP%], - .status.on[_ngcontent-%COMP%] .live-dot[_ngcontent-%COMP%] { - animation: none; - } -} -@media (max-width: 760px) { - .live-layout[_ngcontent-%COMP%], - .log-layout[_ngcontent-%COMP%] { - grid-template-columns: minmax(0, 1fr); - } - .store-list[_ngcontent-%COMP%] { - border-right: none; - border-bottom: 1px solid var(--%NS%border); - } -} -@media (max-width: 480px) { - .toolbar[_ngcontent-%COMP%] { - padding: 8px; - } - .toolbar[_ngcontent-%COMP%] input[_ngcontent-%COMP%], - .page-select[_ngcontent-%COMP%] { - flex-basis: 100%; - } - .store-detail[_ngcontent-%COMP%] { - padding: 12px; - } - .kv[_ngcontent-%COMP%] { - grid-template-columns: minmax(0, 1fr); - } -}`]})};function dP(e){return e.split(`@`)[1]??``}var fP={signal:`Signal Forms`,reactive:`Reactive`,template:`Template-driven`},pP={own:`validator`,directive:`template attribute`,tree:`cross-field rule`,async:`async`,parse:`parse`,submission:`server`,schema:`schema`,manual:`setErrors`},mP=DT;async function hP(e,t){return await mP(e,`request-form-action`,t)??{ok:!1,error:`The devtools server did not answer.`}}function gP(e){return`${e.ok?e.message??`Done.`:e.error??`Failed.`}${e.skipped?.length?` Skipped: ${e.skipped.map(e=>`${e.path} (${e.reason})`).join(`, `)}.`:``}${e.status?` Status: ${e.status}.`:``}`}function _P(e){return(e??``).replace(/^_Labels, paths.*_\n\n/,``).replace(/`/g,``).replace(/\*\*/g,``)}function vP(e,t){if(e&1){let e=W();V(0,`div`,4)(1,`label`,10),Y(2),H(),V(3,`input`,11),K(`input`,function(t){return O(e),k(q().draft.set(t.target.value))})(`keydown.enter`,function(){return O(e),k(q().setValue())}),H(),V(4,`button`,12),K(`click`,function(){return O(e),k(q().setValue())}),Y(5,` Set `),H()()}if(e&2){let e=q();j(2),Z(`New value for `,e.node().path),j(),xg(`value`,e.draft()),j(),xg(`disabled`,!e.canWrite()),M(`aria-describedby`,e.canWrite()?null:`field-writes-off`)}}function yP(e,t){if(e&1&&(V(0,`p`,8),Y(1),H()),e&2){let e=q();j(),X(e.writesOff)}}var bP=class e{form=$.required();node=$.required();version=$(0);rpc=$(null);canWrite=Q(()=>AT(this.rpc(),`forms`));writesOff=yT(`forms`);text=A(``);target=Q(()=>`${this.form().id}|${this.node().path}`);draft=nv({source:this.target,computation:()=>``});message=nv({source:this.target,computation:()=>``});constructor(){dc(()=>{let e=this.form().id,t=this.node().path;this.version();let n=this.rpc();ev(()=>this.load(n,e,t))})}async load(e,t,n){let r=await mP(e,`forms-explain`,{kind:`field`,form:t,path:n});this.form().id===t&&this.node().path===n&&this.text.set(_P(r))}async act(e){let t=await hP(this.rpc(),{action:e,formId:this.form().id,path:this.node().path});this.message.set(t.expression?`${gP(t)} ${t.expression}`:gP(t))}async setValue(){let e=await hP(this.rpc(),{action:`set-value`,formId:this.form().id,path:this.node().path,value:this.draft(),coerce:!0,mode:`user`});this.message.set(gP(e))}static ɵfac=function(t){return new(t||e)};static ɵcmp=Oh({type:e,selectors:[[`app-forms-field-detail`]],inputs:{form:[1,`form`],node:[1,`node`],version:[1,`version`],rpc:[1,`rpc`]},decls:22,vars:11,consts:[[1,`head`],[1,`section-label`],[1,`tag`],[1,`explain`],[1,`editor`],[`role`,`group`,`aria-label`,`Field actions`,1,`row`],[`type`,`button`,1,`small`,3,`click`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`id`,`field-writes-off`,1,`muted`],[`role`,`status`,1,`status`],[`for`,`field-value`,1,`sr-only`],[`id`,`field-value`,`type`,`text`,`placeholder`,`New value, read as the current value's type`,`autocomplete`,`off`,`spellcheck`,`false`,1,`field-input`,3,`input`,`keydown.enter`,`value`],[`type`,`button`,1,`small`,`primary`,3,`click`,`disabled`]],template:function(e,t){e&1&&(V(0,`div`,0)(1,`span`,1),Y(2,`Field`),H(),V(3,`h3`),Y(4),H(),V(5,`span`,2),Y(6),H()(),V(7,`pre`,3),Y(8),H(),N(9,vP,6,4,`div`,4),V(10,`div`,5)(11,`button`,6),K(`click`,function(){return t.act(`focus`)}),Y(12,`Focus`),H(),V(13,`button`,7),K(`click`,function(){return t.act(`mark-touched`)}),Y(14,` Touch `),H(),V(15,`button`,7),K(`click`,function(){return t.act(`revalidate`)}),Y(16,` Revalidate `),H(),V(17,`button`,6),K(`click`,function(){return t.act(`store-as-global`)}),Y(18,`Store as global`),H()(),N(19,yP,2,1,`p`,8),V(20,`p`,9),Y(21),H()),e&2&&(j(4),X(t.node().path||`(form)`),j(2),X(t.node().type),j(),M(`aria-busy`,t.text()?null:`true`),j(),X(t.text()||`Loading…`),j(),P(t.node().type===`control`&&!t.node().redacted?9:-1),j(4),xg(`disabled`,!t.canWrite()),M(`aria-describedby`,t.canWrite()?null:`field-writes-off`),j(2),xg(`disabled`,!t.canWrite()),M(`aria-describedby`,t.canWrite()?null:`field-writes-off`),j(4),P(t.canWrite()?-1:19),j(2),X(t.message()))},styles:[`.muted[_ngcontent-%COMP%] { - color: var(--%NS%text-2); -} - -code[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); - font-size: 12.5px; -} - -.small[_ngcontent-%COMP%] { - display: inline-block; - max-width: 100%; - height: 34px; - padding: 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - font-weight: 500; - line-height: 32px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - cursor: pointer; - transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); -} - -.small[_ngcontent-%COMP%]:hover { - background: var(--%NS%surface-3); - border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%border-strong)); -} - -.small[_ngcontent-%COMP%]:active { - background: var(--%NS%border-strong); -} - -.small[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.small[_ngcontent-%COMP%]:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.small.primary[_ngcontent-%COMP%] { - background: var(--%NS%accent); - border-color: var(--%NS%accent); - color: var(--%NS%accent-ink); - font-weight: 600; -} - -.small.primary[_ngcontent-%COMP%]:hover { - background: var(--%NS%accent-hover); - border-color: var(--%NS%accent-hover); -} - -.small.danger[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 40%, transparent); - color: var(--%NS%danger); -} - -.small.danger[_ngcontent-%COMP%]:hover { - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); - border-color: color-mix(in srgb, var(--%NS%danger) 55%, transparent); -} - -.small.armed[_ngcontent-%COMP%] { - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -.small.danger.armed[_ngcontent-%COMP%] { - background: var(--%NS%danger); - border-color: var(--%NS%danger); - color: #1f0707; - font-weight: 600; - box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent); -} - -.field-input[_ngcontent-%COMP%] { - min-width: 0; - height: 34px; - padding: 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%bg); - color: var(--%NS%text); - font-family: var(--%NS%font-mono); - font-size: 13px; - transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); -} - -.field-input[_ngcontent-%COMP%]::placeholder { - color: var(--%NS%text-3); - font-family: var(--%NS%font-sans); -} - -.field-input[_ngcontent-%COMP%]:hover { - border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%border-strong)); -} - -.field-input[_ngcontent-%COMP%]:focus, -.field-input[_ngcontent-%COMP%]:focus-visible { - outline: none; - border-color: var(--%NS%accent); - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -.explain[_ngcontent-%COMP%] { - margin: 0; - padding: 12px 16px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%bg); - color: var(--%NS%text); - font-family: var(--%NS%font-mono); - font-size: 12.5px; - line-height: 1.6; - white-space: pre-wrap; - overflow-wrap: anywhere; - tab-size: 2; -} - -.explain[aria-busy=true][_ngcontent-%COMP%] { - color: var(--%NS%text-3); -} - -.section-label[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.tag[_ngcontent-%COMP%] { - display: inline-block; - margin: 0; - padding: 1px 8px; - border: 1px solid var(--%NS%border); - border-radius: 99px; - background: var(--%NS%surface-2); - color: var(--%NS%text-2); - font-size: 11px; - font-weight: 500; - line-height: 18px; - white-space: nowrap; - font-variant-numeric: tabular-nums; -} - -.tag[data-tone=ok][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); - background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); - color: var(--%NS%ok); -} - -.tag[data-tone=warn][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); - background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); - color: var(--%NS%warn); -} - -.tag[data-tone=bad][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); - color: var(--%NS%danger); -} - -.status[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-2); - font-size: 12.5px; - line-height: 1.5; - overflow-wrap: anywhere; -} - -.empty-state[_ngcontent-%COMP%] { - display: grid; - justify-items: center; - gap: 6px; - margin: 0; - padding: 40px 24px; - border: 1px dashed var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - color: var(--%NS%text-2); - font-size: 13px; - line-height: 1.5; - text-align: center; -} - -.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { - max-width: 52ch; - margin: 0; -} - -.empty-state[_ngcontent-%COMP%] .empty-title[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-size: 14px; - font-weight: 600; -} - -.spinner[_ngcontent-%COMP%] { - width: 16px; - height: 16px; - border: 2px solid var(--%NS%border-strong); - border-top-color: var(--%NS%accent); - border-radius: 50%; - animation: spin 0.8s linear infinite; -} - -[_nghost-%COMP%] { - display: flex; - flex-direction: column; - gap: 12px; - min-width: 0; - padding: 16px; - background: var(--%NS%surface-2); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - animation: enter 0.35s var(--%NS%ease) both; -} - -.head[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 4px 8px; - align-items: center; - min-width: 0; -} - -.head[_ngcontent-%COMP%] .section-label[_ngcontent-%COMP%] { - flex-basis: 100%; -} - -h3[_ngcontent-%COMP%] { - min-width: 0; - margin: 0; - color: var(--%NS%text-strong); - font-family: var(--%NS%font-mono); - font-size: 14px; - font-weight: 600; - line-height: 1.4; - overflow-wrap: anywhere; -} - -.editor[_ngcontent-%COMP%] { - display: flex; - gap: 8px; - align-items: center; -} - -.editor[_ngcontent-%COMP%] .field-input[_ngcontent-%COMP%] { - flex: 1 1 auto; -} - -.row[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 8px; - align-items: center; -} - -.status[_ngcontent-%COMP%] { - margin-top: -4px; -} - -.status[_ngcontent-%COMP%]:empty { - height: 0; - margin: -12px 0 0; -}`]})};function xP(e,t){e&1&&(V(0,`div`,0),U(1,`span`,2),V(2,`p`),Y(3,`Checking the form for problems…`),H()())}function SP(e,t){e&1&&(V(0,`div`,1)(1,`span`,3),ps(),V(2,`svg`,4),U(3,`path`,5),H()(),ms(),V(4,`p`,6),Y(5,`No problems found`),H(),V(6,`p`),Y(7,`For generic accessibility checks, run axe on the page.`),H()())}function CP(e,t){if(e&1&&(V(0,`span`,13),Y(1,`at `),V(2,`code`),Y(3),H()()),e&2){let e=q().$implicit;j(3),X(e.path)}}function wP(e,t){if(e&1&&(V(0,`li`)(1,`div`,10)(2,`span`,11),Y(3),H(),V(4,`code`,12),Y(5),H(),N(6,CP,4,1,`span`,13),H(),V(7,`p`,14),Y(8),H(),V(9,`p`,15)(10,`span`,16),Y(11,`Fix`),H(),Y(12),H()()),e&2){let e=t.$implicit;M(`data-severity`,e.severity),j(2),M(`data-tone`,e.severity===`info`?``:e.severity===`error`?`bad`:`warn`),j(),X(e.severity),j(2),X(e.rule),j(),P(e.path?6:-1),j(2),X(e.message),j(4),Z(` `,e.fix)}}function TP(e,t){if(e&1&&(V(0,`p`,7)(1,`span`,8),Y(2),H(),Y(3),H(),V(4,`ul`,9),F(5,wP,13,7,`li`,null,cg),H()),e&2){let e=q();j(2),X(e.findings().length),j(),Z(` `,e.findings().length===1?`finding`:`findings`,` `),j(2),I(e.findings())}}var EP=class e{formId=$.required();version=$(0);rpc=$(null);submit=A(``);payload=A(``);message=A(``);constructor(){dc(()=>{let e=this.formId();this.version();let t=this.rpc();ev(async()=>{let[n,r]=await Promise.all([mP(t,`forms-explain`,{kind:`submit`,form:e}),mP(t,`forms-explain`,{kind:`payload`,form:e})]);this.formId()===e&&(this.submit.set(_P(n)),this.payload.set(_P(r)))})})}async copyFixture(){let e=(await mP(this.rpc(),`forms-explain`,{kind:`fixture`,form:this.formId()})??``).match(/```ts\n([\s\S]*?)```/)?.[1];if(!e){this.message.set(`No test fixture is available for this form.`);return}try{await navigator.clipboard.writeText(e),this.message.set(`Copied.`)}catch{this.message.set(`Clipboard is not available here.`)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=Oh({type:e,selectors:[[`app-forms-submit`]],inputs:{formId:[1,`formId`],version:[1,`version`],rpc:[1,`rpc`]},decls:15,vars:5,consts:[[`aria-labelledby`,`forms-submit-title`,1,`block`],[`id`,`forms-submit-title`,1,`section-label`],[1,`explain`],[`aria-labelledby`,`forms-payload-title`,1,`block`],[`id`,`forms-payload-title`,1,`section-label`],[1,`fixture`],[`type`,`button`,1,`small`,3,`click`],[`role`,`status`,1,`status`]],template:function(e,t){e&1&&(V(0,`section`,0)(1,`h3`,1),Y(2,`Submit`),H(),V(3,`pre`,2),Y(4),H()(),V(5,`section`,3)(6,`h3`,4),Y(7,`Payload`),H(),V(8,`pre`,2),Y(9),H()(),V(10,`div`,5)(11,`button`,6),K(`click`,function(){return t.copyFixture()}),Y(12,`Copy test fixture`),H(),V(13,`span`,7),Y(14),H()()),e&2&&(j(3),M(`aria-busy`,t.submit()?null:`true`),j(),X(t.submit()||`Loading…`),j(4),M(`aria-busy`,t.payload()?null:`true`),j(),X(t.payload()||`Loading…`),j(5),X(t.message()))},styles:[`.muted[_ngcontent-%COMP%] { - color: var(--%NS%text-2); -} - -code[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); - font-size: 12.5px; -} - -.small[_ngcontent-%COMP%] { - display: inline-block; - max-width: 100%; - height: 34px; - padding: 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - font-weight: 500; - line-height: 32px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - cursor: pointer; - transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); -} - -.small[_ngcontent-%COMP%]:hover { - background: var(--%NS%surface-3); - border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%border-strong)); -} - -.small[_ngcontent-%COMP%]:active { - background: var(--%NS%border-strong); -} - -.small[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.small[_ngcontent-%COMP%]:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.small.primary[_ngcontent-%COMP%] { - background: var(--%NS%accent); - border-color: var(--%NS%accent); - color: var(--%NS%accent-ink); - font-weight: 600; -} - -.small.primary[_ngcontent-%COMP%]:hover { - background: var(--%NS%accent-hover); - border-color: var(--%NS%accent-hover); -} - -.small.danger[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 40%, transparent); - color: var(--%NS%danger); -} - -.small.danger[_ngcontent-%COMP%]:hover { - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); - border-color: color-mix(in srgb, var(--%NS%danger) 55%, transparent); -} - -.small.armed[_ngcontent-%COMP%] { - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -.small.danger.armed[_ngcontent-%COMP%] { - background: var(--%NS%danger); - border-color: var(--%NS%danger); - color: #1f0707; - font-weight: 600; - box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent); -} - -.field-input[_ngcontent-%COMP%] { - min-width: 0; - height: 34px; - padding: 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%bg); - color: var(--%NS%text); - font-family: var(--%NS%font-mono); - font-size: 13px; - transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); -} - -.field-input[_ngcontent-%COMP%]::placeholder { - color: var(--%NS%text-3); - font-family: var(--%NS%font-sans); -} - -.field-input[_ngcontent-%COMP%]:hover { - border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%border-strong)); -} - -.field-input[_ngcontent-%COMP%]:focus, -.field-input[_ngcontent-%COMP%]:focus-visible { - outline: none; - border-color: var(--%NS%accent); - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -.explain[_ngcontent-%COMP%] { - margin: 0; - padding: 12px 16px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%bg); - color: var(--%NS%text); - font-family: var(--%NS%font-mono); - font-size: 12.5px; - line-height: 1.6; - white-space: pre-wrap; - overflow-wrap: anywhere; - tab-size: 2; -} - -.explain[aria-busy=true][_ngcontent-%COMP%] { - color: var(--%NS%text-3); -} - -.section-label[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.tag[_ngcontent-%COMP%] { - display: inline-block; - margin: 0; - padding: 1px 8px; - border: 1px solid var(--%NS%border); - border-radius: 99px; - background: var(--%NS%surface-2); - color: var(--%NS%text-2); - font-size: 11px; - font-weight: 500; - line-height: 18px; - white-space: nowrap; - font-variant-numeric: tabular-nums; -} - -.tag[data-tone=ok][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); - background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); - color: var(--%NS%ok); -} - -.tag[data-tone=warn][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); - background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); - color: var(--%NS%warn); -} - -.tag[data-tone=bad][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); - color: var(--%NS%danger); -} - -.status[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-2); - font-size: 12.5px; - line-height: 1.5; - overflow-wrap: anywhere; -} - -.empty-state[_ngcontent-%COMP%] { - display: grid; - justify-items: center; - gap: 6px; - margin: 0; - padding: 40px 24px; - border: 1px dashed var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - color: var(--%NS%text-2); - font-size: 13px; - line-height: 1.5; - text-align: center; -} - -.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { - max-width: 52ch; - margin: 0; -} - -.empty-state[_ngcontent-%COMP%] .empty-title[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-size: 14px; - font-weight: 600; -} - -.spinner[_ngcontent-%COMP%] { - width: 16px; - height: 16px; - border: 2px solid var(--%NS%border-strong); - border-top-color: var(--%NS%accent); - border-radius: 50%; - animation: spin 0.8s linear infinite; -} - -[_nghost-%COMP%] { - display: grid; - gap: 16px; - min-width: 0; - animation: enter 0.35s var(--%NS%ease) both; -} - -.block[_ngcontent-%COMP%] { - display: grid; - gap: 8px; - min-width: 0; -} - -.explain[_ngcontent-%COMP%] { - max-height: 420px; - overflow: auto; -} - -.fixture[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 8px 12px; - align-items: center; -}`]})},DP=class e{formId=$.required();version=$(0);rpc=$(null);findings=A(null);constructor(){dc(()=>{let e=this.formId();this.version();let t=this.rpc();ev(async()=>{let n=await mP(t,`forms-lint`,{form:e});this.formId()===e&&this.findings.set(n??[])})})}static ɵfac=function(t){return new(t||e)};static ɵcmp=Oh({type:e,selectors:[[`app-forms-lint`]],inputs:{formId:[1,`formId`],version:[1,`version`],rpc:[1,`rpc`]},decls:3,vars:1,consts:[[`role`,`status`,1,`empty-state`],[1,`empty-state`],[`aria-hidden`,`true`,1,`spinner`],[`aria-hidden`,`true`,1,`ok-icon`],[`width`,`16`,`height`,`16`,`viewBox`,`0 0 24 24`,`fill`,`none`,`stroke`,`currentColor`,`stroke-width`,`2.5`,`stroke-linecap`,`round`,`stroke-linejoin`,`round`],[`d`,`M20 6 9 17l-5-5`],[1,`empty-title`],[1,`summary`],[1,`tabular`],[1,`findings`],[1,`meta`],[1,`tag`,`severity`],[1,`rule`],[1,`muted`,`path`],[1,`message`],[1,`fix`],[1,`fix-label`]],template:function(e,t){e&1&&N(0,xP,4,0,`div`,0)(1,SP,8,0,`div`,1)(2,TP,7,2),e&2&&P(t.findings()===null?0:t.findings().length?2:1)},styles:[`.muted[_ngcontent-%COMP%] { - color: var(--%NS%text-2); -} - -code[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); - font-size: 12.5px; -} - -.small[_ngcontent-%COMP%] { - display: inline-block; - max-width: 100%; - height: 34px; - padding: 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - font-weight: 500; - line-height: 32px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - cursor: pointer; - transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); -} - -.small[_ngcontent-%COMP%]:hover { - background: var(--%NS%surface-3); - border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%border-strong)); -} - -.small[_ngcontent-%COMP%]:active { - background: var(--%NS%border-strong); -} - -.small[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.small[_ngcontent-%COMP%]:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.small.primary[_ngcontent-%COMP%] { - background: var(--%NS%accent); - border-color: var(--%NS%accent); - color: var(--%NS%accent-ink); - font-weight: 600; -} - -.small.primary[_ngcontent-%COMP%]:hover { - background: var(--%NS%accent-hover); - border-color: var(--%NS%accent-hover); -} - -.small.danger[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 40%, transparent); - color: var(--%NS%danger); -} - -.small.danger[_ngcontent-%COMP%]:hover { - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); - border-color: color-mix(in srgb, var(--%NS%danger) 55%, transparent); -} - -.small.armed[_ngcontent-%COMP%] { - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -.small.danger.armed[_ngcontent-%COMP%] { - background: var(--%NS%danger); - border-color: var(--%NS%danger); - color: #1f0707; - font-weight: 600; - box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent); -} - -.field-input[_ngcontent-%COMP%] { - min-width: 0; - height: 34px; - padding: 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%bg); - color: var(--%NS%text); - font-family: var(--%NS%font-mono); - font-size: 13px; - transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); -} - -.field-input[_ngcontent-%COMP%]::placeholder { - color: var(--%NS%text-3); - font-family: var(--%NS%font-sans); -} - -.field-input[_ngcontent-%COMP%]:hover { - border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%border-strong)); -} - -.field-input[_ngcontent-%COMP%]:focus, -.field-input[_ngcontent-%COMP%]:focus-visible { - outline: none; - border-color: var(--%NS%accent); - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -.explain[_ngcontent-%COMP%] { - margin: 0; - padding: 12px 16px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%bg); - color: var(--%NS%text); - font-family: var(--%NS%font-mono); - font-size: 12.5px; - line-height: 1.6; - white-space: pre-wrap; - overflow-wrap: anywhere; - tab-size: 2; -} - -.explain[aria-busy=true][_ngcontent-%COMP%] { - color: var(--%NS%text-3); -} - -.section-label[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.tag[_ngcontent-%COMP%] { - display: inline-block; - margin: 0; - padding: 1px 8px; - border: 1px solid var(--%NS%border); - border-radius: 99px; - background: var(--%NS%surface-2); - color: var(--%NS%text-2); - font-size: 11px; - font-weight: 500; - line-height: 18px; - white-space: nowrap; - font-variant-numeric: tabular-nums; -} - -.tag[data-tone=ok][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); - background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); - color: var(--%NS%ok); -} - -.tag[data-tone=warn][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); - background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); - color: var(--%NS%warn); -} - -.tag[data-tone=bad][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); - color: var(--%NS%danger); -} - -.status[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-2); - font-size: 12.5px; - line-height: 1.5; - overflow-wrap: anywhere; -} - -.empty-state[_ngcontent-%COMP%] { - display: grid; - justify-items: center; - gap: 6px; - margin: 0; - padding: 40px 24px; - border: 1px dashed var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - color: var(--%NS%text-2); - font-size: 13px; - line-height: 1.5; - text-align: center; -} - -.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { - max-width: 52ch; - margin: 0; -} - -.empty-state[_ngcontent-%COMP%] .empty-title[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-size: 14px; - font-weight: 600; -} - -.spinner[_ngcontent-%COMP%] { - width: 16px; - height: 16px; - border: 2px solid var(--%NS%border-strong); - border-top-color: var(--%NS%accent); - border-radius: 50%; - animation: spin 0.8s linear infinite; -} - -[_nghost-%COMP%] { - display: grid; - gap: 12px; - min-width: 0; -} - -.ok-icon[_ngcontent-%COMP%] { - display: grid; - place-items: center; - width: 32px; - height: 32px; - margin-bottom: 4px; - border-radius: 50%; - background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); - color: var(--%NS%ok); -} - -.summary[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-2); - font-size: 12.5px; -} - -.tabular[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-weight: 600; - font-variant-numeric: tabular-nums; -} - -.findings[_ngcontent-%COMP%] { - display: grid; - gap: 8px; - margin: 0; - padding: 0; - list-style: none; - color: var(--%NS%text); - font-size: 13px; - animation: enter 0.35s var(--%NS%ease) both; -} - -.findings[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { - display: grid; - gap: 6px; - min-width: 0; - padding: 12px 16px; - background: var(--%NS%surface-2); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - box-shadow: inset 3px 0 0 var(--%NS%border-strong); - transition: border-color 150ms var(--%NS%ease); -} - -.findings[_ngcontent-%COMP%] li[data-severity=error][_ngcontent-%COMP%] { - box-shadow: inset 3px 0 0 var(--%NS%danger); -} - -.findings[_ngcontent-%COMP%] li[data-severity=warning][_ngcontent-%COMP%] { - box-shadow: inset 3px 0 0 var(--%NS%warn); -} - -.findings[_ngcontent-%COMP%] li[_ngcontent-%COMP%]:hover { - border-color: var(--%NS%border-strong); -} - -.meta[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 4px 8px; - align-items: center; - min-width: 0; -} - -.severity[_ngcontent-%COMP%] { - text-transform: uppercase; - letter-spacing: 0.06em; -} - -.rule[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-weight: 600; - overflow-wrap: anywhere; -} - -.path[_ngcontent-%COMP%] { - font-size: 12.5px; - overflow-wrap: anywhere; -} - -.path[_ngcontent-%COMP%] code[_ngcontent-%COMP%] { - color: #fde68a; -} - -.message[_ngcontent-%COMP%], -.fix[_ngcontent-%COMP%] { - margin: 0; - line-height: 1.5; - overflow-wrap: anywhere; -} - -.fix[_ngcontent-%COMP%] { - color: var(--%NS%text-2); - font-size: 12.5px; -} - -.fix-label[_ngcontent-%COMP%] { - margin-right: 4px; - color: var(--%NS%accent); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.06em; - text-transform: uppercase; -}`]})},OP=()=>[],kP=(e,t)=>t.formId+`#`+t.seq;function AP(e,t){e&1&&U(0,`span`,5)}function jP(e,t){if(e&1){let e=W();V(0,`label`)(1,`input`,11),K(`change`,function(){let t=O(e).$implicit;return k(q().filter.set(t))}),H(),Y(2),H()}if(e&2){let e=t.$implicit,n=q();j(),xg(`value`,e)(`checked`,e===n.filter()),j(),Z(` `,e,` `)}}function MP(e,t){if(e&1&&(V(0,`span`,16),Y(1),H()),e&2){let e=q().$implicit;M(`data-tone`,e.outcome===`ran`?``:`bad`),j(),X(e.outcome)}}function NP(e,t){if(e&1&&(V(0,`span`,16),Y(1),H()),e&2){let e=q().$implicit;j(),Z(`×`,e.count)}}function PP(e,t){if(e&1&&(V(0,`span`,16),Y(1),H()),e&2){let e=q().$implicit;j(),X(e.origin)}}function FP(e,t){if(e&1&&(V(0,`span`,16),Y(1),H()),e&2){let e=q().$implicit;M(`data-tone`,e.ms>1e3?`warn`:``),j(),Z(`pending `,e.ms,`ms`)}}function IP(e,t){if(e&1&&(V(0,`span`,16),Y(1),H()),e&2){let e=q().$implicit;M(`data-tone`,e.renders>20?`warn`:``),j(),O_(``,e.renders,` renders: `,(e.rendered??z_(3,OP)).join(`, `))}}function LP(e,t){if(e&1&&(V(0,`span`,19),Y(1),H(),V(2,`span`,20),Y(3,`→`),H(),V(4,`span`,8),Y(5,`changed to`),H()),e&2){let e=q(2).$implicit;j(),X(e.prev)}}function RP(e,t){if(e&1&&(V(0,`div`,17),N(1,LP,6,1),Y(2),H()),e&2){let e=q().$implicit;j(),P(e.prev===void 0?-1:1),j(),Z(` `,e.detail,` `)}}function zP(e,t){if(e&1&&(V(0,`span`,18),Y(1),H()),e&2){let e=q().$implicit;j(),Z(`from `,e.caller)}}function BP(e,t){if(e&1&&(V(0,`li`)(1,`time`),Y(2),H(),V(3,`div`,12)(4,`div`,13)(5,`code`,14),Y(6),H(),V(7,`span`,15),Y(8),H(),N(9,MP,2,2,`span`,16),N(10,NP,2,1,`span`,16),N(11,PP,2,1,`span`,16),N(12,FP,2,2,`span`,16),N(13,IP,2,4,`span`,16),H(),N(14,RP,3,2,`div`,17),N(15,zP,2,1,`span`,18),H()()),e&2){let e=t.$implicit,n=q(2);M(`data-type`,e.type),j(),M(`datetime`,n.iso(e.timestamp)),j(),X(n.time(e.timestamp)),j(4),X(e.path||`(form)`),j(2),X(e.type),j(),P(e.outcome?9:-1),j(),P(e.count&&e.count>1?10:-1),j(),P(e.origin?11:-1),j(),P(e.ms===void 0?-1:12),j(),P(e.renders?13:-1),j(),P(e.prev!==void 0||e.detail?14:-1),j(),P(e.caller?15:-1)}}function VP(e,t){if(e&1&&(V(0,`ol`,9),F(1,BP,16,12,`li`,null,kP),H()),e&2){let e=q();j(),I(e.shown())}}function HP(e,t){if(e&1&&(V(0,`div`,10)(1,`p`,21),Y(2),H(),V(3,`p`),Y(4,`Pick another source above, or interact with the form to record more.`),H()()),e&2){let e=q();j(2),Z(`No changes from `,e.filter())}}function UP(e,t){e&1&&(V(0,`div`,10)(1,`p`,21),Y(2,`No changes yet`),H(),V(3,`p`),Y(4,`Type into the form to see them here.`),H()())}var WP=[`all`,`user`,`code`,`devtools`],GP=class e{events=$.required();recording=$(!1);record=av();origins=WP;filter=A(`all`);shown=Q(()=>{let e=this.filter();return this.events().filter(t=>e===`all`||t.origin===e).slice(-100).reverse()});iso(e){return new Date(e).toISOString()}time=PO;static ɵfac=function(t){return new(t||e)};static ɵcmp=Oh({type:e,selectors:[[`app-forms-timeline`]],inputs:{events:[1,`events`],recording:[1,`recording`]},outputs:{record:`record`},decls:17,vars:5,consts:[[1,`toolbar`],[1,`record`],[`type`,`checkbox`,3,`change`,`checked`],[1,`record-text`],[1,`record-title`],[`aria-hidden`,`true`,1,`rec-dot`],[1,`record-hint`],[1,`chips`],[1,`sr-only`],[1,`events`],[1,`empty-state`],[`type`,`radio`,`name`,`timeline-origin`,3,`change`,`value`,`checked`],[1,`body`],[1,`line`],[1,`path`],[1,`event-type`],[1,`tag`],[1,`detail`],[1,`caller`],[1,`prev`],[`aria-hidden`,`true`,1,`arrow`],[1,`empty-title`]],template:function(e,t){e&1&&(V(0,`div`,0)(1,`label`,1)(2,`input`,2),K(`change`,function(){return t.record.emit(!t.recording())}),H(),V(3,`span`,3)(4,`span`,4),N(5,AP,1,0,`span`,5),Y(6,` Record details `),H(),V(7,`span`,6),Y(8,`Record calling code, validator changes and renders per keystroke`),H()()(),V(9,`fieldset`,7)(10,`legend`,8),Y(11,`Show changes from`),H(),F(12,jP,3,3,`label`,null,lg),H()(),N(14,VP,3,0,`ol`,9)(15,HP,5,1,`div`,10)(16,UP,5,0,`div`,10)),e&2&&(j(),J(`on`,t.recording()),j(),xg(`checked`,t.recording()),j(3),P(t.recording()?5:-1),j(7),I(t.origins),j(2),P(t.shown().length?14:t.events().length?15:16))},styles:[`.muted[_ngcontent-%COMP%] { - color: var(--%NS%text-2); -} - -code[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); - font-size: 12.5px; -} - -.small[_ngcontent-%COMP%] { - display: inline-block; - max-width: 100%; - height: 34px; - padding: 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - font-weight: 500; - line-height: 32px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - cursor: pointer; - transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); -} - -.small[_ngcontent-%COMP%]:hover { - background: var(--%NS%surface-3); - border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%border-strong)); -} - -.small[_ngcontent-%COMP%]:active { - background: var(--%NS%border-strong); -} - -.small[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.small[_ngcontent-%COMP%]:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.small.primary[_ngcontent-%COMP%] { - background: var(--%NS%accent); - border-color: var(--%NS%accent); - color: var(--%NS%accent-ink); - font-weight: 600; -} - -.small.primary[_ngcontent-%COMP%]:hover { - background: var(--%NS%accent-hover); - border-color: var(--%NS%accent-hover); -} - -.small.danger[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 40%, transparent); - color: var(--%NS%danger); -} - -.small.danger[_ngcontent-%COMP%]:hover { - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); - border-color: color-mix(in srgb, var(--%NS%danger) 55%, transparent); -} - -.small.armed[_ngcontent-%COMP%] { - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -.small.danger.armed[_ngcontent-%COMP%] { - background: var(--%NS%danger); - border-color: var(--%NS%danger); - color: #1f0707; - font-weight: 600; - box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent); -} - -.field-input[_ngcontent-%COMP%] { - min-width: 0; - height: 34px; - padding: 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%bg); - color: var(--%NS%text); - font-family: var(--%NS%font-mono); - font-size: 13px; - transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); -} - -.field-input[_ngcontent-%COMP%]::placeholder { - color: var(--%NS%text-3); - font-family: var(--%NS%font-sans); -} - -.field-input[_ngcontent-%COMP%]:hover { - border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%border-strong)); -} - -.field-input[_ngcontent-%COMP%]:focus, -.field-input[_ngcontent-%COMP%]:focus-visible { - outline: none; - border-color: var(--%NS%accent); - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -.explain[_ngcontent-%COMP%] { - margin: 0; - padding: 12px 16px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%bg); - color: var(--%NS%text); - font-family: var(--%NS%font-mono); - font-size: 12.5px; - line-height: 1.6; - white-space: pre-wrap; - overflow-wrap: anywhere; - tab-size: 2; -} - -.explain[aria-busy=true][_ngcontent-%COMP%] { - color: var(--%NS%text-3); -} - -.section-label[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.tag[_ngcontent-%COMP%] { - display: inline-block; - margin: 0; - padding: 1px 8px; - border: 1px solid var(--%NS%border); - border-radius: 99px; - background: var(--%NS%surface-2); - color: var(--%NS%text-2); - font-size: 11px; - font-weight: 500; - line-height: 18px; - white-space: nowrap; - font-variant-numeric: tabular-nums; -} - -.tag[data-tone=ok][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); - background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); - color: var(--%NS%ok); -} - -.tag[data-tone=warn][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); - background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); - color: var(--%NS%warn); -} - -.tag[data-tone=bad][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); - color: var(--%NS%danger); -} - -.status[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-2); - font-size: 12.5px; - line-height: 1.5; - overflow-wrap: anywhere; -} - -.empty-state[_ngcontent-%COMP%] { - display: grid; - justify-items: center; - gap: 6px; - margin: 0; - padding: 40px 24px; - border: 1px dashed var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - color: var(--%NS%text-2); - font-size: 13px; - line-height: 1.5; - text-align: center; -} - -.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { - max-width: 52ch; - margin: 0; -} - -.empty-state[_ngcontent-%COMP%] .empty-title[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-size: 14px; - font-weight: 600; -} - -.spinner[_ngcontent-%COMP%] { - width: 16px; - height: 16px; - border: 2px solid var(--%NS%border-strong); - border-top-color: var(--%NS%accent); - border-radius: 50%; - animation: spin 0.8s linear infinite; -} - -[_nghost-%COMP%] { - display: grid; - gap: 12px; - min-width: 0; -} - -.toolbar[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 12px; - align-items: center; - justify-content: space-between; -} - -.record[_ngcontent-%COMP%] { - display: inline-flex; - flex: 1 1 260px; - gap: 10px; - align-items: flex-start; - min-width: 0; - padding: 8px 12px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - cursor: pointer; - transition: border-color 150ms var(--%NS%ease), background-color 150ms var(--%NS%ease); -} - -.record[_ngcontent-%COMP%]:hover { - border-color: var(--%NS%border-strong); -} - -.record.on[_ngcontent-%COMP%] { - border-color: var(--%NS%accent-line); - background: var(--%NS%accent-soft); -} - -.record[_ngcontent-%COMP%]:has(input:focus-visible) { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.record[_ngcontent-%COMP%] input[_ngcontent-%COMP%] { - flex: none; - width: 16px; - height: 16px; - margin: 2px 0 0; - accent-color: var(--%NS%accent); - cursor: pointer; -} - -.record[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:focus-visible { - outline: none; -} - -.record-text[_ngcontent-%COMP%] { - display: grid; - gap: 2px; - min-width: 0; -} - -.record-title[_ngcontent-%COMP%] { - display: inline-flex; - gap: 6px; - align-items: center; - color: var(--%NS%text-strong); - font-size: 13px; - font-weight: 500; -} - -.record-hint[_ngcontent-%COMP%] { - color: var(--%NS%text-2); - font-size: 12px; - line-height: 1.4; -} - -.rec-dot[_ngcontent-%COMP%] { - width: 8px; - height: 8px; - border-radius: 50%; - background: var(--%NS%danger); - box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 20%, transparent); - animation: _ngcontent-%COMP%_rec-pulse 1.6s ease-in-out infinite; -} - -@keyframes _ngcontent-%COMP%_rec-pulse { - 50% { - opacity: 0.45; - } -} -.chips[_ngcontent-%COMP%] { - display: inline-flex; - flex: none; - gap: 2px; - min-width: 0; - height: 34px; - margin: 0; - padding: 2px; - background: var(--%NS%bg); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); -} - -.chips[_ngcontent-%COMP%] label[_ngcontent-%COMP%] { - position: relative; - display: inline-flex; - align-items: center; - height: 28px; - padding: 0 12px; - border-radius: 7px; - color: var(--%NS%text-2); - font-size: 12.5px; - font-weight: 500; - text-transform: capitalize; - cursor: pointer; - user-select: none; - transition: background-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); -} - -.chips[_ngcontent-%COMP%] label[_ngcontent-%COMP%]:hover { - color: var(--%NS%text); - background: var(--%NS%surface-2); -} - -.chips[_ngcontent-%COMP%] input[_ngcontent-%COMP%] { - position: absolute; - inset: 0; - width: 100%; - height: 100%; - margin: 0; - opacity: 0; - cursor: pointer; -} - -.chips[_ngcontent-%COMP%] label[_ngcontent-%COMP%]:has(input:checked) { - background: var(--%NS%surface-3); - color: var(--%NS%text-strong); - box-shadow: inset 0 0 0 1px var(--%NS%border-strong); -} - -.chips[_ngcontent-%COMP%] label[_ngcontent-%COMP%]:has(input:focus-visible) { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.events[_ngcontent-%COMP%] { - display: grid; - gap: 2px; - margin: 0; - padding: 4px; - list-style: none; - background: var(--%NS%surface-2); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - font-size: 13px; - animation: enter 0.35s var(--%NS%ease) both; -} - -.events[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: 11ch minmax(0, 1fr); - gap: 12px; - align-items: baseline; - padding: 8px 12px; - border-radius: 6px; - color: var(--%NS%text); - transition: background-color 150ms var(--%NS%ease); -} - -.events[_ngcontent-%COMP%] li[_ngcontent-%COMP%]:hover { - background: var(--%NS%surface-3); -} - -.events[_ngcontent-%COMP%] li[data-type=submit][_ngcontent-%COMP%] { - background: var(--%NS%accent-soft); - box-shadow: inset 2px 0 0 var(--%NS%accent); - color: var(--%NS%text-strong); -} - -time[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-family: var(--%NS%font-mono); - font-size: 12px; - font-variant-numeric: tabular-nums; - white-space: nowrap; -} - -.body[_ngcontent-%COMP%] { - display: grid; - gap: 4px; - min-width: 0; -} - -.line[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 4px 8px; - align-items: center; - min-width: 0; -} - -.path[_ngcontent-%COMP%] { - color: #fde68a; - overflow-wrap: anywhere; -} - -.event-type[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-size: 12px; - font-weight: 600; -} - -.tag[_ngcontent-%COMP%] { - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; -} - -.detail[_ngcontent-%COMP%] { - color: var(--%NS%text); - font-family: var(--%NS%font-mono); - font-size: 12.5px; - overflow-wrap: anywhere; -} - -.prev[_ngcontent-%COMP%] { - color: var(--%NS%text-2); - text-decoration: line-through; - text-decoration-color: color-mix(in srgb, var(--%NS%text-2) 50%, transparent); -} - -.arrow[_ngcontent-%COMP%] { - margin: 0 6px; - color: var(--%NS%text-3); -} - -.caller[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-family: var(--%NS%font-mono); - font-size: 12px; - overflow-wrap: anywhere; -} - -@media (max-width: 480px) { - .events[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { - grid-template-columns: minmax(0, 1fr); - gap: 4px; - } - .chips[_ngcontent-%COMP%] { - width: 100%; - } - .chips[_ngcontent-%COMP%] label[_ngcontent-%COMP%] { - flex: 1; - justify-content: center; - padding: 0 8px; - } -}`]})},KP=()=>[],qP=(e,t)=>t.id,JP=(e,t)=>t.node.path;function YP(e,t){e&1&&(R(0,`div`,0),B(1,`span`,4),R(2,`p`),Y(3,`Connecting to the devtools server…`),z()())}function XP(e,t){if(e&1){let e=W();R(0,`div`,1)(1,`p`,5),Y(2,`Could not load forms`),z(),R(3,`p`,6),Y(4,` The devtools server did not answer. Check that the app is running, then try again. `),z(),R(5,`button`,7),G(`click`,function(){return O(e),k(q().retry())}),Y(6,`Try again`),z()()}}function ZP(e,t){e&1&&(R(0,`div`,0),B(1,`span`,4),R(2,`p`),Y(3,`Loading forms…`),z()())}function QP(e,t){e&1&&(R(0,`div`,2)(1,`p`,5),Y(2,`No forms on the page yet`),z(),R(3,`p`,6),Y(4,` Open a page that renders a form. Signal Forms, reactive and template-driven forms all show up here, in development builds. `),z()())}function $P(e,t){if(e&1){let e=W();R(0,`div`,2)(1,`p`,5),Y(2,`No forms on this page`),z(),R(3,`p`,6),Y(4),z(),R(5,`button`,7),G(`click`,function(){return O(e),k(q().allPages.set(!0))}),Y(6,` Show forms from all pages `),z()()}if(e&2){let e=q();j(4),O_(` Other connected tabs report `,e.forms().length,` `,e.forms().length===1?`form`:`forms`,`. `)}}function eF(e,t){if(e&1){let e=W();R(0,`label`,11)(1,`input`,15),G(`change`,function(t){return O(e),k(q(2).allPages.set(t.target.checked))}),z(),Y(2,` All pages `),z()}if(e&2){let e=q(2);j(),L(`checked`,e.allPages())}}function tF(e,t){e&1&&(R(0,`span`,22),Y(1),R(2,`span`,21),Y(3,` errors`),z()()),e&2&&(j(),X(t))}function nF(e,t){if(e&1){let e=W();R(0,`li`)(1,`button`,16),G(`click`,function(){let t=O(e).$implicit;return k(q(2).selectForm(t.id))}),B(2,`span`,17),R(3,`span`,18),Y(4),z(),R(5,`span`,19),Y(6),R(7,`span`,20),Y(8),z(),R(9,`span`,21),Y(10),z()(),N(11,tF,4,1,`span`,22),z()()}if(e&2){let e,n=t.$implicit,r=q(2);j(),J(`active`,n.id===r.selected()?.id),M(`aria-current`,n.id===r.selected()?.id?`true`:null),j(),M(`data-status`,n.root.status),j(),M(`title`,n.label),j(),X(n.label),j(2),Z(``,r.kindLabel(n.kind),` · `),j(2),X(n.id),j(2),Z(`, `,n.root.status),j(),P((e=r.counts().get(n.id)?.errors)?11:-1,e)}}function rF(e,t){if(e&1){let e=W();R(0,`section`,13)(1,`h2`,23),Y(2),z(),R(3,`p`,24),Y(4,` This form is no longer on the page. It comes back here if the page renders it again. `),z(),R(5,`button`,7),G(`click`,function(){O(e);let t=q(2);return k(t.selectForm(t.visible()[0].id))}),Y(6),z()()}if(e&2){let e=q(2);j(2),X(t),j(4),Z(` Show `,e.visible()[0].label,` `)}}function iF(e,t){if(e&1&&(R(0,`span`),Y(1),z()),e&2){let e=q();j(),X(e.submitted?`submitted`:`not submitted`)}}function aF(e,t){e&1&&(R(0,`span`),Y(1,`submitting`),z())}function oF(e,t){if(e&1&&(R(0,`li`)(1,`code`),Y(2),z(),Y(3),R(4,`code`,46),Y(5),z()()),e&2){let e=t.$implicit;j(2),X(e.path||`(form)`),j(),Z(` `,e.message,` `),j(2),X(e.kind)}}function sF(e,t){if(e&1&&(R(0,`details`,30)(1,`summary`),Y(2),z(),R(3,`ul`),F(4,oF,6,3,`li`,null,cg),z()()),e&2){let e=q();j(2),Z(`Error summary (`,e.errorSummary.length,`)`),j(2),I(e.errorSummary)}}function cF(e,t){if(e&1){let e=W();R(0,`button`,33),G(`click`,function(){return O(e),k(q(3).confirmAct(`restore`))}),Y(1),z()}if(e&2){let e=q(3);J(`armed`,e.armed()===`restore`),L(`disabled`,!e.canWrite()),M(`aria-describedby`,e.canWrite()?null:`forms-writes-off`)(`title`,`Restore `+e.snapshot()),j(),Z(` `,e.armed()===`restore`?`Confirm restore`:`Restore `+e.snapshot(),` `)}}function lF(e,t){if(e&1&&(R(0,`p`,39),Y(1),z()),e&2){let e=q(3);j(),X(e.writesOff)}}function uF(e,t){if(e&1){let e=W();R(0,`button`,47),G(`click`,function(){let t=O(e).$implicit;return k(q(3).tab_.set(t.id))}),Y(1),z()}if(e&2){let e=t.$implicit,n=q(3);L(`id`,`forms-tab-`+e.id),M(`aria-selected`,e.id===n.tab_())(`aria-controls`,`forms-panel-`+e.id)(`tabindex`,e.id===n.tab_()?0:-1),j(),Z(` `,e.label,` `)}}function dF(e,t){if(e&1){let e=W();R(0,`label`)(1,`input`,15),G(`change`,function(){let t=O(e).$implicit;return k(q(4).toggleChip(t.id))}),z(),Y(2),z()}if(e&2){let e=t.$implicit,n=q(4);j(),L(`checked`,n.active().has(e.id)),j(),Z(` `,e.label,` `)}}function fF(e,t){if(e&1&&(R(0,`div`,6),Y(1,` typed `),R(2,`code`),Y(3),U_(4,`json`),z(),Y(5,`, not in the model yet `),z()),e&2){let e=q(2).$implicit;j(3),X(G_(4,1,e.node.uncommitted))}}function pF(e,t){if(e&1&&(R(0,`div`,6),Y(1,` resets to `),R(2,`code`),Y(3),U_(4,`json`),z()()),e&2){let e=q(2).$implicit;j(3),X(G_(4,1,e.node.defaultValue))}}function mF(e,t){if(e&1&&(R(0,`code`),Y(1),U_(2,`json`),z(),N(3,fF,6,3,`div`,6),N(4,pF,5,3,`div`,6)),e&2){let e=q().$implicit;j(),X(G_(2,3,e.node.value)),j(2),P(e.node.uncommitted===void 0?-1:3),j(),P(e.node.defaultValue===void 0?-1:4)}}function hF(e,t){e&1&&(R(0,`span`,6),Y(1,`not created yet`),z())}function gF(e,t){if(e&1&&(R(0,`span`,28),Y(1),z()),e&2){let e=q().$implicit;M(`data-status`,e.node.status),j(),X(e.node.status)}}function _F(e,t){e&1&&(R(0,`span`),Y(1,`touched`),z())}function vF(e,t){if(e&1&&(R(0,`span`),Y(1),z()),e&2){let e=q().$implicit;j(),X(e.node.changed===!1?`dirty, unchanged`:`dirty`)}}function yF(e,t){if(e&1&&(R(0,`span`),Y(1),z()),e&2){let e=q().$implicit;j(),Z(`not validated (`,e.node.skipped,`)`)}}function bF(e,t){if(e&1&&(R(0,`span`,62),Y(1),z()),e&2){let e=q().$implicit;j(),Z(`stale: `,e.node.stale.join(`, `))}}function xF(e,t){e&1&&(R(0,`span`,62),Y(1,`view out of sync`),z())}function SF(e,t){if(e&1&&(R(0,`span`),Y(1),z()),e&2){let e=q().$implicit;j(),Z(`redacted (`,e.node.redacted,`)`)}}function CF(e,t){e&1&&(R(0,`span`),Y(1,`required`),z())}function wF(e,t){e&1&&(R(0,`span`),Y(1,`readonly`),z())}function TF(e,t){e&1&&(R(0,`span`),Y(1,`hidden`),z())}function EF(e,t){if(e&1&&(R(0,`span`),Y(1),z()),e&2){let e=q().$implicit;j(),Z(`updates on `,e.node.updateOn)}}function DF(e,t){e&1&&(R(0,`span`),Y(1,`debouncing`),z())}function OF(e,t){e&1&&(R(0,`span`),Y(1,`validators`),z())}function kF(e,t){e&1&&(R(0,`span`),Y(1,`async validator`),z())}function AF(e,t){if(e&1&&(R(0,`span`),Y(1),z()),e&2){let e=t.$implicit;j(),X(e)}}function jF(e,t){if(e&1&&(R(0,`span`),Y(1),z()),e&2){let e=q().$implicit;j(),X(e.node.accessor)}}function MF(e,t){if(e&1&&(R(0,`span`),Y(1),z()),e&2){let e=q().$implicit;j(),Z(`name `,e.node.name)}}function NF(e,t){if(e&1&&(R(0,`span`),Y(1),U_(2,`json`),z()),e&2){let e=t.$implicit;j(),Z(`metadata `,G_(2,1,e))}}function PF(e,t){if(e&1&&(R(0,`span`),Y(1),z()),e&2){let e=t.$implicit;j(),Z(`disabled: `,e)}}function FF(e,t){if(e&1&&(R(0,`span`,65),Y(1),z()),e&2){let e=q().$implicit;j(),Z(`at `,e.params.path)}}function IF(e,t){if(e&1&&(R(0,`span`,65),Y(1),z()),e&2){let e=q().$implicit,t=q(5);j(),X(t.sourceText(e))}}function LF(e,t){if(e&1&&(R(0,`div`),Y(1),R(2,`code`,46),Y(3),z(),N(4,FF,2,1,`span`,65),N(5,IF,2,1,`span`,65),z()),e&2){let e=t.$implicit,n=q().$implicit,r=q(4);j(),Z(` `,r.errorText(n.node,e),` `),j(2),X(e.kind),j(),P(e.kind===`standardSchema`&&e.params?.path?4:-1),j(),P(e.source?5:-1)}}function RF(e,t){e&1&&(R(0,`div`,64),Y(1,`not shown to the user`),z())}function zF(e,t){if(e&1&&(R(0,`tr`)(1,`td`,66),Y(2),z()()),e&2){let e=q().$implicit;j(),n_(`padding-left`,28+e.depth*16,`px`),j(),O_(` `,e.node.truncated,` more fields under `,e.node.path||`the form`,` not shown `)}}function BF(e,t){if(e&1){let e=W();R(0,`tr`,55),G(`mouseenter`,function(){let t=O(e).$implicit,n=q(2);return k(q(2).highlight(n.id,t.node.path))})(`mouseleave`,function(){return O(e),k(q(4).highlight(null,``))}),R(1,`th`,56)(2,`button`,57),G(`focus`,function(){let t=O(e).$implicit,n=q(2);return k(q(2).highlight(n.id,t.node.path))})(`blur`,function(){return O(e),k(q(4).highlight(null,``))})(`click`,function(){let t=O(e).$implicit;return k(q(4).fieldPath.set(t.node.path))}),Y(3),z(),R(4,`span`,58),Y(5),z()(),R(6,`td`,59),N(7,mF,5,5),z(),R(8,`td`,60),N(9,hF,2,0,`span`,6)(10,gF,2,2,`span`,28),z(),R(11,`td`,61),N(12,_F,2,0,`span`),N(13,vF,2,1,`span`),N(14,yF,2,1,`span`),N(15,bF,2,1,`span`,62),N(16,xF,2,0,`span`,62),N(17,SF,2,1,`span`),N(18,CF,2,0,`span`),N(19,wF,2,0,`span`),N(20,TF,2,0,`span`),N(21,EF,2,1,`span`),N(22,DF,2,0,`span`),N(23,OF,2,0,`span`),N(24,kF,2,0,`span`),F(25,AF,2,1,`span`,null,lg),N(27,jF,2,1,`span`),N(28,MF,2,1,`span`),F(29,NF,3,3,`span`,null,cg),F(31,PF,2,1,`span`,null,cg),z(),R(33,`td`,63),F(34,LF,6,4,`div`,null,cg),N(36,RF,2,0,`div`,64),z()(),N(37,zF,3,4,`tr`)}if(e&2){let e=t.$implicit,n=q(4);J(`invalid`,e.node.errors.length),j(),n_(`padding-left`,12+e.depth*16,`px`),j(),M(`aria-label`,`Highlight `+(e.node.path||`the form`)+` on the page`)(`aria-pressed`,e.node.path===n.fieldPath())(`title`,e.node.path||`(form)`),j(),Z(` `,e.node.key||`(form)`,` `),j(2),X(e.node.type),j(2),P(e.node.type===`control`?7:-1),j(2),P(e.node.materialized===!1?9:10),j(3),P(e.node.touched?12:-1),j(),P(e.node.dirty?13:-1),j(),P(e.node.skipped?14:-1),j(),P(e.node.stale?.length?15:-1),j(),P(e.node.dom?.drift===void 0?-1:16),j(),P(e.node.redacted?17:-1),j(),P(e.node.required?18:-1),j(),P(e.node.readonly?19:-1),j(),P(e.node.hidden?20:-1),j(),P(e.node.updateOn?21:-1),j(),P(e.node.debouncing?22:-1),j(),P(e.node.validators?.sync?23:-1),j(),P(e.node.validators?.async?24:-1),j(),I(n.constraintList(e.node)),j(2),P(e.node.accessor?27:-1),j(),P(e.node.name?28:-1),j(),I(e.node.metadata??z_(28,KP)),j(2),I(e.node.disabledReasons??z_(29,KP)),j(3),I(e.node.errors),j(2),P(e.node.errors.length&&e.node.dom?.errorShown===!1?36:-1),j(),P(e.node.truncated?37:-1)}}function VF(e,t){e&1&&Y(0),e&2&&Z(` No field path matches "`,q(5).filter(),`". `)}function HF(e,t){e&1&&Y(0,` No field matches the selected filters. `)}function UF(e,t){if(e&1&&(R(0,`tr`)(1,`td`,67),N(2,VF,1,1)(3,HF,1,0),z()()),e&2){let e=q(4);j(2),P(e.filter()?2:3)}}function WF(e,t){if(e&1&&B(0,`app-forms-field-detail`,54),e&2){let e=q(2),n=q(2);L(`form`,e)(`node`,t)(`version`,n.version())(`rpc`,n.rpc())}}function GF(e,t){if(e&1){let e=W();R(0,`div`,48)(1,`input`,49),G(`input`,function(t){return O(e),k(q(3).onFilter(t))}),z(),R(2,`fieldset`,50)(3,`legend`,21),Y(4,`Show only fields that are`),z(),F(5,dF,3,2,`label`,null,qP),z()(),R(7,`div`,51)(8,`table`,52)(9,`thead`)(10,`tr`)(11,`th`,53),Y(12,`Field`),z(),R(13,`th`,53),Y(14,`Value`),z(),R(15,`th`,53),Y(16,`Status`),z(),R(17,`th`,53),Y(18,`State`),z(),R(19,`th`,53),Y(20,`Errors`),z()()(),R(21,`tbody`),F(22,BF,38,30,null,null,JP,!1,UF,4,1,`tr`),z()()(),N(25,WF,1,4,`app-forms-field-detail`,54)}if(e&2){let e,t=q(3);j(),L(`value`,t.filter()),j(4),I(t.chips),j(17),I(t.rows()),j(3),P((e=t.selectedNode())?25:-1,e)}}function KF(e,t){if(e&1){let e=W();R(0,`app-forms-timeline`,68),G(`record`,function(t){return O(e),k(q(3).setRecording(t))}),z()}if(e&2){let e=q(3);L(`events`,e.selectedEvents())(`recording`,e.recording())}}function qF(e,t){if(e&1&&B(0,`app-forms-submit`,45),e&2){let e=q(),t=q(2);L(`formId`,e.id)(`version`,t.version())(`rpc`,t.rpc())}}function JF(e,t){if(e&1&&B(0,`app-forms-lint`,45),e&2){let e=q(),t=q(2);L(`formId`,e.id)(`version`,t.version())(`rpc`,t.rpc())}}function YF(e,t){if(e&1){let e=W();R(0,`section`,14)(1,`div`,25)(2,`h2`,23),Y(3),z(),R(4,`p`,26),Y(5),R(6,`code`),Y(7),z()()(),R(8,`div`,27)(9,`span`,28),Y(10),z(),R(11,`span`),Y(12),z(),R(13,`span`),Y(14),z(),N(15,iF,2,1,`span`),N(16,aF,2,0,`span`),R(17,`span`,29)(18,`b`),Y(19),z(),Y(20,` fields · `),R(21,`b`),Y(22),z(),Y(23,` errors`),z()(),N(24,sF,6,1,`details`,30),R(25,`div`,31)(26,`div`,32)(27,`button`,33),G(`click`,function(){return O(e),k(q(2).act(`touch-all`))}),Y(28,` Touch all `),z(),R(29,`button`,33),G(`click`,function(){return O(e),k(q(2).act(`revalidate`))}),Y(30,` Revalidate `),z(),R(31,`button`,7),G(`click`,function(){return O(e),k(q(2).act(`focus-first-invalid`))}),Y(32,` Focus first invalid `),z(),R(33,`button`,7),G(`click`,function(){return O(e),k(q(2).pick())}),Y(34,`Pick field on page`),z(),B(35,`span`,34),R(36,`button`,7),G(`click`,function(){return O(e),k(q(2).act(`snapshot`))}),Y(37,`Snapshot`),z(),N(38,cF,2,6,`button`,35),B(39,`span`,36),R(40,`button`,37),G(`click`,function(){return O(e),k(q(2).confirmAct(`reset`))}),Y(41),z(),R(42,`button`,38),G(`click`,function(){return O(e),k(q(2).confirmAct(`submit`))}),Y(43),z()(),N(44,lF,2,1,`p`,39),R(45,`p`,40),Y(46),z()(),R(47,`div`,41),G(`keydown`,function(t){return O(e),k(q(2).onKey(t))}),F(48,uF,2,5,`button`,42,qP),z(),R(50,`div`,43),N(51,GF,26,3)(52,KF,1,2,`app-forms-timeline`,44)(53,qF,1,3,`app-forms-submit`,45)(54,JF,1,3,`app-forms-lint`,45),z()()}if(e&2){let e,n=t,r=q(2);j(3),X(n.label),j(2),Z(` `,r.kindLabel(n.kind),` · `),j(2),X(n.id),j(2),M(`data-status`,n.root.status),j(),X(n.root.status),j(2),X(n.root.dirty?`dirty`:`pristine`),j(2),X(n.root.touched?`touched`:`untouched`),j(),P(n.submitted===void 0?-1:15),j(),P(n.root.submitting?16:-1),j(3),X(r.counts().get(n.id)?.fields),j(2),J(`has-errors`,r.counts().get(n.id)?.errors),j(),X(r.counts().get(n.id)?.errors),j(2),P(n.errorSummary?.length?24:-1),j(3),L(`disabled`,!r.canWrite()),M(`aria-describedby`,r.canWrite()?null:`forms-writes-off`),j(2),L(`disabled`,!r.canWrite()),M(`aria-describedby`,r.canWrite()?null:`forms-writes-off`),j(9),P(r.snapshot()?38:-1),j(2),J(`armed`,r.armed()===`reset`),L(`disabled`,!r.canWrite()),M(`aria-describedby`,r.canWrite()?null:`forms-writes-off`),j(),Z(` `,r.armed()===`reset`?`Confirm reset`:`Reset`,` `),j(),J(`armed`,r.armed()===`submit`),L(`disabled`,!r.canWrite()),M(`aria-describedby`,r.canWrite()?null:`forms-writes-off`),j(),Z(` `,r.armed()===`submit`?`Confirm submit`:`Submit`,` `),j(),P(r.canWrite()?-1:44),j(2),X(r.message()),j(2),I(r.tabs),j(2),L(`id`,`forms-panel-`+r.tab_()),M(`aria-labelledby`,`forms-tab-`+r.tab_()),j(),P((e=r.tab_())===`fields`?51:e===`timeline`?52:e===`submit`?53:e===`lint`?54:-1)}}function XF(e,t){if(e&1&&(R(0,`div`,3)(1,`div`,8)(2,`h2`,9),Y(3,` Forms `),R(4,`span`,10),Y(5),z()(),N(6,eF,3,1,`label`,11),R(7,`ul`,12),F(8,nF,12,10,`li`,null,qP),z()(),N(10,rF,7,2,`section`,13)(11,YF,55,34,`section`,14),z()),e&2){let e,t=q();j(5),X(t.visible().length),j(),P(t.hostPageId&&(t.allPages()||t.otherPages())?6:-1),j(2),I(t.visible()),j(2),P((e=t.missing())?10:(e=t.selected())?11:-1,e)}}var ZF=[{id:`fields`,label:`Fields`},{id:`timeline`,label:`Timeline`},{id:`submit`,label:`Submit`},{id:`lint`,label:`Lint`}],QF=[{id:`invalid`,label:`Invalid`},{id:`dirty`,label:`Dirty`},{id:`touched`,label:`Touched`},{id:`disabled`,label:`Disabled`},{id:`hidden-error`,label:`Error not shown`}];function $F(e,t){switch(t){case`invalid`:return e.errors.length>0;case`dirty`:return e.dirty&&e.type===`control`;case`touched`:return e.touched&&e.type===`control`;case`disabled`:return e.status===`DISABLED`;case`hidden-error`:return e.dom?.errorShown===!1}}function eI(e){return e.errors.length+(e.children??[]).reduce((e,t)=>e+eI(t),0)}function tI(e){return e.children?e.children.reduce((e,t)=>e+tI(t),0):+(e.type===`control`&&e.materialized!==!1)}var nI=class e{rpc=$(null);focus=$(null);canWrite=Q(()=>AT(this.rpc(),`forms`));writesOff=yT(`forms`);focusHandled=av();forms=A([]);events=A([]);loading=A(!0);failed=A(!1);selectedId=A(null);selectedLabel=A(null);hostPageId=TT();allPages=A(!1);visible=Q(()=>{let e=this.forms(),t=this.hostPageId;return t&&!this.allPages()?e.filter(e=>dP(e.id)===t):e});otherPages=Q(()=>this.forms().some(e=>dP(e.id)!==this.hostPageId));instrumented=A([]);recording=Q(()=>{let e=this.selected()?.id??``;return this.instrumented().some(t=>e.endsWith(`@${t}`))});filter=A(``);tabs=ZF;chips=QF;tab_=A(`fields`);active=A(new Set);fieldPath=A(null);version=A(0);message=A(``);armed=A(null);snapshot=A(null);unsubscribe=null;destroyRef=E(ws);counts=Q(()=>new Map(this.visible().map(e=>[e.id,{fields:tI(e.root),errors:eI(e.root)}])));selected=Q(()=>{let e=this.visible(),t=this.selectedId();if(t===null)return e[0]??null;let n=this.selectedLabel(),r=dP(t);return e.find(e=>e.id===t)??e.find(e=>e.label===n&&dP(e.id)===r)??e.find(e=>e.label===n)??null});missing=Q(()=>this.selectedId()!==null&&!this.selected()&&this.visible().length?this.selectedLabel()??this.selectedId():null);rows=Q(()=>{let e=this.selected();if(!e)return[];let t=this.filter().toLowerCase(),n=Array.from(this.active()),r=[],i=(e,a)=>{let o=r.length,s=(!t||e.path.toLowerCase().includes(t))&&n.every(t=>$F(e,t));for(let t of e.children??[])s=i(t,a+1)||s;return s&&r.splice(o,0,{node:e,depth:a}),s};return i(e.root,0),r});selectedNode=Q(()=>{let e=this.fieldPath(),t=this.selected();if(e===null||!t)return null;let n=t=>t.path===e?t:(t.children??[]).map(n).find(Boolean)??null;return n(t.root)});selectedEvents=Q(()=>{let e=this.selected()?.id;return this.events().filter(t=>t.formId===e).slice(-200)});constructor(){dc(()=>{let e=this.rpc();e&&this.load(e)}),dc(()=>{let e=this.focus();e&&ev(()=>{this.selectForm(e.id),this.focusHandled.emit()})}),this.destroyRef.onDestroy(()=>{this.unsubscribe?.(),this.highlight(null,``)})}async load(e){this.loading.set(!0),this.failed.set(!1);try{let t=await e.scope(`ng-devtools`).rpc.sharedState(`forms`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e;this.forms.set(t?.forms??[]),this.events.set(t?.events??[]),this.instrumented.set(t?.instrumented??[]),this.version.update(e=>e+1)};n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.failed.set(!0)}finally{this.loading.set(!1)}}retry(){let e=this.rpc();e&&this.load(e)}async pick(){let e=this.selected();if(!e)return;this.message.set(`Click a field in the app (Esc cancels).`);let t=await hP(this.rpc(),{action:`pick`,formId:e.id}),n=t;if(!t.ok||!n.formId){this.message.set(gP(t));return}this.selectForm(n.formId),this.tab_.set(`fields`),this.fieldPath.set(n.path??``),this.message.set(`Picked ${n.path||`(form)`}.`)}async setRecording(e){let t=this.selected();if(!t)return;let n=await hP(this.rpc(),{action:`instrument`,formId:t.id,value:e});this.message.set(gP(n))}selectForm(e){this.hostPageId&&dP(e)&&dP(e)!==this.hostPageId&&this.allPages.set(!0),this.selectedId.set(e),this.selectedLabel.set(this.forms().find(t=>t.id===e)?.label??null),this.filter.set(``),this.fieldPath.set(null),this.snapshot.set(null),this.armed.set(null)}toggleChip(e){this.active.update(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})}async act(e,t={}){let n=this.selected();if(!n)return;this.armed.set(null);let r=await hP(this.rpc(),{action:e,formId:n.id,...t});r.snapshot&&this.snapshot.set(r.snapshot),this.message.set(gP(r))}confirmAct(e){if(this.armed()!==e){this.armed.set(e),this.message.set(`Press "Confirm ${e}" to ${e} the form in the app.`);return}this.act(e,{confirm:!0,snapshot:this.snapshot()??void 0})}onKey(e){let t=this.tabs.map(e=>e.id),n=t.indexOf(this.tab_()),r=n;if(e.key===`ArrowRight`)r=(n+1)%t.length;else if(e.key===`ArrowLeft`)r=(n-1+t.length)%t.length;else if(e.key===`Home`)r=0;else if(e.key===`End`)r=t.length-1;else return;e.preventDefault(),this.tab_.set(t[r]);let i=e.currentTarget;queueMicrotask(()=>i.querySelector(`#forms-tab-${t[r]}`)?.focus())}sourceText(e){let t=pP[e.source??``]??e.source??``;return e.from===void 0?t:`${t} on ${e.from||`the form`}`}onFilter(e){this.filter.set(e.target.value)}highlight(e,t){let n=this.rpc();n&&n.scope(`ng-devtools`).rpc.callEvent(`request-form-highlight`,e?{formId:e,path:t}:null)}kindLabel(e){return fP[e]}constraintList(e){return Object.entries(e.constraints??{}).map(([e,t])=>`${e} ${t}`)}errorText(e,t){return/^[a-z]/.test(t.message)?`${e.key||`The form`} ${t.message}`:t.message}static ɵfac=function(t){return new(t||e)};static ɵcmp=Oh({type:e,selectors:[[`app-forms-inspector`]],inputs:{rpc:[1,`rpc`],focus:[1,`focus`]},outputs:{focusHandled:`focusHandled`},decls:6,vars:1,consts:[[`role`,`status`,1,`empty`],[`role`,`alert`,1,`empty`],[1,`empty`],[1,`layout`],[`aria-hidden`,`true`,1,`spinner`],[1,`empty-title`],[1,`muted`],[`type`,`button`,1,`small`,3,`click`],[1,`sidebar`],[`id`,`forms-list-heading`,1,`list-heading`],[1,`list-count`],[1,`page-toggle`],[`aria-labelledby`,`forms-list-heading`,1,`form-list`],[`aria-labelledby`,`forms-detail-title`,1,`detail`,`gone`],[`aria-labelledby`,`forms-detail-title`,1,`detail`],[`type`,`checkbox`,3,`change`,`checked`],[`type`,`button`,1,`form-item`,3,`click`],[`aria-hidden`,`true`,1,`dot`],[1,`label`],[1,`kind`],[1,`id`],[1,`sr-only`],[1,`count`],[`id`,`forms-detail-title`],[`role`,`status`,1,`muted`],[1,`detail-head`],[1,`detail-meta`],[1,`summary`],[1,`badge`],[1,`totals`],[1,`error-summary`],[1,`action-bar`],[`role`,`group`,`aria-label`,`Form actions`,1,`actions`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`aria-hidden`,`true`,1,`divider`],[`type`,`button`,1,`small`,3,`armed`,`disabled`],[`aria-hidden`,`true`,1,`spacer`],[`type`,`button`,1,`small`,`danger`,3,`click`,`disabled`],[`type`,`button`,1,`small`,`primary`,3,`click`,`disabled`],[`id`,`forms-writes-off`,1,`muted`],[`role`,`status`,1,`status`],[`role`,`tablist`,`aria-label`,`Form views`,1,`tabs`,3,`keydown`],[`type`,`button`,`role`,`tab`,3,`id`],[`role`,`tabpanel`,1,`panel`,3,`id`],[3,`events`,`recording`],[3,`formId`,`version`,`rpc`],[1,`kind-tag`],[`type`,`button`,`role`,`tab`,3,`click`,`id`],[1,`filters`],[`type`,`search`,`placeholder`,`Filter fields by path`,`aria-label`,`Filter fields by path`,`autocomplete`,`off`,`spellcheck`,`false`,1,`filter`,3,`input`,`value`],[1,`chips`],[`role`,`region`,`aria-label`,`Fields`,`tabindex`,`0`,1,`table-scroll`],[1,`fields`],[`scope`,`col`],[3,`form`,`node`,`version`,`rpc`],[3,`mouseenter`,`mouseleave`],[`scope`,`row`,1,`name`],[`type`,`button`,1,`field`,3,`focus`,`blur`,`click`],[1,`type`],[1,`value`],[1,`status-cell`],[1,`flags`],[1,`warn`],[1,`errors`],[1,`unseen`],[1,`source`],[`colspan`,`5`,1,`muted`,`truncated`],[`colspan`,`5`,1,`no-match`],[3,`record`,`events`,`recording`]],template:function(e,t){e&1&&N(0,YP,4,0,`div`,0)(1,XP,7,0,`div`,1)(2,ZP,4,0,`div`,0)(3,QP,5,0,`div`,2)(4,$P,7,2,`div`,2)(5,XF,12,3,`div`,3),e&2&&P(t.rpc()?t.failed()?1:t.loading()?2:t.forms().length?t.visible().length?5:4:3:0)},dependencies:[bP,GP,EP,DP,Fy],styles:[`.muted[_ngcontent-%COMP%] { - color: var(--%NS%text-2); -} - -code[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); - font-size: 12.5px; -} - -.small[_ngcontent-%COMP%] { - display: inline-block; - max-width: 100%; - height: 34px; - padding: 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - font-weight: 500; - line-height: 32px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - cursor: pointer; - transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); -} - -.small[_ngcontent-%COMP%]:hover { - background: var(--%NS%surface-3); - border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%border-strong)); -} - -.small[_ngcontent-%COMP%]:active { - background: var(--%NS%border-strong); -} - -.small[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.small[_ngcontent-%COMP%]:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.small.primary[_ngcontent-%COMP%] { - background: var(--%NS%accent); - border-color: var(--%NS%accent); - color: var(--%NS%accent-ink); - font-weight: 600; -} - -.small.primary[_ngcontent-%COMP%]:hover { - background: var(--%NS%accent-hover); - border-color: var(--%NS%accent-hover); -} - -.small.danger[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 40%, transparent); - color: var(--%NS%danger); -} - -.small.danger[_ngcontent-%COMP%]:hover { - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); - border-color: color-mix(in srgb, var(--%NS%danger) 55%, transparent); -} - -.small.armed[_ngcontent-%COMP%] { - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -.small.danger.armed[_ngcontent-%COMP%] { - background: var(--%NS%danger); - border-color: var(--%NS%danger); - color: #1f0707; - font-weight: 600; - box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent); -} - -.field-input[_ngcontent-%COMP%] { - min-width: 0; - height: 34px; - padding: 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%bg); - color: var(--%NS%text); - font-family: var(--%NS%font-mono); - font-size: 13px; - transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); -} - -.field-input[_ngcontent-%COMP%]::placeholder { - color: var(--%NS%text-3); - font-family: var(--%NS%font-sans); -} - -.field-input[_ngcontent-%COMP%]:hover { - border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%border-strong)); -} - -.field-input[_ngcontent-%COMP%]:focus, -.field-input[_ngcontent-%COMP%]:focus-visible { - outline: none; - border-color: var(--%NS%accent); - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -.explain[_ngcontent-%COMP%] { - margin: 0; - padding: 12px 16px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%bg); - color: var(--%NS%text); - font-family: var(--%NS%font-mono); - font-size: 12.5px; - line-height: 1.6; - white-space: pre-wrap; - overflow-wrap: anywhere; - tab-size: 2; -} - -.explain[aria-busy=true][_ngcontent-%COMP%] { - color: var(--%NS%text-3); -} - -.section-label[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.tag[_ngcontent-%COMP%] { - display: inline-block; - margin: 0; - padding: 1px 8px; - border: 1px solid var(--%NS%border); - border-radius: 99px; - background: var(--%NS%surface-2); - color: var(--%NS%text-2); - font-size: 11px; - font-weight: 500; - line-height: 18px; - white-space: nowrap; - font-variant-numeric: tabular-nums; -} - -.tag[data-tone=ok][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); - background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); - color: var(--%NS%ok); -} - -.tag[data-tone=warn][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); - background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); - color: var(--%NS%warn); -} - -.tag[data-tone=bad][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); - color: var(--%NS%danger); -} - -.status[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-2); - font-size: 12.5px; - line-height: 1.5; - overflow-wrap: anywhere; -} - -.empty-state[_ngcontent-%COMP%] { - display: grid; - justify-items: center; - gap: 6px; - margin: 0; - padding: 40px 24px; - border: 1px dashed var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - color: var(--%NS%text-2); - font-size: 13px; - line-height: 1.5; - text-align: center; -} - -.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { - max-width: 52ch; - margin: 0; -} - -.empty-state[_ngcontent-%COMP%] .empty-title[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-size: 14px; - font-weight: 600; -} - -.spinner[_ngcontent-%COMP%] { - width: 16px; - height: 16px; - border: 2px solid var(--%NS%border-strong); - border-top-color: var(--%NS%accent); - border-radius: 50%; - animation: spin 0.8s linear infinite; -} - -[_nghost-%COMP%] { - display: block; -} - -.layout[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); - gap: 16px; - align-items: start; -} - -.sidebar[_ngcontent-%COMP%] { - min-width: 0; - padding: 8px; - background: var(--%NS%surface); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - animation: enter 0.35s var(--%NS%ease) both; -} - -.list-heading[_ngcontent-%COMP%] { - display: flex; - gap: 8px; - align-items: center; - margin: 4px 8px 8px; - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.list-count[_ngcontent-%COMP%] { - padding: 0 6px; - border-radius: 99px; - background: var(--%NS%surface-3); - color: var(--%NS%text-2); - font-size: 11px; - letter-spacing: 0; - line-height: 18px; - font-variant-numeric: tabular-nums; -} - -.form-list[_ngcontent-%COMP%] { - display: grid; - gap: 2px; - align-content: start; - margin: 0; - padding: 0; - list-style: none; -} - -.form-item[_ngcontent-%COMP%] { - width: 100%; - display: grid; - grid-template-columns: 8px minmax(0, 1fr) auto; - grid-template-areas: "dot label count" ". kind kind"; - gap: 2px 10px; - align-items: center; - padding: 8px 10px; - border: 0; - border-radius: var(--%NS%radius-sm); - background: transparent; - color: var(--%NS%text); - font: inherit; - text-align: left; - cursor: pointer; - transition: background-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); -} - -.form-item[_ngcontent-%COMP%]:hover { - background: var(--%NS%surface-2); -} - -.form-item[_ngcontent-%COMP%]:active { - background: var(--%NS%surface-3); -} - -.form-item.active[_ngcontent-%COMP%] { - background: var(--%NS%accent-soft); - box-shadow: inset 2px 0 0 var(--%NS%accent); - color: var(--%NS%text-strong); -} - -.form-item[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.form-item[_ngcontent-%COMP%] .dot[_ngcontent-%COMP%] { - grid-area: dot; -} - -.form-item[_ngcontent-%COMP%] .label[_ngcontent-%COMP%] { - grid-area: label; - min-width: 0; - overflow: hidden; - font-size: 13px; - font-weight: 500; - text-overflow: ellipsis; - white-space: nowrap; -} - -.form-item[_ngcontent-%COMP%] .kind[_ngcontent-%COMP%] { - grid-area: kind; - min-width: 0; - overflow: hidden; - color: var(--%NS%text-3); - font-size: 12px; - text-overflow: ellipsis; - white-space: nowrap; -} - -.form-item[_ngcontent-%COMP%] .id[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); - font-size: 11.5px; -} - -.form-item.active[_ngcontent-%COMP%] .kind[_ngcontent-%COMP%] { - color: var(--%NS%text-2); -} - -.form-item[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] { - grid-area: count; - min-width: 20px; - padding: 0 7px; - border: 1px solid color-mix(in srgb, var(--%NS%danger) 30%, transparent); - border-radius: 99px; - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); - color: var(--%NS%danger); - font-size: 11px; - font-weight: 600; - line-height: 18px; - text-align: center; - font-variant-numeric: tabular-nums; -} - -.dot[_ngcontent-%COMP%] { - width: 8px; - height: 8px; - border-radius: 50%; - background: var(--%NS%ok); - box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%ok) 15%, transparent); -} - -.dot[data-status=INVALID][_ngcontent-%COMP%] { - background: var(--%NS%danger); - box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 15%, transparent); -} - -.dot[data-status=PENDING][_ngcontent-%COMP%] { - background: var(--%NS%warn); - box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%warn) 15%, transparent); -} - -.dot[data-status=DISABLED][_ngcontent-%COMP%] { - background: var(--%NS%text-3); - box-shadow: none; -} - -.detail[_ngcontent-%COMP%] { - display: grid; - gap: 16px; - min-width: 0; - padding: 16px; - background: var(--%NS%surface); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - box-shadow: var(--%NS%shadow); - animation: enter 0.35s var(--%NS%ease) both; -} - -.detail-head[_ngcontent-%COMP%] { - display: grid; - gap: 4px; - min-width: 0; -} - -.detail-head[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-strong); - font-size: 16px; - font-weight: 600; - line-height: 1.3; - overflow-wrap: anywhere; -} - -.detail-meta[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-3); - font-size: 12px; - overflow-wrap: anywhere; -} - -.detail-meta[_ngcontent-%COMP%] code[_ngcontent-%COMP%] { - color: var(--%NS%text-2); - font-size: 11.5px; -} - -.gone[_ngcontent-%COMP%] { - justify-items: start; -} - -.gone[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-strong); - font-size: 16px; - font-weight: 600; - overflow-wrap: anywhere; -} - -.gone[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { - margin: 0; -} - -.page-toggle[_ngcontent-%COMP%] { - display: flex; - gap: 8px; - align-items: center; - min-height: 32px; - margin: 0 8px 8px; - color: var(--%NS%text-2); - font-size: 13px; - cursor: pointer; -} - -.page-toggle[_ngcontent-%COMP%] input[_ngcontent-%COMP%] { - width: 16px; - height: 16px; - margin: 0; - accent-color: var(--%NS%accent); -} - -.page-toggle[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.error-summary[_ngcontent-%COMP%] { - min-width: 0; - padding: 8px 12px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - font-size: 13px; -} - -.error-summary[_ngcontent-%COMP%] summary[_ngcontent-%COMP%] { - color: var(--%NS%text); - font-weight: 500; - cursor: pointer; -} - -.error-summary[_ngcontent-%COMP%] summary[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.error-summary[_ngcontent-%COMP%] ul[_ngcontent-%COMP%] { - display: grid; - gap: 4px; - margin: 8px 0 0; - padding: 0 0 0 16px; - color: var(--%NS%text); - overflow-wrap: anywhere; -} - -.error-summary[_ngcontent-%COMP%] .kind-tag[_ngcontent-%COMP%] { - margin-left: 6px; - color: var(--%NS%text-2); - font-size: 11px; -} - -.summary[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 6px; - align-items: center; - color: var(--%NS%text-2); - font-size: 12px; -} - -.summary[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]:not(.badge):not(.totals) { - padding: 0 10px; - border: 1px solid var(--%NS%border); - border-radius: 99px; - background: var(--%NS%surface-2); - color: var(--%NS%text); - line-height: 22px; -} - -.totals[_ngcontent-%COMP%] { - margin-left: auto; - color: var(--%NS%text-3); - font-variant-numeric: tabular-nums; -} - -.totals[_ngcontent-%COMP%] b[_ngcontent-%COMP%] { - color: var(--%NS%text); - font-weight: 600; -} - -.totals[_ngcontent-%COMP%] b.has-errors[_ngcontent-%COMP%] { - color: var(--%NS%danger); -} - -.badge[_ngcontent-%COMP%] { - display: inline-block; - padding: 0 8px; - border: 1px solid color-mix(in srgb, var(--%NS%ok) 30%, transparent); - border-radius: 99px; - background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); - color: var(--%NS%ok); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.04em; - line-height: 20px; - white-space: nowrap; -} - -.summary[_ngcontent-%COMP%] > .badge[_ngcontent-%COMP%] { - line-height: 22px; -} - -.badge[data-status=INVALID][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); - color: var(--%NS%danger); -} - -.badge[data-status=PENDING][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); - background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); - color: var(--%NS%warn); -} - -.badge[data-status=DISABLED][_ngcontent-%COMP%] { - border-color: var(--%NS%border-strong); - background: var(--%NS%surface-2); - color: var(--%NS%text-2); -} - -.action-bar[_ngcontent-%COMP%] { - display: flex; - flex-direction: column; - gap: 8px; - padding-bottom: 16px; - border-bottom: 1px solid var(--%NS%border); -} - -.actions[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 8px; - align-items: center; -} - -.divider[_ngcontent-%COMP%] { - width: 1px; - height: 20px; - background: var(--%NS%border-strong); -} - -.spacer[_ngcontent-%COMP%] { - flex: 1 1 0; -} - -.actions[_ngcontent-%COMP%] .small[_ngcontent-%COMP%]:not(.primary):not(.danger) { - max-width: 240px; -} - -.status[_ngcontent-%COMP%]:empty { - height: 0; - margin-top: -8px; -} - -.tabs[_ngcontent-%COMP%] { - display: inline-flex; - justify-self: start; - gap: 2px; - max-width: 100%; - height: 34px; - padding: 2px; - overflow-x: auto; - background: var(--%NS%bg); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); -} - -.tabs[_ngcontent-%COMP%] [role=tab][_ngcontent-%COMP%] { - flex: none; - height: 28px; - padding: 0 14px; - border: 0; - border-radius: 7px; - background: transparent; - color: var(--%NS%text-2); - font: inherit; - font-size: 13px; - font-weight: 500; - cursor: pointer; - transition: background-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); -} - -.tabs[_ngcontent-%COMP%] [role=tab][_ngcontent-%COMP%]:hover { - color: var(--%NS%text); - background: var(--%NS%surface-2); -} - -.tabs[_ngcontent-%COMP%] [role=tab][aria-selected=true][_ngcontent-%COMP%] { - background: var(--%NS%surface-3); - color: var(--%NS%text-strong); - box-shadow: inset 0 0 0 1px var(--%NS%border-strong); -} - -.tabs[_ngcontent-%COMP%] [role=tab][_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: -2px; -} - -.panel[_ngcontent-%COMP%] { - display: grid; - gap: 12px; - min-width: 0; - animation: enter 0.35s var(--%NS%ease) both; -} - -.filters[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 8px 12px; - align-items: center; -} - -.chips[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 6px; - min-width: 0; - margin: 0; - padding: 0; - border: 0; -} - -.chips[_ngcontent-%COMP%] label[_ngcontent-%COMP%] { - position: relative; - display: inline-flex; - align-items: center; - height: 28px; - padding: 0 12px; - border: 1px solid var(--%NS%border); - border-radius: 99px; - background: var(--%NS%surface-2); - color: var(--%NS%text-2); - font-size: 12px; - font-weight: 500; - white-space: nowrap; - cursor: pointer; - user-select: none; - transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease); -} - -.chips[_ngcontent-%COMP%] label[_ngcontent-%COMP%]:hover { - color: var(--%NS%text); - border-color: var(--%NS%border-strong); -} - -.chips[_ngcontent-%COMP%] input[_ngcontent-%COMP%] { - position: absolute; - inset: 0; - width: 100%; - height: 100%; - margin: 0; - opacity: 0; - cursor: pointer; -} - -.chips[_ngcontent-%COMP%] label[_ngcontent-%COMP%]:has(input:checked) { - border-color: var(--%NS%accent-line); - background: var(--%NS%accent-soft); - color: var(--%NS%accent); -} - -.chips[_ngcontent-%COMP%] label[_ngcontent-%COMP%]:has(input:focus-visible) { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.filter[_ngcontent-%COMP%] { - flex: 1 1 220px; - min-width: 0; - height: 34px; - padding: 0 12px 0 34px; - background-color: var(--%NS%bg); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e99' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: 12px center; - background-size: 14px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); -} - -.filter[_ngcontent-%COMP%]::placeholder { - color: var(--%NS%text-3); -} - -.filter[_ngcontent-%COMP%]:hover { - border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%border-strong)); -} - -.filter[_ngcontent-%COMP%]:focus, -.filter[_ngcontent-%COMP%]:focus-visible { - outline: none; - border-color: var(--%NS%accent); - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -.table-scroll[_ngcontent-%COMP%] { - overflow-x: auto; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); -} - -.table-scroll[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.fields[_ngcontent-%COMP%] { - width: 100%; - min-width: 680px; - border-collapse: collapse; - font-size: 13px; -} - -.fields[_ngcontent-%COMP%] th[_ngcontent-%COMP%], -.fields[_ngcontent-%COMP%] td[_ngcontent-%COMP%] { - padding: 8px 12px; - border-bottom: 1px solid var(--%NS%border); - text-align: left; - vertical-align: top; - line-height: 20px; -} - -.fields[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child > *[_ngcontent-%COMP%] { - border-bottom: 0; -} - -.fields[_ngcontent-%COMP%] thead[_ngcontent-%COMP%] th[_ngcontent-%COMP%] { - background: var(--%NS%surface-2); - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.06em; - line-height: 16px; - text-transform: uppercase; - white-space: nowrap; -} - -.fields[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] th[_ngcontent-%COMP%] { - color: var(--%NS%text); - font-weight: 500; - white-space: nowrap; -} - -.fields[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] { - transition: background-color 150ms var(--%NS%ease); -} - -.fields[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover { - background: var(--%NS%surface-2); -} - -.fields[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr.invalid[_ngcontent-%COMP%] > th[_ngcontent-%COMP%] { - box-shadow: inset 2px 0 0 color-mix(in srgb, var(--%NS%danger) 60%, transparent); -} - -.fields[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:has(.field[aria-pressed=true]) { - background: var(--%NS%accent-soft); -} - -.fields[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:has(.field[aria-pressed=true]) > th[_ngcontent-%COMP%] { - box-shadow: inset 2px 0 0 var(--%NS%accent); - color: var(--%NS%text-strong); -} - -.name[_ngcontent-%COMP%] { - max-width: 280px; -} - -.field[_ngcontent-%COMP%] { - display: inline-block; - max-width: 200px; - padding: 0; - overflow: hidden; - border: none; - border-radius: 4px; - background: none; - color: inherit; - font-family: var(--%NS%font-mono); - font-size: 12.5px; - font-weight: 500; - line-height: 20px; - text-align: left; - text-overflow: ellipsis; - vertical-align: top; - white-space: nowrap; - cursor: pointer; - transition: color 150ms var(--%NS%ease); -} - -.field[_ngcontent-%COMP%]:hover { - color: var(--%NS%accent-hover); - text-decoration: underline; - text-underline-offset: 3px; -} - -.field[aria-pressed=true][_ngcontent-%COMP%] { - color: var(--%NS%accent); -} - -.field[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.type[_ngcontent-%COMP%] { - margin-left: 8px; - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 400; - vertical-align: top; -} - -.value[_ngcontent-%COMP%] { - min-width: 140px; - max-width: 320px; -} - -.value[_ngcontent-%COMP%] code[_ngcontent-%COMP%], -.errors[_ngcontent-%COMP%] code[_ngcontent-%COMP%] { - color: #fde68a; - overflow-wrap: anywhere; -} - -.value[_ngcontent-%COMP%] .muted[_ngcontent-%COMP%] { - margin-top: 2px; - font-size: 12px; -} - -.status-cell[_ngcontent-%COMP%] { - white-space: nowrap; -} - -.flags[_ngcontent-%COMP%] { - min-width: 160px; -} - -.flags[_ngcontent-%COMP%] span[_ngcontent-%COMP%] { - display: inline-block; - margin: 0 4px 4px 0; - padding: 0 8px; - border: 1px solid var(--%NS%border); - border-radius: 99px; - background: var(--%NS%surface-2); - color: var(--%NS%text-2); - font-size: 11px; - line-height: 18px; - white-space: nowrap; -} - -.flags[_ngcontent-%COMP%] span.warn[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); - background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); - color: var(--%NS%warn); -} - -.errors[_ngcontent-%COMP%] { - min-width: 180px; -} - -.errors[_ngcontent-%COMP%] div[_ngcontent-%COMP%] { - color: var(--%NS%danger); - overflow-wrap: anywhere; -} - -.errors[_ngcontent-%COMP%] div[_ngcontent-%COMP%] + div[_ngcontent-%COMP%] { - margin-top: 4px; -} - -.errors[_ngcontent-%COMP%] .kind-tag[_ngcontent-%COMP%] { - margin-left: 6px; - color: var(--%NS%text-3); - font-size: 11px; -} - -.source[_ngcontent-%COMP%] { - margin-left: 6px; - color: var(--%NS%text-2); - font-size: 11px; -} - -.errors[_ngcontent-%COMP%] .unseen[_ngcontent-%COMP%] { - color: var(--%NS%warn); - font-size: 11px; -} - -.truncated[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 12px; - font-style: italic; -} - -.fields[_ngcontent-%COMP%] .no-match[_ngcontent-%COMP%] { - padding: 24px 12px; - color: var(--%NS%text-2); - text-align: center; -} - -.empty[_ngcontent-%COMP%] { - display: grid; - justify-items: center; - gap: 8px; - margin: 0; - padding: 48px 24px; - background: var(--%NS%surface); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - color: var(--%NS%text-2); - font-size: 13px; - line-height: 1.5; - text-align: center; - animation: enter 0.35s var(--%NS%ease) both; -} - -.empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { - max-width: 52ch; - margin: 0; -} - -.empty[_ngcontent-%COMP%] .small[_ngcontent-%COMP%] { - margin-top: 8px; -} - -.empty-title[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-size: 15px; - font-weight: 600; -} - -@media (max-width: 720px) { - .layout[_ngcontent-%COMP%] { - grid-template-columns: minmax(0, 1fr); - } - .form-list[_ngcontent-%COMP%] { - max-height: 240px; - overflow-y: auto; - } -} -@media (max-width: 480px) { - .detail[_ngcontent-%COMP%] { - padding: 12px; - } - .totals[_ngcontent-%COMP%] { - flex-basis: 100%; - margin-left: 0; - } - .spacer[_ngcontent-%COMP%], - .divider[_ngcontent-%COMP%] { - display: none; - } -}`]})},rI=(e,t)=>t.file+t.name,iI=(e,t)=>t.file+`:`+t.line,aI=(e,t)=>t.name;function oI(e,t){if(e&1&&(R(0,`p`,13),ps(),R(1,`svg`,26),B(2,`circle`,27)(3,`path`,28),z(),ms(),R(4,`span`)(5,`strong`),Y(6),z(),Y(7,` Pipe prototypes are patched in the inspected page to count calls and keep the last input and output. Stop recording when you are done. `),z()()),e&2){let e=q();j(6),Z(`Recording on `,e.instrumentedPages().length,` page(s).`)}}function sI(e,t){e&1&&(R(0,`div`,14),B(1,`span`,29),R(2,`p`,30),Y(3,`Scanning pipes…`),z()())}function cI(e,t){if(e&1){let e=W();R(0,`div`,15)(1,`p`,30),Y(2,`Couldn't load pipes`),z(),R(3,`p`,31),Y(4,`The devtools server did not answer. Check that it is running.`),z(),R(5,`button`,32),G(`click`,function(){return O(e),k(q().refresh())}),Y(6,`Try again`),z()()}}function lI(e,t){e&1&&(R(0,`div`,16)(1,`p`,30),Y(2,`No pipes found`),z(),R(3,`p`,31),Y(4,` No @Pipe classes were found in the source, and no template uses a built-in pipe yet. `),z()())}function uI(e,t){e&1&&(R(0,`span`,43),Y(1,`stale?`),z())}function dI(e,t){if(e&1&&(R(0,`span`,44),Y(1),z()),e&2){q();let e=R_(0);j(),Z(``,e.instanceCount,` live`)}}function fI(e,t){e&1&&(R(0,`span`,45),Y(1,`built-in`),z())}function pI(e,t){e&1&&(R(0,`span`,45),Y(1,`NgModule`),z())}function mI(e,t){if(e&1&&(R(0,`span`,47),Y(1),z()),e&2){let e=q().$implicit;j(),Z(`+`,(e.usageCount??1)-1,` more`)}}function hI(e,t){if(e&1){let e=W();I_(0),R(1,`li`)(2,`button`,38),G(`click`,function(){let t=O(e).$implicit;return k(q(3).select(t))})(`mouseenter`,function(){O(e);let t=R_(0);return k(q(3).highlightPipe(t))})(`mouseleave`,function(){return O(e),k(q(3).highlight(null))})(`focus`,function(){O(e);let t=R_(0);return k(q(3).highlightPipe(t))})(`blur`,function(){return O(e),k(q(3).highlight(null))}),R(3,`span`,39)(4,`span`,40),Y(5),z(),R(6,`span`,41),Y(7),z()(),R(8,`span`,42),N(9,uI,2,0,`span`,43),N(10,dI,2,1,`span`,44),N(11,fI,2,0,`span`,45),N(12,pI,2,0,`span`,45),R(13,`span`,45),Y(14),z()(),R(15,`span`,46),Y(16),N(17,mI,2,1,`span`,47),z()()()}if(e&2){let e=t.$implicit,n=q(3),r=L_(n.liveFor(e.name));j(2),J(`selected`,n.isSelected(e)),M(`aria-current`,n.isSelected(e)||null),j(3),X(e.name),j(2),X(e.className),j(2),P(r?.stale?9:-1),j(),P(r?10:-1),j(),P(e.builtin?11:-1),j(),P(e.isStandalone?-1:12),j(),J(`impure`,!e.isPure),j(),X(e.isPure?`pure`:`impure`),j(2),O_(` `,e.file,`:`,e.line,` `),j(),P(e.builtin&&(e.usageCount??0)>1?17:-1)}}function gI(e,t){if(e&1){let e=W();R(0,`ul`,37),G(`keydown`,function(t){return O(e),k(q(2).onListKey(t))}),F(1,hI,18,16,`li`,null,rI),z()}if(e&2){let e=q(2);j(),I(e.filtered())}}function _I(e,t){e&1&&Y(0),e&2&&Z(` Nothing matches “`,q(3).filter().trim(),`” in this view. `)}function vI(e,t){e&1&&Y(0,` None of the pipes fit this filter. `)}function yI(e,t){if(e&1){let e=W();R(0,`div`,35)(1,`p`,30),Y(2,`No pipes match`),z(),R(3,`p`,31),N(4,_I,1,1)(5,vI,1,0),z(),R(6,`button`,32),G(`click`,function(){return O(e),k(q(2).clearFilters())}),Y(7,`Clear filters`),z()()}if(e&2){let e=q(2);j(4),P(e.filter().trim()?4:5)}}function bI(e,t){e&1&&(R(0,`span`,45),Y(1,`built-in`),z())}function xI(e,t){if(e&1&&(R(0,`dt`),Y(1,`File`),z(),R(2,`dd`,51),Y(3),z()),e&2){let e=q();j(3),O_(``,e.file,`:`,e.line)}}function SI(e,t){if(e&1&&(R(0,`li`,51),Y(1),z()),e&2){let e=t.$implicit;j(),O_(``,e.file,`:`,e.line)}}function CI(e,t){if(e&1&&(R(0,`div`,50)(1,`h3`),Y(2,` Used in templates `),R(3,`span`,21),Y(4),z()(),R(5,`ul`,53),F(6,SI,2,2,`li`,51,iI),z()()),e&2){let e=q();j(4),X(e.usageCount),j(2),I(e.usages)}}function wI(e,t){e&1&&(R(0,`p`,54)(1,`span`,43),Y(2,`experimental`),z(),Y(3,` This pure pipe got an argument whose contents changed while its reference stayed the same, so it may be showing a stale value. `),z())}function TI(e,t){if(e&1){let e=W();R(0,`button`,59),G(`click`,function(){let t=O(e);return k(q(5).highlight(t))})(`mouseenter`,function(){let t=O(e);return k(q(5).highlight(t))})(`mouseleave`,function(){return O(e),k(q(5).highlight(null))})(`focus`,function(){let t=O(e);return k(q(5).highlight(t))})(`blur`,function(){return O(e),k(q(5).highlight(null))}),R(1,`span`,51),Y(2),z(),R(3,`span`,60),Y(4),z()()}if(e&2){let e=q().$implicit;M(`aria-label`,`Highlight `+e.name+` on the page`),j(2),X(e.name),j(2),X(e.count)}}function EI(e,t){if(e&1&&(R(0,`span`,58)(1,`span`,51),Y(2),z(),R(3,`span`,60),Y(4),z()()),e&2){let e=q().$implicit;j(2),X(e.name),j(2),X(e.count)}}function DI(e,t){if(e&1&&(R(0,`li`),N(1,TI,5,3,`button`,57)(2,EI,5,2,`span`,58),z()),e&2){let e,n=t.$implicit;j(),P((e=n.targets?.[0])?1:2,e)}}function OI(e,t){if(e&1&&(R(0,`li`,61),Y(1),R(2,`span`,62),Y(3),z()()),e&2){let e=t.$implicit,n=q(6);j(),O_(` `,n.describe(e.lastArgs),` → `,n.describe(e.lastResult),` `),j(2),Z(``,e.callCount,`×`)}}function kI(e,t){if(e&1&&(R(0,`dt`),Y(1,`Per instance`),z(),R(2,`dd`)(3,`ul`,53),F(4,OI,4,3,`li`,61,cg),z()()),e&2){let e=q();j(4),I(e.instances)}}function AI(e,t){if(e&1&&(R(0,`dt`),Y(1,`Last caller`),z(),R(2,`dd`,61),Y(3),z()),e&2){let e=q();j(3),X(e.lastCaller)}}function jI(e,t){if(e&1&&(R(0,`dt`),Y(1,`Calls`),z(),R(2,`dd`),Y(3),z(),R(4,`dt`),Y(5,`Last input`),z(),R(6,`dd`,61),Y(7),z(),R(8,`dt`),Y(9,`Last output`),z(),R(10,`dd`,61),Y(11),z(),N(12,kI,6,0),N(13,AI,4,1)),e&2){let e=t,n=q(4);j(3),X(e.callCount),j(4),X(n.describe(e.lastArgs)),j(4),X(n.describe(e.lastResult)),j(),P(e.instances?.length?12:-1),j(),P(e.lastCaller?13:-1)}}function MI(e,t){e&1&&(R(0,`dt`),Y(1,`Calls`),z(),R(2,`dd`,63),Y(3,`None recorded yet.`),z())}function NI(e,t){e&1&&(R(0,`p`,56),Y(1,`Turn on “Record calls” to see call counts and values.`),z())}function PI(e,t){if(e&1&&(N(0,wI,4,0,`p`,54),R(1,`dl`)(2,`dt`),Y(3,`Instances`),z(),R(4,`dd`),Y(5),z(),R(6,`dt`),Y(7,`Used by`),z(),R(8,`dd`)(9,`ul`,55),F(10,DI,3,1,`li`,null,aI),z()(),N(12,jI,14,5)(13,MI,4,0),z(),N(14,NI,2,0,`p`,56)),e&2){let e,n=t,r=q(3);P(n.stale?0:-1),j(5),X(n.instanceCount),j(5),I(n.components),j(2),P((e=n.call)?12:r.instrumenting()?13:-1,e),j(2),P(!n.call&&!r.instrumenting()?14:-1)}}function FI(e,t){e&1&&(R(0,`p`,52),Y(1,` Not in use on the connected page. Open a view that uses it, or connect the app. `),z())}function II(e,t){if(e&1&&(R(0,`header`,48)(1,`h2`,49),Y(2),z(),R(3,`span`,45),Y(4),z(),N(5,bI,2,0,`span`,45),z(),R(6,`div`,50)(7,`h3`),Y(8,`Declaration`),z(),R(9,`dl`)(10,`dt`),Y(11,`Class`),z(),R(12,`dd`,51),Y(13),z(),R(14,`dt`),Y(15,`Source`),z(),R(16,`dd`),Y(17),z(),N(18,xI,4,2),R(19,`dt`),Y(20,`Standalone`),z(),R(21,`dd`),Y(22),z(),R(23,`dt`),Y(24,`Pure`),z(),R(25,`dd`),Y(26),z()()(),N(27,CI,8,1,`div`,50),R(28,`div`,50)(29,`h3`),Y(30,`Live on the page`),z(),N(31,PI,15,4)(32,FI,2,0,`p`,52),z()),e&2){let e,n=t,r=q(2);j(2),X(n.name),j(),J(`impure`,!n.isPure),j(),X(n.isPure?`pure`:`impure`),j(),P(n.builtin?5:-1),j(8),X(n.className),j(4),X(n.builtin?`@angular/common`:`This project`),j(),P(n.builtin?-1:18),j(4),X(n.isStandalone?`Yes`:`No, declared in an NgModule`),j(4),Z(` `,n.isPure?`Yes, reruns only when an input changes`:`No, reruns on every check`,` `),j(),P(n.builtin&&n.usages?.length?27:-1),j(4),P((e=r.liveFor(n.name))?31:32,e)}}function LI(e,t){e&1&&(R(0,`h2`,64),Y(1,`Pipe details`),z(),R(2,`div`,65)(3,`p`,30),Y(4,`Pick a pipe`),z(),R(5,`p`,31),Y(6,` See where it is declared, which components use it and what it last returned. `),z()())}function RI(e,t){if(e&1&&(R(0,`div`,17)(1,`div`,33),N(2,gI,3,0,`ul`,34)(3,yI,8,1,`div`,35),z(),R(4,`section`,36),N(5,II,33,12)(6,LI,7,0),z()()),e&2){let e,t=q();j(2),P(t.filtered().length?2:3),j(3),P((e=t.selected())?5:6,e)}}function zI(e,t){if(e&1){let e=W();R(0,`button`,73),G(`click`,function(){let t=O(e);return k(q(3).highlight(t))})(`focus`,function(){let t=O(e);return k(q(3).highlight(t))})(`blur`,function(){return O(e),k(q(3).highlight(null))}),Y(1),z()}if(e&2){let e=q().$implicit;M(`aria-label`,`Highlight `+e.component+` on the page`),j(),Z(` `,e.component,` `)}}function BI(e,t){if(e&1&&(R(0,`span`,71),Y(1),z()),e&2){let e=q().$implicit;j(),X(e.component)}}function VI(e,t){e&1&&(R(0,`span`,45),Y(1,`no source`),z())}function HI(e,t){e&1&&(R(0,`span`,43),Y(1,`duplicate subscription`),z())}function UI(e,t){if(e&1){let e=W();R(0,`li`,69),G(`mouseenter`,function(){let t=O(e).$implicit;return k(q(2).highlight(t.target))})(`mouseleave`,function(){return O(e),k(q(2).highlight(null))}),N(1,zI,2,2,`button`,70)(2,BI,2,1,`span`,71),N(3,VI,2,0,`span`,45),N(4,HI,2,0,`span`,43),R(5,`span`,72),Y(6),z()()}if(e&2){let e,n=t.$implicit;j(),P((e=n.target)?1:2,e),j(2),P(n.hasSource?-1:3),j(),P(n.duplicate?4:-1),j(2),X(n.latestValue??`no value yet`)}}function WI(e,t){if(e&1&&(R(0,`section`,18)(1,`h2`,66),Y(2,` Async subscriptions `),R(3,`span`,21),Y(4),z()(),R(5,`p`,56),Y(6,` Each `),R(7,`span`,51),Y(8,`| async`),z(),Y(9,` subscribes on its own. Two on the same source mean the work runs twice. `),z(),R(10,`ul`,67),F(11,UI,7,4,`li`,68,cg),z()()),e&2){let e=q();j(4),X(e.async().length),j(7),I(e.async())}}function GI(e,t){e&1&&(R(0,`span`,21),Y(1),z()),e&2&&(j(),X(t.length))}function KI(e,t){e&1&&(R(0,`p`,22),Y(1,`Couldn't run the lint check. Try Refresh.`),z())}function qI(e,t){e&1&&(R(0,`p`,23),Y(1,`Checking…`),z())}function JI(e,t){e&1&&(R(0,`p`,24),Y(1,`No problems found.`),z())}function YI(e,t){if(e&1&&(R(0,`li`,74)(1,`div`,75)(2,`span`,76),Y(3),z(),R(4,`code`,77),Y(5),z(),R(6,`span`,78),Y(7),z()(),R(8,`p`,79),Y(9),z(),R(10,`p`,80)(11,`span`,81),Y(12,`Fix`),z(),Y(13),z()()),e&2){let e=t.$implicit;j(2),M(`data-tone`,e.severity),j(),X(e.severity),j(2),X(e.rule),j(2),k_(``,e.pipe,` · `,e.file,`:`,e.line),j(2),X(e.message),j(4),Z(` `,e.fix)}}function XI(e,t){if(e&1&&(R(0,`ul`,25),F(1,YI,14,8,`li`,74,cg),z()),e&2){let e=q();j(),I(e.lint())}}var ZI=[{value:`all`,label:`All pipes`},{value:`custom`,label:`Custom`},{value:`builtin`,label:`Built-in`},{value:`impure`,label:`Impure`},{value:`live`,label:`On the page`}],QI=class e{destroyRef=E(ws);host=E(Tl);rpc=$(null);kindOptions=ZI;pipes=A([]);filter=A(``);kind=A(`all`);loading=A(!1);loadFailed=A(!1);selected=A(null);live=A([]);async=A([]);lint=A(null);lintFailed=A(!1);instrumentedPages=A([]);instrumenting=A(!1);liveByName=Q(()=>new Map(this.live().map(e=>[e.name,e])));filtered=Q(()=>{let e=this.filter().trim().toLowerCase(),t=this.kind()??`all`,n=this.liveByName();return this.pipes().filter(r=>t===`custom`&&r.builtin||t===`builtin`&&!r.builtin||t===`impure`&&r.isPure||t===`live`&&!n.has(r.name)?!1:!e||r.name.toLowerCase().includes(e)||r.className.toLowerCase().includes(e)||r.file.toLowerCase().includes(e))});unsubscribe;constructor(){dc(()=>{let e=this.rpc();e&&(this.refresh(),this.loadLive(e))}),this.destroyRef.onDestroy(()=>{this.unsubscribe?.(),this.highlight(null)})}async refresh(){let e=this.rpc();if(e){this.loading.set(!0),this.loadFailed.set(!1);try{let t=await e.scope(`ng-devtools`).rpc.call(`get-pipes`);this.pipes.set(t);let n=this.selected();if(n){let e=t.find(e=>e.name===n.name&&e.file===n.file);this.selected.set(e??null)}}catch{this.loadFailed.set(!0)}finally{this.loading.set(!1)}this.loadLint(e)}}async loadLint(e){this.lintFailed.set(!1);try{let t=await e.scope(`ng-devtools`).rpc.call(`pipe-lint`);this.lint.set(t)}catch{this.lintFailed.set(!0)}}async loadLive(e){try{let t=await e.scope(`ng-devtools`).rpc.sharedState(`pipe-usage`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e;this.live.set(t?.pipes??[]),this.async.set(t?.async??[]);let n=t?.instrumented??[];this.instrumentedPages.set(n),this.instrumenting.set(n.length>0)};n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{}}async toggleInstrument(){let e=this.rpc();if(!e)return;let t=!this.instrumenting();this.instrumenting.set(t);try{await e.scope(`ng-devtools`).rpc.call(`request-instrument-pipes`,t)}catch{this.instrumenting.set(!t)}}liveFor(e){return this.liveByName().get(e)}describe(e){if(Array.isArray(e))return e.map(e=>this.describe(e)).join(`, `);if(typeof e==`string`)return e.length>80?`${e.slice(0,80)}…`:e;try{let t=JSON.stringify(e);return t&&t.length>120?`${t.slice(0,120)}…`:t??String(e)}catch{return String(e)}}isSelected(e){let t=this.selected();return t!==null&&t.name===e.name&&t.file===e.file}select(e){this.selected.set(this.isSelected(e)?null:e)}clearFilters(){this.filter.set(``),this.kind.set(`all`)}highlightPipe(e){this.highlight(e?.components.find(e=>e.targets?.length)?.targets?.[0])}highlight(e){let t=this.rpc();t&&t.scope(`ng-devtools`).rpc.call(`request-page-highlight`,e??null).catch(()=>{})}onListKey(e){if(![`ArrowDown`,`ArrowUp`,`Home`,`End`].includes(e.key))return;let t=Array.from(this.host.nativeElement.querySelectorAll(`[data-pipe-row]`));if(!t.length)return;let n=t.indexOf(document.activeElement),r=n;r=e.key===`ArrowDown`?Math.min(n+1,t.length-1):e.key===`ArrowUp`?Math.max(n-1,0):e.key===`Home`?0:t.length-1,e.preventDefault(),t[r]?.focus()}static ɵfac=function(t){return new(t||e)};static ɵcmp=Oh({type:e,selectors:[[`app-pipes-inspector`]],inputs:{rpc:[1,`rpc`]},decls:31,vars:15,consts:[[1,`intro`],[1,`toolbar`],[1,`search`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`search-icon`],[`cx`,`11`,`cy`,`11`,`r`,`7`],[`d`,`m20 20-3.5-3.5`],[`type`,`search`,`placeholder`,`Find a pipe, class or file…`,`aria-label`,`Find a pipe, class or file`,`autocomplete`,`off`,`spellcheck`,`false`,3,`input`,`keydown.escape`,`value`],[`ariaLabel`,`Show pipes`,3,`valueChange`,`options`,`value`],[`aria-live`,`polite`,1,`total`],[1,`actions`],[`type`,`button`,3,`click`,`disabled`],[`type`,`button`,1,`record`,3,`click`],[`aria-hidden`,`true`,1,`rec-dot`],[`role`,`status`,1,`notice`],[`role`,`status`,1,`state`],[`role`,`alert`,1,`state`],[1,`state`],[1,`layout`],[`aria-labelledby`,`async-title`,1,`section`],[`aria-labelledby`,`lint-title`,1,`section`],[`id`,`lint-title`],[1,`pill`],[`role`,`alert`,1,`empty-line`],[`role`,`status`,1,`empty-line`],[1,`empty-line`,`ok`],[1,`findings`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`cx`,`12`,`cy`,`12`,`r`,`9`],[`d`,`M12 11v5M12 8h.01`],[`aria-hidden`,`true`,1,`spinner`],[1,`state-title`],[1,`state-hint`],[`type`,`button`,3,`click`],[1,`list-wrap`],[`aria-label`,`Pipes`,1,`pipe-list`],[`role`,`status`,1,`state`,`compact`],[`id`,`pipe-detail`,`aria-labelledby`,`pipe-detail-title`,1,`detail`],[`aria-label`,`Pipes`,1,`pipe-list`,3,`keydown`],[`type`,`button`,`data-pipe-row`,``,`aria-controls`,`pipe-detail`,1,`row`,3,`click`,`mouseenter`,`mouseleave`,`focus`,`blur`],[1,`row-main`],[1,`name`,`mono`],[1,`sub`,`mono`],[1,`row-meta`],[1,`chip`,`warn`],[1,`chip`,`live`],[1,`chip`],[1,`row-file`,`mono`],[1,`more`],[1,`detail-head`],[`id`,`pipe-detail-title`,1,`mono`],[1,`block`],[1,`mono`],[1,`empty-line`],[1,`sites`],[`role`,`note`,1,`warning`],[1,`chips`],[1,`hint`],[`type`,`button`,1,`component`],[1,`component`],[`type`,`button`,1,`component`,3,`click`,`mouseenter`,`mouseleave`,`focus`,`blur`],[1,`count`],[1,`mono`,`value`],[1,`calls`],[1,`muted`],[`id`,`pipe-detail-title`,1,`visually-hidden`],[1,`state`,`compact`],[`id`,`async-title`],[1,`async-list`],[1,`async-row`],[1,`async-row`,3,`mouseenter`,`mouseleave`],[`type`,`button`,1,`component-name`,`mono`],[1,`mono`,`component-name`],[1,`mono`,`value`,`latest`],[`type`,`button`,1,`component-name`,`mono`,3,`click`,`focus`,`blur`],[1,`finding`],[1,`finding-head`],[1,`severity`],[1,`mono`,`rule`],[1,`where`,`mono`],[1,`finding-message`],[1,`finding-fix`],[1,`fix-label`]],template:function(e,t){if(e&1&&(R(0,`p`,0),Y(1,` Pipes declared in your source and the built-in pipes your templates use. Live data shows which components use each pipe on the page; turn on recording to capture calls and the last input and output. `),z(),R(2,`div`,1)(3,`div`,2),ps(),R(4,`svg`,3),B(5,`circle`,4)(6,`path`,5),z(),ms(),R(7,`input`,6),G(`input`,function(e){return t.filter.set(e.target.value)})(`keydown.escape`,function(){return t.filter.set(``)}),z()(),R(8,`app-select`,7),P_(`valueChange`,function(e){return N_(t.kind,e)||(t.kind=e),e}),z(),R(9,`span`,8),Y(10),z(),R(11,`div`,9)(12,`button`,10),G(`click`,function(){return t.refresh()}),Y(13,`Refresh`),z(),R(14,`button`,11),G(`click`,function(){return t.toggleInstrument()}),B(15,`span`,12),Y(16),z()()(),N(17,oI,8,1,`p`,13),N(18,sI,4,0,`div`,14)(19,cI,7,0,`div`,15)(20,lI,5,0,`div`,16)(21,RI,7,2,`div`,17),N(22,WI,13,1,`section`,18),R(23,`section`,19)(24,`h2`,20),Y(25,` Lint `),N(26,GI,2,1,`span`,21),z(),N(27,KI,2,0,`p`,22)(28,qI,2,0,`p`,23)(29,JI,2,0,`p`,24)(30,XI,3,0,`ul`,25),z()),e&2){let e;j(7),L(`value`,t.filter()),j(),L(`options`,t.kindOptions),M_(`value`,t.kind),j(2),O_(``,t.filtered().length,` of `,t.pipes().length),j(2),L(`disabled`,t.loading()),j(2),J(`on`,t.instrumenting()),M(`aria-pressed`,t.instrumenting()),j(2),Z(` `,t.instrumenting()?`Stop recording`:`Record calls`,` `),j(),P(t.instrumenting()?17:-1),j(),P(t.loading()&&t.pipes().length===0?18:t.loadFailed()&&t.pipes().length===0?19:t.pipes().length===0?20:21),j(4),P(t.async().length>0?22:-1),j(4),P((e=t.lint())?26:-1,e),j(),P(t.lintFailed()?27:t.lint()===null?28:t.lint().length?30:29)}},dependencies:[_A],styles:[`[_nghost-%COMP%] { - display: block; - color: var(--%NS%text); - font-size: 13px; -} - -.mono[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); -} - -.intro[_ngcontent-%COMP%] { - max-width: 720px; - margin: 0 0 12px; - color: var(--%NS%text-2); - line-height: 1.5; -} - -.toolbar[_ngcontent-%COMP%] { - position: sticky; - top: 0; - z-index: 2; - display: flex; - flex-wrap: wrap; - gap: 8px 12px; - align-items: center; - margin: 0 0 12px; - padding: 8px; - background: color-mix(in srgb, var(--%NS%surface) 85%, transparent); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); -} - -.search[_ngcontent-%COMP%] { - position: relative; - flex: 1 1 220px; - min-width: 0; -} - -.search-icon[_ngcontent-%COMP%] { - position: absolute; - top: 50%; - left: 12px; - width: 14px; - height: 14px; - transform: translateY(-50%); - fill: none; - stroke: var(--%NS%text-3); - stroke-width: 2.2; - stroke-linecap: round; - pointer-events: none; -} - -.search[_ngcontent-%COMP%]:focus-within .search-icon[_ngcontent-%COMP%] { - stroke: var(--%NS%accent); -} - -input[type=search][_ngcontent-%COMP%] { - width: 100%; - height: var(--%NS%control-h); - padding: 0 12px 0 34px; - background: var(--%NS%bg); - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - color: var(--%NS%text); - font-size: 13px; - transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease); -} - -input[type=search][_ngcontent-%COMP%]::placeholder { - color: var(--%NS%text-3); -} - -input[type=search][_ngcontent-%COMP%]:focus-visible { - outline: none; - border-color: var(--%NS%accent); - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -.toolbar[_ngcontent-%COMP%] app-select[_ngcontent-%COMP%] { - width: 150px; -} - -.total[_ngcontent-%COMP%] { - flex: none; - color: var(--%NS%text-2); - font-size: 12px; - white-space: nowrap; - font-variant-numeric: tabular-nums; -} - -.actions[_ngcontent-%COMP%] { - display: flex; - gap: 8px; - margin-left: auto; -} - -button[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 8px; - height: var(--%NS%control-h); - padding: 0 14px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - color: var(--%NS%text); - font: inherit; - font-weight: 500; - white-space: nowrap; - cursor: pointer; - transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease); -} - -button[_ngcontent-%COMP%]:hover:not(:disabled) { - border-color: var(--%NS%accent-line); - background: var(--%NS%surface-3); -} - -button[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -button[_ngcontent-%COMP%]:disabled { - cursor: default; - opacity: 0.6; -} - -.rec-dot[_ngcontent-%COMP%] { - width: 8px; - height: 8px; - border-radius: 50%; - background: var(--%NS%text-3); -} - -.record.on[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent); - background: color-mix(in srgb, var(--%NS%accent) 12%, transparent); - color: var(--%NS%accent); -} - -.record.on[_ngcontent-%COMP%] .rec-dot[_ngcontent-%COMP%] { - background: var(--%NS%accent); - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -.notice[_ngcontent-%COMP%] { - display: flex; - align-items: flex-start; - gap: 8px; - margin: 0 0 12px; - padding: 10px 12px; - border: 1px solid var(--%NS%accent-line); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%accent-soft); - color: var(--%NS%text-2); - line-height: 1.5; - animation: enter 0.2s var(--%NS%ease) both; -} - -.notice[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-weight: 600; -} - -.notice[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] { - flex: none; - width: 16px; - height: 16px; - margin-top: 2px; - fill: none; - stroke: var(--%NS%accent); - stroke-width: 2; - stroke-linecap: round; -} - -.layout[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: minmax(0, 1fr); - gap: 12px; - align-items: start; -} - -@media (min-width: 880px) { - .layout[_ngcontent-%COMP%] { - grid-template-columns: minmax(0, 1fr) minmax(340px, 44%); - } - .detail[_ngcontent-%COMP%] { - position: sticky; - top: 64px; - max-height: calc(100vh - 150px); - overflow: auto; - } -} -.list-wrap[_ngcontent-%COMP%] { - min-width: 0; -} - -.pipe-list[_ngcontent-%COMP%] { - display: grid; - gap: 2px; - margin: 0; - padding: 6px; - list-style: none; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - animation: enter 0.35s var(--%NS%ease) both; -} - -.row[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - gap: 2px 12px; - width: 100%; - height: auto; - padding: 8px 10px; - border: 0; - border-radius: var(--%NS%radius-sm); - background: none; - text-align: left; - font-weight: 400; - white-space: normal; -} - -.row[_ngcontent-%COMP%]:hover:not(:disabled) { - border-color: transparent; - background: var(--%NS%surface-2); -} - -.row[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: -2px; -} - -.row.selected[_ngcontent-%COMP%] { - background: var(--%NS%accent-soft); - box-shadow: inset 2px 0 0 var(--%NS%accent); -} - -.row-main[_ngcontent-%COMP%] { - display: flex; - align-items: baseline; - gap: 8px; - min-width: 0; -} - -.name[_ngcontent-%COMP%] { - flex: none; - color: var(--%NS%text-strong); - font-size: 13px; - font-weight: 600; -} - -.sub[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 12px; - overflow: hidden; - min-width: 0; - text-overflow: ellipsis; - white-space: nowrap; -} - -.row-meta[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - justify-content: flex-end; - gap: 4px; -} - -.row-file[_ngcontent-%COMP%] { - grid-column: 1/-1; - color: var(--%NS%text-3); - font-size: 11px; - overflow-wrap: anywhere; -} - -.more[_ngcontent-%COMP%] { - margin-left: 6px; - color: var(--%NS%text-2); -} - -.chip[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - height: 18px; - padding: 0 7px; - border: 1px solid var(--%NS%border-strong); - border-radius: 99px; - color: var(--%NS%text-2); - font-size: 10px; - font-weight: 600; - letter-spacing: 0.04em; - text-transform: uppercase; - white-space: nowrap; -} - -.chip.impure[_ngcontent-%COMP%], -.chip.warn[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); - background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); - color: var(--%NS%warn); -} - -.chip.live[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); - background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); - color: var(--%NS%ok); -} - -.pill[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - justify-content: center; - min-width: 18px; - height: 16px; - padding: 0 5px; - border-radius: 99px; - background: var(--%NS%surface-3); - color: var(--%NS%text-2); - font-size: 10px; - font-weight: 600; - letter-spacing: 0; - font-variant-numeric: tabular-nums; -} - -.detail[_ngcontent-%COMP%] { - min-width: 0; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - animation: enter 0.35s var(--%NS%ease) both; -} - -.detail-head[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 8px 10px; - padding: 14px 16px; - border-bottom: 1px solid var(--%NS%border); -} - -.detail-head[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] { - flex: 1 1 auto; - min-width: 0; - margin: 0; - color: var(--%NS%text-strong); - font-size: 15px; - font-weight: 600; - overflow-wrap: anywhere; -} - -.block[_ngcontent-%COMP%] { - padding: 14px 16px; - border-bottom: 1px solid var(--%NS%border); -} - -.block[_ngcontent-%COMP%]:last-child { - border-bottom: 0; -} - -h3[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - display: flex; - align-items: center; - gap: 6px; - margin: 0 0 10px; -} - -dl[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: max-content minmax(0, 1fr); - gap: 6px 14px; - margin: 0; -} - -dt[_ngcontent-%COMP%] { - color: var(--%NS%text-3); -} - -dd[_ngcontent-%COMP%] { - min-width: 0; - margin: 0; - color: var(--%NS%text); -} - -.value[_ngcontent-%COMP%] { - font-size: 12px; - overflow-wrap: anywhere; -} - -.muted[_ngcontent-%COMP%] { - color: var(--%NS%text-2); -} - -.sites[_ngcontent-%COMP%] { - display: grid; - gap: 4px; - margin: 0; - padding: 0; - list-style: none; - color: var(--%NS%text-2); - font-size: 12px; - overflow-wrap: anywhere; -} - -.calls[_ngcontent-%COMP%] { - margin-left: 6px; - color: var(--%NS%text-3); -} - -.chips[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 6px; - margin: 0; - padding: 0; - list-style: none; -} - -.component[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - gap: 6px; - height: 24px; - padding: 0 4px 0 10px; - border: 1px solid var(--%NS%border-strong); - border-radius: 99px; - background: var(--%NS%bg); - font-size: 12px; - transition: border-color 150ms var(--%NS%ease), background-color 150ms var(--%NS%ease); -} - -button.component[_ngcontent-%COMP%] { - height: 24px; - padding: 0 4px 0 10px; - border-radius: 99px; - background: var(--%NS%bg); - font-size: 12px; - font-weight: 400; -} - -.count[_ngcontent-%COMP%] { - padding: 0 6px; - border-radius: 99px; - background: var(--%NS%surface-3); - color: var(--%NS%text-2); - font-size: 10px; - line-height: 16px; - font-variant-numeric: tabular-nums; -} - -.warning[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - align-items: baseline; - gap: 8px; - margin: 0 0 12px; - padding: 8px 10px; - border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent); - border-radius: var(--%NS%radius-sm); - background: color-mix(in srgb, var(--%NS%warn) 8%, transparent); - color: var(--%NS%text); - line-height: 1.5; -} - -.hint[_ngcontent-%COMP%] { - margin: 8px 0 0; - color: var(--%NS%text-3); - font-size: 12px; -} - -.empty-line[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-2); - line-height: 1.5; -} - -.empty-line.ok[_ngcontent-%COMP%] { - color: var(--%NS%ok); -} - -.section[_ngcontent-%COMP%] { - margin-top: 20px; - animation: enter 0.35s var(--%NS%ease) both; -} - -.section[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - display: flex; - align-items: center; - gap: 8px; - margin: 0 0 8px; -} - -.section[_ngcontent-%COMP%] > .hint[_ngcontent-%COMP%] { - margin: -2px 0 10px; -} - -.async-list[_ngcontent-%COMP%], -.findings[_ngcontent-%COMP%] { - display: grid; - gap: 6px; - margin: 0; - padding: 0; - list-style: none; -} - -.async-row[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 6px 8px; - min-width: 0; - padding: 8px 12px; - border-radius: var(--%NS%radius-sm); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease); -} - -.async-row[_ngcontent-%COMP%]:hover { - border-color: var(--%NS%border-strong); - background: var(--%NS%surface-2); -} - -.component-name[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-weight: 600; -} - -button.component-name[_ngcontent-%COMP%] { - height: 24px; - padding: 0 8px; - margin-left: -8px; - border-color: transparent; - background: none; - font-size: 13px; -} - -.latest[_ngcontent-%COMP%] { - flex: 1 1 100%; - color: var(--%NS%text-2); -} - -.finding[_ngcontent-%COMP%] { - padding: 10px 12px; - border-radius: var(--%NS%radius-sm); - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); -} - -.finding-head[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 6px 8px; -} - -.severity[_ngcontent-%COMP%] { - padding: 0 7px; - border: 1px solid var(--%NS%border-strong); - border-radius: 99px; - color: var(--%NS%text-2); - font-size: 10px; - font-weight: 700; - letter-spacing: 0.06em; - line-height: 16px; - text-transform: uppercase; -} - -.severity[data-tone=warning][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); - background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); - color: var(--%NS%warn); -} - -.severity[data-tone=error][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); - color: var(--%NS%danger); -} - -.rule[_ngcontent-%COMP%] { - color: var(--%NS%accent); - font-size: 12px; -} - -.where[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - overflow-wrap: anywhere; -} - -.finding-message[_ngcontent-%COMP%] { - margin: 6px 0 0; - color: var(--%NS%text); - line-height: 1.5; -} - -.finding-fix[_ngcontent-%COMP%] { - margin: 4px 0 0; - color: var(--%NS%text-2); - line-height: 1.5; -} - -.fix-label[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - margin-right: 4px; -} - -.state[_ngcontent-%COMP%] { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; - padding: 40px 16px; - text-align: center; - background: var(--%NS%surface); - border: 1px dashed var(--%NS%border-strong); - border-radius: var(--%NS%radius); - animation: enter 0.35s var(--%NS%ease) both; -} - -.state.compact[_ngcontent-%COMP%] { - padding: 28px 16px; - border: 0; - background: none; -} - -.list-wrap[_ngcontent-%COMP%] .state.compact[_ngcontent-%COMP%] { - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); -} - -.state-title[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-strong); - font-size: 14px; - font-weight: 600; -} - -.state-hint[_ngcontent-%COMP%] { - max-width: 440px; - margin: 0; - color: var(--%NS%text-2); - line-height: 1.5; -} - -.state[_ngcontent-%COMP%] button[_ngcontent-%COMP%] { - margin-top: 8px; -} - -.spinner[_ngcontent-%COMP%] { - width: 20px; - height: 20px; - border: 2px solid var(--%NS%border-strong); - border-top-color: var(--%NS%accent); - border-radius: 50%; - animation: spin 0.8s linear infinite; -} - -@media (prefers-reduced-motion: reduce) { - .spinner[_ngcontent-%COMP%] { - animation: none; - } -}`]})},$I=()=>[],eL=()=>[`/`],tL=(e,t)=>t.id,nL=(e,t)=>t.route.id,rL=(e,t)=>t[0],iL=(e,t)=>t.file+t.method,aL=(e,t)=>t.path,oL=(e,t)=>t.mode,sL=(e,t)=>t.file,cL=(e,t)=>t.rule;function lL(e,t){e&1&&(R(0,`div`,0),B(1,`span`,2),R(2,`span`),Y(3,`Reading the project…`),z()())}function uL(e,t){e&1&&(R(0,`div`,1)(1,`h2`,3),Y(2,`This app is not an Analog app.`),z(),R(3,`p`,4),Y(4,` Add `),R(5,`code`),Y(6,`ngDevtools()`),z(),Y(7,` from `),R(8,`code`),Y(9,`@santoshyadavdev/ng-devtools/vite`),z(),Y(10,` next to `),R(11,`code`),Y(12,`analog()`),z(),Y(13,` in vite.config.ts and run the Analog dev server. `),z()())}function dL(e,t){if(e&1&&(R(0,`div`,9)(1,`span`,7),Y(2,`Open in the browser`),z(),R(3,`span`,13),Y(4),z()()),e&2){let e=t;j(3),L(`title`,e.url),j(),X(e.url)}}function fL(e,t){if(e&1){let e=W();R(0,`button`,14),G(`click`,function(){let t=O(e).$implicit;return k(q(2).view.set(t.id))}),Y(1),R(2,`span`,15),Y(3),z()()}if(e&2){let e=t.$implicit,n=q(2);L(`id`,`analog-tab-`+e.id),M(`aria-selected`,e.id===n.view())(`aria-controls`,`analog-panel-`+e.id)(`tabindex`,e.id===n.view()?0:-1),j(),Z(` `,e.label,` `),j(),M(`data-tone`,e.tone),j(),X(e.count)}}function pL(e,t){if(e&1&&(R(0,`li`)(1,`span`,27),Y(2),z(),R(3,`span`,30),Y(4),z()()),e&2){let e=t.$implicit,n=q(5);j(2),X(n.short(e.file)??e.fullPath),j(),M(`data-kind`,e.kind),j(),X(e.kind)}}function mL(e,t){if(e&1&&(R(0,`span`,31),Y(1),z()),e&2){let e=t.$implicit;j(),O_(``,e[0],` = `,e[1])}}function hL(e,t){if(e&1&&(R(0,`div`,29),F(1,mL,2,2,`span`,31,rL),z()),e&2){let e=q(2),t=q(3);j(),I(t.paramList(e.params))}}function gL(e,t){if(e&1&&(R(0,`strong`,27),Y(1),z(),Y(2,` renders `),R(3,`ol`,28),F(4,pL,5,3,`li`,null,tL),z(),N(6,hL,3,0,`div`,29)),e&2){let e=q(),t=q(3);j(),X(t.testUrl()),j(3),I(e.chain),j(2),P(t.paramList(e.params).length?6:-1)}}function _L(e,t){if(e&1&&(R(0,`li`)(1,`span`,27),Y(2),z(),R(3,`span`,4),Y(4),z()()),e&2){let e=t.$implicit,n=q(6);j(2),X(n.short(e.file)??e.path),j(2),X(e.reason)}}function vL(e,t){if(e&1&&(R(0,`ul`,32),F(1,_L,5,2,`li`,null,cg),z()),e&2){let e=q(2);j(),I(e.rejected.slice(0,5))}}function yL(e,t){if(e&1&&(R(0,`strong`,27),Y(1),z(),Y(2,` matches no file route. Angular throws NG04002 "Cannot match any routes". `),N(3,vL,3,0,`ul`,32)),e&2){let e=q(),t=q(3);j(),X(t.testUrl()),j(2),P(e.rejected.length?3:-1)}}function bL(e,t){if(e&1&&(R(0,`div`,23),N(1,gL,7,2)(2,yL,4,2),z()),e&2){let e=t;M(`data-tone`,e.matched?`good`:`bad`),j(),P(e.matched?1:2)}}function xL(e,t){e&1&&(R(0,`span`,34),Y(1,`└`),z())}function SL(e,t){e&1&&(R(0,`span`,36),Y(1,`open`),z())}function CL(e,t){if(e&1&&(R(0,`span`,37)(1,`span`,41),Y(2),z(),Y(3),z()),e&2){let e=q().$implicit,t=q(3);j(2),X(t.dir(e.route.file)),j(),X(t.base(e.route.file))}}function wL(e,t){e&1&&(R(0,`span`,4),Y(1,`folder only`),z())}function TL(e,t){if(e&1&&(R(0,`span`,39),Y(1),z()),e&2){let e=t.$implicit;j(),Z(``,e,`()`)}}function EL(e,t){if(e&1&&(R(0,`span`,40),Y(1),z()),e&2){let e=q().$implicit;j(),Z(`"`,e.route.title,`"`)}}function DL(e,t){if(e&1&&(R(0,`span`,31),Y(1),z()),e&2){let e=q().$implicit;j(),X(e)}}function OL(e,t){if(e&1&&N(0,DL,2,1,`span`,31),e&2){let e=t.$implicit;P(e===`title`?-1:0)}}function kL(e,t){if(e&1&&(R(0,`tr`)(1,`td`)(2,`div`,33),N(3,xL,2,0,`span`,34),R(4,`span`,35),Y(5),z(),R(6,`span`,30),Y(7),z(),N(8,SL,2,0,`span`,36),z()(),R(9,`td`),N(10,CL,4,2,`span`,37)(11,wL,2,0,`span`,4),z(),R(12,`td`)(13,`div`,38),F(14,TL,2,1,`span`,39,lg),z()(),R(16,`td`),N(17,EL,2,1,`span`,40),F(18,OL,1,1,null,null,lg),z()()),e&2){let e=t.$implicit,n=q(3);J(`open`,n.isOpen(e.route))(`dim`,e.route.kind===`group`||e.route.kind===`implicit`),j(2),n_(`padding-left`,e.depth*16,`px`),j(),P(e.depth?3:-1),j(2),X(e.route.fullPath),j(),M(`data-kind`,e.route.kind),j(),X(n.kindText(e.route)),j(),P(n.isOpen(e.route)?8:-1),j(2),P(e.route.file?10:11),j(4),I(n.serverExports(e.route)),j(3),P(e.route.title?17:-1),j(),I(e.route.routeMeta??z_(13,$I))}}function AL(e,t){e&1&&Y(0,` No route matches the filter. Try part of a path or a file name. `)}function jL(e,t){e&1&&Y(0,` No file routes yet. Add a .page.ts file under src/app/pages. `)}function ML(e,t){if(e&1&&(R(0,`tr`)(1,`td`,42),N(2,AL,1,0)(3,jL,1,0),z()()),e&2){let e=q(3);j(2),P(e.filter().trim()?2:3)}}function NL(e,t){if(e&1){let e=W();R(0,`div`,16)(1,`form`,17),G(`submit`,function(t){O(e);let n=q(2);return t.preventDefault(),k(n.explain())}),R(2,`label`,18),Y(3,`Test a URL`),z(),R(4,`input`,19),G(`input`,function(t){return O(e),k(q(2).testUrl.set(t.target.value))}),z(),R(5,`button`,20),Y(6,`Explain`),z()(),R(7,`label`,21),Y(8,`Filter routes`),z(),R(9,`input`,22),G(`input`,function(t){return O(e),k(q(2).filter.set(t.target.value))}),z()(),N(10,bL,3,2,`div`,23),R(11,`div`,24)(12,`table`)(13,`thead`)(14,`tr`)(15,`th`,25),Y(16,`Route`),z(),R(17,`th`,25),Y(18,`File`),z(),R(19,`th`,25),Y(20,`Data`),z(),R(21,`th`,25),Y(22,`Route meta`),z()()(),R(23,`tbody`),F(24,kL,20,14,`tr`,26,nL,!1,ML,4,1,`tr`),z()()()}if(e&2){let e,t=q(2);j(4),L(`value`,t.testUrl()),j(5),L(`value`,t.filter()),j(),P((e=t.match())?10:-1,e),j(14),I(t.routeRows())}}function PL(e,t){if(e&1&&(R(0,`span`,27),Y(1),z(),Y(2)),e&2){let e=t.$implicit,n=t.$index,r=t.$count;j(),X(e),j(),Z(``,n===r-1?``:`, `,` `)}}function FL(e,t){if(e&1&&(R(0,`div`,43)(1,`strong`),Y(2,`load() ran twice`),z(),Y(3,` for `),F(4,PL,3,2,null,null,lg),Y(6,` : once while server rendering, again in the browser. TransferState did not serve the server result. `),z()),e&2){let e=q(3);j(4),I(e.duplicates())}}function IL(e,t){if(e&1){let e=W();R(0,`label`)(1,`input`,60),G(`change`,function(){let t=O(e).$implicit;return k(q(3).kind.set(t))}),z(),Y(2),R(3,`span`,4),Y(4),z()()}if(e&2){let e=t.$implicit,n=q(3);J(`on`,n.kind()===e),j(),L(`checked`,n.kind()===e),j(),Z(` `,n.kindLabel(e),` `),j(2),X(n.kindCount(e))}}function LL(e,t){if(e&1&&(R(0,`span`,30),Y(1),z()),e&2){let e=q().$implicit;M(`data-mode`,e.render===`ssr`?`ssr`:`client`),j(),X(e.render===`ssr`?`server rendered`:`client only`)}}function RL(e,t){if(e&1&&(R(0,`details`)(1,`summary`),Y(2,`Response`),z(),R(3,`pre`,68),Y(4),z()()),e&2){let e=q().$implicit,t=q(4);j(4),X(t.pretty(e.preview))}}function zL(e,t){if(e&1&&(R(0,`tr`)(1,`td`,62),Y(2),z(),R(3,`td`)(4,`span`,30),Y(5),z()(),R(6,`td`,63)(7,`div`,38)(8,`span`,64),Y(9),z(),R(10,`span`,65),Y(11),z(),N(12,LL,2,2,`span`,30),z(),N(13,RL,5,1,`details`),z(),R(14,`td`)(15,`span`,66),Y(16),z()(),R(17,`td`,67),Y(18),z(),R(19,`td`,4),Y(20),z()()),e&2){let e=t.$implicit,n=q(4);j(2),X(n.time(e.at)),j(2),M(`data-call`,e.kind),j(),X(n.kindLabel(e.kind)),j(3),M(`data-method`,e.method),j(),X(e.method),j(2),X(e.url),j(),P(e.render?12:-1),j(),P(e.preview?13:-1),j(2),M(`data-status`,n.statusClass(e.status)),j(),X(e.status),j(2),Z(``,e.ms,` ms`),j(2),X(e.from)}}function BL(e,t){if(e&1&&(R(0,`div`,49)(1,`table`)(2,`thead`)(3,`tr`)(4,`th`,25),Y(5,`At`),z(),R(6,`th`,25),Y(7,`Kind`),z(),R(8,`th`,25),Y(9,`Request`),z(),R(10,`th`,25),Y(11,`Status`),z(),R(12,`th`,61),Y(13,`Duration`),z(),R(14,`th`,25),Y(15,`From`),z()()(),R(16,`tbody`),F(17,zL,21,12,`tr`,null,tL),z()()()),e&2){let e=q(3);j(17),I(e.calls())}}function VL(e,t){e&1&&Y(0,` No calls of this kind yet. `)}function HL(e,t){e&1&&Y(0,` No calls yet. `)}function UL(e,t){if(e&1&&(R(0,`div`,50)(1,`p`,69),N(2,VL,1,0)(3,HL,1,0),z(),R(4,`p`,4),Y(5,` Navigate in the app to see page renders, load() fetches and API calls. `),z()()),e&2){let e=q(3);j(2),P(e.allCalls().length?2:3)}}function WL(e,t){if(e&1){let e=W();R(0,`tr`)(1,`td`)(2,`span`,64),Y(3),z()(),R(4,`td`,27),Y(5),z(),R(6,`td`)(7,`span`,37)(8,`span`,41),Y(9),z(),Y(10),z()(),R(11,`td`,70)(12,`button`,71),G(`click`,function(){let t=O(e).$implicit;return k(q(3).tryApi(t))}),Y(13,` Try `),z()()()}if(e&2){let e=t.$implicit,n=q(3);j(2),M(`data-method`,e.method),j(),X(e.method),j(2),X(e.path),j(4),X(n.dir(e.file)),j(),X(n.base(e.file)),j(2),M(`aria-label`,`Try `+e.method+` `+e.path)}}function GL(e,t){e&1&&(R(0,`tr`)(1,`td`,42),Y(2,` No API routes. Add a handler under src/server/routes to test it here. `),z()())}function KL(e,t){if(e&1&&(R(0,`p`,58),Y(1),z()),e&2){let e=q(3);j(),X(e.callsOff)}}function qL(e,t){if(e&1){let e=W();R(0,`label`,72),Y(1,`JSON body`),z(),R(2,`textarea`,73),G(`input`,function(t){return O(e),k(q(3).apiBody.set(t.target.value))}),z(),R(3,`label`,74)(4,`input`,75),G(`change`,function(){O(e);let t=q(3);return k(t.confirmSend.set(!t.confirmSend()))}),z(),Y(5,` This request can change data on the dev server`),z()}if(e&2){let e=q(3);j(2),L(`value`,e.apiBody()),j(2),L(`checked`,e.confirmSend())}}function JL(e,t){if(e&1&&(R(0,`div`,53)(1,`span`,76),Y(2,`Refused`),z(),R(3,`span`),Y(4),z()()),e&2){let e=q();j(4),X(e.error)}}function YL(e,t){if(e&1&&(R(0,`div`,53)(1,`span`,66),Y(2),z(),R(3,`span`,4),Y(4),z()(),R(5,`pre`,68),Y(6),z()),e&2){let e=q(),t=q(3);j(),M(`data-status`,t.statusClass(e.status??0)),j(),X(e.status),j(2),O_(``,e.ms,` ms · `,e.type||`no content type`),j(2),X(t.pretty(e.body??``))}}function XL(e,t){e&1&&(R(0,`div`,59),N(1,JL,5,1,`div`,53)(2,YL,7,5),z()),e&2&&(j(),P(t.error?1:2))}function ZL(e,t){if(e&1){let e=W();N(0,FL,7,0,`div`,43),R(1,`div`,44)(2,`fieldset`,45)(3,`legend`,46),Y(4,`Show calls of kind`),z(),F(5,IL,5,5,`label`,47,lg),z(),R(7,`button`,48),G(`click`,function(){return O(e),k(q(2).clearCalls())}),Y(8,` Clear calls `),z()(),N(9,BL,19,0,`div`,49)(10,UL,6,1,`div`,50),R(11,`h2`),Y(12,`API routes`),z(),R(13,`div`,51)(14,`table`)(15,`thead`)(16,`tr`)(17,`th`,25),Y(18,`Method`),z(),R(19,`th`,25),Y(20,`Path`),z(),R(21,`th`,25),Y(22,`File`),z(),R(23,`th`,25)(24,`span`,46),Y(25,`Actions`),z()()()(),R(26,`tbody`),F(27,WL,14,6,`tr`,null,iL,!1,GL,3,0,`tr`),z()()(),R(30,`form`,52),G(`submit`,function(t){O(e);let n=q(2);return t.preventDefault(),k(n.send())}),R(31,`h2`),Y(32,`Request playground`),z(),R(33,`div`,53)(34,`app-select`,54),G(`valueChange`,function(t){return O(e),k(q(2).method.set(t??`GET`))}),z(),R(35,`label`,55),Y(36,`Path`),z(),R(37,`input`,56),G(`input`,function(t){return O(e),k(q(2).apiPath.set(t.target.value))}),z(),R(38,`button`,57),Y(39,` Send `),z()(),N(40,KL,2,1,`p`,58),N(41,qL,6,2),N(42,XL,3,1,`div`,59),z()}if(e&2){let e,t=q(2);P(t.duplicates().length?0:-1),j(5),I(t.kinds),j(2),L(`disabled`,!t.allCalls().length),j(2),P(t.calls().length?9:10),j(18),I(t.project().api),j(7),L(`options`,t.methodOptions)(`value`,t.method()),j(3),L(`value`,t.apiPath()),j(),L(`disabled`,!t.canCall()),M(`aria-describedby`,t.canCall()?null:`analog-calls-off`),j(2),P(t.canCall()?-1:40),j(),P(t.method()===`GET`?-1:41),j(),P((e=t.response())?42:-1,e)}}function QL(e,t){if(e&1&&(R(0,`span`,30),Y(1),z()),e&2){let e=t.$implicit;M(`data-mode`,e.mode),j(),O_(``,e.label,` · `,e.count)}}function $L(e,t){if(e&1&&(R(0,`div`,29),F(1,QL,2,3,`span`,30,oL),z()),e&2){let e=q(3);j(),I(e.modeCounts())}}function eR(e,t){e&1&&(R(0,`span`,81),Y(1,`differs from config`),z())}function tR(e,t){if(e&1&&(R(0,`div`,38)(1,`span`,66),Y(2),z(),R(3,`span`,80),Y(4),z(),N(5,eR,2,0,`span`,81),z()),e&2){let e=t,n=q().$implicit,r=q(3);j(),M(`data-status`,r.statusClass(e.status)),j(),X(e.status),j(2),O_(``,e.render===`client`?`client only`:`server rendered`,` · `,e.ms,` ms`),j(),P(r.mismatch(n)?5:-1)}}function nR(e,t){e&1&&(R(0,`span`,79),Y(1,`not requested yet`),z())}function rR(e,t){if(e&1&&(R(0,`span`,37)(1,`span`,41),Y(2),z(),Y(3),z()),e&2){let e=q().$implicit,t=q(3);j(2),X(t.dir(e.file)),j(),X(t.base(e.file))}}function iR(e,t){if(e&1&&(R(0,`tr`)(1,`td`,35),Y(2),z(),R(3,`td`)(4,`div`,38)(5,`span`,30),Y(6),z(),R(7,`span`,79),Y(8),z()()(),R(9,`td`),N(10,tR,6,5,`div`,38)(11,nR,2,0,`span`,79),z(),R(12,`td`),N(13,rR,4,2,`span`,37),z()()),e&2){let e,n=t.$implicit,r=q(3);j(2),X(n.path),j(3),M(`data-mode`,n.mode),j(),X(r.modeLabel(n.mode)),j(2),X(n.reason),j(2),P((e=n.last)?10:11,e),j(3),P(n.file?13:-1)}}function aR(e,t){e&1&&(R(0,`tr`)(1,`td`,42),Y(2,` No page routes to render yet. Add a .page.ts file under src/app/pages. `),z()())}function oR(e,t){e&1&&(R(0,`p`,4),Y(1,` prerender.routes is a function, so the list is known only at build time. `),z())}function sR(e,t){if(e&1&&(R(0,`span`,31),Y(1),z()),e&2){let e=t.$implicit;j(),X(e)}}function cR(e,t){e&1&&(R(0,`span`,79),Y(1,`default, nothing configured`),z())}function lR(e,t){if(e&1&&(R(0,`span`,84),Y(1),z()),e&2){let e=t.$implicit;j(),X(e)}}function uR(e,t){if(e&1&&(R(0,`dt`),Y(1,`Static, not listed`),z(),R(2,`dd`),F(3,lR,2,1,`span`,84,lg),z()),e&2){let e=q(2);j(3),I(e.staticMissing)}}function dR(e,t){if(e&1&&(R(0,`span`,31),Y(1),z()),e&2){let e=t.$implicit;j(),X(e)}}function fR(e,t){if(e&1&&(R(0,`dt`),Y(1,`Need explicit entries`),z(),R(2,`dd`),F(3,dR,2,1,`span`,31,lg),z()),e&2){let e=q(2);j(3),I(e.dynamic)}}function pR(e,t){if(e&1&&(R(0,`span`,85),Y(1),z()),e&2){let e=t.$implicit;j(),X(e)}}function mR(e,t){if(e&1&&(Y(0,` · missing `),F(1,pR,2,1,`span`,85,lg)),e&2){let e=q(3);j(),I(e.notBuilt)}}function hR(e,t){if(e&1&&(Y(0),N(1,mR,3,0)),e&2){let e=q(2);Z(` `,e.built.length,` page(s) in dist/analog/public `),j(),P(e.notBuilt.length?1:-1)}}function gR(e,t){e&1&&(R(0,`span`,79),Y(1,`no build yet`),z())}function _R(e,t){if(e&1&&(R(0,`dl`,82)(1,`dt`),Y(2,`Listed`),z(),R(3,`dd`),F(4,sR,2,1,`span`,31,lg),N(6,cR,2,0,`span`,79),z(),N(7,uR,5,0),N(8,fR,5,0),R(9,`dt`),Y(10,`Build output`),z(),R(11,`dd`,83),N(12,hR,2,2)(13,gR,2,0,`span`,79),z()()),e&2){let e=q();j(4),I(e.listed??z_(4,eL)),j(2),P(e.listed?-1:6),j(),P(e.staticMissing.length?7:-1),j(),P(e.dynamic.length?8:-1),j(4),P(e.built.length?12:13)}}function vR(e,t){e&1&&(R(0,`div`,78)(1,`h2`),Y(2,`Prerender plan`),z(),N(3,oR,2,0,`p`,4)(4,_R,14,5,`dl`,82),z()),e&2&&(j(3),P(t.dynamicConfig?3:4))}function yR(e,t){if(e&1&&(N(0,$L,3,0,`div`,29),R(1,`div`,77)(2,`table`)(3,`thead`)(4,`tr`)(5,`th`,25),Y(6,`Route`),z(),R(7,`th`,25),Y(8,`Configured`),z(),R(9,`th`,25),Y(10,`Last request`),z(),R(11,`th`,25),Y(12,`File`),z()()(),R(13,`tbody`),F(14,iR,14,6,`tr`,null,aL,!1,aR,3,0,`tr`),z()()(),N(17,vR,5,1,`div`,78)),e&2){let e,t=q(2);P(t.modeCounts().length?0:-1),j(14),I(t.renderRows()),j(3),P((e=t.plan())?17:-1,e)}}function bR(e,t){if(e&1&&(R(0,`div`)(1,`span`,88),Y(2),z()()),e&2){let e=q().$implicit;j(2),X(e.error)}}function xR(e,t){if(e&1&&(R(0,`div`)(1,`span`,81),Y(2),z()()),e&2){let e=q(5);j(2),Z(`takes over `,e.base(t))}}function SR(e,t){if(e&1&&(R(0,`tr`)(1,`td`)(2,`strong`),Y(3),z(),N(4,bR,3,1,`div`),N(5,xR,3,1,`div`),z(),R(6,`td`,35),Y(7),z(),R(8,`td`,27),Y(9),z(),R(10,`td`,87),Y(11),z(),R(12,`td`)(13,`span`,37)(14,`span`,41),Y(15),z(),Y(16),z()()()),e&2){let e,n=t.$implicit,r=q(4);j(3),X(n.attributes.title||`(no title)`),j(),P(n.error?4:-1),j(),P((e=r.shadowed(n.file))?5:-1,e),j(2),X(r.contentUrl(n.file)??``),j(2),X(n.slug),j(2),X(n.attributes.date||``),j(4),X(r.dir(n.file)),j(),X(r.base(n.file))}}function CR(e,t){if(e&1&&(R(0,`div`,86)(1,`table`)(2,`thead`)(3,`tr`)(4,`th`,25),Y(5,`Title`),z(),R(6,`th`,25),Y(7,`URL`),z(),R(8,`th`,25),Y(9,`Slug`),z(),R(10,`th`,25),Y(11,`Date`),z(),R(12,`th`,25),Y(13,`File`),z()()(),R(14,`tbody`),F(15,SR,17,8,`tr`,null,sL),z()()()),e&2){let e=q(3);j(15),I(e.project().content)}}function wR(e,t){e&1&&(R(0,`div`,50)(1,`p`,69),Y(2,`No markdown files under src/content.`),z(),R(3,`p`,4),Y(4,` Add a .md file there to see its title, slug, date and the URL it serves. `),z()())}function TR(e,t){e&1&&N(0,CR,17,0,`div`,86)(1,wR,5,0,`div`,50),e&2&&P(+!q(2).project().content.length)}function ER(e,t){if(e&1&&(R(0,`span`,15),Y(1),z()),e&2){let e=q().$implicit;j(),X(e.items.length)}}function DR(e,t){if(e&1&&(R(0,`span`,37)(1,`span`,41),Y(2),z(),Y(3),z()),e&2){let e=q().$implicit,t=q(5);j(2),X(t.dir(e.file)),j(),X(t.base(e.file))}}function OR(e,t){if(e&1&&(R(0,`span`,35),Y(1),z()),e&2){let e=q().$implicit;j(),X(e.path)}}function kR(e,t){if(e&1&&(R(0,`li`),N(1,DR,4,2,`span`,37),N(2,OR,2,1,`span`,35),z()),e&2){let e=t.$implicit;j(),P(e.file?1:-1),j(),P(e.path&&e.path!==e.file?2:-1)}}function AR(e,t){if(e&1&&(R(0,`li`)(1,`div`,91)(2,`span`,30),Y(3),z(),R(4,`strong`,92),Y(5),z(),N(6,ER,2,1,`span`,15),z(),R(7,`p`),Y(8),z(),R(9,`ul`,93),F(10,kR,3,2,`li`,null,cg),z(),R(12,`div`,94)(13,`strong`),Y(14,`How to fix`),z(),Y(15),z(),R(16,`span`,95),Y(17),z()()),e&2){let e=t.$implicit,n=q(4);M(`data-tone`,n.tone(e.severity)),j(2),M(`data-tone`,n.tone(e.severity)),j(),X(e.severity),j(2),X(e.title),j(),P(e.items.length>1?6:-1),j(2),X(e.summary),j(2),I(e.items),j(5),Z(` `,e.fix),j(2),X(e.rule)}}function jR(e,t){if(e&1&&(R(0,`p`,4),Y(1),z(),R(2,`ul`,90),F(3,AR,18,8,`li`,null,cL),z()),e&2){let e=q(3);j(),O_(` `,e.findings().length,` issue(s) in `,e.lintCards().length,` group(s). Each card says what is wrong, where, and how to fix it. `),j(2),I(e.lintCards())}}function MR(e,t){e&1&&(R(0,`div`,89)(1,`strong`),Y(2,`No Analog problems found.`),z(),Y(3,` Routes, server files, prerender config and content all check out. `),z())}function NR(e,t){e&1&&N(0,jR,5,2)(1,MR,4,0,`div`,89),e&2&&P(+!q(2).findings().length)}function PR(e,t){if(e&1){let e=W();R(0,`section`,5)(1,`div`,6)(2,`span`,7),Y(3,`Analog`),z(),R(4,`span`,8),Y(5),z()(),R(6,`div`,6)(7,`span`,7),Y(8,`Pages`),z(),R(9,`span`,8),Y(10),z()(),R(11,`div`,6)(12,`span`,7),Y(13,`API routes`),z(),R(14,`span`,8),Y(15),z()(),R(16,`div`,6)(17,`span`,7),Y(18,`Server calls`),z(),R(19,`span`,8),Y(20),z()(),R(21,`div`,6)(22,`span`,7),Y(23,`Issues`),z(),R(24,`span`,8),Y(25),z()(),N(26,dL,5,2,`div`,9),z(),R(27,`div`,10),G(`keydown`,function(t){return O(e),k(q().onKey(t))}),F(28,fL,4,7,`button`,11,tL),z(),R(30,`div`,12),N(31,NL,27,4)(32,ZL,43,12)(33,yR,18,3)(34,TR,2,1)(35,NR,2,1),z()}if(e&2){let e,t,n=q();j(5),X(n.project().version||`unknown`),j(5),X(n.pageCount()),j(5),X(n.project().api.length),j(5),X(n.allCalls().length),j(),M(`data-tone`,n.findings().length?`warn`:`good`),j(4),X(n.findings().length),j(),P((e=n.page())?26:-1,e),j(2),I(n.views()),j(2),L(`id`,`analog-panel-`+n.view()),M(`aria-labelledby`,`analog-tab-`+n.view()),j(),P((t=n.view())===`routes`?31:t===`server`?32:t===`render`?33:t===`content`?34:t===`lint`?35:-1)}}var FR={"scan-error":{title:`A folder could not be read`,summary:`Its files are missing from routes, API routes and lint results.`},"duplicate-url":{title:`Two files serve the same URL`,summary:`Only one of them is reachable; the other never renders.`},"sibling-params":{title:`Two dynamic pages in one folder`,summary:`Both are [param] pages at the same level, so the first one always wins.`},"missing-default-export":{title:`Page has no default export`,summary:`Analog needs the component as the default export, so the page renders nothing.`},"redirect-with-component":{title:`Redirect page also exports a component`,summary:`The redirect runs first, so the component never shows.`},"redirect-path-match":{title:`Redirect matches too much`,summary:`An empty-path redirect without pathMatch "full" catches every URL below it.`},"layout-without-outlet":{title:`Layout has no router-outlet`,summary:`The layout has child pages, but without they never render.`},"server-without-load":{title:`.server.ts without load or action`,summary:`The server file exports nothing Analog calls.`},"orphan-server-file":{title:`.server.ts without a page`,summary:`No page file sits next to it, so its load never runs.`},"api-method-suffix":{title:`Unknown method suffix on an API file`,summary:`The suffix is not an HTTP method, so it becomes part of the URL.`},"duplicate-api-route":{title:`Two handlers for one API route`,summary:`Two files answer the same method and path.`},"api-outside-prefix":{title:`Server route outside the API prefix`,summary:`During vite dev only routes under the prefix reach Nitro.`},"prerender-unknown-route":{title:`Prerender entry matches no page`,summary:`prerender.routes lists a path that no page file serves.`},"prerender-missing-root":{title:`Home page is not prerendered`,summary:`static is on, but prerender.routes leaves out /.`},"content-frontmatter":{title:`Broken frontmatter`,summary:`The markdown frontmatter cannot be read.`},"duplicate-slug":{title:`Two posts share a slug`,summary:`injectContent picks one of them at random.`},"content-shadows-page":{title:`Markdown file takes over a page`,summary:`Files under src/content are routes too, so these URLs render the markdown file instead of the [param] page.`},"load-fetched-twice":{title:`load() runs twice`,summary:`These pages fetched their data while rendering on the server and again in the browser.`},"restart-needed":{title:`New pages need a restart`,summary:`These page files exist, but the running router does not know them yet.`},"hydration-error":{title:`Hydration error`,summary:`The browser DOM did not match the server HTML.`},"api-not-found":{title:`API call failed with 404 or 405`,summary:`A request hit a path or method that no server route handles.`}},IR={ssr:`SSR`,ssg:`Prerendered`,client:`Client only`},LR={all:`All`,page:`Pages`,load:`load()`,fn:`Server fn`,api:`API`};function RR(e,t=0,n=[]){for(let r of e)n.push({route:r,depth:t}),RR(r.children,t+1,n);return n}var zR=class e{rpc=$(null);canCall=Q(()=>AT(this.rpc(),`analog`));callsOff=yT(`analog`);kinds=[`all`,`page`,`load`,`fn`,`api`];methods=[`GET`,`POST`,`PUT`,`PATCH`,`DELETE`];methodOptions=this.methods.map(e=>({value:e,label:e}));view=A(`routes`);project=A(null);state=A({});findings=A([]);renderRows=A([]);plan=A(null);filter=A(``);testUrl=A(``);match=A(null);kind=A(`all`);method=A(`GET`);apiPath=A(``);apiBody=A(``);confirmSend=A(!1);response=A(null);unsubscribe=null;refreshTimer;refreshRun=0;destroyRef=E(ws);page=Q(()=>this.state().pages?.[0]??null);openFiles=Q(()=>new Set((this.page()?.chain??[]).map(e=>e.file)));allCalls=Q(()=>this.state().calls??[]);calls=Q(()=>{let e=this.kind();return this.allCalls().filter(t=>e===`all`||t.kind===e).slice(-150).reverse()});allRoutes=Q(()=>RR(this.project()?.routes??[]));pageCount=Q(()=>this.allRoutes().filter(e=>e.route.file&&e.route.kind!==`layout`).length);routeRows=Q(()=>{let e=this.filter().trim().toLowerCase();return e?this.allRoutes().filter(t=>t.route.fullPath.toLowerCase().includes(e)||!!t.route.file?.toLowerCase().includes(e)):this.allRoutes()});duplicates=Q(()=>Array.from(new Set((this.state().duplicates??[]).map(e=>e.route))));modeCounts=Q(()=>[`ssr`,`ssg`,`client`].map(e=>({mode:e,label:IR[e],count:this.renderRows().filter(t=>t.mode===e).length})).filter(e=>e.count));lintCards=Q(()=>{let e={error:0,warning:1,info:2},t=new Map;for(let e of this.findings()){let n=t.get(e.rule);if(!n){let r=FR[e.rule];n={rule:e.rule,severity:e.severity,title:r?.title??e.rule,summary:r?.summary??e.message,fix:e.fix,items:[]},t.set(e.rule,n)}n.items.push({file:e.file,path:e.path})}return Array.from(t.values()).sort((t,n)=>e[t.severity]-e[n.severity])});views=Q(()=>{let e=this.findings().length;return[{id:`routes`,label:`Routes`,count:this.pageCount(),tone:``},{id:`server`,label:`Server`,count:this.allCalls().length,tone:``},{id:`render`,label:`Render`,count:this.renderRows().length,tone:``},{id:`content`,label:`Content`,count:this.project()?.content.length??0,tone:``},{id:`lint`,label:`Lint`,count:e,tone:e?`warn`:``}]});constructor(){dc(()=>{let e=this.rpc();e&&ev(()=>void this.load(e))}),dc(()=>{let e=this.view();this.state(),ev(()=>this.scheduleRefresh(e))}),this.destroyRef.onDestroy(()=>{this.unsubscribe?.(),clearTimeout(this.refreshTimer)})}async load(e){let t=await DT(e,`analog-project`);if(!this.destroyRef.destroyed){this.project.set(t);try{let t=await e.scope(`ng-devtools`).rpc.sharedState(`analog`);if(this.destroyRef.destroyed)return;let n=e=>this.state.set(e??{});n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.state.set({})}this.destroyRef.destroyed||await this.refresh(this.view())}}scheduleRefresh(e){clearTimeout(this.refreshTimer),this.refreshTimer=setTimeout(()=>void this.refresh(e),300)}async refresh(e){let t=this.rpc();if(!t)return;let n=++this.refreshRun,[r,i]=await Promise.all([DT(t,`analog-lint`),DT(t,`analog-render`)]);if(n===this.refreshRun&&(this.findings.set(r??[]),this.renderRows.set(i?.rows??[]),this.plan.set(i?.plan??null),e===`routes`||e===`content`)){let e=await DT(t,`analog-project`);e&&n===this.refreshRun&&this.project.set(e)}}isOpen(e){return!!e.file&&this.openFiles().has(e.file)}kindText(e){return e.catchAll?e.catchAll===`optional`?`optional catch-all`:`catch-all`:e.kind===`implicit`?`folder`:e.kind}serverExports(e){return(e.serverExports??[]).filter(e=>e===`load`||e===`action`)}short(e){return e?.replace(/^\/src\/app\//,``).replace(/^\//,``)}dir(e){let t=this.short(e)??e;return t.includes(`/`)?t.slice(0,t.lastIndexOf(`/`)+1):``}base(e){return e.slice(e.lastIndexOf(`/`)+1)}paramList(e){return Object.entries(e)}kindLabel(e){return LR[e]}kindCount(e){return e===`all`?this.allCalls().length:this.allCalls().filter(t=>t.kind===e).length}modeLabel(e){return IR[e]}mismatch(e){return e.last?.render?e.mode===`client`?e.last.render!==`client`:e.last.render===`client`:!1}statusClass(e){return e>=500||e===0?`bad`:e>=400?`warn`:`good`}tone(e){return e===`error`?`bad`:e===`warning`?`warn`:`info`}shadowed(e){return this.findings().find(t=>t.rule===`content-shadows-page`&&t.file===e)?.message.match(/(\/\S+\.page\.ts)/)?.[1]}contentUrl(e){return this.allRoutes().find(t=>t.route.file===e)?.route.fullPath}pretty(e){try{return JSON.stringify(JSON.parse(e),null,2)}catch{return e}}time=PO;tryApi(e){this.method.set(e.method===`ANY`?`GET`:e.method),this.apiPath.set(e.path.replace(/:(\w+)/g,`1`).replace(`**`,`x`)),this.response.set(null),queueMicrotask(()=>document.getElementById(`api-path`)?.focus())}async clearCalls(){await DT(this.rpc(),`analog-clear-calls`)}async explain(){let e=this.testUrl().trim();e&&this.match.set(await DT(this.rpc(),`analog-explain-url`,e))}async send(){let e=this.apiPath().trim();if(!e)return;let t;if(this.method()!==`GET`&&this.apiBody().trim())try{t=JSON.parse(this.apiBody())}catch{this.response.set({error:`The body is not valid JSON.`});return}let n=await DT(this.rpc(),`analog-call-api`,{method:this.method(),path:e,body:t,confirm:this.confirmSend()});this.response.set(n??{error:`No answer from the devtools server.`})}onKey(e){let t=this.views().map(e=>e.id),n=t.indexOf(this.view()),r=n;if(e.key===`ArrowRight`)r=(n+1)%t.length;else if(e.key===`ArrowLeft`)r=(n-1+t.length)%t.length;else if(e.key===`Home`)r=0;else if(e.key===`End`)r=t.length-1;else return;e.preventDefault(),this.view.set(t[r]);let i=e.currentTarget;queueMicrotask(()=>i.querySelector(`#analog-tab-${t[r]}`)?.focus())}static ɵfac=function(t){return new(t||e)};static ɵcmp=Oh({type:e,selectors:[[`app-analog-inspector`]],inputs:{rpc:[1,`rpc`]},decls:3,vars:1,consts:[[`role`,`status`,1,`loading`],[1,`empty`],[`aria-hidden`,`true`,1,`spinner`],[1,`empty-title`],[1,`muted`],[`aria-label`,`Analog summary`,1,`summary`],[1,`stat`],[1,`label`],[1,`value`],[1,`stat`,`wide`],[`role`,`tablist`,`aria-label`,`Analog views`,1,`tabs`,3,`keydown`],[`type`,`button`,`role`,`tab`,3,`id`],[`role`,`tabpanel`,1,`panel`,3,`id`],[1,`value`,`mono`,3,`title`],[`type`,`button`,`role`,`tab`,3,`click`,`id`],[1,`count`],[1,`toolbar`],[1,`inline`,`explain`,3,`submit`],[`for`,`analog-url`],[`id`,`analog-url`,`type`,`text`,`placeholder`,`/products/42`,1,`field`,`grow`,`mono`,3,`input`,`value`],[`type`,`submit`,1,`btn`,`primary`],[`for`,`route-filter`,1,`sr-only`],[`id`,`route-filter`,`type`,`search`,`placeholder`,`Filter by path or file`,1,`field`,`filter`,3,`input`,`value`],[`role`,`status`,1,`callout`],[`role`,`region`,`aria-label`,`File routes`,`tabindex`,`0`,1,`table-wrap`],[`scope`,`col`],[3,`open`,`dim`],[1,`mono`],[1,`chain`],[1,`chips`],[1,`pill`],[1,`chip`,`mono`],[1,`plain`],[1,`route`],[`aria-hidden`,`true`,1,`guide`],[1,`mono`,`path`],[1,`pill`,`live`],[1,`file`],[1,`meta`],[`data-kind`,`load`,1,`pill`],[1,`chip`],[1,`dir`],[`colspan`,`4`,1,`empty-row`],[`data-tone`,`warn`,`role`,`note`,1,`callout`],[1,`calls-bar`],[1,`segmented`],[1,`sr-only`],[3,`on`],[`type`,`button`,1,`btn`,`ghost`,3,`click`,`disabled`],[`role`,`region`,`aria-label`,`Server calls`,`tabindex`,`0`,1,`table-wrap`],[1,`empty-box`],[`role`,`region`,`aria-label`,`API routes`,`tabindex`,`0`,1,`table-wrap`],[1,`card`,`playground`,3,`submit`],[1,`row`],[`ariaLabel`,`Method`,1,`method-select`,3,`valueChange`,`options`,`value`],[`for`,`api-path`,1,`sr-only`],[`id`,`api-path`,`type`,`text`,`placeholder`,`/api/v1/products`,1,`field`,`grow`,`mono`,3,`input`,`value`],[`type`,`submit`,1,`btn`,`primary`,3,`disabled`],[`id`,`analog-calls-off`,1,`muted`],[`role`,`status`,1,`response`],[`type`,`radio`,`name`,`analog-kind`,1,`sr-only`,3,`change`,`checked`],[`scope`,`col`,1,`num`],[1,`muted`,`nowrap`],[1,`request`],[1,`method`],[1,`mono`,`url`],[1,`status`],[1,`num`,`nowrap`],[1,`code`],[1,`empty-lead`],[1,`actions`],[`type`,`button`,1,`btn`,`ghost`,3,`click`],[`for`,`api-body`],[`id`,`api-body`,`rows`,`3`,`placeholder`,`{"name": "Ada"}`,1,`field`,`mono`,3,`input`,`value`],[1,`check`],[`type`,`checkbox`,3,`change`,`checked`],[`data-status`,`bad`,1,`status`],[`role`,`region`,`aria-label`,`Render modes`,`tabindex`,`0`,1,`table-wrap`],[1,`card`],[1,`muted`,`small`],[1,`muted`,`small`,`tnum`],[`data-tone`,`warn`,1,`pill`],[1,`facts`],[1,`tnum`],[`data-tone`,`warn`,1,`chip`,`mono`],[`data-tone`,`bad`,1,`chip`,`mono`],[`role`,`region`,`aria-label`,`Content files`,`tabindex`,`0`,1,`table-wrap`],[1,`muted`,`nowrap`,`tnum`],[`data-tone`,`bad`,1,`pill`],[`data-tone`,`good`,`role`,`status`,1,`callout`],[1,`findings`],[1,`finding-head`],[1,`finding-title`],[1,`where`],[1,`fix`],[1,`rule`,`mono`]],template:function(e,t){e&1&&N(0,lL,4,0,`div`,0)(1,uL,14,0,`div`,1)(2,PR,36,10),e&2&&P(t.project()===null?0:t.project().analog?2:1)},dependencies:[_A],styles:[`@charset "UTF-8"; -[_nghost-%COMP%] { - --%NS%good: var(--%NS%ok); - --%NS%bad: var(--%NS%danger); - --%NS%info: #60a5fa; - --%NS%mono: var(--%NS%font-mono); - display: grid; - gap: 16px; - min-width: 0; - color: var(--%NS%text); - font-size: 13px; -} - -.loading[_ngcontent-%COMP%] { - display: flex; - gap: 12px; - align-items: center; - padding: 16px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - color: var(--%NS%text-2); -} - -.spinner[_ngcontent-%COMP%] { - width: 16px; - height: 16px; - flex: none; - border: 2px solid var(--%NS%border-strong); - border-top-color: var(--%NS%accent); - border-radius: 50%; - animation: spin 0.8s linear infinite; -} - -@media (prefers-reduced-motion: reduce) { - .spinner[_ngcontent-%COMP%] { - animation: none; - border-color: var(--%NS%accent-line); - } -} -.tnum[_ngcontent-%COMP%] { - font-variant-numeric: tabular-nums; -} - -.meta[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 6px 8px; - align-items: center; - min-width: 0; -} - -.empty-row[_ngcontent-%COMP%] { - padding: 24px 16px; - color: var(--%NS%text-2); - text-align: center; -} - -tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover td.empty-row[_ngcontent-%COMP%] { - background: transparent; -} - -.empty-box[_ngcontent-%COMP%] { - display: grid; - gap: 4px; - padding: 24px 16px; - border: 1px dashed var(--%NS%border-strong); - border-radius: var(--%NS%radius); - text-align: center; -} - -.empty-box[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { - margin: 0; - line-height: 1.55; -} - -.empty-lead[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-weight: 600; -} - -.mono[_ngcontent-%COMP%] { - font-family: var(--%NS%mono); - font-size: 12.5px; -} - -.muted[_ngcontent-%COMP%] { - color: var(--%NS%text-2); -} - -.small[_ngcontent-%COMP%] { - font-size: 12px; -} - -.nowrap[_ngcontent-%COMP%] { - white-space: nowrap; -} - -code[_ngcontent-%COMP%] { - padding: 1px 6px; - border: 1px solid var(--%NS%border); - border-radius: 6px; - background: var(--%NS%surface-2); - color: var(--%NS%text-strong); - font-family: var(--%NS%mono); - font-size: 12.5px; -} - -.summary[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); - gap: 12px; - animation: enter 0.35s var(--%NS%ease) both; -} - -.stat[_ngcontent-%COMP%] { - display: grid; - gap: 6px; - align-content: start; - padding: 12px 16px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - box-shadow: var(--%NS%shadow); - transition: border-color 180ms var(--%NS%ease), background-color 180ms var(--%NS%ease); -} - -.stat[_ngcontent-%COMP%]:hover { - border-color: var(--%NS%border-strong); -} - -.stat.wide[_ngcontent-%COMP%] { - grid-column: span 2; - min-width: 0; -} - -@media (max-width: 340px) { - .stat.wide[_ngcontent-%COMP%] { - grid-column: 1/-1; - } -} -.stat[_ngcontent-%COMP%] .label[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.08em; -} - -.stat[_ngcontent-%COMP%] .value[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-size: 20px; - font-weight: 600; - letter-spacing: -0.01em; - font-variant-numeric: tabular-nums; - overflow-wrap: anywhere; -} - -.stat[_ngcontent-%COMP%] .value.mono[_ngcontent-%COMP%] { - overflow: hidden; - color: var(--%NS%text); - font-size: 13px; - font-weight: 500; - line-height: 24px; - text-overflow: ellipsis; - white-space: nowrap; -} - -.stat[data-tone=warn][_ngcontent-%COMP%] .value[_ngcontent-%COMP%] { - color: var(--%NS%warn); -} - -.stat[data-tone=good][_ngcontent-%COMP%] .value[_ngcontent-%COMP%] { - color: var(--%NS%ok); -} - -.tabs[_ngcontent-%COMP%] { - display: inline-flex; - flex-wrap: wrap; - gap: 2px; - justify-self: start; - max-width: 100%; - padding: 3px; - border: 1px solid var(--%NS%border); - border-radius: 10px; - background: var(--%NS%bg); -} - -[role=tab][_ngcontent-%COMP%] { - display: inline-flex; - gap: 8px; - align-items: center; - min-height: 28px; - padding: 4px 12px; - border: none; - border-radius: 7px; - background: transparent; - color: var(--%NS%text-2); - font: inherit; - font-weight: 500; - cursor: pointer; - transition: background-color 180ms var(--%NS%ease), color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease); -} - -[role=tab][_ngcontent-%COMP%]:hover { - color: var(--%NS%text); -} - -[role=tab][aria-selected=true][_ngcontent-%COMP%] { - background: var(--%NS%surface-3); - color: var(--%NS%text-strong); - box-shadow: inset 0 0 0 1px var(--%NS%border-strong); -} - -.count[_ngcontent-%COMP%] { - min-width: 20px; - padding: 0 6px; - border-radius: 99px; - background: var(--%NS%surface-3); - color: var(--%NS%text-2); - font-size: 11px; - font-weight: 600; - line-height: 18px; - text-align: center; - font-variant-numeric: tabular-nums; -} - -[role=tab][aria-selected=true][_ngcontent-%COMP%] .count[_ngcontent-%COMP%] { - background: var(--%NS%border-strong); - color: var(--%NS%text); -} - -.count[data-tone=warn][_ngcontent-%COMP%], -[role=tab][aria-selected=true][_ngcontent-%COMP%] .count[data-tone=warn][_ngcontent-%COMP%] { - background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); - color: var(--%NS%warn); -} - -.panel[_ngcontent-%COMP%] { - display: grid; - gap: 16px; - min-width: 0; - animation: enter 0.35s var(--%NS%ease) both; -} - -.toolbar[_ngcontent-%COMP%] { - position: sticky; - top: 0; - z-index: 2; - display: flex; - flex-wrap: wrap; - gap: 12px; - align-items: center; - justify-content: space-between; - padding: 12px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: color-mix(in srgb, var(--%NS%surface) 85%, transparent); - backdrop-filter: blur(10px); -} - -.explain[_ngcontent-%COMP%] { - flex: 1 1 320px; - min-width: 0; -} - -.filter[_ngcontent-%COMP%] { - flex: 0 1 240px; - min-width: 0; -} - -@media (max-width: 560px) { - .filter[_ngcontent-%COMP%] { - flex: 1 1 100%; - } -} -.inline[_ngcontent-%COMP%], -.row[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 8px; - align-items: center; -} - -.inline[_ngcontent-%COMP%] > label[_ngcontent-%COMP%], -.playground[_ngcontent-%COMP%] > label[_ngcontent-%COMP%]:not(.check) { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.08em; -} - -.field[_ngcontent-%COMP%] { - box-sizing: border-box; - height: 34px; - padding: 0 12px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background-color: var(--%NS%bg); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - transition: border-color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease); -} - -.field.mono[_ngcontent-%COMP%] { - font-family: var(--%NS%mono); - font-size: 13px; -} - -.field[_ngcontent-%COMP%]::placeholder { - color: var(--%NS%text-3); -} - -.field[_ngcontent-%COMP%]:focus, -.field[_ngcontent-%COMP%]:focus-visible { - border-color: var(--%NS%accent); - box-shadow: 0 0 0 3px var(--%NS%accent-soft); - outline: none; -} - -.method-select[_ngcontent-%COMP%] { - width: 112px; - font-family: var(--%NS%mono); -} - -textarea.field[_ngcontent-%COMP%] { - height: auto; - padding: 8px 12px; -} - -.grow[_ngcontent-%COMP%] { - flex: 1 1 180px; - min-width: 0; -} - -.btn[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - height: 34px; - padding: 0 14px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - color: var(--%NS%text); - font: inherit; - font-size: 13px; - font-weight: 500; - cursor: pointer; - transition: background-color 160ms var(--%NS%ease), border-color 160ms var(--%NS%ease), color 160ms var(--%NS%ease); -} - -.btn[_ngcontent-%COMP%]:hover { - background: var(--%NS%surface-3); - border-color: var(--%NS%border-strong); -} - -.btn[_ngcontent-%COMP%]:active { - transform: translateY(1px); -} - -.btn.primary[_ngcontent-%COMP%] { - border-color: var(--%NS%accent); - background: var(--%NS%accent); - color: var(--%NS%accent-ink); - font-weight: 600; -} - -.btn.primary[_ngcontent-%COMP%]:hover { - border-color: var(--%NS%accent-hover); - background: var(--%NS%accent-hover); -} - -.btn.ghost[_ngcontent-%COMP%] { - height: 28px; - padding: 0 12px; - font-size: 12px; -} - -.btn.ghost[_ngcontent-%COMP%]:hover { - border-color: var(--%NS%accent-line); - color: var(--%NS%text-strong); -} - -td.actions[_ngcontent-%COMP%] { - width: 1%; - text-align: right; - vertical-align: middle; -} - -.btn[_ngcontent-%COMP%]:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -[role=tab][_ngcontent-%COMP%]:focus-visible, -.btn[_ngcontent-%COMP%]:focus-visible, -.table-wrap[_ngcontent-%COMP%]:focus-visible, -summary[_ngcontent-%COMP%]:focus-visible, -.segmented[_ngcontent-%COMP%] label[_ngcontent-%COMP%]:focus-within { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.callout[_ngcontent-%COMP%] { - padding: 12px 16px; - border: 1px solid color-mix(in srgb, var(--%NS%info) 30%, transparent); - border-radius: var(--%NS%radius); - background: color-mix(in srgb, var(--%NS%info) 8%, var(--%NS%surface)); - line-height: 1.6; - animation: enter 0.35s var(--%NS%ease) both; -} - -.callout[data-tone=good][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); - background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); -} - -.callout[data-tone=warn][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); - background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); -} - -.callout[data-tone=bad][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); -} - -.callout[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); -} - -.callout[_ngcontent-%COMP%] strong.mono[_ngcontent-%COMP%] { - overflow-wrap: anywhere; -} - -.chain[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 8px; - margin: 8px 0 0; - padding: 0; - list-style: none; -} - -.chain[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { - display: inline-flex; - gap: 6px; - align-items: center; - min-width: 0; - overflow-wrap: anywhere; -} - -.chain[_ngcontent-%COMP%] li[_ngcontent-%COMP%]:not(:last-child)::after { - content: "›"; - margin-left: 2px; - color: var(--%NS%text-3); -} - -.callout[_ngcontent-%COMP%] .chips[_ngcontent-%COMP%] { - margin-top: 8px; -} - -.plain[_ngcontent-%COMP%] { - margin: 8px 0 0; - padding-left: 18px; -} - -.plain[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 8px; -} - -.table-wrap[_ngcontent-%COMP%] { - overflow-x: auto; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - box-shadow: var(--%NS%shadow); - animation: enter 0.35s var(--%NS%ease) both; -} - -table[_ngcontent-%COMP%] { - width: 100%; - min-width: 560px; - border-collapse: collapse; -} - -th[_ngcontent-%COMP%], -td[_ngcontent-%COMP%] { - padding: 10px 12px; - border-bottom: 1px solid var(--%NS%border); - text-align: left; - vertical-align: top; -} - -tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child td[_ngcontent-%COMP%] { - border-bottom: none; -} - -th[_ngcontent-%COMP%] { - position: sticky; - top: 0; - background: var(--%NS%surface); - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.06em; - white-space: nowrap; -} - -.num[_ngcontent-%COMP%] { - text-align: right; - font-variant-numeric: tabular-nums; -} - -td.nowrap[_ngcontent-%COMP%] { - font-variant-numeric: tabular-nums; -} - -tbody[_ngcontent-%COMP%] td[_ngcontent-%COMP%] { - transition: background-color 160ms var(--%NS%ease); -} - -tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover td[_ngcontent-%COMP%] { - background: var(--%NS%surface-2); -} - -tr.open[_ngcontent-%COMP%] td[_ngcontent-%COMP%] { - background: var(--%NS%accent-soft); - color: var(--%NS%text-strong); -} - -tr.open[_ngcontent-%COMP%]:hover td[_ngcontent-%COMP%] { - background: color-mix(in srgb, var(--%NS%accent) 16%, transparent); -} - -tr.open[_ngcontent-%COMP%] td[_ngcontent-%COMP%]:first-child { - box-shadow: inset 2px 0 0 var(--%NS%accent); -} - -tr.dim[_ngcontent-%COMP%] .path[_ngcontent-%COMP%] { - color: var(--%NS%text-2); -} - -.route[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 8px; - align-items: center; -} - -.guide[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-family: var(--%NS%mono); -} - -.path[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - overflow-wrap: anywhere; -} - -.file[_ngcontent-%COMP%] { - font-family: var(--%NS%mono); - font-size: 12.5px; - color: var(--%NS%text); - overflow-wrap: anywhere; -} - -.dir[_ngcontent-%COMP%] { - color: var(--%NS%text-3); -} - -.pill[_ngcontent-%COMP%], -.chip[_ngcontent-%COMP%], -.status[_ngcontent-%COMP%], -.method[_ngcontent-%COMP%] { - display: inline-block; - padding: 1px 8px; - border-radius: 99px; - font-size: 11px; - font-weight: 500; - line-height: 18px; - white-space: nowrap; -} - -.pill[_ngcontent-%COMP%] { - border: 1px solid var(--%NS%border-strong); - background: var(--%NS%surface-2); - color: var(--%NS%text-2); -} - -.chip[_ngcontent-%COMP%] { - margin: 0 4px 4px 0; - padding: 3px 10px; - border: 1px solid var(--%NS%border); - background: var(--%NS%surface-2); - color: var(--%NS%text); - font-size: 12px; - line-height: 16px; -} - -.chip.mono[_ngcontent-%COMP%] { - font-size: 12px; -} - -.chips[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 8px; -} - -.chips[_ngcontent-%COMP%] .pill[_ngcontent-%COMP%] { - padding: 3px 10px; - font-size: 12px; -} - -.pill.live[_ngcontent-%COMP%] { - border-color: var(--%NS%accent-line); - background: var(--%NS%accent-soft); - color: var(--%NS%accent); -} - -.pill[data-kind=layout][_ngcontent-%COMP%] { - border-color: #94a3b8; - color: #e2e8f0; -} - -.pill[data-kind=markdown][_ngcontent-%COMP%] { - border-color: #0ea5e9; - color: #bae6fd; -} - -.pill[data-kind=load][_ngcontent-%COMP%] { - border-color: #2dd4bf; - color: #99f6e4; -} - -.pill[data-mode=ssr][_ngcontent-%COMP%] { - border-color: #3b82f6; - color: #bfdbfe; -} - -.pill[data-mode=ssg][_ngcontent-%COMP%] { - border-color: #22c55e; - color: #bbf7d0; -} - -.pill[data-mode=client][_ngcontent-%COMP%] { - border-color: #eab308; - color: #fef08a; -} - -.pill[data-call=page][_ngcontent-%COMP%] { - border-color: #3b82f6; - color: #bfdbfe; -} - -.pill[data-call=load][_ngcontent-%COMP%] { - border-color: #2dd4bf; - color: #99f6e4; -} - -.pill[data-call=fn][_ngcontent-%COMP%] { - border-color: #14b8a6; - color: #99f6e4; -} - -.pill[data-call=api][_ngcontent-%COMP%] { - border-color: #f97316; - color: #fed7aa; -} - -[data-tone=warn].pill[_ngcontent-%COMP%], -[data-tone=warn].chip[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); - background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); - color: var(--%NS%warn); -} - -[data-tone=bad].pill[_ngcontent-%COMP%], -[data-tone=bad].chip[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); - color: var(--%NS%danger); -} - -[data-tone=info].pill[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%info) 30%, transparent); - background: color-mix(in srgb, var(--%NS%info) 12%, transparent); - color: #bfdbfe; -} - -.status[_ngcontent-%COMP%] { - border: 1px solid var(--%NS%border-strong); - font-family: var(--%NS%mono); - font-weight: 600; - font-variant-numeric: tabular-nums; -} - -.status[data-status=good][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); - background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); - color: var(--%NS%ok); -} - -.status[data-status=warn][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); - background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); - color: var(--%NS%warn); -} - -.status[data-status=bad][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); - color: var(--%NS%danger); -} - -.method[_ngcontent-%COMP%] { - min-width: 52px; - border: 1px solid var(--%NS%border-strong); - border-radius: 6px; - background: var(--%NS%surface-2); - color: var(--%NS%text); - font-family: var(--%NS%mono); - font-weight: 600; - text-align: center; -} - -.method[data-method=GET][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, #7dd3fc 30%, transparent); - background: color-mix(in srgb, #7dd3fc 12%, transparent); - color: #7dd3fc; -} - -.method[data-method=POST][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); - background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); - color: #86efac; -} - -.method[data-method=PUT][_ngcontent-%COMP%], -.method[data-method=PATCH][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); - background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); - color: #fde68a; -} - -.method[data-method=DELETE][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); - color: #fecaca; -} - -.request[_ngcontent-%COMP%] { - min-width: 260px; -} - -.request[_ngcontent-%COMP%] .url[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - overflow-wrap: anywhere; -} - -details[_ngcontent-%COMP%] { - margin-top: 8px; -} - -summary[_ngcontent-%COMP%] { - width: fit-content; - border-radius: 6px; - color: var(--%NS%text-2); - font-size: 12px; - cursor: pointer; - transition: color 160ms var(--%NS%ease); -} - -summary[_ngcontent-%COMP%]:hover { - color: var(--%NS%text); -} - -.code[_ngcontent-%COMP%] { - margin: 8px 0 0; - padding: 10px 12px; - max-height: 220px; - overflow: auto; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%bg); - color: var(--%NS%text); - font-family: var(--%NS%mono); - font-size: 12.5px; - line-height: 1.55; - white-space: pre-wrap; - overflow-wrap: anywhere; -} - -.calls-bar[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - gap: 8px; -} - -.segmented[_ngcontent-%COMP%] { - display: inline-flex; - flex-wrap: wrap; - gap: 2px; - justify-self: start; - margin: 0; - padding: 3px; - border: 1px solid var(--%NS%border); - border-radius: 10px; - background: var(--%NS%bg); -} - -.segmented[_ngcontent-%COMP%] label[_ngcontent-%COMP%] { - display: inline-flex; - gap: 6px; - align-items: center; - padding: 5px 12px; - border-radius: 7px; - background: transparent; - color: var(--%NS%text-2); - font-weight: 500; - cursor: pointer; - transition: background-color 180ms var(--%NS%ease), color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease); -} - -.segmented[_ngcontent-%COMP%] label[_ngcontent-%COMP%]:hover { - color: var(--%NS%text); -} - -.segmented[_ngcontent-%COMP%] label[_ngcontent-%COMP%] .muted[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 12px; - font-variant-numeric: tabular-nums; -} - -.segmented[_ngcontent-%COMP%] label.on[_ngcontent-%COMP%] { - background: var(--%NS%surface-3); - color: var(--%NS%text-strong); - box-shadow: inset 0 0 0 1px var(--%NS%border-strong); -} - -.segmented[_ngcontent-%COMP%] label.on[_ngcontent-%COMP%] .muted[_ngcontent-%COMP%] { - color: var(--%NS%text-2); -} - -h2[_ngcontent-%COMP%] { - display: flex; - gap: 8px; - align-items: center; - margin: 8px 0 0; - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.08em; -} - -.card[_ngcontent-%COMP%] { - display: grid; - gap: 12px; - padding: 16px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - box-shadow: var(--%NS%shadow); - animation: enter 0.35s var(--%NS%ease) both; -} - -.card[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] { - margin: 0; -} - -.check[_ngcontent-%COMP%] { - display: flex; - gap: 8px; - align-items: center; - color: var(--%NS%text-2); - cursor: pointer; -} - -.check[_ngcontent-%COMP%] input[_ngcontent-%COMP%] { - width: 15px; - height: 15px; - margin: 0; - accent-color: var(--%NS%accent); -} - -.check[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.response[_ngcontent-%COMP%] { - display: grid; - gap: 8px; - padding: 12px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); -} - -.response[_ngcontent-%COMP%] .code[_ngcontent-%COMP%] { - margin: 0; -} - -.facts[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: max-content 1fr; - gap: 10px 16px; - margin: 0; -} - -.facts[_ngcontent-%COMP%] dt[_ngcontent-%COMP%] { - padding-top: 3px; - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.08em; -} - -.facts[_ngcontent-%COMP%] dd[_ngcontent-%COMP%] { - margin: 0; -} - -.findings[_ngcontent-%COMP%] { - display: grid; - gap: 12px; - margin: 0; - padding: 0; - list-style: none; - animation: enter 0.35s var(--%NS%ease) both; -} - -.findings[_ngcontent-%COMP%] > li[_ngcontent-%COMP%] { - position: relative; - padding: 16px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - box-shadow: inset 3px 0 0 var(--%NS%info), var(--%NS%shadow); - transition: border-color 180ms var(--%NS%ease); -} - -.findings[_ngcontent-%COMP%] > li[_ngcontent-%COMP%]:hover { - border-color: var(--%NS%border-strong); -} - -.findings[_ngcontent-%COMP%] > li[data-tone=bad][_ngcontent-%COMP%] { - box-shadow: inset 3px 0 0 var(--%NS%danger), var(--%NS%shadow); -} - -.findings[_ngcontent-%COMP%] > li[data-tone=warn][_ngcontent-%COMP%] { - box-shadow: inset 3px 0 0 var(--%NS%warn), var(--%NS%shadow); -} - -.findings[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { - margin: 8px 0 0; - line-height: 1.55; -} - -.findings[_ngcontent-%COMP%] > li[_ngcontent-%COMP%] > p[_ngcontent-%COMP%] { - color: var(--%NS%text-2); -} - -.finding-head[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 8px; - align-items: center; -} - -.finding-title[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); - font-size: 14px; - font-weight: 600; -} - -.where[_ngcontent-%COMP%] { - display: grid; - gap: 6px; - margin: 12px 0 0; - padding: 10px 12px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - list-style: none; -} - -.where[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - gap: 12px; -} - -.fix[_ngcontent-%COMP%] { - margin-top: 12px; - color: var(--%NS%text); - line-height: 1.55; -} - -.fix[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] { - display: block; - margin-bottom: 4px; - color: var(--%NS%ok); - font-size: 11px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.08em; -} - -.rule[_ngcontent-%COMP%] { - display: block; - margin-top: 12px; - color: var(--%NS%text-3); - font-size: 12px; -} - -.empty[_ngcontent-%COMP%] { - display: grid; - gap: 8px; - justify-items: center; - padding: 40px 24px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - text-align: center; - animation: enter 0.35s var(--%NS%ease) both; -} - -.empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { - margin: 0; - max-width: 520px; - line-height: 1.6; -} - -.empty-title[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-strong); - font-size: 15px; - font-weight: 600; -}`]})},BR=(e,t)=>t.id,VR=(e,t)=>t.side+t.id,HR=(e,t)=>t.key;function UR(e,t){e&1&&(R(0,`div`,0),B(1,`span`,41),R(2,`span`),Y(3,`Loading…`),z()())}function WR(e,t){e&1&&(R(0,`div`,1)(1,`strong`),Y(2,`Could not reach the devtools server.`),z(),R(3,`span`),Y(4,`Check that the app's dev server is running with the devtools plugin, then reopen this panel.`),z()())}function GR(e,t){e&1&&(R(0,`span`,46),Y(1,`transfer cache`),z())}function KR(e,t){e&1&&(R(0,`span`,55),Y(1,`faulted`),z())}function qR(e,t){if(e&1){let e=W();R(0,`tr`,45),G(`click`,function(){let t=O(e).$implicit;return k(q(2).selectedCallId.set(t.id))}),R(1,`td`)(2,`span`,46),Y(3),z()(),R(4,`td`,47),Y(5),z(),R(6,`td`,48)(7,`button`,49),G(`click`,function(){let t=O(e).$implicit;return k(q(2).selectedCallId.set(t.id))}),Y(8),z()(),R(9,`td`,50),Y(10),z(),R(11,`td`,51),B(12,`span`,52),Y(13),z(),R(14,`td`,53),Y(15),z(),R(16,`td`)(17,`div`,54),N(18,GR,2,0,`span`,46),N(19,KR,2,0,`span`,55),z()()()}if(e&2){let e=t.$implicit,n=q(2);J(`selected`,n.selectedCall()?.id===e.id),j(2),J(`server`,e.side===`server`),j(),X(e.side===`server`?`SSR`:`Client`),j(2),X(e.method),j(2),L(`title`,e.url),M(`aria-pressed`,n.selectedCall()?.id===e.id),j(),Z(` `,e.url,` `),j(),L(`title`,e.pageUrl??``),j(),Z(` `,e.pageUrl??``,` `),j(),J(`ok`,n.statusTone(e.status)===`ok`)(`redirect`,n.statusTone(e.status)===`redirect`)(`bad`,n.statusTone(e.status)===`bad`),j(2),Z(``,e.status||`ERR`,` `),j(2),Z(``,e.durationMs,` ms`),j(3),P(e.cacheHit?18:-1),j(),P(e.faulted?19:-1)}}function JR(e,t){if(e&1&&(R(0,`div`,11)(1,`table`)(2,`thead`)(3,`tr`)(4,`th`,42),Y(5,`Side`),z(),R(6,`th`,42),Y(7,`Method`),z(),R(8,`th`,42),Y(9,`URL`),z(),R(10,`th`,42),Y(11,`Page`),z(),R(12,`th`,42),Y(13,`Status`),z(),R(14,`th`,43),Y(15,`Time`),z(),R(16,`th`,42),Y(17,`Notes`),z()()(),R(18,`tbody`),F(19,qR,20,21,`tr`,44,VR),z()()()),e&2){let e=q();j(19),I(e.timeline())}}function YR(e,t){e&1&&(R(0,`div`,12)(1,`p`),Y(2,`No requests yet.`),z(),R(3,`p`,30),Y(4,` Add `),R(5,`code`),Y(6,`withNgDevtools()`),z(),Y(7,` to `),R(8,`code`),Y(9,`provideHttpClient`),z(),Y(10,`, then load a page of the app. `),z()())}function XR(e,t){if(e&1){let e=W();R(0,`div`,13)(1,`div`,56)(2,`h3`),Y(3,`Response preview`),z(),R(4,`button`,57),G(`click`,function(){return O(e),k(q().selectedCallId.set(null))}),Y(5,`Close`),z()(),R(6,`p`,58)(7,`span`,47),Y(8),z(),R(9,`span`,51),Y(10),z(),R(11,`span`,59),Y(12),z()(),R(13,`pre`),Y(14),z()()}if(e&2){let e=t,n=q();j(8),X(e.method),j(),J(`ok`,n.statusTone(e.status)===`ok`)(`redirect`,n.statusTone(e.status)===`redirect`)(`bad`,n.statusTone(e.status)===`bad`),j(),X(e.status||`ERR`),j(),L(`title`,e.url),j(),X(e.url),j(),J(`error`,!!e.error),j(),X(e.error??e.preview??`(no body)`)}}function ZR(e,t){if(e&1&&(R(0,`p`,16),Y(1),z()),e&2){let e=q();j(),X(e.writesOff)}}function QR(e,t){e&1&&(R(0,`p`,30),Y(1,` SSR mocks are not transferred to the client: the browser requests the URL again and gets the real response unless the rule also applies on the client. `),z())}function $R(e,t){e&1&&(R(0,`span`),Y(1,`passthrough`),z())}function ez(e,t){if(e&1&&(R(0,`span`,51),Y(1),z()),e&2){let e=q().$implicit,t=q();J(`ok`,t.statusTone(e.status)===`ok`)(`redirect`,t.statusTone(e.status)===`redirect`)(`bad`,t.statusTone(e.status)===`bad`),j(),X(e.status)}}function tz(e,t){if(e&1&&(R(0,`span`),Y(1),z()),e&2){let e=q().$implicit;j(),Z(``,e.delayMs,` ms`)}}function nz(e,t){e&1&&(R(0,`span`),Y(1,`mock body`),z())}function rz(e,t){e&1&&(R(0,`p`,67),Y(1,` The SSR mock is not written to TransferState, so the browser requests this URL again. `),z())}function iz(e,t){if(e&1){let e=W();R(0,`li`)(1,`label`,60)(2,`input`,61),G(`change`,function(){let t=O(e).$implicit;return k(q().toggleRule(t.id))}),z(),R(3,`code`,62)(4,`span`,63),Y(5),z(),Y(6),z()(),R(7,`button`,64),G(`click`,function(){let t=O(e).$implicit;return k(q().removeRule(t.id))}),Y(8,` Remove `),z(),R(9,`span`,65)(10,`span`),Y(11),z(),N(12,$R,2,0,`span`)(13,ez,2,7,`span`,66),N(14,tz,2,1,`span`),N(15,nz,2,0,`span`),z(),N(16,rz,2,0,`p`,67),z()}if(e&2){let e=t.$implicit,n=q();J(`off`,!e.enabled),j(2),L(`checked`,e.enabled)(`disabled`,!n.canWrite()),M(`aria-describedby`,n.canWrite()?null:`http-writes-off`)(`aria-label`,`Enable rule for `+e.pattern),j(),L(`title`,e.pattern),j(2),X(e.method||`ANY`),j(),Z(` `,e.pattern),j(),L(`disabled`,!n.canWrite()),M(`aria-describedby`,n.canWrite()?null:`http-writes-off`)(`aria-label`,`Remove rule for `+e.pattern),j(4),X(n.targetLabel(e.target)),j(),P(e.status===void 0?12:13),j(2),P(e.delayMs?14:-1),j(),P(e.body?15:-1),j(),P(n.mocksOnServer(e)?16:-1)}}function az(e,t){e&1&&(R(0,`li`,36),Y(1,`No rules. SSR rules apply on the next page load.`),z())}function oz(e,t){if(e&1&&(R(0,`div`)(1,`dt`),Y(2,`DOM nodes hydrated`),z(),R(3,`dd`),Y(4),z()(),R(5,`div`)(6,`dt`),Y(7,`DOM nodes skipped`),z(),R(8,`dd`),Y(9),z()(),R(10,`div`)(11,`dt`),Y(12,`Mismatched components`),z(),R(13,`dd`),Y(14),z()()),e&2){let e=t;j(4),X(e.hydrated),j(5),X(e.skipped),j(4),J(`bad`,e.mismatched>0),j(),X(e.mismatched)}}function sz(e,t){if(e&1&&(R(0,`span`,70)(1,`span`,71),Y(2,`Expected`),z(),R(3,`code`),Y(4),z()()),e&2){let e=q().$implicit;j(4),X(e.expected)}}function cz(e,t){if(e&1&&(R(0,`span`,70)(1,`span`,71),Y(2,`Actual`),z(),R(3,`code`),Y(4),z()()),e&2){let e=q().$implicit;j(4),X(e.actual)}}function lz(e,t){if(e&1&&(R(0,`li`)(1,`code`),Y(2),z(),N(3,sz,5,1,`span`,70),N(4,cz,5,1,`span`,70),z()),e&2){let e=t.$implicit;j(2),X(`<`+e.component+`>`),j(),P(e.expected?3:-1),j(),P(e.actual?4:-1)}}function uz(e,t){if(e&1&&(R(0,`h3`),Y(1),z(),R(2,`ul`,69),F(3,lz,5,3,`li`,null,cg),z()),e&2){let e=q();j(),Z(`Mismatches (`,e.mismatches.length,`)`),j(2),I(e.mismatches)}}function dz(e,t){if(e&1&&(R(0,`li`)(1,`code`),Y(2),z()()),e&2){let e=t.$implicit;j(2),X(e)}}function fz(e,t){if(e&1&&(R(0,`h3`),Y(1,`ngSkipHydration hosts`),z(),R(2,`ul`,72),F(3,dz,3,1,`li`,null,cg),z()),e&2){let e=q();j(3),I(e.skipHydrationHosts)}}function pz(e,t){e&1&&(R(0,`h3`),Y(1,`Warnings`),z(),R(2,`p`,30),Y(3,` Not captured: add `),R(4,`code`),Y(5,`provideNgDevtoolsHttp()`),z(),Y(6,` to the app providers. `),z())}function mz(e,t){if(e&1&&(R(0,`pre`,73),Y(1),z()),e&2){let e=t.$implicit;j(),X(e)}}function hz(e,t){e&1&&(R(0,`p`,74),Y(1,`No hydration warnings.`),z())}function gz(e,t){if(e&1&&(R(0,`h3`),Y(1),z(),F(2,mz,2,1,`pre`,73,cg,!1,hz,2,0,`p`,74)),e&2){let e=q();j(),Z(`Warnings (`,e.warnings.length,`)`),j(),I(e.warnings)}}function _z(e,t){if(e&1&&(R(0,`dl`,68)(1,`div`)(2,`dt`),Y(3,`Enabled`),z(),R(4,`dd`)(5,`span`,46),Y(6),z()()(),R(7,`div`)(8,`dt`),Y(9,`Hydrated components`),z(),R(10,`dd`),Y(11),z()(),R(12,`div`)(13,`dt`),Y(14,`Hydrated nodes`),z(),R(15,`dd`),Y(16),z()(),R(17,`div`)(18,`dt`),Y(19,`Skipped components`),z(),R(20,`dd`),Y(21),z()(),R(22,`div`)(23,`dt`),Y(24,`Incremental defer blocks`),z(),R(25,`dd`),Y(26),z()(),N(27,oz,15,5),z(),N(28,uz,5,1),N(29,fz,5,0),N(30,pz,7,0)(31,gz,5,2)),e&2){let e,n=t;j(5),J(`on`,n.enabled)(`off-tag`,!n.enabled),j(),X(n.enabled?`yes`:`no (client render only)`),j(5),X(n.hydratedComponents??`n/a`),j(5),X(n.hydratedNodes??`n/a`),j(5),X(n.componentsSkippedHydration??`n/a`),j(5),X(n.deferBlocksWithIncrementalHydration??`n/a`),j(),P((e=n.nodes)?27:-1,e),j(),P(n.mismatches?.length?28:-1),j(),P(n.skipHydrationHosts.length?29:-1),j(),P(n.warningsCaptured===!1?30:31)}}function vz(e,t){e&1&&(R(0,`div`,12)(1,`p`),Y(2,`No hydration data for this page.`),z(),R(3,`p`,30),Y(4,`Open a server rendered page of the app to see its stats.`),z()())}function yz(e,t){e&1&&(R(0,`div`,12)(1,`p`),Y(2,`No TransferState script: this page was not server rendered.`),z()())}function bz(e,t){if(e&1&&(R(0,`p`,76),Y(1),z()),e&2){let e=q(2);j(),X(e.error)}}function xz(e,t){e&1&&(R(0,`span`,46),Y(1),z()),e&2&&(j(),X(t))}function Sz(e,t){if(e&1&&(R(0,`span`,46),Y(1),z(),R(2,`span`,79),Y(3),z()),e&2){let e=t,n=q().$implicit,r=q(3);J(`server`,r.statusTone(e.status)===`ok`)(`fault`,r.statusTone(e.status)===`bad`),j(),Z(`HTTP `,e.status),j(2),X(e.url??n.key)}}function Cz(e,t){if(e&1&&(R(0,`span`,79),Y(1),z()),e&2){let e=q().$implicit;j(),X(e.key)}}function wz(e,t){if(e&1&&(R(0,`details`)(1,`summary`),B(2,`span`,78),N(3,xz,2,1,`span`,46),N(4,Sz,4,6)(5,Cz,2,1,`span`,79),R(6,`span`,80),Y(7),z()(),R(8,`pre`),Y(9),U_(10,`json`),z()()),e&2){let e,n,r=t.$implicit,i=q(3);j(3),P((e=i.payloadLabel(r))?3:-1,e),j(),P((n=r.http)?4:5,n),j(3),Z(``,r.size,` B`),j(2),X(G_(10,4,r.value))}}function Tz(e,t){if(e&1&&(R(0,`p`,75),Y(1),z(),N(2,bz,2,1,`p`,76),R(3,`div`,77),F(4,wz,11,6,`details`,null,HR),z()),e&2){let e=q();j(),k_(` `,e.entries.length,` entr`,e.entries.length===1?`y`:`ies`,`, `,e.size,` bytes `),j(),P(e.error?2:-1),j(2),I(e.entries)}}function Ez(e,t){e&1&&N(0,yz,3,0,`div`,12)(1,Tz,6,4),e&2&&P(+!!t.found)}function Dz(e,t){e&1&&(R(0,`div`,12)(1,`p`),Y(2,`Open a page of the app to see its payload.`),z()())}var Oz={pattern:`/api/products`,method:``,target:`both`,status:`500`,delayMs:``,body:``},kz=class e{rpc=$(null);canWrite=Q(()=>AT(this.rpc(),`http`));writesOff=yT(`http`);loading=A(!1);failed=A(!1);serverCalls=A([]);pages=A([]);rules=A([]);hostPageId=TT();selectedPageId=nv({source:()=>this.pages(),computation:(e,t)=>t?.value&&e.some(e=>e.pageId===t.value)?t.value:e.find(e=>e.pageId===this.hostPageId)?.pageId??e[0]?.pageId??null});selectedCallId=A(null);draft=A({...Oz});message=A(``);bodyPlaceholder=`{ "error": "Service unavailable" }`;unsubscribe=null;destroyRef=E(ws);selected=Q(()=>this.pages().find(e=>e.pageId===this.selectedPageId())??null);pageServerCalls=Q(()=>{let e=this.selected()?.initialUrl;return e?this.serverCalls().filter(t=>!t.pageUrl||t.pageUrl===e):this.serverCalls()});timeline=Q(()=>[...this.pageServerCalls(),...this.selected()?.calls??[]].sort((e,t)=>t.at-e.at));selectedCall=Q(()=>this.timeline().find(e=>e.id===this.selectedCallId())??null);draftMocksOnServer=Q(()=>{let e=this.draft(),t=Number(e.status);return!!e.status&&Number.isFinite(t)&&this.mocksOnServer({target:e.target,status:t})});bodyError=Q(()=>{let e=this.draft().body.trim();if(!e)return``;try{return JSON.parse(e),``}catch{return`The mock body must be valid JSON.`}});constructor(){dc(()=>{let e=this.rpc();e&&this.load(e)}),this.destroyRef.onDestroy(()=>this.unsubscribe?.())}async load(e){this.loading.set(!0),this.failed.set(!1);try{let t=await e.scope(`ng-devtools`).rpc.sharedState(`http`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e;this.serverCalls.set(t?.serverCalls??[]),this.pages.set(t?.pages??[]),this.rules.set(t?.rules??[])};n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.failed.set(!0)}finally{this.loading.set(!1)}}statusTone(e){return e===void 0?`neutral`:e===0||e>=400?`bad`:e>=300?`redirect`:e>=200?`ok`:`neutral`}mocksOnServer(e){return e.target!==`client`&&e.status!==void 0&&e.status<400}payloadLabel(e){return e.source===`hydration`?`hydration annotations`:e.source===`analog`?`Analog`:null}targetLabel(e){return e===`both`?`SSR + client`:e===`server`?`SSR only`:`Client only`}pageOptions=Q(()=>this.pages().map(e=>({value:e.pageId,label:e.title||e.url})));methodOptions=[{value:``,label:`Any`},...[`GET`,`POST`,`PUT`,`PATCH`,`DELETE`].map(e=>({value:e,label:e}))];targetOptions=[{value:`both`,label:`SSR + client`},{value:`server`,label:`SSR only`},{value:`client`,label:`Client only`}];selectPage(e){e&&this.selectedPageId.set(e),this.selectedCallId.set(null)}setDraft(e,t){this.draft.update(n=>({...n,[e]:t}))}patch(e,t){let n=t.target.value;this.draft.update(t=>({...t,[e]:n}))}addRule(e){e.preventDefault();let t=this.draft();if(!t.pattern.trim()||this.bodyError())return;let n=Number(t.status),r=Number(t.delayMs),i={id:`r${Date.now().toString(36)}${Math.random().toString(36).slice(2,6)}`,pattern:t.pattern.trim(),enabled:!0,target:t.target,...t.method?{method:t.method}:{},...t.status&&Number.isFinite(n)?{status:n}:{},...t.delayMs&&Number.isFinite(r)?{delayMs:r}:{},...t.body.trim()?{body:t.body.trim()}:{}};this.saveRules([...this.rules(),i],`Rule added.`)}toggleRule(e){this.saveRules(this.rules().map(t=>t.id===e?{...t,enabled:!t.enabled}:t),`Rule updated.`)}removeRule(e){this.saveRules(this.rules().filter(t=>t.id!==e),`Rule removed.`)}async clearCalls(){try{await ET(this.rpc(),`clear-http-calls`),this.selectedCallId.set(null),this.message.set(`Timeline cleared.`)}catch{this.message.set(`Could not clear the timeline.`)}}async saveRules(e,t){try{await ET(this.rpc(),`set-http-rules`,e),this.rules.set(e),this.message.set(`${t} Reload the page to apply SSR rules.`)}catch{this.message.set(`Could not save the rules.`)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=Oh({type:e,selectors:[[`app-network-inspector`]],inputs:{rpc:[1,`rpc`]},decls:73,vars:28,consts:[[`role`,`status`,1,`state`],[`role`,`alert`,1,`state`,`error`],[1,`toolbar`],[1,`page-picker`],[`id`,`page-picker-label`],[`labelledBy`,`page-picker-label`,`emptyText`,`No connected page`,`placeholder`,`No connected page`,3,`valueChange`,`options`,`value`],[`type`,`button`,3,`click`,`disabled`],[`role`,`status`,1,`message`],[1,`grid`],[`aria-labelledby`,`timeline-heading`,1,`panel`,`wide`],[`id`,`timeline-heading`],[1,`table-wrap`],[1,`empty`],[1,`preview`],[`aria-labelledby`,`rules-heading`,1,`panel`],[`id`,`rules-heading`],[`id`,`http-writes-off`,1,`muted`,`small`],[1,`rule-form`,3,`submit`],[1,`hint`],[`required`,``,`spellcheck`,`false`,`autocomplete`,`off`,`placeholder`,`/api/products`,3,`input`,`value`],[1,`row`],[1,`field-group`],[`id`,`rule-method-label`],[`labelledBy`,`rule-method-label`,3,`valueChange`,`options`,`value`],[`id`,`rule-target-label`],[`labelledBy`,`rule-target-label`,3,`valueChange`,`options`,`value`],[`type`,`number`,`inputmode`,`numeric`,`min`,`100`,`max`,`599`,3,`input`,`value`],[`type`,`number`,`inputmode`,`numeric`,`min`,`0`,`max`,`10000`,`placeholder`,`0`,3,`input`,`value`],[`rows`,`3`,`spellcheck`,`false`,`aria-describedby`,`body-error`,3,`input`,`placeholder`,`value`],[`id`,`body-error`,1,`field-error`],[1,`muted`,`small`],[1,`form-actions`],[`type`,`submit`,3,`disabled`],[1,`rules-heading`],[1,`rules`],[3,`off`],[1,`empty-rule`],[`aria-labelledby`,`hydration-heading`,1,`panel`],[`id`,`hydration-heading`],[`aria-labelledby`,`payload-heading`,1,`panel`,`wide`],[`id`,`payload-heading`],[`aria-hidden`,`true`,1,`spinner`],[`scope`,`col`],[`scope`,`col`,1,`num`],[3,`selected`],[3,`click`],[1,`tag`],[1,`method`],[1,`url`],[`type`,`button`,1,`link`,3,`click`,`title`],[1,`page-url`,3,`title`],[1,`status`],[`aria-hidden`,`true`,1,`dot`],[1,`num`],[1,`notes`],[1,`tag`,`fault`],[1,`preview-head`],[`type`,`button`,1,`ghost`,3,`click`],[1,`preview-meta`],[1,`preview-url`,3,`title`],[1,`inline`],[`type`,`checkbox`,3,`change`,`checked`,`disabled`],[1,`rule-pattern`,3,`title`],[1,`rule-method`],[`type`,`button`,1,`link`,`remove`,3,`click`,`disabled`],[1,`rule-meta`],[1,`status`,3,`ok`,`redirect`,`bad`],[1,`rule-note`],[1,`stats`],[1,`plain`,`mismatches`],[1,`mismatch-row`],[1,`mismatch-label`],[1,`plain`],[1,`warn`],[1,`muted`,`small`,`ok-note`],[1,`muted`,`small`,`summary-line`],[`role`,`alert`,1,`bad`],[1,`entries`],[`aria-hidden`,`true`,1,`chevron`],[1,`entry-key`],[1,`entry-size`]],template:function(e,t){if(e&1&&(N(0,UR,4,0,`div`,0)(1,WR,5,0,`div`,1),R(2,`div`,2)(3,`div`,3)(4,`span`,4),Y(5,`Page`),z(),R(6,`app-select`,5),G(`valueChange`,function(e){return t.selectPage(e)}),z()(),R(7,`button`,6),G(`click`,function(){return t.clearCalls()}),Y(8,` Clear timeline `),z(),R(9,`p`,7),Y(10),z()(),R(11,`div`,8)(12,`section`,9)(13,`h2`,10),Y(14),z(),N(15,JR,21,0,`div`,11)(16,YR,11,0,`div`,12),N(17,XR,15,13,`div`,13),z(),R(18,`section`,14)(19,`h2`,15),Y(20,`Fault injection`),z(),N(21,ZR,2,1,`p`,16),R(22,`form`,17),G(`submit`,function(e){return t.addRule(e)}),R(23,`label`)(24,`span`),Y(25,`URL pattern `),R(26,`span`,18),Y(27,`(substring or * glob)`),z()(),R(28,`input`,19),G(`input`,function(e){return t.patch(`pattern`,e)}),z()(),R(29,`div`,20)(30,`div`,21)(31,`span`,22),Y(32,`Method`),z(),R(33,`app-select`,23),G(`valueChange`,function(e){return t.setDraft(`method`,e??``)}),z()(),R(34,`div`,21)(35,`span`,24),Y(36,`Apply on`),z(),R(37,`app-select`,25),G(`valueChange`,function(e){return t.setDraft(`target`,e??`both`)}),z()()(),R(38,`div`,20)(39,`label`),Y(40,` Status `),R(41,`input`,26),G(`input`,function(e){return t.patch(`status`,e)}),z()(),R(42,`label`),Y(43,` Delay (ms) `),R(44,`input`,27),G(`input`,function(e){return t.patch(`delayMs`,e)}),z()()(),R(45,`label`)(46,`span`),Y(47,`Mock JSON body `),R(48,`span`,18),Y(49,`(optional)`),z()(),R(50,`textarea`,28),G(`input`,function(e){return t.patch(`body`,e)}),z()(),R(51,`p`,29),Y(52),z(),N(53,QR,2,0,`p`,30),R(54,`div`,31)(55,`button`,32),Y(56,` Add rule `),z()()(),R(57,`h3`,33),Y(58),z(),R(59,`ul`,34),F(60,iz,17,17,`li`,35,BR,!1,az,2,0,`li`,36),z()(),R(63,`section`,37)(64,`h2`,38),Y(65,`Hydration`),z(),N(66,_z,32,13)(67,vz,5,0,`div`,12),z(),R(68,`section`,39)(69,`h2`,40),Y(70,`TransferState payload`),z(),N(71,Ez,2,1)(72,Dz,3,0,`div`,12),z()()),e&2){let e,n,r;P(t.loading()?0:t.failed()?1:-1),j(6),L(`options`,t.pageOptions())(`value`,t.selected()?.pageId??null),j(),L(`disabled`,!t.canWrite()),M(`aria-describedby`,t.canWrite()?null:`http-writes-off`),j(3),X(t.message()),j(4),Z(`HTTP timeline (`,t.timeline().length,`)`),j(),P(t.timeline().length?15:16),j(2),P((e=t.selectedCall())?17:-1,e),j(4),P(t.canWrite()?-1:21),j(7),L(`value`,t.draft().pattern),j(5),L(`options`,t.methodOptions)(`value`,t.draft().method),j(4),L(`options`,t.targetOptions)(`value`,t.draft().target),j(4),L(`value`,t.draft().status),j(3),L(`value`,t.draft().delayMs),j(6),L(`placeholder`,t.bodyPlaceholder)(`value`,t.draft().body),M(`aria-invalid`,t.bodyError()?`true`:null),j(2),X(t.bodyError()),j(),P(t.draftMocksOnServer()?53:-1),j(2),L(`disabled`,!t.canWrite()||!t.draft().pattern.trim()||!!t.bodyError()),M(`aria-describedby`,t.canWrite()?null:`http-writes-off`),j(3),Z(`Rules (`,t.rules().length,`)`),j(2),I(t.rules()),j(6),P((n=t.selected()?.hydration)?66:67,n),j(5),P((r=t.selected()?.payload)?71:72,r)}},dependencies:[_A,Fy],styles:[`@charset "UTF-8"; -[_nghost-%COMP%] { - display: block; - color: var(--%NS%text); - font-size: 13px; -} - -.state[_ngcontent-%COMP%] { - display: flex; - align-items: center; - gap: 8px; - margin: 0 0 16px; - padding: 10px 12px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface); - color: var(--%NS%text-2); -} - -.state.error[_ngcontent-%COMP%] { - flex-direction: column; - align-items: flex-start; - gap: 4px; - border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); - color: var(--%NS%danger); -} - -.state.error[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] { - font-weight: 600; -} - -.state.error[_ngcontent-%COMP%] span[_ngcontent-%COMP%] { - color: var(--%NS%text); -} - -.spinner[_ngcontent-%COMP%] { - width: 14px; - height: 14px; - border: 2px solid var(--%NS%border-strong); - border-top-color: var(--%NS%accent); - border-radius: 50%; - animation: spin 0.8s linear infinite; -} - -.toolbar[_ngcontent-%COMP%] { - position: sticky; - top: 0; - z-index: 2; - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 8px 12px; - margin: 0 0 16px; - padding: 8px 12px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: color-mix(in srgb, var(--%NS%surface) 85%, transparent); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); -} - -.toolbar[_ngcontent-%COMP%] .page-picker[_ngcontent-%COMP%] { - display: flex; - flex: 0 1 auto; - align-items: center; - gap: 8px; - min-width: 0; -} - -.page-picker[_ngcontent-%COMP%] > span[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.toolbar[_ngcontent-%COMP%] app-select[_ngcontent-%COMP%] { - width: 280px; - max-width: 420px; -} - -.field-group[_ngcontent-%COMP%] { - display: grid; - gap: 6px; - min-width: 0; - color: var(--%NS%text-2); - font-size: 12px; - font-weight: 500; -} - -.field-group[_ngcontent-%COMP%] app-select[_ngcontent-%COMP%] { - width: 100%; -} - -.message[_ngcontent-%COMP%] { - flex: 1 1 200px; - min-width: 0; - margin: 0; - color: var(--%NS%text-2); - font-size: 12px; - text-align: right; -} - -.message[_ngcontent-%COMP%]:empty { - display: none; -} - -.grid[_ngcontent-%COMP%] { - display: grid; - gap: 16px; - grid-template-columns: repeat(2, minmax(0, 1fr)); -} - -.panel[_ngcontent-%COMP%] { - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - animation: enter 0.35s var(--%NS%ease) both; - min-width: 0; - padding: 16px; -} - -.wide[_ngcontent-%COMP%] { - grid-column: 1/-1; -} - -h2[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - margin: 0 0 16px; -} - -h3[_ngcontent-%COMP%] { - margin: 16px 0 8px; - color: var(--%NS%text-strong); - font-size: 12px; - font-weight: 600; -} - -p[_ngcontent-%COMP%] { - margin: 0; -} - -label[_ngcontent-%COMP%] { - display: grid; - gap: 6px; - color: var(--%NS%text-2); - font-size: 12px; - font-weight: 500; -} - -label.inline[_ngcontent-%COMP%] { - display: flex; - align-items: center; - gap: 8px; - min-width: 0; - color: var(--%NS%text); - cursor: pointer; -} - -.hint[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-weight: 400; -} - -input[_ngcontent-%COMP%], -select[_ngcontent-%COMP%], -textarea[_ngcontent-%COMP%], -button[_ngcontent-%COMP%] { - font: inherit; - color: var(--%NS%text); -} - -input[_ngcontent-%COMP%]:not([type=checkbox]), -select[_ngcontent-%COMP%], -textarea[_ngcontent-%COMP%] { - width: 100%; - min-width: 0; - padding: 0 10px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background-color: var(--%NS%bg); - transition: border-color 0.2s var(--%NS%ease), box-shadow 0.2s var(--%NS%ease); -} - -input[_ngcontent-%COMP%]:not([type=checkbox]), -select[_ngcontent-%COMP%] { - height: 34px; -} - -select[_ngcontent-%COMP%] { - padding-right: 36px; -} - -textarea[_ngcontent-%COMP%] { - padding: 8px 10px; - font-family: var(--%NS%font-mono); - font-size: 12px; -} - -input[_ngcontent-%COMP%]::placeholder, -textarea[_ngcontent-%COMP%]::placeholder { - color: var(--%NS%text-3); -} - -input[_ngcontent-%COMP%]:not([type=checkbox]):hover, -select[_ngcontent-%COMP%]:hover, -textarea[_ngcontent-%COMP%]:hover { - border-color: color-mix(in srgb, var(--%NS%border-strong) 60%, var(--%NS%text-3)); -} - -input[_ngcontent-%COMP%]:not([type=checkbox]):focus-visible, -select[_ngcontent-%COMP%]:focus-visible, -textarea[_ngcontent-%COMP%]:focus-visible { - outline: none; - border-color: var(--%NS%accent); - box-shadow: 0 0 0 3px var(--%NS%accent-soft); -} - -textarea[aria-invalid=true][_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 60%, transparent); -} - -input[type=checkbox][_ngcontent-%COMP%] { - flex: none; - width: 16px; - height: 16px; - margin: 0; - accent-color: var(--%NS%accent); - cursor: pointer; -} - -button[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - justify-content: center; - height: 34px; - padding: 0 14px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - font-weight: 500; - white-space: nowrap; - cursor: pointer; - transition: background-color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease), transform 0.1s var(--%NS%ease); -} - -button[_ngcontent-%COMP%]:hover:not(:disabled) { - border-color: var(--%NS%accent-line); - background: var(--%NS%surface-3); -} - -button[_ngcontent-%COMP%]:active:not(:disabled) { - transform: translateY(1px); -} - -button[type=submit][_ngcontent-%COMP%] { - border-color: var(--%NS%accent); - background: var(--%NS%accent); - color: var(--%NS%accent-ink); - font-weight: 600; -} - -button[type=submit][_ngcontent-%COMP%]:hover:not(:disabled) { - border-color: var(--%NS%accent-hover); - background: var(--%NS%accent-hover); -} - -button[_ngcontent-%COMP%]:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -button.ghost[_ngcontent-%COMP%] { - height: 28px; - padding: 0 10px; - border-color: transparent; - background: none; - color: var(--%NS%text-2); - font-size: 12px; -} - -button.ghost[_ngcontent-%COMP%]:hover:not(:disabled) { - border-color: var(--%NS%border-strong); - background: var(--%NS%surface-2); - color: var(--%NS%text); -} - -button.link[_ngcontent-%COMP%] { - display: inline; - height: auto; - padding: 0; - border: none; - border-radius: 4px; - background: none; - color: var(--%NS%text); - text-align: left; -} - -button.link[_ngcontent-%COMP%]:hover:not(:disabled) { - border: none; - background: none; - color: var(--%NS%accent); -} - -button.link[_ngcontent-%COMP%]:active:not(:disabled) { - transform: none; -} - -[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.muted[_ngcontent-%COMP%] { - color: var(--%NS%text-2); -} - -.small[_ngcontent-%COMP%] { - font-size: 12px; -} - -.bad[_ngcontent-%COMP%] { - color: var(--%NS%danger); -} - -.empty[_ngcontent-%COMP%] { - display: grid; - gap: 4px; - padding: 24px 16px; - border: 1px dashed var(--%NS%border-strong); - border-radius: var(--%NS%radius-sm); - color: var(--%NS%text); - text-align: center; - line-height: 1.5; -} - -.table-wrap[_ngcontent-%COMP%] { - overflow-x: auto; - margin: 0 -16px; - padding: 0 16px; -} - -table[_ngcontent-%COMP%] { - width: 100%; - min-width: 560px; - border-collapse: collapse; - font-variant-numeric: tabular-nums; -} - -th[_ngcontent-%COMP%], -td[_ngcontent-%COMP%] { - height: 36px; - padding: 6px 12px; - border-bottom: 1px solid var(--%NS%border); - text-align: left; - vertical-align: middle; - white-space: nowrap; -} - -th[_ngcontent-%COMP%]:first-child, -td[_ngcontent-%COMP%]:first-child { - padding-left: 8px; -} - -th[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - height: 32px; - border-bottom-color: var(--%NS%border-strong); -} - -.num[_ngcontent-%COMP%] { - text-align: right; -} - -td.num[_ngcontent-%COMP%] { - color: var(--%NS%text-2); -} - -tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] { - cursor: pointer; -} - -tbody[_ngcontent-%COMP%] td[_ngcontent-%COMP%] { - transition: background-color 0.15s var(--%NS%ease); -} - -tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover td[_ngcontent-%COMP%] { - background: var(--%NS%surface-2); -} - -tr.selected[_ngcontent-%COMP%] td[_ngcontent-%COMP%], -tr.selected[_ngcontent-%COMP%]:hover td[_ngcontent-%COMP%] { - background: var(--%NS%accent-soft); -} - -tr.selected[_ngcontent-%COMP%] td[_ngcontent-%COMP%]:first-child { - box-shadow: inset 2px 0 0 var(--%NS%accent); -} - -.method[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); - font-size: 12px; - font-weight: 600; - color: var(--%NS%text-strong); -} - -td.url[_ngcontent-%COMP%] { - width: 100%; - max-width: 0; - font-family: var(--%NS%font-mono); - font-size: 12px; -} - -td.url[_ngcontent-%COMP%] button.link[_ngcontent-%COMP%] { - display: block; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -tr.selected[_ngcontent-%COMP%] td.url[_ngcontent-%COMP%] button.link[_ngcontent-%COMP%] { - color: var(--%NS%text-strong); -} - -td.page-url[_ngcontent-%COMP%] { - max-width: 160px; - overflow: hidden; - color: var(--%NS%text-2); - font-family: var(--%NS%font-mono); - font-size: 12px; - text-overflow: ellipsis; - white-space: nowrap; -} - -.rule-note[_ngcontent-%COMP%] { - grid-column: 1/-1; - margin: 0; - padding-left: 24px; - color: var(--%NS%text-2); - font-size: 12px; -} - -.mismatches[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { - display: grid; - gap: 4px; - padding: 8px 12px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); -} - -.mismatch-row[_ngcontent-%COMP%] { - display: flex; - gap: 8px; - min-width: 0; - font-size: 12px; -} - -.mismatch-row[_ngcontent-%COMP%] code[_ngcontent-%COMP%] { - min-width: 0; - overflow-wrap: anywhere; -} - -.mismatch-label[_ngcontent-%COMP%] { - flex: none; - width: 64px; - color: var(--%NS%text-2); -} - -.status[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); - font-size: 12px; - font-weight: 600; - color: var(--%NS%text-2); -} - -.status.ok[_ngcontent-%COMP%] { - color: var(--%NS%ok); -} - -.status.bad[_ngcontent-%COMP%] { - color: var(--%NS%danger); -} - -.dot[_ngcontent-%COMP%] { - display: inline-block; - width: 6px; - height: 6px; - margin-right: 6px; - border-radius: 50%; - background: currentColor; - vertical-align: middle; -} - -.notes[_ngcontent-%COMP%] { - display: flex; - gap: 4px; -} - -.tag[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - height: 20px; - padding: 0 8px; - border: 1px solid var(--%NS%border-strong); - border-radius: 99px; - background: var(--%NS%surface-3); - color: var(--%NS%text-2); - font-size: 11px; - font-weight: 600; - white-space: nowrap; -} - -.tag.server[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent); - background: color-mix(in srgb, var(--%NS%accent) 12%, transparent); - color: var(--%NS%accent); -} - -.tag.fault[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); - background: color-mix(in srgb, var(--%NS%danger) 12%, transparent); - color: var(--%NS%danger); -} - -.tag.on[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent); - background: color-mix(in srgb, var(--%NS%ok) 12%, transparent); - color: var(--%NS%ok); -} - -.tag.off-tag[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); - background: color-mix(in srgb, var(--%NS%warn) 12%, transparent); - color: var(--%NS%warn); -} - -pre[_ngcontent-%COMP%] { - margin: 0; - padding: 10px 12px; - max-height: 240px; - overflow: auto; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%bg); - color: var(--%NS%text-2); - font: 12px/1.5 var(--%NS%font-mono); - white-space: pre-wrap; - overflow-wrap: anywhere; -} - -pre[_ngcontent-%COMP%] + pre[_ngcontent-%COMP%] { - margin-top: 8px; -} - -pre.warn[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent); - color: var(--%NS%warn); -} - -pre.error[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent); - color: var(--%NS%danger); -} - -.preview[_ngcontent-%COMP%] { - animation: enter 0.2s var(--%NS%ease) both; - margin-top: 16px; -} - -.preview-head[_ngcontent-%COMP%] { - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; - margin-bottom: 4px; -} - -.preview-head[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] { - margin: 0; -} - -.preview-meta[_ngcontent-%COMP%] { - display: flex; - align-items: baseline; - gap: 8px; - min-width: 0; - margin-bottom: 8px; -} - -.preview-url[_ngcontent-%COMP%] { - min-width: 0; - overflow: hidden; - color: var(--%NS%text-2); - font-family: var(--%NS%font-mono); - font-size: 12px; - text-overflow: ellipsis; - white-space: nowrap; -} - -.rule-form[_ngcontent-%COMP%] { - display: grid; - gap: 12px; -} - -.row[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 12px; -} - -@media (max-width: 420px) { - .row[_ngcontent-%COMP%] { - grid-template-columns: minmax(0, 1fr); - } -} -.field-error[_ngcontent-%COMP%] { - margin-top: -4px; - color: var(--%NS%danger); - font-size: 12px; -} - -.field-error[_ngcontent-%COMP%]:empty { - display: none; -} - -.form-actions[_ngcontent-%COMP%] { - display: flex; -} - -.rules-heading[_ngcontent-%COMP%] { - margin-top: 24px; -} - -.rules[_ngcontent-%COMP%], -.plain[_ngcontent-%COMP%] { - display: grid; - gap: 8px; - margin: 0; - padding: 0; - list-style: none; -} - -.rules[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - align-items: center; - gap: 4px 12px; - padding: 8px 12px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface-2); - transition: border-color 0.2s var(--%NS%ease), opacity 0.2s var(--%NS%ease); -} - -.rules[_ngcontent-%COMP%] li[_ngcontent-%COMP%]:hover { - border-color: var(--%NS%border-strong); -} - -.rules[_ngcontent-%COMP%] li.off[_ngcontent-%COMP%] .rule-pattern[_ngcontent-%COMP%] { - color: var(--%NS%text-2); - text-decoration: line-through; -} - -.rules[_ngcontent-%COMP%] li.off[_ngcontent-%COMP%] .rule-method[_ngcontent-%COMP%], -.rules[_ngcontent-%COMP%] li.off[_ngcontent-%COMP%] .rule-meta[_ngcontent-%COMP%], -.rules[_ngcontent-%COMP%] li.off[_ngcontent-%COMP%] .rule-meta[_ngcontent-%COMP%] .status[_ngcontent-%COMP%] { - color: var(--%NS%text-3); -} - -.rules[_ngcontent-%COMP%] li.empty-rule[_ngcontent-%COMP%] { - display: block; - padding: 16px 12px; - border-style: dashed; - border-color: var(--%NS%border-strong); - background: none; - color: var(--%NS%text-2); - text-align: center; -} - -.rule-pattern[_ngcontent-%COMP%] { - min-width: 0; - overflow: hidden; - color: var(--%NS%text-strong); - text-overflow: ellipsis; - white-space: nowrap; -} - -.rule-method[_ngcontent-%COMP%] { - color: var(--%NS%accent); - font-weight: 600; -} - -.rule-meta[_ngcontent-%COMP%] { - display: flex; - flex-wrap: wrap; - grid-column: 1/-1; - gap: 4px 8px; - padding-left: 24px; - color: var(--%NS%text-2); - font-size: 12px; - font-variant-numeric: tabular-nums; -} - -.rule-meta[_ngcontent-%COMP%] > span[_ngcontent-%COMP%] + span[_ngcontent-%COMP%]::before { - content: "·"; - margin-right: 8px; - color: var(--%NS%text-3); -} - -.rule-meta[_ngcontent-%COMP%] .status[_ngcontent-%COMP%] { - font-size: 11px; -} - -.rules[_ngcontent-%COMP%] button.remove[_ngcontent-%COMP%] { - padding: 2px 4px; - color: var(--%NS%text-2); - font-size: 12px; -} - -.rules[_ngcontent-%COMP%] button.remove[_ngcontent-%COMP%]:hover:not(:disabled) { - color: var(--%NS%danger); -} - -.plain[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { - overflow-wrap: anywhere; -} - -code[_ngcontent-%COMP%] { - font-family: var(--%NS%font-mono); - font-size: 12px; -} - -.stats[_ngcontent-%COMP%] { - display: grid; - margin: 0; -} - -.stats[_ngcontent-%COMP%] > div[_ngcontent-%COMP%] { - display: flex; - align-items: center; - justify-content: space-between; - gap: 16px; - min-height: 36px; - padding: 6px 0; - border-bottom: 1px solid var(--%NS%border); -} - -.stats[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]:last-child { - border-bottom: none; -} - -dt[_ngcontent-%COMP%] { - color: var(--%NS%text-2); -} - -dd[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-strong); - font-weight: 600; - font-variant-numeric: tabular-nums; - text-align: right; -} - -.ok-note[_ngcontent-%COMP%] { - color: var(--%NS%text-2); -} - -.summary-line[_ngcontent-%COMP%] { - margin-bottom: 8px; - font-variant-numeric: tabular-nums; -} - -.entries[_ngcontent-%COMP%] { - border-top: 1px solid var(--%NS%border); -} - -details[_ngcontent-%COMP%] { - border-bottom: 1px solid var(--%NS%border); -} - -details[_ngcontent-%COMP%] pre[_ngcontent-%COMP%] { - margin: 0 0 12px; -} - -summary[_ngcontent-%COMP%] { - display: flex; - align-items: center; - gap: 8px; - min-height: 36px; - padding: 6px 4px; - border-radius: 4px; - list-style: none; - cursor: pointer; - transition: background-color 0.15s var(--%NS%ease); -} - -summary[_ngcontent-%COMP%]::-webkit-details-marker { - display: none; -} - -summary[_ngcontent-%COMP%]:hover { - background: var(--%NS%surface-2); -} - -.chevron[_ngcontent-%COMP%] { - flex: none; - width: 6px; - height: 6px; - margin: 0 4px; - border-right: 1.5px solid var(--%NS%text-3); - border-bottom: 1.5px solid var(--%NS%text-3); - transform: rotate(-45deg); - transition: transform 0.15s var(--%NS%ease); -} - -details[open][_ngcontent-%COMP%] .chevron[_ngcontent-%COMP%] { - transform: rotate(45deg); -} - -.entry-key[_ngcontent-%COMP%] { - flex: 1 1 auto; - min-width: 0; - overflow: hidden; - font-family: var(--%NS%font-mono); - font-size: 12px; - text-overflow: ellipsis; - white-space: nowrap; -} - -summary[_ngcontent-%COMP%]:hover .entry-key[_ngcontent-%COMP%] { - color: var(--%NS%accent); -} - -.entry-size[_ngcontent-%COMP%] { - flex: none; - color: var(--%NS%text-2); - font-size: 12px; - font-variant-numeric: tabular-nums; -} - -@media (max-width: 760px) { - .grid[_ngcontent-%COMP%] { - grid-template-columns: minmax(0, 1fr); - } - .toolbar[_ngcontent-%COMP%] .page-picker[_ngcontent-%COMP%] { - flex: 1 1 100%; - } - .toolbar[_ngcontent-%COMP%] app-select[_ngcontent-%COMP%] { - flex: 1 1 auto; - width: auto; - max-width: none; - } - .message[_ngcontent-%COMP%] { - text-align: left; - } -}`]})};function Az(e,t){e&1&&(ps(),V(0,`svg`,9),U(1,`path`,20),H())}function jz(e,t){e&1&&(ps(),V(0,`svg`,10),U(1,`path`,21)(2,`path`,22)(3,`path`,23)(4,`path`,24),H())}function Mz(e,t){e&1&&(ps(),V(0,`svg`,9),U(1,`path`,25)(2,`path`,26)(3,`path`,27)(4,`path`,28)(5,`path`,29)(6,`path`,30),H())}function Nz(e,t){if(e&1&&(V(0,`a`,15),U(1,`img`,31),V(2,`span`,32)(3,`span`,33),Y(4,`Being built by`),H(),V(5,`strong`),Y(6),H(),V(7,`span`,34),Y(8),H()(),V(9,`span`,35),Y(10,`→`),H(),V(11,`span`,36),Y(12,`(opens in a new tab)`),H()()),e&2){let e=t,n=q();xg(`href`,`https://github.com/santoshyadavdev/angular-devtools/pull/`+n.info().pr,_u),j(),xg(`src`,`https://github.com/`+e.login+`.png?size=96`,_u),j(5),X(e.name),j(2),O_(`@`,e.login,` · PR #`,n.info().pr)}}function Pz(e,t){if(e&1&&(V(0,`a`,16)(1,`span`,32)(2,`strong`),Y(3),H()(),V(4,`span`,35),Y(5,`→`),H(),V(6,`span`,36),Y(7,`(opens in a new tab)`),H()()),e&2){let e=t;xg(`href`,e.href,_u),j(3),X(e.label)}}function Fz(e,t){if(e&1&&(V(0,`li`),Y(1),H()),e&2){let e=t.$implicit,n=t.$index;n_(`animation-delay`,200+n*120,`ms`),j(),X(e)}}var Iz=class e{info=$.required();static ɵfac=function(t){return new(t||e)};static ɵcmp=Oh({type:e,selectors:[[`app-coming-soon`]],hostVars:2,hostBindings:function(e,t){e&2&&n_(`--%NS%brand`,t.info().color)},inputs:{info:[1,`info`]},decls:29,vars:7,consts:[[`aria-labelledby`,`soon-title`,1,`soon`],[`aria-hidden`,`true`,1,`stage`],[1,`ring`,`r1`],[1,`ring`,`r2`],[1,`orbit`,`o1`],[1,`dot`],[1,`orbit`,`o2`],[1,`orbit`,`o3`],[1,`logo`],[`viewBox`,`0 0 256 256`,`width`,`96`,`height`,`96`],[`viewBox`,`0 0 256 182`,`width`,`104`,`height`,`74`],[1,`badge`],[`aria-hidden`,`true`,1,`spark`],[`id`,`soon-title`],[1,`summary`],[`target`,`_blank`,`rel`,`noopener noreferrer`,1,`author`,3,`href`],[`target`,`_blank`,`rel`,`noopener noreferrer`,1,`author`,`cta`,3,`href`],[1,`plans-title`],[1,`plans`],[3,`animation-delay`],[`fill`,`#3c5afd`,`d`,`M237.248 18.752q18.061 18.06 18.748 45.247V192c-.457 18.12-6.707 33.207-18.748 45.247c-12.04 12.04-27.127 18.291-45.251 18.752H63.999q-27.187-.69-45.247-18.752C6.712 225.208.46 210.121 0 192.001V64q.69-27.187 18.752-45.247Q36.812.692 63.999 0h127.998c18.124.46 33.211 6.711 45.251 18.752m-17.655 103q-6.033-6.003-6.28-15.066V64q-.192-9.063-6.221-15.091c-4.02-4.023-9.054-6.093-15.095-6.22h-21.312v106.626L85.315 42.687H63.999c-6.042.128-11.072 2.198-15.091 6.221c-4.023 4.02-6.093 9.05-6.22 15.09v42.688q-.249 9.063-6.281 15.066q-6.03 5.996-15.091 6.246q9.062.255 15.09 6.25c4.024 4.002 6.115 9.024 6.281 15.066V192c.128 6.037 2.198 11.072 6.221 15.091q6.03 6.03 15.09 6.22h21.317V106.687l85.37 106.627h21.312c6.041-.128 11.076-2.202 15.095-6.221s6.093-9.054 6.22-15.09v-42.688q.249-9.063 6.281-15.066q6.03-5.995 15.091-6.25q-9.062-.25-15.09-6.246`],[`fill`,`#c30f2e`,`d`,`M152.228.001L48.455 181.046H256L152.228 0z`],[`fill`,`#dd0330`,`d`,`M88.314 26.967L0 181.52h176.628L88.315 26.967z`],[`fill`,`#fff`,`d`,`M18.167 135.294h220.236v-2.419H18.167z`],[`fill`,`#fff`,`d`,`M204.38 170.667c-.861 0-1.67-.358-2.348-1.034c-4.045-4.063-4.221-20.586-4.026-45.33c.11-13.521.257-32.043-1.9-33.504c-2.104.873-2.315 16.172-2.451 26.301c-.162 11.785-.327 23.98-2.242 30.189c-.57 1.84-1.306 3.525-2.786 3.39c-2.086-.185-2.76-3.48-4.317-16.478c-.647-5.4-1.317-10.98-2.101-13.14a11 11 0 0 0-.269-.66c-.835 1.889-1.8 7.079-2.47 10.682c-.927 4.976-1.803 9.676-2.9 11.726c-.847 1.575-2.19 3.63-4.067 3.231c-2.558-.537-3.323-5.693-3.552-8.719c0-25.455-3.33-28.417-3.997-28.753l-.107.081l-.162-.036c-2.377 1.038-2.506 9.294-2.627 17.276c-.096 5.856-.198 12.492-1.053 18.701c-1.108 8.05-2.448 9.603-4.115 9.507c-3.838-.262-3.95-13.482-3.95-14.987c0-.472.012-1.028.027-1.642c.074-3.076.205-8.8-1.687-10.604c-.25-.239-.603-.515-.879-.437c-1.347.339-2.745 4.714-3.209 6.153c-.147.457-.265.833-.364 1.09c-.078.214-.177.515-.294.88c-1.02 3.095-2.18 6.183-4.16 6.944c-.732.284-1.498.222-2.216-.183c-.953-.541-1.73-1.646-2.455-3.482c-.397-1.016-.735-2.046-1.082-3.081c-.419-1.263-.85-2.569-1.384-3.808c-.419-.965-1.464-1.4-2.796-1.164c-2.768.494-3.232 3.29-3.622 7.5c-.07.733-.137 1.452-.228 2.128c-.011.198-.501 6.38-.814 8.344c-.865 5.39-2.002 7.512-3.89 7.358c-4.66-.398-6.798-20.836-6.684-29.47c.088-6.592-1.104-9-1.818-9.382c-.074-.034-.189-.096-.46.095c-.843.571-1.594 2.348-1.363 4.215c2.566 20.32.674 43.592-3.96 48.833c-1.46 1.649-3.448 1.627-4.832.236c-4.049-4.064-4.218-20.586-4.026-45.33c.11-13.521.254-32.043-1.9-33.504c-2.105.873-2.311 16.172-2.45 26.301c-.163 11.785-.329 23.98-2.246 30.189c-.57 1.84-1.307 3.525-2.782 3.39c-2.091-.186-2.761-3.48-4.321-16.478c-.649-5.4-1.319-10.98-2.101-13.14c-.1-.273-.189-.49-.27-.66c-.832 1.889-1.796 7.079-2.466 10.682c-.927 4.976-1.803 9.676-2.904 11.726c-.846 1.575-2.19 3.63-4.063 3.231c-2.558-.537-3.324-5.693-3.552-8.719c-.003-25.455-3.33-28.417-3.997-28.753l-.106.081l-.166-.036c-2.374 1.038-2.503 9.293-2.629 17.276c-.091 5.856-.194 12.492-1.048 18.701c-1.107 8.05-2.437 9.618-4.111 9.507c-3.846-.262-3.958-13.482-3.958-14.987c0-.472.016-1.028.03-1.642c.074-3.076.207-8.8-1.685-10.604c-.25-.239-.603-.515-.88-.438c-1.347.34-2.75 4.715-3.206 6.155a47 47 0 0 1-.364 1.09q-.16.432-.298.875c-1.02 3.096-2.18 6.187-4.155 6.95c-.736.282-1.506.22-2.22-.185c-.953-.541-1.734-1.646-2.454-3.482c-.398-1.016-.74-2.046-1.083-3.081c-.42-1.263-.854-2.569-1.387-3.808c-.416-.965-1.465-1.4-2.797-1.164c-3.188.567-3.943 4.52-4.55 9.238l-.106.839l-2.411-.32l.114-.824c.527-4.137 1.328-10.39 6.53-11.31c2.446-.435 4.585.581 5.446 2.583c.578 1.34 1.031 2.695 1.466 4.008c.324.99.654 1.98 1.037 2.959c.674 1.708 1.197 2.15 1.392 2.257c1.218-.38 2.462-4.167 2.873-5.414c.13-.402.24-.732.328-.968c.085-.233.195-.571.328-.98c1.097-3.43 2.474-7.144 4.918-7.762c.747-.191 1.903-.166 3.157 1.035c2.665 2.544 2.525 8.48 2.433 12.41c-.014.59-.028 1.126-.028 1.583c0 6.272.93 10.655 1.64 12.16c.367-.77.998-2.63 1.598-7.007c.831-6.066.938-12.624 1.027-18.41c.161-10.24.275-17.663 3.982-19.408c.552-.339 1.469-.522 2.436-.033c3.586 1.803 5.326 11.885 5.326 30.817c.225 2.926 1.013 6.006 1.66 6.448c.004-.066.53-.39 1.394-2.01c.925-1.718 1.845-6.665 2.655-11.026c1.792-9.614 2.606-12.989 4.726-13.166c1.615-.158 2.362 1.896 2.676 2.76c.883 2.422 1.537 7.888 2.23 13.678c.54 4.49 1.31 10.902 2.094 13.497c.084-.228.18-.5.283-.836c1.815-5.878 1.98-17.887 2.14-29.507c.22-16.14.503-26.139 3.448-28.226a2.44 2.44 0 0 1 2.233-.316c3.448 1.144 3.714 11.254 3.519 35.8c-.14 17.799-.313 39.952 3.323 43.603c.317.32.542.32.622.32c.17 0 .413-.161.67-.452c3.681-4.162 6.01-26.022 3.372-46.927c-.328-2.602.677-5.337 2.392-6.514c.946-.652 2.036-.736 2.978-.232c2.145 1.14 3.187 5.024 3.102 11.546c-.15 11.387 2.584 24.714 4.37 26.842c.282-.471.842-1.763 1.379-5.145c.301-1.87.799-8.153.806-8.216c.09-.71.155-1.398.217-2.097c.369-3.924.82-8.804 5.613-9.654c2.444-.435 4.583.577 5.448 2.583c.577 1.34 1.027 2.695 1.46 4.008c.332.99.664 1.98 1.046 2.959c.67 1.708 1.197 2.15 1.387 2.257c1.218-.38 2.467-4.167 2.875-5.41c.132-.402.243-.737.328-.973c.088-.228.195-.57.324-.979c1.1-3.43 2.477-7.144 4.924-7.762c.74-.191 1.9-.166 3.154 1.035c2.665 2.543 2.526 8.48 2.437 12.41q-.029.792-.033 1.583c0 6.272.931 10.655 1.641 12.16c.365-.77.994-2.63 1.601-7.007c.832-6.066.931-12.624 1.027-18.41c.159-10.24.273-17.663 3.98-19.408c.55-.339 1.467-.522 2.44-.033c3.58 1.803 5.325 11.884 5.325 30.817c.224 2.926 1.012 6.006 1.656 6.448c.008-.066.526-.39 1.399-2.01c.923-1.718 1.84-6.665 2.653-11.026c1.786-9.614 2.602-12.989 4.722-13.166c1.62-.158 2.367 1.896 2.68 2.76c.88 2.422 1.535 7.888 2.233 13.678c.534 4.49 1.304 10.902 2.092 13.497c.08-.228.176-.5.28-.836c1.813-5.878 1.976-17.887 2.138-29.507c.216-16.14.504-26.139 3.448-28.226a2.45 2.45 0 0 1 2.234-.316c3.452 1.144 3.718 11.254 3.52 35.8c-.141 17.799-.314 39.952 3.319 43.603c.324.32.544.32.63.32c.165 0 .408-.161.662-.452c3.687-4.162 6.014-26.022 3.375-46.927c-.342-2.723.43-5.47 1.84-6.526c.71-.537 1.575-.647 2.37-.313c2.054.877 3.445 4.63 4.255 11.484c.339 2.87.641 5.974.931 9.036c.641 6.683 1.509 15.69 2.684 17.67c.36-.46 1.096-1.704 2.19-5.038l2.307.753c-1.696 5.157-3.026 7.1-4.755 6.902c-2.69-.299-3.468-5.734-4.84-20.055c-.29-3.048-.59-6.132-.928-8.989c-1.03-8.74-2.782-9.532-2.801-9.54c-.342.174-1.137 1.992-.842 4.31c2.558 20.32.673 43.597-3.964 48.834c-.747.842-1.587 1.27-2.485 1.27`],[`fill`,`#53b9ff`,`d`,`M39.863 54.115L.311 93.716l60.995 61.179L0 216.385l39.428 39.619l61.43-61.507l61.097 61.068l39.552-39.602z`],[`fill`,`#119eff`,`d`,`m140.517 154.896l-39.658 39.601l61.097 61.069l39.552-39.602z`],[`fill-opacity`,`.2`,`d`,`m140.517 154.896l-39.658 39.601l15.267 15.182z`],[`fill`,`#53b9ff`,`d`,`M194.57 100.985L256 39.478L216.431 0l-61.412 61.384L93.917.311L54.365 39.913L216.01 201.761l39.552-39.602z`],[`fill`,`#119eff`,`d`,`m115.36 100.987l39.659-39.602L93.917.313L54.365 39.914z`],[`fill-opacity`,`.2`,`d`,`m115.359 100.985l39.659-39.601l-15.271-15.186z`],[`width`,`40`,`height`,`40`,`alt`,``,3,`src`],[1,`who`],[1,`by`],[1,`login`],[`aria-hidden`,`true`,1,`go`],[1,`sr-only`]],template:function(e,t){if(e&1&&(V(0,`section`,0)(1,`div`,1),U(2,`span`,2)(3,`span`,3),V(4,`span`,4),U(5,`span`,5),H(),V(6,`span`,6),U(7,`span`,5),H(),V(8,`span`,7),U(9,`span`,5),H(),V(10,`div`,8),N(11,Az,2,0,`:svg:svg`,9)(12,jz,5,0,`:svg:svg`,10)(13,Mz,7,0,`:svg:svg`,9),H()(),V(14,`p`,11)(15,`span`,12),Y(16,`✦`),H(),Y(17),H(),V(18,`h2`,13),Y(19),H(),V(20,`p`,14),Y(21),H(),N(22,Nz,13,5,`a`,15),N(23,Pz,8,2,`a`,16),V(24,`h3`,17),Y(25),H(),V(26,`ul`,18),F(27,Fz,2,3,`li`,19,lg),H()()),e&2){let e,n,r;j(11),P((e=t.info().id)===`nativescript`?11:e===`analog`?12:e===`capacitor`?13:-1),j(6),Z(` `,t.info().badge),j(2),X(t.info().heading),j(2),X(t.info().summary),j(),P((n=t.info().author)?22:-1,n),j(),P((r=t.info().link)?23:-1,r),j(2),Z(` `,t.info().link?`In an `+t.info().name+` app`:`On the roadmap`,` `),j(2),I(t.info().plans)}},styles:[`[_nghost-%COMP%] { - display: block; - min-height: 100%; - background: radial-gradient(60% 50% at 50% 18%, color-mix(in srgb, var(--%NS%brand) 22%, transparent), transparent 70%); -} - -.soon[_ngcontent-%COMP%] { - display: flex; - flex-direction: column; - align-items: center; - max-width: 560px; - margin: 0 auto; - padding: 24px 0 40px; - color: var(--%NS%text-2); - text-align: center; -} - -.stage[_ngcontent-%COMP%] { - position: relative; - display: grid; - place-items: center; - width: 180px; - height: 180px; - margin: 0 auto 16px; -} - -.logo[_ngcontent-%COMP%] { - position: relative; - z-index: 2; - display: grid; - place-items: center; - width: 116px; - height: 116px; - border-radius: 32px; - background: var(--%NS%surface-2); - box-shadow: 0 0 0 1px color-mix(in srgb, var(--%NS%brand) 45%, transparent), 0 20px 60px -10px color-mix(in srgb, var(--%NS%brand) 70%, transparent); - animation: _ngcontent-%COMP%_float 4s ease-in-out infinite; -} - -.ring[_ngcontent-%COMP%] { - position: absolute; - inset: 30px; - border-radius: 50%; - border: 1px solid color-mix(in srgb, var(--%NS%brand) 60%, transparent); - animation: _ngcontent-%COMP%_pulse 3s ease-out infinite; -} - -.r2[_ngcontent-%COMP%] { - animation-delay: 1.5s; -} - -.orbit[_ngcontent-%COMP%] { - position: absolute; - inset: 0; - animation: spin 9s linear infinite; -} - -.o2[_ngcontent-%COMP%] { - inset: 18px; - animation-duration: 6s; - animation-direction: reverse; -} - -.o3[_ngcontent-%COMP%] { - inset: 40px; - animation-duration: 12s; -} - -.dot[_ngcontent-%COMP%] { - position: absolute; - top: -4px; - left: 50%; - width: 8px; - height: 8px; - margin-left: -4px; - border-radius: 50%; - background: var(--%NS%brand); - box-shadow: 0 0 12px var(--%NS%brand); -} - -.o2[_ngcontent-%COMP%] .dot[_ngcontent-%COMP%] { - width: 6px; - height: 6px; - background: var(--%NS%accent); - box-shadow: 0 0 10px var(--%NS%accent); -} - -.o3[_ngcontent-%COMP%] .dot[_ngcontent-%COMP%] { - width: 4px; - height: 4px; - background: var(--%NS%text-strong); -} - -.badge[_ngcontent-%COMP%] { - position: relative; - display: inline-flex; - align-items: center; - gap: 6px; - height: 24px; - margin: 0 0 12px; - padding: 0 12px; - overflow: hidden; - border: 1px solid color-mix(in srgb, var(--%NS%brand) 55%, transparent); - border-radius: 99px; - background: color-mix(in srgb, var(--%NS%brand) 14%, var(--%NS%surface)); - color: var(--%NS%text-strong); - font-size: 12px; - font-weight: 600; - letter-spacing: 0.04em; -} - -.badge[_ngcontent-%COMP%]::after { - content: ""; - position: absolute; - inset: 0; - background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.2) 50%, transparent 80%); - transform: translateX(-100%); - animation: _ngcontent-%COMP%_shimmer 2.8s ease-in-out infinite; -} - -.spark[_ngcontent-%COMP%] { - color: var(--%NS%accent); - animation: _ngcontent-%COMP%_twinkle 1.6s ease-in-out infinite; -} - -h2[_ngcontent-%COMP%] { - margin: 0; - color: var(--%NS%text-strong); - font-size: 28px; - line-height: 1.2; - letter-spacing: -0.02em; - text-wrap: balance; - overflow-wrap: anywhere; -} - -.summary[_ngcontent-%COMP%] { - max-width: 480px; - margin: 12px 0 24px; - font-size: 14px; - line-height: 1.6; - text-wrap: pretty; -} - -.author[_ngcontent-%COMP%] { - display: inline-flex; - align-items: center; - gap: 12px; - max-width: 100%; - min-height: 44px; - padding: 8px 16px 8px 8px; - border: 1px solid var(--%NS%border-strong); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - color: var(--%NS%text); - text-align: left; - text-decoration: none; - transition: border-color 0.2s var(--%NS%ease), background-color 0.2s var(--%NS%ease), transform 0.2s var(--%NS%ease); -} - -.author[_ngcontent-%COMP%]:hover { - border-color: color-mix(in srgb, var(--%NS%brand) 70%, transparent); - background: var(--%NS%surface-2); - transform: translateY(-2px); -} - -.author[_ngcontent-%COMP%]:active { - transform: none; -} - -.author[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: 2px; -} - -.cta[_ngcontent-%COMP%] { - padding: 8px 16px; -} - -.author[_ngcontent-%COMP%] img[_ngcontent-%COMP%] { - flex: none; - border-radius: 50%; - background: var(--%NS%surface-3); -} - -.who[_ngcontent-%COMP%] { - display: grid; - min-width: 0; - line-height: 1.35; -} - -.who[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] { - overflow: hidden; - color: var(--%NS%text-strong); - font-size: 14px; - text-overflow: ellipsis; - white-space: nowrap; -} - -.by[_ngcontent-%COMP%], -.login[_ngcontent-%COMP%] { - overflow: hidden; - color: var(--%NS%text-2); - font-size: 12px; - font-variant-numeric: tabular-nums; - text-overflow: ellipsis; - white-space: nowrap; -} - -.go[_ngcontent-%COMP%] { - flex: none; - margin-left: 4px; - color: var(--%NS%brand); - font-size: 16px; - transition: transform 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease); -} - -.author[_ngcontent-%COMP%]:hover .go[_ngcontent-%COMP%], -.author[_ngcontent-%COMP%]:focus-visible .go[_ngcontent-%COMP%] { - transform: translateX(3px); -} - -.plans-title[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - width: 100%; - max-width: 440px; - margin: 32px 0 12px; - text-align: left; -} - -.plans[_ngcontent-%COMP%] { - display: grid; - gap: 8px; - width: 100%; - max-width: 440px; - margin: 0 auto; - padding: 0; - list-style: none; - text-align: left; -} - -.plans[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { - display: flex; - gap: 12px; - align-items: flex-start; - padding: 12px 16px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius-sm); - background: var(--%NS%surface); - color: var(--%NS%text); - font-size: 13px; - line-height: 20px; - overflow-wrap: anywhere; - opacity: 0; - animation: _ngcontent-%COMP%_rise 0.5s var(--%NS%ease) forwards; -} - -.plans[_ngcontent-%COMP%] li[_ngcontent-%COMP%]::before { - content: ""; - flex: none; - width: 8px; - height: 8px; - margin-top: 6px; - border-radius: 50%; - background: var(--%NS%brand); - box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%brand) 20%, transparent); -} - -@media (max-height: 640px) { - .soon[_ngcontent-%COMP%] { - padding-top: 12px; - } - .stage[_ngcontent-%COMP%] { - width: 120px; - height: 120px; - margin-bottom: 8px; - } - .logo[_ngcontent-%COMP%] { - width: 80px; - height: 80px; - border-radius: 22px; - } - .logo[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] { - width: 60px; - height: auto; - } - .o3[_ngcontent-%COMP%] { - display: none; - } - h2[_ngcontent-%COMP%] { - font-size: 22px; - } -} -@media (max-width: 420px) { - h2[_ngcontent-%COMP%] { - font-size: 22px; - } - .author[_ngcontent-%COMP%] { - align-self: stretch; - } - .who[_ngcontent-%COMP%] { - flex: 1; - } -} -@keyframes _ngcontent-%COMP%_float { - 50% { - transform: translateY(-10px) rotate(-2deg); - } -} -@keyframes _ngcontent-%COMP%_pulse { - from { - transform: scale(0.8); - opacity: 0.9; - } - to { - transform: scale(1.6); - opacity: 0; - } -} -@keyframes _ngcontent-%COMP%_shimmer { - 60%, 100% { - transform: translateX(100%); - } -} -@keyframes _ngcontent-%COMP%_twinkle { - 50% { - opacity: 0.35; - transform: scale(0.8); - } -} -@keyframes _ngcontent-%COMP%_rise { - from { - opacity: 0; - transform: translateY(8px); - } - to { - opacity: 1; - transform: none; - } -} -@media (prefers-reduced-motion: reduce) { - .logo[_ngcontent-%COMP%], - .ring[_ngcontent-%COMP%], - .orbit[_ngcontent-%COMP%], - .badge[_ngcontent-%COMP%]::after, - .spark[_ngcontent-%COMP%] { - animation: none; - } - .ring[_ngcontent-%COMP%] { - opacity: 0.3; - } - .plans[_ngcontent-%COMP%] li[_ngcontent-%COMP%] { - opacity: 1; - animation: none; - } - .author[_ngcontent-%COMP%]:hover, - .author[_ngcontent-%COMP%]:hover .go[_ngcontent-%COMP%] { - transform: none; - } -}`]})},Lz=` - .devframes-dock-entry button { - transition: opacity 0.2s, filter 0.2s, background-color 0.2s, transform 0.3s; - } - .devframes-dock-entry button:not(.scale-120) { - opacity: 0.45; - filter: saturate(0); - } - .devframes-dock-entry button:not(.scale-120):hover, - .devframes-dock-entry button:not(.scale-120):focus-visible { - opacity: 1; - filter: none; - } - .devframes-dock-entry button:focus-visible { - outline: 2px solid #f5a524; - outline-offset: 2px; - } - .devframes-dock-entry button.scale-120 { - transform: none; - background: rgba(245, 165, 36, 0.16); - box-shadow: inset 0 0 0 1px rgba(245, 165, 36, 0.6); - } - iframe { - background: #0b0b0e; - color-scheme: dark; - } - @media (prefers-reduced-motion: reduce) { - .devframes-dock-entry button { - transition: none; - } - } -`;function Rz(e,t=50){let n=e?.querySelector(`devframes-dock-standalone`)?.shadowRoot;if(n){if(n.querySelector(`style[data-ng-devtools]`))return;let t=e.createElement(`style`);t.dataset.ngDevtools=``,t.textContent=Lz,n.append(t);return}t>0&&setTimeout(()=>Rz(e,t-1),100)}var zz=`__DEVFRAME_HUB_CLIENT_CONTEXT__`,Bz=`ng-devtools:`;function Vz(){try{return window.parent===window?void 0:window.parent[zz]}catch{return}}function Hz(e,t,n=50){let r=Vz();if(!r){if(n<=0||window.parent===window)return()=>{};let r=()=>{},i=setTimeout(()=>r=Hz(e,t,n-1),100);return()=>{clearTimeout(i),r()}}let i=e.map(e=>r.docks.getStateById(Bz+e)?.events.on(`entry:activated`,()=>t(e))??(()=>{})),a=r.docks.selectedId,o=e.find(e=>Bz+e===a);return o&&t(o),()=>i.forEach(e=>e())}async function Uz(e){let t=Vz();if(!t)return!1;try{return await t.docks.switchEntry(Bz+e)}catch{return!1}}var Wz=[`nav`],Gz=[`main`],Kz=(e,t)=>t.id;function qz(e,t){e&1&&(ps(),R(0,`svg`,4),B(1,`path`,17),z())}function Jz(e,t){e&1&&(ps(),R(0,`svg`,4),B(1,`path`,18)(2,`path`,19)(3,`path`,20)(4,`path`,21)(5,`path`,22)(6,`path`,23),z())}function Yz(e,t){e&1&&(ps(),R(0,`svg`,5),B(1,`path`,24)(2,`path`,25)(3,`path`,26)(4,`path`,27),z())}function Xz(e,t){e&1&&(ps(),R(0,`svg`,6),B(1,`path`,28),z())}function Zz(e,t){e&1&&(ps(),R(0,`svg`,7)(1,`defs`)(2,`linearGradient`,29),B(3,`stop`,30)(4,`stop`,31)(5,`stop`,32)(6,`stop`,33)(7,`stop`,34)(8,`stop`,35),z()(),B(9,`path`,36),z())}function Qz(e,t){e&1&&(ps(),R(0,`svg`,8),B(1,`path`,37),z())}function $z(e,t){if(e&1){let e=W();R(0,`button`,39),G(`click`,function(){let t=O(e).$implicit;return k(q(2).switchTab(t.id))}),B(1,`app-tab-icon`,40),R(2,`span`),Y(3),z()()}if(e&2){let e=t.$implicit,n=q(2);J(`active`,n.tab()===e.id),M(`aria-current`,n.tab()===e.id?`page`:null),j(),L(`name`,e.id),j(2),X(e.label)}}function eB(e,t){e&1&&F(0,$z,4,5,`button`,38,Kz),e&2&&I(q().tabs())}function tB(e,t){e&1&&(R(0,`p`,14),Y(1,` Can't reach the devtools server. Check that the dev server is running, then reload. `),z())}function nB(e,t){e&1&&B(0,`app-coming-soon`,15),e&2&&L(`info`,t)}function rB(e,t){e&1&&(R(0,`p`,16),Y(1,` This inspector is turned off in the devtools config (`),R(2,`code`),Y(3,`inspectors`),z(),Y(4,`). `),z())}function iB(e,t){if(e&1){let e=W();R(0,`app-dashboard`,43),G(`navigate`,function(t){return O(e),k(q(2).switchTab(t))}),z()}e&2&&L(`rpc`,q(2).rpc())}function aB(e,t){if(e&1){let e=W();R(0,`app-component-tree`,44),G(`focusHandled`,function(){return O(e),k(q(2).componentFocus.set(null))})(`showForm`,function(t){return O(e),k(q(2).showForm(t))}),z()}if(e&2){let e=q(2);L(`rpc`,e.rpc())(`focus`,e.componentFocus())}}function oB(e,t){e&1&&B(0,`app-route-inspector`,41),e&2&&L(`rpc`,q(2).rpc())}function sB(e,t){e&1&&B(0,`app-signal-inspector`,41),e&2&&L(`rpc`,q(2).rpc())}function cB(e,t){e&1&&B(0,`app-di-inspector`,41),e&2&&L(`rpc`,q(2).rpc())}function lB(e,t){e&1&&B(0,`app-store-inspector`,41),e&2&&L(`rpc`,q(2).rpc())}function uB(e,t){e&1&&B(0,`app-network-inspector`,41),e&2&&L(`rpc`,q(2).rpc())}function dB(e,t){if(e&1){let e=W();R(0,`app-forms-inspector`,45),G(`focusHandled`,function(){return O(e),k(q(2).formFocus.set(null))}),z()}if(e&2){let e=q(2);L(`rpc`,e.rpc())(`focus`,e.formFocus())}}function fB(e,t){e&1&&B(0,`app-pipes-inspector`,41),e&2&&L(`rpc`,q(2).rpc())}function pB(e,t){e&1&&B(0,`app-analog-inspector`,41),e&2&&L(`rpc`,q(2).rpc())}function mB(e,t){if(e&1&&N(0,iB,1,1,`app-dashboard`,41)(1,aB,1,2,`app-component-tree`,42)(2,oB,1,1,`app-route-inspector`,41)(3,sB,1,1,`app-signal-inspector`,41)(4,cB,1,1,`app-di-inspector`,41)(5,lB,1,1,`app-store-inspector`,41)(6,uB,1,1,`app-network-inspector`,41)(7,dB,1,2,`app-forms-inspector`,42)(8,fB,1,1,`app-pipes-inspector`,41)(9,pB,1,1,`app-analog-inspector`,41),e&2){let e;P((e=q().tab())===`dashboard`?0:e===`components`?1:e===`routes`?2:e===`signals`?3:e===`injectors`?4:e===`store`?5:e===`network`?6:e===`forms`?7:e===`pipes`?8:e===`analog`?9:-1)}}var hB=[`angular`,`ngrx`,`analog`,`nativescript`,`capacitor`],gB={angular:`Angular`,ngrx:`NgRx Store`,analog:`Analog`,nativescript:`NativeScript`,capacitor:`Capacitor`},_B={ngrx:`#d770e8`,analog:`#ff5470`,nativescript:`#8196ff`,capacitor:`#53b9ff`},vB={ngrx:`store`,analog:`analog`},yB={store:`ngrx`,analog:`analog`},bB={nativescript:{id:`nativescript`,name:`NativeScript`,badge:`Coming Soon`,heading:`NativeScript Support`,summary:`Inspect NativeScript Angular apps running natively on iOS and Android, with the same tools.`,color:`#3c5afd`,plans:[`Native overlay that reports the component tree from the device`,`Standalone devtools server your phone or simulator connects to`,`Example NativeScript app to try it end to end`],pr:16,author:{name:`Nathan Walker`,login:`NathanWalker`}},capacitor:{id:`capacitor`,name:`Capacitor`,badge:`Coming Soon`,heading:`Capacitor Support`,summary:`Connect Ionic and Capacitor apps running in a device WebView back to these tools.`,color:`#119eff`,plans:[`Manual overlay start for apps that load from capacitor:// or a device`,`Connection settings passed in, no cross-origin probing`,`Setup guides for the Android emulator and iOS simulator`],pr:21,author:{name:`Erkam Yaman`,login:`erkamyaman`}}},xB={id:`analog`,name:`Analog`,badge:`Not in this app`,heading:`This app doesn’t use Analog`,summary:`In an Analog app this dock shows your file routes, server load() and API calls, render modes and route lint.`,color:`#dd0330`,plans:[`Which page, layout and .server.ts files render a URL`,`Every load(), server function and API call with timing`,`SSR, prerendered or client only, per page`],link:{label:`Get started with Analog`,href:`https://analogjs.org/docs/getting-started`}};function SB(){let e=new URLSearchParams(location.search).get(`view`);return hB.find(t=>t===e)??null}var CB=class e{analog=A(!1);allTabs=[{id:`dashboard`,label:`Dashboard`},{id:`analog`,label:`Analog`},{id:`components`,label:`Components`},{id:`routes`,label:`Routes`},{id:`signals`,label:`Signals`},{id:`injectors`,label:`Injectors`},{id:`store`,label:`Store`},{id:`forms`,label:`Forms`},{id:`pipes`,label:`Pipes`},{id:`network`,label:`SSR & HTTP`}];view=A(SB());viewAccent=Q(()=>{let e=this.view();return(e&&_B[e])??null});title=Q(()=>{let e=this.view();return e?gB[e]:`Angular DevTools`});analogKnown=A(!1);comingSoon=Q(()=>{let e=this.view();return e===`analog`?this.analogKnown()&&!this.analog()?xB:void 0:e?bB[e]:void 0});config=Q(()=>kT(this.rpc()));tabEnabled=MT;tabs=Q(()=>{if(this.comingSoon())return[];let e=this.view(),t=e?vB[e]:void 0,n=this.allTabs.filter(e=>MT(e.id,this.config()));return t?n.filter(e=>e.id===t):n.filter(t=>(t.id!==`analog`||this.analog())&&!(e===`angular`&&yB[t.id]))});tab=nv(()=>{let e=this.view();return e&&vB[e]||`dashboard`});rpc=A(null);connected=A(!1);connectionFailed=A(!1);stopFollowing=()=>{};nav=hv(`nav`);main=hv(`main`);injector=E(Ss);navObserver;navFade=A({start:!1,end:!1});constructor(){wd(()=>{let e=this.nav()?.nativeElement;e&&typeof ResizeObserver<`u`&&(this.navObserver=new ResizeObserver(()=>this.measureNav()),this.navObserver.observe(e))}),jv(()=>{this.tab(),this.tabs(),ev(()=>{this.revealActiveTab(),this.measureNav()})})}measureNav(){let e=this.nav()?.nativeElement;if(!e)return;let t=e.scrollWidth-e.clientWidth,n=e.scrollLeft>1,r=t>1&&e.scrollLeftn?e.scrollLeft=Math.max(0,n):e.scrollLeftthis.showView(e)));try{window.parent!==window&&Rz(window.parent.document)}catch{}let e=new URLSearchParams(location.hash.replace(/^#/,``)).get(`tab`);e&&this.tabs().some(t=>t.id===e)&&this.tab.set(e);let t=EB();aT(t?{baseURL:t}:{}).then(e=>{this.rpc.set(e),this.connected.set(!0),e.scope(`ng-devtools`).rpc.call(`analog-project`).then(e=>{let t=!!e?.analog;this.analog.set(t),this.analogKnown.set(!0),!t&&this.tab()===`analog`&&!this.view()&&this.tab.set(`dashboard`)},()=>{this.analogKnown.set(!0),this.tab()===`analog`&&!this.view()&&this.tab.set(`dashboard`)}),e.events.on(`connection:status`,e=>{this.connected.set(e===`connected`)})},()=>{this.connectionFailed.set(!0),this.analogKnown.set(!0)})}ngOnDestroy(){this.stopFollowing(),this.navObserver?.disconnect()}showView(e){if(e===this.view())return;this.view.set(e);let t=new URL(location.href);t.searchParams.set(`view`,e),t.hash=``,history.replaceState(history.state,``,t)}formFocus=A(null);componentFocus=nv({source:this.tab,computation:()=>null});showForm(e){this.formFocus.set({id:e}),this.switchTab(`forms`)}inspectFromPanel({source:e,origin:t,data:n}){if(e!==window.parent||t!==location.origin)return;let r=n;r?.type===`ng-devtools:inspect-component`&&typeof r.id==`string`&&this.tab()===`components`&&this.config().inspectors.components&&this.componentFocus.set({id:r.id})}switchTab(e){let t=yB[e];if(this.view()===`angular`&&t){this.activateDock(t,e);return}this.setTab(e),history.replaceState(history.state,``,`#tab=${e}`)}setTab(e){this.keepFocus(),this.tab.set(e)}keepFocus(){let e=document.activeElement,t=this.main()?.nativeElement;(!e||e===document.body||t?.contains(e))&&wd(()=>{let e=document.activeElement;e&&e!==document.body||(this.nav()?.nativeElement.querySelector(`button.active`)??this.main()?.nativeElement)?.focus()},{injector:this.injector})}async activateDock(e,t){if(await Uz(e))return;if(window.parent===window){this.keepFocus(),this.showView(e);return}let n=this.rpc();if(!n?.call){this.setTab(t);return}try{await n.call(`hub:docks:activate`,{dockId:`ng-devtools:${e}`}),this.keepFocus(),this.showView(e)}catch{this.setTab(t)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=Oh({type:e,selectors:[[`app-root`]],viewQuery:function(e,t){e&1&&Ng(t.nav,Wz,5)(t.main,Gz,5),e&2&&Pg(2)},hostVars:2,hostBindings:function(e,t){e&1&&G(`message`,function(e){return t.inspectFromPanel(e)},yu),e&2&&n_(`--%NS%accent`,t.viewAccent())},decls:24,vars:17,consts:[[`nav`,``],[`main`,``],[1,`brand`],[1,`mark`],[`width`,`22`,`height`,`22`,`viewBox`,`0 0 256 256`,`aria-hidden`,`true`],[`width`,`24`,`height`,`17`,`viewBox`,`0 0 256 182`,`aria-hidden`,`true`],[`width`,`22`,`height`,`22`,`viewBox`,`0 0 24 24`,`fill`,`currentColor`,`aria-hidden`,`true`],[`width`,`20`,`height`,`22`,`viewBox`,`0 0 223 236`,`aria-hidden`,`true`],[`width`,`20`,`height`,`22`,`viewBox`,`0 0 223 236`,`fill`,`currentColor`,`aria-hidden`,`true`],[1,`title`],[`aria-label`,`Inspectors`,3,`scroll`],[`role`,`status`,1,`status`],[`aria-hidden`,`true`,1,`dot`],[`tabindex`,`-1`],[`role`,`alert`,1,`connection-error`],[3,`info`],[1,`turned-off`],[`fill`,`#3c5afd`,`d`,`M237.248 18.752q18.061 18.06 18.748 45.247V192c-.457 18.12-6.707 33.207-18.748 45.247c-12.04 12.04-27.127 18.291-45.251 18.752H63.999q-27.187-.69-45.247-18.752C6.712 225.208.46 210.121 0 192.001V64q.69-27.187 18.752-45.247Q36.812.692 63.999 0h127.998c18.124.46 33.211 6.711 45.251 18.752m-17.655 103q-6.033-6.003-6.28-15.066V64q-.192-9.063-6.221-15.091c-4.02-4.023-9.054-6.093-15.095-6.22h-21.312v106.626L85.315 42.687H63.999c-6.042.128-11.072 2.198-15.091 6.221c-4.023 4.02-6.093 9.05-6.22 15.09v42.688q-.249 9.063-6.281 15.066q-6.03 5.996-15.091 6.246q9.062.255 15.09 6.25c4.024 4.002 6.115 9.024 6.281 15.066V192c.128 6.037 2.198 11.072 6.221 15.091q6.03 6.03 15.09 6.22h21.317V106.687l85.37 106.627h21.312c6.041-.128 11.076-2.202 15.095-6.221s6.093-9.054 6.22-15.09v-42.688q.249-9.063 6.281-15.066q6.03-5.995 15.091-6.25q-9.062-.25-15.09-6.246`],[`fill`,`#53b9ff`,`d`,`M39.863 54.115L.311 93.716l60.995 61.179L0 216.385l39.428 39.619l61.43-61.507l61.097 61.068l39.552-39.602z`],[`fill`,`#119eff`,`d`,`m140.517 154.896l-39.658 39.601l61.097 61.069l39.552-39.602z`],[`fill-opacity`,`.2`,`d`,`m140.517 154.896l-39.658 39.601l15.267 15.182z`],[`fill`,`#53b9ff`,`d`,`M194.57 100.985L256 39.478L216.431 0l-61.412 61.384L93.917.311L54.365 39.913L216.01 201.761l39.552-39.602z`],[`fill`,`#119eff`,`d`,`m115.36 100.987l39.659-39.602L93.917.313L54.365 39.914z`],[`fill-opacity`,`.2`,`d`,`m115.359 100.985l39.659-39.601l-15.271-15.186z`],[`fill`,`#c30f2e`,`d`,`M152.228.001L48.455 181.046H256L152.228 0z`],[`fill`,`#dd0330`,`d`,`M88.314 26.967L0 181.52h176.628L88.315 26.967z`],[`fill`,`#fff`,`d`,`M18.167 135.294h220.236v-2.419H18.167z`],[`fill`,`#fff`,`d`,`M204.38 170.667c-.861 0-1.67-.358-2.348-1.034c-4.045-4.063-4.221-20.586-4.026-45.33c.11-13.521.257-32.043-1.9-33.504c-2.104.873-2.315 16.172-2.451 26.301c-.162 11.785-.327 23.98-2.242 30.189c-.57 1.84-1.306 3.525-2.786 3.39c-2.086-.185-2.76-3.48-4.317-16.478c-.647-5.4-1.317-10.98-2.101-13.14a11 11 0 0 0-.269-.66c-.835 1.889-1.8 7.079-2.47 10.682c-.927 4.976-1.803 9.676-2.9 11.726c-.847 1.575-2.19 3.63-4.067 3.231c-2.558-.537-3.323-5.693-3.552-8.719c0-25.455-3.33-28.417-3.997-28.753l-.107.081l-.162-.036c-2.377 1.038-2.506 9.294-2.627 17.276c-.096 5.856-.198 12.492-1.053 18.701c-1.108 8.05-2.448 9.603-4.115 9.507c-3.838-.262-3.95-13.482-3.95-14.987c0-.472.012-1.028.027-1.642c.074-3.076.205-8.8-1.687-10.604c-.25-.239-.603-.515-.879-.437c-1.347.339-2.745 4.714-3.209 6.153c-.147.457-.265.833-.364 1.09c-.078.214-.177.515-.294.88c-1.02 3.095-2.18 6.183-4.16 6.944c-.732.284-1.498.222-2.216-.183c-.953-.541-1.73-1.646-2.455-3.482c-.397-1.016-.735-2.046-1.082-3.081c-.419-1.263-.85-2.569-1.384-3.808c-.419-.965-1.464-1.4-2.796-1.164c-2.768.494-3.232 3.29-3.622 7.5c-.07.733-.137 1.452-.228 2.128c-.011.198-.501 6.38-.814 8.344c-.865 5.39-2.002 7.512-3.89 7.358c-4.66-.398-6.798-20.836-6.684-29.47c.088-6.592-1.104-9-1.818-9.382c-.074-.034-.189-.096-.46.095c-.843.571-1.594 2.348-1.363 4.215c2.566 20.32.674 43.592-3.96 48.833c-1.46 1.649-3.448 1.627-4.832.236c-4.049-4.064-4.218-20.586-4.026-45.33c.11-13.521.254-32.043-1.9-33.504c-2.105.873-2.311 16.172-2.45 26.301c-.163 11.785-.329 23.98-2.246 30.189c-.57 1.84-1.307 3.525-2.782 3.39c-2.091-.186-2.761-3.48-4.321-16.478c-.649-5.4-1.319-10.98-2.101-13.14c-.1-.273-.189-.49-.27-.66c-.832 1.889-1.796 7.079-2.466 10.682c-.927 4.976-1.803 9.676-2.904 11.726c-.846 1.575-2.19 3.63-4.063 3.231c-2.558-.537-3.324-5.693-3.552-8.719c-.003-25.455-3.33-28.417-3.997-28.753l-.106.081l-.166-.036c-2.374 1.038-2.503 9.293-2.629 17.276c-.091 5.856-.194 12.492-1.048 18.701c-1.107 8.05-2.437 9.618-4.111 9.507c-3.846-.262-3.958-13.482-3.958-14.987c0-.472.016-1.028.03-1.642c.074-3.076.207-8.8-1.685-10.604c-.25-.239-.603-.515-.88-.438c-1.347.34-2.75 4.715-3.206 6.155a47 47 0 0 1-.364 1.09q-.16.432-.298.875c-1.02 3.096-2.18 6.187-4.155 6.95c-.736.282-1.506.22-2.22-.185c-.953-.541-1.734-1.646-2.454-3.482c-.398-1.016-.74-2.046-1.083-3.081c-.42-1.263-.854-2.569-1.387-3.808c-.416-.965-1.465-1.4-2.797-1.164c-3.188.567-3.943 4.52-4.55 9.238l-.106.839l-2.411-.32l.114-.824c.527-4.137 1.328-10.39 6.53-11.31c2.446-.435 4.585.581 5.446 2.583c.578 1.34 1.031 2.695 1.466 4.008c.324.99.654 1.98 1.037 2.959c.674 1.708 1.197 2.15 1.392 2.257c1.218-.38 2.462-4.167 2.873-5.414c.13-.402.24-.732.328-.968c.085-.233.195-.571.328-.98c1.097-3.43 2.474-7.144 4.918-7.762c.747-.191 1.903-.166 3.157 1.035c2.665 2.544 2.525 8.48 2.433 12.41c-.014.59-.028 1.126-.028 1.583c0 6.272.93 10.655 1.64 12.16c.367-.77.998-2.63 1.598-7.007c.831-6.066.938-12.624 1.027-18.41c.161-10.24.275-17.663 3.982-19.408c.552-.339 1.469-.522 2.436-.033c3.586 1.803 5.326 11.885 5.326 30.817c.225 2.926 1.013 6.006 1.66 6.448c.004-.066.53-.39 1.394-2.01c.925-1.718 1.845-6.665 2.655-11.026c1.792-9.614 2.606-12.989 4.726-13.166c1.615-.158 2.362 1.896 2.676 2.76c.883 2.422 1.537 7.888 2.23 13.678c.54 4.49 1.31 10.902 2.094 13.497c.084-.228.18-.5.283-.836c1.815-5.878 1.98-17.887 2.14-29.507c.22-16.14.503-26.139 3.448-28.226a2.44 2.44 0 0 1 2.233-.316c3.448 1.144 3.714 11.254 3.519 35.8c-.14 17.799-.313 39.952 3.323 43.603c.317.32.542.32.622.32c.17 0 .413-.161.67-.452c3.681-4.162 6.01-26.022 3.372-46.927c-.328-2.602.677-5.337 2.392-6.514c.946-.652 2.036-.736 2.978-.232c2.145 1.14 3.187 5.024 3.102 11.546c-.15 11.387 2.584 24.714 4.37 26.842c.282-.471.842-1.763 1.379-5.145c.301-1.87.799-8.153.806-8.216c.09-.71.155-1.398.217-2.097c.369-3.924.82-8.804 5.613-9.654c2.444-.435 4.583.577 5.448 2.583c.577 1.34 1.027 2.695 1.46 4.008c.332.99.664 1.98 1.046 2.959c.67 1.708 1.197 2.15 1.387 2.257c1.218-.38 2.467-4.167 2.875-5.41c.132-.402.243-.737.328-.973c.088-.228.195-.57.324-.979c1.1-3.43 2.477-7.144 4.924-7.762c.74-.191 1.9-.166 3.154 1.035c2.665 2.543 2.526 8.48 2.437 12.41q-.029.792-.033 1.583c0 6.272.931 10.655 1.641 12.16c.365-.77.994-2.63 1.601-7.007c.832-6.066.931-12.624 1.027-18.41c.159-10.24.273-17.663 3.98-19.408c.55-.339 1.467-.522 2.44-.033c3.58 1.803 5.325 11.884 5.325 30.817c.224 2.926 1.012 6.006 1.656 6.448c.008-.066.526-.39 1.399-2.01c.923-1.718 1.84-6.665 2.653-11.026c1.786-9.614 2.602-12.989 4.722-13.166c1.62-.158 2.367 1.896 2.68 2.76c.88 2.422 1.535 7.888 2.233 13.678c.534 4.49 1.304 10.902 2.092 13.497c.08-.228.176-.5.28-.836c1.813-5.878 1.976-17.887 2.138-29.507c.216-16.14.504-26.139 3.448-28.226a2.45 2.45 0 0 1 2.234-.316c3.452 1.144 3.718 11.254 3.52 35.8c-.141 17.799-.314 39.952 3.319 43.603c.324.32.544.32.63.32c.165 0 .408-.161.662-.452c3.687-4.162 6.014-26.022 3.375-46.927c-.342-2.723.43-5.47 1.84-6.526c.71-.537 1.575-.647 2.37-.313c2.054.877 3.445 4.63 4.255 11.484c.339 2.87.641 5.974.931 9.036c.641 6.683 1.509 15.69 2.684 17.67c.36-.46 1.096-1.704 2.19-5.038l2.307.753c-1.696 5.157-3.026 7.1-4.755 6.902c-2.69-.299-3.468-5.734-4.84-20.055c-.29-3.048-.59-6.132-.928-8.989c-1.03-8.74-2.782-9.532-2.801-9.54c-.342.174-1.137 1.992-.842 4.31c2.558 20.32.673 43.597-3.964 48.834c-.747.842-1.587 1.27-2.485 1.27`],[`d`,`M12.024.017V0L12 .008L11.976 0v.017L.812 3.892l1.605 14.875l9.559 5.207V24l.024-.013l.024.013v-.026l9.559-5.207l1.605-14.875zm6.868 14.244q-1.64 3.948-6.031 4.166c-2.829 0-4.661-1.7-4.66-1.7q-1.745-1.359-2.398-3.417c-.695-.76-.702-.841-.774-1.145c-.072-.303.045-.388.249-.685q.204-.298.098-.85q-.26-.36-.3-1.128q0-.37.496-.783q.495-.413.607-.632q.083-.119.065-1.031q-.006-.897.995-.975c1-.08 1.565-.832 1.879-1.174c.21-.228.52-.339.91-.341c.551-.026 1.052.185 1.484.62c1.075-.055 2.176.235 3.292.863q2.379 1.414 2.596 3.055q-.257 2.158-5.788-.113q-2.895.819-2.846 3.552q0 2.508 2.422 3.643c-.787-.772-1.122-1.422-1.01-1.959q2.456 2.906 5.588 2.173c-.92.032-1.65-.264-2.198-.893q2.116-.05 3.998-1.972c-.724.576-1.482.794-2.284.657q3.26-2.563 2.307-5.98l-.002-.006a3.02 3.02 0 0 1 .788 2.03q.023 1.175-.795 2.477q.613-.478 1.413-2.047c.23 2.117-.625 3.724-2.574 4.825q.934-.085 2.473-1.23m-5.567-6.63a.319.319 0 1 1 .638 0a.319.319 0 0 1-.638 0`],[`id`,`ng-grad`,`x1`,`49`,`x2`,`226`,`y1`,`214`,`y2`,`130`,`gradientUnits`,`userSpaceOnUse`],[`stop-color`,`#E40035`],[`offset`,`.24`,`stop-color`,`#F60A48`],[`offset`,`.352`,`stop-color`,`#F20755`],[`offset`,`.494`,`stop-color`,`#DC087D`],[`offset`,`.745`,`stop-color`,`#9717E7`],[`offset`,`1`,`stop-color`,`#6C00F5`],[`fill`,`url(#ng-grad)`,`d`,`m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z`],[`d`,`m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z`],[`type`,`button`,3,`active`],[`type`,`button`,3,`click`],[3,`name`],[3,`rpc`],[3,`rpc`,`focus`],[3,`navigate`,`rpc`],[3,`focusHandled`,`showForm`,`rpc`,`focus`],[3,`focusHandled`,`rpc`,`focus`]],template:function(e,t){if(e&1&&(R(0,`header`)(1,`h1`,2)(2,`span`,3),N(3,qz,2,0,`:svg:svg`,4)(4,Jz,7,0,`:svg:svg`,4)(5,Yz,5,0,`:svg:svg`,5)(6,Xz,2,0,`:svg:svg`,6)(7,Zz,10,0,`:svg:svg`,7)(8,Qz,2,0,`:svg:svg`,8),z(),R(9,`span`,9),Y(10),z()(),R(11,`nav`,10,0),G(`scroll`,function(){return t.measureNav()}),N(13,eB,2,0),z(),R(14,`span`,11)(15,`span`,12),B(16,`span`),z(),Y(17),z()(),R(18,`main`,13,1),N(20,tB,2,0,`p`,14)(21,nB,1,1,`app-coming-soon`,15)(22,rB,5,0,`p`,16)(23,mB,10,1),z()),e&2){let e;j(2),J(`ng-mark`,t.view()===`angular`),j(),P(t.view()===`nativescript`?3:t.view()===`capacitor`?4:t.view()===`analog`?5:t.view()===`ngrx`?6:t.view()===`angular`?7:8),j(6),J(`ng-text`,t.view()===`angular`),j(),X(t.title()),j(),J(`fade-start`,t.navFade().start)(`fade-end`,t.navFade().end),j(2),P(t.tabs().length>1?13:-1),j(),J(`connected`,t.connected())(`failed`,t.connectionFailed()),j(3),Z(` `,t.connected()?`Live`:t.connectionFailed()?`Disconnected`:`Connecting…`,` `),j(3),P(t.connectionFailed()?20:(e=t.comingSoon())?21:t.tabEnabled(t.tab(),t.config())?23:22,e)}},dependencies:[mE,TD,$A,zj,GM,uP,nI,QI,zR,kz,Iz,UT],styles:[`[_nghost-%COMP%] { - --%NS%accent-soft: color-mix(in srgb, var(--%NS%accent) 12%, transparent); - --%NS%accent-line: color-mix(in srgb, var(--%NS%accent) 45%, transparent); - display: flex; - flex-direction: column; - height: 100vh; - height: 100dvh; - min-width: 0; - background: radial-gradient(900px 300px at 10% -10%, color-mix(in srgb, var(--%NS%accent) 7%, transparent), transparent 70%), var(--%NS%bg); -} - -header[_ngcontent-%COMP%] { - position: sticky; - top: 0; - z-index: 10; - display: flex; - flex-wrap: nowrap; - flex-shrink: 0; - align-items: center; - gap: 8px 16px; - height: 45px; - padding: 0 16px; - background: color-mix(in srgb, var(--%NS%surface) 82%, transparent); - backdrop-filter: blur(12px) saturate(1.3); - border-bottom: 1px solid var(--%NS%border); -} - -.brand[_ngcontent-%COMP%] { - display: flex; - flex-shrink: 0; - align-items: center; - gap: 10px; - min-width: 0; - margin: 0; - color: var(--%NS%accent); - font-size: 15px; - font-weight: 650; - line-height: 1.2; - letter-spacing: -0.01em; - white-space: nowrap; -} - -.title[_ngcontent-%COMP%] { - overflow: hidden; - text-overflow: ellipsis; -} - -.mark[_ngcontent-%COMP%] { - display: grid; - flex-shrink: 0; - place-items: center; - width: 30px; - height: 30px; - border-radius: 8px; - background: color-mix(in srgb, var(--%NS%accent) 8%, transparent); - box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--%NS%accent) 28%, transparent); -} - -.mark.ng-mark[_ngcontent-%COMP%] { - background: linear-gradient(135deg, color-mix(in srgb, #f60a48 12%, transparent), color-mix(in srgb, #9717e7 12%, transparent)); - box-shadow: inset 0 0 0 1px color-mix(in srgb, #dc087d 34%, transparent); -} - -.ng-text[_ngcontent-%COMP%] { - background: linear-gradient(90deg, #ff4d75 0%, #f23d9a 45%, #c06bf5 80%, #a98bff 100%); - -webkit-background-clip: text; - background-clip: text; - color: transparent; -} - -nav[_ngcontent-%COMP%] { - position: relative; - display: flex; - flex: 0 1 auto; - flex-wrap: nowrap; - gap: 2px; - min-width: 0; - height: 34px; - padding: 2px; - overflow-x: auto; - overflow-y: hidden; - overscroll-behavior-x: contain; - scroll-padding-inline: 24px; - scrollbar-width: none; - border: 1px solid var(--%NS%border); - border-radius: 10px; - background: var(--%NS%bg); -} - -nav[_ngcontent-%COMP%]::-webkit-scrollbar { - display: none; -} - -nav.fade-start[_ngcontent-%COMP%] { - mask-image: linear-gradient(90deg, transparent, #000 28px); -} - -nav.fade-end[_ngcontent-%COMP%] { - mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); -} - -nav.fade-start.fade-end[_ngcontent-%COMP%] { - mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); -} - -nav[_ngcontent-%COMP%]:empty { - display: none; -} - -nav[_ngcontent-%COMP%] button[_ngcontent-%COMP%] { - position: relative; - display: inline-flex; - flex-shrink: 0; - align-items: center; - gap: 6px; - height: 28px; - padding: 0 10px; - border: none; - border-radius: 8px; - background: transparent; - color: var(--%NS%text-2); - font: inherit; - font-size: 13px; - font-weight: 500; - line-height: 1; - white-space: nowrap; - cursor: pointer; - -webkit-tap-highlight-color: transparent; - transition: background-color 0.16s var(--%NS%ease), color 0.16s var(--%NS%ease), box-shadow 0.16s var(--%NS%ease), transform 0.12s var(--%NS%ease); -} - -nav[_ngcontent-%COMP%] button[_ngcontent-%COMP%] app-tab-icon[_ngcontent-%COMP%] { - color: var(--%NS%text-3); - transition: color 0.16s var(--%NS%ease); -} - -nav[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:hover { - background: var(--%NS%surface-2); - color: var(--%NS%text); -} - -nav[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:hover app-tab-icon[_ngcontent-%COMP%] { - color: var(--%NS%text-2); -} - -nav[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:active { - transform: scale(0.97); -} - -nav[_ngcontent-%COMP%] button.active[_ngcontent-%COMP%] { - background: var(--%NS%surface-3); - color: var(--%NS%text-strong); - box-shadow: inset 0 0 0 1px var(--%NS%border-strong), 0 4px 14px -8px rgba(0, 0, 0, 0.9); -} - -nav[_ngcontent-%COMP%] button.active[_ngcontent-%COMP%] app-tab-icon[_ngcontent-%COMP%] { - color: var(--%NS%accent); -} - -nav[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:focus-visible { - outline: 2px solid var(--%NS%accent); - outline-offset: -2px; -} - -.status[_ngcontent-%COMP%] { - display: inline-flex; - flex-shrink: 0; - align-items: center; - gap: 6px; - height: 24px; - margin-left: auto; - padding: 0 10px 0 6px; - border: 1px solid var(--%NS%border); - border-radius: 999px; - background: var(--%NS%surface); - color: var(--%NS%text-2); - font-size: 11px; - font-weight: 600; - line-height: 1; - letter-spacing: 0.06em; - text-transform: uppercase; - white-space: nowrap; - transition: color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease), background-color 0.2s var(--%NS%ease); -} - -.dot[_ngcontent-%COMP%] { - position: relative; - display: grid; - place-items: center; - width: 12px; - height: 12px; -} - -.dot[_ngcontent-%COMP%] span[_ngcontent-%COMP%] { - width: 6px; - height: 6px; - border-radius: 50%; - background: var(--%NS%warn); - animation: _ngcontent-%COMP%_blink 1.2s ease-in-out infinite; -} - -.dot[_ngcontent-%COMP%]::before { - content: ""; - position: absolute; - inset: 0; - border-radius: 50%; - background: var(--%NS%warn); - opacity: 0; -} - -.status.connected[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%ok) 28%, transparent); - background: color-mix(in srgb, var(--%NS%ok) 8%, transparent); - color: var(--%NS%text); -} - -.status.connected[_ngcontent-%COMP%] .dot[_ngcontent-%COMP%] span[_ngcontent-%COMP%] { - background: var(--%NS%ok); - box-shadow: 0 0 6px var(--%NS%ok); - animation: none; -} - -.status.failed[_ngcontent-%COMP%] { - border-color: color-mix(in srgb, var(--%NS%danger) 36%, transparent); - color: var(--%NS%text); -} - -.status.failed[_ngcontent-%COMP%] .dot[_ngcontent-%COMP%] span[_ngcontent-%COMP%] { - background: var(--%NS%danger); - animation: none; -} - -.status.connected[_ngcontent-%COMP%] .dot[_ngcontent-%COMP%]::before { - background: var(--%NS%ok); - animation: _ngcontent-%COMP%_ping 2s var(--%NS%ease) infinite; -} - -@keyframes _ngcontent-%COMP%_blink { - 50% { - opacity: 0.3; - } -} -@keyframes _ngcontent-%COMP%_ping { - 0% { - transform: scale(0.5); - opacity: 0.55; - } - 80%, 100% { - transform: scale(1.6); - opacity: 0; - } -} -main[_ngcontent-%COMP%] { - flex: 1; - min-height: 0; - overflow: auto; - overscroll-behavior: contain; - scrollbar-gutter: stable; - padding: 20px; -} - -main[_ngcontent-%COMP%]:focus { - outline: none; -} - -main[_ngcontent-%COMP%] > *[_ngcontent-%COMP%] { - animation: enter 0.28s var(--%NS%ease) both; -} - -.turned-off[_ngcontent-%COMP%] { - max-width: 60ch; - margin: 0; - padding: 12px 14px; - border: 1px solid var(--%NS%border); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - color: var(--%NS%text); -} - -.connection-error[_ngcontent-%COMP%] { - max-width: 60ch; - margin: 0; - padding: 12px 14px; - border: 1px solid color-mix(in srgb, var(--%NS%danger) 36%, transparent); - border-radius: var(--%NS%radius); - background: var(--%NS%surface); - color: var(--%NS%text); -} - -@media (max-width: 720px) { - header[_ngcontent-%COMP%] { - flex-wrap: wrap; - height: auto; - padding: 8px 16px; - } - nav[_ngcontent-%COMP%] { - order: 3; - flex: 1 1 100%; - } -} -@media (max-width: 560px) { - header[_ngcontent-%COMP%] { - padding-inline: 12px; - } - main[_ngcontent-%COMP%] { - padding: 16px 12px; - } -} -@media (max-width: 400px) { - .brand[_ngcontent-%COMP%] { - flex-shrink: 1; - gap: 8px; - } -}`]})};function wB(e){try{return new URL(e,location.href).origin===location.origin}catch{return!1}}function TB(e){if(location.protocol!==`chrome-extension:`)return!1;try{let{protocol:t}=new URL(e);return t===`http:`||t===`https:`}catch{return!1}}function EB(){let e=new URLSearchParams(location.search).get(`baseURL`);if(e&&(wB(e)||TB(e)))return e;if(!(location.pathname.includes(`__ng-devtools`)||location.pathname.includes(`__devframes/`)))return`/__ng-devtools/`}yb(CB).catch(console.error);export{Sx as t}; \ No newline at end of file diff --git a/extension/ui/index.html b/extension/ui/index.html index 9beb653..4bfdce2 100644 --- a/extension/ui/index.html +++ b/extension/ui/index.html @@ -7,7 +7,7 @@ Angular DevTools - + diff --git a/package.json b/package.json index 659a397..77f1e06 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,9 @@ "watch": "nx build --watch --configuration development", "test": "nx test", "test:devtools": "vitest run --root packages/ng-devtools", - "typecheck": "tsc -p tsconfig.app.json --noEmit && tsc -p tsconfig.spec.json --noEmit && tsc -p app/tsconfig.json --noEmit && tsc -p packages/ng-devtools", + "test:panel": "vitest run --config app/vitest.config.ts", + "test:axe": "pnpm devtools:build-pkg && node bin.mjs build --outDir dist/panel-axe && node scripts/panel-axe.mjs dist/panel-axe", + "typecheck": "tsc -p tsconfig.app.json --noEmit && tsc -p tsconfig.spec.json --noEmit && ngc -p app/tsconfig.json --noEmit && ngc -p examples/analog/tsconfig.app.json --noEmit && tsc -p packages/ng-devtools", "format": "prettier --write .", "format:check": "prettier --check .", "serve:ssr:angular-devtools": "node dist/angular-devtools/server/server.mjs", @@ -61,8 +63,11 @@ "@angular/build": "^22.1.8", "@angular/cli": "^22.1.8", "@angular/compiler-cli": "^22.1.0", + "@axe-core/playwright": "^4.13.0", "@devframes/agentic": "^1.1.0", "@devframes/vite": "^1.0.0", + "@ngrx/store": "^22.0.1", + "@ngrx/store-devtools": "^22.0.1", "@nx/angular": "23.2.1", "@nx/workspace": "23.2.1", "@schematics/angular": "^22.1.8", @@ -70,6 +75,7 @@ "@types/node": "^24.0.0", "jsdom": "^28.0.0", "nx": "23.2.1", + "playwright": "^1.63.0", "prettier": "^3.8.1", "sass": "^1.105.0", "typescript": "~6.0.2", diff --git a/packages/ng-devtools/bin.mjs b/packages/ng-devtools/bin.mjs index b560c90..834004c 100755 --- a/packages/ng-devtools/bin.mjs +++ b/packages/ng-devtools/bin.mjs @@ -1,6 +1,4 @@ #!/usr/bin/env node -import { createCac } from 'devframe/adapters/cac'; -import ngDevtools from '@santoshyadavdev/ng-devtools/devframe'; -import { guardReportOutDir } from '@santoshyadavdev/ng-devtools/cli'; +import { createNgDevtoolsCli } from '@santoshyadavdev/ng-devtools/cli'; -createCac(ngDevtools, { mcp: true, configureCli: guardReportOutDir }).parse(); +await createNgDevtoolsCli().parse(); diff --git a/packages/ng-devtools/src/__tests__/agent-tools.test.ts b/packages/ng-devtools/src/__tests__/agent-tools.test.ts index e8e4340..4b083e1 100644 --- a/packages/ng-devtools/src/__tests__/agent-tools.test.ts +++ b/packages/ng-devtools/src/__tests__/agent-tools.test.ts @@ -28,7 +28,7 @@ async function boot() { } ).sharedState.get('ng-devtools:injector-tree') ).value(); - return { push, call, injectorState }; + return { ctx, push, call, injectorState }; } const injectorRoot = (name: string) => ({ @@ -43,13 +43,33 @@ const elementInjectors = (markdown: string) => describe('agent tools', () => { afterEach(() => vi.useRealTimers()); + it('record change detection through the page and report what it pushed', async () => { + const { push, call } = await boot(); + expect(await call('change-detection', '')).toMatch(/No change detection recording yet/); + expect(await call('change-detection', '', { record: 'start' })).toMatch(/Recording started/); + await push('push-change-detection', { + pageId: 'p1', + supported: true, + recording: true, + startedAt: 1, + dropped: 0, + cycles: [{ id: 1, at: 1, ms: 2, passes: 1, checks: 1, components: [] }], + components: [{ name: 'Cart', checks: 1, ms: 2, maxMs: 2, cycles: 1 }], + hosts: {}, + }); + expect(await call('change-detection', '')).toContain('`Cart`: 1 check(s)'); + expect(await push('ping-change-detection', 'p1')).toEqual({ known: true }); + await push('forget-change-detection-page', 'p1'); + expect(await push('ping-change-detection', 'p1')).toEqual({ known: false }); + }); + it('say so when nothing has been reported', async () => { const { call } = await boot(); // Worded after the data, not the connection: an empty tree is what both a // page that never connected and a page with no readable components send. expect(await call('highlight', 'app-root')).toMatch(/no component tree has been reported/i); expect(await call('inspect-signals', 'app-root')).toMatch(/no signal graph/i); - expect(await call('inspect-providers', 'app-root')).toMatch(/no injector data/i); + expect(await call('inspect-providers', '')).toMatch(/no injector data/i); }); it('answer from the data the page pushed', async () => { @@ -88,7 +108,7 @@ describe('agent tools', () => { expect(other).toMatch(/app-root/); // The answer carries the whole injector tree, whatever it is worded like. - const providers = await call('inspect-providers', 'app-root'); + const providers = await call('inspect-providers', ''); const [elements, environment] = providers .split(/Element injectors:|Environment injectors:/) .slice(1) @@ -154,6 +174,84 @@ describe('agent tools', () => { expect(missing).toMatch(/app-x/); }); + it('switches inspect-signals to the root injector and waits for its graph', async () => { + const { push, call } = await boot(); + const card = { + pageId: 'p1', + nodes: [{ id: 'a', kind: 'signal', label: 'open', epoch: 0 }], + edges: [], + componentSelector: 'app-card', + component: { id: 'c2', name: 'Card', tag: 'app-card', path: 'app-root > app-card' }, + environments: [ + { id: 'inj-1', name: 'Root' }, + { id: 'inj-4', name: 'Route: admin' }, + ], + }; + await push('push-signal-graph', card); + const answer = call('inspect-signals', 'root'); + await new Promise((resolve) => setTimeout(resolve, 20)); + await push('push-signal-graph', { + pageId: 'p1', + nodes: [{ id: 'e', kind: 'effect', label: 'persistTrips', epoch: 1 }], + edges: [], + injector: { id: 'inj-1', name: 'Root' }, + environments: card.environments, + source: 'selected', + }); + expect(JSON.parse(await answer)).toMatchObject({ + injector: { name: 'Root' }, + nodes: [{ label: 'persistTrips' }], + }); + expect(JSON.parse(await call('inspect-signals', 'inj-1'))).toMatchObject({ + injector: { id: 'inj-1' }, + }); + }); + + it('names the known injectors when a route path matches none', async () => { + const { push, call } = await boot(); + await push('push-signal-graph', { + pageId: 'p1', + nodes: [], + edges: [], + componentSelector: 'app-card', + environments: [{ id: 'inj-1', name: 'Root' }], + }); + const missing = await call('inspect-signals', '/nope'); + expect(missing).toMatch( + /No environment injector on the page matches it; the page knows `Root`/, + ); + }, 10_000); + + it('says the live graph needs Angular 20.1 when the page cannot report one', async () => { + const { push, call } = await boot(); + await push('push-signal-graph', { pageId: 'p1', nodes: [], edges: [], unsupported: true }); + expect(await call('inspect-signals', 'app-root')).toMatch(/needs Angular 20\.1 or later/); + }); + + it('keeps resource status history across delta pushes', async () => { + const { push, call } = await boot(); + const base = { + pageId: 'p1', + nodes: [{ id: '3', kind: 'computed', label: 'Resource#trips.value', epoch: 1 }], + edges: [], + componentSelector: 'app-root', + resources: [{ id: 'resource:3', name: 'trips', named: true, epoch: 1, nodeIds: ['3'] }], + }; + await push('push-signal-graph', { + ...base, + history: { 'resource:3': [{ epoch: 1, value: 'loading', at: 1, source: 'initial' }] }, + }); + await push('push-signal-graph', { + ...base, + historyDelta: { 'resource:3': [{ epoch: 2, value: 'resolved', at: 2, source: 'sample' }] }, + }); + const graph = JSON.parse(await call('inspect-signals', 'app-root')); + expect(graph.history['resource:3'].map((c: { value: string }) => c.value)).toEqual([ + 'loading', + 'resolved', + ]); + }); + it('keeps injector trees per page, forgets a page on request and ignores reports without a page', async () => { vi.useFakeTimers({ toFake: ['Date'] }); const { push, call, injectorState } = await boot(); @@ -165,29 +263,209 @@ describe('agent tools', () => { expect(Object.keys((await injectorState())['pages'] as object).sort()).toEqual(['p1', 'p2']); expect(await injectorState()).toMatchObject({ roots: [{ injector: { name: 'B' } }] }); - expect(elementInjectors(await call('inspect-providers', 'app-root'))).toMatchObject([ + expect(elementInjectors(await call('inspect-providers', ''))).toMatchObject([ { injector: { name: 'B' } }, ]); - const first = await call('inspect-providers', 'app-root', { pageId: 'p1' }); + const first = await call('inspect-providers', '', { pageId: 'p1' }); expect(first).toMatch(/`p1`/); expect(elementInjectors(first)).toMatchObject([{ injector: { name: 'A' } }]); await push('forget-injector-page', 'p2'); - expect(elementInjectors(await call('inspect-providers', 'app-root'))).toMatchObject([ + expect(elementInjectors(await call('inspect-providers', ''))).toMatchObject([ { injector: { name: 'A' } }, ]); await push('forget-injector-page', 'p1'); - expect(await call('inspect-providers', 'app-root')).toMatch(/no injector data/i); + expect(await call('inspect-providers', '')).toMatch(/no injector data/i); expect(await injectorState()).toMatchObject({ roots: [], environment: [], pages: {} }); }); + it('narrows inspect-providers to a selector or a token and resolves the lookup path', async () => { + const { push, call } = await boot(); + const card = (id: string) => ({ + injector: { + id, + type: 'element', + name: 'app-card', + component: 'Card', + providerCount: 1, + path: [id, 'root-1', 'inj-null'], + }, + providers: [{ token: 'Logger', type: 'class', isViewProvider: false }], + children: [], + dependencies: [ + { from: 'Card', token: 'HttpClient', flags: [], providedBy: 'root-1' }, + { from: 'Card', token: 'Theme', flags: ['optional'], providedBy: null }, + ], + }); + await push('push-injector-tree', { + pageId: 'p1', + roots: [ + { + injector: { id: 'app-1', type: 'element', name: 'app-root', providerCount: 0 }, + providers: [], + children: [card('card-1'), card('card-2')], + }, + ], + environment: [ + { + injector: { id: 'root-1', type: 'environment', name: 'Root', providerCount: 1 }, + providers: [{ token: 'HttpClient', type: 'class', isViewProvider: false }], + children: [], + }, + ], + }); + + const bySelector = await call('inspect-providers', 'Card'); + const matched = JSON.parse(bySelector.slice(bySelector.indexOf('['))); + expect(matched.map((m: { injector: { id: string } }) => m.injector.id)).toEqual([ + 'card-1', + 'card-2', + ]); + expect(matched[0].lookupPath).toEqual([ + { id: 'card-1', name: 'app-card', provides: ['Logger'] }, + { id: 'root-1', name: 'Root', provides: ['HttpClient'] }, + { id: 'inj-null', name: 'Null injector', provides: [] }, + ]); + expect(matched[0].dependencies[0]).toMatchObject({ providedByName: 'Root' }); + expect(bySelector).not.toMatch(/app-root/); + expect(await call('inspect-providers', 'app-none')).toMatch(/No element injector.*app-none/); + + const byToken = await call('inspect-providers', '', { token: 'httpclient' }); + const answer = JSON.parse(byToken.slice(byToken.indexOf('{"'))); + expect(answer.providedBy).toEqual([ + expect.objectContaining({ id: 'root-1', name: 'Root', type: 'environment' }), + ]); + expect(answer.injectedBy.map((hit: { id: string }) => hit.id)).toEqual(['card-1', 'card-2']); + expect(await call('inspect-providers', '', { token: 'Http' })).toMatch( + /Similar tokens: `HttpClient`/, + ); + }); + + it('caps the whole injector tree and says how to narrow it', async () => { + const { push, call } = await boot(); + const roots = Array.from({ length: 400 }, (_, i) => ({ + injector: { id: `inj-${i}`, type: 'element', name: `app-item-${i}`, providerCount: 0 }, + providers: [], + children: [], + })); + await push('push-injector-tree', { pageId: 'p1', roots, environment: [] }); + const answer = await call('inspect-providers', ''); + expect(answer.length).toBeLessThan(20_500); + expect(answer).toMatch(/truncated at 20000 characters; pass `selector` or `token`/); + }); + + it('keeps the truncated flag of a large page and says so', async () => { + const { push, call, injectorState } = await boot(); + await push('push-injector-tree', { + pageId: 'p1', + roots: [injectorRoot('A')], + environment: [], + truncated: true, + }); + const state = await injectorState(); + expect(state).toMatchObject({ truncated: true, pages: { p1: { truncated: true } } }); + expect(await call('inspect-providers', '')).toMatch(/more than 2000 element injectors/); + expect(await call('inspect-providers', 'A')).toMatch(/more than 2000 element injectors/); + await push('push-injector-tree', { pageId: 'p1', roots: [injectorRoot('A')], environment: [] }); + expect(await injectorState()).toMatchObject({ truncated: false }); + expect(await call('inspect-providers', '')).not.toMatch(/more than 2000/); + }); + + it('resolves a class name on the most recent tab and names the other tabs', async () => { + vi.useFakeTimers({ toFake: ['Date'] }); + const { push, call } = await boot(); + const tree = (pageId: string, id: string) => ({ + pageId, + roots: [{ id, name: 'Card', tag: 'app-card', children: [] }], + count: 1, + detail: null, + }); + vi.setSystemTime(1000); + await push('push-component-tree', tree('old', 'c1')); + vi.setSystemTime(2000); + await push('push-component-tree', tree('new', 'c7')); + + const latest = await call('highlight', 'Card'); + expect(latest).toMatch(/instance `c7` on page `new`/); + expect(latest).toMatch(/also matches on `old`/); + expect(await call('highlight', 'Card', { page: 'old' })).toMatch(/instance `c1` on page `old`/); + expect(await call('highlight', '.promo', { page: 'old' })).toMatch(/to page `old`/); + + const unknown = await call('highlight', 'Card', { page: 'gone' }); + expect(unknown).toMatch(/^No page `gone` is reporting a component tree\./); + expect(unknown.indexOf('`new`')).toBeLessThan(unknown.indexOf('`old`')); + }); + + it('sends a page-scoped CSS selector only to the named page', async () => { + const { ctx, push, call } = await boot(); + await push('push-component-tree', { + pageId: 'p1', + roots: [{ id: 'c1', name: 'App', tag: 'app-root', children: [] }], + count: 1, + detail: null, + }); + const broadcast = vi.spyOn(ctx.rpc, 'broadcast'); + await call('highlight', '.promo', { page: 'p1' }); + expect(broadcast).toHaveBeenCalledWith( + expect.objectContaining({ + method: 'ng-devtools:highlight-in-page', + args: [{ pageId: 'p1', selector: '.promo', reveal: true }], + }), + ); + }); + + it('picks a page for inspect-signals and inspect-providers and refuses an unknown one', async () => { + const { push, call } = await boot(); + const graph = (pageId: string, name: string) => ({ + pageId, + nodes: [{ id: 'a', kind: 'signal', label: name, epoch: 0 }], + edges: [], + componentSelector: 'app-card', + component: { id: 'c2', name: 'Card', tag: 'app-card', path: 'app-card' }, + }); + await push('push-signal-graph', graph('p1', 'first')); + await push('push-signal-graph', graph('p2', 'second')); + expect(JSON.parse(await call('inspect-signals', 'Card', { page: 'p1' }))).toMatchObject({ + pageId: 'p1', + nodes: [{ label: 'first' }], + }); + expect(await call('inspect-signals', 'Card', { page: 'gone' })).toMatch( + /^No page `gone` is reporting a signal graph\. Pages that report a signal graph: `p\d`/, + ); + + await push('push-injector-tree', { pageId: 'p1', roots: [injectorRoot('A')], environment: [] }); + expect(await call('inspect-providers', 'app-root', { page: 'p1' })).toMatch(/`p1`/); + expect(await call('inspect-providers', 'app-root', { pageId: 'p1' })).toMatch(/`p1`/); + for (const args of [{ page: 'gone' }, { pageId: 'gone' }]) { + const text = await call('inspect-providers', 'app-root', args); + expect(text).toMatch(/^No page `gone` is reporting an injector tree\./); + expect(text).toContain('`p1`'); + expect(text).not.toContain('Element injectors'); + } + }); + + it('lists the reporting pages with their URL and inspectors', async () => { + const { push, call } = await boot(); + expect(await call('list-pages', '')).toMatch(/No page is reporting/); + await push('push-component-tree', { + pageId: 'p1', + roots: [{ id: 'c1', name: 'App', tag: 'app-root', children: [] }], + count: 1, + detail: null, + }); + await push('push-injector-tree', { pageId: 'p1', roots: [injectorRoot('A')], environment: [] }); + const text = await call('list-pages', ''); + expect(text).toMatch(/1 page\(s\) report/); + expect(text).toMatch(/\| `p1` \| unknown \| \d+s ago \| components, injectors \|/); + }); + it('expires injector trees a page stopped reporting', async () => { vi.useFakeTimers({ toFake: ['Date', 'setInterval', 'clearInterval'] }); const { push, call } = await boot(); await push('push-injector-tree', { pageId: 'p1', roots: [injectorRoot('A')], environment: [] }); vi.advanceTimersByTime(10_000); - expect(await call('inspect-providers', 'app-root')).toMatch(/`p1`/); + expect(await call('inspect-providers', '')).toMatch(/`p1`/); vi.advanceTimersByTime(10_000); - expect(await call('inspect-providers', 'app-root')).toMatch(/no injector data/i); + expect(await call('inspect-providers', '')).toMatch(/no injector data/i); }); }); diff --git a/packages/ng-devtools/src/__tests__/analog-inspector.test.ts b/packages/ng-devtools/src/__tests__/analog-inspector.test.ts new file mode 100644 index 0000000..292451b --- /dev/null +++ b/packages/ng-devtools/src/__tests__/analog-inspector.test.ts @@ -0,0 +1,292 @@ +// @vitest-environment jsdom +import { describe, expect, it } from 'vitest'; + +type Handler = (name: string, arg: unknown) => unknown; + +const PROJECT = { + analog: true, + version: '2.7.5', + routes: [], + api: [], + middleware: [], + content: [], + serverFns: [ + { name: 'getUsers', file: '/src/app/users.server.ts', id: 'aaaaaaaaaaaaaaaa', method: 'GET' }, + ], +}; + +let testBedReady = false; + +async function mount(handler: Handler, state: unknown = {}) { + await import('@angular/compiler'); + const { TestBed } = await import('@angular/core/testing'); + const { BrowserTestingModule, platformBrowserTesting } = + await import('@angular/platform-browser/testing'); + const { Input, Output, ViewChild } = await import('@angular/core'); + const { AnalogInspector } = await import('../../../../app/src/pages/analog-inspector.ts'); + const { Select } = await import('../../../../app/src/ui/select.ts'); + const signalInput = (name: string, required = false) => [ + { type: Input, args: [{ isSignal: true, alias: name, required }] }, + ]; + (AnalogInspector as unknown as { propDecorators: unknown }).propDecorators = { + rpc: signalInput('rpc'), + }; + (Select as unknown as { propDecorators: unknown }).propDecorators = { + options: signalInput('options', true), + value: [...signalInput('value'), { type: Output, args: ['valueChange'] }], + placeholder: signalInput('placeholder'), + ariaLabel: signalInput('ariaLabel'), + labelledBy: signalInput('labelledBy'), + disabled: signalInput('disabled'), + emptyText: signalInput('emptyText'), + trigger: [{ type: ViewChild, args: ['trigger', { isSignal: true }] }], + list: [{ type: ViewChild, args: ['list', { isSignal: true }] }], + }; + if (!testBedReady) { + TestBed.initTestEnvironment(BrowserTestingModule, platformBrowserTesting()); + testBedReady = true; + } + TestBed.resetTestingModule(); + const client = { + connectionMeta: {}, + scope: () => ({ + rpc: { + call: async (name: string, arg?: unknown) => handler(name, arg), + sharedState: async () => ({ value: () => state, on: () => () => {} }), + }, + }), + }; + const fixture = TestBed.createComponent(AnalogInspector); + document.body.append(fixture.nativeElement); + fixture.componentRef.setInput('rpc', client); + const settle = async () => { + for (let i = 0; i < 5; i++) { + fixture.detectChanges(); + await fixture.whenStable(); + await new Promise((resolve) => setTimeout(resolve)); + } + fixture.detectChanges(); + }; + await settle(); + const el = fixture.nativeElement as HTMLElement; + const type = async (selector: string, value: string) => { + const input = el.querySelector(selector)!; + input.value = value; + input.dispatchEvent(new Event('input')); + await settle(); + }; + const submit = async (selector: string) => { + el.querySelector(selector)!.dispatchEvent( + new Event('submit', { cancelable: true }), + ); + await settle(); + }; + const tab = async (id: string) => { + el.querySelector(`#analog-tab-${id}`)!.click(); + await settle(); + }; + return { fixture, el, settle, type, submit, tab, inspector: fixture.componentInstance }; +} + +const match = (file: string, params: Record) => ({ + matched: true, + chain: [{ id: file, fullPath: '/x', file, kind: 'page', params: [], children: [] }], + params, + rejected: [], +}); + +describe('Analog panel', () => { + it('shows the URL that was explained, not the one being typed, and reports failures', async () => { + let fail = false; + const { el, type, submit } = await mount((name) => { + if (name === 'analog-project') return PROJECT; + if (name === 'analog-explain-url') { + if (fail) throw new Error('socket closed'); + return match('/src/app/pages/products/[id].page.ts', { id: '42' }); + } + return null; + }); + await type('#analog-url', '/products/42'); + await submit('form.explain'); + const result = () => el.querySelector('.explain-result')!.textContent!.replace(/\s+/g, ' '); + expect(result()).toContain('/products/42 renders'); + expect(result()).toContain('id = 42'); + await type('#analog-url', '/nope'); + expect(result()).toContain('/products/42 renders'); + expect(result()).not.toContain('/nope'); + await type('#analog-url', ' '); + await submit('form.explain'); + expect(result()).toContain('Type a URL to explain'); + fail = true; + await type('#analog-url', '/products/7'); + await submit('form.explain'); + expect(result()).toContain('Could not explain /products/7. socket closed.'); + expect(result()).not.toContain('renders'); + }); + + it('clears the old response and blocks a second send while a request runs', async () => { + let resolve: (value: unknown) => void = () => {}; + const sent: unknown[] = []; + const { el, type, submit, tab, settle, inspector } = await mount((name, arg) => { + if (name === 'analog-project') return PROJECT; + if (name === 'analog-call-api') { + sent.push(arg); + return new Promise((r) => (resolve = r)); + } + return null; + }); + await tab('server'); + await type('#api-path', '/api/v1/hello'); + inspector.response.set({ ok: true, status: 200, ms: 1, type: 'x', body: '"old"' }); + await submit('form.playground'); + const button = () => + el.querySelector('form.playground button[type=submit]')!; + expect(button().disabled).toBe(true); + expect(button().textContent).toContain('Sending'); + expect(el.querySelector('.response')).toBeNull(); + await submit('form.playground'); + expect(sent).toHaveLength(1); + resolve({ ok: true, status: 201, ms: 3, type: 'application/json', body: '"new"' }); + await settle(); + expect(button().disabled).toBe(false); + expect(el.querySelector('.response')!.textContent).toContain('201'); + }); + + it('keeps Send off for data-changing methods until the checkbox is ticked', async () => { + const sent: unknown[] = []; + const { el, type, submit, tab, settle, inspector } = await mount((name, arg) => { + if (name === 'analog-project') return PROJECT; + if (name === 'analog-call-api') { + sent.push(arg); + return { ok: true, status: 200, ms: 1, type: '', body: '' }; + } + return null; + }); + await tab('server'); + await type('#api-path', '/api/v1/products'); + inspector.method.set('POST'); + await settle(); + const button = el.querySelector('form.playground button[type=submit]')!; + expect(button.disabled).toBe(true); + expect(button.getAttribute('aria-describedby')).toBe('analog-confirm-hint'); + expect(el.querySelector('#analog-confirm-hint')!.textContent).toContain('POST'); + await submit('form.playground'); + expect(sent).toHaveLength(0); + el.querySelector('.check input')!.dispatchEvent(new Event('change')); + await settle(); + expect(button.disabled).toBe(false); + await submit('form.playground'); + expect(sent).toEqual([{ method: 'POST', path: '/api/v1/products', confirm: true }]); + }); + + it('shows each lint finding message, deduped', async () => { + const findings = [ + { + rule: 'hydration-error', + severity: 'error', + path: '/products/1', + message: 'NG0500: During hydration Angular expected

        but found

        ', + fix: 'x', + }, + { + rule: 'hydration-error', + severity: 'error', + path: '/products/1', + message: 'NG0500: During hydration Angular expected

        but found

        ', + fix: 'x', + }, + { + rule: 'duplicate-url', + severity: 'error', + path: '/about', + file: '/src/app/pages/about.md', + message: + '/src/app/pages/about.md and /src/app/pages/about/index.page.ts both resolve to /about; only one is reachable.', + fix: 'x', + }, + { + rule: 'missing-default-export', + severity: 'error', + path: '/team', + file: '/src/app/pages/team.page.ts', + message: 'The page has no default export, so Analog renders nothing.', + fix: 'x', + }, + ]; + const { el, tab } = await mount((name) => { + if (name === 'analog-project') return PROJECT; + if (name === 'analog-lint') return findings; + return null; + }); + await tab('lint'); + const text = el.querySelector('.findings')!.textContent!; + expect(text.match(/During hydration Angular expected

        but found

        /g)).toHaveLength(1); + expect(text).toContain('/src/app/pages/about/index.page.ts'); + expect(text).toContain('/src/app/pages/about.md and'); + expect(text).not.toContain('The page has no default export, so Analog renders nothing.'); + }); + + it('names server functions, marks SSR seeds and lists form action outcomes', async () => { + const id = 'aaaaaaaaaaaaaaaa'; + const state = { + calls: [ + { + id: 1, + at: 1, + kind: 'fn', + method: 'SSR', + url: `/_analog/fn/${id}`, + route: id, + status: 200, + ms: 0, + from: 'ssr', + seeded: true, + }, + { + id: 2, + at: 2, + kind: 'fn', + method: 'GET', + url: `/_analog/fn/${id}`, + route: id, + status: 200, + ms: 5, + from: 'browser', + }, + { + id: 3, + at: 3, + kind: 'action', + method: 'POST', + url: '/api/_analog/pages/login', + route: '/login', + status: 422, + ms: 4, + from: 'browser', + outcome: 'invalid', + }, + ], + refetches: [{ id, ssrAt: 1, browserAt: 2 }], + }; + const { el, tab, inspector, settle } = await mount( + (name) => (name === 'analog-project' ? PROJECT : null), + state, + ); + await tab('server'); + const text = el.textContent!.replace(/\s+/g, ' '); + expect(text).toContain('Server function read ran twice: getUsers'); + const calls = el.querySelector('[aria-label="Server calls"]')!; + expect(calls.querySelector('strong.url')!.textContent).toBe('getUsers'); + expect(calls.textContent).toContain('users.server.ts'); + expect(calls.textContent).not.toContain(`/_analog/fn/${id}`); + expect(text).toContain('ran during server rendering'); + expect(text).toContain('in process'); + expect(text).toContain('validation errors'); + expect(el.querySelector('[aria-label="Server functions"]')!.textContent).toContain('getUsers'); + inspector.kind.set('action'); + await settle(); + const rows = el.querySelectorAll('[aria-label="Server calls"] tbody tr'); + expect(rows).toHaveLength(1); + expect(rows[0].textContent).toContain('/api/_analog/pages/login'); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/analog-mcp.test.ts b/packages/ng-devtools/src/__tests__/analog-mcp.test.ts index f8d3fa5..1cd7aed 100644 --- a/packages/ng-devtools/src/__tests__/analog-mcp.test.ts +++ b/packages/ng-devtools/src/__tests__/analog-mcp.test.ts @@ -6,7 +6,10 @@ import { clearCalls, recordCall, setDevOrigin } from '../analog-server-log.ts'; import { analogEndpoint, loadEndpointUrl, + prerenderPlan, + renderRows, resolveAnalogReport, + ruleMatches, type AnalogState, } from '../rpc/analog-tools.ts'; import { scanAnalog } from '../rpc/analog-scan.ts'; @@ -90,6 +93,7 @@ describe('Analog MCP tools', () => { for (const tool of [ 'analog-routes', 'analog-api-routes', + 'analog-server-functions', 'analog-render-modes', 'analog-prerender-plan', 'analog-content', @@ -181,6 +185,37 @@ describe('Analog MCP tools', () => { expect(lint).toContain('api-not-found'); }); + it('analog-server-calls lists form actions with their outcome and filters them', async () => { + const { call } = await boot(makeProject(BASE_FILES)); + const base = { + method: 'POST', + ms: 4, + kind: 'action' as const, + url: '/api/_analog/pages/login', + route: '/login', + from: 'browser' as const, + }; + recordCall({ ...base, at: 1, status: 200, outcome: 'success' }); + recordCall({ + ...base, + at: 2, + status: 422, + outcome: 'invalid', + preview: '{"email":"Email is required"}', + }); + recordCall({ ...base, at: 3, status: 302, outcome: 'redirect', location: '/dashboard' }); + recordCall({ ...base, at: 4, kind: 'load', method: 'GET', status: 200 }); + const actions = await call('analog-server-calls', { kind: 'action' }); + expect(actions).toContain( + 'action POST `/api/_analog/pages/login` 200 in 4ms (browser, action succeeded)', + ); + expect(actions).toContain('422 in 4ms (browser, validation errors (fail()))'); + expect(actions).toContain('{"email":"Email is required"}'); + expect(actions).toContain('302 in 4ms (browser, action redirected, to `/dashboard`)'); + expect(actions).not.toContain('load GET'); + expect(await call('analog-server-calls', { kind: 'load' })).not.toContain('action POST'); + }); + it('analog-api-routes and analog-call-api reach the dev server with a confirm gate', async () => { const { call } = await boot(makeProject(BASE_FILES)); const api = await call('analog-api-routes'); @@ -232,7 +267,7 @@ describe('Analog MCP tools', () => { }); const modes = await call('analog-render-modes'); expect(modes).toContain( - '`/dashboard`: client only (routeRules ssr: false); last request: client only', + "`/dashboard`: client only (routeRules['/dashboard'] ssr: false); last request: client only", ); expect(modes).toContain('`/pricing`: prerendered (SSG)'); expect(modes).toContain('`/login`: server rendered on each request (SSR)'); @@ -242,6 +277,95 @@ describe('Analog MCP tools', () => { expect(plan).toContain('`/products/:id`'); }); + it('matches route rules the way Nitro does', () => { + expect(ruleMatches('/dash/**', '/dash')).toBe(true); + expect(ruleMatches('/dash/**', '/dash/a/b')).toBe(true); + expect(ruleMatches('/dash/**', '/dashboard')).toBe(false); + expect(ruleMatches('/blog/*', '/blog/:slug')).toBe(true); + expect(ruleMatches('/blog/*', '/blog/a/b')).toBe(false); + expect(ruleMatches('/about/', '/about')).toBe(true); + expect(ruleMatches('/**', '/')).toBe(true); + }); + + it('reads every route rule kind and matches requests to dynamic and catch-all pages', () => { + const root = makeProject(BASE_FILES, { + 'vite.config.ts': `import analog from '@analogjs/platform'; +export default { + plugins: [ + analog({ + nitro: { + routeRules: { + '/dash/**': { ssr: false }, + '/login': { redirect: { to: '/', statusCode: 301 } }, + '/pricing': { prerender: true }, + '/products/**': { isr: 60 }, + '/docs/**': { swr: true }, + '/shop/**': { cache: { maxAge: 30 } }, + '/about': { headers: { 'Cache-Control': 's-maxage=600' } }, + '/': { headers: { 'cache-control': 'no-store' } }, + }, + }, + }), + ], +}; +`, + }); + const project = scanAnalog(root); + expect(project.config.routeRules).toHaveLength(8); + expect(project.config.noSsrRoutes).toEqual(['/dash/**']); + const page = (url: string, at: number) => ({ + id: at, + at, + kind: 'page' as const, + method: 'GET', + url, + route: url, + status: 200, + ms: 7, + from: 'browser' as const, + render: 'ssr' as const, + }); + const state: AnalogState = { + pages: [], + duplicates: [], + reportedAt: 0, + calls: [page('/products/42', 1), page('/docs/a/b', 2), page('/login/', 3)], + }; + const rows = Object.fromEntries(renderRows(project, state).map((r) => [r.path, r])); + expect(rows['/dashboard']).toMatchObject({ mode: 'ssr' }); + expect(rows['/login']).toMatchObject({ + mode: 'redirect', + reason: "routeRules['/login'] redirect to /", + last: { status: 200, ms: 7 }, + }); + expect(rows['/pricing']).toMatchObject({ + mode: 'ssg', + reason: "routeRules['/pricing'] prerender: true", + }); + expect(rows['/products/:id']).toMatchObject({ + mode: 'cached', + reason: "routeRules['/products/**'] isr: 60", + last: { at: 1 }, + }); + expect(rows['/products']).toMatchObject({ mode: 'cached' }); + expect(rows['/products']?.last).toBeUndefined(); + expect(rows['/docs/**']).toMatchObject({ + mode: 'cached', + reason: "routeRules['/docs/**'] swr: true", + last: { at: 2 }, + }); + expect(rows['/shop']).toMatchObject({ mode: 'cached', reason: "routeRules['/shop/**'] cache" }); + expect(rows['/about']).toMatchObject({ + mode: 'cached', + reason: "routeRules['/about'] Cache-Control: s-maxage=600", + }); + expect(rows['/']).toMatchObject({ mode: 'ssr' }); + const plan = prerenderPlan(project); + expect(plan.fromRules).toEqual(['/pricing']); + expect(plan.staticMissing).not.toContain('/pricing'); + expect(plan.staticMissing).not.toContain('/login'); + }); + it('analog-content and analog-lint cover content and static mistakes', async () => { const { call } = await boot(makeProject(BASE_FILES, BROKEN_FILES)); const content = await call('analog-content'); diff --git a/packages/ng-devtools/src/__tests__/analog-runtime.test.ts b/packages/ng-devtools/src/__tests__/analog-runtime.test.ts index c2308e3..2c17d6b 100644 --- a/packages/ng-devtools/src/__tests__/analog-runtime.test.ts +++ b/packages/ng-devtools/src/__tests__/analog-runtime.test.ts @@ -63,6 +63,29 @@ describe('Analog runtime reader', () => { expect(summary.preview).toBe('{"id":"1","token":"[redacted]"}'); }); + it('redacts load data by whole words, not substrings', () => { + const visible = { + author: 'Ada', + authorId: 3, + compassHeading: 'N', + passengers: 2, + footprint: 'x', + discardReason: 'y', + cardinality: 1, + title: 't', + }; + const hidden = { token: 'a', password: 'b', sessionId: 'c', apiKey: 'd', cardNumber: 'e' }; + const preview = JSON.parse(loadSummary({ ...visible, ...hidden })!.preview); + expect(preview).toEqual({ + ...visible, + token: '[redacted]', + password: '[redacted]', + sessionId: '[redacted]', + apiKey: '[redacted]', + cardNumber: '[redacted]', + }); + }); + it('replaces load data nested past the depth limit instead of keeping it raw', () => { const summary = loadSummary({ a: { b: { c: { d: { e: { f: { g: { password: 'hunter2' } } } } } } }, diff --git a/packages/ng-devtools/src/__tests__/analog-server-fns.test.ts b/packages/ng-devtools/src/__tests__/analog-server-fns.test.ts new file mode 100644 index 0000000..92fb212 --- /dev/null +++ b/packages/ng-devtools/src/__tests__/analog-server-fns.test.ts @@ -0,0 +1,217 @@ +// @vitest-environment jsdom +import { EventEmitter } from 'node:events'; +import { createHostContext } from 'devframe/node'; +import { afterEach, describe, expect, it } from 'vitest'; +import ngDevtools from '../devframe.ts'; +import { + analogMiddleware, + clearCalls, + recentCalls, + recordCall, + refetchedServerFns, + type AnalogCall, +} from '../analog-server-log.ts'; +import { decodePayload, sanitizePayload } from '../http-payload.ts'; +import { lintAnalog, scanAnalog, serverFnId, serverFnsOf } from '../rpc/analog-scan.ts'; +import { nameServerFns } from '../rpc/analog-register.ts'; +import { BASE_FILES, makeProject } from './analog-fixture.ts'; + +const USERS = `import { serverFn } from '@analogjs/router/server'; +import * as v from 'valibot'; + +export const getUsers = serverFn(async () => [{ id: 1 }]); +export const addUser = serverFn(v.object({ name: v.string() }), async (input) => input); +export const removeUser = serverFn({ method: 'DELETE' }, async () => null); +export const findUser = serverFn({ input: v.string() }, async (id) => id); +export const helper = 1; +`; + +const FN_FILES: Record = { + 'src/app/users/users.server.ts': USERS, + 'src/app/pages/products/[id].server.ts': `import { serverFn as fn } from '@analogjs/router/server'; +export const productName = fn(() => 'Chair'); +`, + 'src/app/pages/reports.server.ts': `import { serverFn } from '@analogjs/router/server'; +export const report = serverFn(() => ({})); +`, + 'src/main.server.ts': `import { serverFn } from '@analogjs/router/server'; +export const notAHost = serverFn(() => 1); +`, + 'src/app/app.config.server.ts': `import { serverFn } from '@analogjs/router/server'; +export const skipped = serverFn(() => 1); +`, +}; + +class FakeRes extends EventEmitter { + statusCode = 200; + getHeader() { + return undefined; + } + write(_chunk: unknown) { + return true; + } + end() { + this.emit('finish'); + return this; + } +} + +afterEach(() => clearCalls()); + +describe('Analog server functions', () => { + it('derives the same ids as Analog and reads each export method', () => { + expect(serverFnId('/src/app/users/users.server.ts', 'getUser')).toBe('df288e37493fb8da'); + const fns = serverFnsOf('/src/app/users/users.server.ts', USERS); + expect(fns.map((f) => `${f.method} ${f.name}`)).toEqual([ + 'GET getUsers', + 'POST addUser', + 'DELETE removeUser', + 'POST findUser', + ]); + expect(fns[0].id).toBe(serverFnId('/src/app/users/users.server.ts', 'getUsers')); + expect(serverFnsOf('/a.server.ts', 'export const load = async () => ({});')).toEqual([]); + }); + + it('scans every .server.ts under src and stops false lint warnings for them', () => { + const project = scanAnalog(makeProject(BASE_FILES, FN_FILES)); + expect(project.serverFns.map((f) => `${f.name} ${f.file}`).sort()).toEqual([ + 'addUser /src/app/users/users.server.ts', + 'findUser /src/app/users/users.server.ts', + 'getUsers /src/app/users/users.server.ts', + 'productName /src/app/pages/products/[id].server.ts', + 'removeUser /src/app/users/users.server.ts', + 'report /src/app/pages/reports.server.ts', + ]); + const product = makeProject(BASE_FILES, FN_FILES, { + 'src/app/pages/products/[id].server.ts': FN_FILES['src/app/pages/products/[id].server.ts'], + }); + const rules = lintAnalog(scanAnalog(product)).map((f) => `${f.rule} ${f.file}`); + expect(rules).not.toContain('server-without-load /src/app/pages/products/[id].server.ts'); + expect(rules).not.toContain('orphan-server-file /src/app/pages/reports.server.ts'); + const ghost = makeProject(BASE_FILES, { + 'src/app/pages/ghost.server.ts': `import { serverFn } from '@analogjs/router/server'; +export const load = async () => ({}); +export const ping = serverFn(() => 1); +`, + }); + expect(lintAnalog(scanAnalog(ghost)).map((f) => f.rule)).toContain('orphan-server-file'); + }); + + it('records server functions seeded while rendering a page, before the page itself', () => { + const id = 'df288e37493fb8da'; + const req = { + url: '/users', + method: 'GET', + headers: { accept: 'text/html', 'user-agent': 'Mozilla' }, + } as never; + const res = new FakeRes(); + analogMiddleware('api')(req, res as never, () => {}); + res.write( + '`); + res.end(); + const calls = recentCalls(); + expect(calls.map((c) => `${c.kind} ${c.from} ${c.route}`)).toEqual([ + `fn ssr ${id}`, + 'page browser /users', + ]); + expect(calls[0]).toMatchObject({ seeded: true, method: 'SSR', url: `/_analog/fn/${id}` }); + }); + + it('flags a seeded read called again in the browser right after hydration', () => { + const base = { method: 'GET', url: '', status: 200, ms: 1 }; + const fn = { ...base, kind: 'fn' as const }; + const page = { ...base, kind: 'page' as const, from: 'browser' as const }; + const list: AnalogCall[] = [ + { ...fn, id: 1, at: 1000, route: 'a', from: 'ssr', seeded: true }, + { ...fn, id: 2, at: 1000, route: 'b', from: 'ssr', seeded: true }, + { ...page, id: 3, at: 1000, route: '/users', render: 'ssr' }, + { ...fn, id: 4, at: 1300, route: 'a', from: 'browser' }, + { ...fn, id: 5, at: 1400, route: 'a', from: 'browser' }, + { ...fn, id: 6, at: 20_000, route: 'b', from: 'browser' }, + { ...fn, id: 7, at: 30_000, route: 'c', from: 'ssr', seeded: true }, + { ...page, id: 8, at: 30_000, route: '/c', render: 'client' }, + { ...fn, id: 9, at: 30_100, route: 'c', from: 'browser' }, + ]; + expect(refetchedServerFns(list)).toEqual([{ id: 'a', ssrAt: 1000, browserAt: 1300 }]); + }); + + it('labels seeded payload entries and names them from the scan', async () => { + const script = document.createElement('script'); + script.id = 'ng-state'; + script.type = 'application/json'; + const id = serverFnId('/src/app/users/users.server.ts', 'getUsers'); + script.textContent = JSON.stringify({ [`__analog_fn_${id}__`]: [{ id: 1 }], other: 1 }); + document.body.append(script); + const payload = sanitizePayload(decodePayload(document)); + script.remove(); + expect(payload.entries[0]).toMatchObject({ source: 'analog', fn: { id } }); + expect(payload.entries[1].fn).toBeUndefined(); + expect(sanitizePayload({ entries: [{ key: 'x', fn: { id: 'nope' } }] }).entries[0].fn).toBe( + undefined, + ); + + const cwd = makeProject(BASE_FILES, FN_FILES); + const host = { + mountStatic: () => {}, + resolveOrigin: () => 'http://localhost', + getStorageDir: () => '', + }; + const ctx = await createHostContext({ cwd, mode: 'dev', host: host as never }); + await ngDevtools.setup(ctx as never); + expect(nameServerFns(payload).entries[0].fn).toEqual({ + id, + name: 'getUsers', + file: '/src/app/users/users.server.ts', + }); + const call = async (tool: string, args: Record = {}) => + ((await ctx.agent.invoke(`ng-devtools:${tool}`, args)) as { markdown: string }).markdown; + recordCall({ + at: 1000, + kind: 'fn', + method: 'SSR', + url: `/_analog/fn/${id}`, + route: id, + status: 200, + ms: 0, + from: 'ssr', + seeded: true, + }); + recordCall({ + at: 1000, + kind: 'page', + method: 'GET', + url: '/users', + route: '/users', + status: 200, + ms: 9, + from: 'browser', + render: 'ssr', + }); + recordCall({ + at: 1200, + kind: 'fn', + method: 'GET', + url: `/_analog/fn/${id}`, + route: id, + status: 200, + ms: 4, + from: 'browser', + }); + const fns = await call('analog-server-functions'); + expect(fns).toContain( + `- GET getUsers \`/src/app/users/users.server.ts\` id \`${id}\`; seen 1 HTTP call(s), 1 during server rendering; called again in the browser right after hydration`, + ); + expect(fns).toContain('- DELETE removeUser'); + const calls = await call('analog-server-calls', { route: 'getUsers' }); + expect(calls).toContain( + 'fn getUsers (`/src/app/users/users.server.ts`) ran in-process during server rendering', + ); + expect(calls).toContain( + `fn getUsers (\`/src/app/users/users.server.ts\`) GET \`/_analog/fn/${id}\` 200 in 4ms (browser)`, + ); + expect(calls).toContain('Server functions seeded during server rendering and called again'); + expect(await call('analog-lint')).toContain('fn-fetched-twice'); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/analog-server-log.test.ts b/packages/ng-devtools/src/__tests__/analog-server-log.test.ts index 14fe3f3..60fa93b 100644 --- a/packages/ng-devtools/src/__tests__/analog-server-log.test.ts +++ b/packages/ng-devtools/src/__tests__/analog-server-log.test.ts @@ -5,7 +5,6 @@ import { classify, clearCalls, duplicateLoads, - isSecretKey, loadRoute, previewOf, recentCalls, @@ -13,6 +12,7 @@ import { type AnalogCall, } from '../analog-server-log.ts'; import ngDevtoolsVite from '../vite.ts'; +import { isRedactedKey as isSecretKey } from '../forms-privacy.ts'; class FakeRes extends EventEmitter { statusCode = 200; @@ -123,6 +123,82 @@ describe('Analog server call log', () => { expect(devtools.call!.from).toBe('devtools'); }); + it('classifies non-GET page endpoint requests as form actions', () => { + expect(classify('/api/_analog/pages/contact', 'POST', '*/*', 'api')).toEqual({ + kind: 'action', + route: '/contact', + }); + expect(classify('/_analog/pages/(auth)/login', 'DELETE', '', 'api')).toEqual({ + kind: 'action', + route: '/login', + }); + expect(classify('/api/_analog/pages/contact', 'HEAD', '', 'api')!.kind).toBe('load'); + }); + + it('records form action outcomes with redacted validation errors and redirects', () => { + const browser = { 'user-agent': 'Mozilla' }; + const ok = run( + '/api/_analog/pages/contact', + (res) => { + res.setHeader('content-type', 'application/json'); + res.end('{"sent":true}'); + }, + browser, + 'POST', + ); + expect(ok.call).toMatchObject({ kind: 'action', outcome: 'success', route: '/contact' }); + const invalid = run( + '/api/_analog/pages/contact', + (res) => { + res.statusCode = 422; + res.setHeader('x-analog-errors', 'true'); + res.setHeader('content-type', 'text/plain;charset=UTF-8'); + res.end('{"email":"Email is required","password":"hunter2 is too short"}'); + }, + browser, + 'POST', + ); + expect(invalid.call).toMatchObject({ kind: 'action', outcome: 'invalid', status: 422 }); + expect(invalid.call!.preview).toContain('"email":"Email is required"'); + expect(invalid.call!.preview).not.toContain('hunter2'); + const redirect = run( + '/api/_analog/pages/contact', + (res) => { + res.statusCode = 302; + res.setHeader('location', '/thanks?token=abc'); + res.end(); + }, + browser, + 'POST', + ); + expect(redirect.call).toMatchObject({ + kind: 'action', + outcome: 'redirect', + location: '/thanks?token=[redacted]', + }); + const failed = run( + '/api/_analog/pages/contact', + (res) => { + res.statusCode = 500; + res.end('boom'); + }, + browser, + 'POST', + ); + expect(failed.call!.outcome).toBe('error'); + }); + + it('keeps load pairing when a form action posts in between', () => { + const base = { method: 'GET', url: '', status: 200, ms: 1, kind: 'load' as const }; + const list: AnalogCall[] = [ + { ...base, id: 1, at: 1000, route: '/a', from: 'ssr' }, + { ...base, id: 2, at: 1100, kind: 'page', route: '/a', from: 'browser', render: 'ssr' }, + { ...base, id: 3, at: 1200, kind: 'action', method: 'POST', route: '/a', from: 'browser' }, + { ...base, id: 4, at: 1300, route: '/a', from: 'browser' }, + ]; + expect(duplicateLoads(list)).toEqual([{ route: '/a', ssrAt: 1000, browserAt: 1300 }]); + }); + it('passes unrelated requests straight through', () => { const { nexted, call } = run('/src/main.ts', (res) => res.end('code')); expect(nexted).toBe(true); diff --git a/packages/ng-devtools/src/__tests__/cd-recorder.test.ts b/packages/ng-devtools/src/__tests__/cd-recorder.test.ts new file mode 100644 index 0000000..0206769 --- /dev/null +++ b/packages/ng-devtools/src/__tests__/cd-recorder.test.ts @@ -0,0 +1,242 @@ +// @vitest-environment jsdom +import { setFlagsFromString } from 'node:v8'; +import { runInNewContext } from 'node:vm'; +import { afterEach, describe, expect, it, vi } from 'vitest'; +import { PROFILER_EVENT as E, createCdRecorder } from '../cd-recorder.ts'; +import { attachChangeDetection } from '../cd-overlay.ts'; +import { changeDetectionText, toCdPage, type CdState } from '../rpc/cd-tools.ts'; + +class Shell {} +class Cart {} +class Price {} + +function clocked() { + let t = 0; + return { now: () => t, advance: (ms: number) => (t += ms) }; +} + +describe('change detection recorder', () => { + it('ignores events until it records, then keeps cycles with self times', () => { + const clock = clocked(); + const recorder = createCdRecorder({ maxCycles: 10, now: clock.now, clock: () => 1000 }); + const shell = new Shell(); + const cart = new Cart(); + recorder.onEvent(E.ChangeDetectionStart); + recorder.onEvent(E.ChangeDetectionEnd); + expect(recorder.snapshot(() => null).cycles).toEqual([]); + + recorder.start(); + const listener = function onAdd() {}; + recorder.onEvent(E.OutputStart, cart, listener); + recorder.onEvent(E.ChangeDetectionStart); + recorder.onEvent(E.ChangeDetectionSyncStart); + recorder.onEvent(E.ComponentStart); + clock.advance(1); + recorder.onEvent(E.ComponentStart); + clock.advance(3); + recorder.onEvent(E.ComponentEnd, cart); + clock.advance(1); + recorder.onEvent(E.ComponentEnd, shell); + recorder.onEvent(E.ChangeDetectionSyncStart); + recorder.onEvent(E.ComponentStart); + clock.advance(2); + recorder.onEvent(E.ComponentEnd, cart); + recorder.onEvent(E.ChangeDetectionEnd); + + const snap = recorder.snapshot((instance) => (instance === cart ? 'c1' : null)); + expect(snap.recording).toBe(true); + expect(snap.cycles).toEqual([ + { + id: 1, + at: 1000, + ms: 7, + passes: 2, + trigger: 'Cart (onAdd)', + checks: 3, + components: [ + { name: 'Cart', checks: 2, ms: 5 }, + { name: 'Shell', checks: 1, ms: 2 }, + ], + }, + ]); + expect(snap.components[0]).toEqual({ name: 'Cart', checks: 2, ms: 5, maxMs: 3, cycles: 1 }); + expect(snap.hosts).toEqual({ c1: 2 }); + }); + + it('keeps the latest cycles at the limit and counts the rest', () => { + const recorder = createCdRecorder({ maxCycles: 3 }); + recorder.start(); + for (let i = 0; i < 5; i++) { + recorder.onEvent(E.ChangeDetectionStart); + recorder.onEvent(E.ChangeDetectionEnd); + } + const snap = recorder.snapshot(() => null); + expect(snap.cycles.map((c) => c.id)).toEqual([3, 4, 5]); + expect(snap.dropped).toBe(2); + recorder.stop(); + expect(recorder.snapshot(() => null).cycles).toHaveLength(3); + recorder.clear(); + expect(recorder.snapshot(() => null)).toMatchObject({ cycles: [], dropped: 0 }); + }); + + it('does not record outputs that run inside a cycle as its trigger', () => { + const recorder = createCdRecorder({ maxCycles: 10 }); + recorder.start(); + recorder.onEvent(E.ChangeDetectionStart); + recorder.onEvent(E.OutputStart, new Price(), () => {}); + recorder.onEvent(E.ChangeDetectionEnd); + recorder.onEvent(E.ChangeDetectionStart); + recorder.onEvent(E.ChangeDetectionEnd); + expect(recorder.snapshot(() => null).cycles.map((c) => c.trigger)).toEqual([ + undefined, + undefined, + ]); + }); + + it('lets components it counted be collected once they are gone', async () => { + setFlagsFromString('--expose-gc'); + const gc = runInNewContext('gc') as () => void; + const recorder = createCdRecorder({ maxCycles: 100 }); + recorder.start(); + const refs: WeakRef[] = []; + (() => { + for (let i = 0; i < 20; i++) { + const cart = new Cart(); + refs.push(new WeakRef(cart)); + recorder.onEvent(E.OutputStart, cart, () => {}); + recorder.onEvent(E.ChangeDetectionStart); + recorder.onEvent(E.ComponentStart); + recorder.onEvent(E.ComponentEnd, cart); + recorder.onEvent(E.ChangeDetectionEnd); + } + })(); + recorder.stop(); + await new Promise((resolve) => setTimeout(resolve, 0)); + gc(); + gc(); + expect(refs.filter((ref) => ref.deref())).toHaveLength(0); + const snap = recorder.snapshot(() => 'c1'); + expect(snap.cycles).toHaveLength(20); + expect(snap.cycles[0].trigger).toBe('Cart'); + expect(snap.hosts).toEqual({}); + }); +}); + +describe('change detection in the overlay', () => { + afterEach(() => { + document.body.innerHTML = ''; + }); + + function setup(version: string) { + document.body.innerHTML = ``; + const profilers: ((event: number, instance?: unknown, hook?: unknown) => void)[] = []; + const ng = { + ɵsetProfiler: vi.fn((profiler: (typeof profilers)[number] | null) => { + if (!profiler) throw new Error('never clear every profiler'); + profilers.push(profiler); + return () => profilers.splice(profilers.indexOf(profiler), 1); + }), + getHostElement: () => document.querySelector('app-root'), + }; + const sent: { name: string; args: unknown[] }[] = []; + const handlers = new Map unknown>(); + const my = { + rpc: { + call: async (name: string, ...args: unknown[]) => { + sent.push({ name, args }); + return undefined; + }, + register: (def: { name: string; handler: (...args: unknown[]) => unknown }) => + handlers.set(def.name, def.handler), + }, + }; + const cd = attachChangeDetection(my, 'p1', () => ng, 50); + const emit = (event: number, instance?: unknown) => + profilers.forEach((profiler) => profiler(event, instance)); + return { cd, ng, sent, handlers, profilers, emit }; + } + + it('sends nothing and registers no profiler until recording starts', async () => { + const { cd, sent, profilers } = setup('22.1.0'); + await cd.push(); + expect(sent).toEqual([]); + expect(profilers).toHaveLength(0); + }); + + it('records while on, reports hosts by tree id, and removes its profiler on stop', async () => { + const { cd, sent, handlers, profilers, emit } = setup('22.1.0'); + handlers.get('change-detection-record')!({ pageId: 'p1', on: true }); + expect(profilers).toHaveLength(1); + emit(E.ChangeDetectionStart); + emit(E.ComponentStart); + emit(E.ComponentEnd, new Shell()); + emit(E.ChangeDetectionEnd); + await cd.push(); + const report = sent.filter((s) => s.name === 'push-change-detection').at(-1)!.args[0] as { + cycles: unknown[]; + hosts: Record; + supported: boolean; + }; + expect(report.supported).toBe(true); + expect(report.cycles).toHaveLength(1); + expect(Object.values(report.hosts)).toEqual([1]); + handlers.get('change-detection-record')!({ on: false }); + expect(profilers).toHaveLength(0); + handlers.get('change-detection-record')!({ pageId: 'other', on: true }); + expect(profilers).toHaveLength(0); + }); + + it('reports that it cannot record before Angular 20', async () => { + const { ng, sent, handlers } = setup('19.2.0'); + handlers.get('change-detection-record')!({ on: true }); + await Promise.resolve(); + expect(ng.ɵsetProfiler).not.toHaveBeenCalled(); + expect(sent.at(-1)).toMatchObject({ + name: 'push-change-detection', + args: [{ supported: false, recording: false }], + }); + }); +}); + +describe('change detection agent text', () => { + it('lists the slowest and most checked components and notes dropped cycles', () => { + const page = toCdPage( + { + pageId: 'p1', + supported: true, + recording: true, + startedAt: 1, + dropped: 4, + cycles: [ + { + id: 5, + at: 1, + ms: 3, + passes: 1, + trigger: 'Cart (onAdd)', + checks: 2, + components: [{ name: 'Cart', checks: 1, ms: 2 }], + }, + ], + components: [ + { name: 'Cart', checks: 2, ms: 9, maxMs: 5, cycles: 2 }, + { name: 'Row', checks: 40, ms: 1, maxMs: 0.1, cycles: 2 }, + ], + hosts: { c1: 2 }, + }, + 200, + )!; + const state: CdState = { pages: { p1: page } }; + const text = changeDetectionText(state); + expect(text).toContain('Recording is on.'); + expect(text.indexOf('`Cart`: 2 check(s)')).toBeLessThan(text.indexOf('**Most often checked**')); + expect(text.split('**Most often checked**')[1]).toMatch(/^\n- `Row`/); + expect(text).toContain('after output in `Cart (onAdd)`'); + expect(text).toContain('4 older cycles were dropped'); + expect(changeDetectionText({ pages: {} })).toContain('record: "start"'); + expect(changeDetectionText({ pages: { p1: { ...page, supported: false } } })).toContain( + 'Angular 20', + ); + expect(toCdPage({ pageId: 5 }, 10)).toBeNull(); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/cli-bin.test.ts b/packages/ng-devtools/src/__tests__/cli-bin.test.ts new file mode 100644 index 0000000..051c11c --- /dev/null +++ b/packages/ng-devtools/src/__tests__/cli-bin.test.ts @@ -0,0 +1,186 @@ +import { spawn } from 'node:child_process'; +import { mkdirSync, writeFileSync } from 'node:fs'; +import { join } from 'node:path'; +import { fileURLToPath } from 'node:url'; +import { describe, expect, it } from 'vitest'; +import { loadCliConfig, looksLikeAngularProject, resolveCliRoot } from '../cli.ts'; +import { fixtureDir } from '../rpc/__tests__/fixture-dir.ts'; +import pkg from '../../package.json' with { type: 'json' }; + +const BIN = fileURLToPath(new URL('../../bin.mjs', import.meta.url)); +const REPO = fileURLToPath(new URL('../../../../', import.meta.url)); + +interface Run { + code: number | null; + stdout: string; + stderr: string; +} + +function run( + args: string[], + options: { cwd?: string; input?: string[]; until?: (out: string) => boolean } = {}, +): Promise { + return new Promise((resolve, reject) => { + const child = spawn(process.execPath, [BIN, ...args], { + cwd: options.cwd ?? REPO, + env: { ...process.env, NG_DEVTOOLS_ROOT: '', NG_DEVTOOLS_CONFIG: '' }, + }); + let stdout = ''; + let stderr = ''; + const done = () => resolve({ code: child.exitCode, stdout, stderr }); + child.stdout.on('data', (chunk) => { + stdout += chunk; + if (options.until?.(stdout)) child.kill(); + }); + child.stderr.on('data', (chunk) => (stderr += chunk)); + child.on('error', reject); + child.on('close', done); + for (const line of options.input ?? []) child.stdin.write(`${line}\n`); + if (!options.until) child.stdin.end(); + }); +} + +function mcpRequests(): string[] { + return [ + { + jsonrpc: '2.0', + id: 1, + method: 'initialize', + params: { + protocolVersion: '2025-06-18', + capabilities: {}, + clientInfo: { name: 'test', version: '1' }, + }, + }, + { jsonrpc: '2.0', method: 'notifications/initialized' }, + { jsonrpc: '2.0', id: 2, method: 'tools/list' }, + { + jsonrpc: '2.0', + id: 3, + method: 'tools/call', + params: { name: 'ng-devtools_build-meta', arguments: {} }, + }, + ].map((message) => JSON.stringify(message)); +} + +async function mcp(args: string[], cwd: string) { + const result = await run(['mcp', ...args], { + cwd, + input: mcpRequests(), + until: (out) => out.includes('"id":3'), + }); + const replies = result.stdout + .trim() + .split('\n') + .map((line) => JSON.parse(line) as { id?: number; result?: Record }); + const tools = (replies.find((reply) => reply.id === 2)?.result?.['tools'] ?? []) as { + name: string; + }[]; + const meta = replies.find((reply) => reply.id === 3)?.result?.['structuredContent'] as + { projectName?: string } | undefined; + return { ...result, tools: tools.map((tool) => tool.name.replace(/^ng-devtools_/, '')), meta }; +} + +describe('ng-devtools binary', () => { + it('prints the package version', async () => { + const { stdout, code } = await run(['--version']); + expect(code).toBe(0); + expect(stdout).toContain(`ng-devtools/${pkg.version}`); + expect((await run(['--help'])).stdout).toMatch(/\n\s+dev\s+Start a local dev server/); + }); + + it('prints the panel and MCP URLs when the dev server starts', async () => { + const { stdout } = await run(['dev', '--no-open', '--port', '0'], { + until: (out) => out.includes('MCP:'), + }); + expect(stdout).toContain(`ng-devtools v${pkg.version}`); + expect(stdout).toMatch(/Panel: http:\/\/localhost:\d+\//); + expect(stdout).toMatch(/MCP: {3}http:\/\/localhost:\d+\/__mcp/); + }); + + it('reports an unknown flag or command in one line and exits 1', async () => { + for (const args of [['--outDir', 'x'], ['biuld']]) { + const { code, stderr, stdout } = await run(args); + expect(code).toBe(1); + expect(stdout).toBe(''); + expect(stderr.trim().split('\n')).toHaveLength(1); + expect(stderr).toMatch(/^\[ng-devtools\] Unknown (option `--outDir`|command "biuld")/); + } + }); + + it('scans the --root folder over stdio and drops the tools that need a page', async () => { + const elsewhere = fixtureDir('ng-devtools-cwd-'); + const { tools, meta, stderr } = await mcp(['--root', REPO], elsewhere); + expect(meta?.projectName).toBe('angular-devtools'); + expect(stderr).not.toContain('source scans find nothing'); + expect(tools).toContain('get-components'); + expect(tools).toContain('lint-pipes'); + for (const pageTool of [ + 'highlight', + 'inspect-component', + 'defer-blocks', + 'change-detection', + 'navigate', + 'form-action', + 'fill-form', + 'list-routes', + ]) { + expect(tools).not.toContain(pageTool); + } + }, 30_000); + + it('reads a config file, and warns when the folder is not an Angular project', async () => { + const elsewhere = fixtureDir('ng-devtools-cwd-'); + writeFileSync( + join(elsewhere, 'devtools.json'), + JSON.stringify({ inspectors: { analog: false, pipes: false } }), + ); + const { tools, meta, stderr } = await mcp(['--config', 'devtools.json'], elsewhere); + expect(meta?.projectName).toBe('unknown'); + expect(stderr).toContain('source scans find nothing'); + expect(tools.some((tool) => tool.startsWith('analog-'))).toBe(false); + expect(tools).not.toContain('get-pipes'); + expect(tools).toContain('get-components'); + }, 30_000); +}); + +describe('CLI root and config', () => { + it('resolves --root before NG_DEVTOOLS_ROOT and refuses a missing folder', () => { + const cwd = fixtureDir('ng-devtools-root-'); + mkdirSync(join(cwd, 'app')); + expect(resolveCliRoot({}, {}, cwd)).toBe(cwd); + expect(resolveCliRoot({}, { NG_DEVTOOLS_ROOT: 'app' }, cwd)).toBe(join(cwd, 'app')); + expect(resolveCliRoot({ root: '.' }, { NG_DEVTOOLS_ROOT: 'app' }, cwd)).toBe(cwd); + expect(() => resolveCliRoot({ root: 'missing' }, {}, cwd)).toThrow(/does not exist/); + }); + + it('detects an Angular project by angular.json or an @angular/core dependency', () => { + const dir = fixtureDir('ng-devtools-root-'); + expect(looksLikeAngularProject(dir)).toBe(false); + writeFileSync(join(dir, 'package.json'), '{"dependencies":{"@angular/core":"^22.0.0"}}'); + expect(looksLikeAngularProject(dir)).toBe(true); + expect(looksLikeAngularProject(REPO)).toBe(true); + }); + + it('reads --config, NG_DEVTOOLS_CONFIG or the default file, and applies --read-only', () => { + const root = fixtureDir('ng-devtools-config-'); + expect(loadCliConfig({}, root, {}, root)).toEqual({}); + expect(loadCliConfig({ readOnly: true }, root, {}, root)).toEqual({ + agent: { readOnly: true }, + }); + writeFileSync(join(root, 'ng-devtools.config.json'), '{"inspectors":{"pipes":false}}'); + writeFileSync(join(root, 'other.json'), '{"agent":{"tools":{"router":false}}}'); + expect(loadCliConfig({}, root, {}, root)).toEqual({ inspectors: { pipes: false } }); + expect(loadCliConfig({}, root, { NG_DEVTOOLS_CONFIG: 'other.json' }, root)).toEqual({ + agent: { tools: { router: false } }, + }); + expect(loadCliConfig({ config: 'other.json', readOnly: true }, root, {}, root)).toEqual({ + agent: { tools: { router: false }, readOnly: true }, + }); + expect(() => loadCliConfig({ config: 'missing.json' }, root, {}, root)).toThrow( + /Can't read the config file/, + ); + writeFileSync(join(root, 'bad.json'), '{inspectors:'); + expect(() => loadCliConfig({ config: 'bad.json' }, root, {}, root)).toThrow(/not valid JSON/); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/cli.test.ts b/packages/ng-devtools/src/__tests__/cli.test.ts index 55d1a1c..a0a73f0 100644 --- a/packages/ng-devtools/src/__tests__/cli.test.ts +++ b/packages/ng-devtools/src/__tests__/cli.test.ts @@ -2,7 +2,7 @@ import { existsSync, mkdirSync, symlinkSync, writeFileSync } from 'node:fs'; import { join } from 'node:path'; import { createCac } from 'devframe/adapters/cac'; import { afterEach, describe, expect, it, vi } from 'vitest'; -import { checkReportOutDir, guardReportOutDir } from '../cli.ts'; +import { checkReportOutDir, createNgDevtoolsCli, guardReportOutDir } from '../cli.ts'; import { fixtureDir } from '../rpc/__tests__/fixture-dir.ts'; function project() { @@ -93,4 +93,33 @@ describe('ng-devtools build --outDir', () => { expect(existsSync(join(cwd, 'src/__connection.json'))).toBe(true); expect(process.exitCode).toBeUndefined(); }); + + it('keeps refusing the folder it was run from after --root moves the working directory', async () => { + const root = project(); + const shell = project(); + const from = process.cwd(); + const error = vi.spyOn(console, 'error').mockImplementation(() => {}); + vi.spyOn(console, 'log').mockImplementation(() => {}); + expect(() => checkReportOutDir(shell, { cwd: root, force: true, invokedFrom: shell })).toThrow( + /working directory or one of its parents/, + ); + process.chdir(shell); + try { + await createNgDevtoolsCli({ log: () => {} }).parse([ + 'node', + 'ng-devtools', + 'build', + '--root', + root, + '--outDir', + shell, + '--force', + ]); + } finally { + process.chdir(from); + } + expect(existsSync(join(shell, 'src/app.ts'))).toBe(true); + expect(process.exitCode).toBe(1); + expect(error.mock.calls.flat().join('\n')).toContain('working directory or one of its parents'); + }); }); diff --git a/packages/ng-devtools/src/__tests__/component-agent.test.ts b/packages/ng-devtools/src/__tests__/component-agent.test.ts new file mode 100644 index 0000000..ae17a47 --- /dev/null +++ b/packages/ng-devtools/src/__tests__/component-agent.test.ts @@ -0,0 +1,236 @@ +import { createHostContext } from 'devframe/node'; +import { describe, expect, it, vi } from 'vitest'; +import ngDevtools from '../devframe.ts'; +import type { ComponentDetail, LiveComponentNode } from '../types.ts'; + +async function boot() { + const host = { + mountStatic: () => {}, + resolveOrigin: () => 'http://localhost', + getStorageDir: () => '', + }; + const ctx = await createHostContext({ cwd: process.cwd(), mode: 'dev', host: host as never }); + await ngDevtools.setup(ctx as never); + const push = (name: string, payload: unknown) => + ctx.rpc.invokeLocal(`ng-devtools:${name}` as never, ...([payload] as never)); + const call = async (tool: string, args: Record) => + ((await ctx.agent.invoke(`ng-devtools:${tool}`, args)) as { markdown: string }).markdown; + const selectedId = async () => + ( + await ( + ctx.rpc as unknown as { + sharedState: { get: (key: string) => Promise<{ value: () => { selectedId: unknown } }> }; + } + ).sharedState.get('ng-devtools:component-tree') + ).value().selectedId; + return { ctx, push, call, selectedId }; +} + +const card = (id: string): LiveComponentNode => ({ + id, + name: 'Card', + tag: 'app-card', + children: [], +}); +const roots = [{ id: 'c1', name: 'App', tag: 'app-root', children: [card('c2'), card('c3')] }]; +const detailOf = (id: string): ComponentDetail => ({ + id, + name: 'Card', + tag: 'app-card', + path: 'app-root > app-card', + inputs: [{ name: 'title', prop: 'title', value: 'Rome' }], + outputs: [], + properties: [{ name: 'loading', prop: 'loading', value: false, kind: 'signal' }], + listeners: [], + directives: [], + dependencies: [], +}); + +type Broadcast = { method: string; args: [Record] }; + +describe('component agent tools', () => { + it('highlight selects the instance it found and lists every match', async () => { + const { ctx, push, call, selectedId } = await boot(); + await push('push-component-tree', { pageId: 'p1', roots, count: 3, detail: null }); + const sent: Broadcast[] = []; + vi.spyOn(ctx.rpc, 'broadcast').mockImplementation((async (options: Broadcast) => { + sent.push(options); + }) as never); + + const text = await call('highlight', { selector: 'Card' }); + expect(text).toMatch(/instance `c2` on page `p1`\) and selected it/); + expect(text).toContain('2 instances match `Card`: `c2`, `c3`'); + expect(sent.find((b) => b.method.endsWith('inspect-component-in-page'))?.args[0]).toEqual({ + pageId: 'p1', + id: 'c2', + }); + expect(await selectedId()).toBe('c2'); + + expect(await call('highlight', { selector: 'c3' })).not.toMatch(/instances match/); + expect(await selectedId()).toBe('c3'); + + sent.length = 0; + expect(await call('highlight', { selector: '.promo' })).toMatch(/selection did not change/); + expect(sent.some((b) => b.method.endsWith('inspect-component-in-page'))).toBe(false); + expect(await selectedId()).toBe('c3'); + }); + + it('inspect-component selects the instance and answers with the detail the page reports', async () => { + const { ctx, push, call } = await boot(); + await push('push-component-tree', { pageId: 'p1', roots, count: 3, detail: null }); + vi.spyOn(ctx.rpc, 'broadcast').mockImplementation((async (options: Broadcast) => { + if (!options.method.endsWith('inspect-component-in-page')) return; + const { pageId, id } = options.args[0] as { pageId: string; id: string }; + setTimeout( + () => void push('push-component-tree', { pageId, roots, count: 3, detail: detailOf(id) }), + 10, + ); + }) as never); + + const text = await call('inspect-component', { selector: 'c3' }); + const json = JSON.parse(text.slice(text.indexOf('{'))); + expect(json).toMatchObject({ id: 'c3', properties: [{ name: 'loading', kind: 'signal' }] }); + expect(text).not.toMatch(/instances match/); + + const again = await call('inspect-component', { selector: 'app-card' }); + expect(again).toContain('instance `c2`'); + expect(again).toContain('2 instances match `app-card`'); + }); + + it('inspect-component says when nothing matches or the page does not answer', async () => { + const { ctx, push, call } = await boot(); + expect(await call('inspect-component', { selector: 'Card' })).toMatch( + /no component tree has been reported/i, + ); + await push('push-component-tree', { pageId: 'p1', roots, count: 3, detail: null }); + vi.spyOn(ctx.rpc, 'broadcast').mockImplementation((async () => {}) as never); + expect(await call('inspect-component', { selector: 'Missing' })).toMatch( + /no component instance matches `Missing`/i, + ); + vi.useFakeTimers(); + try { + const pending = call('inspect-component', { selector: 'c2' }); + await vi.advanceTimersByTimeAsync(3100); + expect(await pending).toMatch(/did not report its detail/); + } finally { + vi.useRealTimers(); + } + }); + + it('inspect-component and highlight narrow the search to one page', async () => { + const { ctx, push, call } = await boot(); + await push('push-component-tree', { pageId: 'p1', roots, count: 3, detail: null }); + await push('push-component-tree', { + pageId: 'p2', + roots: [{ ...card('d9'), children: [] }], + count: 1, + detail: null, + }); + vi.spyOn(ctx.rpc, 'broadcast').mockImplementation((async () => {}) as never); + const everywhere = await call('highlight', { selector: 'Card' }); + expect(everywhere).toContain('3 instances match `Card`'); + expect(everywhere).toContain('`d9` (page `p2`)'); + expect(await call('highlight', { selector: 'Card', pageId: 'p2' })).toContain( + 'instance `d9` on page `p2`', + ); + expect(await call('inspect-component', { selector: 'Card', page: 'gone' })).toMatch( + /^No page `gone` is reporting a component tree\..*`p1`/, + ); + }); +}); + +describe('defer-blocks tool', () => { + it('lists the defer blocks each page reported and narrows to one page', async () => { + const { push, call } = await boot(); + const deferBlock = { + id: 'd1', + owner: { id: 'c2', name: 'Card', tag: 'app-card' }, + state: 'error', + hydration: 'not-configured', + triggers: ['on viewport'], + hasErrorBlock: true, + rootIds: [], + since: Date.now(), + }; + await push('push-component-tree', { + pageId: 'p1', + roots, + count: 3, + detail: null, + url: 'http://localhost/examples/defer', + deferBlocks: [deferBlock], + }); + await push('push-component-tree', { pageId: 'p2', roots, count: 3, detail: null }); + const all = await call('defer-blocks', {}); + expect(all).toContain('Page `p1` (http://localhost/examples/defer): 1 defer block.'); + expect(all).toContain('`d1` in Card (`c2`): failed to load'); + expect(all).toContain('Page `p2`: this page'); + expect(await call('defer-blocks', { pageId: 'p2' })).not.toContain('`p1`'); + expect(await call('defer-blocks', { page: 'p2' })).not.toContain('`p1`'); + expect(await call('defer-blocks', { page: 'gone' })).toMatch( + /^No page `gone` is reporting a component tree\./, + ); + }); +}); + +describe('component pick', () => { + it('refuses to pick when no page is connected', async () => { + const { push } = await boot(); + expect(await push('request-component-pick', {})).toMatchObject({ + ok: false, + error: expect.stringMatching(/no page is connected/i), + }); + }); + + it('asks one page to pick and selects what it picked', async () => { + const { ctx, push, selectedId } = await boot(); + await push('push-component-tree', { pageId: 'p1', roots, count: 3, detail: null }); + await push('push-component-tree', { pageId: 'p2', roots, count: 3, detail: null }); + const asked: unknown[] = []; + vi.spyOn(ctx.rpc, 'broadcast').mockImplementation((async (options: Broadcast) => { + if (!options.method.endsWith('component-pick')) return; + const { requestId, pageId } = options.args[0]; + asked.push(pageId); + await push('component-pick-result', { + requestId, + pageId, + result: { ok: true, id: 'c3', name: 'Card', tag: 'app-card' }, + }); + }) as never); + expect(await push('request-component-pick', { pageId: 'p1' })).toEqual({ + ok: true, + id: 'c3', + name: 'Card', + tag: 'app-card', + pageId: 'p1', + }); + expect(asked).toEqual(['p1']); + expect(await selectedId()).toBe('c3'); + }); + + it('passes a cancel to the page and returns its answer', async () => { + const { ctx, push } = await boot(); + await push('push-component-tree', { pageId: 'p1', roots, count: 3, detail: null }); + let requestId = ''; + const sent: Broadcast[] = []; + vi.spyOn(ctx.rpc, 'broadcast').mockImplementation((async (options: Broadcast) => { + sent.push(options); + if (!options.method.endsWith('component-pick')) return; + if (options.args[0]['cancel']) { + await push('component-pick-result', { + requestId, + result: { ok: false, error: 'Picking cancelled.' }, + }); + } else { + requestId = options.args[0]['requestId'] as string; + } + }) as never); + const pending = push('request-component-pick', { pageId: 'p1' }); + await push('cancel-component-pick', { pageId: 'p1' }); + expect(await pending).toMatchObject({ ok: false, error: 'Picking cancelled.' }); + expect(sent.map((b) => b.args[0])).toEqual([ + { requestId, pageId: 'p1' }, + { pageId: 'p1', cancel: true }, + ]); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/component-pick.test.ts b/packages/ng-devtools/src/__tests__/component-pick.test.ts new file mode 100644 index 0000000..b26d4d4 --- /dev/null +++ b/packages/ng-devtools/src/__tests__/component-pick.test.ts @@ -0,0 +1,88 @@ +// @vitest-environment jsdom +import { afterEach, describe, expect, it, vi } from 'vitest'; +import { startComponentPick } from '../component-pick.ts'; +import type { ComponentDebugNg } from '../component-tree.ts'; +import { elementById } from '../element-id.ts'; +import { POPUP_ROOT_ID } from '../panel-frame.ts'; + +class _TripCard {} + +function setup() { + document.body.innerHTML = ` + +

        Plain

        +
        `; + const root = document.querySelector('app-root')!; + const card = document.querySelector('app-trip-card')!; + const instances = new Map([ + [root, {}], + [card, new _TripCard()], + ]); + const ng: ComponentDebugNg = { getComponent: (el) => instances.get(el) ?? null }; + const highlight = { show: vi.fn(), clear: vi.fn() }; + const pick = startComponentPick({ getNg: () => ng, highlight, timeoutMs: 1000 }); + const popup = document.getElementById(POPUP_ROOT_ID)!; + return { pick, highlight, card, popup }; +} + +describe('startComponentPick', () => { + afterEach(() => { + vi.useRealTimers(); + document.body.innerHTML = ''; + }); + + it('highlights the hovered component and resolves the clicked one', async () => { + const { pick, highlight, card, popup } = setup(); + expect(popup.hasAttribute('data-picking')).toBe(true); + const button = card.querySelector('button')!; + button.dispatchEvent(new MouseEvent('mouseover', { bubbles: true })); + expect(highlight.show).toHaveBeenCalledWith(card); + + const click = new MouseEvent('click', { bubbles: true, cancelable: true }); + button.dispatchEvent(click); + const result = await pick.result; + expect(click.defaultPrevented).toBe(true); + expect(result).toMatchObject({ ok: true, name: 'TripCard', tag: 'app-trip-card' }); + expect(result.ok && elementById(result.id)).toBe(card); + expect(popup.hasAttribute('data-picking')).toBe(false); + expect(highlight.clear).toHaveBeenCalled(); + + const later = new MouseEvent('click', { bubbles: true, cancelable: true }); + button.dispatchEvent(later); + expect(later.defaultPrevented).toBe(false); + }); + + it('ignores the devtools popup and says when a click is outside any component', async () => { + const { pick, highlight } = setup(); + const fab = document.querySelector('.fab')!; + fab.dispatchEvent(new MouseEvent('mouseover', { bubbles: true })); + const onFab = new MouseEvent('click', { bubbles: true, cancelable: true }); + fab.dispatchEvent(onFab); + expect(onFab.defaultPrevented).toBe(false); + expect(highlight.show).not.toHaveBeenCalled(); + + document + .querySelector('.outside')! + .dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true })); + expect(await pick.result).toEqual({ + ok: false, + error: 'That element is not inside an Angular component.', + }); + }); + + it('ends on Escape, on cancel and after the timeout', async () => { + const first = setup(); + document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' })); + expect(await first.pick.result).toEqual({ ok: false, error: 'Picking cancelled.' }); + + const second = setup(); + second.pick.cancel(); + expect(await second.pick.result).toEqual({ ok: false, error: 'Picking cancelled.' }); + + vi.useFakeTimers(); + const third = setup(); + vi.advanceTimersByTime(1000); + expect(await third.pick.result).toEqual({ ok: false, error: 'No component was picked.' }); + expect(third.popup.hasAttribute('data-picking')).toBe(false); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/component-tree.test.ts b/packages/ng-devtools/src/__tests__/component-tree.test.ts index c32d1b5..849ee39 100644 --- a/packages/ng-devtools/src/__tests__/component-tree.test.ts +++ b/packages/ng-devtools/src/__tests__/component-tree.test.ts @@ -341,6 +341,77 @@ describe('componentDetail', () => { }); }); +describe('component properties', () => { + afterEach(() => { + document.body.innerHTML = ''; + }); + + class TripList { + trips = signalOf(['Rome', 'Lisbon']); + loading = false; + filters = { city: 'Rome', sessionToken: 'abc' }; + password = 'hunter2'; + title = signalOf('Trips'); + picked = { emit: () => {} }; + http = new Store(); + __ngContext__ = 7; + select() {} + reload = () => {}; + } + + function detailFor(instance: object, extra: Partial = {}) { + document.body.innerHTML = ``; + const host = document.querySelector('app-trip-list')!; + const { ng } = fakeNg(new Map([[host, instance]]), { + getDirectiveMetadata: () => ({ inputs: { heading: 'title' }, outputs: { picked: 'picked' } }), + getInjector: () => ({}), + ɵgetInjectorMetadata: () => ({ type: 'element', source: host }), + ...extra, + }); + return componentDetail(ng, host)!; + } + + it('lists own fields that are not inputs, outputs, services or methods, with signals unwrapped', () => { + const list = new TripList(); + const detail = detailFor(list, { + ɵgetDependenciesFromInjectable: () => ({ + dependencies: [{ token: Store, value: list.http, flags: {} }], + }), + }); + expect(detail.properties).toEqual([ + { name: 'trips', prop: 'trips', value: ['Rome', 'Lisbon'], kind: 'signal' }, + { name: 'loading', prop: 'loading', value: false }, + { name: 'filters', prop: 'filters', value: { city: 'Rome', sessionToken: '[redacted]' } }, + { name: 'password', prop: 'password', value: '[redacted]' }, + ]); + }); + + it('shows the status, value and error of a resource', () => { + const status = signalOf('error'); + const value = signalOf(undefined); + const error = signalOf(new Error('Offline')); + const detail = detailFor({ trips: { status, value, error, hasValue: () => false } }); + expect(detail.properties).toEqual([ + { + name: 'trips', + prop: 'trips', + kind: 'resource', + value: { status: 'error', error: 'Error: Offline' }, + }, + ]); + }); + + it('caps the number of properties and the size of each value', () => { + const many: Record = {}; + for (let i = 0; i < 80; i++) many[`field${i}`] = i; + many['field0'] = { list: Array.from({ length: 100 }, (_, i) => i) }; + const detail = detailFor(many); + expect(detail.properties).toHaveLength(60); + const list = (detail.properties[0].value as { list: unknown[] }).list; + expect(list.length).toBeLessThanOrEqual(31); + }); +}); + describe('element ids', () => { it('differ between page loads, so a stale selection matches nothing', async () => { const el = document.createElement('app-card'); diff --git a/packages/ng-devtools/src/__tests__/config.test.ts b/packages/ng-devtools/src/__tests__/config.test.ts index 6432aa2..1a00057 100644 --- a/packages/ng-devtools/src/__tests__/config.test.ts +++ b/packages/ng-devtools/src/__tests__/config.test.ts @@ -1,10 +1,11 @@ import { createHostContext } from 'devframe/node'; -import { afterEach, describe, expect, it } from 'vitest'; +import { afterEach, describe, expect, it, vi } from 'vitest'; import { AGENT_INSPECTOR, NG_DEVTOOLS_INSPECTORS, RPC_INSPECTOR, agentAllowed, + ngDevtoolsConfigProblems, pickNgDevtoolsConfig, resolveNgDevtoolsConfig, summarizeNgDevtoolsConfig, @@ -15,7 +16,7 @@ import { initNgDevtoolsHub } from '../hub.ts'; import { makeProject } from './analog-fixture.ts'; import { isSecretKey, setRedaction } from '../forms-privacy.ts'; -const SHARED_RPC = ['build-meta']; +const SHARED_RPC = ['build-meta', 'report-page-visibility', 'list-pages']; async function boot(config?: NgDevtoolsConfig) { const host = { @@ -143,6 +144,7 @@ describe('resolveNgDevtoolsConfig', () => { formTimeline: 200, httpCalls: 200, changeLog: 200, + cdCycles: 200, }); expect( resolveNgDevtoolsConfig({ @@ -152,6 +154,7 @@ describe('resolveNgDevtoolsConfig', () => { formTimeline: 99.6, httpCalls: Number.NaN, changeLog: '500', + cdCycles: 5, }, }).limits, ).toEqual({ @@ -160,6 +163,7 @@ describe('resolveNgDevtoolsConfig', () => { formTimeline: 100, httpCalls: 200, changeLog: 200, + cdCycles: 10, }); expect(resolveNgDevtoolsConfig({ limits: { refreshMs: 60_000 } }).limits.refreshMs).toBe(8000); }); @@ -347,3 +351,56 @@ describe('hub', () => { function offAll() { return Object.fromEntries(NG_DEVTOOLS_INSPECTORS.map((key) => [key, false])); } + +describe('ngDevtoolsConfigProblems', () => { + it('reports nothing for the defaults, a valid config and its own resolved output', () => { + expect(ngDevtoolsConfigProblems(undefined)).toEqual([]); + expect(ngDevtoolsConfigProblems({})).toEqual([]); + const valid = { + inspectors: { signals: false }, + agent: { readOnly: true, tools: { router: false } }, + actions: { ngrx: false }, + redaction: { secretNames: ['passport'], unmask: ['pin'] }, + limits: { refreshMs: 1000 }, + }; + expect(ngDevtoolsConfigProblems(valid)).toEqual([]); + expect(ngDevtoolsConfigProblems(resolveNgDevtoolsConfig(valid))).toEqual([]); + const hubOptions = { base: '/x/', auth: false, inspectors: {} }; + expect(ngDevtoolsConfigProblems(pickNgDevtoolsConfig(hubOptions).config)).toEqual([]); + }); + + it('names unknown keys with a suggestion, wrong types and clamped limits', () => { + const problems = ngDevtoolsConfigProblems({ + actions: 'false', + agent: { readonly: true }, + inspectors: { form: false, route: false, http: 'no' }, + redaction: { secretNames: 'passport' }, + limits: { refreshMs: 100, navigations: 'many' }, + inspector: {}, + }); + expect(problems).toEqual([ + 'Unknown option `inspector` was ignored. Did you mean `inspectors`?', + 'Unknown option `inspectors.form` was ignored. Did you mean `forms`?', + 'Unknown option `inspectors.route` was ignored. Did you mean `router`?', + '`inspectors.http` should be true or false, got the string "no". It was ignored, so it is on.', + 'Unknown option `agent.readonly` was ignored. Did you mean `readOnly`?', + '`actions` should be true, false or an object, got the string "false". It was ignored, so every action is allowed.', + '`redaction.secretNames` should be an array of names, got the string "passport". It was ignored.', + '`limits.refreshMs` is 100, which is outside 500 to 8000 or not whole. It was set to 500.', + '`limits.navigations` should be a number, got the string "many". It was ignored, so it is 50.', + ]); + expect(ngDevtoolsConfigProblems({ agent: { readOnly: 'true' } })).toEqual([ + '`agent.readOnly` should be true or false, got the string "true". It was ignored, so it is off.', + ]); + }); + + it('prints one warning from createNgDevtools and none for a clean config', () => { + const warn = vi.spyOn(console, 'warn').mockImplementation(() => {}); + createNgDevtools({ inspectors: { signals: false } }); + expect(warn).not.toHaveBeenCalled(); + createNgDevtools({ agent: { readonly: true } } as never); + expect(warn).toHaveBeenCalledTimes(1); + expect(warn.mock.calls[0][0]).toMatch(/^\[ng-devtools\] The devtools config has a problem:/); + warn.mockRestore(); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/defer-blocks.test.ts b/packages/ng-devtools/src/__tests__/defer-blocks.test.ts new file mode 100644 index 0000000..88e36c4 --- /dev/null +++ b/packages/ng-devtools/src/__tests__/defer-blocks.test.ts @@ -0,0 +1,192 @@ +// @vitest-environment jsdom +import { afterEach, describe, expect, it } from 'vitest'; +import { createDeferTracker, type DeferDebugNg } from '../defer-blocks.ts'; +import { elementById } from '../element-id.ts'; +import { deferBlocksText, toComponentPage } from '../rpc/component-tools.ts'; +import type { ComponentPage, DeferBlockInfo } from '../types.ts'; + +class _TripReviews {} + +function page() { + document.body.innerHTML = ` + +
        +         `; + const root = document.querySelector('app-root')!; + const reviews = document.querySelector('app-trip-reviews')!; + const anchor = document.createComment('container'); + reviews.appendChild(anchor); + const lazy = document.createComment('container'); + reviews.appendChild(lazy); + const instances = new Map([ + [root, {}], + [reviews, new _TripReviews()], + ]); + return { root, reviews, anchor, lazy, instances }; +} + +const block = (overrides: Record) => ({ + type: 0, + state: 'placeholder', + incrementalHydrationState: 'not-configured', + hasErrorBlock: false, + loadingBlock: { exists: false, minimumTime: null, afterTime: null }, + placeholderBlock: { exists: true, minimumTime: 500 }, + triggers: ['on viewport'], + rootNodes: [], + ...overrides, +}); + +describe('createDeferTracker', () => { + afterEach(() => { + document.body.innerHTML = ''; + }); + + it('reports nothing when Angular exposes no defer block util', () => { + const { instances } = page(); + const ng: DeferDebugNg = { getComponent: (el) => instances.get(el) ?? null }; + expect(createDeferTracker().collect(ng)).toBeUndefined(); + expect(createDeferTracker().collect(undefined)).toBeUndefined(); + }); + + it('reads defer blocks with their owner, state, triggers and root elements', () => { + const { root, reviews, anchor, lazy, instances } = page(); + const section = reviews.querySelector('section')!; + let raw: unknown[] = [ + block({ hostNode: anchor, rootNodes: [section, document.createTextNode(' ')] }), + { type: 1, items: [], hostNode: anchor, trackExpression: 'item' }, + block({ + hostNode: lazy, + state: 'complete', + incrementalHydrationState: 'dehydrated', + triggers: ['hydrate on interaction'], + hasErrorBlock: true, + loadingBlock: { exists: true, minimumTime: 500, afterTime: 100 }, + placeholderBlock: { exists: false, minimumTime: null }, + }), + ]; + const calls: Node[] = []; + const ng: DeferDebugNg = { + getComponent: (el) => instances.get(el) ?? null, + ɵgetControlFlowBlocks: (node) => { + calls.push(node); + return raw; + }, + }; + let clock = 1000; + const tracker = createDeferTracker(() => clock); + const first = tracker.collect(ng)!; + expect(calls).toEqual([root]); + expect(first).toHaveLength(2); + expect(first[0]).toMatchObject({ + owner: { name: 'TripReviews', tag: 'app-trip-reviews' }, + state: 'placeholder', + hydration: 'not-configured', + triggers: ['on viewport'], + placeholder: { minimumTime: 500 }, + since: 1000, + }); + expect(first[0].rootIds.map((id) => elementById(id))).toEqual([section]); + expect(first[1]).toMatchObject({ + state: 'complete', + hydration: 'dehydrated', + hasErrorBlock: true, + loading: { minimumTime: 500, afterTime: 100 }, + }); + expect(first[1].placeholder).toBeUndefined(); + + clock = 5000; + raw = [ + block({ hostNode: anchor }), + block({ + hostNode: lazy, + state: 'complete', + incrementalHydrationState: 'hydrated', + triggers: ['hydrate on interaction'], + }), + ]; + const second = tracker.collect(ng)!; + expect(second.map((b) => b.id)).toEqual(first.map((b) => b.id)); + expect(second[0].since).toBe(1000); + expect(second[1]).toMatchObject({ hydration: 'hydrated', since: 5000, hydratedAt: 5000 }); + }); + + it('flags hydrate never blocks and falls back to ɵgetDeferBlocks', () => { + const { anchor, instances } = page(); + const ng: DeferDebugNg = { + getComponent: (el) => instances.get(el) ?? null, + ɵgetDeferBlocks: () => [ + { ...block({ hostNode: anchor, triggers: ['hydrate never'] }), type: undefined }, + ], + }; + expect(createDeferTracker().collect(ng)).toMatchObject([ + { hydrateNever: true, hydration: 'not-configured' }, + ]); + }); +}); + +describe('deferBlocksText', () => { + const info = (overrides: Partial): DeferBlockInfo => ({ + id: 'd1', + owner: { id: 'c2', name: 'TripReviews', tag: 'app-trip-reviews' }, + state: 'complete', + hydration: 'not-configured', + triggers: ['on viewport'], + hasErrorBlock: false, + rootIds: [], + since: 0, + ...overrides, + }); + const report = (deferBlocks?: DeferBlockInfo[]): ComponentPage => ({ + pageId: 'p1', + roots: [], + count: 0, + detail: null, + reportedAt: 0, + ...(deferBlocks ? { deferBlocks } : {}), + }); + + it('flags failed blocks and blocks stuck on their placeholder', () => { + const text = deferBlocksText( + [ + report([ + info({ id: 'd1', state: 'error' }), + info({ id: 'd2', state: 'placeholder', since: 1000, triggers: ['when '] }), + info({ id: 'd3', state: 'placeholder', since: 25_000 }), + info({ id: 'd4', hydration: 'dehydrated' }), + info({ id: 'd5', hydrateNever: true, triggers: ['hydrate never'] }), + ]), + ], + 30_000, + ); + expect(text).toContain('5 defer blocks'); + expect(text).toContain('`d1` in TripReviews (`c2`): failed to load. Triggers: on viewport'); + expect(text).toContain('`d2` in TripReviews (`c2`): on its placeholder for 29s'); + expect(text).not.toContain('`d3` in'); + expect(text).toMatch(/\| `d4` .*\| still dehydrated \|/); + expect(text).toMatch(/\| `d5` .*hydrate never: the server HTML stays static/); + }); + + it('says when a page has no util, no blocks, or no page reported', () => { + expect(deferBlocksText([])).toMatch(/no component tree has been reported/i); + expect(deferBlocksText([report()])).toMatch(/exposes no defer block util/); + expect(deferBlocksText([report([])])).toMatch(/no `@defer` blocks are rendered/); + }); + + it('prints the page URL and title redacted even when the page sent them raw', () => { + const page = toComponentPage({ + pageId: 'p1', + roots: [], + count: 0, + detail: null, + url: 'http://localhost/reset?token=s3cr3tvalue123&x=1#access_token=abcdefabcdef', + title: 'Reset Bearer abcdefghijklmnop', + deferBlocks: [info({})], + }); + expect(page.url).toBe('http://localhost/reset?token=[redacted]&x=1#access_token=[redacted]'); + expect(page.title).toBe('Reset Bearer [redacted]'); + const text = deferBlocksText([page]); + expect(text).not.toContain('s3cr3tvalue123'); + expect(text).not.toContain('abcdefabcdef'); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/dom-walk.test.ts b/packages/ng-devtools/src/__tests__/dom-walk.test.ts new file mode 100644 index 0000000..ba22c58 --- /dev/null +++ b/packages/ng-devtools/src/__tests__/dom-walk.test.ts @@ -0,0 +1,25 @@ +// @vitest-environment jsdom +import { describe, expect, it } from 'vitest'; +import { parentOf, walkElements } from '../dom-walk.ts'; + +describe('walkElements', () => { + it('visits elements in document order, into open shadow roots', () => { + document.body.innerHTML = + ''; + const shell = document.querySelector('b-shell')!; + shell.attachShadow({ mode: 'open' }).innerHTML = ''; + const names = [...walkElements(document.body)].map((el) => + (el as Element).tagName.toLowerCase(), + ); + expect(names).toEqual(['body', 'a-root', 'b-shell', 'i-light', 'c-child', 'd-leaf', 'e-tail']); + const leaf = shell.shadowRoot!.querySelector('d-leaf')!; + expect(parentOf(parentOf(leaf)!)).toBe(shell); + }); + + it('includes comment nodes only when asked', () => { + document.body.innerHTML = '
        '; + expect([...walkElements(document.body)].some((n) => n.nodeType === 8)).toBe(false); + const all = [...walkElements(document.body, true)]; + expect(all.map((n) => n.nodeName)).toEqual(['BODY', 'DIV', '#comment', 'SPAN']); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/forms-collector.test.ts b/packages/ng-devtools/src/__tests__/forms-collector.test.ts index 9228112..5072d87 100644 --- a/packages/ng-devtools/src/__tests__/forms-collector.test.ts +++ b/packages/ng-devtools/src/__tests__/forms-collector.test.ts @@ -121,6 +121,8 @@ describe('forms collector', () => { expect(events).toHaveLength(10); expect(events.map((e) => e.detail)).toContain('"v14@x.io"'); expect(events.map((e) => e.detail)).not.toContain('"v0@x.io"'); + expect(h.reports().at(-1).dropped).toBeGreaterThanOrEqual(5); + expect(h.reports()[0].dropped).toBeUndefined(); }); it('records Signal Forms submits as blocked or ran', async () => { diff --git a/packages/ng-devtools/src/__tests__/forms-instrument.test.ts b/packages/ng-devtools/src/__tests__/forms-instrument.test.ts index 2d580de..c0caaeb 100644 --- a/packages/ng-devtools/src/__tests__/forms-instrument.test.ts +++ b/packages/ng-devtools/src/__tests__/forms-instrument.test.ts @@ -96,6 +96,7 @@ describe('instrumentation', () => { }); it('counts template updates per component through a chained profiler', () => { + document.body.innerHTML = ''; let profiler: ((event: number, instance: unknown) => void) | null = null; let removed = false; const ng = { @@ -124,6 +125,9 @@ describe('instrumentation', () => { counter.stop(); expect(removed).toBe(true); expect(countRenders({})).toBeNull(); + document.body.innerHTML = ''; + expect(countRenders(ng)).toBeNull(); + document.body.innerHTML = ''; }); }); diff --git a/packages/ng-devtools/src/__tests__/forms-mcp.test.ts b/packages/ng-devtools/src/__tests__/forms-mcp.test.ts index c61ffd0..3680a42 100644 --- a/packages/ng-devtools/src/__tests__/forms-mcp.test.ts +++ b/packages/ng-devtools/src/__tests__/forms-mcp.test.ts @@ -184,6 +184,30 @@ async function withForms() { } describe('forms MCP tools', () => { + it('names the reporting pages for an unknown page instead of listing every form', async () => { + const { call } = await withForms(); + for (const tool of [ + 'inspect-forms', + 'explain-form-invalid', + 'explain-field', + 'explain-submit', + 'form-payload', + 'form-history', + 'form-diff', + 'lint-forms', + 'explain-custom-control', + 'export-form', + 'wait-for-form', + ]) { + const text = await call(tool, { page: 'gone', form: 'Signup' }); + expect(text, tool).toMatch(/^No page `gone` is reporting forms\. Pages that report forms: /); + expect(text, tool).toContain('`pg1`'); + expect(text, tool).toContain('`pg2`'); + expect(text, tool).not.toContain('No form matches'); + } + expect(await call('inspect-forms', { page: 'pg1' })).toContain('Signup.form'); + }); + it('every tool says so when no page reported forms', async () => { const { call } = await boot(); for (const tool of [ @@ -422,6 +446,60 @@ describe('forms MCP tools', () => { expect(await waiting).toContain('Marker: 5'); }); + it('keeps markers valid across pages whose own counters differ, and across a reload', async () => { + const { call, push } = await boot(); + const busy = Array.from({ length: 300 }, (_, i) => ({ + formId: 'form-1@pg1', + path: 'email', + type: 'status', + detail: i % 2 ? 'VALID' : 'INVALID', + timestamp: 1000 + i, + seq: i + 1, + })); + await push('push-forms', { pageId: 'pg1', forms: [signup], events: busy }); + await push('push-forms', { pageId: 'pg2', forms: [profile], events: [] }); + const marker = Number((await call('form-history', {})).match(/Marker: (\d+)/)![1]); + expect(marker).toBeGreaterThan(0); + + const waiting = call('wait-for-form', { + form: 'Profile', + until: 'submitted', + since: marker, + timeoutMs: 3000, + }); + const filled = [ + { + formId: 'form-2@pg2', + path: 'name', + type: 'value', + detail: '"Kam"', + prev: '""', + timestamp: 5000, + seq: 1, + }, + { formId: 'form-2@pg2', path: '', type: 'submit', outcome: 'ran', timestamp: 5001, seq: 2 }, + ]; + await new Promise((resolve) => setTimeout(resolve, 150)); + await push('push-forms', { pageId: 'pg2', forms: [profile], events: filled }); + expect(await waiting).toMatch(/holds after/); + expect(await call('form-diff', { form: 'Profile', since: marker })).toContain( + '- `name` value: "" → "Kam"', + ); + const history = await call('form-history', { form: 'Profile', since: marker }); + expect(history).toContain('`name` value'); + expect(history).toContain('submit'); + + const after = Number(history.match(/Marker: (\d+)/)![1]); + await push('push-forms', { + pageId: 'pg2', + forms: [profile], + events: [{ ...filled[0], detail: '"Ada"', prev: '""', timestamp: 9000, seq: 1 }], + }); + expect(await call('form-diff', { form: 'Profile', since: after })).toContain( + '- `name` value: "" → "Ada"', + ); + }); + it('form-action and fill-form ask the right page and report refusals', async () => { const { ctx, call } = await withForms(); const seen: any[] = []; diff --git a/packages/ng-devtools/src/__tests__/forms-tools.test.ts b/packages/ng-devtools/src/__tests__/forms-tools.test.ts index 571b20d..d5fced7 100644 --- a/packages/ng-devtools/src/__tests__/forms-tools.test.ts +++ b/packages/ng-devtools/src/__tests__/forms-tools.test.ts @@ -11,6 +11,7 @@ import { isPageReport, mergePageReport, } from '../rpc/forms-tools.ts'; +import { formHistoryText } from '../rpc/forms-explain.ts'; function control(path: string, overrides: Partial = {}): FormFieldNode { return { @@ -200,6 +201,41 @@ describe('mergePageReport', () => { ).toEqual([20, 21, 22, 23, 24, 25, 26, 27, 28, 29]); }); + it('numbers events across pages, keeps numbers stable on re-push, and renumbers after a reload', () => { + const pages = new Map(); + const a = form(group([control('x')], 'VALID'), { id: 'form-1@aaaa' }); + const b = form(group([control('x')], 'VALID'), { id: 'form-1@bbbb' }); + const event = (formId: string, seq: number, timestamp: number) => ({ + formId, + path: 'x', + type: 'value' as const, + timestamp, + seq, + }); + const seqs = (state: { events: { formId: string; seq?: number }[] }) => + state.events.map((e) => `${e.formId.split('@')[1]}:${e.seq}`); + const one = [event(a.id, 1, 1), event(a.id, 2, 2)]; + mergePageReport(pages, { pageId: 'aaaa', forms: [a], events: one }, 1_000); + const both = mergePageReport( + pages, + { pageId: 'bbbb', forms: [b], events: [event(b.id, 1, 3)] }, + 1_000, + ); + expect(seqs(both)).toEqual(['aaaa:1', 'aaaa:2', 'bbbb:3']); + const again = mergePageReport( + pages, + { pageId: 'aaaa', forms: [a], events: [...one, event(a.id, 3, 4)] }, + 1_000, + ); + expect(seqs(again)).toEqual(['aaaa:1', 'aaaa:2', 'bbbb:3', 'aaaa:4']); + const reloaded = mergePageReport( + pages, + { pageId: 'aaaa', forms: [a], events: [event(a.id, 1, 10)] }, + 1_000, + ); + expect(seqs(reloaded)).toEqual(['bbbb:3', 'aaaa:5']); + }); + it('keeps each open page, drops pages that stopped reporting, and orders events', () => { const pages = new Map(); const a = form(group([control('x')], 'VALID'), { id: 'form-1@aaaa' }); @@ -232,8 +268,41 @@ describe('mergePageReport', () => { reportedAt: 0, setupErrors: [], instrumented: [], + dropped: {}, }); }); + + it('counts dropped events per page, from the page and from the combined limit', () => { + const a = form(group([control('x')], 'VALID'), { id: 'form-1@aaaa' }); + const b = form(group([control('y')], 'VALID'), { id: 'form-1@bbbb' }); + const events = (formId: string, from: number) => + Array.from({ length: 6 }, (_, i) => ({ + formId, + path: 'x', + type: 'value' as const, + timestamp: from + i, + })); + const pages = new Map(); + mergePageReport( + pages, + { pageId: 'aaaa', forms: [a], events: events(a.id, 0), dropped: 4 }, + 1_000, + 10, + ); + const state = mergePageReport( + pages, + { pageId: 'bbbb', forms: [b], events: events(b.id, 100) }, + 1_000, + 10, + ); + expect(state.events).toHaveLength(10); + expect(state.dropped).toEqual({ aaaa: 6 }); + expect(formHistoryText(state, { form: 'form-1@aaaa' })).toContain( + '6 older form events were dropped', + ); + expect(formHistoryText(state, { form: 'form-1@bbbb' })).not.toContain('dropped'); + expect(isPageReport({ pageId: 'p', forms: [], events: [], dropped: 'x' })).toBe(false); + }); }); describe('value hiding and resource size', () => { diff --git a/packages/ng-devtools/src/__tests__/forms.test.ts b/packages/ng-devtools/src/__tests__/forms.test.ts index a391671..6b56c18 100644 --- a/packages/ng-devtools/src/__tests__/forms.test.ts +++ b/packages/ng-devtools/src/__tests__/forms.test.ts @@ -730,6 +730,33 @@ describe('secret parents and disabled children', () => { expect(JSON.stringify(seen)).not.toMatch(/new-secret|sk-2/); }); + it('flags children of a secret-named group as redacted by their parent', () => { + const form = new FormGroup({ + passwords: new FormGroup({ first: new FormControl('a1') }), + apiKeys: new FormArray([new FormControl('sk-1')]), + }); + const [passwords, apiKeys] = serializeControl(form).children!; + expect(passwords.redacted).toBe('key'); + expect(passwords.children![0]).toMatchObject({ value: '[redacted]', redacted: 'parent' }); + expect(apiKeys.children![0]).toMatchObject({ value: '[redacted]', redacted: 'parent' }); + }); + + it('flags Signal Forms children of a secret-named field, created or not', () => { + const first = fakeField({ value: 'a1' }); + const passwords = fakeField({ value: { first: 'a1', second: 'a2' }, children: { first } }); + const root = fakeField({ + value: { passwords: { first: 'a1', second: 'a2' }, token: 't' }, + children: { passwords }, + }); + const [group, token] = serializeField(root.node).children!; + expect(group.redacted).toBe('key'); + expect(group.children!.map((c) => [c.key, c.value, c.redacted])).toEqual([ + ['first', '[redacted]', 'parent'], + ['second', '[redacted]', 'parent'], + ]); + expect(token).toMatchObject({ materialized: false, value: '[redacted]', redacted: 'key' }); + }); + it('leaves disabled children out of a group value event, like form.value', () => { const form = new FormGroup({ a: new FormControl('x'), b: new FormControl('y') }); form.controls.b.disable(); diff --git a/packages/ng-devtools/src/__tests__/http-cache-key.test.ts b/packages/ng-devtools/src/__tests__/http-cache-key.test.ts new file mode 100644 index 0000000..4c839a1 --- /dev/null +++ b/packages/ng-devtools/src/__tests__/http-cache-key.test.ts @@ -0,0 +1,70 @@ +// @vitest-environment jsdom +import '@angular/compiler'; +import { createHash } from 'node:crypto'; +import { TransferState, makeStateKey } from '@angular/core'; +import { TestBed } from '@angular/core/testing'; +import { + HttpClient, + HttpParams, + HttpRequest, + provideHttpClient, + ɵwithHttpTransferCache as withHttpTransferCache, +} from '@angular/common/http'; +import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing'; +import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing'; +import { firstValueFrom } from 'rxjs'; +import { afterEach, describe, expect, it } from 'vitest'; +import { sha256Hex, transferCacheKeys } from '../http-cache-key.ts'; + +try { + TestBed.initTestEnvironment(BrowserTestingModule, platformBrowserTesting()); +} catch { + // already initialized in this worker +} + +afterEach(() => TestBed.resetTestingModule()); + +describe('sha256Hex', () => { + it('matches node:crypto', () => { + for (const text of ['', 'abc', 'GET\0json\0/api\0\0page=1', 'é'.repeat(80)]) { + expect(sha256Hex(text)).toBe(createHash('sha256').update(text).digest('hex')); + } + }); +}); + +describe('transferCacheKeys', () => { + const cachedBy = async (stored: HttpRequest, sent: { page: number }) => { + TestBed.configureTestingModule({ + providers: [provideHttpClient(), provideHttpClientTesting(), withHttpTransferCache({})], + }); + const state = TestBed.inject(TransferState); + for (const key of transferCacheKeys(stored)) { + state.set(makeStateKey(key), { + b: { from: 'cache' }, + h: {}, + s: 200, + st: 'OK', + u: '/api/feed', + }); + } + const http = TestBed.inject(HttpClient); + const answer = firstValueFrom(http.get('/api/feed', { params: sent })); + const pending = TestBed.inject(HttpTestingController).match('/api/feed?page=' + sent.page); + pending.forEach((req) => req.flush({ from: 'network' })); + return answer; + }; + + it('computes the key Angular stores a request under', async () => { + const stored = new HttpRequest('GET', '/api/feed', null, { + params: new HttpParams({ fromObject: { page: 1 } }), + }); + expect(await cachedBy(stored, { page: 1 })).toEqual({ from: 'cache' }); + }); + + it('gives a request with other params a different key', async () => { + const stored = new HttpRequest('GET', '/api/feed', null, { + params: new HttpParams({ fromObject: { page: 1 } }), + }); + expect(await cachedBy(stored, { page: 2 })).toEqual({ from: 'network' }); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/http-server.test.ts b/packages/ng-devtools/src/__tests__/http-server.test.ts index cfa1921..7760b7c 100644 --- a/packages/ng-devtools/src/__tests__/http-server.test.ts +++ b/packages/ng-devtools/src/__tests__/http-server.test.ts @@ -3,7 +3,7 @@ import { afterEach, describe, expect, it, vi } from 'vitest'; import type { NgDevtoolsConfig } from '../config.ts'; import ngDevtools, { createNgDevtools } from '../devframe.ts'; import { httpRegistry, type HttpRule } from '../http-rules.ts'; -import type { HttpState } from '../types.ts'; +import type { HttpPayloadState, HttpState } from '../types.ts'; async function boot(config?: NgDevtoolsConfig) { const host = { @@ -18,15 +18,20 @@ async function boot(config?: NgDevtoolsConfig) { `ng-devtools:${name}` as never, ...([payload] as never), ) as Promise; - const state = async () => + const shared = (key: string) => ( - await ( - ctx.rpc as unknown as { - sharedState: { get: (key: string) => Promise<{ value: () => HttpState }> }; - } - ).sharedState.get('ng-devtools:http') - ).value(); - return { push, state }; + ctx.rpc as unknown as { + sharedState: { + get: (key: string) => Promise<{ + value: () => unknown; + on: (event: 'updated', fn: () => void) => () => void; + }>; + }; + } + ).sharedState.get(`ng-devtools:${key}`); + const state = async () => (await shared('http')).value() as HttpState; + const payloads = async () => (await shared('http-payloads')).value() as HttpPayloadState; + return { push, state, payloads, shared }; } const report = (pageId: string, extra: Record = {}) => ({ @@ -44,7 +49,7 @@ describe('push-http', () => { it('keeps pages in first-seen order and keeps the payload between pushes', async () => { vi.useFakeTimers({ toFake: ['Date'] }); - const { push, state } = await boot(); + const { push, state, payloads } = await boot(); vi.setSystemTime(1000); expect( await push('push-http', report('a', { payload: { found: true, size: 2, entries: [] } })), @@ -64,19 +69,158 @@ describe('push-http', () => { initialUrl: '/a', firstSeenAt: 1000, reportedAt: 3000, - payload: { found: true, size: 2 }, }); + expect(pages[0]).not.toHaveProperty('payload'); expect(pages[1]).toMatchObject({ firstSeenAt: 2000, reportedAt: 4000 }); + expect((await payloads()).pages).toMatchObject({ + a: { found: true, size: 2 }, + b: { found: false }, + }); }); it('asks for the payload of an unknown page without listing it as not server rendered', async () => { - const { push, state } = await boot(); + const { push, state, payloads } = await boot(); expect(await push('push-http', report('c'))).toEqual({ needPayload: true }); expect((await state()).pages).toEqual([]); expect( await push('push-http', report('c', { payload: { found: true, size: 1, entries: [] } })), ).toEqual({ needPayload: false }); - expect((await state()).pages).toMatchObject([{ pageId: 'c', payload: { found: true } }]); + expect((await state()).pages).toMatchObject([{ pageId: 'c' }]); + expect((await payloads()).pages['c']).toMatchObject({ found: true }); + }); + + const call = (id: string) => ({ + id, + url: `/api/${id}`, + method: 'GET', + status: 200, + durationMs: 1, + side: 'client', + cacheHit: false, + faulted: false, + at: 1, + }); + const payload = { found: true, size: 1, entries: [] }; + + it('adds the calls of a delta push and keeps the latest at the limit', async () => { + const { push, state } = await boot({ limits: { httpCalls: 10 } }); + const first = Array.from({ length: 8 }, (_, i) => call(`c${i}`)); + await push('push-http', report('a', { payload, calls: first, full: true })); + const next = Array.from({ length: 4 }, (_, i) => call(`d${i}`)); + await push('push-http', report('a', { calls: next, full: false, dropped: 2 })); + const page = (await state()).pages[0]; + expect(page.calls.map((c) => c.id)).toEqual([ + 'c2', + 'c3', + 'c4', + 'c5', + 'c6', + 'c7', + 'd0', + 'd1', + 'd2', + 'd3', + ]); + expect(page.dropped).toBe(2); + }); + + it('does not rebroadcast payloads when calls change, and a ping changes nothing', async () => { + const { push, shared } = await boot(); + await push('push-http', report('a', { payload, full: true })); + const httpUpdates = vi.fn(); + const payloadUpdates = vi.fn(); + (await shared('http')).on('updated', httpUpdates); + (await shared('http-payloads')).on('updated', payloadUpdates); + await push('push-http', report('a', { calls: [call('x')], full: false })); + expect(httpUpdates).toHaveBeenCalledTimes(1); + expect(payloadUpdates).not.toHaveBeenCalled(); + expect(await push('ping-http', 'a')).toEqual({ known: true }); + expect(await push('ping-http', 'zz')).toEqual({ known: false }); + expect(httpUpdates).toHaveBeenCalledTimes(1); + }); + + it('forgets the payload with the page', async () => { + const { push, state, payloads } = await boot(); + await push('push-http', report('a', { payload, full: true })); + await push('forget-http-page', 'a'); + expect((await state()).pages).toEqual([]); + expect((await payloads()).pages).toEqual({}); + }); + + it('counts SSR calls dropped at the limit and resets the count on clear', async () => { + vi.useFakeTimers(); + const { push, state } = await boot({ limits: { httpCalls: 10 } }); + for (let i = 0; i < 13; i++) httpRegistry().record?.({ ...call(`s${i}`), side: 'server' }); + await vi.advanceTimersByTimeAsync(150); + expect((await state()).serverCalls).toHaveLength(10); + expect((await state()).serverDropped).toBe(3); + await push('push-http', report('a', { payload, calls: [call('x')], full: true, dropped: 4 })); + await push('clear-http-calls', undefined); + const cleared = await state(); + expect(cleared.serverDropped).toBe(0); + expect(cleared.pages[0]).toMatchObject({ calls: [], dropped: 0 }); + httpRegistry().dispose?.(); + }); +}); + +describe('http redaction', () => { + afterEach(() => { + vi.useRealTimers(); + httpRegistry().dispose?.(); + }); + + const call = (url: string, extra: Record = {}) => ({ + id: 'c1', + url, + method: 'GET', + status: 0, + durationMs: 1, + side: 'client', + cacheHit: false, + faulted: false, + at: 1, + ...extra, + }); + + it('redacts client call URLs, page URLs and errors like the router does', async () => { + const { push, state } = await boot({ redaction: { secretNames: ['tenant'] } }); + await push( + 'push-http', + report('a', { + url: '/callback?code=abc123&tab=1', + initialUrl: '/callback?code=abc123&tab=1', + payload: { found: false, size: 0, entries: [] }, + calls: [ + call('/api/files?access_token=s3cr3t&tenant=acme&page=2', { + pageUrl: '/callback?code=abc123', + error: 'Http failure response for /api/files?access_token=s3cr3t: 0 Unknown Error', + }), + ], + }), + ); + const [page] = (await state()).pages; + expect(page.url).toBe('/callback?code=[redacted]&tab=1'); + expect(page.initialUrl).toBe('/callback?code=[redacted]&tab=1'); + expect(page.calls[0]).toMatchObject({ + url: '/api/files?access_token=[redacted]&tenant=[redacted]&page=2', + pageUrl: '/callback?code=[redacted]', + }); + expect(page.calls[0].error).not.toContain('s3cr3t'); + }); + + it('redacts SSR calls before they reach the timeline', async () => { + vi.useFakeTimers(); + const { state } = await boot(); + httpRegistry().record?.( + call('http://api.local/items?sig=abcdef&id=7', { + side: 'server', + pageUrl: '/reset?token=xyz789', + }) as never, + ); + await vi.advanceTimersByTimeAsync(150); + expect((await state()).serverCalls).toMatchObject([ + { url: 'http://api.local/items?sig=[redacted]&id=7', pageUrl: '/reset?token=[redacted]' }, + ]); }); }); diff --git a/packages/ng-devtools/src/__tests__/http.test.ts b/packages/ng-devtools/src/__tests__/http.test.ts index f911bcd..385883e 100644 --- a/packages/ng-devtools/src/__tests__/http.test.ts +++ b/packages/ng-devtools/src/__tests__/http.test.ts @@ -1,16 +1,30 @@ // @vitest-environment jsdom import '@angular/compiler'; import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; -import { ApplicationRef, Injector, PLATFORM_ID, runInInjectionContext } from '@angular/core'; +import { + ApplicationRef, + createEnvironmentInjector, + Injector, + PLATFORM_ID, + runInInjectionContext, + type EnvironmentInjector, +} from '@angular/core'; import { HttpHeaders, + HttpParams, HttpRequest, HttpResponse, type HttpEvent, type HttpHandlerFn, } from '@angular/common/http'; import { Observable } from 'rxjs'; -import { ngDevtoolsHttpInterceptor, parseBody, resetTransferEntries } from '../http.ts'; +import { transferCacheKeys } from '../http-cache-key.ts'; +import { + ngDevtoolsHttpInterceptor, + parseBody, + provideNgDevtoolsHttp, + resetTransferEntries, +} from '../http.ts'; import { appIdOf, isHydrationMessage, scanHydration } from '../http-hydration.ts'; import { attachHttp } from '../http-overlay.ts'; import { @@ -27,6 +41,7 @@ import { type HttpRule, } from '../http-rules.ts'; import { decodePayload, sanitizeHydration, sanitizePayload } from '../http-payload.ts'; +import { setRedaction } from '../forms-privacy.ts'; const rule = (overrides: Partial = {}): HttpRule => ({ id: 'r1', @@ -95,13 +110,31 @@ describe('sanitizeRules', () => { enabled: true, body: '{}', }); - expect(r.status).toBeUndefined(); + expect(r.status).toBe(200); expect(r.delayMs).toBe(MAX_DELAY_MS); }); + it('gives a body-only rule status 200 and drops rules that change nothing', () => { + const rules = sanitizeRules([ + { id: 'body', pattern: '/a', body: '{"a":1}' }, + { id: 'none', pattern: '/b' }, + { id: 'blank', pattern: '/c', body: ' ', status: 42 }, + { id: 'slow', pattern: '/d', delayMs: 300 }, + ]); + expect(rules.map((r) => [r.id, r.status, r.delayMs])).toEqual([ + ['body', 200, undefined], + ['slow', undefined, 300], + ]); + }); + it('rejects bad methods and caps the rule count', () => { - expect(sanitizeRules([{ pattern: '/a', method: 'G T' }])[0].method).toBeUndefined(); - const many = Array.from({ length: MAX_RULES + 10 }, (_, i) => ({ pattern: `/p${i}` })); + expect( + sanitizeRules([{ pattern: '/a', method: 'G T', status: 500 }])[0].method, + ).toBeUndefined(); + const many = Array.from({ length: MAX_RULES + 10 }, (_, i) => ({ + pattern: `/p${i}`, + status: 500, + })); expect(sanitizeRules(many)).toHaveLength(MAX_RULES); }); }); @@ -117,6 +150,22 @@ describe('push-http report sanitizers', () => { expect(sanitizeCalls(many)).toHaveLength(MAX_CALLS); }); + it('keeps the rule notes and the cancelled flag', () => { + const [call] = sanitizeCalls([ + { + id: 'c1', + url: '/a', + method: 'GET', + cancelled: true, + mocked: 'yes', + delayMs: 300, + rulePattern: '/a*', + }, + ]); + expect(call).toMatchObject({ cancelled: true, delayMs: 300, rulePattern: '/a*' }); + expect(call.mocked).toBeUndefined(); + }); + it('falls back for malformed payloads and hydration stats', () => { expect(sanitizePayload(null)).toEqual({ found: false, size: 0, entries: [] }); expect(sanitizePayload({ found: true, entries: [1, { key: 'k', value: 2 }] }).entries).toEqual([ @@ -308,6 +357,10 @@ describe('interceptor', () => { const injector = Injector.create({ providers: [{ provide: PLATFORM_ID, useValue: 'browser' }] }); const run = (req: HttpRequest, next: HttpHandlerFn) => runInInjectionContext(injector, () => ngDevtoolsHttpInterceptor(req, next)); + const stateScript = (req: HttpRequest) => + ``; const later = (body: unknown): HttpHandlerFn => () => @@ -332,13 +385,105 @@ describe('interceptor', () => { vi.advanceTimersByTime(100); sub.unsubscribe(); expect(httpRegistry().calls).toEqual([ - expect.objectContaining({ error: 'cancelled during the delay', status: 0, faulted: true }), + expect.objectContaining({ + error: 'cancelled during the delay', + status: 0, + cancelled: true, + faulted: false, + delayMs: 1000, + ruleId: 'r1', + rulePattern: '/api/products', + }), ]); }); + it('marks a request cancelled before its response', () => { + const sub = run(new HttpRequest('GET', '/api/search?q=a'), later([])).subscribe(); + sub.unsubscribe(); + expect(httpRegistry().calls).toEqual([ + expect.objectContaining({ status: 0, cancelled: true, error: 'cancelled', faulted: false }), + ]); + }); + + it('does not mark a failed request as cancelled', async () => { + storeRules([rule({ status: 503 })]); + await new Promise((resolve) => + run(new HttpRequest('GET', '/api/products'), later([])).subscribe({ error: () => resolve() }), + ); + const [call] = httpRegistry().calls ?? []; + expect(call).toMatchObject({ status: 503, faulted: true }); + expect(call.cancelled).toBeUndefined(); + expect(call.mocked).toBeUndefined(); + }); + + it('tags delayed, mocked and faulted calls apart', async () => { + vi.useFakeTimers(); + storeRules([ + rule({ id: 'slow', pattern: '/slow', status: undefined, delayMs: 50 }), + rule({ id: 'mock', pattern: '/mock', status: 201, body: '{"ok":true}' }), + rule({ id: 'fail', pattern: '/fail', status: 500 }), + ]); + for (const url of ['/slow', '/mock', '/fail']) { + run(new HttpRequest('GET', url), later([])).subscribe({ error: () => {} }); + } + await vi.advanceTimersByTimeAsync(100); + const byUrl = Object.fromEntries((httpRegistry().calls ?? []).map((c) => [c.url, c])); + expect(byUrl['/slow']).toMatchObject({ status: 200, delayMs: 50, faulted: false }); + expect(byUrl['/slow'].mocked).toBeUndefined(); + expect(byUrl['/mock']).toMatchObject({ status: 201, mocked: true, faulted: false }); + expect(byUrl['/mock'].delayMs).toBeUndefined(); + expect(byUrl['/fail']).toMatchObject({ status: 500, faulted: true, rulePattern: '/fail' }); + }); + + it('answers a body-only rule with a 200 mock', async () => { + storeRules([rule({ status: undefined, body: '{"items":[]}' })]); + let body: unknown; + await new Promise((resolve) => + run(new HttpRequest('GET', '/api/products'), () => { + throw new Error('the request should not reach the backend'); + }).subscribe({ + next: (event) => { + if (event instanceof HttpResponse) body = event.body; + }, + complete: resolve, + }), + ); + expect(body).toEqual({ items: [] }); + expect(httpRegistry().calls).toEqual([ + expect.objectContaining({ status: 200, mocked: true, faulted: false }), + ]); + }); + + it('ignores a pattern-only rule', async () => { + storeRules([rule({ status: undefined }), rule({ id: 'r2', status: 418 })]); + await new Promise((resolve) => + run(new HttpRequest('GET', '/api/products'), later([])).subscribe({ + error: () => resolve(), + complete: resolve, + }), + ); + expect(httpRegistry().calls).toEqual([ + expect.objectContaining({ status: 418, faulted: true, ruleId: 'r2' }), + ]); + }); + + it('counts the calls it drops at the limit', () => { + vi.useFakeTimers(); + const registry = httpRegistry(); + registry.maxCalls = 10; + delete registry.dropped; + for (let i = 0; i < 12; i++) { + run(new HttpRequest('GET', `/api/${i}`), later([])).subscribe(); + vi.advanceTimersByTime(10); + } + expect(registry.calls?.map((c) => c.url).slice(0, 2)).toEqual(['/api/2', '/api/3']); + expect(registry.dropped).toBe(2); + delete registry.maxCalls; + delete registry.dropped; + }); + it('counts a TransferState match as a cache hit once', async () => { - document.body.innerHTML = - ''; + document.body.innerHTML = stateScript(new HttpRequest('GET', '/api/products')); const get = () => new Promise((resolve) => run(new HttpRequest('GET', '/api/products'), later([])).subscribe({ @@ -350,9 +495,24 @@ describe('interceptor', () => { expect(httpRegistry().calls?.map((c) => c.cacheHit)).toEqual([true, false]); }); + it('does not count a request with other params as a cache hit', async () => { + const page = (n: number) => + new HttpRequest('GET', '/api/feed', null, { + params: new HttpParams({ fromObject: { page: n } }), + }); + document.body.innerHTML = stateScript(page(1)); + const get = (req: HttpRequest) => + new Promise((resolve) => run(req, later([])).subscribe({ complete: resolve })); + await get(page(2)); + await get(page(1)); + expect(httpRegistry().calls?.map((c) => [c.url, c.cacheHit])).toEqual([ + ['/api/feed?page=2', false], + ['/api/feed?page=1', true], + ]); + }); + it('does not tag a payload URL as a cache hit when Angular would skip the cache', async () => { - document.body.innerHTML = - ''; + document.body.innerHTML = stateScript(new HttpRequest('GET', '/api/trips')); const get = (req: HttpRequest, via = run) => new Promise((resolve) => via(req, later([])).subscribe({ complete: resolve })); await get( @@ -425,6 +585,128 @@ describe('attachHttp', () => { }); }); +describe('attachHttp pushes', () => { + const call = (id: string) => ({ + id, + url: `/api/${id}`, + method: 'GET', + status: 200, + durationMs: 1, + side: 'client' as const, + cacheHit: false, + faulted: false, + at: 1, + }); + + afterEach(() => { + vi.useRealTimers(); + httpRegistry().calls = []; + delete httpRegistry().dropped; + }); + + it('sends only new calls, nothing while idle, then a ping', async () => { + vi.useFakeTimers(); + const sent: { name: string; report: unknown }[] = []; + const my = { + rpc: { + call: async (name: string, report?: unknown) => { + if (name !== 'get-http-rules') sent.push({ name, report }); + if (name === 'get-http-rules') return []; + if (name === 'ping-http') return { known: true }; + return { needPayload: false }; + }, + register: () => {}, + }, + }; + httpRegistry().calls = [call('a'), call('b')]; + const http = attachHttp(my, 'p1'); + await http.push(); + httpRegistry().calls!.push(call('c')); + await http.push(); + await http.push(); + vi.advanceTimersByTime(9000); + await http.push(); + const ids = (entry: { report: unknown }) => + ((entry.report as { calls: { id: string }[] }).calls ?? []).map((c) => c.id); + expect(sent.map((s) => s.name)).toEqual(['push-http', 'push-http', 'ping-http']); + expect(sent[0].report).toMatchObject({ full: true }); + expect(ids(sent[0])).toEqual(['a', 'b']); + expect(sent[1].report).toMatchObject({ full: false }); + expect(sent[1].report).not.toHaveProperty('payload'); + expect(ids(sent[1])).toEqual(['c']); + expect(sent[2].report).toBe('p1'); + }); + + it('resends everything when the server forgot the page', async () => { + vi.useFakeTimers(); + const sent: Record[] = []; + const my = { + rpc: { + call: async (name: string, report?: unknown) => { + if (name === 'push-http') sent.push(report as Record); + if (name === 'ping-http') return { known: false }; + return name === 'get-http-rules' ? [] : { needPayload: false }; + }, + register: () => {}, + }, + }; + httpRegistry().calls = [call('a')]; + const http = attachHttp(my, 'p1'); + await http.push(); + vi.advanceTimersByTime(9000); + await http.push(); + await http.push(); + expect(sent).toHaveLength(2); + expect(sent[1]).toMatchObject({ full: true, calls: [{ id: 'a' }] }); + expect(sent[1]).toHaveProperty('payload'); + }); +}); + +describe('attachHttp redaction', () => { + afterEach(() => { + httpRegistry().calls = []; + setRedaction(); + }); + + it('redacts call URLs and errors before they leave the page', async () => { + setRedaction({ secretNames: ['tenant'] }); + const sent: Record[] = []; + const my = { + rpc: { + call: async (name: string, report?: unknown) => { + if (name === 'push-http') sent.push(report as Record); + return name === 'get-http-rules' ? [] : { needPayload: false }; + }, + register: () => {}, + }, + }; + httpRegistry().calls = [ + { + id: 'c', + url: '/api/me?api_key=k3y&tenant=acme', + method: 'GET', + status: 401, + durationMs: 1, + side: 'client', + cacheHit: false, + faulted: false, + pageUrl: '/login?next=%2Fhome', + at: 1, + error: 'Http failure response for /api/me?api_key=k3y: 401 Unauthorized', + }, + ]; + await attachHttp(my, 'p1').push(); + expect(sent[0]['calls']).toEqual([ + expect.objectContaining({ + url: '/api/me?api_key=[redacted]&tenant=[redacted]', + pageUrl: '/login?next=%2Fhome', + error: expect.not.stringContaining('k3y'), + }), + ]); + expect(httpRegistry().calls?.[0].url).toBe('/api/me?api_key=k3y&tenant=acme'); + }); +}); + describe('hydration scanner', () => { it('reuses the DOM scan until the hydration counters change', async () => { const { createHydrationScanner } = await import('../http-overlay.ts'); @@ -440,3 +722,30 @@ describe('hydration scanner', () => { expect(calls).toBe(4); }); }); + +describe('hydration warning capture', () => { + const originals = { warn: console.warn, error: console.error }; + + afterEach(() => { + console.warn = originals.warn; + console.error = originals.error; + delete httpRegistry().warnings; + }); + + it('forwards arguments that cannot be turned into text', () => { + const seen: unknown[][] = []; + console.warn = (...args: unknown[]) => void seen.push(args); + delete httpRegistry().warnings; + createEnvironmentInjector([provideNgDevtoolsHttp()], Injector.NULL as EnvironmentInjector); + const bare = Object.create(null); + const throwing = { + toString() { + throw new Error('no text'); + }, + }; + expect(() => console.warn(bare)).not.toThrow(); + expect(() => console.warn('NG0500: During hydration', throwing)).not.toThrow(); + expect(seen).toEqual([[bare], ['NG0500: During hydration', throwing]]); + expect(httpRegistry().warnings).toEqual(['NG0500: During hydration ']); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/injector-tree.test.ts b/packages/ng-devtools/src/__tests__/injector-tree.test.ts index d288b50..bb487b5 100644 --- a/packages/ng-devtools/src/__tests__/injector-tree.test.ts +++ b/packages/ng-devtools/src/__tests__/injector-tree.test.ts @@ -16,6 +16,7 @@ class App {} class Card {} class Tooltip {} const API_URL = { _desc: 'API_URL', toString: () => 'InjectionToken API_URL' }; +const THEME = { _desc: 'THEME', toString: () => 'InjectionToken THEME' }; function fakeNg() { document.body.innerHTML = ` @@ -75,7 +76,7 @@ function fakeNg() { dependencies: [ { token: Store, flags: { optional: false }, providedIn: rootEnv }, { token: Logger, flags: { self: true }, providedIn: node(card) }, - { token: API_URL, flags: { optional: true } }, + { token: THEME, flags: { optional: true } }, ], } : { dependencies: [] }, @@ -121,7 +122,7 @@ describe('collectInjectorTree', () => { expect(card.dependencies).toEqual([ { from: 'Card', token: 'Store', flags: [], providedBy: rootId }, { from: 'Card', token: 'Logger', flags: ['self'], providedBy: card.injector.id }, - { from: 'Card', token: 'API_URL', flags: ['optional'], providedBy: null }, + { from: 'Card', token: 'THEME', flags: ['optional'], providedBy: null }, ]); expect(card.injector.path).toEqual([ card.injector.id, @@ -152,7 +153,7 @@ describe('collectInjectorTree', () => { const first = collectInjectorTree(ng); const afterFirst = calls; const again = collectInjectorTree(ng); - expect(afterFirst).toBe(2); + expect(afterFirst).toBe(3); expect(calls).toBe(afterFirst); expect(again).toEqual(first); }); @@ -179,6 +180,105 @@ describe('collectInjectorTree', () => { ); }); + it('walks into shadow roots and nests their injectors under the host', () => { + document.body.innerHTML = ''; + const root = document.querySelector('app-root')!; + const shell = document.querySelector('app-shell')!; + const shadow = shell.attachShadow({ mode: 'open' }); + shadow.innerHTML = '
        '; + const child = shadow.querySelector('app-child')!; + const components = new Map([ + [root, new App()], + [shell, new Card()], + [child, new Tooltip()], + ]); + const env = { kind: 'env' }; + const ng = { + getInjector: (el: Element) => ({ kind: 'node', el }), + getComponent: (el: Element) => components.get(el) ?? null, + getDirectives: (el: Element) => (components.has(el) ? [components.get(el)] : []), + ɵgetInjectorMetadata: (inj: any) => + inj.kind === 'node' + ? { type: 'element', source: inj.el } + : { type: 'environment', source: 'R' }, + ɵgetInjectorResolutionPath: (inj: any) => [inj, env], + ɵgetInjectorProviders: () => [], + } as any; + const { roots } = collectInjectorTree(ng); + expect(roots.map((r) => r.injector.name)).toEqual(['app-root']); + const shellNode = roots[0].children[0]; + expect(shellNode.injector.name).toBe('app-shell'); + expect(document.querySelector(shellNode.injector.selector!)).toBe(shell); + expect(shellNode.children.map((c) => c.injector)).toEqual([ + expect.objectContaining({ name: 'app-child', component: 'Tooltip' }), + ]); + expect(shellNode.children[0].injector).not.toHaveProperty('selector'); + }); + + it('lists ng-container injectors and keeps them on the lookup path', () => { + document.body.innerHTML = ''; + const root = document.querySelector('app-root')!; + const card = document.querySelector('app-card')!; + const container = document.createComment('ng-container'); + root.insertBefore(container, card); + const env = { kind: 'env' }; + const node = (el: Node) => ({ kind: 'node', el }); + const containerInjector = node(container); + const ng = { + getInjector: (el: Node) => (el === container ? containerInjector : node(el)), + getComponent: (el: Element) => (el === root ? new App() : el === card ? new Card() : null), + getDirectives: (el: Node) => + el === root + ? [new App()] + : el === card + ? [new Card()] + : el === container + ? [new Tooltip()] + : [], + ɵgetInjectorMetadata: (inj: any) => + inj.kind === 'node' + ? { type: 'element', source: inj.el } + : { type: 'environment', source: 'R' }, + ɵgetInjectorResolutionPath: (inj: any) => + inj.el === card ? [inj, containerInjector, node(root), env] : [inj, env], + ɵgetInjectorProviders: (inj: any) => + inj === containerInjector ? [{ token: Logger, provider: Logger }] : [], + ɵgetDependenciesFromInjectable: (_inj: any, ctor: unknown) => + ctor === Card + ? { dependencies: [{ token: Logger, flags: {}, providedIn: containerInjector }] } + : { dependencies: [] }, + } as any; + const { roots } = collectInjectorTree(ng); + const [containerNode, cardNode] = roots[0].children; + expect(containerNode.injector).toMatchObject({ name: 'ng-container', directives: ['Tooltip'] }); + expect(containerNode.injector).not.toHaveProperty('selector'); + expect(containerNode.providers.map((p) => p.token)).toEqual(['Logger']); + expect(cardNode.injector.path).toContain(containerNode.injector.id); + expect(cardNode.dependencies).toEqual([ + { from: 'Card', token: 'Logger', flags: [], providedBy: containerNode.injector.id }, + ]); + }); + + it('finds a provider whose value is null on the lookup path', () => { + const { ng } = fakeNg(); + const lookup = ng.ɵgetDependenciesFromInjectable; + ng.ɵgetDependenciesFromInjectable = (inj: any, ctor: unknown) => + ctor === Card + ? { + dependencies: [ + { token: API_URL, flags: {} }, + { token: Logger, flags: { skipSelf: true } }, + ], + } + : lookup(inj, ctor); + const { roots, environment } = collectInjectorTree(ng); + const rootId = environment[0].children[0].injector.id; + expect(roots[0].children[0].dependencies).toEqual([ + { from: 'Card', token: 'API_URL', flags: [], providedBy: rootId }, + { from: 'Card', token: 'Logger', flags: ['skipSelf'], providedBy: null }, + ]); + }); + it('returns nothing without the Angular debug APIs', () => { expect(collectInjectorTree(undefined)).toEqual({ roots: [], environment: [] }); }); diff --git a/packages/ng-devtools/src/__tests__/network-inspector.test.ts b/packages/ng-devtools/src/__tests__/network-inspector.test.ts new file mode 100644 index 0000000..8f4e1b5 --- /dev/null +++ b/packages/ng-devtools/src/__tests__/network-inspector.test.ts @@ -0,0 +1,225 @@ +// @vitest-environment jsdom +import '@angular/compiler'; +import { Component, EventEmitter } from '@angular/core'; +import { TestBed, type ComponentFixture } from '@angular/core/testing'; +import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing'; +import { afterEach, describe, expect, it } from 'vitest'; +import { NetworkInspector } from '../../../../app/src/pages/network-inspector.ts'; +import { Select } from '../../../../app/src/ui/select.ts'; + +try { + TestBed.initTestEnvironment(BrowserTestingModule, platformBrowserTesting()); +} catch { + // already initialized in this worker +} + +class StubSelect { + valueChange = new EventEmitter(); +} +Component({ + selector: 'app-select', + template: '', + inputs: ['options', 'value', 'labelledBy', 'emptyText', 'placeholder'], + outputs: ['valueChange'], +})(StubSelect); + +type Call = NetworkInspector['serverCalls'] extends { (): infer T } ? T : never; + +const call = (id: string, extra: Partial = {}): Call[number] => ({ + id, + url: `/api/${id}`, + method: 'GET', + status: 200, + durationMs: 3, + side: 'server', + cacheHit: false, + faulted: false, + at: Number(id.replace(/\D/g, '')) || 1, + ...extra, +}); + +let fixture: ComponentFixture; + +function mount(calls: Call = []) { + TestBed.overrideComponent(NetworkInspector, { + remove: { imports: [Select] }, + add: { imports: [StubSelect] }, + }); + fixture = TestBed.createComponent(NetworkInspector); + document.body.append(fixture.nativeElement); + fixture.componentInstance.serverCalls.set(calls); + fixture.detectChanges(); + return fixture.nativeElement as HTMLElement; +} + +const typeInto = (el: HTMLInputElement | HTMLTextAreaElement, value: string) => { + el.value = value; + el.dispatchEvent(new Event('input')); + fixture.detectChanges(); +}; + +afterEach(() => { + TestBed.resetTestingModule(); + document.body.innerHTML = ''; +}); + +describe('NetworkInspector response preview', () => { + it('moves focus to the preview heading and back to the URL button on Escape and Close', async () => { + const host = mount([call('s1'), call('s2')]); + const button = host.querySelector('button[data-call-id="s2"]')!; + button.focus(); + button.click(); + fixture.detectChanges(); + await fixture.whenStable(); + const heading = host.querySelector('#preview-heading')!; + expect(document.activeElement).toBe(heading); + expect(button.getAttribute('aria-pressed')).toBe('true'); + + heading.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })); + fixture.detectChanges(); + expect(host.querySelector('#preview-heading')).toBeNull(); + expect(document.activeElement).toBe(button); + + button.click(); + fixture.detectChanges(); + await fixture.whenStable(); + [...host.querySelectorAll('.preview button')] + .find((b) => b.textContent?.trim() === 'Close')! + .click(); + fixture.detectChanges(); + expect(document.activeElement).toBe(button); + }); + + it('points the URL buttons at the preview only while it is open', async () => { + const host = mount([call('s1'), call('s2')]); + const buttons = [...host.querySelectorAll('button[data-call-id]')]; + expect(host.querySelector('#call-preview')).toBeNull(); + expect(buttons.map((b) => b.hasAttribute('aria-controls'))).toEqual([false, false]); + + buttons[1].click(); + fixture.detectChanges(); + await fixture.whenStable(); + expect(host.querySelector('#call-preview')).not.toBeNull(); + expect(buttons.map((b) => b.getAttribute('aria-controls'))).toEqual([ + 'call-preview', + 'call-preview', + ]); + }); +}); + +describe('NetworkInspector timeline notes', () => { + it('shows cancelled calls in a neutral tone and splits the rule notes', () => { + const host = mount([ + call('s1', { status: 0, cancelled: true, error: 'cancelled' }), + call('s2', { status: 0, error: 'Http failure response for /api/s2: 0 Unknown Error' }), + call('s3', { delayMs: 300, ruleId: 'r1', rulePattern: '/api/*' }), + call('s4', { status: 201, mocked: true, rulePattern: '/api/s4' }), + call('s5', { status: 500, faulted: true, rulePattern: '/api/s5' }), + ]); + const row = (id: string) => + host.querySelector(`button[data-call-id="${id}"]`)!.closest('tr') as HTMLElement; + const status = (id: string) => row(id).querySelector('td.status') as HTMLElement; + const notes = (id: string) => + [...row(id).querySelectorAll('.notes .tag')].map((t) => + t.textContent!.replace(/\s+/g, ' ').trim(), + ); + + expect(status('s1').textContent!.trim()).toBe('cancelled'); + expect(status('s1').classList.contains('bad')).toBe(false); + expect(status('s2').textContent!.trim()).toBe('ERR'); + expect(status('s2').classList.contains('bad')).toBe(true); + expect(notes('s3')).toEqual(['delayed 300 ms', 'rule /api/*']); + expect(notes('s4')).toEqual(['mocked', 'rule /api/s4']); + expect(notes('s5')).toEqual(['faulted', 'rule /api/s5']); + }); +}); + +describe('NetworkInspector rule form', () => { + const form = (host: HTMLElement) => ({ + pattern: host.querySelector('.rule-form input:not([type])')!, + status: host.querySelector('.rule-form input[type="number"][max="599"]')!, + delay: host.querySelector('.rule-form input[type="number"][max="10000"]')!, + body: host.querySelector('.rule-form textarea')!, + submit: host.querySelector('.rule-form button[type="submit"]')!, + hint: () => host.querySelector('#rule-hint')!.textContent!.trim(), + }); + + it('starts empty and only enables Add rule for a rule that changes something', () => { + const f = form(mount()); + expect(f.pattern.value).toBe(''); + expect(f.status.value).toBe(''); + expect(f.submit.disabled).toBe(true); + + typeInto(f.pattern, '/api/products'); + expect(f.submit.disabled).toBe(true); + expect(f.hint()).toBe('Set a status, a delay or a mock body.'); + + typeInto(f.delay, '3000'); + expect(f.submit.disabled).toBe(false); + expect(fixture.componentInstance.draftRule()).toEqual({ + pattern: '/api/products', + enabled: true, + target: 'both', + delayMs: 3000, + }); + + typeInto(f.status, '42'); + expect(f.submit.disabled).toBe(true); + expect(f.hint()).toBe('Set a status from 100 to 599.'); + }); + + it('gives a body-only rule status 200', () => { + const f = form(mount()); + typeInto(f.pattern, '/api/products'); + typeInto(f.body, '{"items":[]}'); + expect(f.hint()).toBe('With no status, the mock body returns 200.'); + expect(fixture.componentInstance.draftRule()).toMatchObject({ + status: 200, + body: '{"items":[]}', + }); + }); + + it('resets the form after Add rule and mentions a reload only for SSR rules', async () => { + const host = mount(); + const f = form(host); + const inspector = fixture.componentInstance; + typeInto(f.pattern, '/api/products'); + typeInto(f.status, '500'); + inspector.setDraft('target', 'client'); + fixture.detectChanges(); + f.submit.focus(); + f.submit.click(); + await fixture.whenStable(); + fixture.detectChanges(); + expect(inspector.rules()).toMatchObject([{ pattern: '/api/products', status: 500 }]); + expect(inspector.message()).toBe('Rule added.'); + expect(f.pattern.value).toBe(''); + expect(f.submit.disabled).toBe(true); + expect(document.activeElement).toBe(f.pattern); + + typeInto(f.pattern, '/api/cart'); + typeInto(f.status, '503'); + f.submit.click(); + await fixture.whenStable(); + expect(inspector.message()).toBe('Rule added. Reload the page to apply it to SSR.'); + }); + + it('blocks a rule past the cap', () => { + const host = mount(); + const inspector = fixture.componentInstance; + inspector.rules.set( + Array.from({ length: 50 }, (_, i) => ({ + id: `r${i}`, + pattern: `/p${i}`, + enabled: true, + target: 'both' as const, + status: 500, + })), + ); + const f = form(host); + typeInto(f.pattern, '/api/products'); + typeInto(f.status, '500'); + expect(f.submit.disabled).toBe(true); + expect(f.hint()).toBe('You can add up to 50 rules. Remove one to add another.'); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/ngrx-collector.test.ts b/packages/ng-devtools/src/__tests__/ngrx-collector.test.ts index 5c87bef..6913efe 100644 --- a/packages/ng-devtools/src/__tests__/ngrx-collector.test.ts +++ b/packages/ng-devtools/src/__tests__/ngrx-collector.test.ts @@ -1,4 +1,5 @@ // @vitest-environment jsdom +import { signal } from '@angular/core'; import { describe, expect, it, vi } from 'vitest'; import { createNgrxCollector } from '../ngrx-collector.ts'; import { diff, serialize } from '../ngrx-shared.ts'; @@ -77,7 +78,7 @@ function setup(maxLog?: number) { }; const onChange = vi.fn(); const collector = createNgrxCollector(() => ng as any, onChange, document, maxLog); - return { store, app, rootEnv, collector, onChange }; + return { store, app, rootEnv, collector, onChange, ng }; } describe('ngrx collector', () => { @@ -223,16 +224,16 @@ describe('ngrx collector', () => { }); it('only rescans the page when asked to rediscover stores', () => { - const { store, collector } = setup(); - const spy = vi.spyOn(document, 'createTreeWalker'); + const { store, collector, ng } = setup(); + const spy = vi.spyOn(ng, 'getComponent'); collector.collect(); - expect(spy).toHaveBeenCalledTimes(1); + const scan = spy.mock.calls.length; + expect(scan).toBeGreaterThan(0); store.setQuery('a'); expect(collector.collect(false).stores[0].state).toMatchObject({ query: 'a' }); - expect(spy).toHaveBeenCalledTimes(1); + expect(spy).toHaveBeenCalledTimes(scan); collector.collect(); - expect(spy).toHaveBeenCalledTimes(2); - spy.mockRestore(); + expect(spy).toHaveBeenCalledTimes(scan * 2); }); it('only returns entries after a sequence number', () => { @@ -303,6 +304,121 @@ describe('ngrx collector', () => { }); }); +function fakeClassic(initial: S, reducer: (state: S, action: { type: string }) => S) { + document.body.innerHTML = ''; + const root = document.querySelector('app-root')!; + let state = initial; + const listeners: ((a: unknown) => void)[] = []; + class _Store { + source = { getValue: () => state }; + dispatch(action: { type: string } | (() => { type: string })) { + if (typeof action === 'function') { + this.dispatch(action()); + return; + } + this.run(action); + } + next(action: { type: string }) { + this.run(action); + } + run(action: { type: string }) { + state = reducer(state, action); + for (const l of listeners) l(action); + } + select() {} + } + class ScannedActionsSubject { + subscribe(fn: (a: unknown) => void) { + listeners.push(fn); + return { unsubscribe: () => listeners.splice(listeners.indexOf(fn), 1) }; + } + } + const store = new _Store(); + const values = new Map([ + [_Store, store], + [ScannedActionsSubject, new ScannedActionsSubject()], + ]); + const rootEnv = { + scopes: new Set(['root']), + records: new Map([...values.keys()].map((k) => [k, { value: undefined }])), + }; + const node = { get: (token: unknown) => values.get(token) ?? null }; + const ng = { + getInjector: () => node, + getComponent: (el: Element) => (el === root ? {} : null), + ɵgetInjectorResolutionPath: () => [node, rootEnv], + ɵgetInjectorProviders: () => [], + }; + const collector = createNgrxCollector( + () => ng as any, + () => {}, + ); + collector.collect(); + return { store, collector, Store: _Store }; +} + +describe('ngrx collector with a classic store', () => { + it('finds a change past the first hundred array items', () => { + type Todo = { id: number; done: boolean }; + const todos: Todo[] = Array.from({ length: 150 }, (_, id) => ({ id, done: false })); + const { store, collector } = fakeClassic({ todos }, (state, action) => { + const id = Number(action.type.split(' ')[1]); + return { + todos: state.todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t)), + }; + }); + store.dispatch({ type: 'toggle 5' }); + store.dispatch({ type: 'toggle 120' }); + expect(collector.logSince(0).map((e) => e.diff)).toEqual([ + [{ path: 'todos[5].done', op: 'change', before: false, after: true }], + [{ path: 'todos[120].done', op: 'change', before: false, after: true }], + ]); + }); + + it('finds a changed entity past the first hundred keys and keeps an unchanged state empty', () => { + const entities = Object.fromEntries( + Array.from({ length: 150 }, (_, i) => [`e${i}`, { id: i, done: false }]), + ); + const { store, collector } = fakeClassic({ entities }, (state, action) => + action.type === 'toggle' + ? { entities: { ...state.entities, e140: { id: 140, done: true } } } + : state, + ); + store.dispatch({ type: 'toggle' }); + store.dispatch({ type: 'noop' }); + expect(collector.logSince(0).map((e) => e.diff)).toEqual([ + [{ path: 'entities.e140.done', op: 'change', before: false, after: true }], + [], + ]); + }); + + it('tags each action with where it came from', () => { + const { store, collector } = fakeClassic({ n: 0 }, (s) => ({ n: s.n + 1 })); + store.dispatch({ type: 'from component' }); + store.next({ type: 'from effect' }); + store.dispatch(() => ({ type: 'from signal' })); + store.dispatch({ type: 'plain again' }); + expect(collector.logSince(0).map((e) => [e.type, e.origin])).toEqual([ + ['from component', 'dispatch'], + ['from effect', 'effect'], + ['from signal', 'reactive'], + ['plain again', 'dispatch'], + ]); + }); + + it('puts back the original dispatch and next when it stops', () => { + const { store, collector, Store } = fakeClassic({ n: 0 }, (s) => s); + expect(Object.hasOwn(store, 'dispatch')).toBe(true); + expect(Object.hasOwn(store, 'next')).toBe(true); + collector.stop(); + expect(Object.hasOwn(store, 'dispatch')).toBe(false); + expect(Object.hasOwn(store, 'next')).toBe(false); + expect(store.dispatch).toBe(Store.prototype.dispatch); + store.dispatch({ type: 'after stop' }); + expect(collector.logSince(0)).toEqual([]); + }); +}); + describe('ngrx collector with Store DevTools', () => { function setupDevtools() { document.body.innerHTML = ''; @@ -512,9 +628,11 @@ describe('ngrx tools', () => { expect(mergeNgrxReport(pages, report('s1', [entry(1), entry(2)]), [])).toBe(2); expect(mergeNgrxReport(pages, report('s1', [entry(2), entry(3)]), [])).toBe(3); expect(ngrxStateOf(pages).pages[0].log.map((e) => e.seq)).toEqual([1, 2, 3]); + expect(ngrxStateOf(pages).pages[0].dropped).toBe(0); expect(mergeNgrxReport(pages, report('s2', [entry(1)]), [])).toBe(1); mergeNgrxReport(pages, report('s3', [1, 2, 3, 4, 5].map(entry)), [], 0, 2); expect(ngrxStateOf(pages).pages[0].log.map((e) => e.seq)).toEqual([4, 5]); + expect(ngrxStateOf(pages).pages[0].dropped).toBe(3); expect(ngrxStateOf(pages).pages[0]).not.toHaveProperty('session'); }); }); @@ -642,6 +760,48 @@ describe('ngrx collector with @ngrx/signals', () => { } }); + it('finds a component-scoped store and a signalState field through the debug API', async () => { + const TestBed = await testBed(); + const { Component, inject } = await import('@angular/core'); + const { signalStore, signalState, withState, withMethods, patchState } = + await import('@ngrx/signals'); + const PackingStore = signalStore( + withState({ items: ['passport'] }), + withMethods((store) => ({ + add(item: string) { + patchState(store, (state) => ({ items: [...state.items, item] })); + }, + })), + ); + class Packing { + store = inject(PackingStore); + view = signalState({ hidePacked: false }); + } + Component({ selector: 'app-packing', template: '', providers: [PackingStore] })(Packing); + const fixture = TestBed.createComponent(Packing); + document.body.replaceChildren(fixture.nativeElement); + const collector = createNgrxCollector( + () => (globalThis as { ng?: any }).ng, + () => {}, + ); + expect( + collector.collect().stores.map((s) => [s.className, s.kind, s.scope, s.references]), + ).toEqual([ + ['SignalStore', 'signal-store', 'Packing (component)', ['Packing.store']], + ['signalState', 'signal-state', 'Packing (field)', ['Packing.view']], + ]); + fixture.componentInstance.store.add('charger'); + patchState(fixture.componentInstance.view, { hidePacked: true }); + await Promise.resolve(); + expect(collector.logSince(0).map((e) => [e.type, e.diff])).toEqual([ + ['add', [{ path: 'items[1]', op: 'add', after: 'charger' }]], + ['patchState', [{ path: 'hidePacked', op: 'change', before: false, after: true }]], + ]); + fixture.destroy(); + fixture.nativeElement.remove(); + expect(collector.collect().stores).toEqual([]); + }); + it('does not add reactive dependencies when a method runs inside a computed', async () => { await import('@angular/compiler'); const { Injector, computed } = await import('@angular/core'); @@ -694,3 +854,157 @@ function realCollector(store: object) { () => {}, ); } + +let testBedReady = false; + +async function testBed() { + await import('@angular/compiler'); + const { TestBed } = await import('@angular/core/testing'); + if (!testBedReady) { + const { BrowserTestingModule, platformBrowserTesting } = + await import('@angular/platform-browser/testing'); + TestBed.initTestEnvironment(BrowserTestingModule, platformBrowserTesting()); + testBedReady = true; + } + TestBed.resetTestingModule(); + return TestBed; +} + +describe('ngrx collector with @ngrx/store', () => { + async function realStore( + options: { devtools?: { maxAge?: number }; hide?: string[]; store?: boolean } = {}, + ) { + const TestBed = await testBed(); + const { EnvironmentInjector } = await import('@angular/core'); + const { Store, createAction, createReducer, on, props, provideStore } = + await import('@ngrx/store'); + const { provideStoreDevtools } = await import('@ngrx/store-devtools'); + const add = createAction('[Counter] Add', props<{ by: number }>()); + const reducer = createReducer( + 0, + on(add, (n, { by }) => n + by), + ); + TestBed.configureTestingModule({ + providers: [ + ...(options.store === false ? [] : [provideStore({ count: reducer })]), + ...(options.devtools ? [provideStoreDevtools(options.devtools)] : []), + ], + }); + const env = TestBed.inject(EnvironmentInjector) as unknown as { + records: Map; + scopes: Set; + get(token: unknown, fallback?: unknown): unknown; + }; + const hide = new Set(options.hide ?? []); + const view = hide.size + ? { + scopes: env.scopes, + records: new Map( + [...env.records].filter( + ([token]) => !hide.has((token as { name?: string })?.name ?? ''), + ), + ), + } + : env; + document.body.innerHTML = ''; + const root = document.querySelector('app-root')!; + const node = { get: (token: unknown, fallback?: unknown) => env.get(token, fallback) }; + const ng = { + getInjector: () => node, + getComponent: (el: Element) => (el === root ? {} : null), + ɵgetInjectorResolutionPath: () => [node, view], + ɵgetInjectorProviders: vi.fn((_injector: unknown) => [] as { token: unknown }[]), + }; + const collector = createNgrxCollector( + () => ng as any, + () => {}, + ); + const store = options.store === false ? null : TestBed.inject(Store); + return { TestBed, Store, store: store!, collector, add, ng, view }; + } + + it('finds the Store by class name and logs actions with a diff and their origin', async () => { + const { TestBed, Store, store, collector, add } = await realStore(); + expect(collector.collect().classic).toEqual({ + state: { count: 0 }, + devtools: false, + scope: 'root', + }); + store.dispatch(add({ by: 2 })); + store.next(add({ by: 3 })); + const by = signal(4); + store.dispatch(() => add({ by: by() })); + TestBed.tick(); + expect(collector.logSince(0).map((e) => [e.type, e.origin, e.diff])).toEqual([ + ['[Counter] Add', 'dispatch', [{ path: 'count', op: 'change', before: 0, after: 2 }]], + ['[Counter] Add', 'effect', [{ path: 'count', op: 'change', before: 2, after: 5 }]], + ['[Counter] Add', 'reactive', [{ path: 'count', op: 'change', before: 5, after: 9 }]], + ]); + expect(collector.logSince(0)[0]).toMatchObject({ + source: 'store', + action: { type: '[Counter] Add', by: 2 }, + restorable: false, + }); + expect(collector.run({ type: 'restore', seq: 1 }).error).toMatch(/provideStoreDevtools/); + collector.stop(); + expect(Object.hasOwn(store, 'dispatch')).toBe(false); + expect(store.dispatch).toBe(Store.prototype.dispatch); + }); + + it('restores through Store DevTools and keeps logging actions while paused', async () => { + const { store, collector, add } = await realStore({ devtools: {} }); + expect(collector.collect().classic).toMatchObject({ devtools: true }); + store.dispatch(add({ by: 1 })); + store.dispatch(add({ by: 10 })); + store.dispatch(add({ by: 100 })); + const result = collector.run({ type: 'restore', seq: 1 }); + expect(result).toMatchObject({ ok: true }); + expect(result.message).toMatch(/paused/); + expect(collector.collect().classic).toMatchObject({ state: { count: 1 }, paused: true }); + expect(collector.logSince(3)[0]).toMatchObject({ + type: 'Restore #1', + diff: [{ path: 'count', op: 'change', before: 111, after: 1 }], + }); + store.dispatch(add({ by: 1000 })); + expect(collector.logSince(4)).toMatchObject([{ type: '[Counter] Add', diff: [] }]); + expect(collector.collect().classic).toMatchObject({ state: { count: 1 } }); + expect(collector.run({ type: 'latest' })).toMatchObject({ ok: true }); + expect(collector.collect().classic).toEqual({ + state: { count: 1111 }, + devtools: true, + scope: 'root', + }); + expect(collector.run({ type: 'restore', seq: 3 })).toMatchObject({ ok: true }); + expect(collector.collect().classic).toMatchObject({ state: { count: 111 }, paused: true }); + }); + + it('says so when Store DevTools dropped the action past maxAge', async () => { + const { store, collector, add } = await realStore({ devtools: { maxAge: 3 } }); + collector.collect(); + for (let i = 0; i < 5; i++) store.dispatch(add({ by: 1 })); + expect(collector.run({ type: 'restore', seq: 1 }).error).toMatch(/no longer holds this action/); + expect(collector.run({ type: 'restore', seq: 5 })).toMatchObject({ ok: true }); + }); + + it('falls back to ActionsSubject when ScannedActionsSubject is not found', async () => { + const { store, collector, add } = await realStore({ hide: ['ScannedActionsSubject'] }); + expect(collector.collect().classic).toMatchObject({ state: { count: 0 } }); + store.dispatch(add({ by: 2 })); + expect(collector.logSince(0)).toEqual([]); + await Promise.resolve(); + expect(collector.logSince(0)).toMatchObject([ + { + type: '[Counter] Add', + origin: 'dispatch', + diff: [{ path: 'count', op: 'change', before: 0, after: 2 }], + }, + ]); + }); + + it('stops looking for the Store after five misses', async () => { + const { collector, ng, view } = await realStore({ store: false }); + for (let i = 0; i < 8; i++) expect(collector.collect().classic).toBeNull(); + const lookups = ng.ɵgetInjectorProviders.mock.calls.filter(([injector]) => injector === view); + expect(lookups).toHaveLength(5); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/ngrx-mcp.test.ts b/packages/ng-devtools/src/__tests__/ngrx-mcp.test.ts new file mode 100644 index 0000000..55f46cb --- /dev/null +++ b/packages/ng-devtools/src/__tests__/ngrx-mcp.test.ts @@ -0,0 +1,60 @@ +import { createHostContext } from 'devframe/node'; +import { describe, expect, it } from 'vitest'; +import ngDevtools from '../devframe.ts'; +import type { NgrxPageReport } from '../ngrx-shared.ts'; + +async function boot() { + const host = { + mountStatic: () => {}, + resolveOrigin: () => 'http://localhost', + getStorageDir: () => '', + }; + const ctx = await createHostContext({ cwd: process.cwd(), mode: 'dev', host: host as never }); + await ngDevtools.setup(ctx as never); + const push = (name: string, payload: unknown) => + ctx.rpc.invokeLocal(`ng-devtools:${name}` as never, ...([payload] as never)); + const read = async (id: string) => + ((await ctx.agent.read(`ng-devtools:${id}`)) as { text: string }).text; + return { ctx, push, read }; +} + +const entry = (seq: number, type: string, origin: 'dispatch' | 'effect' | 'reactive') => ({ + seq, + source: 'store' as const, + storeId: 'store', + type, + action: { type }, + origin, + timestamp: seq, + diff: [], + restorable: false, +}); + +describe('ngrx-store resource', () => { + it('lists where each classic store action came from', async () => { + const { push, read, ctx } = await boot(); + expect(ctx.agent.getResource('ng-devtools:ngrx-store')?.description).toMatch(/origin/); + const report: NgrxPageReport = { + pageId: 'p1', + session: 's1', + url: '/', + title: 'App', + stores: [], + classic: { state: { count: 0 }, devtools: false, scope: 'root' }, + log: [ + entry(1, '[Todos] Load', 'dispatch'), + entry(2, '[Todos] Loaded', 'effect'), + entry(3, '[Todos] Filter', 'reactive'), + ], + }; + await push('push-ngrx-state', report); + const state = JSON.parse(await read('ngrx-store')); + expect( + state.pages[0].log.map((e: { type: string; origin: string }) => [e.type, e.origin]), + ).toEqual([ + ['[Todos] Load', 'dispatch'], + ['[Todos] Loaded', 'effect'], + ['[Todos] Filter', 'reactive'], + ]); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/overlay-config.test.ts b/packages/ng-devtools/src/__tests__/overlay-config.test.ts index a9bdf86..6f9030b 100644 --- a/packages/ng-devtools/src/__tests__/overlay-config.test.ts +++ b/packages/ng-devtools/src/__tests__/overlay-config.test.ts @@ -6,6 +6,7 @@ import { RULES_STORAGE_KEY, clientRules, httpRegistry, storeRules } from '../htt import { noteFailedCall, setNavigationLimit, type NavigationRecord } from '../router.ts'; const calls: string[] = []; +const sentArgs = new Map(); let configs: Record | undefined; vi.mock('devframe/client', () => ({ @@ -13,8 +14,9 @@ vi.mock('devframe/client', () => ({ connectionMeta: { backend: 'websocket', configs }, scope: () => ({ rpc: { - call: async (name: string) => { + call: async (name: string, arg?: unknown) => { calls.push(name); + sentArgs.set(name, arg); return undefined; }, register: () => {}, @@ -45,6 +47,26 @@ afterEach(() => { }); describe('overlay collectors', () => { + it('ping instead of resending unchanged trees and HTTP calls', async () => { + await start({ limits: { refreshMs: 500 } }); + expect(calls).toContain('push-component-tree'); + expect(calls).toContain('push-http'); + calls.length = 0; + vi.useFakeTimers({ toFake: ['Date'] }); + try { + vi.setSystemTime(Date.now() + 9000); + await new Promise((resolve) => setTimeout(resolve, 700)); + } finally { + vi.useRealTimers(); + } + expect(calls).not.toContain('push-component-tree'); + expect(calls).not.toContain('push-injector-tree'); + expect(calls).not.toContain('push-http'); + expect(calls).toContain('ping-component-tree'); + expect(calls).toContain('ping-injector-tree'); + expect(calls).toContain('ping-http'); + }); + it('run every collector when the server sends no config', async () => { const called = await start(); expect(called).toContain('push-component-tree'); @@ -107,4 +129,21 @@ describe('overlay collectors', () => { await start({ redaction: { secretNames: ['voucher'] } }); expect(isSecretKey('voucherCode')).toBe(true); }); + + it('redact the page URL and title in the component tree report', async () => { + const before = location.href; + const title = document.title; + history.replaceState(null, '', '/reset?token=s3cr3tvalue123&x=1#access_token=abcdefabcdef'); + document.title = 'Reset Bearer abcdefghijklmnop'; + try { + await start(); + } finally { + history.replaceState(null, '', before); + document.title = title; + } + const report = sentArgs.get('push-component-tree') as { url: string; title: string }; + expect(report.url).toContain('?token=[redacted]&x=1#access_token=[redacted]'); + expect(report.url).not.toContain('s3cr3tvalue123'); + expect(report.title).toBe('Reset Bearer [redacted]'); + }); }); diff --git a/packages/ng-devtools/src/__tests__/overlay-visibility.test.ts b/packages/ng-devtools/src/__tests__/overlay-visibility.test.ts new file mode 100644 index 0000000..918081e --- /dev/null +++ b/packages/ng-devtools/src/__tests__/overlay-visibility.test.ts @@ -0,0 +1,143 @@ +// @vitest-environment jsdom +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; +import { KEEPALIVE_MS, keepaliveDue } from '../change-detection.ts'; + +const calls: { name: string; at: number; args: unknown[] }[] = []; +let configs: Record | undefined; + +vi.mock('devframe/client', () => ({ + connectDevframe: async () => ({ + connectionMeta: { backend: 'websocket', configs }, + scope: () => ({ + rpc: { + call: async (name: string, ...args: unknown[]) => { + calls.push({ name, at: Date.now(), args }); + return undefined; + }, + register: () => {}, + }, + }), + }), +})); + +let hidden = false; +const stops: (() => void)[] = []; + +async function start(config: Record = {}) { + configs = { 'ng-devtools': { inspectors: { router: false, analog: false }, ...config } }; + vi.resetModules(); + const { initOverlay } = await import('../overlay.ts'); + const pending = initOverlay(); + await vi.advanceTimersByTimeAsync(200); + stops.push(await pending); +} + +const sent = (name: string) => calls.filter((call) => call.name === name); + +function setHidden(value: boolean) { + hidden = value; + document.dispatchEvent(new Event('visibilitychange')); +} + +describe.sequential('overlay keepalive and background tabs', () => { + beforeEach(() => { + calls.length = 0; + hidden = false; + vi.stubGlobal('BroadcastChannel', undefined); + Object.defineProperty(document, 'visibilityState', { + configurable: true, + get: () => (hidden ? 'hidden' : 'visible'), + }); + vi.useFakeTimers({ + toFake: ['Date', 'setTimeout', 'clearTimeout', 'setInterval', 'clearInterval'], + }); + }); + + afterEach(() => { + stops.splice(0).forEach((stop) => stop()); + vi.useRealTimers(); + vi.unstubAllGlobals(); + sessionStorage.clear(); + }); + + it('sends an unchanged report on a tick when the next tick would be too late', () => { + expect(keepaliveDue(10, 8000, 8000)).toBe(true); + expect(keepaliveDue(10, 4000, 4000)).toBe(false); + expect(keepaliveDue(10, 4000, 8000)).toBe(true); + expect(keepaliveDue(0, 0, KEEPALIVE_MS)).toBe(false); + }); + + it.each([7600, 8000])('reports well inside the 15 s TTL with refreshMs %i', async (refreshMs) => { + await start({ limits: { refreshMs } }); + const from = Date.now(); + calls.length = 0; + await vi.advanceTimersByTimeAsync(60_000); + for (const name of ['component-tree', 'injector-tree', 'http']) { + const reports = [...sent(`push-${name}`), ...sent(`ping-${name}`)].map((call) => call.at); + const times = [from, ...reports.sort((a, b) => a - b)]; + const gaps = times.slice(1).map((at, i) => at - times[i]); + expect(gaps.length, name).toBeGreaterThan(0); + expect(Math.max(...gaps), name).toBeLessThanOrEqual(refreshMs); + } + }); + + it('stops collecting in a background tab and says so, then reports again when back', async () => { + await start(); + setHidden(true); + await vi.advanceTimersByTimeAsync(0); + expect(sent('report-page-visibility').at(-1)?.args[0]).toMatchObject({ hidden: true }); + + calls.length = 0; + await vi.advanceTimersByTimeAsync(130_000); + expect(sent('push-component-tree')).toEqual([]); + expect(sent('ping-component-tree')).toEqual([]); + expect(sent('report-page-visibility').length).toBeGreaterThanOrEqual(2); + + calls.length = 0; + setHidden(false); + await vi.advanceTimersByTimeAsync(0); + expect(sent('report-page-visibility').at(-1)?.args[0]).toMatchObject({ hidden: false }); + expect(sent('push-component-tree').length + sent('ping-component-tree').length).toBe(1); + }); + + it('clears the background mark when the page goes away', async () => { + await start(); + setHidden(true); + await vi.advanceTimersByTimeAsync(0); + window.dispatchEvent(new Event('pagehide')); + await vi.advanceTimersByTimeAsync(0); + expect(sent('report-page-visibility').at(-1)?.args[0]).toMatchObject({ hidden: false }); + }); + + it('does not mark a closed tab as in the background', async () => { + await start(); + window.dispatchEvent(new Event('pagehide')); + setHidden(true); + await vi.advanceTimersByTimeAsync(130_000); + const reports = sent('report-page-visibility').map((call) => call.args[0]); + expect(reports).not.toContainEqual(expect.objectContaining({ hidden: true })); + expect(reports.at(-1)).toMatchObject({ hidden: false }); + }); + + it('stops the background heartbeat when a hidden tab goes away', async () => { + await start(); + setHidden(true); + await vi.advanceTimersByTimeAsync(0); + window.dispatchEvent(new Event('pagehide')); + calls.length = 0; + await vi.advanceTimersByTimeAsync(130_000); + expect(sent('report-page-visibility')).toEqual([]); + }); + + it('reports a background tab again after it comes back from the back/forward cache', async () => { + await start(); + window.dispatchEvent(new Event('pagehide')); + await vi.advanceTimersByTimeAsync(0); + calls.length = 0; + window.dispatchEvent(new Event('pageshow')); + await vi.advanceTimersByTimeAsync(0); + setHidden(true); + await vi.advanceTimersByTimeAsync(0); + expect(sent('report-page-visibility').at(-1)?.args[0]).toMatchObject({ hidden: true }); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/page-highlight.test.ts b/packages/ng-devtools/src/__tests__/page-highlight.test.ts new file mode 100644 index 0000000..070b5f5 --- /dev/null +++ b/packages/ng-devtools/src/__tests__/page-highlight.test.ts @@ -0,0 +1,121 @@ +// @vitest-environment jsdom +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; +import { clearHighlight, highlightBox, showHighlight } from '../page-highlight.ts'; + +const handlers = new Map void>(); + +vi.mock('devframe/client', () => ({ + connectDevframe: async () => ({ + scope: () => ({ + rpc: { + call: async () => undefined, + register: (definition: { name: string; handler: (arg: unknown) => void }) => + handlers.set(definition.name, definition.handler), + }, + }), + }), +})); + +function place(el: Element, rect: { x: number; y: number; width: number; height: number }) { + el.getBoundingClientRect = () => + ({ + ...rect, + top: rect.y, + left: rect.x, + right: rect.x + rect.width, + bottom: rect.y + rect.height, + toJSON: () => rect, + }) as DOMRect; +} + +const box = () => + [...document.body.children].find( + (el) => el instanceof HTMLElement && el.style.pointerEvents === 'none', + ) as HTMLElement | undefined; + +describe('page highlight', () => { + beforeEach(() => { + document.body.innerHTML = ''; + }); + afterEach(() => { + clearHighlight(); + delete (HTMLElement.prototype as Partial).showPopover; + }); + + it('draws over an SVG host', () => { + document.body.innerHTML = ''; + const bar = document.querySelector('g')!; + place(bar, { x: 10, y: 20, width: 30, height: 40 }); + expect(showHighlight(bar)).toBe(true); + expect(box()?.style).toMatchObject({ left: '10px', top: '20px', width: '30px' }); + }); + + it('draws around the children of a display: contents host', () => { + document.body.innerHTML = + '
        '; + const row = document.querySelector('app-row')!; + place(row, { x: 0, y: 0, width: 0, height: 0 }); + place(document.getElementById('a')!, { x: 10, y: 100, width: 200, height: 50 }); + place(document.getElementById('b')!, { x: 10, y: 150, width: 300, height: 50 }); + expect(highlightBox(row)).toEqual({ top: 100, left: 10, width: 300, height: 100 }); + expect(showHighlight(row)).toBe(true); + expect(box()?.style).toMatchObject({ top: '100px', height: '100px' }); + }); + + it('draws nothing for a hidden host and says so', () => { + document.body.innerHTML = ''; + const tab = document.querySelector('app-tab')!; + expect(showHighlight(tab)).toBe(false); + expect(box()).toBeUndefined(); + }); + + it('scrolls the host into view only when asked', () => { + document.body.innerHTML = ''; + const card = document.querySelector('app-card')!; + place(card, { x: 0, y: 3000, width: 100, height: 100 }); + card.scrollIntoView = vi.fn(); + showHighlight(card); + expect(card.scrollIntoView).not.toHaveBeenCalled(); + showHighlight(card, { reveal: true }); + expect(card.scrollIntoView).toHaveBeenCalledWith({ block: 'nearest', inline: 'nearest' }); + }); + + it('shows the box as a popover, above an open dialog or overlay', () => { + const shown: Element[] = []; + HTMLElement.prototype.showPopover = function (this: HTMLElement) { + shown.push(this); + }; + document.body.innerHTML = ''; + const item = document.querySelector('app-item')!; + place(item, { x: 5, y: 5, width: 50, height: 20 }); + showHighlight(item); + expect(box()?.getAttribute('popover')).toBe('manual'); + expect(shown).toEqual([box()]); + }); + + it('keeps the z-index when the Popover API is missing', () => { + document.body.innerHTML = ''; + const item = document.querySelector('app-item')!; + place(item, { x: 5, y: 5, width: 50, height: 20 }); + showHighlight(item); + expect(box()?.hasAttribute('popover')).toBe(false); + expect(box()?.style.zIndex).toBe('2147483645'); + }); + + it('accepts an SVG element from the highlight-in-page request', async () => { + vi.stubGlobal('BroadcastChannel', undefined); + const { initOverlay } = await import('../overlay.ts'); + const stop = await initOverlay(); + try { + document.body.innerHTML = ''; + place(document.querySelector('g')!, { x: 1, y: 2, width: 3, height: 4 }); + handlers.get('highlight-in-page')!('g.bar'); + expect(box()?.style.width).toBe('3px'); + handlers.get('highlight-in-page')!(null); + expect(box()).toBeUndefined(); + } finally { + stop(); + vi.unstubAllGlobals(); + } + }); +}); diff --git a/packages/ng-devtools/src/__tests__/page-visibility.test.ts b/packages/ng-devtools/src/__tests__/page-visibility.test.ts new file mode 100644 index 0000000..d993a66 --- /dev/null +++ b/packages/ng-devtools/src/__tests__/page-visibility.test.ts @@ -0,0 +1,93 @@ +import { createHostContext } from 'devframe/node'; +import { afterEach, describe, expect, it, vi } from 'vitest'; +import ngDevtools from '../devframe.ts'; +import { HIDDEN_PAGE_TTL_MS, createPageVisibility } from '../rpc/page-ttl.ts'; + +async function boot() { + const host = { + mountStatic: () => {}, + resolveOrigin: () => 'http://localhost', + getStorageDir: () => '', + }; + const ctx = await createHostContext({ cwd: process.cwd(), mode: 'dev', host: host as never }); + await ngDevtools.setup(ctx as never); + const push = (name: string, payload: unknown) => + ctx.rpc.invokeLocal(`ng-devtools:${name}` as never, ...([payload] as never)); + const state = async (key: string) => + ( + await ( + ctx.rpc as unknown as { + sharedState: { + get: (key: string) => Promise<{ value: () => Record }>; + }; + } + ).sharedState.get(`ng-devtools:${key}`) + ).value(); + const report = async () => { + await push('push-http', { pageId: 'p1', url: '/', payload: null, calls: [] }); + await push('push-signal-graph', { pageId: 'p1', nodes: [], edges: [] }); + await push('push-component-tree', { pageId: 'p1', roots: [], count: 0, detail: null }); + }; + const shown = async () => ({ + http: ((await state('http'))['pages'] as { pageId: string }[]).map((p) => p.pageId), + signals: Object.keys((await state('signal-graph'))['pages'] as object), + components: Object.keys((await state('component-tree'))['pages'] as object), + }); + return { push, state, report, shown }; +} + +const all = { http: ['p1'], signals: ['p1'], components: ['p1'] }; +const none = { http: [], signals: [], components: [] }; + +describe('pages in a background tab', () => { + afterEach(() => vi.useRealTimers()); + + it('drop a visible page that stopped reporting', async () => { + vi.useFakeTimers({ toFake: ['Date', 'setInterval', 'clearInterval'] }); + const { report, shown } = await boot(); + await report(); + expect(await shown()).toEqual(all); + vi.advanceTimersByTime(20_000); + expect(await shown()).toEqual(none); + }); + + it('keep the last data of a hidden tab and list it as hidden', async () => { + vi.useFakeTimers({ toFake: ['Date', 'setInterval', 'clearInterval'] }); + const { push, state, report, shown } = await boot(); + await report(); + await push('report-page-visibility', { pageId: 'p1', hidden: true }); + expect(await state('page-visibility')).toEqual({ hidden: ['p1'] }); + + for (let minute = 0; minute < 10; minute++) { + vi.advanceTimersByTime(60_000); + await push('report-page-visibility', { pageId: 'p1', hidden: true }); + } + expect(await shown()).toEqual(all); + + await push('report-page-visibility', { pageId: 'p1', hidden: false }); + expect(await state('page-visibility')).toEqual({ hidden: [] }); + await report(); + vi.advanceTimersByTime(20_000); + expect(await shown()).toEqual(none); + }); + + it('drop a hidden tab that stopped saying it is there', async () => { + vi.useFakeTimers({ toFake: ['Date', 'setInterval', 'clearInterval'] }); + const { push, state, report, shown } = await boot(); + await report(); + await push('report-page-visibility', { pageId: 'p1', hidden: true }); + vi.advanceTimersByTime(HIDDEN_PAGE_TTL_MS + 10_000); + expect(await state('page-visibility')).toEqual({ hidden: [] }); + expect(await shown()).toEqual(none); + }); + + it('track hidden marks by page', () => { + const visibility = createPageVisibility(); + expect(visibility.set('p1', true, 0)).toBe(true); + expect(visibility.set('p1', true, 10)).toBe(false); + expect(visibility.ttl(15_000)('p1')).toBe(Infinity); + expect(visibility.ttl(15_000)('p2')).toBe(15_000); + expect(visibility.expire(HIDDEN_PAGE_TTL_MS + 11)).toBe(true); + expect(visibility.list()).toEqual([]); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/panel-component-tree.test.ts b/packages/ng-devtools/src/__tests__/panel-component-tree.test.ts new file mode 100644 index 0000000..405c7e9 --- /dev/null +++ b/packages/ng-devtools/src/__tests__/panel-component-tree.test.ts @@ -0,0 +1,141 @@ +import { describe, expect, it } from 'vitest'; +import { + countText, + filterAnnouncement, + filterTree, + nearestRow, + reconcileSelection, + type TreeNode, +} from '../../../../app/src/pages/component-tree-state.ts'; +import { injectorTreeFor, pickPage, signalGraphFor } from '../../../../app/src/live-pages.ts'; + +const node = (id: string, name: string, children: TreeNode[] = []): TreeNode => ({ + id, + name, + tag: `app-${name.toLowerCase()}`, + children, +}); + +const roots = [ + node('c1', 'App', [ + node('c2', 'Shell', [node('c3', 'Card'), node('c4', 'Card')]), + node('c5', 'Footer'), + ]), +]; + +describe('Components filter count', () => { + it('counts matching nodes only, not the ancestors kept for context', () => { + const { nodes, matches } = filterTree(roots, 'card'); + expect(matches).toBe(2); + expect(nodes[0].children[0].children.map((n) => n.id)).toEqual(['c3', 'c4']); + expect(filterTree(roots, ' ')).toEqual({ nodes: roots, matches: 0 }); + }); + + it('shows the total without a filter and N of M while filtering', () => { + expect(countText(5, 0, false)).toBe('5 instances'); + expect(countText(1, 0, false)).toBe('1 instance'); + expect(countText(5, 2, true)).toBe('2 of 5'); + expect(countText(5, 0, true)).toBe('0 of 5'); + }); + + it('announces the filter result, and nothing once the filter is cleared', () => { + expect(filterAnnouncement(5, 2, 'card')).toBe('2 of 5 instances match.'); + expect(filterAnnouncement(5, 0, 'zzz')).toBe('No components match.'); + expect(filterAnnouncement(5, 0, '')).toBe(''); + }); +}); + +describe('Components selection', () => { + const page = (detail: string | null, tree = roots, pageId = 'p1') => ({ + pageId, + roots: tree, + detail: detail ? { id: detail } : null, + }); + + it('keeps the panel selection while the page still reports the previous one', () => { + const next = reconcileSelection({ pageId: 'p1', selectedId: 'c3', detailId: 'c4' }, page('c4')); + expect(next).toEqual({ pageId: 'p1', selectedId: 'c3', detailId: 'c4', destroyed: null }); + }); + + it('follows a selection made on the page or by an agent', () => { + const next = reconcileSelection({ pageId: 'p1', selectedId: 'c3', detailId: 'c3' }, page('c5')); + expect(next.selectedId).toBe('c5'); + }); + + it('takes the selection of the page it switches to', () => { + const next = reconcileSelection( + { pageId: 'p1', selectedId: 'c3', detailId: 'c3' }, + page('c2', roots, 'p2'), + ); + expect(next).toEqual({ pageId: 'p2', selectedId: 'c2', detailId: 'c2', destroyed: null }); + }); + + it('drops a selected instance that left the tree and reports it as destroyed', () => { + const without = [node('c1', 'App', [node('c2', 'Shell', [node('c3', 'Card')])])]; + const next = reconcileSelection( + { pageId: 'p1', selectedId: 'c4', detailId: 'c4' }, + page(null, without), + ); + expect(next).toEqual({ pageId: 'p1', selectedId: null, detailId: null, destroyed: 'c4' }); + expect( + reconcileSelection( + { pageId: 'p1', selectedId: 'c4', detailId: 'c4' }, + { ...page(null, without), truncated: true }, + ).destroyed, + ).toBeNull(); + }); + + it('moves focus from a removed row to the next remaining row, else the one before', () => { + const before = ['c1', 'c2', 'c3', 'c4', 'c5']; + expect(nearestRow(before, new Set(['c1', 'c2', 'c3', 'c5']), 'c4')).toBe('c5'); + expect(nearestRow(before, new Set(['c1', 'c5']), 'c2')).toBe('c5'); + expect(nearestRow(before, new Set(['c1', 'c2', 'c3', 'c4']), 'c5')).toBe('c4'); + expect(nearestRow(before, new Set(), 'c3')).toBeNull(); + }); +}); + +describe('page choice', () => { + const pages = { + a: { pageId: 'a', reportedAt: 100 }, + b: { pageId: 'b', reportedAt: 200 }, + }; + + it('stays on the shown page when another tab reports later', () => { + const shown = pickPage(pages, { chosen: null, host: null, previous: null }); + expect(shown).toBe('b'); + const later = { ...pages, a: { pageId: 'a', reportedAt: 300 } }; + expect(pickPage(later, { chosen: null, host: null, previous: shown })).toBe('b'); + const alternating = { a: later.a, b: { pageId: 'b', reportedAt: 400 } }; + expect(pickPage(alternating, { chosen: null, host: null, previous: 'b' })).toBe('b'); + }); + + it('falls back to another page only when the shown one is gone', () => { + expect(pickPage({ a: pages.a }, { chosen: null, host: null, previous: 'b' })).toBe('a'); + expect(pickPage({}, { chosen: null, host: null, previous: 'b' })).toBeNull(); + }); + + it('prefers the page picked in the view, then the host page', () => { + expect(pickPage(pages, { chosen: 'a', host: 'b', previous: 'b' })).toBe('a'); + expect(pickPage(pages, { chosen: 'gone', host: 'a', previous: 'b' })).toBe('a'); + expect(pickPage(pages, { chosen: null, host: 'c', previous: 'b' })).toBe('c'); + }); +}); + +describe('Dashboard live cards', () => { + const tree = (n: number) => ({ roots: Array.from({ length: n }, () => ({})) }); + + it('count the injectors of the host page, not the newest page', () => { + const state = { ...tree(5), pages: { p1: tree(2), p2: tree(5) } }; + expect(injectorTreeFor(state, 'p1')?.roots).toHaveLength(2); + expect(injectorTreeFor(state, null)?.roots).toHaveLength(5); + expect(injectorTreeFor(state, 'p3')).toBeNull(); + }); + + it('count the signals of the host page and do not fall back to another page', () => { + const graph = (n: number) => ({ nodes: Array.from({ length: n }, () => ({ kind: 'signal' })) }); + const state = { graph: graph(4), pages: { p1: graph(1) } }; + expect(signalGraphFor(state, 'p1')?.nodes).toHaveLength(1); + expect(signalGraphFor(state, 'p2')).toBeNull(); + expect(signalGraphFor(state, null)?.nodes).toHaveLength(4); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/panel-tab-memory.test.ts b/packages/ng-devtools/src/__tests__/panel-tab-memory.test.ts new file mode 100644 index 0000000..c289b33 --- /dev/null +++ b/packages/ng-devtools/src/__tests__/panel-tab-memory.test.ts @@ -0,0 +1,45 @@ +// @vitest-environment jsdom +import { afterEach, describe, expect, it, vi } from 'vitest'; +import { initialTab, storeTab, storedTab } from '../../../../app/src/tab-memory.ts'; + +const tabs = ['dashboard', 'components', 'routes', 'forms'] as const; + +describe('panel tab on reload', () => { + afterEach(() => { + sessionStorage.clear(); + vi.restoreAllMocks(); + }); + + it('reopens the last tab when the panel reloads without a hash', () => { + storeTab('panel', 'forms'); + expect(initialTab('', storedTab('panel'), tabs)).toBe('forms'); + }); + + it('lets the #tab= deep link win over the stored tab', () => { + storeTab('panel', 'forms'); + expect(initialTab('#tab=routes', storedTab('panel'), tabs)).toBe('routes'); + }); + + it('falls back to the default for a tab that is turned off or unknown', () => { + storeTab('panel', 'store'); + expect(initialTab('', storedTab('panel'), tabs)).toBeUndefined(); + expect(initialTab('#tab=store', 'forms', tabs)).toBeUndefined(); + }); + + it('keeps each view to its own tab', () => { + storeTab('angular', 'routes'); + expect(storedTab('panel')).toBeNull(); + expect(storedTab('angular')).toBe('routes'); + }); + + it('works when storage is blocked', () => { + vi.spyOn(Storage.prototype, 'getItem').mockImplementation(() => { + throw new DOMException('blocked', 'SecurityError'); + }); + vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => { + throw new DOMException('blocked', 'SecurityError'); + }); + expect(() => storeTab('panel', 'forms')).not.toThrow(); + expect(storedTab('panel')).toBeNull(); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/pipes-collector.test.ts b/packages/ng-devtools/src/__tests__/pipes-collector.test.ts index 44bbe7d..6a34882 100644 --- a/packages/ng-devtools/src/__tests__/pipes-collector.test.ts +++ b/packages/ng-devtools/src/__tests__/pipes-collector.test.ts @@ -9,9 +9,9 @@ import { type PipeTransform, } from '@angular/core'; import { TestBed } from '@angular/core/testing'; -import { AsyncPipe, CurrencyPipe, JsonPipe, UpperCasePipe } from '@angular/common'; +import { AsyncPipe, CurrencyPipe, DatePipe, JsonPipe, UpperCasePipe } from '@angular/common'; import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing'; -import { BehaviorSubject } from 'rxjs'; +import { BehaviorSubject, of, type Observable } from 'rxjs'; import { afterEach, describe, expect, it, vi } from 'vitest'; import { attachPipes } from '../pipes-collector.ts'; import { setRedaction } from '../forms-privacy.ts'; @@ -64,6 +64,20 @@ class JoinPipe implements PipeTransform { } Pipe({ name: 'join' })(JoinPipe); +class KeysPipe implements PipeTransform { + transform(value: Map | Set): string { + return [...value.keys()].join(','); + } +} +Pipe({ name: 'keys' })(KeysPipe); + +class FilterPipe implements PipeTransform { + transform(value: string[], term: string): string { + return value.filter((v) => v.includes(term)).join(','); + } +} +Pipe({ name: 'filter' })(FilterPipe); + function harness(pageId = 'pg') { const calls: { name: string; args: unknown[] }[] = []; const handlers = new Map unknown>(); @@ -502,6 +516,227 @@ describe('pipes collector', () => { expect(markdown).not.toContain('hunter3'); }); + async function recheck( + fixture: { detectChanges(): void; whenStable(): Promise }, + cdr: ChangeDetectorRef, + ) { + cdr.markForCheck(); + fixture.detectChanges(); + await fixture.whenStable(); + } + + async function report(h: ReturnType) { + h.collector.resume(); + await Promise.resolve(); + return h.reports().at(-1)!; + } + + it('starts each recording from zero calls', async () => { + const fixture = await mount(Receipt); + const h = harness(); + const record = (on: boolean) => h.handlers.get('instrument-pipes')!(on); + record(true); + for (const value of [5, 6, 7]) { + fixture.componentInstance.a.set(value); + fixture.detectChanges(); + } + const first = (await report(h)).pipes.find((p) => p.name === 'currency')!; + expect(first.call?.callCount).toBe(3); + + record(false); + record(true); + expect((await report(h)).pipes.find((p) => p.name === 'currency')!.call).toBeUndefined(); + + fixture.componentInstance.a.set(8); + fixture.detectChanges(); + const second = (await report(h)).pipes.find((p) => p.name === 'currency')!; + expect(second.call?.callCount).toBe(1); + expect(second.call?.lastResult).toBe('$8.00'); + }); + + it('starts each recording with a fresh stale baseline', async () => { + class ListView { + items = signal(['a', 'b']); + cdr = inject(ChangeDetectorRef); + } + Component({ + selector: 'app-list-baseline', + imports: [JoinPipe], + template: `

        {{ items() | join }}

        `, + })(ListView); + const fixture = await mount(ListView); + const h = harness(); + const record = (on: boolean) => h.handlers.get('instrument-pipes')!(on); + record(true); + await report(h); + record(false); + fixture.componentInstance.items().push('c'); + await recheck(fixture, fixture.componentInstance.cdr); + record(true); + expect((await report(h)).pipes.find((p) => p.name === 'join')?.stale).toBeUndefined(); + }); + + it('flags a Date mutated in place and shown with the real DatePipe', async () => { + class When { + when = new Date(2020, 0, 1); + cdr = inject(ChangeDetectorRef); + } + Component({ + selector: 'app-when', + imports: [DatePipe], + template: `

        {{ when | date: 'yyyy' }}

        `, + })(When); + const fixture = await mount(When); + const h = harness(); + h.handlers.get('instrument-pipes')!(true); + await report(h); + + fixture.componentInstance.when.setFullYear(2030); + await recheck(fixture, fixture.componentInstance.cdr); + expect(fixture.nativeElement.textContent).toContain('2020'); + expect((await report(h)).pipes.find((p) => p.name === 'date')?.stale).toBeDefined(); + }); + + it.each([ + [ + 'Map', + () => new Map([['a', 1]]), + (v: Map | Set) => (v as Map).set('b', 2), + ], + [ + 'Set', + () => new Set(['a']), + (v: Map | Set) => (v as Set).add('b'), + ], + ])('flags a %s mutated in place', async (_kind, create, mutate) => { + class Bag { + bag = create(); + cdr = inject(ChangeDetectorRef); + } + Component({ + selector: `app-bag-${_kind.toLowerCase()}`, + imports: [KeysPipe], + template: `

        {{ bag | keys }}

        `, + })(Bag); + const fixture = await mount(Bag); + const h = harness(); + h.handlers.get('instrument-pipes')!(true); + await report(h); + + mutate(fixture.componentInstance.bag); + await recheck(fixture, fixture.componentInstance.cdr); + expect((await report(h)).pipes.find((p) => p.name === 'keys')?.stale).toBeDefined(); + }); + + it('does not flag a pipe that reran because another argument changed', async () => { + class Search { + items = ['apple', 'banana']; + term = signal('a'); + cdr = inject(ChangeDetectorRef); + } + Component({ + selector: 'app-search', + imports: [FilterPipe], + template: `

        {{ items | filter: term() }}

        `, + })(Search); + const fixture = await mount(Search); + const h = harness(); + h.handlers.get('instrument-pipes')!(true); + await report(h); + + fixture.componentInstance.items.push('cherry'); + fixture.componentInstance.term.set('an'); + await recheck(fixture, fixture.componentInstance.cdr); + expect(fixture.nativeElement.textContent).toContain('banana'); + expect((await report(h)).pipes.find((p) => p.name === 'filter')?.stale).toBeUndefined(); + }); + + it('clears a stale finding once the pipe reruns', async () => { + class Search { + items = ['apple', 'banana']; + term = signal('a'); + cdr = inject(ChangeDetectorRef); + } + Component({ + selector: 'app-search2', + imports: [FilterPipe], + template: `

        {{ items | filter: term() }}

        `, + })(Search); + const fixture = await mount(Search); + const h = harness(); + h.handlers.get('instrument-pipes')!(true); + await report(h); + + fixture.componentInstance.items.push('avocado'); + await recheck(fixture, fixture.componentInstance.cdr); + expect((await report(h)).pipes.find((p) => p.name === 'filter')?.stale).toBeDefined(); + + fixture.componentInstance.term.set('av'); + await recheck(fixture, fixture.componentInstance.cdr); + expect(fixture.nativeElement.textContent).toContain('avocado'); + expect((await report(h)).pipes.find((p) => p.name === 'filter')?.stale).toBeUndefined(); + }); + + it('marks an async pipe whose source changes on every check as resubscribing', async () => { + const cached = of('cached'); + class Feed { + stable$ = new BehaviorSubject('stable'); + cdr = inject(ChangeDetectorRef); + getData(): Observable { + return of('fresh'); + } + getCached(): Observable { + return cached; + } + } + Component({ + selector: 'app-resubscribe', + imports: [AsyncPipe], + template: `

        {{ getData() | async }}

        {{ getCached() | async }}

        {{ stable$ | async }}

        `, + })(Feed); + const fixture = await mount(Feed); + const h = harness(); + const flags = async () => (await report(h)).async!.map((a) => a.resubscribing ?? false); + expect(await flags()).toEqual([false, false, false]); + for (let i = 0; i < 2; i++) { + await recheck(fixture, fixture.componentInstance.cdr); + expect(await flags()).toEqual([false, false, false]); + } + await recheck(fixture, fixture.componentInstance.cdr); + expect(await flags()).toEqual([true, false, false]); + + const markdown = explainPipeText( + 'async', + '/nonexistent', + mergePipePageReport(new Map(), h.reports().at(-1)!, 0), + ); + expect(markdown).toContain('**Resubscribing:** 1'); + expect(markdown).toContain('Feed'); + }); + + it('does not mark an async pipe whose source changed once', async () => { + class Feed { + source$ = new BehaviorSubject('one'); + cdr = inject(ChangeDetectorRef); + } + Component({ + selector: 'app-switch', + imports: [AsyncPipe], + template: `

        {{ source$ | async }}

        `, + })(Feed); + const fixture = await mount(Feed); + const h = harness(); + await report(h); + fixture.componentInstance.source$ = new BehaviorSubject('two'); + await recheck(fixture, fixture.componentInstance.cdr); + await report(h); + for (let i = 0; i < 3; i++) { + await recheck(fixture, fixture.componentInstance.cdr); + await report(h); + } + expect(h.reports().at(-1)!.async![0].resubscribing).toBeUndefined(); + }); + it('does nothing harmful when Angular has no debug API on the page', async () => { const my = { rpc: { call: async () => {}, register: () => {} }, diff --git a/packages/ng-devtools/src/__tests__/pipes-pages.test.ts b/packages/ng-devtools/src/__tests__/pipes-pages.test.ts index 7fe05c9..e7f61bf 100644 --- a/packages/ng-devtools/src/__tests__/pipes-pages.test.ts +++ b/packages/ng-devtools/src/__tests__/pipes-pages.test.ts @@ -131,3 +131,12 @@ describe('pipe page targets', () => { ); }); }); + +describe('pipe recording requests', () => { + it('says how many pages the request reached', async () => { + const { invoke } = await boot(); + expect(await invoke('request-instrument-pipes', true)).toEqual({ pages: 0 }); + await invoke('push-pipes', page('tab-1')); + expect(await invoke('request-instrument-pipes', true)).toEqual({ pages: 1 }); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/popup.test.ts b/packages/ng-devtools/src/__tests__/popup.test.ts index fc306bf..0fae444 100644 --- a/packages/ng-devtools/src/__tests__/popup.test.ts +++ b/packages/ng-devtools/src/__tests__/popup.test.ts @@ -1,5 +1,5 @@ // @vitest-environment jsdom -import { beforeEach, describe, expect, it, vi } from 'vitest'; +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; /** The module auto-creates on import and keeps a single instance, so each test * needs it loaded afresh. */ @@ -40,9 +40,37 @@ function parts() { return { fab: shadow.querySelector('.fab') as HTMLButtonElement, panel: shadow.querySelector('.panel') as HTMLElement, + toolbar: shadow.querySelector('.toolbar') as HTMLElement, + dock: (mode: string) => + shadow.querySelector(`.dock-btn[aria-label="Dock ${mode}"]`) as HTMLButtonElement, }; } +/** jsdom has no PointerEvent, so a mouse event carries the pointer fields. */ +function pointer(type: string, x: number, y: number, pointerType = 'touch') { + const event = new MouseEvent(type, { bubbles: true, cancelable: true, clientX: x, clientY: y }); + Object.defineProperties(event, { + pointerId: { value: 1 }, + pointerType: { value: pointerType }, + }); + return event; +} + +function stored() { + return JSON.parse(localStorage.getItem('ng-devtools-popup') ?? '{}'); +} + +/** Hooks the frame to a document the test controls, as a same origin frame is. */ +async function frameDocument() { + await openedSrc(); + const inner = document.createElement('iframe'); + document.body.appendChild(inner); + const doc = inner.contentDocument!; + Object.defineProperty(frame(), 'contentDocument', { get: () => doc }); + frame().dispatchEvent(new Event('load')); + return doc; +} + // One document and one localStorage, so these share state by nature. describe.sequential('devtools popup', () => { beforeEach(() => localStorage.clear()); @@ -210,4 +238,145 @@ describe.sequential('devtools popup', () => { window.innerHeight = height; } }); + + it('brings a panel stored off screen back inside the window, and keeps it there on resize', async () => { + const width = window.innerWidth; + localStorage.setItem( + 'ng-devtools-popup', + JSON.stringify({ x: 3000, y: 3000, width: 720, height: 480, docked: 'float' }), + ); + try { + await loadPopup(true); + parts().fab.click(); + const { panel } = parts(); + expect(parseInt(panel.style.left, 10)).toBe(window.innerWidth - 720); + expect(parseInt(panel.style.top, 10)).toBe(window.innerHeight - 480); + + window.innerWidth = 360; + window.dispatchEvent(new Event('resize')); + expect(parseInt(panel.style.left, 10)).toBe(16); + expect(stored().width ?? 720).toBe(720); + } finally { + window.innerWidth = width; + } + }); + + it('drags the floating panel by touch and remembers where it went', async () => { + await loadPopup(true); + parts().fab.click(); + const { panel, toolbar } = parts(); + const css = toolbar.getRootNode() as ShadowRoot; + expect(css.querySelector('style')!.textContent).toMatch(/\.toolbar \{[^}]*touch-action: none/); + toolbar.dispatchEvent(pointer('pointerdown', 40, 40)); + toolbar.dispatchEvent(pointer('pointermove', 140, 90)); + toolbar.dispatchEvent(pointer('pointerup', 140, 90)); + expect(panel.style.left).toBe('100px'); + expect(panel.style.top).toBe('50px'); + expect(stored()).toMatchObject({ x: 100, y: 50 }); + }); + + it('does not start a drag from the dock or close buttons', async () => { + await loadPopup(true); + parts().fab.click(); + const { panel, dock } = parts(); + const before = panel.style.left; + dock('right').dispatchEvent(pointer('pointerdown', 40, 40, 'mouse')); + parts().toolbar.dispatchEvent(pointer('pointermove', 240, 240, 'mouse')); + expect(panel.style.left).toBe(before); + }); + + it('puts the panel back in its default place on a double click of the toolbar', async () => { + localStorage.setItem( + 'ng-devtools-popup', + JSON.stringify({ x: 200, y: 150, width: 300, height: 200, docked: 'float' }), + ); + await loadPopup(true); + parts().fab.click(); + const { panel, toolbar } = parts(); + expect(panel.style.left).toBe('200px'); + toolbar.dispatchEvent(new MouseEvent('dblclick', { bubbles: true })); + expect(panel.style.left).toBe('16px'); + expect(panel.style.top).toBe('16px'); + expect(stored()).toMatchObject({ x: 16, y: 16 }); + }); + + it('switches docking and returns to the floating place', async () => { + localStorage.setItem( + 'ng-devtools-popup', + JSON.stringify({ x: 50, y: 60, width: 300, height: 200, docked: 'float' }), + ); + await loadPopup(true); + parts().fab.click(); + const { panel, dock } = parts(); + dock('bottom').click(); + expect(panel.classList.contains('dock-bottom')).toBe(true); + expect(panel.style.left).toBe(''); + expect(dock('bottom').getAttribute('aria-pressed')).toBe('true'); + dock('float').click(); + expect(panel.classList.contains('dock-float')).toBe(true); + expect(panel.style.left).toBe('50px'); + expect(stored().docked).toBe('float'); + }); + + it('lets Escape clear a search box in the frame without closing the panel', async () => { + await loadPopup(true); + const doc = await frameDocument(); + const { panel } = parts(); + const search = doc.createElement('input'); + search.type = 'search'; + search.value = 'card'; + search.addEventListener('keydown', () => (search.value = '')); + doc.body.appendChild(search); + + search.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })); + expect(search.value).toBe(''); + expect(panel.classList.contains('open')).toBe(true); + + search.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })); + expect(panel.classList.contains('open')).toBe(false); + }); + + describe('top layer', () => { + let shown: Element[] = []; + beforeEach(() => { + shown = []; + HTMLElement.prototype.showPopover = function (this: HTMLElement) { + shown.push(this); + }; + HTMLElement.prototype.hidePopover = function () {}; + }); + afterEach(() => { + delete (HTMLElement.prototype as Partial).showPopover; + delete (HTMLElement.prototype as Partial).hidePopover; + }); + + it('shows the launcher and panel as popovers, and again above a popover that opens', async () => { + await loadPopup(true); + const { fab, panel } = parts(); + expect(fab.getAttribute('popover')).toBe('manual'); + expect(panel.getAttribute('popover')).toBe('manual'); + expect(shown).toEqual([fab, panel]); + + const menu = document.createElement('div'); + document.body.appendChild(menu); + shown = []; + menu.dispatchEvent(Object.assign(new Event('toggle'), { newState: 'open' })); + expect(shown).toEqual([fab, panel]); + + shown = []; + menu.dispatchEvent(Object.assign(new Event('toggle'), { newState: 'closed' })); + expect(shown).toEqual([]); + }); + + it('stays below a modal dialog, which makes it inert anyway', async () => { + await loadPopup(true); + const dialog = document.createElement('dialog'); + dialog.matches = ((selector: string): boolean => + selector === ':modal') as typeof dialog.matches; + document.body.appendChild(dialog); + shown = []; + dialog.dispatchEvent(Object.assign(new Event('toggle'), { newState: 'open' })); + expect(shown).toEqual([]); + }); + }); }); diff --git a/packages/ng-devtools/src/__tests__/redaction-config.test.ts b/packages/ng-devtools/src/__tests__/redaction-config.test.ts index 905807a..207bb8f 100644 --- a/packages/ng-devtools/src/__tests__/redaction-config.test.ts +++ b/packages/ng-devtools/src/__tests__/redaction-config.test.ts @@ -1,6 +1,10 @@ // @vitest-environment jsdom import { afterEach, describe, expect, it } from 'vitest'; -import { isSecretKey, redactReason, setRedaction } from '../forms-privacy.ts'; +import { REDACTED, isSecretKey, redactReason, setRedaction } from '../forms-privacy.ts'; +import { serialize } from '../serialize.ts'; +import { serialize as ngrxSerialize } from '../ngrx-shared.ts'; +import { serializeFormValue } from '../forms.ts'; +import { keepSecrets, secretInside } from '../forms-actions.ts'; import { redactUrl } from '../router.ts'; import { loadSummary } from '../analog-runtime.ts'; import { previewOf } from '../analog-server-log.ts'; @@ -57,3 +61,59 @@ describe('redaction config', () => { expect(redactReason('password')).toBe('key'); }); }); + +describe('one redaction rule across inspectors', () => { + const jwt = 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxMjM0NSJ9.c2lnbmF0dXJlLXZhbHVl'; + const value = { + pin: '1234', + nickname: 'bob', + dob: '1992-05-05', + voucher: 'SAVE10', + password: 'hunter2', + sessionId: 'abc123', + cookie: 'sid=1', + jwt: 'raw', + city: 'Oslo', + }; + const hidden = ['nickname', 'dob', 'voucher', 'password', 'sessionId', 'cookie', 'jwt']; + const shown = ['pin', 'city']; + + function configure() { + setRedaction({ unmask: ['pin'], secretNames: ['voucher'] }); + page.__NG_DEVTOOLS_FORMS__ = { mask: ['nickname', 'dob'] }; + } + + function check(name: string, out: Record) { + for (const key of hidden) expect(out[key], `${name} ${key}`).toBe(REDACTED); + for (const key of shown) expect(out[key], `${name} ${key}`).toBe(value[key as 'pin']); + } + + it('gives every serializer the same answer for the same keys', () => { + configure(); + check('components and signals', serialize(value) as Record); + check('ngrx', ngrxSerialize(value) as Record); + check('form values', serializeFormValue(value) as Record); + check('analog load()', JSON.parse(loadSummary(value)!.preview!)); + check('analog server calls', JSON.parse(previewOf(JSON.stringify(value), 'application/json')!)); + }); + + it('refuses a group write and keeps the secrets on restore by the same rule', () => { + configure(); + expect(secretInside({ billing: { pin: '1', city: 'x' } })).toBeNull(); + expect(secretInside({ billing: { nickname: 'bob' } })).toBe('billing.nickname'); + expect(keepSecrets({ pin: 'old', dob: 'old' }, { pin: 'new', dob: 'new' })).toEqual({ + pin: 'old', + dob: 'new', + }); + }); + + it('scrubs tokens inside NgRx strings and error messages', () => { + const out = ngrxSerialize({ + auth: { header: `Bearer ${jwt}`, note: `token ${jwt}` }, + error: new Error(`401 for ${jwt}`), + }) as { auth: Record; error: { message: string } }; + expect(JSON.stringify(out)).not.toContain(jwt); + expect(out.auth['header']).toBe(`Bearer ${REDACTED}`); + expect(out.error.message).toBe(`401 for ${REDACTED}`); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/router-actions-wait.test.ts b/packages/ng-devtools/src/__tests__/router-actions-wait.test.ts new file mode 100644 index 0000000..14a9cdd --- /dev/null +++ b/packages/ng-devtools/src/__tests__/router-actions-wait.test.ts @@ -0,0 +1,136 @@ +// @vitest-environment jsdom +import '@angular/compiler'; +import { Component, PendingTasks, inject } from '@angular/core'; +import { TestBed } from '@angular/core/testing'; +import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing'; +import { + RedirectCommand, + Router, + provideRouter, + withNavigationErrorHandler, + type Routes, +} from '@angular/router'; +import { afterEach, beforeEach, describe, expect, it } from 'vitest'; +import { watchRouter, type NavigationRecord } from '../router.ts'; +import { runAction, waitForStable } from '../router-actions.ts'; + +TestBed.initTestEnvironment(BrowserTestingModule, platformBrowserTesting()); + +class Page {} +Component({ selector: 'app-page', template: '' })(Page); + +let landingGuardRuns = 0; +let landingResolverRuns = 0; +const landingGuard = () => { + landingGuardRuns++; + return true; +}; +const landingResolver = () => { + landingResolverRuns++; + return 'x'; +}; + +const routes: Routes = [ + { path: '', component: Page }, + { path: 'plain', component: Page }, + { + path: 'landing', + component: Page, + canActivate: [landingGuard], + resolve: { x: landingResolver }, + }, + { + path: 'members', + component: Page, + canMatch: [() => inject(Router).parseUrl('/landing')], + }, + { + path: 'vip', + component: Page, + canMatch: [() => new RedirectCommand(inject(Router).parseUrl('/landing'))], + }, + { + path: 'crash', + component: Page, + canMatch: [ + () => { + throw new Error('matcher down'); + }, + ], + }, +]; + +describe('router actions that wait on the app', () => { + let router: Router; + let navigations: NavigationRecord[]; + let stop: (() => void) | null; + const act = (request: Parameters[2]) => + runAction(router as never, navigations, request, () => {}) as Promise>; + + beforeEach(async () => { + TestBed.resetTestingModule(); + TestBed.configureTestingModule({ + providers: [ + provideRouter( + routes, + withNavigationErrorHandler( + () => new RedirectCommand(inject(Router).parseUrl('/landing')), + ), + ), + ], + }); + router = TestBed.inject(Router); + navigations = []; + stop = watchRouter(router as never, navigations, () => {}); + await router.navigateByUrl('/'); + landingGuardRuns = 0; + landingResolverRuns = 0; + }); + + afterEach(() => stop?.()); + + it('waitFor "navigation" returns when the navigation ends, without waiting for pending tasks', async () => { + const done = TestBed.inject(PendingTasks).add(); + const result = await act({ action: 'navigate', url: '/plain', waitFor: 'navigation' }); + expect(result).toMatchObject({ outcome: 'succeeded', url: '/plain' }); + expect(result['stable']).toBeUndefined(); + done(); + }); + + it('waitFor "stable" waits until the app has no pending tasks', async () => { + const done = TestBed.inject(PendingTasks).add(); + setTimeout(done, 400); + const started = Date.now(); + const result = await act({ action: 'navigate', url: '/plain', waitFor: 'stable' }); + expect(Date.now() - started).toBeGreaterThanOrEqual(390); + expect(result).toMatchObject({ outcome: 'succeeded', stable: true }); + }); + + it('says when the app did not become stable in time', async () => { + const done = TestBed.inject(PendingTasks).add(); + expect(await waitForStable(router as never, 30)).toBe(false); + done(); + expect(await waitForStable(router as never, 30)).toBe(true); + }); + + it('reports an unknown stability when the router has no pending tasks', async () => { + expect(await waitForStable({} as never, 30)).toBeNull(); + }); + + it.each([ + ['a UrlTree', '/members'], + ['a RedirectCommand', '/vip'], + ['an error the error handler redirects', '/crash'], + ])('stops the redirect when canMatch returns %s', async (_, url) => { + const result = await act({ action: 'probe', url }); + expect(result).toMatchObject({ matched: false, redirectedTo: '/landing' }); + await new Promise((resolve) => setTimeout(resolve, 20)); + expect(router.url).toBe('/'); + expect(landingGuardRuns).toBe(0); + expect(landingResolverRuns).toBe(0); + expect(navigations.filter((n) => n.probe).map((n) => n.outcome)).toEqual([ + 'redirected', + 'cancelled', + ]); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/router-forroot.test.ts b/packages/ng-devtools/src/__tests__/router-forroot.test.ts index 480ebd4..8c45d42 100644 --- a/packages/ng-devtools/src/__tests__/router-forroot.test.ts +++ b/packages/ng-devtools/src/__tests__/router-forroot.test.ts @@ -2,28 +2,101 @@ import '@angular/compiler'; import { Component, importProvidersFrom, provideZonelessChangeDetection } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; -import { Router, RouterModule } from '@angular/router'; -import { expect, it } from 'vitest'; +import { PreloadAllModules, Router, RouterModule, type ExtraOptions } from '@angular/router'; +import { afterEach, beforeEach, expect, it, vi } from 'vitest'; +import { routerOf } from '../analog-runtime.ts'; import { findRouter, type RouterDebugApi } from '../router.ts'; +import { detectSetup, publishesRouterUtil } from '../router-setup.ts'; class Root {} Component({ selector: 'app-root', template: '' })(Root); -it('finds the router of a RouterModule.forRoot app through the injector chain', async () => { +let app: Awaited>; +let ng: RouterDebugApi; + +async function boot(options?: ExtraOptions) { document.body.innerHTML = ''; - const app = await bootstrapApplication(Root, { + app = await bootstrapApplication(Root, { providers: [ provideZonelessChangeDetection(), - importProvidersFrom(RouterModule.forRoot([{ path: '', component: Root }])), + importProvidersFrom(RouterModule.forRoot([{ path: '', component: Root }], options)), ], }); const published = (globalThis as { ng?: RouterDebugApi }).ng!; - const ng: RouterDebugApi = { + ng = { getInjector: published.getInjector, ɵgetInjectorResolutionPath: published.ɵgetInjectorResolutionPath, ɵgetInjectorProviders: published.ɵgetInjectorProviders, }; - expect(published.ɵgetRouterInstance).toBeUndefined(); +} + +beforeEach(() => boot()); + +afterEach(() => app.destroy()); + +it('finds the router of a RouterModule.forRoot app through the injector chain', () => { + expect((globalThis as { ng?: RouterDebugApi }).ng!.ɵgetRouterInstance).toBeUndefined(); expect(findRouter(ng, [document.querySelector('app-root')!])).toBe(app.injector.get(Router)); +}); + +it('finds the router for the Analog report without ng.ɵgetRouterInstance', () => { + expect(routerOf(ng as never)).toBe(app.injector.get(Router)); +}); + +it('reports the setup kind as unknown on versions that never publish the router util', () => { + const root = document.querySelector('app-root')!; + const setupOn = (version: string) => { + root.setAttribute('ng-version', version); + return detectSetup(ng, app.injector.get(Router) as never, 1, root).setupKind; + }; + expect(setupOn('22.1.7')).toBe('forRoot or other'); + expect(setupOn('20.3.5')).toBe('forRoot or other'); + expect(setupOn('20.3.4')).toBe('unknown'); + expect(setupOn('20.0.0')).toBe('unknown'); +}); + +it('knows which versions publish the router util', () => { + expect(publishesRouterUtil('20.3.5')).toBe(true); + expect(publishesRouterUtil('21.0.0-next.1')).toBe(true); + expect(publishesRouterUtil('20.3.4')).toBe(false); + expect(publishesRouterUtil(undefined)).toBe(false); +}); + +it('reads the RouterModule.forRoot options on a real Router', async () => { app.destroy(); + vi.spyOn(console, 'log').mockImplementation(() => {}); + vi.spyOn(console, 'group').mockImplementation(() => {}); + vi.spyOn(console, 'groupEnd').mockImplementation(() => {}); + await boot({ + initialNavigation: 'enabledBlocking', + enableTracing: true, + useHash: true, + bindToComponentInputs: true, + enableViewTransitions: true, + preloadingStrategy: PreloadAllModules, + scrollPositionRestoration: 'top', + anchorScrolling: 'enabled', + onSameUrlNavigation: 'reload', + paramsInheritanceStrategy: 'always', + }); + const root = document.querySelector('app-root')!; + const setup = detectSetup(ng, app.injector.get(Router) as never, 1, root); + vi.restoreAllMocks(); + const values = Object.fromEntries(setup.options.map((o) => [o.name, [o.value, o.set]])); + expect(values).toMatchObject({ + initialNavigation: ['enabledBlocking', true], + scrollPositionRestoration: ['top', true], + anchorScrolling: ['enabled', true], + onSameUrlNavigation: ['reload', true], + paramsInheritanceStrategy: ['always', true], + }); + expect(setup.features).toMatchObject({ + componentInputBinding: 'on', + viewTransitions: 'on', + preloading: 'PreloadAllModules', + scroller: 'on', + debugTracing: 'on', + platformNavigation: 'off', + }); + expect(setup.strategies['locationStrategy']).toBe('HashLocationStrategy'); }); diff --git a/packages/ng-devtools/src/__tests__/router-mcp.test.ts b/packages/ng-devtools/src/__tests__/router-mcp.test.ts index 96384b3..79c2264 100644 --- a/packages/ng-devtools/src/__tests__/router-mcp.test.ts +++ b/packages/ng-devtools/src/__tests__/router-mcp.test.ts @@ -265,6 +265,35 @@ describe('router MCP tools', () => { expect(text).toContain('`link-aria-current`'); }); + it('router-lint says when it could not check instead of returning no findings', async () => { + const { push } = await boot(); + expect(await push('router-lint', 'p1')).toEqual({ checked: false, reason: 'no-page' }); + await push('push-router', report({ config: undefined })); + expect(await push('router-lint', 'p1')).toEqual({ checked: false, reason: 'no-config' }); + await push( + 'push-router', + report({ + pageId: 'p2', + config: undefined, + setup: { ...report().setup, mode: 'events-only' }, + }), + ); + expect(await push('router-lint', 'p2')).toEqual({ checked: false, reason: 'events-only' }); + await push('push-router', report()); + const result = (await push('router-lint', 'p1')) as { checked: boolean; findings: unknown[] }; + expect(result.checked).toBe(true); + expect(result.findings.length).toBeGreaterThan(0); + }); + + it('lint-routes says an events-only page was not checked', async () => { + const { push, call } = await boot(); + await push( + 'push-router', + report({ config: undefined, setup: { ...report().setup, mode: 'events-only' } }), + ); + expect(await call('lint-routes')).toMatch(/No checks ran: page `p1` runs in events-only mode/); + }); + it('explains a redirect loop in explain-navigation, export-navigation and lint-routes', async () => { const { push, call } = await boot(); const hop = (id: number, url: string, to: string, guard: string, from?: number) => ({ @@ -392,8 +421,12 @@ describe('router MCP tools', () => { await push('push-router', { ...report(), pageId: 'bare', snapshot: null }); const broadcast = vi.spyOn(ctx.rpc, 'broadcast'); expect(await call('navigate', { action: 'probe', url: '/', page: 'bare' })).toMatch( - /no router state/i, + /Page `bare` reports no Router/, ); + const unknown = await call('navigate', { action: 'probe', url: '/', page: 'gone' }); + expect(unknown).toMatch(/^No page `gone` is reporting router state\. Pages that report/); + expect(unknown).toContain('`bare`'); + expect(unknown).not.toMatch(/stdio/); expect(await call('navigate', { action: 'resolve-lazy' })).toContain('routeId is required'); expect(broadcast).not.toHaveBeenCalled(); }); diff --git a/packages/ng-devtools/src/__tests__/router-setup-real.test.ts b/packages/ng-devtools/src/__tests__/router-setup-real.test.ts new file mode 100644 index 0000000..29f4dbf --- /dev/null +++ b/packages/ng-devtools/src/__tests__/router-setup-real.test.ts @@ -0,0 +1,163 @@ +// @vitest-environment jsdom +import '@angular/compiler'; +import { HashLocationStrategy, PlatformNavigation } from '@angular/common'; +import { + Component, + provideZonelessChangeDetection, + type EnvironmentProviders, + type Provider, +} from '@angular/core'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { + PreloadAllModules, + Router, + provideRouter, + withComponentInputBinding, + withDebugTracing, + withDisabledInitialNavigation, + withEnabledBlockingInitialNavigation, + withExperimentalAutoCleanupInjectors, + withExperimentalPlatformNavigation, + withHashLocation, + withInMemoryScrolling, + withNavigationErrorHandler, + withPreloading, + withRouterConfig, + ɵwithRouterResources as withRouterResources, + withViewTransitions, + type RouterFeatures, +} from '@angular/router'; +import { afterEach, describe, expect, it, vi } from 'vitest'; +import type { RouterDebugApi } from '../router.ts'; +import { detectSetup, type RouterSetup } from '../router-setup.ts'; + +class Root {} +Component({ selector: 'app-root', template: '' })(Root); + +const routes = [{ path: '', component: Root }]; +let destroy: (() => void) | null = null; + +afterEach(() => { + destroy?.(); + destroy = null; +}); + +async function setupWith( + features: RouterFeatures[], + extra: (Provider | EnvironmentProviders)[] = [], +): Promise { + document.body.innerHTML = ''; + const app = await bootstrapApplication(Root, { + providers: [provideZonelessChangeDetection(), provideRouter(routes, ...features), ...extra], + }); + destroy = () => app.destroy(); + const ng = (globalThis as { ng?: RouterDebugApi }).ng!; + const root = document.querySelector('app-root'); + return detectSetup(ng, app.injector.get(Router) as never, 1, root); +} + +const option = (setup: RouterSetup, name: string) => setup.options.find((o) => o.name === name); + +describe('detectSetup on a real provideRouter app', () => { + it('reports defaults when no feature is used', async () => { + const setup = await setupWith([]); + expect(setup.setupKind).toBe('provideRouter'); + expect(setup.mode).toBe('full'); + expect(option(setup, 'initialNavigation')).toEqual({ + name: 'initialNavigation', + value: 'enabledNonBlocking', + set: false, + }); + expect(setup.features).toEqual({ + componentInputBinding: 'off', + viewTransitions: 'off', + navigationErrorHandler: 'off', + routerResources: 'off', + injectorCleanup: 'off', + preloading: 'off', + scroller: 'off', + debugTracing: 'off', + platformNavigation: 'off', + }); + expect(setup.strategies['locationStrategy']).toBe('PathLocationStrategy'); + }); + + it('reads the initial navigation mode of withEnabledBlockingInitialNavigation()', async () => { + const setup = await setupWith([withEnabledBlockingInitialNavigation()]); + expect(option(setup, 'initialNavigation')).toMatchObject({ + value: 'enabledBlocking', + set: true, + }); + }); + + it('reads the initial navigation mode of withDisabledInitialNavigation()', async () => { + const setup = await setupWith([withDisabledInitialNavigation()]); + expect(option(setup, 'initialNavigation')).toMatchObject({ value: 'disabled', set: true }); + }); + + it('detects withDebugTracing()', async () => { + vi.spyOn(console, 'log').mockImplementation(() => {}); + vi.spyOn(console, 'group').mockImplementation(() => {}); + vi.spyOn(console, 'groupEnd').mockImplementation(() => {}); + const setup = await setupWith([withDebugTracing()]); + expect(setup.features['debugTracing']).toBe('on'); + vi.restoreAllMocks(); + }); + + it.each([ + ['componentInputBinding', withComponentInputBinding(), 'on'], + ['viewTransitions', withViewTransitions(), 'on'], + ['navigationErrorHandler', withNavigationErrorHandler(() => {}), 'on'], + ['routerResources', withRouterResources(), 'on'], + ['injectorCleanup', withExperimentalAutoCleanupInjectors(), 'on'], + ['preloading', withPreloading(PreloadAllModules), 'PreloadAllModules'], + ['scroller', withInMemoryScrolling({ anchorScrolling: 'enabled' }), 'on'], + ] as const)('detects the %s feature', async (name, feature, value) => { + const setup = await setupWith([feature as RouterFeatures]); + expect(setup.features[name]).toBe(value); + }); + + it('detects withExperimentalPlatformNavigation()', async () => { + const navigation = Object.assign(new EventTarget(), { + currentEntry: { url: 'http://localhost/', key: '0', id: '0', index: 0, getState: () => null }, + entries: () => [], + transition: null, + navigate: () => ({ committed: Promise.resolve(), finished: Promise.resolve() }), + }); + const setup = await setupWith( + [withExperimentalPlatformNavigation()], + [{ provide: PlatformNavigation, useValue: navigation }], + ); + expect(setup.features['platformNavigation']).toBe('on'); + }); + + it('reads scrolling options and withRouterConfig() options', async () => { + const setup = await setupWith([ + withInMemoryScrolling({ scrollPositionRestoration: 'top', anchorScrolling: 'enabled' }), + withRouterConfig({ + onSameUrlNavigation: 'reload', + paramsInheritanceStrategy: 'always', + urlUpdateStrategy: 'eager', + canceledNavigationResolution: 'computed', + defaultQueryParamsHandling: 'merge', + resolveNavigationPromiseOnError: true, + }), + ]); + const values = Object.fromEntries(setup.options.map((o) => [o.name, [o.value, o.set]])); + expect(values).toMatchObject({ + onSameUrlNavigation: ['reload', true], + paramsInheritanceStrategy: ['always', true], + urlUpdateStrategy: ['eager', true], + canceledNavigationResolution: ['computed', true], + defaultQueryParamsHandling: ['merge', true], + resolveNavigationPromiseOnError: ['true', true], + scrollPositionRestoration: ['top', false], + anchorScrolling: ['enabled', false], + }); + }); + + it('names the location strategy of withHashLocation()', async () => { + const setup = await setupWith([withHashLocation()]); + expect(setup.strategies['locationStrategy']).toBe(HashLocationStrategy.name); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/router-shared-guards.test.ts b/packages/ng-devtools/src/__tests__/router-shared-guards.test.ts new file mode 100644 index 0000000..ca48f61 --- /dev/null +++ b/packages/ng-devtools/src/__tests__/router-shared-guards.test.ts @@ -0,0 +1,97 @@ +// @vitest-environment jsdom +import '@angular/compiler'; +import { Component, Injectable } from '@angular/core'; +import { TestBed } from '@angular/core/testing'; +import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing'; +import { Router, provideRouter, type Routes } from '@angular/router'; +import { afterEach, beforeEach, describe, expect, it } from 'vitest'; +import { watchRouter, type NavigationRecord } from '../router.ts'; +import { instrument } from '../router-actions.ts'; + +TestBed.initTestEnvironment(BrowserTestingModule, platformBrowserTesting()); + +class Page {} +Component({ selector: 'app-page', template: '' })(Page); + +class AuthGuard { + canActivate() { + return true; + } + canActivateChild() { + return true; + } + canMatch() { + return true; + } +} +Injectable({ providedIn: 'root' })(AuthGuard); + +class UserResolver { + resolve() { + return 'user'; + } +} +Injectable({ providedIn: 'root' })(UserResolver); + +const routes: Routes = [ + { path: '', component: Page }, + { path: 'a', component: Page, canActivate: [AuthGuard], resolve: { user: UserResolver } }, + { path: 'b', component: Page, canActivate: [AuthGuard], resolve: { owner: UserResolver } }, + { path: 'm1', component: Page, canMatch: [AuthGuard] }, + { path: 'm2', component: Page, canMatch: [AuthGuard] }, + { + path: 'p1', + canActivateChild: [AuthGuard], + children: [{ path: 'c', component: Page }], + }, + { + path: 'p2', + canActivateChild: [AuthGuard], + children: [{ path: 'c', component: Page }], + }, +]; + +describe('instrumented class guards and resolvers shared by several routes', () => { + let router: Router; + let navigations: NavigationRecord[]; + let cleanup: (() => void)[]; + const last = () => navigations[navigations.length - 1]; + + beforeEach(async () => { + TestBed.resetTestingModule(); + TestBed.configureTestingModule({ providers: [provideRouter(routes)] }); + router = TestBed.inject(Router); + navigations = []; + cleanup = []; + const stop = watchRouter(router as never, navigations, () => {}); + if (stop) cleanup.push(stop); + cleanup.push(instrument(router as never, navigations)); + await router.navigateByUrl('/'); + }); + + afterEach(() => { + for (const fn of cleanup.reverse()) fn(); + }); + + it('names the route and resolve key each run was for', async () => { + await router.navigateByUrl('/b'); + expect(last().runs).toEqual([ + expect.objectContaining({ guard: 'AuthGuard', kind: 'canActivate', route: '/b' }), + expect.objectContaining({ guard: 'owner: UserResolver', kind: 'resolve', route: '/b' }), + ]); + await router.navigateByUrl('/a'); + expect(last().runs).toEqual([ + expect.objectContaining({ guard: 'AuthGuard', kind: 'canActivate', route: '/a' }), + expect.objectContaining({ guard: 'user: UserResolver', kind: 'resolve', route: '/a' }), + ]); + }); + + it('names the route for canMatch and canActivateChild runs', async () => { + await router.navigateByUrl('/m2'); + expect(last().runs).toEqual([expect.objectContaining({ kind: 'canMatch', route: '/m2' })]); + await router.navigateByUrl('/p2/c'); + expect(last().runs).toEqual([ + expect.objectContaining({ kind: 'canActivateChild', route: '/p2' }), + ]); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/router-tools.test.ts b/packages/ng-devtools/src/__tests__/router-tools.test.ts index 9aa6b49..34b1b26 100644 --- a/packages/ng-devtools/src/__tests__/router-tools.test.ts +++ b/packages/ng-devtools/src/__tests__/router-tools.test.ts @@ -1,10 +1,12 @@ import { describe, expect, it } from 'vitest'; import { applyRouterEvent, + droppedNavigations, findRouter, nameOf, redactText, serializeRoute, + trimNavigations, type ActiveRoute, type NavigationRecord, } from '../router.ts'; @@ -260,6 +262,27 @@ describe('router reports', () => { }); }); +describe('dropped navigations', () => { + it('counts what the limit removes and notes it in explain-navigation', () => { + const navigations = Array.from({ length: 8 }, (_, i) => nav(i + 1)); + trimNavigations(navigations, 5); + trimNavigations(navigations, 5); + navigations.push(nav(9)); + trimNavigations(navigations, 5); + expect(navigations.map((n) => n.id)).toEqual([5, 6, 7, 8, 9]); + expect(droppedNavigations(navigations)).toBe(4); + expect(droppedNavigations([])).toBe(0); + + const report = { pageId: 'a', snapshot: null, navigations, dropped: 4 }; + expect(isRouterReport(report)).toBe(true); + expect(isRouterReport({ ...report, dropped: 'x' })).toBe(false); + expect(explainNavigationText(state({ navigations, dropped: 4 }), {}, 1_000)).toContain( + '4 older navigations were dropped at the limit', + ); + expect(explainNavigationText(state({ navigations }), {}, 1_000)).not.toContain('dropped'); + }); +}); + describe('router tool text', () => { it('describes the active route tree', () => { const text = inspectRouteText(state(), {}, 1_000); diff --git a/packages/ng-devtools/src/__tests__/signal-graph-real.test.ts b/packages/ng-devtools/src/__tests__/signal-graph-real.test.ts new file mode 100644 index 0000000..f7f66c4 --- /dev/null +++ b/packages/ng-devtools/src/__tests__/signal-graph-real.test.ts @@ -0,0 +1,156 @@ +// @vitest-environment jsdom +import '@angular/compiler'; +import { + Component, + Injectable, + afterRenderEffect, + computed, + effect, + inject, + linkedSignal, + provideZonelessChangeDetection, + resource, + signal, + type ApplicationRef, +} from '@angular/core'; +import { httpResource, provideHttpClient } from '@angular/common/http'; +import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { afterEach, describe, expect, it } from 'vitest'; +import { collectSignalGraph, type SignalDebugNg } from '../signal-graph.ts'; + +class TripStore { + readonly trips = signal(['Lisbon'], { debugName: 'trips' }); + readonly saved = signal(0, { debugName: 'saved' }); + constructor() { + effect( + () => { + this.trips(); + this.saved.update((n) => n + 1); + }, + { debugName: 'persistTrips' }, + ); + } +} + +Injectable({ providedIn: 'root' })(TripStore); + +let rejectForecast: (error: Error) => void = () => {}; + +class TripPage { + readonly store = inject(TripStore); + readonly city = signal('Paris', { debugName: 'city' }); + readonly selected = linkedSignal(() => this.city().toUpperCase(), { debugName: 'selected' }); + readonly weather = resource({ + params: () => ({ city: this.city() }), + loader: async ({ params }) => `Sunny in ${params.city}`, + debugName: 'weather', + }); + readonly forecast = resource({ + params: () => this.city(), + loader: () => + new Promise((_, reject) => { + rejectForecast = reject; + }), + debugName: 'forecast', + }); + readonly unnamed = resource({ params: () => this.city(), loader: async () => 1 }); + readonly airport = httpResource<{ code: string }>(() => `/api/airports/${this.city()}`, { + debugName: 'airport', + }); + readonly log = computed(() => `${this.city()} ${this.store.trips().length}`, { + debugName: 'log', + }); + constructor() { + effect(() => this.log(), { debugName: 'logEffect' }); + afterRenderEffect(() => this.selected(), { debugName: 'measure' } as never); + } +} + +Component({ + selector: 'app-root', + template: `{{ city() }} {{ weather.value() }} {{ weather.status() }} {{ forecast.error() }} + {{ unnamed.value() }} {{ airport.value() }} {{ airport.statusCode() }} {{ selected() }}`, +})(TripPage); + +const settle = async (app: ApplicationRef) => { + for (let i = 0; i < 5; i++) { + await new Promise((resolve) => setTimeout(resolve, 0)); + app.tick(); + } +}; + +describe('collectSignalGraph with a real app', () => { + let app: ApplicationRef | null = null; + afterEach(() => { + app?.destroy(); + app = null; + }); + + it('folds resource and httpResource internals into entries with status, params, value and error', async () => { + document.body.innerHTML = ''; + app = await bootstrapApplication(TripPage, { + providers: [ + provideZonelessChangeDetection(), + provideHttpClient(), + provideHttpClientTesting(), + ], + }); + await settle(app); + const http = app.injector.get(HttpTestingController); + http.expectOne('/api/airports/Paris').flush({ code: 'CDG' }, { status: 200, statusText: 'OK' }); + rejectForecast(new Error('Forecast service down')); + await settle(app); + + const ng = (globalThis as { ng?: SignalDebugNg }).ng!; + const graph = collectSignalGraph(ng)!; + const byName = Object.fromEntries((graph.resources ?? []).map((r) => [r.name, r])); + expect(Object.keys(byName).sort()).toEqual(['airport', 'forecast', 'resource 1', 'weather']); + + expect(byName['weather']).toMatchObject({ + named: true, + status: 'resolved', + isLoading: false, + params: { city: 'Paris' }, + value: 'Sunny in Paris', + }); + expect(byName['forecast']).toMatchObject({ status: 'error', params: 'Paris' }); + expect(byName['forecast'].error).toContain('Forecast service down'); + expect('value' in byName['forecast']).toBe(false); + expect(byName['resource 1']).toMatchObject({ named: false, status: 'resolved', value: 1 }); + expect(byName['airport']).toMatchObject({ + status: 'resolved', + params: { method: 'GET', url: '/api/airports/Paris' }, + value: { code: 'CDG' }, + statusCode: 200, + }); + + const internals = new Set(graph.resources!.flatMap((r) => r.nodeIds)); + const outside = graph.nodes.filter((n) => !internals.has(n.id)).map((n) => n.label); + expect(outside).not.toContainEqual(expect.stringMatching(/^Resource|^_statusCode|^stream$/)); + expect(outside).toEqual(expect.arrayContaining(['city', 'selected', 'log', 'logEffect'])); + const selected = graph.nodes.find((n) => n.label === 'selected'); + expect(selected).toMatchObject({ kind: 'linkedSignal', value: 'PARIS' }); + expect(graph.nodes.some((n) => n.kind === 'afterRenderEffectPhase')).toBe(true); + }); + + it('reports the effects of root services for the root target', async () => { + document.body.innerHTML = ''; + app = await bootstrapApplication(TripPage, { + providers: [ + provideZonelessChangeDetection(), + provideHttpClient(), + provideHttpClientTesting(), + ], + }); + await settle(app); + const ng = (globalThis as { ng?: SignalDebugNg }).ng!; + const component = collectSignalGraph(ng)!; + expect(component.environments?.map((e) => e.name)).toContain('Root'); + const root = collectSignalGraph(ng, { env: 'root' })!; + expect(root.injector?.name).toBe('Root'); + expect(root.nodes.map((n) => n.label)).toEqual( + expect.arrayContaining(['persistTrips', 'trips']), + ); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/signal-graph.test.ts b/packages/ng-devtools/src/__tests__/signal-graph.test.ts index 2fe8395..de770fb 100644 --- a/packages/ng-devtools/src/__tests__/signal-graph.test.ts +++ b/packages/ng-devtools/src/__tests__/signal-graph.test.ts @@ -2,8 +2,11 @@ import { describe, expect, it } from 'vitest'; import { elementId } from '../element-id.ts'; import { + MAX_NODES, collectSignalGraph, graphKey, + injectorMatches, + isEnvironmentRequest, routedComponent, toSignalTarget, type SignalDebugNg, @@ -143,6 +146,8 @@ describe('collectSignalGraph values', () => { (selection as unknown as Record)[SIGNAL] = { kind: 'linkedSignal', debugName: 'selection', + version: 2, + value: 'Paris', }; const other = () => 'nope'; (other as unknown as Record)[SIGNAL] = { kind: 'signal', debugName: 'other' }; @@ -171,6 +176,8 @@ describe('collectSignalGraph values', () => { (password as unknown as Record)[SIGNAL] = { kind: 'linkedSignal', debugName: 'password', + version: 1, + value: 'hunter2', }; const root = Object.assign(new Root(), { password }); const ng = fakeNg({ 'APP-ROOT': root }, () => ({ @@ -209,6 +216,185 @@ describe('collectSignalGraph values', () => { }); }); +function linked(debugName: string, version: number, value: unknown, extra: object = {}) { + const getter = () => { + throw new Error('the overlay must not call the signal'); + }; + (getter as unknown as Record)[SIGNAL] = { + kind: 'linkedSignal', + debugName, + version, + value, + ...extra, + }; + return getter; +} + +describe('collectSignalGraph linkedSignal values', () => { + const graphWith = (root: object, nodes: { id: string; label: string; epoch: number }[]) => { + document.body.innerHTML = ``; + return collectSignalGraph( + fakeNg({ 'APP-ROOT': root }, () => ({ + nodes: nodes.map((n) => ({ ...n, kind: 'linkedSignal' })), + edges: [], + })), + )!; + }; + + it('gives a same-named store node no value instead of the component one', () => { + const root = Object.assign(new Root(), { selectedId: linked('selectedId', 3, 'local') }); + const graph = graphWith(root, [ + { id: '1', label: 'selectedId', epoch: 3 }, + { id: '2', label: 'selectedId', epoch: 7 }, + ]); + expect(graph.nodes[0].value).toBe('local'); + expect('value' in graph.nodes[1]).toBe(false); + }); + + it('shows nothing when two same-named nodes share the version of the field', () => { + const root = Object.assign(new Root(), { selectedId: linked('selectedId', 1, 'local') }); + const graph = graphWith(root, [ + { id: '1', label: 'selectedId', epoch: 1 }, + { id: '2', label: 'selectedId', epoch: 1 }, + ]); + expect(graph.nodes.some((n) => 'value' in n)).toBe(false); + }); + + it('shows nothing when two fields match the same name and version', () => { + const root = Object.assign(new Root(), { + a: linked('selectedId', 3, 'one'), + b: linked('selectedId', 3, 'two'), + }); + const graph = graphWith(root, [{ id: '1', label: 'selectedId', epoch: 3 }]); + expect('value' in graph.nodes[0]).toBe(false); + }); + + it('skips a dirty node and never runs the computation', () => { + const root = Object.assign(new Root(), { + selectedId: linked('selectedId', 3, 'stale', { dirty: true }), + }); + const graph = graphWith(root, [{ id: '1', label: 'selectedId', epoch: 3 }]); + expect('value' in graph.nodes[0]).toBe(false); + }); +}); + +describe('collectSignalGraph limits and versions', () => { + it('marks a graph whose nodes have no ids (Angular before 20.1) as unsupported', () => { + document.body.innerHTML = ``; + const ng = fakeNg(standard, () => ({ + nodes: [ + { kind: 'signal', label: 'count', value: 1 }, + { kind: 'template', label: 'app-root' }, + ] as never, + edges: [{ consumer: 1, producer: 0 }], + })); + const graph = collectSignalGraph(ng)!; + expect(graph).toEqual({ nodes: [], edges: [], unsupported: true }); + expect(graphKey(graph)).toBe(graphKey(collectSignalGraph(ng)!)); + }); + + it('reports the full node count when it keeps only the first nodes', () => { + document.body.innerHTML = ``; + const total = MAX_NODES + 25; + const ng = fakeNg(standard, () => ({ + nodes: Array.from({ length: total }, (_, i) => ({ + id: String(i + 1), + kind: 'signal', + label: `s${i}`, + epoch: 0, + value: i, + })), + edges: [{ consumer: 0, producer: total - 1 }], + })); + const graph = collectSignalGraph(ng)!; + expect(graph.nodes).toHaveLength(MAX_NODES); + expect(graph.nodeCount).toBe(total); + expect(graph.edges).toEqual([]); + }); + + it('sets no node count when nothing was cut', () => { + document.body.innerHTML = ``; + expect('nodeCount' in collectSignalGraph(fakeNg(standard))!).toBe(false); + }); +}); + +describe('collectSignalGraph environment injectors', () => { + const platform = { scopes: new Set(['platform']) }; + const root = { scopes: new Set(['environment', 'root']) }; + const route = { scopes: new Set(['environment']), source: 'Route: admin' }; + const environment = new Set([platform, root, route]); + + function envNg(): SignalDebugNg { + return { + ...fakeNg(standard, (injector) => { + if (injector === (root as unknown)) { + return { + nodes: [ + { id: '10', kind: 'effect', label: 'persistTrips', epoch: 2 }, + { id: '11', kind: 'signal', label: 'trips', epoch: 2, value: 3 }, + ], + edges: [{ consumer: 0, producer: 1 }], + }; + } + if (injector === (route as unknown)) { + return { nodes: [{ id: '20', kind: 'effect', label: 'audit', epoch: 1 }], edges: [] }; + } + return fakeNg(standard).ɵgetSignalGraph!(injector); + }), + ɵgetInjectorResolutionPath: (injector) => + (injector as Element).tagName === 'APP-PAGE' + ? [injector, route, root, platform] + : [injector, root, platform], + ɵgetInjectorMetadata: (injector) => + environment.has(injector as object) + ? { type: 'environment', source: (injector as { source?: string }).source ?? null } + : { type: 'element', source: injector }, + }; + } + + const page = ` + + + `; + + it('lists root and route injectors next to a component graph, without the platform', () => { + document.body.innerHTML = page; + const graph = collectSignalGraph(envNg())!; + expect(graph.componentSelector).toBe('app-page'); + expect(graph.environments?.map((e) => e.name)).toEqual(['Root', 'Route: admin']); + }); + + it('reports the effects of the root injector for the root target', () => { + document.body.innerHTML = page; + const graph = collectSignalGraph(envNg(), { env: 'root' })!; + expect(graph.component).toBeUndefined(); + expect(graph.injector?.name).toBe('Root'); + expect(graph.source).toBe('selected'); + expect(graph.nodes.map((n) => n.label)).toEqual(['persistTrips', 'trips']); + expect(graphKey(graph)).not.toBe(graphKey(collectSignalGraph(envNg())!)); + }); + + it('targets a route injector by path or id, and falls back when none matches', () => { + document.body.innerHTML = page; + const byPath = collectSignalGraph(envNg(), { env: '/admin' })!; + expect(byPath.injector?.name).toBe('Route: admin'); + const byId = collectSignalGraph(envNg(), { env: byPath.injector!.id })!; + expect(byId.nodes[0].label).toBe('audit'); + expect(collectSignalGraph(envNg(), { env: '/nope' })?.componentSelector).toBe('app-page'); + }); + + it('matches injector requests by id, root and route path', () => { + const admin = { id: 'inj-4', name: 'Route: admin' }; + expect(injectorMatches(admin, 'inj-4')).toBe(true); + expect(injectorMatches(admin, '/admin/')).toBe(true); + expect(injectorMatches(admin, 'Route: admin')).toBe(true); + expect(injectorMatches(admin, 'root')).toBe(false); + expect(injectorMatches({ id: 'inj-1', name: 'Root' }, 'ROOT')).toBe(true); + expect(isEnvironmentRequest('/admin')).toBe(true); + expect(isEnvironmentRequest('app-root')).toBe(false); + }); +}); + describe('toSignalTarget', () => { it('ignores requests for another page and accepts agent selectors', () => { expect(toSignalTarget({ pageId: 'b', id: 'c1' }, 'a')).toBeUndefined(); @@ -216,5 +402,15 @@ describe('toSignalTarget', () => { expect(toSignalTarget({ id: null }, 'a')).toBeNull(); expect(toSignalTarget('app-card', 'a')).toEqual({ selector: 'app-card' }); expect(toSignalTarget(null, 'a')).toBeNull(); + expect(toSignalTarget({ pageId: 'a', env: 'root' }, 'a')).toEqual({ env: 'root' }); + }); +}); + +describe('toSignalTarget with a page', () => { + it('accepts a CSS selector sent to one page', () => { + expect(toSignalTarget({ pageId: 'a', selector: '.promo' }, 'a')).toEqual({ + selector: '.promo', + }); + expect(toSignalTarget({ pageId: 'b', selector: '.promo' }, 'a')).toBeUndefined(); }); }); diff --git a/packages/ng-devtools/src/__tests__/signal-history.test.ts b/packages/ng-devtools/src/__tests__/signal-history.test.ts index 63a1005..f93cb74 100644 --- a/packages/ng-devtools/src/__tests__/signal-history.test.ts +++ b/packages/ng-devtools/src/__tests__/signal-history.test.ts @@ -71,6 +71,36 @@ describe('createSignalHistory', () => { expect(list.at(-1)?.value).toBe('last'); }); + it('keeps counting changes past the list cap', () => { + const h = createSignalHistory(identity); + const raw: RawSignalNode = { debugName: 'count', kind: 'signal', value: 0, version: 0 }; + h.collect([graphNode('a', 'count', 0, 0)]); + for (let i = 1; i <= 500; i++) write(h.onWrite, raw, i); + const list = h.collect([graphNode('a', 'count', 500, 500)])['a']; + expect(list).toHaveLength(MAX_CHANGES); + expect(h.changesOf('a')).toBe(500); + h.collect([graphNode('a', 'count', 510, 510)]); + expect(h.changesOf('a')).toBe(510); + }); + + it('counts no change for the initial value', () => { + const h = createSignalHistory(identity); + h.collect([graphNode('a', 'x', 3, 'v')]); + expect(h.changesOf('a')).toBe(0); + expect(h.changesOf('unknown')).toBe(0); + }); + + it('records resource status changes', () => { + const h = createSignalHistory(identity); + h.collect([graphNode('resource:1', 'trips', 1, 'loading', 'resource')]); + const out = h.collect([graphNode('resource:1', 'trips', 3, 'resolved', 'resource')]); + expect(out['resource:1'].map((c) => [c.value, c.source, c.missed])).toEqual([ + ['loading', 'initial', undefined], + ['resolved', 'sample', 1], + ]); + expect(h.changesOf('resource:1')).toBe(2); + }); + it('keeps history of nodes that left the graph, so switching components back keeps it', () => { const h = createSignalHistory(identity); h.collect([graphNode('a', 'x', 1, 1)]); diff --git a/packages/ng-devtools/src/__tests__/signal-resources.test.ts b/packages/ng-devtools/src/__tests__/signal-resources.test.ts new file mode 100644 index 0000000..f60f47c --- /dev/null +++ b/packages/ng-devtools/src/__tests__/signal-resources.test.ts @@ -0,0 +1,76 @@ +import { describe, expect, it } from 'vitest'; +import { groupResources } from '../signal-resources.ts'; +import type { SignalGraphEdge, SignalGraphNode } from '../types.ts'; + +const serialize = (_label: string, value: unknown) => value; + +function node( + id: string, + kind: string, + label?: string, + value?: unknown, + epoch = 1, +): SignalGraphNode { + return { + id, + kind: kind as SignalGraphNode['kind'], + epoch, + ...(label ? { label } : {}), + ...(value !== undefined ? { value } : {}), + }; +} + +describe('groupResources', () => { + it('tells two unnamed resources apart by their edges and numbers them', () => { + const nodes = [ + node('1', 'signal', 'stream', 'user signal'), + node('2', 'computed', 'Resource.value', 'a'), + node('3', 'linkedSignal', 'Resource.state'), + node('4', 'linkedSignal', 'Resource.extRequest'), + node('5', 'computed', 'Resource.value', 'b'), + node('6', 'linkedSignal', 'Resource.state'), + node('7', 'computed', undefined, true), + ]; + const edges: SignalGraphEdge[] = [ + { consumer: 1, producer: 2 }, + { consumer: 2, producer: 3 }, + { consumer: 3, producer: 0 }, + { consumer: 4, producer: 5 }, + { consumer: 6, producer: 4 }, + ]; + const resources = groupResources(nodes, edges, [], serialize); + expect(resources.map((r) => [r.name, r.named, r.value, r.nodeIds])).toEqual([ + ['resource 1', false, 'a', ['2', '3', '4']], + ['resource 2', false, 'b', ['5', '6', '7']], + ]); + }); + + it('derives status from the graph when no instance holds the resource', () => { + const nodes = [ + node('1', 'computed', 'Resource#trips.value', '(threw an error)'), + node('2', 'computed', 'Resource#trips.error', 'Error: 500'), + node('3', 'computed', 'Resource#trips.isLoading', false), + node('4', 'linkedSignal', 'Resource#trips.state', undefined, 4), + ]; + const edges = [ + { consumer: 0, producer: 3 }, + { consumer: 1, producer: 3 }, + { consumer: 2, producer: 3 }, + ]; + const [trips] = groupResources(nodes, edges, [], serialize); + expect(trips).toMatchObject({ + id: 'resource:1', + name: 'trips', + status: 'error', + error: 'Error: 500', + isLoading: false, + epoch: 4, + }); + expect('value' in trips).toBe(false); + }); + + it('leaves user signals alone', () => { + const nodes = [node('1', 'signal', 'count', 1), node('2', 'computed', undefined, 2)]; + expect(groupResources(nodes, [{ consumer: 1, producer: 0 }], [], serialize)).toEqual([]); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/store-inspector.test.ts b/packages/ng-devtools/src/__tests__/store-inspector.test.ts new file mode 100644 index 0000000..f5fa706 --- /dev/null +++ b/packages/ng-devtools/src/__tests__/store-inspector.test.ts @@ -0,0 +1,118 @@ +// @vitest-environment jsdom +import { describe, expect, it } from 'vitest'; + +let testBedReady = false; + +async function mount() { + await import('@angular/compiler'); + const { TestBed } = await import('@angular/core/testing'); + const { BrowserTestingModule, platformBrowserTesting } = + await import('@angular/platform-browser/testing'); + const { ViewChild } = await import('@angular/core'); + const { StoreInspector } = await import('../../../../app/src/pages/store-inspector.ts'); + (StoreInspector as unknown as { propDecorators: unknown }).propDecorators = Object.fromEntries( + ['stateTree', 'latestButton', 'cancelButton', 'restoreButton'].map((name) => [ + name, + [{ type: ViewChild, args: [name, { isSignal: true }] }], + ]), + ); + if (!testBedReady) { + TestBed.initTestEnvironment(BrowserTestingModule, platformBrowserTesting()); + testBedReady = true; + } + TestBed.resetTestingModule(); + const fixture = TestBed.createComponent(StoreInspector); + document.body.append(fixture.nativeElement); + const inspector = fixture.componentInstance; + inspector.sourceLoaded.set(true); + inspector.pages.set([ + { + pageId: 'p1', + url: '/', + title: 'App', + reportedAt: 0, + stores: [], + classic: { state: { count: 2 }, devtools: true, scope: 'root' }, + log: [1, 2].map((seq) => ({ + seq, + source: 'store' as const, + storeId: 'store', + type: `[Counter] Add ${seq}`, + action: { type: 'add' }, + origin: seq === 1 ? ('dispatch' as const) : ('effect' as const), + timestamp: 0, + diff: [], + restorable: true, + })), + }, + ]); + await fixture.whenStable(); + const el = fixture.nativeElement as HTMLElement; + const button = (text: string) => + [...el.querySelectorAll('button')].find((b) => b.textContent?.trim() === text)!; + const click = async (text: string) => { + button(text).click(); + await fixture.whenStable(); + }; + const logItem = (seq: number) => + [...el.querySelectorAll('.log-item')].find((b) => + b.textContent?.includes(`#${seq}`), + )!; + return { fixture, inspector, el, button, click, logItem }; +} + +describe('Store inspector', () => { + it('moves focus into the restore confirmation and back when it closes', async () => { + const { fixture, el, button, click, logItem } = await mount(); + logItem(2).click(); + await fixture.whenStable(); + await click('Restore this state'); + const group = el.querySelector('.confirm[role="group"]')!; + expect(group.contains(document.activeElement)).toBe(true); + expect(document.activeElement).toBe(button('Cancel')); + await click('Cancel'); + expect(el.querySelector('.confirm')).toBeNull(); + expect(document.activeElement).toBe(button('Restore this state')); + + await click('Restore this state'); + const escape = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }); + document.activeElement!.dispatchEvent(escape); + await fixture.whenStable(); + expect(escape.defaultPrevented).toBe(true); + expect(el.querySelector('.confirm')).toBeNull(); + expect(document.activeElement).toBe(button('Restore this state')); + fixture.destroy(); + }); + + it('clears the result message when another entry, store or page is picked', async () => { + const { fixture, inspector, el, logItem } = await mount(); + const status = () => el.querySelector('.message[role="status"]')!.textContent!.trim(); + inspector.message.set('Jumped to the state after action #1.'); + await fixture.whenStable(); + expect(status()).toMatch(/Jumped/); + logItem(1).click(); + await fixture.whenStable(); + expect(status()).toBe(''); + inspector.message.set('Restored.'); + inspector.selectStore('store'); + expect(inspector.message()).toBe(''); + inspector.message.set('Restored.'); + inspector.selectPage('p1'); + expect(inspector.message()).toBe(''); + fixture.destroy(); + }); + + it('shows where each action came from', async () => { + const { fixture, el, logItem } = await mount(); + expect(logItem(1).querySelector('.tag')?.textContent?.trim()).toBe('dispatch'); + expect(logItem(2).querySelector('.tag')?.textContent?.trim()).toBe('effect'); + logItem(2).click(); + await fixture.whenStable(); + const terms = [...el.querySelectorAll('.entry dt')].map((dt) => [ + dt.textContent?.trim(), + dt.nextElementSibling?.textContent?.trim(), + ]); + expect(terms).toContainEqual(['Origin', 'NgRx effect (Store.next)']); + fixture.destroy(); + }); +}); diff --git a/packages/ng-devtools/src/__tests__/vite-auth.test.ts b/packages/ng-devtools/src/__tests__/vite-auth.test.ts index 7ac100c..b9eafad 100644 --- a/packages/ng-devtools/src/__tests__/vite-auth.test.ts +++ b/packages/ng-devtools/src/__tests__/vite-auth.test.ts @@ -87,3 +87,59 @@ describe('ngDevtoolsVite hub auth', () => { }); }); }); + +describe('ngDevtoolsVite allowedOrigins', () => { + function plugin(allowedOrigins: string[]) { + hubOptions.length = 0; + const warn = vi.fn(); + const use = vi.fn(); + const server = { + config: { root: process.cwd(), server: {}, logger: { warn } }, + middlewares: { use }, + httpServer: null, + }; + (ngDevtoolsVite({ apiPrefix: 'api', allowedOrigins }).configureServer as (s: unknown) => void)( + server, + ); + const gate = use.mock.calls[0][0] as (req: unknown, res: unknown, next: () => void) => void; + const status = (origin: string) => { + const res = { statusCode: 200, end: vi.fn() }; + const next = vi.fn(); + gate( + { url: '/__devframes/__sse', headers: { origin }, socket: { remoteAddress: '127.0.0.1' } }, + res, + next, + ); + return next.mock.calls.length ? 'next' : res.statusCode; + }; + return { auth: hubOptions[0]?.auth, warn, status }; + } + + it('matches entries with a trailing slash, a path or an uppercase host', () => { + for (const entry of [ + 'https://abc.trycloudflare.com/', + 'https://abc.trycloudflare.com/app', + 'https://ABC.trycloudflare.com', + ]) { + const { auth, warn, status } = plugin([entry]); + expect(auth).toBe(true); + expect(status('https://abc.trycloudflare.com')).toBe('next'); + expect(warn).toHaveBeenCalledWith(expect.stringContaining('"https://abc.trycloudflare.com"')); + } + }); + + it('drops an entry that is not an origin and says so, without turning the code on', () => { + const { auth, warn } = plugin(['abc.trycloudflare.com']); + expect(auth).toBe(false); + expect(warn).toHaveBeenCalledWith(expect.stringContaining('Ignoring allowedOrigins entry')); + }); + + it('keeps an exact origin quiet and warns once per refused origin', () => { + const { warn, status } = plugin(['https://tunnel.example']); + expect(warn).not.toHaveBeenCalled(); + expect(status('https://evil.example')).toBe(403); + expect(status('https://evil.example')).toBe(403); + expect(warn).toHaveBeenCalledTimes(1); + expect(warn).toHaveBeenCalledWith(expect.stringContaining('https://evil.example')); + }); +}); diff --git a/packages/ng-devtools/src/analog-runtime.ts b/packages/ng-devtools/src/analog-runtime.ts index ad9df12..515b795 100644 --- a/packages/ng-devtools/src/analog-runtime.ts +++ b/packages/ng-devtools/src/analog-runtime.ts @@ -1,7 +1,9 @@ +import { keepaliveDue } from './change-detection.ts'; import { hasStateScript, scanHydration } from './http-hydration.ts'; -import { isCustomSecretKey } from './forms-privacy.ts'; +import { isRedactedKey } from './forms-privacy.ts'; import { createHydrationScanner } from './http-overlay.ts'; import { httpRegistry } from './http-rules.ts'; +import { findRouters, type RouterDebugApi } from './router.ts'; type AnyRecord = Record; @@ -30,8 +32,6 @@ export interface AnalogRuntimeReport { const MAX_PREVIEW = 1000; const MAX_PATHS = 500; const MAX_ERRORS = 20; -const HEARTBEAT_MS = 8000; -const SECRET = /pass|pwd|secret|token|api.?key|card|cvv|cvc|ssn|iban|otp|session|cookie|auth/i; function read(fn: () => T, fallback: T): T { try { @@ -70,7 +70,7 @@ function redact(value: unknown, depth = 0): unknown { if (Array.isArray(value)) return value.slice(0, 20).map((item) => redact(item, depth + 1)); const out: Record = {}; for (const [key, item] of Object.entries(value as AnyRecord).slice(0, 30)) { - out[key] = SECRET.test(key) || isCustomSecretKey(key) ? '[redacted]' : redact(item, depth + 1); + out[key] = isRedactedKey(key) ? '[redacted]' : redact(item, depth + 1); } return out; } @@ -163,13 +163,17 @@ export function hydrationErrorOf(args: unknown[]): string | null { } export function routerOf(ng: AnyRecord | undefined): AnyRecord | null { - if (!ng || typeof ng['ɵgetRouterInstance'] !== 'function') return null; - const roots = typeof document !== 'undefined' ? document.querySelectorAll('[ng-version]') : []; - for (const el of Array.from(roots)) { - const router = read(() => ng['ɵgetRouterInstance'](ng['getInjector'](el)), null); - if (router) return router as AnyRecord; + if (!ng) return null; + const roots = Array.from( + typeof document !== 'undefined' ? document.querySelectorAll('[ng-version]') : [], + ); + if (typeof ng['ɵgetRouterInstance'] === 'function') { + for (const el of roots) { + const router = read(() => ng['ɵgetRouterInstance'](ng['getInjector'](el)), null); + if (router) return router as AnyRecord; + } } - return null; + return read(() => findRouters(ng as RouterDebugApi, roots)[0] ?? null, null); } export function hasAnalogMeta(routes: unknown, depth = 0): boolean { @@ -281,7 +285,7 @@ export function attachAnalog( const report = read(() => collectAnalog(getNg(), pageId, hydrationErrors, scanner), null); if (!report || !report.analog) return; const text = JSON.stringify(report); - if (text === last && Date.now() - lastAt < HEARTBEAT_MS) return; + if (text === last && !keepaliveDue(lastAt, refreshMs)) return; last = text; lastAt = Date.now(); void my.rpc.call('push-analog', report).catch(() => {}); diff --git a/packages/ng-devtools/src/analog-server-log.ts b/packages/ng-devtools/src/analog-server-log.ts index 04bdfab..564125a 100644 --- a/packages/ng-devtools/src/analog-server-log.ts +++ b/packages/ng-devtools/src/analog-server-log.ts @@ -1,21 +1,10 @@ import type { IncomingMessage, ServerResponse } from 'node:http'; -import { isCustomSecretKey } from './forms-privacy.ts'; +import { isRedactedKey } from './forms-privacy.ts'; -const SECRET_WORDS = - /^(password|passwd|passphrase|passcode|pass|pwd|secret|token|otp|pin|cvv|cvc|ssn|iban|card|credential|cookie|session|authorization|auth|apikey|jwt)s?$/; const JWT = /\beyJ[\w-]{5,}\.[\w-]{5,}\.[\w-]{5,}/g; const BEARER = /\bBearer\s+[\w.~+/=-]+/gi; const SECRET_QUERY = /([?&][^=&#]*(?:token|secret|password|key|code|session)[^=&#]*=)[^&#]*/gi; -export function isSecretKey(key: string): boolean { - const words = key - .replace(/([a-z0-9])([A-Z])/g, '$1 $2') - .toLowerCase() - .split(/[^a-z0-9]+/) - .filter(Boolean); - return words.some((word) => SECRET_WORDS.test(word)) || SECRET_WORDS.test(words.join('')); -} - export function redactMessage(text: string): string { return text .replace(JWT, '[redacted]') @@ -23,7 +12,9 @@ export function redactMessage(text: string): string { .replace(SECRET_QUERY, '$1[redacted]'); } -export type AnalogCallKind = 'load' | 'fn' | 'api' | 'page'; +export type AnalogCallKind = 'load' | 'action' | 'fn' | 'api' | 'page'; + +export type AnalogActionOutcome = 'success' | 'redirect' | 'invalid' | 'error'; export interface AnalogCall { id: number; @@ -37,6 +28,9 @@ export interface AnalogCall { bytes?: number; from: 'ssr' | 'browser' | 'devtools'; render?: 'ssr' | 'client'; + outcome?: AnalogActionOutcome; + location?: string; + seeded?: boolean; preview?: string; } @@ -92,7 +86,7 @@ export function devOrigin(): string | undefined { } function isSecretJsonKey(key: string): boolean { - return isSecretKey(key) || isCustomSecretKey(key); + return isRedactedKey(key); } function redactJson(value: unknown, depth = 0): unknown { @@ -193,7 +187,8 @@ export function classify( const prefix = apiPrefix ? `/${apiPrefix}` : ''; for (const base of [`${prefix}/_analog/pages`, '/_analog/pages']) { if (path.startsWith(`${base}/`) || path === base) { - return { kind: 'load', route: loadRoute(path.slice(base.length)) }; + const read = method === 'GET' || method === 'HEAD'; + return { kind: read ? 'load' : 'action', route: loadRoute(path.slice(base.length)) }; } } for (const base of [`${prefix}/_analog/fn`, '/_analog/fn']) { @@ -215,6 +210,15 @@ export function classify( export const DEVTOOLS_HEADER = 'x-ng-devtools'; +const SEED = /__analog_fn_([0-9a-f]{16})_/g; +const SEED_TAIL = 40; + +export function actionOutcome(status: number, validationErrors: boolean): AnalogActionOutcome { + if (validationErrors) return 'invalid'; + if (status >= 300 && status < 400) return 'redirect'; + return status >= 200 && status < 300 ? 'success' : 'error'; +} + function fromOf(req: IncomingMessage): AnalogCall['from'] { if (req.headers[DEVTOOLS_HEADER]) return 'devtools'; const agent = String(req.headers['user-agent'] ?? ''); @@ -235,6 +239,8 @@ export function analogMiddleware(apiPrefix = 'api') { let captured = 0; let bytes = 0; let serverRendered = false; + let tail = ''; + const seeds = new Set(); const capture = match.kind !== 'page'; const keep = (chunk: unknown, encoding?: unknown) => { if (chunk === undefined || chunk === null || typeof chunk === 'function') return; @@ -247,6 +253,11 @@ export function analogMiddleware(apiPrefix = 'api') { bytes += buffer.length; if (!capture && !serverRendered && buffer.includes('ng-server-context')) serverRendered = true; + if (!capture) { + const text = tail + buffer.toString('utf8'); + for (const seed of text.matchAll(SEED)) seeds.add(seed[1]); + tail = text.slice(-SEED_TAIL); + } if (capture && captured < MAX_CAPTURE) { chunks.push(buffer.subarray(0, MAX_CAPTURE - captured)); captured += Math.min(buffer.length, MAX_CAPTURE - captured); @@ -277,7 +288,26 @@ export function analogMiddleware(apiPrefix = 'api') { if (match.kind === 'page') { call.render = serverRendered && res.getHeader('x-analog-no-ssr') !== 'true' ? 'ssr' : 'client'; + for (const id of seeds) { + recordCall({ + at: call.at, + kind: 'fn', + method: 'SSR', + url: `/_analog/fn/${id}`, + route: id, + status: 200, + ms: 0, + from: 'ssr', + seeded: true, + }); + } } else { + if (match.kind === 'action') { + call.outcome = actionOutcome(res.statusCode, !!res.getHeader('x-analog-errors')); + const location = res.getHeader('location'); + if (call.outcome === 'redirect' && location) + call.location = redactMessage(String(location)); + } const preview = previewOf( Buffer.concat(chunks).toString('utf8'), String(res.getHeader('content-type') ?? ''), @@ -334,3 +364,35 @@ export function duplicateLoads(list: AnalogCall[], windowMs = 10_000): Duplicate } return out; } + +export interface ServerFnRefetch { + id: string; + ssrAt: number; + browserAt: number; +} + +/** + * Pairs a server function read that server rendering seeded into TransferState + * with the first browser call of the same function right after that render. + */ +export function refetchedServerFns(list: AnalogCall[], windowMs = 10_000): ServerFnRefetch[] { + const out: ServerFnRefetch[] = []; + let seeds = new Map(); + let armed = new Map(); + let armedAt = 0; + for (const call of list) { + if (call.from === 'devtools' || !call.route) continue; + if (call.kind === 'page') { + armed = call.from === 'browser' && call.render === 'ssr' ? seeds : new Map(); + armedAt = call.at; + seeds = new Map(); + } else if (call.kind === 'fn') { + if (call.seeded) seeds.set(call.route, call.at); + else if (call.from === 'browser' && armed.has(call.route) && call.at - armedAt <= windowMs) { + out.push({ id: call.route, ssrAt: armed.get(call.route)!, browserAt: call.at }); + armed.delete(call.route); + } + } + } + return out; +} diff --git a/packages/ng-devtools/src/cd-overlay.ts b/packages/ng-devtools/src/cd-overlay.ts new file mode 100644 index 0000000..c56c659 --- /dev/null +++ b/packages/ng-devtools/src/cd-overlay.ts @@ -0,0 +1,108 @@ +import { addProfilerListener } from './change-detection.ts'; +import { createCdRecorder, type CdRecording } from './cd-recorder.ts'; +import { elementId } from './element-id.ts'; + +interface RpcScope { + rpc: { + call(name: string, ...args: unknown[]): Promise; + register(definition: { + name: string; + type: 'event'; + jsonSerializable: boolean; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + handler: (...args: any[]) => unknown; + }): void; + }; +} + +export interface CdReport extends CdRecording { + pageId: string; + /** False when the page has no profiler hook to record with (before Angular 20). */ + supported: boolean; +} + +const KEEPALIVE_MS = 8000; + +/** + * Records change detection cycles while the panel or an agent turns recording + * on, and reports them. It does nothing until then. + */ +export function attachChangeDetection( + my: RpcScope, + pageId: string, + getNg: () => unknown, + maxCycles: number, +) { + const recorder = createCdRecorder({ maxCycles }); + const hostIds = new WeakMap(); + let removeListener: (() => void) | null = null; + let supported = true; + let lastJson = ''; + let sentAt = 0; + + const hostId = (instance: object) => { + if (hostIds.has(instance)) return hostIds.get(instance)!; + let id: string | null = null; + try { + const ng = getNg() as { getHostElement?: (instance: object) => unknown } | undefined; + const host = ng?.getHostElement?.(instance); + id = host instanceof Element ? elementId(host) : null; + } catch { + id = null; + } + hostIds.set(instance, id); + return id; + }; + + const setRecording = (on: boolean) => { + if (on) { + removeListener ??= addProfilerListener(getNg(), recorder.onEvent); + supported = removeListener !== null; + if (supported) recorder.start(); + return; + } + recorder.stop(); + removeListener?.(); + removeListener = null; + }; + + const push = async (force = false) => { + if (!force && !recorder.recording && !lastJson) return; + const report: CdReport = { pageId, supported, ...recorder.snapshot(hostId) }; + const json = JSON.stringify(report); + if (!force && json === lastJson) { + if (Date.now() - sentAt < KEEPALIVE_MS) return; + sentAt = Date.now(); + const answer = (await my.rpc.call('ping-change-detection', pageId)) as + { known?: boolean } | undefined; + if (answer?.known !== false) return; + } + lastJson = json; + sentAt = Date.now(); + await my.rpc.call('push-change-detection', report); + }; + + my.rpc.register({ + name: 'change-detection-record', + type: 'event', + jsonSerializable: true, + handler: (message: { pageId?: unknown; on?: unknown; clear?: unknown } | null) => { + if (typeof message?.pageId === 'string' && message.pageId !== pageId) return; + if (typeof message?.on === 'boolean') setRecording(message.on); + if (message?.clear === true) recorder.clear(); + void push(true).catch(() => {}); + }, + }); + + return { + push, + get recording() { + return recorder.recording; + }, + leave: () => { + lastJson = ''; + void my.rpc.call('forget-change-detection-page', pageId).catch(() => {}); + }, + stop: () => setRecording(false), + }; +} diff --git a/packages/ng-devtools/src/cd-recorder.ts b/packages/ng-devtools/src/cd-recorder.ts new file mode 100644 index 0000000..e5f46ec --- /dev/null +++ b/packages/ng-devtools/src/cd-recorder.ts @@ -0,0 +1,283 @@ +import { className } from './injector-tree.ts'; + +/** Angular's `ProfilerEvent` values that the recorder reads. */ +export const PROFILER_EVENT = { + OutputStart: 6, + ChangeDetectionStart: 12, + ChangeDetectionEnd: 13, + ChangeDetectionSyncStart: 14, + ComponentStart: 18, + ComponentEnd: 19, +} as const; + +const TOP_PER_CYCLE = 10; +const MAX_COMPONENTS = 100; +const MAX_HOSTS = 2000; + +export interface CdCheck { + name: string; + checks: number; + /** Time in the component's own template and hooks, children excluded. */ + ms: number; +} + +export interface CdCycle { + id: number; + at: number; + ms: number; + /** How many times Angular synchronized the views in this tick. */ + passes: number; + /** The output listener that ran last before the tick, when there was one. */ + trigger?: string; + checks: number; + components: CdCheck[]; +} + +export interface CdComponentStat { + name: string; + checks: number; + ms: number; + maxMs: number; + cycles: number; +} + +export interface CdRecording { + recording: boolean; + startedAt: number | null; + cycles: CdCycle[]; + /** Older cycles removed at `limits.cdCycles`. */ + dropped: number; + components: CdComponentStat[]; + /** Checks per component host, keyed by the component tree's element id. */ + hosts: Record; +} + +type Ctor = object; + +interface RawCycle { + id: number; + at: number; + start: number; + ms: number; + passes: number; + trigger?: string; + checks: Map; +} + +interface Frame { + start: number; + children: number; +} + +function nameOf(instance: unknown): string { + const ctor = (instance as { constructor?: Ctor } | null)?.constructor; + return typeof ctor === 'function' ? className(ctor as { name?: string }) : '?'; +} + +function triggerText( + trigger: { owner: unknown; listener: unknown } | undefined, +): string | undefined { + if (!trigger) return undefined; + const owner = nameOf(trigger.owner); + const listener = + typeof trigger.listener === 'function' ? (trigger.listener as { name?: string }).name : ''; + return listener && !/^(wrapListener|anonymous|bound )/.test(listener) + ? `${owner} (${listener})` + : owner; +} + +const round = (ms: number) => Math.round(ms * 100) / 100; + +/** + * Records change detection cycles from Angular's profiler. `onEvent` keeps + * classes, numbers and weak references to instances; names and ids are built + * in `snapshot`. + */ +export function createCdRecorder(options: { + maxCycles: number; + now?: () => number; + clock?: () => number; +}) { + const now = options.now ?? (() => performance.now()); + const clock = options.clock ?? Date.now; + let recording = false; + let startedAt: number | null = null; + let seq = 0; + let dropped = 0; + let cycles: RawCycle[] = []; + let current: RawCycle | null = null; + let stack: Frame[] = []; + let lastOutput: { owner: unknown; listener: unknown } | undefined; + let totals = new Map(); + let perInstance = new WeakMap(); + let instances: WeakRef[] = []; + let prunedCycle = 0; + + const onEvent = (event: number, instance?: unknown, hook?: unknown) => { + if (!recording) return; + switch (event) { + case PROFILER_EVENT.OutputStart: + if (!current) lastOutput = { owner: instance, listener: hook }; + return; + case PROFILER_EVENT.ChangeDetectionStart: + current = { + id: ++seq, + at: clock(), + start: now(), + ms: 0, + passes: 0, + trigger: triggerText(lastOutput), + checks: new Map(), + }; + lastOutput = undefined; + stack = []; + return; + case PROFILER_EVENT.ChangeDetectionSyncStart: + if (current) current.passes++; + return; + case PROFILER_EVENT.ComponentStart: + if (current) stack.push({ start: now(), children: 0 }); + return; + case PROFILER_EVENT.ComponentEnd: { + const frame = current ? stack.pop() : undefined; + if (!current || !frame || !instance || typeof instance !== 'object') return; + const total = now() - frame.start; + const self = Math.max(0, total - frame.children); + const parent = stack.at(-1); + if (parent) parent.children += total; + const ctor = (instance as { constructor: Ctor }).constructor; + const check = current.checks.get(ctor); + if (check) { + check.checks++; + check.ms += self; + } else { + current.checks.set(ctor, { checks: 1, ms: self }); + } + const stat = totals.get(ctor); + if (stat) { + stat.checks++; + stat.ms += self; + stat.maxMs = Math.max(stat.maxMs, self); + if (stat.lastCycle !== current.id) { + stat.cycles++; + stat.lastCycle = current.id; + } + } else if (totals.size < MAX_COMPONENTS * 10) { + totals.set(ctor, { + name: '', + checks: 1, + ms: self, + maxMs: self, + cycles: 1, + lastCycle: current.id, + }); + } + const seen = perInstance.get(instance); + if (seen !== undefined) { + perInstance.set(instance, seen + 1); + return; + } + if (instances.length >= MAX_HOSTS && prunedCycle !== current.id) { + prunedCycle = current.id; + instances = instances.filter((ref) => ref.deref()); + } + if (instances.length < MAX_HOSTS) { + instances.push(new WeakRef(instance)); + perInstance.set(instance, 1); + } + return; + } + case PROFILER_EVENT.ChangeDetectionEnd: { + if (!current) return; + current.ms = now() - current.start; + cycles.push(current); + if (cycles.length > options.maxCycles) { + dropped += cycles.length - options.maxCycles; + cycles = cycles.slice(-options.maxCycles); + } + current = null; + stack = []; + return; + } + } + }; + + const reset = () => { + seq = 0; + dropped = 0; + cycles = []; + current = null; + stack = []; + lastOutput = undefined; + totals = new Map(); + perInstance = new WeakMap(); + instances = []; + prunedCycle = 0; + }; + + return { + onEvent, + get recording() { + return recording; + }, + /** Starts a fresh recording. */ + start() { + reset(); + recording = true; + startedAt = clock(); + }, + /** Stops recording and keeps what it recorded. */ + stop() { + recording = false; + current = null; + stack = []; + lastOutput = undefined; + }, + clear() { + reset(); + startedAt = recording ? clock() : null; + }, + /** Cycles and totals with names, and checks per host id from `hostId`. */ + snapshot(hostId: (instance: object) => string | null): CdRecording { + const hosts: Record = {}; + for (const ref of instances) { + const instance = ref.deref(); + const id = instance && hostId(instance); + if (id) hosts[id] = (hosts[id] ?? 0) + (perInstance.get(instance!) ?? 0); + } + return { + recording, + startedAt, + dropped, + hosts, + cycles: cycles.map((cycle) => { + const checks = [...cycle.checks].map(([ctor, check]) => ({ + name: className(ctor as { name?: string }), + checks: check.checks, + ms: round(check.ms), + })); + return { + id: cycle.id, + at: cycle.at, + ms: round(cycle.ms), + passes: cycle.passes, + ...(cycle.trigger ? { trigger: cycle.trigger } : {}), + checks: checks.reduce((sum, check) => sum + check.checks, 0), + components: checks.sort((a, b) => b.ms - a.ms).slice(0, TOP_PER_CYCLE), + }; + }), + components: [...totals] + .map(([ctor, { lastCycle: _lastCycle, ...stat }]) => ({ + ...stat, + name: className(ctor as { name?: string }), + ms: round(stat.ms), + maxMs: round(stat.maxMs), + })) + .sort((a, b) => b.ms - a.ms || b.checks - a.checks) + .slice(0, MAX_COMPONENTS), + }; + }, + }; +} + +export type CdRecorder = ReturnType; diff --git a/packages/ng-devtools/src/change-detection.ts b/packages/ng-devtools/src/change-detection.ts index dc8489b..1e75996 100644 --- a/packages/ng-devtools/src/change-detection.ts +++ b/packages/ng-devtools/src/change-detection.ts @@ -1,4 +1,4 @@ -type Profiler = (event: number, instance?: unknown, hook?: unknown) => void; +export type Profiler = (event: number, instance?: unknown, hook?: unknown) => void; interface ProfilerApi { ɵsetProfiler?: (profiler: Profiler | null) => unknown; @@ -15,6 +15,16 @@ const TEMPLATE_UPDATE_START = 2; export const REFRESH_DEBOUNCE_MS = 250; export const POLL_MS = 3000; export const HEARTBEAT_MS = 4000; +/** An unchanged report is sent again this often, well inside the server's 15 s TTL. */ +export const KEEPALIVE_MS = 8000; + +/** + * Whether an unchanged report must be sent on this tick: waiting for the next + * one, `tickMs` away, would leave more than `KEEPALIVE_MS` since the last send. + */ +export function keepaliveDue(sentAt: number, tickMs: number, now = Date.now()): boolean { + return now - sentAt + tickMs > KEEPALIVE_MS; +} export interface RefreshOptions { getNg: () => unknown; @@ -27,6 +37,8 @@ export interface RefreshOptions { export interface RefreshScheduler { readonly mode: 'change-detection' | 'poll'; + /** The longest gap between two refreshes. */ + readonly intervalMs: number; stop(): void; } @@ -46,6 +58,58 @@ export function angularMajor(doc: Document = document): number { return Number.isFinite(major) ? major : 0; } +interface ProfilerHub { + listeners: Set; + remove: () => void; +} + +const hubs = new WeakMap(); + +/** + * Adds `listener` to the one profiler this package registers with Angular, and + * returns its remover. Returns null before Angular 20: there is a single + * profiler slot there, and taking it would evict the Angular DevTools + * extension with no remover to give it back. + */ +export function addProfilerListener( + ng: unknown, + listener: Profiler, + doc: Document = document, +): (() => void) | null { + const setProfiler = (ng as ProfilerApi | undefined)?.ɵsetProfiler; + if (!ng || typeof setProfiler !== 'function' || angularMajor(doc) < 20) return null; + let hub = hubs.get(ng as object); + if (!hub) { + const listeners = new Set(); + const dispatch: Profiler = (event, instance, hook) => { + for (const each of listeners) { + try { + each(event, instance, hook); + } catch { + continue; + } + } + }; + let remove: unknown; + try { + remove = setProfiler(dispatch); + } catch { + return null; + } + if (typeof remove !== 'function') return null; + hub = { listeners, remove: remove as () => void }; + hubs.set(ng as object, hub); + } + const owner = hub; + owner.listeners.add(listener); + return () => { + if (!owner.listeners.delete(listener) || owner.listeners.size) return; + // Never `setProfiler(null)`: that clears every registered profiler. + owner.remove(); + if (hubs.get(ng as object) === owner) hubs.delete(ng as object); + }; +} + /** * Calls `refresh` shortly after Angular updates a template, with a slow * heartbeat on top. Where the profiler hook is missing, it polls instead. @@ -82,20 +146,8 @@ export function watchChangeDetection(options: RefreshOptions): RefreshScheduler }; const attach = () => { - const ng = options.getNg() as ProfilerApi | undefined; - const setProfiler = ng?.ɵsetProfiler; - // Before v20 there is a single profiler slot: taking it would evict the - // Angular DevTools extension, and there is no remover to give it back. - if (typeof setProfiler !== 'function' || angularMajor(doc) < 20) return false; - let remove: unknown; - try { - remove = setProfiler(profiler); - } catch { - return false; - } - if (typeof remove !== 'function') return false; - removeProfiler = remove as () => void; - return true; + removeProfiler = addProfilerListener(options.getNg(), profiler, doc); + return removeProfiler !== null; }; const every = (ms: number, fn: () => void) => { @@ -105,12 +157,12 @@ export function watchChangeDetection(options: RefreshOptions): RefreshScheduler const scheduler = { mode: 'poll' as RefreshScheduler['mode'], + intervalMs: pollMs, stop() { stopped = true; clearTimeout(pending); clearInterval(interval); pending = undefined; - // Never `setProfiler(null)`: that clears every registered profiler. removeProfiler?.(); removeProfiler = null; }, @@ -118,6 +170,7 @@ export function watchChangeDetection(options: RefreshOptions): RefreshScheduler const hooked = () => { scheduler.mode = 'change-detection'; + scheduler.intervalMs = heartbeatMs; every(heartbeatMs, run); }; diff --git a/packages/ng-devtools/src/cli.ts b/packages/ng-devtools/src/cli.ts index 405e37b..e181315 100644 --- a/packages/ng-devtools/src/cli.ts +++ b/packages/ng-devtools/src/cli.ts @@ -1,7 +1,15 @@ -import { existsSync, readdirSync, realpathSync, statSync } from 'node:fs'; +import { existsSync, readFileSync, readdirSync, realpathSync, statSync } from 'node:fs'; import { basename, dirname, isAbsolute, join, relative, resolve } from 'node:path'; import process from 'node:process'; -import type { CAC } from 'cac'; +import type { CAC, Command } from 'cac'; +import { defineDevframe } from 'devframe'; +import { createCac } from 'devframe/adapters/cac'; +import ngDevtools, { createNgDevtools } from './devframe.ts'; +import type { NgDevtoolsConfig } from './config.ts'; +import pkg from '../package.json' with { type: 'json' }; + +export const NG_DEVTOOLS_CONFIG_FILE = 'ng-devtools.config.json'; +const DEFAULT_PORT = 9999; /** * Throws when `build` would delete something that is not a previous report. @@ -16,11 +24,18 @@ function canonical(path: string): string { } } -export function checkReportOutDir(outDir: string, options: { cwd?: string; force?: boolean } = {}) { +export function checkReportOutDir( + outDir: string, + options: { cwd?: string; force?: boolean; invokedFrom?: string } = {}, +) { const cwd = canonical(resolve(options.cwd ?? process.cwd())); const target = canonical(resolve(cwd, outDir)); - const up = relative(target, cwd); - if (up === '' || (!up.startsWith('..') && !isAbsolute(up))) { + const kept = [cwd, ...(options.invokedFrom ? [canonical(resolve(options.invokedFrom))] : [])]; + const holds = (dir: string) => { + const up = relative(target, dir); + return up === '' || (!up.startsWith('..') && !isAbsolute(up)); + }; + if (kept.some(holds)) { throw new Error( `[ng-devtools] Refusing to build into "${outDir}": it is the working directory or one of its parents, and the build empties it first. Pick a new folder, such as --outDir dist-report.`, ); @@ -36,15 +51,18 @@ export function checkReportOutDir(outDir: string, options: { cwd?: string; force } } -/** Adds `--force` to `build` and checks `--outDir` before devframe empties it. */ -export function guardReportOutDir(cli: CAC) { +/** + * Adds `--force` to `build` and checks `--outDir` before devframe empties it. + * `invokedFrom` stays protected after `--root` changes the working directory. + */ +export function guardReportOutDir(cli: CAC, invokedFrom = process.cwd()) { const build = cli.commands.find((command) => command.name === 'build'); const run = build?.commandAction; if (!build || !run) return; build.option('--force', 'Empty --out-dir even when it is not a previous report'); build.action(async (flags: { outDir: string; force?: boolean }) => { try { - checkReportOutDir(flags.outDir, { force: flags.force }); + checkReportOutDir(flags.outDir, { force: flags.force, invokedFrom }); } catch (error) { console.error((error as Error).message); process.exitCode = 1; @@ -53,3 +71,190 @@ export function guardReportOutDir(cli: CAC) { await run(flags); }); } + +export interface NgDevtoolsCliFlags { + root?: string; + config?: string; + readOnly?: boolean; +} + +type Env = Record; + +/** Whether `dir` holds an Angular workspace or an app that depends on `@angular/core`. */ +export function looksLikeAngularProject(dir: string): boolean { + if (existsSync(join(dir, 'angular.json'))) return true; + try { + const manifest = JSON.parse(readFileSync(join(dir, 'package.json'), 'utf8')) as Record< + string, + Record | undefined + >; + return ['dependencies', 'devDependencies', 'peerDependencies'].some( + (field) => !!manifest[field]?.['@angular/core'], + ); + } catch { + return false; + } +} + +/** + * The project folder the CLI scans: `--root`, then `NG_DEVTOOLS_ROOT`, then the + * working directory. Throws when the folder does not exist. + */ +export function resolveCliRoot( + flags: NgDevtoolsCliFlags, + env: Env = process.env, + cwd = process.cwd(), +) { + const root = flags.root ?? env['NG_DEVTOOLS_ROOT']; + if (!root) return cwd; + const dir = resolve(cwd, root); + if (!existsSync(dir) || !statSync(dir).isDirectory()) { + throw new Error(`[ng-devtools] The project folder "${root}" does not exist.`); + } + return dir; +} + +/** + * Reads the devtools config for the CLI: `--config`, then `NG_DEVTOOLS_CONFIG`, + * then `ng-devtools.config.json` in the project folder. `--read-only` sets + * `agent.readOnly` on top. + */ +export function loadCliConfig( + flags: NgDevtoolsCliFlags, + root: string, + env: Env = process.env, + cwd = process.cwd(), +): NgDevtoolsConfig { + const named = flags.config ?? env['NG_DEVTOOLS_CONFIG']; + const file = named ? resolve(cwd, named) : join(root, NG_DEVTOOLS_CONFIG_FILE); + let config: NgDevtoolsConfig = {}; + if (named || existsSync(file)) { + let text: string; + try { + text = readFileSync(file, 'utf8'); + } catch { + throw new Error(`[ng-devtools] Can't read the config file "${file}".`); + } + try { + config = JSON.parse(text) as NgDevtoolsConfig; + } catch (error) { + throw new Error( + `[ng-devtools] The config file "${file}" is not valid JSON: ${(error as Error).message}`, + ); + } + } + if (!flags.readOnly) return config; + const agent = config.agent && typeof config.agent === 'object' ? config.agent : {}; + return { ...config, agent: { ...agent, readOnly: true } }; +} + +function copyCommand(cli: CAC, from: Command, name: string, description: string) { + const command = cli.command(name, description); + for (const option of from.options) { + command.option(option.rawName, option.description, option.config); + } + return command; +} + +export interface NgDevtoolsCliOptions { + env?: Env; + log?: (message: string) => void; +} + +/** + * The `ng-devtools` command line: `dev` (the default), `build` and `mcp`, with + * `--root`, `--config` and `--read-only` on each. + */ +export function createNgDevtoolsCli(options: NgDevtoolsCliOptions = {}) { + const env = options.env ?? process.env; + const log = options.log ?? ((message: string) => console.log(message)); + let current = createNgDevtools(); + let requestedPort: number | undefined; + let mcpOn = true; + const definition = defineDevframe({ + ...ngDevtools, + setup: (ctx, info) => current.setup(ctx, info), + }); + + const prepare = (command: string, flags: NgDevtoolsCliFlags) => { + const root = resolveCliRoot(flags, env); + const config = loadCliConfig(flags, root, env); + if (root !== process.cwd()) process.chdir(root); + if (!looksLikeAngularProject(root)) { + console.error( + `[ng-devtools] ${root} has no angular.json and no package.json that depends on @angular/core, so the source scans find nothing. Pass --root or set NG_DEVTOOLS_ROOT to your project folder.`, + ); + } + current = createNgDevtools(config, { pageTools: command !== 'mcp' }); + }; + + const configureCli = (cli: CAC) => { + guardReportOutDir(cli); + cli.option('--root ', 'Project folder to scan (default: the working directory)'); + cli.option('--config ', `Devtools config as JSON (default: ${NG_DEVTOOLS_CONFIG_FILE})`); + cli.option('--read-only', 'Drop the agent tools that act on the page or the server'); + const defaultCommand = cli.commands.find((command) => command.isDefaultCommand); + const startDev = defaultCommand?.commandAction; + if (defaultCommand && startDev) { + const run = async (flags: NgDevtoolsCliFlags & { port?: number; mcp?: boolean }) => { + prepare('dev', flags); + requestedPort = flags.port === undefined ? undefined : Number(flags.port); + mcpOn = flags.mcp !== false; + await startDev([], flags); + }; + copyCommand(cli, defaultCommand, 'dev', 'Start a local dev server (the default)').action(run); + defaultCommand.description = 'Same as dev'; + defaultCommand.action(async (args: string[], flags: NgDevtoolsCliFlags) => { + if (args.length) { + throw new Error( + `[ng-devtools] Unknown command "${args[0]}". Run ng-devtools --help to list the commands.`, + ); + } + await run(flags); + }); + } + for (const name of ['build', 'mcp']) { + const command = cli.commands.find((entry) => entry.name === name); + const run = command?.commandAction; + if (!command || !run) continue; + command.action(async (flags: NgDevtoolsCliFlags) => { + prepare(name, flags); + await run(flags); + }); + } + }; + + const { cli } = createCac(definition, { + mcp: true, + defaultPort: DEFAULT_PORT, + configureCli, + onReady: ({ origin, port }) => { + const base = origin.replace(/\/$/, ''); + const lines = [` ng-devtools v${pkg.version}`, ` Panel: ${base}/`]; + if (mcpOn) lines.push(` MCP: ${base}/__mcp`); + if (requestedPort === undefined && port !== DEFAULT_PORT) { + lines.push(` Port ${DEFAULT_PORT} is taken, so the server uses port ${port}.`); + } + log(`\n${lines.join('\n')}\n`); + }, + }); + cli.globalCommand.versionNumber = pkg.version; + + return { + cli, + async parse(argv = process.argv) { + try { + cli.parse(argv, { run: false }); + await cli.runMatchedCommand(); + } catch (error) { + const message = (error as Error).message ?? String(error); + console.error( + message.startsWith('[ng-devtools]') + ? message + : `[ng-devtools] ${message}. Run ng-devtools --help for the commands and flags.`, + ); + process.exitCode = 1; + } + }, + }; +} diff --git a/packages/ng-devtools/src/component-pick.ts b/packages/ng-devtools/src/component-pick.ts new file mode 100644 index 0000000..3346556 --- /dev/null +++ b/packages/ng-devtools/src/component-pick.ts @@ -0,0 +1,86 @@ +import { componentHostOf, type ComponentDebugNg } from './component-tree.ts'; +import { elementId } from './element-id.ts'; +import { className } from './injector-tree.ts'; +import { POPUP_ROOT_ID } from './panel-frame.ts'; + +export const COMPONENT_PICK_TIMEOUT_MS = 15_000; + +export type ComponentPickResult = + { ok: true; id: string; name: string; tag: string } | { ok: false; error: string }; + +interface PickOptions { + getNg: () => ComponentDebugNg | undefined; + highlight: { show(el: HTMLElement): void; clear(): void }; + doc?: Document; + timeoutMs?: number; +} + +/** + * Lets the user click an element on the page and resolves with the component + * that hosts it. Escape, `cancel()` or the timeout end the pick. The floating + * panel fades while picking so it does not cover the page. + */ +export function startComponentPick(options: PickOptions): { + result: Promise; + cancel: () => void; +} { + const doc = options.doc ?? document; + const popup = doc.getElementById(POPUP_ROOT_ID); + const ownElement = (target: EventTarget | null) => + target instanceof Element && !!popup && popup.contains(target); + const hostOf = (target: EventTarget | null) => + target instanceof Element && !ownElement(target) + ? componentHostOf(options.getNg(), target) + : null; + + let finish: (result: ComponentPickResult) => void = () => {}; + const result = new Promise((resolve) => { + const onHover = (event: Event) => { + const host = hostOf(event.target); + if (host instanceof HTMLElement) options.highlight.show(host); + else options.highlight.clear(); + }; + const onClick = (event: Event) => { + if (ownElement(event.target)) return; + event.preventDefault(); + event.stopPropagation(); + const host = hostOf(event.target); + const instance = host ? options.getNg()?.getComponent?.(host) : null; + const ctor = (instance as { constructor?: unknown } | null)?.constructor; + finish( + host + ? { + ok: true, + id: elementId(host), + name: typeof ctor === 'function' ? className(ctor) : 'Anonymous', + tag: host.tagName.toLowerCase(), + } + : { ok: false, error: 'That element is not inside an Angular component.' }, + ); + }; + const onKey = (event: KeyboardEvent) => { + if (event.key !== 'Escape') return; + event.preventDefault(); + finish({ ok: false, error: 'Picking cancelled.' }); + }; + const timer = setTimeout( + () => finish({ ok: false, error: 'No component was picked.' }), + options.timeoutMs ?? COMPONENT_PICK_TIMEOUT_MS, + ); + finish = (outcome) => { + finish = () => {}; + doc.removeEventListener('click', onClick, true); + doc.removeEventListener('mouseover', onHover, true); + doc.removeEventListener('keydown', onKey, true); + clearTimeout(timer); + options.highlight.clear(); + popup?.removeAttribute('data-picking'); + resolve(outcome); + }; + popup?.setAttribute('data-picking', ''); + doc.addEventListener('click', onClick, true); + doc.addEventListener('mouseover', onHover, true); + doc.addEventListener('keydown', onKey, true); + }); + return { result, cancel: () => finish({ ok: false, error: 'Picking cancelled.' }) }; +} diff --git a/packages/ng-devtools/src/component-tree.ts b/packages/ng-devtools/src/component-tree.ts index a4fae47..f9d795e 100644 --- a/packages/ng-devtools/src/component-tree.ts +++ b/packages/ng-devtools/src/component-tree.ts @@ -1,3 +1,4 @@ +import { childElements, parentOf } from './dom-walk.ts'; import { elementById, elementId, pruneElementIds } from './element-id.ts'; import { className, dependenciesOf, type DebugNg } from './injector-tree.ts'; import { isSecretName, serializeNamed } from './serialize.ts'; @@ -57,19 +58,6 @@ function directivesAt(ng: ComponentDebugNg, el: Element): object[] { return found.filter((d): d is object => !!d && typeof d === 'object'); } -export function childElements(el: Element): Element[] { - const children = Array.from(el.children); - const shadow = (el as Element & { shadowRoot?: ShadowRoot | null }).shadowRoot; - if (shadow) children.push(...Array.from(shadow.children)); - return children; -} - -function parentOf(el: Element): Element | null { - if (el.parentElement) return el.parentElement; - const root = el.parentNode; - return root && 'host' in root ? ((root as ShadowRoot).host ?? null) : null; -} - export function angularRoots(doc: Document = document): Element[] { const tagged = Array.from(doc.querySelectorAll('[ng-version]')); const roots = tagged.filter((root) => !tagged.some((o) => o !== root && o.contains(root))); @@ -151,6 +139,74 @@ function readInputs( }); } +function resourceOf(ng: ComponentDebugNg, value: unknown): Record | null { + if (!value || typeof value !== 'object') return null; + const ref = value as Record; + const isSignal = (field: unknown) => read(() => !!ng.isSignal?.(field), false); + if ( + !isSignal(ref['value']) || + !isSignal(ref['status']) || + typeof ref['hasValue'] !== 'function' + ) { + return null; + } + const call = (field: unknown) => read(() => (field as () => unknown)(), undefined); + const snapshot: Record = { + status: call(ref['status']), + value: call(ref['value']), + }; + if (isSignal(ref['error'])) { + const error = call(ref['error']); + if (error !== undefined) snapshot['error'] = error; + } + return snapshot; +} + +function injectedValues(ng: ComponentDebugNg, injector: unknown, owner: unknown): Set { + const values = new Set(); + const result = read(() => ng.ɵgetDependenciesFromInjectable?.(injector, owner) ?? null, null); + for (const dep of result?.dependencies ?? []) { + if (dep.value !== null && typeof dep.value === 'object') values.add(dep.value); + } + return values; +} + +function readProperties( + ng: ComponentDebugNg, + instance: object, + skip: Set, + injected: Set, +): ComponentProp[] { + const out: ComponentProp[] = []; + const keys = read(() => Object.keys(instance), [] as string[]); + for (const name of keys) { + if (out.length >= MAX_PROPS) break; + if (skip.has(name) || name.startsWith('__ng') || name.startsWith('ɵ')) continue; + const raw = read(() => (instance as Record)[name], undefined); + if (injected.has(raw)) continue; + const resource = resourceOf(ng, raw); + if (resource) { + out.push({ + name, + prop: name, + kind: 'resource', + value: serializeNamed(name, resource, VALUE_LIMITS), + }); + continue; + } + const isSignal = typeof raw === 'function' && read(() => !!ng.isSignal?.(raw), false); + if (typeof raw === 'function' && !isSignal) continue; + const prop: ComponentProp = { + name, + prop: name, + value: serializeNamed(name, unwrap(ng, raw), VALUE_LIMITS), + }; + if (isSignal) prop.kind = 'signal'; + out.push(prop); + } + return out; +} + function readOutputs( outputs: Record | undefined, listened: Set, @@ -171,6 +227,13 @@ export function componentDetail(ng: ComponentDebugNg, el: Element): ComponentDet const listened = new Set(listeners.filter((l) => l.type === 'output').map((l) => l.name)); const dom = [...new Set(listeners.filter((l) => l.type !== 'output').map((l) => l.name))]; const directives = directivesAt(ng, el).filter((d) => d !== instance); + const injector = read(() => ng.getInjector?.(el) ?? null, null); + const bound = new Set( + [...Object.entries(meta?.inputs ?? {}), ...Object.entries(meta?.outputs ?? {})].map( + ([name, entry]) => propName(entry, name), + ), + ); + const injected = injector ? injectedValues(ng, injector, instance.constructor) : new Set(); const detail: ComponentDetail = { id: elementId(el), @@ -179,6 +242,7 @@ export function componentDetail(ng: ComponentDebugNg, el: Element): ComponentDet path: hostPath(ng, el), inputs: readInputs(ng, instance, meta?.inputs), outputs: readOutputs(meta?.outputs, listened), + properties: readProperties(ng, instance, bound, injected), listeners: dom.slice(0, MAX_PROPS), directives: directives.map((directive) => { const dirMeta = read(() => ng.getDirectiveMetadata?.(directive) ?? null, null); @@ -195,7 +259,6 @@ export function componentDetail(ng: ComponentDebugNg, el: Element): ComponentDet const enc = meta?.encapsulation; if (typeof enc === 'number' && ENCAPSULATION[enc]) detail.encapsulation = ENCAPSULATION[enc]; - const injector = read(() => ng.getInjector?.(el) ?? null, null); if (injector) { detail.dependencies = dependenciesOf(ng, injector, [instance.constructor], true); } diff --git a/packages/ng-devtools/src/config.ts b/packages/ng-devtools/src/config.ts index 4ba0383..f4e27e3 100644 --- a/packages/ng-devtools/src/config.ts +++ b/packages/ng-devtools/src/config.ts @@ -23,6 +23,7 @@ export const NG_DEVTOOLS_LIMITS = { formTimeline: { default: 200, min: 10, max: 2000 }, httpCalls: { default: 200, min: 10, max: 2000 }, changeLog: { default: 200, min: 10, max: 2000 }, + cdCycles: { default: 200, min: 10, max: 2000 }, } as const; export type NgDevtoolsLimit = keyof typeof NG_DEVTOOLS_LIMITS; @@ -54,7 +55,7 @@ export interface NgDevtoolsConfig { limits?: { /** * How often the page polls for changes, in ms, when it can't follow change - * detection: before Angular 20, or before the app bootstraps. Also sets the + * detection, such as before the app bootstraps. Also sets the * Analog runtime refresh. Default 3000, from 500 to 8000. */ refreshMs?: number; @@ -66,6 +67,8 @@ export interface NgDevtoolsConfig { httpCalls?: number; /** NgRx change log entries kept per page. Default 200. */ changeLog?: number; + /** Change detection cycles kept per page while recording. Default 200. */ + cdCycles?: number; }; } @@ -148,6 +151,134 @@ export function resolveNgDevtoolsConfig(config?: unknown): ResolvedNgDevtoolsCon }; } +function distance(a: string, b: string): number { + let row = Array.from({ length: b.length + 1 }, (_, i) => i); + for (let i = 1; i <= a.length; i++) { + const next = [i]; + for (let j = 1; j <= b.length; j++) { + next[j] = Math.min(row[j] + 1, next[j - 1] + 1, row[j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1)); + } + row = next; + } + return row[b.length]; +} + +function suggest(key: string, known: readonly string[]): string { + const lower = key.toLowerCase(); + const best = known + .map((name) => ({ name, cost: distance(lower, name.toLowerCase()) })) + .sort((a, b) => a.cost - b.cost)[0]; + return best && best.cost <= Math.max(1, Math.floor(best.name.length / 3)) + ? ` Did you mean \`${best.name}\`?` + : ''; +} + +function describe(value: unknown): string { + if (value === null) return 'null'; + if (Array.isArray(value)) return 'an array'; + return typeof value === 'string' ? `the string ${JSON.stringify(value)}` : `a ${typeof value}`; +} + +const CONFIG_KEYS = ['inspectors', 'agent', 'actions', 'redaction', 'limits'] as const; + +/** + * Lists what `resolveNgDevtoolsConfig()` ignores or changes in `config`: + * unknown keys, values of the wrong type and limits outside their range. + */ +export function ngDevtoolsConfigProblems(config: unknown): string[] { + const problems: string[] = []; + const isRecord = (value: unknown): value is Record => + !!value && typeof value === 'object' && !Array.isArray(value); + const object = (path: string, value: unknown, known: readonly string[]) => { + if (value === undefined) return {}; + if (!isRecord(value)) { + problems.push(`\`${path}\` should be an object, got ${describe(value)}. It was ignored.`); + return {}; + } + for (const key of Object.keys(value)) { + if (!known.includes(key)) { + const name = path ? `${path}.${key}` : key; + problems.push(`Unknown option \`${name}\` was ignored.${suggest(key, known)}`); + } + } + return value; + }; + const boolean = (path: string, value: unknown, fallback: string) => { + if (value !== undefined && typeof value !== 'boolean') { + problems.push( + `\`${path}\` should be true or false, got ${describe(value)}. It was ignored, so it is ${fallback}.`, + ); + } + }; + const booleans = (path: string, value: unknown, known: readonly string[], fallback: string) => { + const entries = object(path, value, known); + for (const key of known) boolean(`${path}.${key}`, entries[key], fallback); + }; + + if (config === undefined || config === null) return problems; + const input = object('', config, CONFIG_KEYS); + booleans('inspectors', input['inspectors'], NG_DEVTOOLS_INSPECTORS, 'on'); + const agent = object('agent', input['agent'], ['readOnly', 'tools']); + boolean('agent.readOnly', agent['readOnly'], 'off'); + booleans('agent.tools', agent['tools'], NG_DEVTOOLS_INSPECTORS, 'on'); + const actions = input['actions']; + if (typeof actions !== 'boolean') { + if (actions !== undefined && !isRecord(actions)) { + problems.push( + `\`actions\` should be true, false or an object, got ${describe(actions)}. It was ignored, so every action is allowed.`, + ); + } else { + booleans('actions', actions, NG_DEVTOOLS_ACTIONS, 'allowed'); + } + } + const redaction = object('redaction', input['redaction'], ['secretNames', 'unmask']); + for (const key of ['secretNames', 'unmask'] as const) { + const value = redaction[key]; + if (value === undefined) continue; + if (!Array.isArray(value)) { + problems.push( + `\`redaction.${key}\` should be an array of names, got ${describe(value)}. It was ignored.`, + ); + continue; + } + const dropped = value.filter( + (name) => typeof name !== 'string' || !name.trim() || name.trim().length > MAX_NAME_LENGTH, + ); + if (dropped.length) { + problems.push( + `\`redaction.${key}\` has ${dropped.length} entries that are not names of 1 to ${MAX_NAME_LENGTH} characters. They were ignored.`, + ); + } + if (value.length - dropped.length > MAX_NAMES) { + problems.push(`\`redaction.${key}\` keeps the first ${MAX_NAMES} names only.`); + } + } + const limits = object('limits', input['limits'], Object.keys(NG_DEVTOOLS_LIMITS)); + for (const key of Object.keys(NG_DEVTOOLS_LIMITS) as NgDevtoolsLimit[]) { + const value = limits[key]; + if (value === undefined) continue; + const used = limit(value, key); + if (typeof value !== 'number' || !Number.isFinite(value)) { + problems.push( + `\`limits.${key}\` should be a number, got ${describe(value)}. It was ignored, so it is ${used}.`, + ); + } else if (used !== value) { + const { min, max } = NG_DEVTOOLS_LIMITS[key]; + problems.push( + `\`limits.${key}\` is ${value}, which is outside ${min} to ${max} or not whole. It was set to ${used}.`, + ); + } + } + return problems; +} + +/** The startup warning for `ngDevtoolsConfigProblems()`, or `undefined` when there are none. */ +export function ngDevtoolsConfigWarning(config: unknown): string | undefined { + const problems = ngDevtoolsConfigProblems(config); + if (!problems.length) return undefined; + return `[ng-devtools] The devtools config has ${problems.length === 1 ? 'a problem' : `${problems.length} problems`}:\n${problems.map((problem) => ` - ${problem}`).join('\n')}`; +} + /** Reads the config a server published in its connection info (`connectionMeta.configs`). */ export function configFromConnection( meta: { configs?: object } | undefined, @@ -211,14 +342,24 @@ export function actionBlockedMessage(action: NgDevtoolsAction): string { export const RPC_INSPECTOR: Record = { 'get-components': 'components', 'push-component-tree': 'components', + 'push-change-detection': 'components', + 'ping-change-detection': 'components', + 'forget-change-detection-page': 'components', + 'request-change-detection-record': 'components', + 'ping-component-tree': 'components', 'forget-component-page': 'components', 'select-component': 'components', + 'request-component-pick': 'components', + 'cancel-component-pick': 'components', + 'component-pick-result': 'components', 'request-page-highlight': 'components', 'get-signals': 'signals', 'push-signal-graph': 'signals', + 'ping-signal-graph': 'signals', 'select-signal-target': 'signals', 'get-providers': 'injectors', 'push-injector-tree': 'injectors', + 'ping-injector-tree': 'injectors', 'forget-injector-page': 'injectors', 'get-ngrx-store': 'ngrx', 'push-ngrx-state': 'ngrx', @@ -248,6 +389,7 @@ export const RPC_INSPECTOR: Record = { 'request-instrument-pipes': 'pipes', 'pipe-lint': 'pipes', 'push-http': 'http', + 'ping-http': 'http', 'forget-http-page': 'http', 'get-http-rules': 'http', 'set-http-rules': 'http', @@ -261,6 +403,9 @@ export const RPC_INSPECTOR: Record = { export const AGENT_INSPECTOR: Record = { 'component-tree': 'components', highlight: 'components', + 'inspect-component': 'components', + 'defer-blocks': 'components', + 'change-detection': 'components', 'signal-graph': 'signals', 'inspect-signals': 'signals', 'injector-tree': 'injectors', @@ -293,6 +438,53 @@ export const AGENT_INSPECTOR: Record = { 'explain-pipe': 'pipes', }; +/** + * Agent tools and resources that answer only while a page reports to the + * server, or that call the app's dev server. The stdio MCP server has neither. + */ +export const PAGE_AGENT_ENTRIES: readonly string[] = [ + 'list-pages', + 'component-tree', + 'highlight', + 'inspect-component', + 'defer-blocks', + 'change-detection', + 'signal-graph', + 'inspect-signals', + 'injector-tree', + 'inspect-providers', + 'ngrx-store', + 'forms', + 'inspect-forms', + 'explain-form-invalid', + 'explain-field', + 'explain-submit', + 'form-payload', + 'form-history', + 'form-diff', + 'lint-forms', + 'explain-custom-control', + 'export-form', + 'wait-for-form', + 'form-action', + 'fill-form', + 'router', + 'inspect-route', + 'explain-navigation', + 'list-routes', + 'lint-routes', + 'router-config', + 'export-navigation', + 'navigate', + 'analog-current-page', + 'analog-server-calls', + 'analog-call-api', +]; + +export function isPageAgentEntry(id: string): boolean { + return PAGE_AGENT_ENTRIES.includes(agentName(id)); +} + function agentName(id: string): string { return id.replace(/^ng-devtools:/, ''); } @@ -350,6 +542,7 @@ const LIMIT_LABEL: Record string> = { formTimeline: (value) => `${value} form events`, httpCalls: (value) => `${value} HTTP calls`, changeLog: (value) => `${value} NgRx changes`, + cdCycles: (value) => `${value} change detection cycles`, }; /** The options that differ from the defaults, as label and value pairs. Empty when nothing is changed. */ diff --git a/packages/ng-devtools/src/defer-blocks.ts b/packages/ng-devtools/src/defer-blocks.ts new file mode 100644 index 0000000..757dddc --- /dev/null +++ b/packages/ng-devtools/src/defer-blocks.ts @@ -0,0 +1,134 @@ +import { angularRoots, componentHostOf, type ComponentDebugNg } from './component-tree.ts'; +import { elementId } from './element-id.ts'; +import { className } from './injector-tree.ts'; +import type { DeferBlockInfo } from './types.ts'; + +export interface DeferDebugNg extends ComponentDebugNg { + ɵgetControlFlowBlocks?(node: Node): unknown[]; + ɵgetDeferBlocks?(node: Node): unknown[]; +} + +interface RawDeferBlock { + type?: number; + state?: unknown; + incrementalHydrationState?: unknown; + hasErrorBlock?: unknown; + loadingBlock?: { exists?: unknown; minimumTime?: unknown; afterTime?: unknown }; + placeholderBlock?: { exists?: unknown; minimumTime?: unknown }; + triggers?: unknown; + hostNode?: unknown; + rootNodes?: unknown; +} + +const MAX_BLOCKS = 500; +const MAX_ROOT_IDS = 5; +const DEFER_TYPE = 0; +const HYDRATION = new Set(['not-configured', 'dehydrated', 'hydrated']); + +function read(fn: () => T, fallback: T): T { + try { + return fn(); + } catch { + return fallback; + } +} + +function timeOf(value: unknown): number | null { + return typeof value === 'number' ? value : null; +} + +/** + * Reads `@defer` blocks through `ng.ɵgetControlFlowBlocks` (Angular 22+) or + * `ng.ɵgetDeferBlocks` (earlier). Ids stay stable between collections, and + * the tracker remembers when each block changed state or hydrated. + */ +export function createDeferTracker(now: () => number = Date.now) { + const ids = new WeakMap(); + const seen = new WeakMap(); + let nextId = 0; + + const idOf = (host: object) => { + let id = ids.get(host); + if (!id) { + id = `d${++nextId}`; + ids.set(host, id); + } + return id; + }; + + const ownerOf = (ng: DeferDebugNg, host: Node): DeferBlockInfo['owner'] => { + const parent = host instanceof Element ? host : host.parentElement; + const owner = parent ? componentHostOf(ng, parent) : null; + const instance = owner ? read(() => ng.getComponent?.(owner), null) : null; + const ctor = (instance as { constructor?: unknown } | null)?.constructor; + if (!owner || typeof ctor !== 'function') return undefined; + return { id: elementId(owner), name: className(ctor), tag: owner.tagName.toLowerCase() }; + }; + + return { + /** Every defer block on the page, or `undefined` when Angular exposes no util for them. */ + collect(ng: DeferDebugNg | undefined, doc: Document = document): DeferBlockInfo[] | undefined { + const util = ng?.ɵgetControlFlowBlocks ?? ng?.ɵgetDeferBlocks; + if (!ng || typeof util !== 'function') return undefined; + const hosts = new Set(); + const out: DeferBlockInfo[] = []; + for (const root of angularRoots(doc)) { + const blocks = read(() => util.call(ng, root) ?? [], [] as unknown[]); + for (const raw of blocks as RawDeferBlock[]) { + if (out.length >= MAX_BLOCKS) return out; + if (!raw || typeof raw !== 'object' || typeof raw.state !== 'string') continue; + if (typeof raw.type === 'number' && raw.type !== DEFER_TYPE) continue; + const host = raw.hostNode; + if (!(host instanceof Node) || hosts.has(host)) continue; + hosts.add(host); + const hydration = HYDRATION.has(raw.incrementalHydrationState as string) + ? (raw.incrementalHydrationState as DeferBlockInfo['hydration']) + : 'not-configured'; + const triggers = Array.isArray(raw.triggers) + ? raw.triggers.filter((t): t is string => typeof t === 'string') + : []; + const key = `${raw.state}|${hydration}`; + const previous = seen.get(host); + const record = { + key, + since: previous && previous.key === key ? previous.since : now(), + hydratedAt: previous?.hydratedAt, + }; + if (previous?.key.endsWith('|dehydrated') && hydration === 'hydrated') { + record.hydratedAt = now(); + } + seen.set(host, record); + + const roots = Array.isArray(raw.rootNodes) ? raw.rootNodes : []; + const block: DeferBlockInfo = { + id: idOf(host), + state: raw.state, + hydration, + triggers, + hasErrorBlock: raw.hasErrorBlock === true, + since: record.since, + rootIds: roots + .filter((node): node is Element => node instanceof Element) + .slice(0, MAX_ROOT_IDS) + .map((el) => elementId(el)), + }; + const owner = ownerOf(ng, host); + if (owner) block.owner = owner; + if (triggers.includes('hydrate never')) block.hydrateNever = true; + if (raw.loadingBlock?.exists) { + block.loading = { + minimumTime: timeOf(raw.loadingBlock.minimumTime), + afterTime: timeOf(raw.loadingBlock.afterTime), + }; + } + if (raw.placeholderBlock?.exists) { + block.placeholder = { minimumTime: timeOf(raw.placeholderBlock.minimumTime) }; + } + if (record.hydratedAt !== undefined) block.hydratedAt = record.hydratedAt; + out.push(block); + } + } + return out; + }, + }; +} diff --git a/packages/ng-devtools/src/devframe.ts b/packages/ng-devtools/src/devframe.ts index 91149b9..1810613 100644 --- a/packages/ng-devtools/src/devframe.ts +++ b/packages/ng-devtools/src/devframe.ts @@ -3,11 +3,13 @@ import { defineDevframe } from 'devframe'; import { getRoutes } from './rpc/get-routes.ts'; import { getComponents } from './rpc/get-components.ts'; import { getPipes } from './rpc/get-pipes.ts'; +import { inspectProvidersText } from './rpc/injector-tools.ts'; import { lintPipes, lintPipesText } from './rpc/pipe-lint.ts'; import { explainPipeText } from './rpc/pipe-explain.ts'; import { trackPageSessions } from './rpc/page-sessions.ts'; import { getBuildMeta } from './rpc/build-meta.ts'; import { getSignals } from './rpc/get-signals.ts'; +import { injectorMatches, isEnvironmentRequest } from './signal-graph.ts'; import { getProviders } from './rpc/get-providers.ts'; import { getNgrxStore, scanNgrxStore } from './rpc/get-ngrx-store.ts'; import { @@ -20,6 +22,7 @@ import { } from './rpc/ngrx-tools.ts'; import type { NgrxState } from './ngrx-shared.ts'; import type { + ComponentDetail, ComponentPage, InjectorPage, InjectorTreeNode, @@ -28,10 +31,12 @@ import type { SignalGraph, } from './types.ts'; import { + deferBlocksText, expireComponentPages, findComponents, isComponentReport, latestComponentPage, + otherMatchesText, toComponentPage, } from './rpc/component-tools.ts'; import { @@ -45,6 +50,7 @@ import { type PageReport, type FormsState, type InspectFormsArgs, + FORMS_PAGE_TTL_MS, } from './rpc/forms-tools.ts'; import { explainCustomControlText, @@ -78,19 +84,21 @@ import { inspectRouteText, isRouterReport, mergeRouterReport, + noPage, routerResourceText, touchRouterPage, type RouterPage, type RouterState, + ROUTER_PAGE_TTL_MS, } from './rpc/router-tools.ts'; import { explainRenderModeText, exportNavigationText, - lintRoutes, lintRoutesText, listRoutesText, matchUrl, routerConfigText, + routerLintResult, } from './rpc/router-config-tools.ts'; import { extractRoutes } from './rpc/get-routes.ts'; import { scanServerRoutes } from './rpc/server-routes.ts'; @@ -101,10 +109,28 @@ import { type HttpCall, type HttpRule, } from './http-rules.ts'; -import { sanitizeHydration, sanitizePayload } from './http-payload.ts'; -import type { HttpPage, HttpState } from './types.ts'; - -import { registerAnalog } from './rpc/analog-register.ts'; +import { sanitizeHydration, sanitizePayload, type PayloadSummary } from './http-payload.ts'; +import { redactCall } from './http-redact.ts'; +import { redactUrl } from './router.ts'; +import { + changeDetectionText, + expireCdPages, + toCdPage, + type CdPage, + type CdState, +} from './rpc/cd-tools.ts'; +import type { HttpPage, HttpPayloadState, HttpReport, HttpState } from './types.ts'; + +import { nameServerFns, registerAnalog } from './rpc/analog-register.ts'; +import { createPageVisibility } from './rpc/page-ttl.ts'; +import { + PAGE_ARGUMENT, + byRecency, + listPagesText, + pageArgument, + summarizePages, + unknownPageText, +} from './rpc/pages.ts'; import { registerHubDocks } from './hub-docks.ts'; import { setRedaction } from './forms-privacy.ts'; import { @@ -113,6 +139,8 @@ import { ROUTER_WRITE_ACTIONS, actionBlockedMessage, agentAllowed, + isPageAgentEntry, + ngDevtoolsConfigWarning, resolveNgDevtoolsConfig, rpcAllowed, type NgDevtoolsConfig, @@ -125,6 +153,8 @@ import pkg from '../package.json' with { type: 'json' }; type PageGraph = SignalGraph & { pageId?: string }; +const ENV_WAIT_MS = 1500; + const clientAssets: RemoteAssets = { package: pkg.name, version: pkg.version, @@ -132,7 +162,7 @@ const clientAssets: RemoteAssets = { resolveFrom: import.meta.url, }; -type SetupInfo = DevframeSetupInfo & { config?: ResolvedNgDevtoolsConfig }; +type SetupInfo = DevframeSetupInfo & { config?: ResolvedNgDevtoolsConfig; pageTools?: boolean }; const ngDevtools = defineDevframe({ id: 'ng-devtools', @@ -148,6 +178,9 @@ const ngDevtools = defineDevframe({ async setup(ctx, info?: SetupInfo) { const config = info?.config ?? resolveNgDevtoolsConfig(); + const pageTools = info?.pageTools ?? true; + const agentExposed = (entry: { id: string; safety?: string }) => + agentAllowed(entry, config) && (pageTools || !isPageAgentEntry(entry.id)); setRedaction(config.redaction); const on = config.inspectors; const limits = config.limits; @@ -160,10 +193,10 @@ const ngDevtools = defineDevframe({ }; const agent = { registerTool: (tool: Parameters[0]) => { - if (agentAllowed(tool, config)) ctx.agent.registerTool(tool); + if (agentExposed(tool)) ctx.agent.registerTool(tool); }, registerResource: (resource: Parameters[0]) => { - if (agentAllowed(resource, config)) ctx.agent.registerResource(resource); + if (agentExposed(resource)) ctx.agent.registerResource(resource); }, }; @@ -175,6 +208,28 @@ const ngDevtools = defineDevframe({ register(getNgrxStore); register(getBuildMeta); + // Tabs in the background stop reporting, so their last data stays until + // they come back or close. + const visibility = createPageVisibility(); + const liveTtl = visibility.ttl(); + const visibilityState = await my.rpc.sharedState('page-visibility', { + initialValue: { hidden: [] as string[] }, + }); + const applyVisibility = () => + visibilityState.mutate((draft) => { + draft.hidden = visibility.list(); + }); + register({ + name: 'report-page-visibility', + type: 'action', + jsonSerializable: true, + handler: (report: { pageId?: unknown; hidden?: unknown } | null) => { + const pageId = report?.pageId; + if (typeof pageId !== 'string' || !pageId || pageId.length >= 50) return; + if (visibility.set(pageId, report?.hidden === true)) applyVisibility(); + }, + }); + const componentTree = await my.rpc.sharedState('component-tree', { initialValue: { nodes: [] as LiveComponentNode[], @@ -189,6 +244,33 @@ const ngDevtools = defineDevframe({ draft.pages = Object.fromEntries(componentPages); draft.nodes = latestComponentPage(componentPages.values())?.roots ?? []; }); + const componentWaiters = new Set<() => void>(); + const selectComponentOnPage = (pageId: string | undefined, id: string | null) => { + componentTree.mutate((draft) => { + draft.selectedId = id; + }); + void my.rpc.broadcast({ + method: 'inspect-component-in-page', + args: [{ pageId, id }], + optional: true, + }); + }; + const waitForComponentDetail = (pageId: string, id: string, timeoutMs = 3000) => + new Promise((resolve) => { + const done = (detail: ComponentDetail | null) => { + clearTimeout(timer); + componentWaiters.delete(check); + resolve(detail); + }; + const check = () => { + const detail = componentPages.get(pageId)?.detail; + if (detail?.id === id) done(detail); + }; + const timer = setTimeout(() => done(null), timeoutMs); + timer.unref?.(); + componentWaiters.add(check); + check(); + }); await my.rpc.sharedState('routes', { initialValue: { @@ -211,6 +293,7 @@ const ngDevtools = defineDevframe({ roots: [] as InjectorTreeNode[], environment: [] as InjectorTreeNode[], pages: {} as Record, + truncated: false, selectedInjectorId: null as string | null, }, }); @@ -223,6 +306,7 @@ const ngDevtools = defineDevframe({ draft.pages = Object.fromEntries(injectorPages); draft.roots = latest?.roots ?? []; draft.environment = latest?.environment ?? []; + draft.truncated = latest?.truncated === true; }); const ngrxStoreState = await my.rpc.sharedState('ngrx-store', { @@ -259,6 +343,7 @@ const ngDevtools = defineDevframe({ draft.reportedAt = next.reportedAt; draft.setupErrors = next.setupErrors ?? []; draft.instrumented = next.instrumented ?? []; + draft.dropped = next.dropped ?? {}; }); register({ @@ -267,7 +352,15 @@ const ngDevtools = defineDevframe({ jsonSerializable: true, handler: (report: unknown) => { if (!isPageReport(report)) return; - applyForms(mergePageReport(formPages, report, Date.now(), limits.formTimeline)); + applyForms( + mergePageReport( + formPages, + report, + Date.now(), + limits.formTimeline, + visibility.ttl(FORMS_PAGE_TTL_MS), + ), + ); }, }); @@ -299,7 +392,7 @@ const ngDevtools = defineDevframe({ handler: (report: unknown) => { if (!isPipePageReport(report)) return; pipeSessions.bind(report.pageId); - applyPipes(mergePipePageReport(pipePages, report)); + applyPipes(mergePipePageReport(pipePages, report, Date.now(), liveTtl)); }, }); @@ -325,6 +418,7 @@ const ngDevtools = defineDevframe({ args: [on !== false], optional: true, }); + return { pages: pipePages.size }; }, }); @@ -352,7 +446,9 @@ const ngDevtools = defineDevframe({ handler: (report: unknown) => { if (!isRouterReport(report, limits.navigations)) return { hasConfig: false }; try { - applyRouter(mergeRouterReport(routerPages, report)); + applyRouter( + mergeRouterReport(routerPages, report, Date.now(), visibility.ttl(ROUTER_PAGE_TTL_MS)), + ); } catch { routerPages.delete(report.pageId); } @@ -443,10 +539,7 @@ const ngDevtools = defineDevframe({ name: 'router-lint', type: 'query', jsonSerializable: true, - handler: (pageId: unknown) => { - const page = pageFor(pageId); - return page?.config ? lintRoutes(page) : []; - }, + handler: (pageId: unknown) => routerLintResult(pageFor(pageId)), }); register({ @@ -489,23 +582,36 @@ const ngDevtools = defineDevframe({ const httpState = await my.rpc.sharedState('http', { initialValue: { serverCalls: [], pages: [], rules: [...registry.rules] } as HttpState, }); + const httpPayloadState = await my.rpc.sharedState('http-payloads', { + initialValue: { pages: {} } as HttpPayloadState, + }); + const httpPayloads = new Map(); let pendingServerCalls: HttpCall[] = []; + let pendingDropped = 0; let flushTimer: ReturnType | undefined; const flushServerCalls = () => { flushTimer = undefined; const batch = pendingServerCalls; pendingServerCalls = []; + let dropped = pendingDropped; + pendingDropped = 0; httpState.mutate((draft) => { draft.serverCalls.push(...batch); - if (draft.serverCalls.length > limits.httpCalls) { - draft.serverCalls.splice(0, draft.serverCalls.length - limits.httpCalls); + const extra = draft.serverCalls.length - limits.httpCalls; + if (extra > 0) { + draft.serverCalls.splice(0, extra); + dropped += extra; } + if (dropped) draft.serverDropped = (draft.serverDropped ?? 0) + dropped; }); }; registry.record = on.http ? (call) => { - pendingServerCalls.push(call); - if (pendingServerCalls.length > limits.httpCalls) pendingServerCalls.shift(); + pendingServerCalls.push(redactCall(call)); + if (pendingServerCalls.length > limits.httpCalls) { + pendingServerCalls.shift(); + pendingDropped++; + } flushTimer ??= setTimeout(flushServerCalls, 100); } : () => {}; @@ -513,6 +619,14 @@ const ngDevtools = defineDevframe({ httpState.mutate((draft) => { draft.pages = [...httpPages.values()].sort((a, b) => a.firstSeenAt - b.firstSeenAt); }); + const forgetHttpPages = (pageIds: string[]) => { + for (const id of pageIds) httpPages.delete(id); + applyHttpPages(); + if (!pageIds.some((id) => httpPayloads.delete(id))) return; + httpPayloadState.mutate((draft) => { + for (const id of pageIds) delete draft.pages[id]; + }); + }; const setHttpRules = (rules: HttpRule[]) => { registry.rules = rules; httpState.mutate((draft) => { @@ -527,34 +641,59 @@ const ngDevtools = defineDevframe({ type: 'action', jsonSerializable: true, handler: (report: unknown) => { - const page = report as Partial | null; + const page = report as (Partial & { payload?: unknown }) | null; if (!page || typeof page.pageId !== 'string' || typeof page.url !== 'string') return; + if (page.pageId.length >= 50) return; const known = httpPages.get(page.pageId); - const url = page.url.slice(0, 2000); + const url = redactUrl(page.url); const hasPayload = page.payload !== undefined; if (!hasPayload && !known) return { needPayload: true }; + const calls = sanitizeCalls(page.calls, limits.httpCalls).map(redactCall); httpPages.set(page.pageId, { pageId: page.pageId, url, - initialUrl: typeof page.initialUrl === 'string' ? page.initialUrl.slice(0, 2000) : url, + initialUrl: typeof page.initialUrl === 'string' ? redactUrl(page.initialUrl) : url, title: typeof page.title === 'string' ? page.title.slice(0, 200) : '', - payload: hasPayload ? sanitizePayload(page.payload) : known!.payload, hydration: sanitizeHydration(page.hydration), - calls: sanitizeCalls(page.calls, limits.httpCalls), + calls: + page.full === false && known + ? [...known.calls, ...calls].slice(-limits.httpCalls) + : calls, + dropped: + typeof page.dropped === 'number' && page.dropped > 0 ? Math.floor(page.dropped) : 0, firstSeenAt: known?.firstSeenAt ?? Date.now(), reportedAt: Date.now(), }); applyHttpPages(); + if (hasPayload) { + const payload = nameServerFns(sanitizePayload(page.payload)); + httpPayloads.set(page.pageId, payload); + httpPayloadState.mutate((draft) => { + draft.pages[page.pageId!] = payload; + }); + } return { needPayload: false }; }, }); + register({ + name: 'ping-http', + type: 'action', + jsonSerializable: true, + handler: (pageId: unknown) => { + const page = typeof pageId === 'string' ? httpPages.get(pageId) : undefined; + if (!page) return { known: false }; + httpPages.set(page.pageId, { ...page, reportedAt: Date.now() }); + return { known: true }; + }, + }); + register({ name: 'forget-http-page', type: 'action', jsonSerializable: true, handler: (pageId: unknown) => { - if (typeof pageId === 'string' && httpPages.delete(pageId)) applyHttpPages(); + if (typeof pageId === 'string' && httpPages.has(pageId)) forgetHttpPages([pageId]); }, }); @@ -582,20 +721,22 @@ const ngDevtools = defineDevframe({ handler: () => { if (!config.actions.http) throw new Error(actionBlockedMessage('http')); pendingServerCalls = []; + pendingDropped = 0; + for (const [id, page] of httpPages) httpPages.set(id, { ...page, calls: [], dropped: 0 }); httpState.mutate((draft) => { draft.serverCalls = []; + draft.serverDropped = 0; + draft.pages = [...httpPages.values()].sort((a, b) => a.firstSeenAt - b.firstSeenAt); }); void my.rpc.broadcast({ method: 'http-clear', args: [], optional: true }); }, }); const expiry = setInterval(() => { - const staleHttp = [...httpPages].filter(([, p]) => Date.now() - p.reportedAt > 15_000); - if (staleHttp.length) { - for (const [id] of staleHttp) httpPages.delete(id); - applyHttpPages(); - } - const stale = [...signalPages].filter(([, p]) => Date.now() - p.reportedAt > 15_000); + if (visibility.expire()) applyVisibility(); + const staleHttp = [...httpPages].filter(([id, p]) => Date.now() - p.reportedAt > liveTtl(id)); + if (staleHttp.length) forgetHttpPages(staleHttp.map(([id]) => id)); + const stale = [...signalPages].filter(([id, p]) => Date.now() - p.reportedAt > liveTtl(id)); if (stale.length) { for (const [id] of stale) signalPages.delete(id); signalGraphState.mutate((draft) => { @@ -607,21 +748,31 @@ const ngDevtools = defineDevframe({ } }); } - if (expireComponentPages(componentPages)) applyComponentPages(); + if (expireComponentPages(componentPages, Date.now(), liveTtl)) applyComponentPages(); + if (expireCdPages(cdPages, Date.now(), liveTtl)) applyCd(); const staleInjectors = [...injectorPages].filter( - ([, p]) => Date.now() - p.reportedAt > 15_000, + ([id, p]) => Date.now() - p.reportedAt > liveTtl(id), ); if (staleInjectors.length) { for (const [id] of staleInjectors) injectorPages.delete(id); applyInjectorPages(); } - const next = expirePages(formPages, Date.now(), limits.formTimeline); + const next = expirePages( + formPages, + Date.now(), + limits.formTimeline, + visibility.ttl(FORMS_PAGE_TTL_MS), + ); if (next) applyForms(next); - const nextRouter = expireRouterPages(routerPages); + const nextRouter = expireRouterPages( + routerPages, + Date.now(), + visibility.ttl(ROUTER_PAGE_TTL_MS), + ); if (nextRouter) applyRouter(nextRouter); - const nextPipes = expirePipePages(pipePages); + const nextPipes = expirePipePages(pipePages, Date.now(), liveTtl); if (nextPipes) applyPipes(nextPipes); - if (expireNgrxPages(ngrxPages)) applyNgrx(); + if (expireNgrxPages(ngrxPages, Date.now(), liveTtl)) applyNgrx(); }, 5000); expiry.unref?.(); registry.owner = ctx; @@ -659,12 +810,13 @@ const ngDevtools = defineDevframe({ name: 'request-page-highlight', type: 'action', jsonSerializable: true, - handler: (selector: string | { pageId?: unknown; id?: unknown } | null) => { + handler: (selector: string | { pageId?: unknown; id?: unknown; reveal?: unknown } | null) => { const target = selector && typeof selector === 'object' && typeof selector.id === 'string' ? { id: selector.id.slice(0, 50), ...(typeof selector.pageId === 'string' ? { pageId: selector.pageId } : {}), + ...(selector.reveal === true ? { reveal: true } : {}), } : typeof selector === 'string' ? selector @@ -789,6 +941,79 @@ const ngDevtools = defineDevframe({ if (!isComponentReport(report)) return; componentPages.set(report.pageId, toComponentPage(report)); applyComponentPages(); + for (const check of [...componentWaiters]) check(); + }, + }); + + const cdPages = new Map(); + const cdState = await my.rpc.sharedState('change-detection', { + initialValue: { pages: {} } as CdState, + }); + const applyCd = () => + cdState.mutate((draft) => { + draft.pages = Object.fromEntries(cdPages); + }); + const requestCdRecord = (message: { pageId?: unknown; on?: unknown; clear?: unknown }) => { + const pageId = typeof message?.pageId === 'string' ? message.pageId.slice(0, 50) : undefined; + const on = typeof message?.on === 'boolean' ? message.on : undefined; + void my.rpc.broadcast({ + method: 'change-detection-record', + args: [{ pageId, on, clear: message?.clear === true }], + optional: true, + }); + }; + + register({ + name: 'push-change-detection', + type: 'action', + jsonSerializable: true, + handler: (report: unknown) => { + const page = toCdPage(report, limits.cdCycles); + if (!page) return; + cdPages.set(page.pageId, page); + applyCd(); + }, + }); + + register({ + name: 'ping-change-detection', + type: 'action', + jsonSerializable: true, + handler: (pageId: unknown) => { + const page = typeof pageId === 'string' ? cdPages.get(pageId) : undefined; + if (!page) return { known: false }; + cdPages.set(page.pageId, { ...page, reportedAt: Date.now() }); + return { known: true }; + }, + }); + + register({ + name: 'forget-change-detection-page', + type: 'action', + jsonSerializable: true, + handler: (pageId: unknown) => { + if (typeof pageId === 'string' && cdPages.delete(pageId)) applyCd(); + }, + }); + + register({ + name: 'request-change-detection-record', + type: 'action', + jsonSerializable: true, + handler: (message: { pageId?: unknown; on?: unknown; clear?: unknown }) => { + requestCdRecord(message); + }, + }); + + register({ + name: 'ping-component-tree', + type: 'action', + jsonSerializable: true, + handler: (pageId: unknown) => { + const page = typeof pageId === 'string' ? componentPages.get(pageId) : undefined; + if (!page) return { known: false }; + componentPages.set(page.pageId, { ...page, reportedAt: Date.now() }); + return { known: true }; }, }); @@ -816,27 +1041,88 @@ const ngDevtools = defineDevframe({ } const id = typeof target?.id === 'string' ? target.id.slice(0, 50) : null; const pageId = typeof target?.pageId === 'string' ? target.pageId : undefined; - componentTree.mutate((draft) => { - draft.selectedId = id; + selectComponentOnPage(pageId, id); + }, + }); + + const pendingPicks = new Map) => void>(); + let pickSeq = 0; + + register({ + name: 'request-component-pick', + type: 'action', + jsonSerializable: true, + handler: (target: { pageId?: unknown } | null) => { + const asked = typeof target?.pageId === 'string' ? target.pageId : undefined; + const pageId = asked ?? latestComponentPage(componentPages.values())?.pageId; + if (!pageId || !componentPages.has(pageId)) { + return { ok: false, error: 'No page is connected. Open the app in a browser first.' }; + } + return new Promise>((resolve) => { + const requestId = `pick${++pickSeq}`; + const timer = setTimeout(() => { + pendingPicks.delete(requestId); + resolve({ ok: false, error: 'The page did not answer. Is the app still open?' }); + }, 20_000); + timer.unref?.(); + pendingPicks.set(requestId, (result) => { + clearTimeout(timer); + pendingPicks.delete(requestId); + if (result['ok'] === true && typeof result['id'] === 'string') { + componentTree.mutate((draft) => { + draft.selectedId = result['id'] as string; + }); + } + resolve({ ...result, pageId }); + }); + void my.rpc.broadcast({ + method: 'component-pick', + args: [{ requestId, pageId }], + optional: true, + }); }); + }, + }); + + register({ + name: 'cancel-component-pick', + type: 'action', + jsonSerializable: true, + handler: (target: { pageId?: unknown } | null) => { + const pageId = typeof target?.pageId === 'string' ? target.pageId : undefined; void my.rpc.broadcast({ - method: 'inspect-component-in-page', - args: [{ pageId, id }], + method: 'component-pick', + args: [{ pageId, cancel: true }], optional: true, }); }, }); + register({ + name: 'component-pick-result', + type: 'action', + jsonSerializable: true, + handler: (message: { requestId?: unknown; result?: unknown } | null) => { + if (typeof message?.requestId !== 'string') return; + const result = + message.result && typeof message.result === 'object' + ? (message.result as Record) + : { ok: false, error: 'Empty answer.' }; + pendingPicks.get(message.requestId)?.(result); + }, + }); + register({ name: 'select-signal-target', type: 'action', jsonSerializable: true, - handler: (target: { pageId?: unknown; id?: unknown } | null) => { + handler: (target: { pageId?: unknown; id?: unknown; env?: unknown } | null) => { const id = typeof target?.id === 'string' ? target.id.slice(0, 50) : null; + const env = typeof target?.env === 'string' ? target.env.slice(0, 200) : undefined; const pageId = typeof target?.pageId === 'string' ? target.pageId : undefined; void my.rpc.broadcast({ method: 'select-signal-component', - args: [{ pageId, id }], + args: [env ? { pageId, env } : { pageId, id }], optional: true, }); }, @@ -856,9 +1142,9 @@ const ngDevtools = defineDevframe({ const { historyDelta, ...rest } = incoming; if (!prev) delta = false; const history: Record = {}; - for (const node of rest.nodes ?? []) { - const list = [...(prev?.history?.[node.id] ?? []), ...(historyDelta[node.id] ?? [])]; - if (list.length) history[node.id] = list.slice(-50); + for (const { id } of [...(rest.nodes ?? []), ...(rest.resources ?? [])]) { + const list = [...(prev?.history?.[id] ?? []), ...(historyDelta[id] ?? [])]; + if (list.length) history[id] = list.slice(-50); } graph = { ...rest, history }; } @@ -872,11 +1158,30 @@ const ngDevtools = defineDevframe({ }, }); + register({ + name: 'ping-signal-graph', + type: 'action', + jsonSerializable: true, + handler: (pageId: unknown) => { + const page = typeof pageId === 'string' ? signalPages.get(pageId) : undefined; + if (!page) return { known: false }; + signalPages.set(pageId as string, { ...page, reportedAt: Date.now() }); + return { known: true }; + }, + }); + register({ name: 'push-injector-tree', type: 'action', jsonSerializable: true, - handler: (report: { pageId?: unknown; roots?: unknown; environment?: unknown } | null) => { + handler: ( + report: { + pageId?: unknown; + roots?: unknown; + environment?: unknown; + truncated?: unknown; + } | null, + ) => { const pageId = report?.pageId; if (typeof pageId !== 'string' || !pageId || pageId.length >= 50) return; injectorPages.set(pageId, { @@ -885,12 +1190,25 @@ const ngDevtools = defineDevframe({ environment: (Array.isArray(report?.environment) ? report.environment : []) as InjectorTreeNode[], + ...(report?.truncated === true ? { truncated: true } : {}), reportedAt: Date.now(), }); applyInjectorPages(); }, }); + register({ + name: 'ping-injector-tree', + type: 'action', + jsonSerializable: true, + handler: (pageId: unknown) => { + const page = typeof pageId === 'string' ? injectorPages.get(pageId) : undefined; + if (!page) return { known: false }; + injectorPages.set(page.pageId, { ...page, reportedAt: Date.now() }); + return { known: true }; + }, + }); + register({ name: 'forget-injector-page', type: 'action', @@ -969,7 +1287,7 @@ const ngDevtools = defineDevframe({ id: 'ng-devtools:component-tree', name: 'Angular Component Tree', description: - 'Live component instances per connected page, as JSON: `pages[pageId].roots` is a tree with one node per rendered instance (`id` instance id, `name` class name, `tag` host tag, `directives` on the host), `count`, and `detail` (live input values, outputs, listeners, change detection, encapsulation and injected dependencies) for the instance selected in the panel. `nodes` repeats the roots of the most recent page. Empty when no page is connected.', + 'Live component instances per connected page, as JSON: `pages[pageId].roots` is a tree with one node per rendered instance (`id` instance id, `name` class name, `tag` host tag, `directives` on the host), `count`, and `detail` (live input values, outputs, other properties, listeners, change detection, encapsulation and injected dependencies) for the selected instance: the one picked in the panel, on the page, or through ng-devtools:highlight or ng-devtools:inspect-component. `detail.properties` lists the other own fields (signals and resources unwrapped). `nodes` repeats the roots of the most recent page. Empty when no page is connected.', mimeType: 'application/json', read: () => ({ text: JSON.stringify(componentTree.value(), null, 2) }), }); @@ -978,7 +1296,7 @@ const ngDevtools = defineDevframe({ id: 'ng-devtools:signal-graph', name: 'Angular Signal Graph', description: - 'Live signal dependency graph per connected page (`pages[pageId]`, `graph` is the latest): nodes (signal, computed, effect, linkedSignal), edges (producer→consumer), `component` (instance id, class name, host tag and host path) and recent value history per node. Only signals a template or an effect has read appear. Read this to understand reactive data flow.', + 'Live signal dependency graph per connected page (`pages[pageId]`, `graph` is the latest): nodes (signal, computed, effect, linkedSignal), edges (producer→consumer), `component` (instance id, class name, host tag and host path) or `injector` (a root or route environment injector), `resources` (each resource folded into one entry with status, params, value and error), `environments` (injectors the page can report) and recent value history per node and status history per resource. Only signals a template or an effect has read appear. Read this to understand reactive data flow.', mimeType: 'application/json', read: () => ({ text: JSON.stringify(signalGraphState.value(), null, 2) }), }); @@ -987,7 +1305,7 @@ const ngDevtools = defineDevframe({ id: 'ng-devtools:injector-tree', name: 'Angular Injector Tree', description: - 'DI injector hierarchy last reported by a connected page, with providers at each level. Empty when no page is connected.', + 'DI injector hierarchy last reported by a connected page (`pages[pageId]`, `roots` and `environment` are the latest), with providers at each level. `truncated: true` means the page has more element injectors than it reports (the first 2000), so the rest are missing. Empty when no page is connected.', mimeType: 'application/json', read: () => ({ text: JSON.stringify(injectorTreeState.value(), null, 2) }), }); @@ -996,7 +1314,7 @@ const ngDevtools = defineDevframe({ id: 'ng-devtools:ngrx-store', name: 'NgRx Store State', description: - 'Live NgRx state per connected page: each @ngrx/signals store (state, computed values, methods, the component fields that reference it) and the @ngrx/store state, plus a change log with a per-entry state diff (method calls, patchState writes, dispatched actions and restores). `classic.paused` is true after a restore jumped Store DevTools to a past state: new actions are logged but do not change the state until the panel goes back to the latest state. Empty when no page is connected.', + 'Live NgRx state per connected page: each @ngrx/signals store (state, computed values, methods, the component fields that reference it) and the @ngrx/store state, plus a change log with a per-entry state diff (method calls, patchState writes, dispatched actions and restores). An @ngrx/store action entry has an `origin`: `dispatch` (Store.dispatch, usually a component or service), `effect` (sent by an NgRx effect through Store.next) or `reactive` (Store.dispatch with a function); it is missing for actions sent another way. `classic.paused` is true after a restore jumped Store DevTools to a past state: new actions are logged but do not change the state until the panel goes back to the latest state. Empty when no page is connected.', mimeType: 'application/json', read: () => ({ text: JSON.stringify(ngrxStoreState.value(), null, 2) }), }); @@ -1020,10 +1338,33 @@ const ngDevtools = defineDevframe({ }); // Agent tools + const noComponentTree = (outcome: string) => + `No component tree has been reported${outcome}. This is what a page that has never connected reports, and also what a connected page reports when its components are not readable. Live data needs a page: connect through the MCP endpoint of the server that runs the app, with the app open in a browser. The stdio server has no page attached and only ever reports this.`; + const componentPageProperty = { + type: 'string', + description: + 'Page id, when more than one tab reports (see ng-devtools:list-pages). Searches every page without it, newest first.', + }; + const componentHits = (selector: string, pageId?: string) => + findComponents( + byRecency(componentPages.values()).filter((page) => !pageId || page.pageId === pageId), + selector, + ); + const unknownComponentPage = (pageId: string | undefined) => + pageId && !componentPages.has(pageId) + ? { + markdown: unknownPageText( + pageId, + byRecency(componentPages.values()), + 'a component tree', + ), + } + : null; + agent.registerTool({ id: 'ng-devtools:highlight', description: - 'Highlight a component in the running Angular app and make it the target of ng-devtools:inspect-signals. Pass an instance id from the ng-devtools:component-tree resource (targets that exact instance, e.g. the second card of a list), a class name, a host tag, or any CSS selector.', + 'Highlight a component in the running Angular app and select it: the ng-devtools:component-tree resource then carries its live `detail` and ng-devtools:inspect-signals targets it. Pass an instance id from the ng-devtools:component-tree resource (targets that exact instance, e.g. the second card of a list), a class name, a host tag, or any CSS selector. A class name or tag resolves on the most recent page unless `page` names another tab. When it matches several instances, it picks the first and lists the ids of all of them.', safety: 'action', inputSchema: { type: 'object', @@ -1033,65 +1374,232 @@ const ngDevtools = defineDevframe({ description: 'Instance id (e.g. c12), class name (e.g. ProductCard), host tag (e.g. app-root) or CSS selector.', }, + page: componentPageProperty, + pageId: { type: 'string', description: 'Same as `page`.' }, }, required: ['selector'], }, - handler: async (args: { selector: string }) => { - const pages = [...componentPages.values()]; - if (!pages.some((page) => page.roots.length)) { + handler: async (args: { selector: string; page?: string; pageId?: string }) => { + const page = pageArgument(args, 'pageId'); + const all = byRecency(componentPages.values()); + if (page && !componentPages.has(page)) { + return { markdown: unknownPageText(page, all, 'a component tree') }; + } + const pages = page ? all.filter((entry) => entry.pageId === page) : all; + if (!pages.some((entry) => entry.roots.length)) { return { - markdown: `No component tree has been reported, so nothing was highlighted. This is what a page that has never connected reports, and also what a connected page reports when its components are not readable. Live data needs a page: connect through the MCP endpoint of the server that runs the app, with the app open in a browser. The stdio server has no page attached and only ever reports this.`, + markdown: noComponentTree(', so nothing was highlighted'), }; } - const [hit] = findComponents(pages, args.selector); - const target = hit ? { pageId: hit.pageId, id: hit.node.id } : args.selector; - void my.rpc.broadcast({ method: 'highlight-in-page', args: [target], optional: true }); + const hits = componentHits(args.selector, page); + const [hit] = hits; + const target = hit + ? { pageId: hit.pageId, id: hit.node.id } + : page + ? { pageId: page, selector: args.selector } + : args.selector; + const shown = typeof target === 'string' ? { selector: target } : target; + void my.rpc.broadcast({ + method: 'highlight-in-page', + args: [{ ...shown, reveal: true }], + optional: true, + }); void my.rpc.broadcast({ method: 'select-signal-component', args: [target], optional: true, }); + if (hit) selectComponentOnPage(hit.pageId, hit.node.id); + const others = otherMatchesText(hits, args.selector); + const otherPages = [ + ...new Set(hits.map((entry) => entry.pageId).filter((id) => id !== hit?.pageId)), + ]; + const also = otherPages.length + ? ` It also matches on ${otherPages.map((id) => `\`${id}\``).join(', ')}. Pass \`page\` to pick another tab.` + : ''; return { markdown: hit - ? `Sent a highlight request for \`${hit.node.name}\` (\`<${hit.node.tag}>\`, instance \`${hit.node.id}\` on page \`${hit.pageId}\`).` - : `Sent a highlight request for \`${args.selector}\`. It only shows if the selector matches an element on the page.`, + ? `Sent a highlight request for \`${hit.node.name}\` (\`<${hit.node.tag}>\`, instance \`${hit.node.id}\` on page \`${hit.pageId}\`) and selected it.${also}${others ? `\n\n${others}` : ''}` + : `Sent a highlight request for \`${args.selector}\`${page ? ` to page \`${page}\`` : ''}. It only shows if the selector matches an element on the page. No component instance matched, so the selection did not change.`, + }; + }, + }); + + agent.registerTool({ + id: 'ng-devtools:inspect-component', + description: + 'Get the live detail of one component instance: inputs, outputs with whether a parent listens, other own properties (signals and resources unwrapped), DOM listeners, host directives, change detection, encapsulation, host path and injected services. Pass an instance id from the ng-devtools:component-tree resource, a class name or a host tag. This selects the instance on its page (the panel follows) and waits for the page to report it. A class name or tag that matches several instances answers for the first and lists the ids of all of them. Secret-looking values are redacted.', + safety: 'read', + inputSchema: { + type: 'object', + properties: { + selector: { + type: 'string', + description: 'Instance id (e.g. c12), class name (e.g. ProductCard) or host tag.', + }, + page: componentPageProperty, + pageId: { type: 'string', description: 'Same as `page`.' }, + }, + required: ['selector'], + }, + handler: async (args: { selector: string; page?: string; pageId?: string }) => { + const page = pageArgument(args, 'pageId'); + const unknown = unknownComponentPage(page); + if (unknown) return unknown; + if (![...componentPages.values()].some((entry) => entry.roots.length)) { + return { markdown: noComponentTree('') }; + } + const hits = componentHits(args.selector, page); + const [hit] = hits; + if (!hit) { + return { + markdown: `No component instance matches \`${args.selector}\`. Pass an instance id, class name or host tag from the ng-devtools:component-tree resource.`, + }; + } + selectComponentOnPage(hit.pageId, hit.node.id); + const detail = await waitForComponentDetail(hit.pageId, hit.node.id); + const others = otherMatchesText(hits, args.selector); + if (!detail) { + return { + markdown: `Selected \`${hit.node.name}\` (instance \`${hit.node.id}\` on page \`${hit.pageId}\`), but the page did not report its detail within 3 seconds. The instance may have been destroyed, or the tab may be in the background. Try again, or read the ng-devtools:component-tree resource later.${others ? `\n\n${others}` : ''}`, + }; + } + return { + markdown: `Live detail of \`${detail.name}\` (\`<${detail.tag}>\`, instance \`${detail.id}\` on page \`${hit.pageId}\`), read from the running page.${others ? `\n\n${others}` : ''}\n\n${JSON.stringify(detail, null, 2)}`, }; }, }); + agent.registerTool({ + id: 'ng-devtools:defer-blocks', + description: + "List the `@defer` blocks the running page renders, read live through Angular's debug API: the owning component, state (placeholder, loading, complete, error), incremental hydration state (dehydrated, hydrated), triggers and whether it has @loading, @placeholder and @error blocks. Flags blocks that failed to load, blocks still on their placeholder after 10 seconds, blocks still dehydrated and `hydrate never` blocks. Each open tab reports its own list; `page` picks one. Says so when the page has no defer block util (production builds).", + safety: 'read', + inputSchema: { + type: 'object', + properties: { + page: { + type: 'string', + description: + 'Page id, when more than one tab reports (see ng-devtools:list-pages). Lists every page without it.', + }, + pageId: { type: 'string', description: 'Same as `page`.' }, + }, + }, + handler: async (args: { page?: string; pageId?: string }) => { + const page = pageArgument(args, 'pageId'); + return ( + unknownComponentPage(page) ?? { + markdown: deferBlocksText( + byRecency(componentPages.values()).filter((entry) => !page || entry.pageId === page), + ), + } + ); + }, + }); + + agent.registerTool({ + id: 'ng-devtools:change-detection', + description: + 'Change detection cycles recorded with Angular\'s profiler (Angular 20+, development build): the slowest components by self time, the most often checked components, and the latest cycles with duration, component checks, sync passes and the output that ran before each one. Recording is off until the panel or this tool starts it; pass `record: "start"`, use the app, then call again without `record`. `stop` keeps the recording, `clear` empties it.', + safety: 'read', + inputSchema: { + type: 'object', + properties: { + record: { type: 'string', enum: ['start', 'stop', 'clear'] }, + page: { type: 'string', description: 'Page id; defaults to the page that is recording.' }, + limit: { type: 'number', description: 'Rows per list (default 10, max 50).' }, + }, + }, + handler: async (args: { record?: string; page?: string; limit?: number }) => { + if (args?.record === 'start' || args?.record === 'stop' || args?.record === 'clear') { + requestCdRecord({ + pageId: args.page, + on: args.record === 'clear' ? undefined : args.record === 'start', + clear: args.record === 'clear', + }); + const next = + args.record === 'start' + ? 'Recording started on every connected page unless you passed `page`. Use the app, then call this tool again without `record`.' + : args.record === 'stop' + ? 'Recording stopped. The cycles recorded so far stay available.' + : 'Recording cleared.'; + return { markdown: next }; + } + return { markdown: changeDetectionText(cdState.value() as CdState, args ?? {}) }; + }, + }); + agent.registerTool({ id: 'ng-devtools:inspect-signals', description: - 'Get the signal graph the running page last reported: signal nodes (signal, computed, linkedSignal, effect), their dependency edges, `component` (instance id, class name, host tag and host path), and `history` (recent value changes per node id; `write` entries are exact, `sample` entries come from polling and `missed` counts values that went unseen). Only signals a template or an effect has read appear. The page reports one graph: the component picked on the Signals page (or via ng-devtools:highlight), otherwise the component the primary router outlet renders deepest, otherwise the first component with a graph. A selector that does not match it returns what is available instead; call ng-devtools:highlight with it first to switch the graph to it.', + "Get the signal graph the running page last reported: signal nodes (signal, computed, linkedSignal, effect), their dependency edges, `component` (instance id, class name, host tag and host path) or `injector` (an environment injector), `resources` (each resource(), httpResource() or rxResource() folded into one entry with status, isLoading, params, value, error and the ids of its internal nodes), `environments` (root and route injectors the page can report), and `history` (recent value changes per node id and status changes per resource id; `write` entries are exact, `sample` entries come from polling and `missed` counts values that went unseen). `changes` on a node or resource counts every change since the page first saw it, past the 50 kept entries. `nodeCount` is set when Angular reported more nodes than the 400 kept. Only signals a template or an effect has read appear. The page reports one graph: the component picked on the Signals page (or via ng-devtools:highlight), otherwise the component the primary router outlet renders deepest, otherwise the first component with a graph. Pass `root` for effects in root services, or a route path (`/admin` or `Route: admin`) for effects in that route's providers; this switches the page's graph to that injector. A component selector that does not match the reported graph returns what is available instead; call ng-devtools:highlight with it first to switch the graph to it.", safety: 'read', inputSchema: { type: 'object', properties: { selector: { type: 'string', - description: 'Host tag, class name or instance id of the component, e.g. app-root.', + description: + 'Host tag, class name or instance id of the component (e.g. app-root), `root`, or a route path (e.g. /admin).', }, + page: PAGE_ARGUMENT, }, required: ['selector'], }, - handler: async (args: { selector: string }) => { + handler: async (args: { selector: string; page?: string }) => { // `broadcast` resolves with nothing, so the page cannot answer a // question. Read the graph the overlay pushes into shared state. + const page = pageArgument(args); + const all = byRecency([...signalPages].map(([pageId, entry]) => ({ pageId, ...entry }))); + if (page && !signalPages.has(page)) { + return { markdown: unknownPageText(page, all, 'a signal graph') }; + } const matches = (g: PageGraph) => - [g.componentSelector, g.component?.name, g.component?.id].includes(args.selector); - const matched = [...signalPages.values()] - .filter((page) => matches(page.graph)) - .sort((a, b) => b.reportedAt - a.reportedAt)[0]?.graph; - const graph = matched ?? signalGraphState.value().graph; + [g.componentSelector, g.component?.name, g.component?.id].includes(args.selector) || + (!!g.injector && injectorMatches(g.injector, args.selector)); + const latestMatch = () => + byRecency( + [...signalPages] + .map(([pageId, entry]) => ({ pageId, ...entry })) + .filter((entry) => !page || entry.pageId === page), + ).find((entry) => matches(entry.graph))?.graph; + let matched = latestMatch(); + if (!matched && signalPages.size && isEnvironmentRequest(args.selector)) { + void my.rpc.broadcast({ + method: 'select-signal-component', + args: [page ? { pageId: page, env: args.selector } : { env: args.selector }], + optional: true, + }); + for (let waited = 0; !matched && waited < ENV_WAIT_MS; waited += 50) { + await new Promise((resolve) => setTimeout(resolve, 50)); + matched = latestMatch(); + } + } + const graph = + matched ?? + (page + ? all.find((entry) => entry.pageId === page)?.graph + : (signalGraphState.value().graph as PageGraph | null)); if (!graph) { return { markdown: `No signal graph available. Live data needs a page: connect through the MCP endpoint of the server that runs the app, with the app open in a browser. The stdio server has no page attached and only ever reports this.`, }; } + if (graph.unsupported) { + return { + markdown: `The page runs an Angular version whose signal graph has no node ids, so there is no live graph. The live signal graph needs Angular 20.1 or later. The get-signals source scan still works.`, + }; + } const json = JSON.stringify(graph, null, 2); - if (graph.componentSelector && !matches(graph)) { + if (!matches(graph)) { + const known = (graph.environments ?? []).map((e) => `\`${e.name}\``).join(', '); + const covers = graph.componentSelector ?? graph.injector?.name ?? 'another target'; + const hint = isEnvironmentRequest(args.selector) + ? ` No environment injector on the page matches it${known ? `; the page knows ${known}` : ''}.` + : ''; return { - markdown: `No signal graph for \`${args.selector}\`. The live graph covers \`${graph.componentSelector}\`:\n\n${json}`, + markdown: `No signal graph for \`${args.selector}\`.${hint} The live graph covers \`${covers}\`:\n\n${json}`, }; } return { markdown: json }; @@ -1101,7 +1609,7 @@ const ngDevtools = defineDevframe({ agent.registerTool({ id: 'ng-devtools:inspect-providers', description: - 'Get the DI injector hierarchy a running page reported, with the providers at each level. Each open tab reports its own tree; `pageId` picks one and defaults to the most recent. The page reports the whole tree rather than one component, so the selector only labels the answer.', + 'Get the DI injectors a running page reported. With no arguments, returns the whole tree (element and environment injectors with their providers), cut off at 20,000 characters. `selector` returns only the matching element injectors, each with what it injects and its lookup path resolved to names and provided tokens. `token` returns which injectors provide that token and which components inject it. Each open tab reports its own tree; `page` picks one and defaults to the most recent. Says so when the page reported only part of a large tree.', safety: 'read', inputSchema: { type: 'object', @@ -1109,35 +1617,36 @@ const ngDevtools = defineDevframe({ selector: { type: 'string', description: - 'Optional CSS selector, e.g. app-root. It only labels the answer: the page reports the whole tree either way.', + 'Optional. A tag name (app-card), a component or directive class name (CardComponent), or an injector id. Returns only the matching element injectors.', }, - pageId: { + token: { type: 'string', - description: 'Page id, when more than one tab reports. Defaults to the most recent.', + description: + 'Optional. A token name, such as a service class or InjectionToken description (HttpClient, API_URL). Returns where it is provided and injected. With `selector`, only injections by the matching injectors are listed.', }, + page: PAGE_ARGUMENT, + pageId: { type: 'string', description: 'Same as `page`.' }, }, }, - handler: async (args: { selector?: string; pageId?: string }) => { - const page = - (args.pageId ? injectorPages.get(args.pageId) : undefined) ?? latestInjectorPage(); - if (!page?.roots.length) { + handler: async (args: { + selector?: string; + token?: string; + page?: string; + pageId?: string; + }) => { + const requested = pageArgument(args, 'pageId'); + if (requested && !injectorPages.has(requested)) { return { - markdown: `No injector data available. Live data needs a page: connect through the MCP endpoint of the server that runs the app, with the app open in a browser. The stdio server has no page attached and only ever reports this.`, + markdown: unknownPageText(requested, [...injectorPages.values()], 'an injector tree'), }; } - const { pageId, roots, environment } = page; - const scope = args.selector ? `, not filtered to \`${args.selector}\`` : ''; - return { - markdown: `This is the injector tree for the whole page \`${pageId}\`${scope}. Element injectors list what each component and directive injected and which injector supplied it (\`providedBy\` is an injector id). Environment injectors run from the platform down to the root and any route injectors.\n\nElement injectors:\n\n${JSON.stringify(roots, null, 2)}\n\nEnvironment injectors:\n\n${JSON.stringify(environment, null, 2)}`, - }; + const page = requested ? injectorPages.get(requested) : latestInjectorPage(); + return { markdown: inspectProvidersText(page, args) }; }, }); const noRouter = `No router state has been reported. Live data needs a page: connect through the MCP endpoint of the server that runs the app, with the app open in a browser. The stdio server has no page attached and only ever reports this.`; - const pageProperty = { - type: 'string', - description: 'Page id, when more than one tab reports. Defaults to the most recent.', - }; + const pageProperty = PAGE_ARGUMENT; agent.registerTool({ id: 'ng-devtools:inspect-route', @@ -1308,7 +1817,7 @@ const ngDevtools = defineDevframe({ agent.registerTool({ id: 'ng-devtools:navigate', description: - 'Acts on the running app\'s router (development only). action "navigate" goes to `url` (same-origin, starting with "/") or to `pattern` with `params` (e.g. /users/:id with {"id":"7"}), optionally with replaceUrl or skipLocationChange, and waits for the outcome; "abort" stops the navigation in flight; "replay" re-runs navigation `id` and compares the outcome; "probe" runs the real matcher for `url` without navigating (it runs canMatch and may load lazy chunks); "instrument" turns per-guard and per-resolver recording on or off; "resolve-lazy" reads the routes of an unloaded lazy route (`routeId` from list-routes) without registering them.', + 'Acts on the running app\'s router (development only). action "navigate" goes to `url` (same-origin, starting with "/") or to `pattern` with `params` (e.g. /users/:id with {"id":"7"}), optionally with replaceUrl or skipLocationChange, and waits for the outcome; "abort" stops the navigation in flight; "replay" re-runs navigation `id` and compares the outcome; "probe" runs the real matcher for `url` without navigating (it runs canMatch and may load lazy chunks; when a canMatch guard redirects, it stops the redirect and returns `redirectedTo`); "instrument" turns per-guard and per-resolver recording on or off; "resolve-lazy" reads the routes of an unloaded lazy route (`routeId` from list-routes) without registering them.', safety: 'action', inputSchema: { type: 'object', @@ -1323,7 +1832,12 @@ const ngDevtools = defineDevframe({ params: { type: 'object', additionalProperties: { type: 'string' } }, replaceUrl: { type: 'boolean' }, skipLocationChange: { type: 'boolean' }, - waitFor: { type: 'string', enum: ['navigation', 'stable'] }, + waitFor: { + type: 'string', + enum: ['navigation', 'stable'], + description: + 'For navigate. "navigation" (default) returns when the navigation ends. "stable" also waits until the app has no pending tasks (HTTP requests, httpResource loads, timers), like ApplicationRef.whenStable(); the result says `stable: true`, or `stable: false` when 10s ran out first.', + }, id: { type: 'integer', description: 'Navigation id for replay.' }, on: { type: 'boolean', description: 'For instrument.' }, routeId: { type: 'string', description: 'Route id for resolve-lazy.' }, @@ -1347,7 +1861,14 @@ const ngDevtools = defineDevframe({ const target = args.page ? state.pages.find((p) => p.pageId === args.page) : state.pages.find((p) => p.snapshot); - if (!target?.snapshot) return { markdown: noRouter }; + if (args.page && !target) return { markdown: noPage(args.page, state) }; + if (!target?.snapshot) { + return { + markdown: args.page + ? `Page \`${args.page}\` reports no Router, so there is nothing to navigate. The app may not use the Angular router, or it is not a development build.` + : noRouter, + }; + } if (args.action === 'resolve-lazy' && typeof args.routeId !== 'string') return { markdown: 'routeId is required for resolve-lazy.' }; const request = @@ -1380,6 +1901,11 @@ const ngDevtools = defineDevframe({ }); const noForms = `No forms have been reported. Live data needs a page: connect through the MCP endpoint of the server that runs the app, with the app open in a browser, on a page that renders a form. The stdio server has no page attached and only ever reports this.`; + const unknownFormPage = (args: unknown) => { + const page = pageArgument(args as Record | undefined); + if (!page || formPages.has(page)) return undefined; + return { markdown: unknownPageText(page, [...formPages.values()], 'forms') }; + }; const formProperty = { type: 'string', description: @@ -1418,6 +1944,8 @@ const ngDevtools = defineDevframe({ handler: async (args: InspectFormsArgs) => { const state = formsState.value() as FormsState; if (!state.forms.length) return { markdown: noForms }; + const elsewhere = unknownFormPage(args); + if (elsewhere) return elsewhere; return { markdown: inspectFormsText(state, args) }; }, }); @@ -1440,6 +1968,8 @@ const ngDevtools = defineDevframe({ handler: async (args: { form?: string; page?: string }) => { const state = formsState.value() as FormsState; if (!state.forms.length) return { markdown: noForms }; + const elsewhere = unknownFormPage(args); + if (elsewhere) return elsewhere; return { markdown: explainFormsText(state, args) }; }, }); @@ -1458,6 +1988,8 @@ const ngDevtools = defineDevframe({ async (args: A) => { const state = formsState.value() as FormsState; if (!state.forms.length) return { markdown: noForms }; + const elsewhere = unknownFormPage(args); + if (elsewhere) return elsewhere; return { markdown: fn(state, args ?? ({} as A)) }; }; const str = (value: unknown) => (typeof value === 'string' ? value : undefined); @@ -1479,6 +2011,8 @@ const ngDevtools = defineDevframe({ handler: async (args: { form?: string; path?: string; selector?: string; page?: string }) => { const state = formsState.value() as FormsState; if (!state.forms.length) return { markdown: noForms }; + const elsewhere = unknownFormPage(args); + if (elsewhere) return elsewhere; let target = { form: args?.form, path: args?.path, page: args?.page }; if (args?.selector) { const located = await requestFormAction( @@ -1580,6 +2114,8 @@ const ngDevtools = defineDevframe({ handler: async (args: { form?: string; page?: string }) => { const state = formsState.value() as FormsState; if (!state.forms.length && !state.setupErrors?.length) return { markdown: noForms }; + const elsewhere = unknownFormPage(args); + if (elsewhere) return elsewhere; return { markdown: lintFormsText(state, args ?? {}) }; }, }); @@ -1587,7 +2123,7 @@ const ngDevtools = defineDevframe({ agent.registerTool({ id: 'ng-devtools:lint-pipes', description: - 'Deterministic checks on pipes found in source: an impure pipe used inside an @for block (runs every check, potentially once per row), `| json` left in a template (a debugging aid), and a pure pipe whose transform() reads a signal directly (its memoization only tracks its own arguments, not signals it reads).', + 'Deterministic checks on pipes found in source: an impure pipe used inside an @for block (runs every check, potentially once per row), `| json` left in a template (a debugging aid), a pure pipe whose transform() reads a signal (its memoization only tracks its own arguments, not signals it reads; zero-argument calls on injected services are reported at info level), and a method call piped to `| async`, like `getData() | async` (a new Observable per check makes AsyncPipe resubscribe every time).', safety: 'read', inputSchema: { type: 'object', properties: {} }, handler: async () => ({ markdown: lintPipesText(ctx.cwd) }), @@ -1596,7 +2132,7 @@ const ngDevtools = defineDevframe({ agent.registerTool({ id: 'ng-devtools:explain-pipe', description: - 'Explain one pipe by name: where it is declared or used, whether it is pure, live instance/call counts and last input/output when instrumentation is on, an experimental stale-value warning, and any lint findings. Use this to answer "why is this pipe slow or stale?"', + 'Explain one pipe by name: where it is declared or used, whether it is pure, live instance/call counts and last input/output when instrumentation is on, an experimental stale-value warning, `| async` usages that resubscribe on every check (for `async`), and any lint findings. Use this to answer "why is this pipe slow or stale?"', safety: 'read', inputSchema: { type: 'object', @@ -1661,6 +2197,8 @@ const ngDevtools = defineDevframe({ timeoutMs?: number; page?: string; }) => { + const elsewhere = unknownFormPage(args); + if (elsewhere) return elsewhere; const timeout = Math.min(Math.max(Number(args?.timeoutMs) || 5000, 100), 30_000); const start = Date.now(); while (true) { @@ -1747,6 +2285,8 @@ const ngDevtools = defineDevframe({ handler: async (args: Record) => { const state = formsState.value() as FormsState; if (!state.forms.length) return { markdown: noForms }; + const elsewhere = unknownFormPage(args); + if (elsewhere) return elsewhere; const match = resolveForm(state.forms, str(args?.['form'])); if (typeof match === 'string') return { markdown: match }; const { form: _form, ...rest } = args; @@ -1774,6 +2314,8 @@ const ngDevtools = defineDevframe({ handler: async (args: Record) => { const state = formsState.value() as FormsState; if (!state.forms.length) return { markdown: noForms }; + const elsewhere = unknownFormPage(args); + if (elsewhere) return elsewhere; const match = resolveForm(state.forms, str(args?.['form'])); if (typeof match === 'string') return { markdown: match }; const result = await requestFormAction({ @@ -1788,22 +2330,65 @@ const ngDevtools = defineDevframe({ }, }); + agent.registerTool({ + id: 'ng-devtools:list-pages', + description: + 'List the browser tabs that report live data to this server, newest first: page id, URL, seconds since the last report and which inspectors report. Pass a page id as `page` to the live tools to pick a tab; without it they use the most recent page.', + safety: 'read', + inputSchema: { type: 'object', properties: {} }, + handler: async () => { + const urls = new Map(); + for (const page of routerPages.values()) { + if (page.snapshot?.url) urls.set(page.pageId, page.snapshot.url); + } + for (const page of httpPages.values()) urls.set(page.pageId, page.url); + const withUrl = (pages: Iterable) => + [...pages].map((page) => ({ + pageId: page.pageId, + reportedAt: page.reportedAt, + url: urls.get(page.pageId), + })); + const pages = summarizePages({ + components: withUrl(componentPages.values()), + signals: withUrl([...signalPages].map(([pageId, entry]) => ({ pageId, ...entry }))), + injectors: withUrl(injectorPages.values()), + ngrx: withUrl(ngrxPages.values()), + forms: withUrl(formPages.values()), + router: withUrl(routerPages.values()), + pipes: withUrl(pipePages.values()), + http: withUrl(httpPages.values()), + }); + return { markdown: listPagesText(pages) }; + }, + }); + if (on.analog) { await registerAnalog(my as never, { cwd: ctx.cwd, agent } as never, { blockCalls: config.actions.analog ? undefined : actionBlockedMessage('analog'), owner: ctx, + ttl: liveTtl, }); } registerHubDocks(ctx, 'ng-devtools', config); }, }); -export function createNgDevtools(options: NgDevtoolsConfig = {}) { +export interface NgDevtoolsHostOptions { + /** + * Register the agent tools and resources that need a connected page. Off + * for the stdio MCP server, which no page can reach. + */ + pageTools?: boolean; +} + +export function createNgDevtools(options: NgDevtoolsConfig = {}, host: NgDevtoolsHostOptions = {}) { + const warning = ngDevtoolsConfigWarning(options); + if (warning) console.warn(warning); const config = resolveNgDevtoolsConfig(options); return defineDevframe({ ...ngDevtools, setup: (ctx, info) => { - const withConfig: SetupInfo = { ...info, config }; + const withConfig: SetupInfo = { ...info, config, pageTools: host.pageTools }; return ngDevtools.setup(ctx, withConfig); }, }); diff --git a/packages/ng-devtools/src/dom-walk.ts b/packages/ng-devtools/src/dom-walk.ts new file mode 100644 index 0000000..b1c2fd9 --- /dev/null +++ b/packages/ng-devtools/src/dom-walk.ts @@ -0,0 +1,42 @@ +export function childElements(el: Element): Element[] { + const children = Array.from(el.children); + const shadow = (el as Element & { shadowRoot?: ShadowRoot | null }).shadowRoot; + if (shadow) children.push(...Array.from(shadow.children)); + return children; +} + +export function parentOf(node: Node): Element | null { + if (node.parentElement) return node.parentElement; + const root = node.parentNode; + return root && 'host' in root ? ((root as ShadowRoot).host ?? null) : null; +} + +export function isComment(value: unknown): value is Comment { + return !!value && typeof value === 'object' && (value as Node).nodeType === 8; +} + +/** + * Every element below `root` in document order, `root` included, going into + * open shadow roots. With `comments`, the comment nodes Angular anchors an + * `` on come along too. + */ +export function* walkElements(root: Element, comments = false): Generator { + const stack: (Element | Comment)[] = [root]; + while (stack.length) { + const node = stack.pop()!; + yield node; + if (isComment(node)) continue; + const children: (Element | Comment)[] = []; + const add = (parent: ParentNode) => { + for (const child of Array.from(parent.childNodes)) { + if (child.nodeType === 1 || (comments && isComment(child))) { + children.push(child as Element | Comment); + } + } + }; + add(node); + const shadow = (node as Element & { shadowRoot?: ShadowRoot | null }).shadowRoot; + if (shadow) add(shadow); + for (let i = children.length - 1; i >= 0; i--) stack.push(children[i]); + } +} diff --git a/packages/ng-devtools/src/forms-actions.ts b/packages/ng-devtools/src/forms-actions.ts index 2e71ff1..3a83f07 100644 --- a/packages/ng-devtools/src/forms-actions.ts +++ b/packages/ng-devtools/src/forms-actions.ts @@ -8,7 +8,7 @@ import { type FormsDebugApi, type FoundForm, } from './forms.ts'; -import { isSecretKey, redactReason } from './forms-privacy.ts'; +import { isRedactedKey, redactReason } from './forms-privacy.ts'; import { fieldPath, submitSetup } from './forms-read.ts'; import { clip } from './text.ts'; @@ -103,7 +103,7 @@ export function secretInside( seen.add(value); for (const [key, child] of Object.entries(value as AnyRecord)) { const path = prefix ? `${prefix}.${key}` : key; - if (!/^\d+$/.test(key) && isSecretKey(key)) return path; + if (!/^\d+$/.test(key) && isRedactedKey(key)) return path; const nested = secretInside(child, path, seen); if (nested) return nested; } @@ -121,7 +121,7 @@ export function keepSecrets( const out: AnyRecord = Array.isArray(saved) ? [...saved] : { ...(saved as AnyRecord) }; for (const key of Object.keys(out)) { const now = (current as AnyRecord)[key]; - out[key] = !/^\d+$/.test(key) && isSecretKey(key) ? now : keepSecrets(out[key], now, seen); + out[key] = !/^\d+$/.test(key) && isRedactedKey(key) ? now : keepSecrets(out[key], now, seen); } return out; } diff --git a/packages/ng-devtools/src/forms-collector.ts b/packages/ng-devtools/src/forms-collector.ts index 276c895..3fe8a67 100644 --- a/packages/ng-devtools/src/forms-collector.ts +++ b/packages/ng-devtools/src/forms-collector.ts @@ -133,6 +133,7 @@ export function attachForms( let lastPayload = ''; let lastPushAt = 0; const formEvents: FormEvent[] = []; + let droppedEvents = 0; const watched = new Map void }>(); const lastStatus = new Map(); const lastValue = new Map(); @@ -201,6 +202,7 @@ export function attachForms( } formEvents.push(event); if (formEvents.length > maxEvents) { + droppedEvents += formEvents.length - maxEvents; formEvents.splice(0, formEvents.length - maxEvents); } } @@ -395,6 +397,7 @@ export function attachForms( events: formEvents, setupErrors, instrumented: !!instrumentation, + ...(droppedEvents ? { dropped: droppedEvents } : {}), }; const payload = JSON.stringify(report); if (payload === lastPayload && now - lastPushAt < HEARTBEAT_MS) return; diff --git a/packages/ng-devtools/src/forms-instrument.ts b/packages/ng-devtools/src/forms-instrument.ts index 590ac38..40f35b3 100644 --- a/packages/ng-devtools/src/forms-instrument.ts +++ b/packages/ng-devtools/src/forms-instrument.ts @@ -1,3 +1,5 @@ +import { addProfilerListener } from './change-detection.ts'; + type AnyRecord = Record; export interface InstrumentCall { @@ -206,8 +208,7 @@ export interface RenderCounter { stop(): void; } -export function countRenders(ng: AnyRecord): RenderCounter | null { - if (typeof ng?.['ɵsetProfiler'] !== 'function') return null; +export function countRenders(ng: AnyRecord, doc: Document = document): RenderCounter | null { let counts: Map | null = null; const profiler = (event: number, instance: unknown) => { if (!counts || event !== TEMPLATE_UPDATE_START || !instance) return; @@ -215,7 +216,8 @@ export function countRenders(ng: AnyRecord): RenderCounter | null { const name = String((instance as AnyRecord).constructor?.name ?? '?').replace(/^_+/, ''); counts.set(name, (counts.get(name) ?? 0) + 1); }; - const remove = ng['ɵsetProfiler'](profiler); + const remove = addProfilerListener(ng, profiler, doc); + if (!remove) return null; return { start() { counts = new Map(); @@ -229,7 +231,7 @@ export function countRenders(ng: AnyRecord): RenderCounter | null { }, stop() { counts = null; - if (typeof remove === 'function') remove(); + remove(); }, }; } diff --git a/packages/ng-devtools/src/forms-privacy.ts b/packages/ng-devtools/src/forms-privacy.ts index 11d6110..fe2aaec 100644 --- a/packages/ng-devtools/src/forms-privacy.ts +++ b/packages/ng-devtools/src/forms-privacy.ts @@ -23,6 +23,9 @@ const SECRET_WORDS = new Set([ 'cc', 'credential', 'credentials', + 'cookie', + 'authorization', + 'jwt', ]); const SECRET_PAIRS = new Set([ @@ -33,6 +36,8 @@ const SECRET_PAIRS = new Set([ 'ccnum', 'ccnumber', 'securitycode', + 'sessionid', + 'sessionkey', ]); const SECRET_AUTOCOMPLETE = /password|one-time-code|cc-/i; @@ -96,13 +101,6 @@ function containsName(words: string[], name: string): boolean { return false; } -/** Whether a key matches one of the `redaction.secretNames` from the devtools config. */ -export function isCustomSecretKey(key: string): boolean { - if (!secretNames.length) return false; - const words = wordsOf(key).map(singular); - return secretNames.some((name) => containsName(words, name)); -} - export function isSecretKey(key: string): boolean { const words = wordsOf(key).map(singular); if (words.some((word) => SECRET_WORDS.has(word))) return true; @@ -111,6 +109,14 @@ export function isSecretKey(key: string): boolean { return secretNames.some((name) => containsName(words, name)); } +/** + * The one key check for values leaving the page: the built-in words, + * `redaction.secretNames`, and the `mask` and `unmask` lists. + */ +export function isRedactedKey(key: string): boolean { + return redactReason(key) !== null; +} + function listed(list: string[] | undefined, key: string): boolean { return Array.isArray(list) && list.some((entry) => entry === key); } diff --git a/packages/ng-devtools/src/forms.ts b/packages/ng-devtools/src/forms.ts index 55c27cc..83100ce 100644 --- a/packages/ng-devtools/src/forms.ts +++ b/packages/ng-devtools/src/forms.ts @@ -4,7 +4,7 @@ import { REDACTED, SecretSet, redactMessage, - isSecretKey, + isRedactedKey, redactReason, type RedactReason, } from './forms-privacy.ts'; @@ -329,7 +329,7 @@ export function serializeFormValue(value: unknown, depth = 0): unknown { const out: Record = {}; const keys = Object.keys(value as object).filter((key) => !key.startsWith('__ng')); for (const key of keys.slice(0, MAX_VALUE_ITEMS)) { - out[key] = isSecretKey(key) + out[key] = isRedactedKey(key) ? REDACTED : serializeFormValue( read(() => (value as AnyRecord)[key], undefined), @@ -483,7 +483,7 @@ export function serializeControl( errors: controlErrors(control, type, secret).map((e) => withOrigin(e, facts.origins[e.kind])), uid: uidOf(control), }; - if (reason && !parentSecret) node.redacted = reason; + if (reason) node.redacted = reason; if (updateOn === 'blur' || updateOn === 'submit') node.updateOn = updateOn; const sync = !!read(() => control['validator'], null); const async = !!read(() => control['asyncValidator'], null); @@ -609,7 +609,7 @@ export function errorSummaryOf(root: AnyRecord): FormErrorSummary[] { return errors.slice(0, 50).map((error) => { const target = read(() => error['fieldTree']() as AnyRecord, null); const path = target ? fieldPath(target) : ''; - const secret = path.split('.').some((key) => isSecretKey(key)); + const secret = path.split('.').some((key) => isRedactedKey(key)); const { kind, message } = signalError(error, 'control', secret); return { path, kind, message }; }); @@ -627,7 +627,8 @@ function unmaterializedField( path: string, parentSecret: boolean, ): FormFieldNode { - return { + const reason: RedactReason | null = parentSecret ? 'parent' : redactReason(key); + const node: FormFieldNode = { key, path, type: valueType(value), @@ -636,9 +637,11 @@ function unmaterializedField( dirty: false, bound: false, materialized: false, - value: parentSecret || isSecretKey(key) ? REDACTED : serializeFormValue(value), + value: reason ? REDACTED : serializeFormValue(value), errors: [], }; + if (reason) node.redacted = reason; + return node; } const CONSTRAINTS = ['min', 'max', 'minLength', 'maxLength']; @@ -696,7 +699,7 @@ export function serializeField( uid: uidOf(state), ...read(() => signalFacts(state), {}), }; - if (reason && !parentSecret) node.redacted = reason; + if (reason) node.redacted = reason; if (element) node.binding = read(() => fieldBinding(state), { kind: 'none' as const }); const name = read(() => state['name']() as unknown, undefined); if (typeof name === 'string' && name) node.name = name; @@ -1216,7 +1219,7 @@ export function controlEventOf( if ('value' in event) { const keys = [rootKey, ...(path ? path.split('.') : [])]; const key = keys[keys.length - 1]; - const secret = keys.slice(0, -1).some((k) => isSecretKey(k)); + const secret = keys.slice(0, -1).some((k) => isRedactedKey(k)); const value = isAbstractControl(source) ? valueOf(serializeControl(source, elements, key, path, 0, secret)) : serializeFormValue(of('value')); diff --git a/packages/ng-devtools/src/http-cache-key.ts b/packages/ng-devtools/src/http-cache-key.ts new file mode 100644 index 0000000..e6c6a42 --- /dev/null +++ b/packages/ng-devtools/src/http-cache-key.ts @@ -0,0 +1,107 @@ +import type { HttpRequest } from '@angular/common/http'; + +const K = new Uint32Array([ + 0x428a2f98, 0x71374491, 0xb5c0fbcf, 0xe9b5dba5, 0x3956c25b, 0x59f111f1, 0x923f82a4, 0xab1c5ed5, + 0xd807aa98, 0x12835b01, 0x243185be, 0x550c7dc3, 0x72be5d74, 0x80deb1fe, 0x9bdc06a7, 0xc19bf174, + 0xe49b69c1, 0xefbe4786, 0x0fc19dc6, 0x240ca1cc, 0x2de92c6f, 0x4a7484aa, 0x5cb0a9dc, 0x76f988da, + 0x983e5152, 0xa831c66d, 0xb00327c8, 0xbf597fc7, 0xc6e00bf3, 0xd5a79147, 0x06ca6351, 0x14292967, + 0x27b70a85, 0x2e1b2138, 0x4d2c6dfc, 0x53380d13, 0x650a7354, 0x766a0abb, 0x81c2c92e, 0x92722c85, + 0xa2bfe8a1, 0xa81a664b, 0xc24b8b70, 0xc76c51a3, 0xd192e819, 0xd6990624, 0xf40e3585, 0x106aa070, + 0x19a4c116, 0x1e376c08, 0x2748774c, 0x34b0bcb5, 0x391c0cb3, 0x4ed8aa4a, 0x5b9cca4f, 0x682e6ff3, + 0x748f82ee, 0x78a5636f, 0x84c87814, 0x8cc70208, 0x90befffa, 0xa4506ceb, 0xbef9a3f7, 0xc67178f2, +]); + +const rotr = (x: number, n: number) => (x >>> n) | (x << (32 - n)); + +export function sha256Hex(text: string): string { + const bytes = new TextEncoder().encode(text); + const padded = new Uint8Array((((bytes.length + 8) >> 6) + 1) << 6); + padded.set(bytes); + padded[bytes.length] = 0x80; + const view = new DataView(padded.buffer); + const bits = bytes.length * 8; + view.setUint32(padded.length - 8, Math.floor(bits / 0x100000000), false); + view.setUint32(padded.length - 4, bits >>> 0, false); + const h = [ + 0x6a09e667, 0xbb67ae85, 0x3c6ef372, 0xa54ff53a, 0x510e527f, 0x9b05688c, 0x1f83d9ab, 0x5be0cd19, + ]; + const w = new Uint32Array(64); + for (let offset = 0; offset < padded.length; offset += 64) { + for (let i = 0; i < 16; i++) w[i] = view.getUint32(offset + i * 4, false); + for (let i = 16; i < 64; i++) { + const s0 = rotr(w[i - 15], 7) ^ rotr(w[i - 15], 18) ^ (w[i - 15] >>> 3); + const s1 = rotr(w[i - 2], 17) ^ rotr(w[i - 2], 19) ^ (w[i - 2] >>> 10); + w[i] = (w[i - 16] + s0 + w[i - 7] + s1) >>> 0; + } + let [a, b, c, d, e, f, g, hh] = h; + for (let i = 0; i < 64; i++) { + const t1 = + (hh + (rotr(e, 6) ^ rotr(e, 11) ^ rotr(e, 25)) + ((e & f) ^ (~e & g)) + K[i] + w[i]) >>> 0; + const t2 = ((rotr(a, 2) ^ rotr(a, 13) ^ rotr(a, 22)) + ((a & b) ^ (a & c) ^ (b & c))) >>> 0; + hh = g; + g = f; + f = e; + e = (d + t1) >>> 0; + d = c; + c = b; + b = a; + a = (t1 + t2) >>> 0; + } + h[0] = (h[0] + a) >>> 0; + h[1] = (h[1] + b) >>> 0; + h[2] = (h[2] + c) >>> 0; + h[3] = (h[3] + d) >>> 0; + h[4] = (h[4] + e) >>> 0; + h[5] = (h[5] + f) >>> 0; + h[6] = (h[6] + g) >>> 0; + h[7] = (h[7] + hh) >>> 0; + } + return h.map((x) => x.toString(16).padStart(8, '0')).join(''); +} + +function legacyHash(text: string): string { + let hash = 0; + for (const char of text) hash = (Math.imul(31, hash) + char.charCodeAt(0)) << 0; + return String(hash + 2147483647 + 1); +} + +interface ParamsLike { + keys(): Iterable; + getAll(name: string): unknown; + toString(): string; +} + +function legacyParams(params: ParamsLike): string { + return [...params.keys()] + .sort() + .map((k) => `${k}=${params.getAll(k)}`) + .join('&'); +} + +function sortedParams(params: ParamsLike): string { + const search = new URLSearchParams( + params instanceof URLSearchParams ? params : params.toString(), + ); + search.sort(); + return search.toString(); +} + +/** + * The TransferState keys Angular may have stored this request under. Angular + * hashes method, response type, URL, body and sorted params; the separator, + * param encoding and hash changed across versions, so every variant is tried. + */ +export function transferCacheKeys(req: HttpRequest): string[] { + const body = req.serializeBody(); + const keys = new Set(); + for (const encode of [sortedParams, legacyParams]) { + const params = encode(req.params as ParamsLike); + const serializedBody = + body instanceof URLSearchParams ? encode(body) : typeof body === 'string' ? body : ''; + const parts = [req.method, req.responseType, req.url, serializedBody, params]; + keys.add(sha256Hex(parts.join('\0'))); + keys.add(sha256Hex(parts.join('|'))); + keys.add(legacyHash(parts.join('|'))); + } + return [...keys]; +} diff --git a/packages/ng-devtools/src/http-overlay.ts b/packages/ng-devtools/src/http-overlay.ts index 0e4c67a..761be40 100644 --- a/packages/ng-devtools/src/http-overlay.ts +++ b/packages/ng-devtools/src/http-overlay.ts @@ -1,7 +1,10 @@ +import { keepaliveDue } from './change-detection.ts'; import { appIdOf, scanHydration } from './http-hydration.ts'; import { decodePayload, type PayloadSummary } from './http-payload.ts'; -import { httpRegistry, sanitizeRules, storeRules } from './http-rules.ts'; -import type { HttpPage, HydrationStats } from './types.ts'; +import { redactCall } from './http-redact.ts'; +import { httpRegistry, sanitizeRules, storeRules, type HttpCall } from './http-rules.ts'; +import { redactUrl } from './router.ts'; +import type { HttpReport, HydrationStats } from './types.ts'; interface RpcScope { rpc: { @@ -63,37 +66,58 @@ function hydrationStats( }; } -/** Reports payload, hydration and client calls, and keeps fault rules in sync. */ -export function attachHttp(my: RpcScope, pageId: string) { +/** + * Reports payload, hydration and client calls, and keeps fault rules in sync. + * The payload and the full call list go out once; later pushes carry only new + * calls, and a ping keeps the page alive while nothing changes. + */ +export function attachHttp(my: RpcScope, pageId: string, tickMs: () => number = () => 0) { const payload = decodePayload(document, appIdOf(document)); - const initialUrl = location.pathname + location.search; + const initialUrl = redactUrl(location.pathname + location.search); const scanner = createHydrationScanner(); let payloadSent = false; - let lastSent = ''; + let lastCall: HttpCall | undefined; + let lastMeta = ''; let lastSentAt = 0; + let queue = Promise.resolve(); - const push = async () => { - const report: Omit = { + const newCalls = (calls: HttpCall[]) => { + const at = lastCall ? calls.lastIndexOf(lastCall) : -1; + return at === -1 ? [...calls] : calls.slice(at + 1); + }; + + const pushOnce = async () => { + const registry = httpRegistry(); + const all = registry.calls ?? []; + const meta = { pageId, - url: location.pathname + location.search, + url: redactUrl(location.pathname + location.search), initialUrl, title: document.title, hydration: hydrationStats(payload, scanner), - calls: [...(httpRegistry().calls ?? [])], + dropped: registry.dropped ?? 0, }; - const body = JSON.stringify(report); - if (payloadSent && body === lastSent && Date.now() - lastSentAt < 8000) return; - lastSent = body; + const metaJson = JSON.stringify(meta); + const full = !payloadSent; + const calls = full ? [...all] : newCalls(all); + if (!full && !calls.length && metaJson === lastMeta) { + if (!keepaliveDue(lastSentAt, tickMs())) return; + lastSentAt = Date.now(); + const ping = (await my.rpc.call('ping-http', pageId)) as { known?: boolean } | undefined; + if (ping?.known === false) payloadSent = false; + return; + } + const report: HttpReport = { ...meta, calls: calls.map(redactCall), full }; + const answer = (await my.rpc.call('push-http', full ? { ...report, payload } : report)) as + { needPayload?: boolean } | null | undefined; + lastMeta = metaJson; lastSentAt = Date.now(); - const withPayload = !payloadSent; - const answer = (await my.rpc.call( - 'push-http', - withPayload ? { ...report, payload } : report, - )) as { needPayload?: boolean } | null | undefined; - payloadSent = withPayload || payloadSent; - if (answer?.needPayload) payloadSent = false; + lastCall = all.at(-1) ?? lastCall; + payloadSent = !answer?.needPayload; }; + const push = () => (queue = queue.then(pushOnce, pushOnce)); + my.rpc.register({ name: 'http-rules', type: 'event', @@ -105,7 +129,9 @@ export function attachHttp(my: RpcScope, pageId: string) { type: 'event', jsonSerializable: true, handler: () => { - httpRegistry().calls = []; + const registry = httpRegistry(); + registry.calls = []; + registry.dropped = 0; void push(); }, }); diff --git a/packages/ng-devtools/src/http-payload.ts b/packages/ng-devtools/src/http-payload.ts index 2235e28..f730b17 100644 --- a/packages/ng-devtools/src/http-payload.ts +++ b/packages/ng-devtools/src/http-payload.ts @@ -8,6 +8,8 @@ export interface PayloadEntry { /** Present when the entry is an HttpClient transfer-cache response. */ http?: { url?: string; status?: number; statusText?: string; responseType?: string }; source?: PayloadSource; + /** Present when the entry is an Analog server function result seeded during SSR. */ + fn?: { id: string; name?: string; file?: string }; size: number; value: unknown; } @@ -56,11 +58,14 @@ export function sanitizePayload(input: unknown): PayloadSummary { e.source === 'http' || e.source === 'analog' || e.source === 'hydration' ? e.source : undefined; + const f = e.fn && typeof e.fn === 'object' ? (e.fn as Record) : null; + const fnId = str(f?.['id'], 16); entries.push({ key, size: num(e.size) ?? 0, value: clip(e.value), ...(source && { source }), + ...(fnId && /^[0-9a-f]{16}$/.test(fnId) && { fn: { id: fnId } }), ...(h && { http: { url: str(h['url'], 2000), @@ -119,6 +124,7 @@ export function sanitizeHydration(input: unknown): HydrationStats | null { } const HYDRATION_KEYS = new Set(['__nghData__', '__nghDeferData__']); +const SERVER_FN_KEY = /^__analog_fn_([0-9a-f]{16})_/; /** Reads the TransferState script (`