@ethlete/query-devtools 1.0.0-next.3 → 1.0.0-next.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/fesm2022/ethlete-query-devtools-toggle.mjs +7 -2
- package/fesm2022/ethlete-query-devtools-toggle.mjs.map +1 -1
- package/fesm2022/ethlete-query-devtools.mjs +35 -2
- package/fesm2022/ethlete-query-devtools.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ethlete-query-devtools.d.ts +8 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 1.0.0-next.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`4044a00`](https://github.com/ethlete-io/ethdk/commit/4044a0007de55d25b5a697c6e4190e21d68d022f) Thanks [@TomTomB](https://github.com/TomTomB)! - - Notifications: a toast keeps one elevation, paints above overlays, and keeps out of every reserved viewport edge.
|
|
8
|
+
- Query devtools: a side dock reserves the edge it covers.
|
|
9
|
+
- `SurfaceContextTracker` drops `topType` / `topElevation`.
|
|
10
|
+
|
|
11
|
+
- [`3122607`](https://github.com/ethlete-io/ethdk/commit/3122607d1727844a2d987032f45ad631f678c2ca) Thanks [@TomTomB](https://github.com/TomTomB)! - Overlays and floating chrome now keep out of space a surface above the page reserved with `reserveOverlayViewportSpace()` - so a dialog, menu or toast is no longer stacked under the docked query devtools panel.
|
|
12
|
+
|
|
13
|
+
## 1.0.0-next.4
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- [`5c1190a`](https://github.com/ethlete-io/ethdk/commit/5c1190ac76c244ff1c293b390dd599ed016d26de) Thanks [@TomTomB](https://github.com/TomTomB)! - Overlays: a press on a surface stacked above them no longer counts as an outside press, so working in the query devtools leaves an open dialog, sheet, menu, select or tooltip alone.
|
|
18
|
+
|
|
3
19
|
## 1.0.0-next.3
|
|
4
20
|
|
|
5
21
|
### Minor Changes
|
|
@@ -24,7 +24,7 @@ class QueryDevtoolsToggleComponent {
|
|
|
24
24
|
this.shortcut = queryDevtoolsShortcutLabel();
|
|
25
25
|
}
|
|
26
26
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: QueryDevtoolsToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: QueryDevtoolsToggleComponent, isStandalone: true, selector: "et-query-devtools-toggle", inputs: { tampered: { classPropertyName: "tampered", publicName: "tampered", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, ngImport: i0, template: `
|
|
27
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: QueryDevtoolsToggleComponent, isStandalone: true, selector: "et-query-devtools-toggle", inputs: { tampered: { classPropertyName: "tampered", publicName: "tampered", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, host: { attributes: { "data-et-overlay-layer": "2147483010" } }, ngImport: i0, template: `
|
|
28
28
|
<button (click)="openChange.emit()" type="button" title="Open query devtools ({{ shortcut }})">
|
|
29
29
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
30
30
|
<ellipse cx="12" cy="6" rx="7.5" ry="3" />
|
|
@@ -54,7 +54,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
54
54
|
<span class="tamper-dot" title="A query is showing an armed override or a devtools fault"></span>
|
|
55
55
|
}
|
|
56
56
|
</button>
|
|
57
|
-
`, encapsulation: ViewEncapsulation.ShadowDom,
|
|
57
|
+
`, encapsulation: ViewEncapsulation.ShadowDom, host: {
|
|
58
|
+
// The level this button paints at - the same number as the `z-index` below; keep the two in step.
|
|
59
|
+
// It tells @ethlete/core that a press here lands on a surface above an application overlay, so
|
|
60
|
+
// opening the devtools does not read as an outside press and close it.
|
|
61
|
+
'data-et-overlay-layer': '2147483010',
|
|
62
|
+
}, styles: [":host{position:fixed;inset-block-end:16px;inset-inline-end:16px;z-index:2147483010}button{--_accent: var(--et-theme-color-primary-solid, #60a5fa);position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 12px 10px 14px;border:none;border-radius:999px;background:linear-gradient(135deg,#1f1f23,#2a2a30);color:#fafafa;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer;box-shadow:0 6px 20px #00000059,inset 0 0 0 1px #ffffff14;transition:transform .15s ease,box-shadow .2s ease}button:before{content:\"\";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--_accent),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7;transition:opacity .2s ease}button:hover{transform:translateY(-2px);box-shadow:0 10px 28px #0006,0 0 0 4px color-mix(in srgb,var(--_accent) 22%,transparent),inset 0 0 0 1px #ffffff1a}button:hover:before{opacity:1}svg{inline-size:16px;block-size:16px;fill:none;stroke:var(--_accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.label{line-height:1}kbd{padding:3px 6px;border-radius:5px;background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff1f;color:#d4d4d8;font:inherit;font-size:11px;font-weight:500;line-height:1;white-space:nowrap}.tamper-dot{position:absolute;inset-block-start:-3px;inset-inline-end:-3px;inline-size:10px;block-size:10px;border-radius:50%;background:#f87171;box-shadow:0 0 0 2px #1f1f23}\n"] }]
|
|
58
63
|
}], propDecorators: { tampered: [{ type: i0.Input, args: [{ isSignal: true, alias: "tampered", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
|
|
59
64
|
|
|
60
65
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ethlete-query-devtools-toggle.mjs","sources":["../../../../libs/query-devtools/toggle/query-devtools-shortcut.ts","../../../../libs/query-devtools/toggle/query-devtools-toggle.component.ts","../../../../libs/query-devtools/toggle/query-devtools-view-state.ts","../../../../libs/query-devtools/toggle/ethlete-query-devtools-toggle.ts"],"sourcesContent":["import { detectKbdPlatform } from '@ethlete/components';\n\n/**\n * The global devtools toggle shortcut, rendered for the current platform (`⌘⌥Q` on Apple, where the\n * symbols are the convention, `Ctrl+Alt+Q` everywhere else). Shown on both the floating toggle and\n * the panel's close button so the shortcut is discoverable without reading the docs.\n */\nexport const queryDevtoolsShortcutLabel = () => (detectKbdPlatform() === 'apple' ? '⌘⌥Q' : 'Ctrl+Alt+Q');\n","import { Component, input, output, ViewEncapsulation } from '@angular/core';\nimport { queryDevtoolsShortcutLabel } from './query-devtools-shortcut';\n\n/**\n * The floating toggle button for the query devtools. Rendered with `ShadowDom` encapsulation so the\n * host application's global CSS (Tailwind resets, button styles, …) can never touch it and its own\n * styles can never leak out. Uses px (not rem) internally so it doesn't depend on the host's root\n * font-size; theme accent colour is read from an inherited custom property with a fallback.\n */\n@Component({\n selector: 'et-query-devtools-toggle',\n template: `\n <button (click)=\"openChange.emit()\" type=\"button\" title=\"Open query devtools ({{ shortcut }})\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <ellipse cx=\"12\" cy=\"6\" rx=\"7.5\" ry=\"3\" />\n <path d=\"M4.5 6v6c0 1.66 3.36 3 7.5 3s7.5-1.34 7.5-3V6\" />\n <path d=\"M4.5 12v6c0 1.66 3.36 3 7.5 3s7.5-1.34 7.5-3v-6\" />\n </svg>\n <span class=\"label\">Query</span>\n <kbd>{{ shortcut }}</kbd>\n @if (tampered()) {\n <span class=\"tamper-dot\" title=\"A query is showing an armed override or a devtools fault\"></span>\n }\n </button>\n `,\n // Shadow DOM is intentional: this always-visible floating button must be fully isolated from the\n // host app's global CSS (resets, Tailwind, button styles), which the rest of the panel can't be.\n // eslint-disable-next-line ethlete/require-view-encapsulation-none\n encapsulation: ViewEncapsulation.ShadowDom,\n styles: `\n :host {\n position: fixed;\n inset-block-end: 16px;\n inset-inline-end: 16px;\n /* Above DEFAULT_OVERLAY_LAYER (2147483003) in @ethlete/core: rendered by the lazy shell, the\n button is a sibling of the application's content, so anything less puts an open modal over it. */\n z-index: 2147483010;\n }\n\n button {\n --_accent: var(--et-theme-color-primary-solid, #60a5fa);\n\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 10px 12px 10px 14px;\n border: none;\n border-radius: 999px;\n background: linear-gradient(135deg, #1f1f23, #2a2a30);\n color: #fafafa;\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n font-size: 13px;\n font-weight: 600;\n letter-spacing: 0.02em;\n cursor: pointer;\n box-shadow:\n 0 6px 20px rgb(0 0 0 / 0.35),\n inset 0 0 0 1px rgb(255 255 255 / 0.08);\n transition:\n transform 0.15s ease,\n box-shadow 0.2s ease;\n }\n\n /* Gradient accent ring via a masked pseudo-element. */\n button::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n padding: 1px;\n background: linear-gradient(135deg, var(--_accent), transparent 60%);\n -webkit-mask:\n linear-gradient(#000 0 0) content-box,\n linear-gradient(#000 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n opacity: 0.7;\n transition: opacity 0.2s ease;\n }\n\n button:hover {\n transform: translateY(-2px);\n box-shadow:\n 0 10px 28px rgb(0 0 0 / 0.4),\n 0 0 0 4px color-mix(in srgb, var(--_accent) 22%, transparent),\n inset 0 0 0 1px rgb(255 255 255 / 0.1);\n }\n\n button:hover::before {\n opacity: 1;\n }\n\n svg {\n inline-size: 16px;\n block-size: 16px;\n fill: none;\n stroke: var(--_accent);\n stroke-width: 1.6;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n .label {\n line-height: 1;\n }\n\n kbd {\n padding: 3px 6px;\n border-radius: 5px;\n background: rgb(255 255 255 / 0.07);\n box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);\n color: #d4d4d8;\n font: inherit;\n font-size: 11px;\n font-weight: 500;\n line-height: 1;\n /* The Apple glyphs need no separator; the \"Ctrl+Alt+Q\" spelling is wider, hence the nowrap. */\n white-space: nowrap;\n }\n\n /* Visible with the panel closed, which is the point - a query being tampered with is a fact about\n the running app, not just about whatever the panel happens to have open. */\n .tamper-dot {\n position: absolute;\n inset-block-start: -3px;\n inset-inline-end: -3px;\n inline-size: 10px;\n block-size: 10px;\n border-radius: 50%;\n background: #f87171;\n box-shadow: 0 0 0 2px #1f1f23;\n }\n `,\n})\nexport class QueryDevtoolsToggleComponent {\n public tampered = input(false);\n public openChange = output<void>();\n\n protected shortcut = queryDevtoolsShortcutLabel();\n}\n","import { queryDevtoolsSettings, readQueryDevtoolsStore } from '@ethlete/query';\n\n/**\n * Where the panel's own view state lives - open/closed, dock, sizes, selection, filters. Bumped\n * whenever a shape change would make an older stored state restore into something wrong.\n * @internal\n */\nexport const QUERY_DEVTOOLS_VIEW_STATE_KEY = 'ethlete:query:devtools:v4';\n\n/**\n * Whether the panel was open when this tab last stored its view state. Read by\n * `<et-query-devtools-lazy>`, which has to load the panel before it can ask the panel anything.\n * @internal\n */\nexport const wasQueryDevtoolsOpen = () =>\n readQueryDevtoolsStore<{ open?: boolean }>(queryDevtoolsSettings().viewState, QUERY_DEVTOOLS_VIEW_STATE_KEY)?.open ===\n true;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAEA;;;;AAIG;MACU,0BAA0B,GAAG,OAAO,iBAAiB,EAAE,KAAK,OAAO,GAAG,KAAK,GAAG,YAAY;;ACJvG;;;;;AAKG;
|
|
1
|
+
{"version":3,"file":"ethlete-query-devtools-toggle.mjs","sources":["../../../../libs/query-devtools/toggle/query-devtools-shortcut.ts","../../../../libs/query-devtools/toggle/query-devtools-toggle.component.ts","../../../../libs/query-devtools/toggle/query-devtools-view-state.ts","../../../../libs/query-devtools/toggle/ethlete-query-devtools-toggle.ts"],"sourcesContent":["import { detectKbdPlatform } from '@ethlete/components';\n\n/**\n * The global devtools toggle shortcut, rendered for the current platform (`⌘⌥Q` on Apple, where the\n * symbols are the convention, `Ctrl+Alt+Q` everywhere else). Shown on both the floating toggle and\n * the panel's close button so the shortcut is discoverable without reading the docs.\n */\nexport const queryDevtoolsShortcutLabel = () => (detectKbdPlatform() === 'apple' ? '⌘⌥Q' : 'Ctrl+Alt+Q');\n","import { Component, input, output, ViewEncapsulation } from '@angular/core';\nimport { queryDevtoolsShortcutLabel } from './query-devtools-shortcut';\n\n/**\n * The floating toggle button for the query devtools. Rendered with `ShadowDom` encapsulation so the\n * host application's global CSS (Tailwind resets, button styles, …) can never touch it and its own\n * styles can never leak out. Uses px (not rem) internally so it doesn't depend on the host's root\n * font-size; theme accent colour is read from an inherited custom property with a fallback.\n */\n@Component({\n selector: 'et-query-devtools-toggle',\n template: `\n <button (click)=\"openChange.emit()\" type=\"button\" title=\"Open query devtools ({{ shortcut }})\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <ellipse cx=\"12\" cy=\"6\" rx=\"7.5\" ry=\"3\" />\n <path d=\"M4.5 6v6c0 1.66 3.36 3 7.5 3s7.5-1.34 7.5-3V6\" />\n <path d=\"M4.5 12v6c0 1.66 3.36 3 7.5 3s7.5-1.34 7.5-3v-6\" />\n </svg>\n <span class=\"label\">Query</span>\n <kbd>{{ shortcut }}</kbd>\n @if (tampered()) {\n <span class=\"tamper-dot\" title=\"A query is showing an armed override or a devtools fault\"></span>\n }\n </button>\n `,\n // Shadow DOM is intentional: this always-visible floating button must be fully isolated from the\n // host app's global CSS (resets, Tailwind, button styles), which the rest of the panel can't be.\n // eslint-disable-next-line ethlete/require-view-encapsulation-none\n encapsulation: ViewEncapsulation.ShadowDom,\n host: {\n // The level this button paints at - the same number as the `z-index` below; keep the two in step.\n // It tells @ethlete/core that a press here lands on a surface above an application overlay, so\n // opening the devtools does not read as an outside press and close it.\n 'data-et-overlay-layer': '2147483010',\n },\n styles: `\n :host {\n position: fixed;\n inset-block-end: 16px;\n inset-inline-end: 16px;\n /* Above DEFAULT_OVERLAY_LAYER (2147483003) in @ethlete/core: rendered by the lazy shell, the\n button is a sibling of the application's content, so anything less puts an open modal over it. */\n z-index: 2147483010;\n }\n\n button {\n --_accent: var(--et-theme-color-primary-solid, #60a5fa);\n\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 10px 12px 10px 14px;\n border: none;\n border-radius: 999px;\n background: linear-gradient(135deg, #1f1f23, #2a2a30);\n color: #fafafa;\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n font-size: 13px;\n font-weight: 600;\n letter-spacing: 0.02em;\n cursor: pointer;\n box-shadow:\n 0 6px 20px rgb(0 0 0 / 0.35),\n inset 0 0 0 1px rgb(255 255 255 / 0.08);\n transition:\n transform 0.15s ease,\n box-shadow 0.2s ease;\n }\n\n /* Gradient accent ring via a masked pseudo-element. */\n button::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n padding: 1px;\n background: linear-gradient(135deg, var(--_accent), transparent 60%);\n -webkit-mask:\n linear-gradient(#000 0 0) content-box,\n linear-gradient(#000 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n opacity: 0.7;\n transition: opacity 0.2s ease;\n }\n\n button:hover {\n transform: translateY(-2px);\n box-shadow:\n 0 10px 28px rgb(0 0 0 / 0.4),\n 0 0 0 4px color-mix(in srgb, var(--_accent) 22%, transparent),\n inset 0 0 0 1px rgb(255 255 255 / 0.1);\n }\n\n button:hover::before {\n opacity: 1;\n }\n\n svg {\n inline-size: 16px;\n block-size: 16px;\n fill: none;\n stroke: var(--_accent);\n stroke-width: 1.6;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n .label {\n line-height: 1;\n }\n\n kbd {\n padding: 3px 6px;\n border-radius: 5px;\n background: rgb(255 255 255 / 0.07);\n box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);\n color: #d4d4d8;\n font: inherit;\n font-size: 11px;\n font-weight: 500;\n line-height: 1;\n /* The Apple glyphs need no separator; the \"Ctrl+Alt+Q\" spelling is wider, hence the nowrap. */\n white-space: nowrap;\n }\n\n /* Visible with the panel closed, which is the point - a query being tampered with is a fact about\n the running app, not just about whatever the panel happens to have open. */\n .tamper-dot {\n position: absolute;\n inset-block-start: -3px;\n inset-inline-end: -3px;\n inline-size: 10px;\n block-size: 10px;\n border-radius: 50%;\n background: #f87171;\n box-shadow: 0 0 0 2px #1f1f23;\n }\n `,\n})\nexport class QueryDevtoolsToggleComponent {\n public tampered = input(false);\n public openChange = output<void>();\n\n protected shortcut = queryDevtoolsShortcutLabel();\n}\n","import { queryDevtoolsSettings, readQueryDevtoolsStore } from '@ethlete/query';\n\n/**\n * Where the panel's own view state lives - open/closed, dock, sizes, selection, filters. Bumped\n * whenever a shape change would make an older stored state restore into something wrong.\n * @internal\n */\nexport const QUERY_DEVTOOLS_VIEW_STATE_KEY = 'ethlete:query:devtools:v4';\n\n/**\n * Whether the panel was open when this tab last stored its view state. Read by\n * `<et-query-devtools-lazy>`, which has to load the panel before it can ask the panel anything.\n * @internal\n */\nexport const wasQueryDevtoolsOpen = () =>\n readQueryDevtoolsStore<{ open?: boolean }>(queryDevtoolsSettings().viewState, QUERY_DEVTOOLS_VIEW_STATE_KEY)?.open ===\n true;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAEA;;;;AAIG;MACU,0BAA0B,GAAG,OAAO,iBAAiB,EAAE,KAAK,OAAO,GAAG,KAAK,GAAG,YAAY;;ACJvG;;;;;AAKG;MAqIU,4BAA4B,CAAA;AApIzC,IAAA,WAAA,GAAA;QAqIS,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,KAAK;qFAAC;QACvB,IAAA,CAAA,UAAU,GAAG,MAAM,EAAQ;QAExB,IAAA,CAAA,QAAQ,GAAG,0BAA0B,EAAE;AAClD,IAAA;8GALY,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA5B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,4BAA4B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,uBAAA,EAAA,YAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAlI7B;;;;;;;;;;;;;AAaT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,4jDAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,SAAA,EAAA,CAAA,CAAA;;2FAqHU,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBApIxC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,0BAA0B,EAAA,QAAA,EAC1B;;;;;;;;;;;;;GAaT,EAAA,aAAA,EAIc,iBAAiB,CAAC,SAAS,EAAA,IAAA,EACpC;;;;AAIJ,wBAAA,uBAAuB,EAAE,YAAY;AACtC,qBAAA,EAAA,MAAA,EAAA,CAAA,4jDAAA,CAAA,EAAA;;;AChCH;;;;AAIG;AACI,MAAM,6BAA6B,GAAG;AAE7C;;;;AAIG;AACI,MAAM,oBAAoB,GAAG,MAClC,sBAAsB,CAAqB,qBAAqB,EAAE,CAAC,SAAS,EAAE,6BAA6B,CAAC,EAAE,IAAI;AAClH,IAAA;;AChBF;;AAEG;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { signal, ViewEncapsulation, Component, input, output, computed, viewChild, effect, numberAttribute, linkedSignal, InjectionToken, inject, untracked, ElementRef, NgZone, DestroyRef, booleanAttribute } from '@angular/core';
|
|
3
|
-
import { copyToClipboard, injectStyleManager, injectErrorTheme, ProvideColorDirective, clamp, injectRenderer, injectFileDownload, injectViewportSize, injectIsDocumentVisible, injectBreakpointObserver, signalElementDimensions, randomId, createObjectUrlHandle, DragHandleDirective, ResizeHandlesComponent } from '@ethlete/core';
|
|
3
|
+
import { copyToClipboard, injectStyleManager, injectErrorTheme, ProvideColorDirective, clamp, injectRenderer, injectFileDownload, injectViewportSize, injectIsDocumentVisible, injectBreakpointObserver, signalElementDimensions, randomId, reserveOverlayViewportSpace, createObjectUrlHandle, DragHandleDirective, ResizeHandlesComponent } from '@ethlete/core';
|
|
4
4
|
import { queryDevtoolsAbout, hasQueryDevtoolsOverridesAtPath, detectPaginationShape, isDateShapedLeaf, generateQueryDevtoolsStringPreset, generateQueryDevtoolsNumberPreset, collectLeafPaths, armAllQueryDevtoolsMocks, clearQueryDevtoolsArmedMocks, clearQueryDevtoolsFaults, queryDevtoolsResponseHistory, queryDevtoolsMocks, queryDevtoolsArmedMocks, queryDevtoolsSettings, setQueryDevtoolsOverridesScope, setQueryDevtoolsArmedMocksScope, setQueryDevtoolsFaultsScope, setQueryDevtoolsSettings, QUERY_DEVTOOLS_TOKEN_TTL_LIMIT, setQueryDevtoolsTokenTtl, clearQueryDevtoolsTokenTtl, serializeQueryDevtoolsOverrideTransfer, parseQueryDevtoolsOverrideTransfer, armQueryDevtoolsOverrideTransfer, countUnresolvedQueryDevtoolsOverrides, createQueryDevtoolsOverrides, applyQueryDevtoolsOverrides, queryDevtoolsSchemaNames, queryDevtoolsSchemaRoutes, queryDevtoolsSchemaState, measureQueryDevtoolsPayload, seedQueryDevtoolsSchemaBody, loadQueryDevtoolsSchema, queryDevtoolsMockId, saveQueryDevtoolsMock, armQueryDevtoolsMock, deleteQueryDevtoolsMock, collectQueryDevtoolsSchemaComponents, seedQueryDevtoolsSchemaRoute, QUERY_DEVTOOLS_FAULT_STATUSES, setQueryDevtoolsFault, clearQueryDevtoolsTombstones, readQueryDevtoolsStore, createQueryKeyLockManager, queryDevtoolsEntries, queryDevtoolsTokenTtls, queryDevtoolsFaults, EMPTY_QUERY_DEVTOOLS_FAULT, isQueryDevtoolsFaultArmed, queryDevtoolsFaultsRestored, queryDevtoolsArmedMocksRestored, restoredQueryDevtoolsOverrides, queryDevtoolsRestoredOverridesScope, clearRestoredQueryDevtoolsOverrides, clearQueryDevtoolsStore, writeQueryDevtoolsStore, registerEthleteVersion, queryDevtoolsOverridePersistence, setQueryDevtoolsOverridePersistence, clearQueryDevtoolsOverrideStore, clearQueryDevtoolsMockStore, createQueryErrorResponse, applyQueryDevtoolsTokenTtl, canOverrideQueryDevtoolsTokenTtl, sumQueryDevtoolsStats } from '@ethlete/query';
|
|
5
5
|
import { tap, Subject, switchMap, timer, interval, animationFrames, NEVER, takeUntil, finalize as finalize$1, EMPTY, startWith, merge, map, fromEvent, filter, take } from 'rxjs';
|
|
6
6
|
import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
|
|
@@ -3205,7 +3205,7 @@ const summarizeLocks = (options) => {
|
|
|
3205
3205
|
|
|
3206
3206
|
// Generated from package.json by tools/scripts/generate-version.js - do not edit.
|
|
3207
3207
|
/** The version of `@ethlete/query-devtools` this build was cut from. */
|
|
3208
|
-
const QUERY_DEVTOOLS_VERSION = '1.0.0-next.
|
|
3208
|
+
const QUERY_DEVTOOLS_VERSION = '1.0.0-next.5';
|
|
3209
3209
|
|
|
3210
3210
|
/* eslint-disable @typescript-eslint/naming-convention -- the `__export_*` keys are Insomnia's file format */
|
|
3211
3211
|
const WORKSPACE_ID = 'wrk_ethlete_query_devtools';
|
|
@@ -4112,6 +4112,11 @@ const DOCK_PADDING = {
|
|
|
4112
4112
|
left: 'paddingInlineStart',
|
|
4113
4113
|
right: 'paddingInlineEnd',
|
|
4114
4114
|
};
|
|
4115
|
+
/**
|
|
4116
|
+
* The panel's own z-index, mirrored from `query-devtools.component.css`. An overlay below it keeps out
|
|
4117
|
+
* of the space a docked panel covers; the panel's own overlays paint a level above it and may use it.
|
|
4118
|
+
*/
|
|
4119
|
+
const PANEL_LAYER = 2147483010;
|
|
4115
4120
|
const noop = () => undefined;
|
|
4116
4121
|
/**
|
|
4117
4122
|
* A devtools entry id as a person reads it. Ids are the registry's descriptor plus a per-descriptor
|
|
@@ -4578,6 +4583,28 @@ class QueryDevtoolsComponent {
|
|
|
4578
4583
|
return { padding: DOCK_PADDING[dock], px: this.sideDocked() ? size.width : size.height };
|
|
4579
4584
|
}, /* @ts-ignore */
|
|
4580
4585
|
...(ngDevMode ? [{ debugName: "pageReservation" }] : /* istanbul ignore next */ []));
|
|
4586
|
+
/**
|
|
4587
|
+
* The viewport edge a docked panel covers, reserved for overlays whatever {@link reservesSpace} says:
|
|
4588
|
+
* page content can be scrolled out from under the panel, a dialog or a menu cannot. A dock edge is
|
|
4589
|
+
* logical, so which physical edge a side dock covers flips in RTL - read from the panel, since the
|
|
4590
|
+
* writing direction cannot change under a dock switch.
|
|
4591
|
+
*/
|
|
4592
|
+
this.overlayReservation = computed(() => {
|
|
4593
|
+
const dock = this.dock();
|
|
4594
|
+
if (dock === 'float' || this.poppedOut() || !this.open())
|
|
4595
|
+
return null;
|
|
4596
|
+
const panel = this.panelEl()?.nativeElement;
|
|
4597
|
+
const size = this.panelSize().offset;
|
|
4598
|
+
if (!panel || !size)
|
|
4599
|
+
return null;
|
|
4600
|
+
if (dock === 'top')
|
|
4601
|
+
return { top: size.height, layer: PANEL_LAYER };
|
|
4602
|
+
if (dock === 'bottom')
|
|
4603
|
+
return { bottom: size.height, layer: PANEL_LAYER };
|
|
4604
|
+
const coversLeft = (dock === 'left') !== (getComputedStyle(panel).direction === 'rtl');
|
|
4605
|
+
return coversLeft ? { left: size.width, layer: PANEL_LAYER } : { right: size.width, layer: PANEL_LAYER };
|
|
4606
|
+
}, /* @ts-ignore */
|
|
4607
|
+
...(ngDevMode ? [{ debugName: "overlayReservation" }] : /* istanbul ignore next */ []));
|
|
4581
4608
|
/** Which section of the query detail is showing. Shared by the Queries tab and both drawers. */
|
|
4582
4609
|
this.detailTab = signal(this.persisted.detailTab ?? 'overview', /* @ts-ignore */
|
|
4583
4610
|
...(ngDevMode ? [{ debugName: "detailTab" }] : /* istanbul ignore next */ []));
|
|
@@ -5147,6 +5174,12 @@ class QueryDevtoolsComponent {
|
|
|
5147
5174
|
this.renderer.setStyle(root, { boxSizing: 'border-box', [reservation.padding]: `${reservation.px}px` });
|
|
5148
5175
|
onCleanup(() => this.renderer.removeStyles(root, 'boxSizing', reservation.padding));
|
|
5149
5176
|
});
|
|
5177
|
+
effect((onCleanup) => {
|
|
5178
|
+
const reservation = this.overlayReservation();
|
|
5179
|
+
if (!reservation)
|
|
5180
|
+
return;
|
|
5181
|
+
onCleanup(reserveOverlayViewportSpace(reservation));
|
|
5182
|
+
});
|
|
5150
5183
|
// A window that shrinks below the floating panel would otherwise leave it half (or wholly) off
|
|
5151
5184
|
// screen, with no edge left to grab. Untracked on the way in so clamping cannot re-trigger itself.
|
|
5152
5185
|
effect(() => {
|