@ng-prism/core 22.2.0 → 22.3.0
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/README.md +22 -24
- package/builders.json +11 -11
- package/dist/app/canvas/canvas-bg.styles.d.ts +1 -1
- package/dist/app/canvas/canvas-bg.styles.d.ts.map +1 -1
- package/dist/app/canvas/canvas-bg.styles.js +17 -0
- package/dist/app/canvas/prism-canvas-bg-pill.component.d.ts.map +1 -1
- package/dist/app/canvas/prism-canvas-bg-pill.component.js +3 -18
- package/dist/app/canvas/prism-canvas-rulers.component.d.ts +1 -0
- package/dist/app/canvas/prism-canvas-rulers.component.d.ts.map +1 -1
- package/dist/app/canvas/prism-canvas-rulers.component.js +9 -14
- package/dist/app/canvas/prism-canvas-toolbar.component.d.ts +23 -6
- package/dist/app/canvas/prism-canvas-toolbar.component.d.ts.map +1 -1
- package/dist/app/canvas/prism-canvas-toolbar.component.js +110 -140
- package/dist/app/canvas/prism-template-popover.component.d.ts.map +1 -1
- package/dist/app/canvas/prism-template-popover.component.js +8 -49
- package/dist/app/canvas/viewport-snap.d.ts +12 -0
- package/dist/app/canvas/viewport-snap.d.ts.map +1 -0
- package/dist/app/canvas/viewport-snap.js +23 -0
- package/dist/app/component-head/head-metrics.d.ts.map +1 -1
- package/dist/app/component-head/head-metrics.js +2 -2
- package/dist/app/component-head/prism-component-head.component.d.ts +1 -1
- package/dist/app/component-head/prism-component-head.component.d.ts.map +1 -1
- package/dist/app/component-head/prism-component-head.component.js +17 -50
- package/dist/app/component-head/prism-head-gauge.component.d.ts.map +1 -1
- package/dist/app/component-head/prism-head-gauge.component.js +4 -36
- package/dist/app/component-head/prism-head-info.component.d.ts.map +1 -1
- package/dist/app/component-head/prism-head-info.component.js +3 -36
- package/dist/app/component-head/prism-stat.component.d.ts.map +1 -1
- package/dist/app/component-head/prism-stat.component.js +3 -14
- package/dist/app/controls/boolean-control.component.d.ts.map +1 -1
- package/dist/app/controls/boolean-control.component.js +4 -12
- package/dist/app/controls/json-control.component.d.ts.map +1 -1
- package/dist/app/controls/json-control.component.js +4 -24
- package/dist/app/controls/number-control.component.d.ts.map +1 -1
- package/dist/app/controls/number-control.component.js +4 -11
- package/dist/app/controls/string-control.component.d.ts.map +1 -1
- package/dist/app/controls/string-control.component.js +4 -11
- package/dist/app/controls/union-control.component.d.ts.map +1 -1
- package/dist/app/controls/union-control.component.js +4 -16
- package/dist/app/directives/prism-resizer.directive.d.ts +24 -1
- package/dist/app/directives/prism-resizer.directive.d.ts.map +1 -1
- package/dist/app/directives/prism-resizer.directive.js +44 -7
- package/dist/app/directives/resize-value.d.ts +22 -0
- package/dist/app/directives/resize-value.d.ts.map +1 -0
- package/dist/app/directives/resize-value.js +23 -0
- package/dist/app/discovery-manifest.d.ts.map +1 -1
- package/dist/app/discovery-manifest.js +5 -7
- package/dist/app/header/prism-header-widget-host.component.d.ts.map +1 -1
- package/dist/app/header/prism-header-widget-host.component.js +4 -8
- package/dist/app/header/prism-header.component.d.ts.map +1 -1
- package/dist/app/header/prism-header.component.js +8 -77
- package/dist/app/hmr.d.ts.map +1 -1
- package/dist/app/icons/icon-registry.d.ts.map +1 -1
- package/dist/app/icons/icon-registry.js +2 -1
- package/dist/app/icons/prism-icon.component.d.ts.map +1 -1
- package/dist/app/icons/prism-icon.component.js +5 -5
- package/dist/app/index.d.ts +3 -3
- package/dist/app/index.d.ts.map +1 -1
- package/dist/app/index.js +3 -3
- package/dist/app/layout-menu/prism-layout-menu.component.d.ts.map +1 -1
- package/dist/app/layout-menu/prism-layout-menu.component.js +3 -77
- package/dist/app/overview/overview-panel.js +1 -1
- package/dist/app/overview/overview-visibility.d.ts.map +1 -1
- package/dist/app/overview/prism-overview-cell.component.d.ts.map +1 -1
- package/dist/app/overview/prism-overview-cell.component.js +10 -17
- package/dist/app/overview/prism-overview.component.d.ts.map +1 -1
- package/dist/app/overview/prism-overview.component.js +4 -12
- package/dist/app/page-renderer/prism-page-renderer.component.d.ts.map +1 -1
- package/dist/app/page-renderer/prism-page-renderer.component.js +4 -17
- package/dist/app/panels/a11y/a11y-audit.service.d.ts.map +1 -1
- package/dist/app/panels/a11y/a11y-audit.service.js +14 -2
- package/dist/app/panels/a11y/a11y-core.plugin.d.ts.map +1 -1
- package/dist/app/panels/a11y/a11y-core.plugin.js +1 -1
- package/dist/app/panels/a11y/a11y-dom-utils.d.ts.map +1 -1
- package/dist/app/panels/a11y/a11y-dom-utils.js +9 -6
- package/dist/app/panels/a11y/a11y-header-badge.component.d.ts.map +1 -1
- package/dist/app/panels/a11y/a11y-header-badge.component.js +6 -22
- package/dist/app/panels/a11y/a11y-keyboard-overlay.component.d.ts.map +1 -1
- package/dist/app/panels/a11y/a11y-keyboard-overlay.component.js +6 -25
- package/dist/app/panels/a11y/a11y-keyboard.component.d.ts.map +1 -1
- package/dist/app/panels/a11y/a11y-keyboard.component.js +5 -36
- package/dist/app/panels/a11y/a11y-keyboard.service.d.ts.map +1 -1
- package/dist/app/panels/a11y/a11y-keyboard.service.js +2 -2
- package/dist/app/panels/a11y/a11y-overlay-host.component.d.ts.map +1 -1
- package/dist/app/panels/a11y/a11y-overlay-host.component.js +5 -32
- package/dist/app/panels/a11y/a11y-panel-state.service.d.ts.map +1 -1
- package/dist/app/panels/a11y/a11y-panel.component.d.ts +1 -1
- package/dist/app/panels/a11y/a11y-panel.component.d.ts.map +1 -1
- package/dist/app/panels/a11y/a11y-panel.component.js +7 -69
- package/dist/app/panels/a11y/a11y-perspective.service.d.ts.map +1 -1
- package/dist/app/panels/a11y/a11y-score.component.d.ts.map +1 -1
- package/dist/app/panels/a11y/a11y-score.component.js +4 -31
- package/dist/app/panels/a11y/a11y-sr-overlay.component.d.ts.map +1 -1
- package/dist/app/panels/a11y/a11y-sr-overlay.component.js +8 -28
- package/dist/app/panels/a11y/a11y-sr.component.d.ts.map +1 -1
- package/dist/app/panels/a11y/a11y-sr.component.js +5 -28
- package/dist/app/panels/a11y/a11y-sr.service.d.ts.map +1 -1
- package/dist/app/panels/a11y/a11y-sr.service.js +4 -7
- package/dist/app/panels/a11y/a11y-summary.d.ts.map +1 -1
- package/dist/app/panels/a11y/a11y-summary.js +2 -5
- package/dist/app/panels/a11y/a11y-thresholds.d.ts.map +1 -1
- package/dist/app/panels/a11y/a11y-thresholds.js +1 -1
- package/dist/app/panels/a11y/a11y-tree.component.d.ts.map +1 -1
- package/dist/app/panels/a11y/a11y-tree.component.js +9 -46
- package/dist/app/panels/a11y/a11y-tree.service.d.ts.map +1 -1
- package/dist/app/panels/a11y/a11y-tree.service.js +3 -5
- package/dist/app/panels/a11y/a11y-violations.component.d.ts.map +1 -1
- package/dist/app/panels/a11y/a11y-violations.component.js +7 -58
- package/dist/app/panels/a11y/a11y.types.d.ts.map +1 -1
- package/dist/app/panels/builtin-header-widgets.js +2 -2
- package/dist/app/panels/builtin-navigation-decorations.d.ts.map +1 -1
- package/dist/app/panels/builtin-navigation-decorations.js +2 -2
- package/dist/app/panels/builtin-panels.d.ts.map +1 -1
- package/dist/app/panels/builtin-panels.js +2 -7
- package/dist/app/panels/controls/controls-plugin.js +3 -3
- package/dist/app/panels/controls/non-editable-input-types.d.ts.map +1 -1
- package/dist/app/panels/controls/non-editable-input-types.js +1 -5
- package/dist/app/panels/controls/prism-controls-panel.component.d.ts.map +1 -1
- package/dist/app/panels/controls/prism-controls-panel.component.js +5 -95
- package/dist/app/panels/events/events-plugin.js +3 -3
- package/dist/app/panels/events/prism-events-panel.component.d.ts.map +1 -1
- package/dist/app/panels/events/prism-events-panel.component.js +5 -23
- package/dist/app/panels/events/prism-json-node.component.d.ts.map +1 -1
- package/dist/app/panels/events/prism-json-node.component.js +4 -86
- package/dist/app/panels/events/prism-json-node.utils.d.ts.map +1 -1
- package/dist/app/panels/panel-host/panel-badge.d.ts.map +1 -1
- package/dist/app/panels/panel-host/panel-badge.js +2 -4
- package/dist/app/panels/panel-host/prism-panel-host.component.d.ts +1 -1
- package/dist/app/panels/panel-host/prism-panel-host.component.d.ts.map +1 -1
- package/dist/app/panels/panel-host/prism-panel-host.component.js +12 -67
- package/dist/app/provide-prism.d.ts +1 -1
- package/dist/app/provide-prism.d.ts.map +1 -1
- package/dist/app/provide-prism.js +7 -11
- package/dist/app/renderer/known-inputs.d.ts.map +1 -1
- package/dist/app/renderer/overlay-resolver.d.ts.map +1 -1
- package/dist/app/renderer/overlay-resolver.js +1 -1
- package/dist/app/renderer/prism-renderer.component.d.ts +27 -2
- package/dist/app/renderer/prism-renderer.component.d.ts.map +1 -1
- package/dist/app/renderer/prism-renderer.component.js +94 -76
- package/dist/app/renderer/projectable-content.d.ts.map +1 -1
- package/dist/app/renderer/projectable-content.js +1 -3
- package/dist/app/renderer/snippet-generator.d.ts +1 -1
- package/dist/app/renderer/snippet-generator.d.ts.map +1 -1
- package/dist/app/renderer/snippet-generator.js +7 -22
- package/dist/app/services/navigation-item.types.d.ts +1 -1
- package/dist/app/services/navigation-item.types.d.ts.map +1 -1
- package/dist/app/services/prism-canvas.service.d.ts +22 -0
- package/dist/app/services/prism-canvas.service.d.ts.map +1 -1
- package/dist/app/services/prism-canvas.service.js +49 -2
- package/dist/app/services/prism-capture.service.d.ts.map +1 -1
- package/dist/app/services/prism-capture.service.js +2 -6
- package/dist/app/services/prism-event-log.service.d.ts.map +1 -1
- package/dist/app/services/prism-event-log.service.js +1 -4
- package/dist/app/services/prism-layout.service.d.ts.map +1 -1
- package/dist/app/services/prism-layout.service.js +5 -4
- package/dist/app/services/prism-manifest.service.d.ts +1 -1
- package/dist/app/services/prism-manifest.service.d.ts.map +1 -1
- package/dist/app/services/prism-manifest.service.js +1 -1
- package/dist/app/services/prism-navigation.service.d.ts +1 -1
- package/dist/app/services/prism-navigation.service.d.ts.map +1 -1
- package/dist/app/services/prism-navigation.service.js +5 -13
- package/dist/app/services/prism-panel.service.d.ts.map +1 -1
- package/dist/app/services/prism-panel.service.js +2 -5
- package/dist/app/services/prism-persistence.service.d.ts.map +1 -1
- package/dist/app/services/prism-persistence.service.js +8 -10
- package/dist/app/services/prism-plugin.service.d.ts.map +1 -1
- package/dist/app/services/prism-renderer.service.d.ts.map +1 -1
- package/dist/app/services/prism-renderer.service.js +5 -9
- package/dist/app/services/prism-search.service.d.ts.map +1 -1
- package/dist/app/services/prism-search.service.js +1 -2
- package/dist/app/services/prism-theme.service.d.ts.map +1 -1
- package/dist/app/services/prism-theme.service.js +6 -4
- package/dist/app/services/prism-url-state.service.d.ts.map +1 -1
- package/dist/app/services/prism-url-state.service.js +3 -9
- package/dist/app/services/prism-variant-bg.service.d.ts.map +1 -1
- package/dist/app/services/prism-variant-bg.service.js +3 -5
- package/dist/app/shared/prism-metric-badge.component.d.ts.map +1 -1
- package/dist/app/shared/prism-metric-badge.component.js +4 -17
- package/dist/app/shell/prism-shell.component.d.ts.map +1 -1
- package/dist/app/shell/prism-shell.component.js +20 -122
- package/dist/app/sidebar/navigation-decorations.d.ts.map +1 -1
- package/dist/app/sidebar/navigation-decorations.js +1 -1
- package/dist/app/sidebar/prism-sidebar.component.d.ts +1 -1
- package/dist/app/sidebar/prism-sidebar.component.d.ts.map +1 -1
- package/dist/app/sidebar/prism-sidebar.component.js +19 -154
- package/dist/app/theme/prism-default-theme.d.ts.map +1 -1
- package/dist/app/theme/prism-default-theme.js +5 -5
- package/dist/app/tokens/prism-tokens.d.ts.map +1 -1
- package/dist/app/tokens/prism-tokens.js +1 -1
- package/dist/app/variant-ribbon/prism-variant-ribbon.component.d.ts.map +1 -1
- package/dist/app/variant-ribbon/prism-variant-ribbon.component.js +4 -49
- package/dist/app/variant-ribbon/spectrum.d.ts.map +1 -1
- package/dist/app/view-tab-bar/next-view-id.d.ts.map +1 -1
- package/dist/app/view-tab-bar/next-view-id.js +1 -3
- package/dist/app/view-tab-bar/prism-view-panel-host.component.d.ts.map +1 -1
- package/dist/app/view-tab-bar/prism-view-panel-host.component.js +5 -17
- package/dist/app/view-tab-bar/prism-view-tab-bar.component.d.ts.map +1 -1
- package/dist/app/view-tab-bar/prism-view-tab-bar.component.js +4 -27
- package/dist/builder/a11y/a11y-report-reader.d.ts +1 -1
- package/dist/builder/a11y/a11y-report-reader.d.ts.map +1 -1
- package/dist/builder/a11y/a11y-report-reader.js +7 -7
- package/dist/builder/build/index.d.ts.map +1 -1
- package/dist/builder/build/index.js +5 -9
- package/dist/builder/build/schema.d.ts.map +1 -1
- package/dist/builder/config-loader/config-loader.d.ts.map +1 -1
- package/dist/builder/config-loader/config-loader.js +4 -5
- package/dist/builder/manifest/host-parser.d.ts.map +1 -1
- package/dist/builder/manifest/host-parser.js +1 -1
- package/dist/builder/manifest/runtime-manifest.generator.d.ts +1 -1
- package/dist/builder/manifest/runtime-manifest.generator.d.ts.map +1 -1
- package/dist/builder/manifest/runtime-manifest.generator.js +9 -34
- package/dist/builder/plugin-runner/plugin-runner.d.ts.map +1 -1
- package/dist/builder/plugin-runner/plugin-runner.js +1 -3
- package/dist/builder/scanner/ast-utils.d.ts.map +1 -1
- package/dist/builder/scanner/ast-utils.js +2 -8
- package/dist/builder/scanner/component.scanner.d.ts.map +1 -1
- package/dist/builder/scanner/component.scanner.js +15 -22
- package/dist/builder/scanner/entry-point-discovery.d.ts.map +1 -1
- package/dist/builder/scanner/entry-point-discovery.js +3 -5
- package/dist/builder/scanner/entry-point.scanner.d.ts.map +1 -1
- package/dist/builder/scanner/entry-point.scanner.js +1 -3
- package/dist/builder/scanner/index.d.ts +1 -1
- package/dist/builder/scanner/index.d.ts.map +1 -1
- package/dist/builder/scanner/input.extractor.d.ts.map +1 -1
- package/dist/builder/scanner/input.extractor.js +11 -28
- package/dist/builder/scanner/manifest.generator.d.ts.map +1 -1
- package/dist/builder/scanner/manifest.generator.js +2 -4
- package/dist/builder/scanner/scanner.d.ts.map +1 -1
- package/dist/builder/scanner/scanner.js +4 -4
- package/dist/builder/serve/index.d.ts.map +1 -1
- package/dist/builder/serve/index.js +8 -10
- package/dist/builder/serve/schema.d.ts.map +1 -1
- package/dist/builder/shared/index.d.ts +1 -1
- package/dist/builder/shared/index.d.ts.map +1 -1
- package/dist/builder/shared/index.js +1 -1
- package/dist/builder/shared/prism-pipeline.d.ts.map +1 -1
- package/dist/builder/shared/prism-pipeline.js +18 -25
- package/dist/builder/shared/resolve-cache-dir.d.ts.map +1 -1
- package/dist/builder/shared/resolve-cache-dir.js +1 -1
- package/dist/builder/watcher/index.d.ts +1 -1
- package/dist/builder/watcher/index.d.ts.map +1 -1
- package/dist/builder/watcher/prism-watcher.d.ts.map +1 -1
- package/dist/builder/watcher/prism-watcher.js +12 -10
- package/dist/config/index.d.ts +2 -2
- package/dist/config/index.d.ts.map +1 -1
- package/dist/config/index.js +1 -1
- package/dist/decorator/index.d.ts +1 -1
- package/dist/decorator/index.d.ts.map +1 -1
- package/dist/decorator/showcase.decorator.d.ts.map +1 -1
- package/dist/decorator/showcase.types.d.ts.map +1 -1
- package/dist/plugin/index.d.ts +4 -4
- package/dist/plugin/index.d.ts.map +1 -1
- package/dist/plugin/index.js +2 -2
- package/dist/plugin/page-helpers.d.ts +1 -1
- package/dist/plugin/page-helpers.d.ts.map +1 -1
- package/dist/plugin/page-helpers.js +2 -2
- package/dist/plugin/page.types.d.ts.map +1 -1
- package/dist/plugin/plugin.types.d.ts +1 -1
- package/dist/plugin/plugin.types.d.ts.map +1 -1
- package/dist/schematics/migrations/v21-13-manifest-cache/index.d.ts.map +1 -1
- package/dist/schematics/migrations/v21-13-manifest-cache/index.js +4 -10
- package/dist/schematics/migrations/v22-0-cache-dir-rename/index.d.ts.map +1 -1
- package/dist/schematics/migrations/v22-0-cache-dir-rename/index.js +4 -8
- package/dist/schematics/ng-add/index.d.ts.map +1 -1
- package/dist/schematics/ng-add/index.js +122 -56
- package/dist/schematics/ng-add/schema.d.ts.map +1 -1
- package/dist/schematics/utils/config-ast.d.ts.map +1 -1
- package/dist/schematics/utils/config-ast.js +8 -15
- package/dist/schematics/utils/tsconfig-paths.d.ts.map +1 -1
- package/dist/schematics/utils/tsconfig-paths.js +1 -1
- package/dist/shared/canvas-bg.type.d.ts.map +1 -1
- package/dist/shared/canvas-bg.type.js +1 -8
- package/dist/shared/canvas-layout.type.d.ts.map +1 -1
- package/dist/shared/canvas-layout.type.js +1 -4
- package/dist/shared/variant-bg.d.ts.map +1 -1
- package/dist/shared/viewport.type.d.ts +47 -0
- package/dist/shared/viewport.type.d.ts.map +1 -0
- package/dist/shared/viewport.type.js +48 -0
- package/dist/transformer/cli.js +0 -0
- package/dist/transformer/index.d.ts +2 -2
- package/dist/transformer/index.d.ts.map +1 -1
- package/dist/transformer/index.js +2 -2
- package/dist/transformer/showcase-strip.transformer.d.ts.map +1 -1
- package/dist/transformer/showcase-strip.transformer.js +6 -15
- package/dist/transformer/strip-directory.d.ts.map +1 -1
- package/dist/transformer/strip-directory.js +2 -4
- package/package.json +4 -1
- package/schematics/collection.json +7 -7
- package/schematics/migrations.json +12 -12
- package/schematics/ng-add/schema.json +22 -22
- package/src/builder/build/schema.json +36 -36
- package/src/builder/serve/schema.json +37 -37
package/dist/app/index.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
// Tokens
|
|
2
2
|
// PRISM_RENDERER_HOOKS + PrismRendererHooks are exported from the plugin entry point
|
|
3
3
|
// (src/plugin/index.ts) since they belong to the plugin API surface.
|
|
4
|
-
export {
|
|
4
|
+
export { PRISM_CONFIG, PRISM_MANIFEST } from './tokens/prism-tokens.js';
|
|
5
5
|
// Theme
|
|
6
|
-
export {
|
|
6
|
+
export { PRISM_BASE_TOKENS, PRISM_DARK_THEME, PRISM_DEFAULT_THEME, PRISM_LIGHT_THEME } from './theme/prism-default-theme.js';
|
|
7
7
|
export { PrismThemeService } from './services/prism-theme.service.js';
|
|
8
8
|
// Services
|
|
9
9
|
export { PrismManifestService } from './services/prism-manifest.service.js';
|
|
10
10
|
export { PrismSearchService } from './services/prism-search.service.js';
|
|
11
11
|
export { PrismNavigationService } from './services/prism-navigation.service.js';
|
|
12
12
|
export { PrismRendererService } from './services/prism-renderer.service.js';
|
|
13
|
-
export { PrismEventLogService
|
|
13
|
+
export { PrismEventLogService } from './services/prism-event-log.service.js';
|
|
14
14
|
export { PrismPluginService } from './services/prism-plugin.service.js';
|
|
15
15
|
export { PrismLayoutService } from './services/prism-layout.service.js';
|
|
16
16
|
export { PrismUrlStateService } from './services/prism-url-state.service.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"prism-layout-menu.component.d.ts","sourceRoot":"","sources":["../../../src/app/layout-menu/prism-layout-menu.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;;AAEzE,
|
|
1
|
+
{"version":3,"file":"prism-layout-menu.component.d.ts","sourceRoot":"","sources":["../../../src/app/layout-menu/prism-layout-menu.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;;AAEzE,qBAMa,wBAAwB;IACjC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,IAAI,kDAAiB;IAExC,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,GAAG,IAAI;yCAJvE,wBAAwB;2CAAxB,wBAAwB;CAqBpC"}
|
|
@@ -102,84 +102,10 @@ export class PrismLayoutMenuComponent {
|
|
|
102
102
|
i0.ɵɵclassProp("layout-menu__trigger--active", ctx.open());
|
|
103
103
|
i0.ɵɵadvance(5);
|
|
104
104
|
i0.ɵɵconditional(ctx.open() ? 6 : -1);
|
|
105
|
-
} }, styles: [".layout-menu[_ngcontent-%COMP%] {
|
|
105
|
+
} }, styles: [".layout-menu[_ngcontent-%COMP%] {\n position: relative;\n}\n\n.layout-menu__trigger[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 30px;\n height: 30px;\n color: var(--%NS%prism-text-muted);\n cursor: pointer;\n background: transparent;\n border: 1px solid var(--%NS%prism-border);\n border-radius: var(--%NS%prism-radius-sm);\n transition:\n border-color 0.15s,\n color 0.15s,\n background 0.15s;\n}\n\n.layout-menu__trigger[_ngcontent-%COMP%]:hover, \n.layout-menu__trigger--active[_ngcontent-%COMP%] {\n color: var(--%NS%prism-text);\n background: var(--%NS%prism-bg-surface);\n border-color: var(--%NS%prism-border-strong);\n}\n\n.layout-menu__backdrop[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n z-index: 40;\n}\n\n.layout-menu__dropdown[_ngcontent-%COMP%] {\n position: absolute;\n top: calc(100% + 6px);\n right: 0;\n z-index: 50;\n min-width: 240px;\n padding: 4px;\n background: var(--%NS%prism-bg-elevated);\n border: 1px solid var(--%NS%prism-border-strong);\n border-radius: var(--%NS%prism-radius);\n box-shadow: 0 8px 32px rgb(0 0 0 / 40%);\n}\n\n.layout-menu__item[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n align-items: center;\n width: 100%;\n padding: 7px 10px;\n font-family: var(--%NS%prism-font-sans);\n font-size: 13px;\n color: var(--%NS%prism-text);\n text-align: left;\n cursor: pointer;\n background: none;\n border: none;\n border-radius: var(--%NS%prism-radius-sm);\n transition: background 0.1s;\n}\n\n.layout-menu__item[_ngcontent-%COMP%]:hover {\n background: var(--%NS%prism-bg-surface);\n}\n\n.layout-menu__check[_ngcontent-%COMP%] {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n color: transparent;\n border: 1px solid var(--%NS%prism-border-strong);\n border-radius: 3px;\n}\n\n.layout-menu__check--on[_ngcontent-%COMP%] {\n color: white;\n background: var(--%NS%prism-primary);\n border-color: var(--%NS%prism-primary);\n}\n\n.layout-menu__icon[_ngcontent-%COMP%] {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n color: var(--%NS%prism-text-muted);\n}\n\n.layout-menu__label[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.layout-menu__kbd[_ngcontent-%COMP%] {\n display: flex;\n gap: 2px;\n opacity: 0.6;\n}\n\nkbd[_ngcontent-%COMP%] {\n padding: 1px 4px;\n font-family: var(--%NS%prism-font-sans);\n font-size: 11px;\n color: var(--%NS%prism-text-muted);\n background: var(--%NS%prism-bg-surface);\n border: 1px solid var(--%NS%prism-border-strong);\n border-radius: 3px;\n}\n\n.layout-menu__divider[_ngcontent-%COMP%] {\n height: 1px;\n margin: 4px 0;\n background: var(--%NS%prism-border);\n}"] });
|
|
106
106
|
}
|
|
107
107
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismLayoutMenuComponent, [{
|
|
108
108
|
type: Component,
|
|
109
|
-
args: [{ selector: 'prism-layout-menu', standalone: true, template:
|
|
110
|
-
<div class="layout-menu">
|
|
111
|
-
<button
|
|
112
|
-
class="layout-menu__trigger"
|
|
113
|
-
(click)="open.set(!open())"
|
|
114
|
-
[class.layout-menu__trigger--active]="open()"
|
|
115
|
-
title="Layout options"
|
|
116
|
-
>
|
|
117
|
-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
118
|
-
<circle cx="8" cy="3" r="1.25" fill="currentColor" />
|
|
119
|
-
<circle cx="8" cy="8" r="1.25" fill="currentColor" />
|
|
120
|
-
<circle cx="8" cy="13" r="1.25" fill="currentColor" />
|
|
121
|
-
</svg>
|
|
122
|
-
</button>
|
|
123
|
-
@if (open()) {
|
|
124
|
-
<div class="layout-menu__backdrop" (click)="open.set(false)"></div>
|
|
125
|
-
<div class="layout-menu__dropdown">
|
|
126
|
-
<button class="layout-menu__item" (click)="toggle('sidebar')">
|
|
127
|
-
<span
|
|
128
|
-
class="layout-menu__check"
|
|
129
|
-
[class.layout-menu__check--on]="layout.sidebarVisible()"
|
|
130
|
-
>
|
|
131
|
-
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
|
132
|
-
<path
|
|
133
|
-
d="M2 6l3 3 5-5"
|
|
134
|
-
stroke="currentColor"
|
|
135
|
-
stroke-width="1.5"
|
|
136
|
-
stroke-linecap="round"
|
|
137
|
-
stroke-linejoin="round"
|
|
138
|
-
/>
|
|
139
|
-
</svg>
|
|
140
|
-
</span>
|
|
141
|
-
<span class="layout-menu__label">Show sidebar</span>
|
|
142
|
-
<span class="layout-menu__kbd"><kbd>⌥</kbd><kbd>S</kbd></span>
|
|
143
|
-
</button>
|
|
144
|
-
<button class="layout-menu__item" (click)="toggle('toolbar')">
|
|
145
|
-
<span
|
|
146
|
-
class="layout-menu__check"
|
|
147
|
-
[class.layout-menu__check--on]="layout.toolbarVisible()"
|
|
148
|
-
>
|
|
149
|
-
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
|
150
|
-
<path
|
|
151
|
-
d="M2 6l3 3 5-5"
|
|
152
|
-
stroke="currentColor"
|
|
153
|
-
stroke-width="1.5"
|
|
154
|
-
stroke-linecap="round"
|
|
155
|
-
stroke-linejoin="round"
|
|
156
|
-
/>
|
|
157
|
-
</svg>
|
|
158
|
-
</span>
|
|
159
|
-
<span class="layout-menu__label">Show variant rail</span>
|
|
160
|
-
<span class="layout-menu__kbd"><kbd>⌥</kbd><kbd>T</kbd></span>
|
|
161
|
-
</button>
|
|
162
|
-
<button class="layout-menu__item" (click)="toggle('addons')">
|
|
163
|
-
<span
|
|
164
|
-
class="layout-menu__check"
|
|
165
|
-
[class.layout-menu__check--on]="layout.addonsVisible()"
|
|
166
|
-
>
|
|
167
|
-
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
|
168
|
-
<path
|
|
169
|
-
d="M2 6l3 3 5-5"
|
|
170
|
-
stroke="currentColor"
|
|
171
|
-
stroke-width="1.5"
|
|
172
|
-
stroke-linecap="round"
|
|
173
|
-
stroke-linejoin="round"
|
|
174
|
-
/>
|
|
175
|
-
</svg>
|
|
176
|
-
</span>
|
|
177
|
-
<span class="layout-menu__label">Show addons panel</span>
|
|
178
|
-
<span class="layout-menu__kbd"><kbd>⌥</kbd><kbd>A</kbd></span>
|
|
179
|
-
</button>
|
|
180
|
-
</div>
|
|
181
|
-
}
|
|
182
|
-
</div>
|
|
183
|
-
`, styles: ["\n .layout-menu { position: relative; }\n\n .layout-menu__trigger {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 30px;\n height: 30px;\n border: 1px solid var(--prism-border);\n border-radius: var(--prism-radius-sm);\n background: transparent;\n color: var(--prism-text-muted);\n cursor: pointer;\n transition: border-color 0.15s, color 0.15s, background 0.15s;\n }\n .layout-menu__trigger:hover,\n .layout-menu__trigger--active {\n border-color: var(--prism-border-strong);\n color: var(--prism-text);\n background: var(--prism-bg-surface);\n }\n\n .layout-menu__backdrop {\n position: fixed;\n inset: 0;\n z-index: 40;\n }\n\n .layout-menu__dropdown {\n position: absolute;\n top: calc(100% + 6px);\n right: 0;\n z-index: 50;\n min-width: 240px;\n background: var(--prism-bg-elevated);\n border: 1px solid var(--prism-border-strong);\n border-radius: var(--prism-radius);\n box-shadow: 0 8px 32px rgba(0,0,0,0.4);\n padding: 4px;\n }\n\n .layout-menu__item {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 7px 10px;\n border: none;\n background: none;\n color: var(--prism-text);\n font-family: var(--prism-font-sans);\n font-size: 13px;\n cursor: pointer;\n border-radius: var(--prism-radius-sm);\n text-align: left;\n transition: background 0.1s;\n }\n .layout-menu__item:hover { background: var(--prism-bg-surface); }\n\n .layout-menu__check {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n border: 1px solid var(--prism-border-strong);\n border-radius: 3px;\n flex-shrink: 0;\n color: transparent;\n }\n .layout-menu__check--on {\n background: var(--prism-primary);\n border-color: var(--prism-primary);\n color: white;\n }\n\n .layout-menu__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n color: var(--prism-text-muted);\n flex-shrink: 0;\n }\n\n .layout-menu__label { flex: 1; }\n\n .layout-menu__kbd {\n display: flex;\n gap: 2px;\n opacity: 0.6;\n }\n kbd {\n font-family: var(--prism-font-sans);\n font-size: 11px;\n padding: 1px 4px;\n border: 1px solid var(--prism-border-strong);\n border-radius: 3px;\n background: var(--prism-bg-surface);\n color: var(--prism-text-muted);\n }\n\n .layout-menu__divider {\n height: 1px;\n background: var(--prism-border);\n margin: 4px 0;\n }\n "] }]
|
|
109
|
+
args: [{ selector: 'prism-layout-menu', standalone: true, template: "<div class=\"layout-menu\">\n <button\n class=\"layout-menu__trigger\"\n (click)=\"open.set(!open())\"\n [class.layout-menu__trigger--active]=\"open()\"\n title=\"Layout options\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\">\n <circle\n cx=\"8\"\n cy=\"3\"\n r=\"1.25\"\n fill=\"currentColor\" />\n <circle\n cx=\"8\"\n cy=\"8\"\n r=\"1.25\"\n fill=\"currentColor\" />\n <circle\n cx=\"8\"\n cy=\"13\"\n r=\"1.25\"\n fill=\"currentColor\" />\n </svg>\n </button>\n @if (open()) {\n <div\n class=\"layout-menu__backdrop\"\n (click)=\"open.set(false)\"></div>\n <div class=\"layout-menu__dropdown\">\n <button\n class=\"layout-menu__item\"\n (click)=\"toggle('sidebar')\">\n <span\n class=\"layout-menu__check\"\n [class.layout-menu__check--on]=\"layout.sidebarVisible()\">\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\">\n <path\n d=\"M2 6l3 3 5-5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span class=\"layout-menu__label\">Show sidebar</span>\n <span class=\"layout-menu__kbd\"><kbd>\u2325</kbd><kbd>S</kbd></span>\n </button>\n <button\n class=\"layout-menu__item\"\n (click)=\"toggle('toolbar')\">\n <span\n class=\"layout-menu__check\"\n [class.layout-menu__check--on]=\"layout.toolbarVisible()\">\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\">\n <path\n d=\"M2 6l3 3 5-5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span class=\"layout-menu__label\">Show variant rail</span>\n <span class=\"layout-menu__kbd\"><kbd>\u2325</kbd><kbd>T</kbd></span>\n </button>\n <button\n class=\"layout-menu__item\"\n (click)=\"toggle('addons')\">\n <span\n class=\"layout-menu__check\"\n [class.layout-menu__check--on]=\"layout.addonsVisible()\">\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\">\n <path\n d=\"M2 6l3 3 5-5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span class=\"layout-menu__label\">Show addons panel</span>\n <span class=\"layout-menu__kbd\"><kbd>\u2325</kbd><kbd>A</kbd></span>\n </button>\n </div>\n }\n</div>\n", styles: [".layout-menu {\n position: relative;\n}\n\n.layout-menu__trigger {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 30px;\n height: 30px;\n color: var(--prism-text-muted);\n cursor: pointer;\n background: transparent;\n border: 1px solid var(--prism-border);\n border-radius: var(--prism-radius-sm);\n transition:\n border-color 0.15s,\n color 0.15s,\n background 0.15s;\n}\n\n.layout-menu__trigger:hover,\n.layout-menu__trigger--active {\n color: var(--prism-text);\n background: var(--prism-bg-surface);\n border-color: var(--prism-border-strong);\n}\n\n.layout-menu__backdrop {\n position: fixed;\n inset: 0;\n z-index: 40;\n}\n\n.layout-menu__dropdown {\n position: absolute;\n top: calc(100% + 6px);\n right: 0;\n z-index: 50;\n min-width: 240px;\n padding: 4px;\n background: var(--prism-bg-elevated);\n border: 1px solid var(--prism-border-strong);\n border-radius: var(--prism-radius);\n box-shadow: 0 8px 32px rgb(0 0 0 / 40%);\n}\n\n.layout-menu__item {\n display: flex;\n gap: 8px;\n align-items: center;\n width: 100%;\n padding: 7px 10px;\n font-family: var(--prism-font-sans);\n font-size: 13px;\n color: var(--prism-text);\n text-align: left;\n cursor: pointer;\n background: none;\n border: none;\n border-radius: var(--prism-radius-sm);\n transition: background 0.1s;\n}\n\n.layout-menu__item:hover {\n background: var(--prism-bg-surface);\n}\n\n.layout-menu__check {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n color: transparent;\n border: 1px solid var(--prism-border-strong);\n border-radius: 3px;\n}\n\n.layout-menu__check--on {\n color: white;\n background: var(--prism-primary);\n border-color: var(--prism-primary);\n}\n\n.layout-menu__icon {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n color: var(--prism-text-muted);\n}\n\n.layout-menu__label {\n flex: 1;\n}\n\n.layout-menu__kbd {\n display: flex;\n gap: 2px;\n opacity: 0.6;\n}\n\nkbd {\n padding: 1px 4px;\n font-family: var(--prism-font-sans);\n font-size: 11px;\n color: var(--prism-text-muted);\n background: var(--prism-bg-surface);\n border: 1px solid var(--prism-border-strong);\n border-radius: 3px;\n}\n\n.layout-menu__divider {\n height: 1px;\n margin: 4px 0;\n background: var(--prism-border);\n}\n"] }]
|
|
184
110
|
}], null, null); })();
|
|
185
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismLayoutMenuComponent, { className: "PrismLayoutMenuComponent", filePath: "app/layout-menu/prism-layout-menu.component.ts", lineNumber:
|
|
111
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismLayoutMenuComponent, { className: "PrismLayoutMenuComponent", filePath: "app/layout-menu/prism-layout-menu.component.ts", lineNumber: 10 }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overview-visibility.d.ts","sourceRoot":"","sources":["../../../src/app/overview/overview-visibility.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAErE;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,SAAS,EAAE,gBAAgB,GAAG,OAAO,
|
|
1
|
+
{"version":3,"file":"overview-visibility.d.ts","sourceRoot":"","sources":["../../../src/app/overview/overview-visibility.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAErE;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,SAAS,EAAE,gBAAgB,GAAG,OAAO,CAKlE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"prism-overview-cell.component.d.ts","sourceRoot":"","sources":["../../../src/app/overview/prism-overview-cell.component.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"prism-overview-cell.component.d.ts","sourceRoot":"","sources":["../../../src/app/overview/prism-overview-cell.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;;AAOrE;;;;;;;;;;GAUG;AACH,qBAYa,0BAA0B;IACnC,QAAQ,CAAC,SAAS,wDAAsC;IACxD,QAAQ,CAAC,KAAK,8CAA4B;IAE1C,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IAEH,yEAAyE;IACzE,SAAS,CAAC,QAAQ,CAAC,EAAE,yFAAwF;IAE7G,SAAS,CAAC,QAAQ,CAAC,OAAO,yCAUvB;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,0CAKtB;;IAoBH,OAAO,CAAC,KAAK;yCAlDJ,0BAA0B;2CAA1B,0BAA0B;CA0FtC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, computed, DestroyRef, effect, inject, Injector, input, untracked, viewChild, ViewContainerRef
|
|
1
|
+
import { ChangeDetectionStrategy, Component, computed, DestroyRef, effect, inject, Injector, input, untracked, viewChild, ViewContainerRef } from '@angular/core';
|
|
2
2
|
import { resolveVariantBg } from '../../shared/variant-bg.js';
|
|
3
3
|
import { CANVAS_BG_STYLES } from '../canvas/canvas-bg.styles.js';
|
|
4
4
|
import { buildKnownInputs } from '../renderer/known-inputs.js';
|
|
@@ -42,7 +42,7 @@ export class PrismOverviewCellComponent {
|
|
|
42
42
|
isWide = computed(() => {
|
|
43
43
|
const config = this.component().meta.showcaseConfig;
|
|
44
44
|
const variant = config.variants?.[this.index()];
|
|
45
|
-
return (
|
|
45
|
+
return (variant?.canvasLayout ?? config.canvasLayout ?? 'fit') === 'stretch';
|
|
46
46
|
}, /* @ts-ignore */
|
|
47
47
|
...(ngDevMode ? [{ debugName: "isWide" }] : /* istanbul ignore next */ []));
|
|
48
48
|
constructor() {
|
|
@@ -69,14 +69,12 @@ export class PrismOverviewCellComponent {
|
|
|
69
69
|
const { values, activeContent } = computeVariantState(component, index);
|
|
70
70
|
const injector = Injector.create({
|
|
71
71
|
providers: component.meta.showcaseConfig.providers ?? [],
|
|
72
|
-
parent: this.injector
|
|
72
|
+
parent: this.injector
|
|
73
73
|
});
|
|
74
|
-
const projectableNodes = activeContent
|
|
75
|
-
? parseContentToNodes(activeContent)
|
|
76
|
-
: undefined;
|
|
74
|
+
const projectableNodes = activeContent ? parseContentToNodes(activeContent) : undefined;
|
|
77
75
|
const ref = this.outlet().createComponent(component.type, {
|
|
78
76
|
injector,
|
|
79
|
-
projectableNodes
|
|
77
|
+
projectableNodes
|
|
80
78
|
});
|
|
81
79
|
const knownInputs = buildKnownInputs(component);
|
|
82
80
|
for (const [key, value] of Object.entries(values)) {
|
|
@@ -117,20 +115,15 @@ export class PrismOverviewCellComponent {
|
|
|
117
115
|
i0.ɵɵattribute("data-bg", ctx.bg());
|
|
118
116
|
i0.ɵɵadvance(5);
|
|
119
117
|
i0.ɵɵtextInterpolate(ctx.caption());
|
|
120
|
-
} }, styles: ["[_nghost-%COMP%] {\n
|
|
118
|
+
} }, styles: ["[_nghost-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: var(--%NS%sp-2);\n min-width: 0;\n}\n\n\n\n[data-wide][_nghost-%COMP%] {\n grid-column: 1 / -1;\n}\n\n.cell__stage[_ngcontent-%COMP%] {\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: center;\n min-height: 120px;\n padding: var(--%NS%sp-5);\n overflow: hidden;\n outline: 1px solid var(--%NS%prism-stage-edge);\n outline-offset: -1px;\n background-color: var(--%NS%prism-stage);\n border-radius: var(--%NS%radius-sm);\n}\n\n.cell__mount[_ngcontent-%COMP%] {\n display: inline-block;\n max-width: 100%;\n}\n\n[data-wide][_nghost-%COMP%] .cell__mount[_ngcontent-%COMP%] {\n display: block;\n width: 100%;\n}\n\n\n\n\n\n.cell__caption[_ngcontent-%COMP%] {\n overflow: hidden;\n text-overflow: ellipsis;\n font-family: var(--%NS%prism-font-mono);\n font-size: var(--%NS%fs-xs);\n color: var(--%NS%prism-text-muted);\n white-space: nowrap;\n}", "[data-bg=\"dots\"][_ngcontent-%COMP%] {\n background-image: radial-gradient(circle, var(--%NS%prism-dot) 1px, transparent 1px);\n background-size: 20px 20px;\n }\n\n [data-bg=\"plain\"][_ngcontent-%COMP%] {\n background-image: none;\n }\n\n \n\n\n\n\n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n [data-bg=\"light\"][_ngcontent-%COMP%] {\n background-color: var(--%NS%prism-void-light, #f7f5fc);\n background-image: none;\n --%NS%prism-measure: #004d8a;\n }\n [data-bg=\"dark\"][_ngcontent-%COMP%] {\n background-color: var(--%NS%prism-void-dark, #07050f);\n background-image: none;\n --%NS%prism-measure: #41bcff;\n }\n\n \n\n\n\n\n\n [data-bg=\"checker\"][_ngcontent-%COMP%], \n [data-bg=\"transparent\"][_ngcontent-%COMP%] {\n background-image:\n linear-gradient(45deg, var(--%NS%prism-border) 25%, transparent 25%),\n linear-gradient(-45deg, var(--%NS%prism-border) 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, var(--%NS%prism-border) 75%),\n linear-gradient(-45deg, transparent 75%, var(--%NS%prism-border) 75%);\n background-size: 16px 16px;\n background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n }"] });
|
|
121
119
|
}
|
|
122
120
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismOverviewCellComponent, [{
|
|
123
121
|
type: Component,
|
|
124
122
|
args: [{ selector: 'prism-overview-cell', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
125
123
|
role: 'listitem',
|
|
126
|
-
'[attr.data-wide]': "isWide() ? '' : null"
|
|
127
|
-
}, template:
|
|
128
|
-
<div class="cell__stage" [attr.data-bg]="bg()">
|
|
129
|
-
<div class="cell__mount"><ng-container #outlet /></div>
|
|
130
|
-
</div>
|
|
131
|
-
<span class="cell__caption">{{ caption() }}</span>
|
|
132
|
-
`, styles: ["\n :host {\n display: flex;\n flex-direction: column;\n gap: var(--sp-2);\n min-width: 0;\n }\n /* A stretch variant has no intrinsic width to compare against its\n neighbours, so it takes the row rather than a column. */\n :host([data-wide]) {\n grid-column: 1 / -1;\n }\n\n .cell__stage {\n flex: 1;\n min-height: 120px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--sp-5);\n border-radius: var(--radius-sm);\n background-color: var(--prism-stage);\n outline: 1px solid var(--prism-stage-edge);\n outline-offset: -1px;\n overflow: hidden;\n }\n\n .cell__mount {\n display: inline-block;\n max-width: 100%;\n }\n :host([data-wide]) .cell__mount {\n display: block;\n width: 100%;\n }\n\n /* The caption sits below the frame, not on it. Inside, it would have to\n invert against every background the cell can paint \u2014 and gaining a new\n contrast rule per CanvasBg value is exactly the cost the sheet exists\n to avoid. */\n .cell__caption {\n font-family: var(--prism-font-mono);\n font-size: var(--fs-xs);\n color: var(--prism-text-muted);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n ", "\n [data-bg=\"dots\"] {\n background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n background-size: 20px 20px;\n }\n\n [data-bg=\"plain\"] {\n background-image: none;\n }\n\n /* Flat, not dotted. \"light\" and \"dark\" name a surface a component was\n designed against \u2014 and they are the two backgrounds whose colour is\n absolute rather than a theme token, which is what makes them the values\n to declare for a screenshot baseline. \"dots\" already exists for anyone\n who wants the grid. */\n [data-bg=\"light\"] {\n background-color: var(--prism-void-light, #f7f5fc);\n background-image: none;\n }\n [data-bg=\"dark\"] {\n background-color: var(--prism-void-dark, #07050f);\n background-image: none;\n }\n\n /* \"transparent\" shares the checkerboard on purpose. The two say the same\n thing in the two media the canvas has: while browsing, the checkerboard\n is already the UI's word for \"no surface here\"; in a capture it becomes\n literal transparency. A stage that were really see-through in the app\n would just show the shell through the canvas, which means nothing. The\n split between the two lives entirely in CAPTURE_STYLES. */\n [data-bg=\"checker\"],\n [data-bg=\"transparent\"] {\n background-image:\n linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n background-size: 16px 16px;\n background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n }\n"] }]
|
|
124
|
+
'[attr.data-wide]': "isWide() ? '' : null"
|
|
125
|
+
}, template: "<div\n class=\"cell__stage\"\n [attr.data-bg]=\"bg()\">\n <div class=\"cell__mount\"><ng-container #outlet /></div>\n</div>\n<span class=\"cell__caption\">{{ caption() }}</span>\n", styles: [":host {\n display: flex;\n flex-direction: column;\n gap: var(--sp-2);\n min-width: 0;\n}\n\n/* A stretch variant has no intrinsic width to compare against its\n neighbours, so it takes the row rather than a column. */\n:host([data-wide]) {\n grid-column: 1 / -1;\n}\n\n.cell__stage {\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: center;\n min-height: 120px;\n padding: var(--sp-5);\n overflow: hidden;\n outline: 1px solid var(--prism-stage-edge);\n outline-offset: -1px;\n background-color: var(--prism-stage);\n border-radius: var(--radius-sm);\n}\n\n.cell__mount {\n display: inline-block;\n max-width: 100%;\n}\n\n:host([data-wide]) .cell__mount {\n display: block;\n width: 100%;\n}\n\n/* The caption sits below the frame, not on it. Inside, it would have to\n invert against every background the cell can paint \u2014 and gaining a new\n contrast rule per CanvasBg value is exactly the cost the sheet exists\n to avoid. */\n.cell__caption {\n overflow: hidden;\n text-overflow: ellipsis;\n font-family: var(--prism-font-mono);\n font-size: var(--fs-xs);\n color: var(--prism-text-muted);\n white-space: nowrap;\n}\n", "\n [data-bg=\"dots\"] {\n background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n background-size: 20px 20px;\n }\n\n [data-bg=\"plain\"] {\n background-image: none;\n }\n\n /* Flat, not dotted. \"light\" and \"dark\" name a surface a component was\n designed against \u2014 and they are the two backgrounds whose colour is\n absolute rather than a theme token, which is what makes them the values\n to declare for a screenshot baseline. \"dots\" already exists for anyone\n who wants the grid. */\n /* These two also re-point --prism-measure, and that is not decoration.\n Every other canvas overlay is drawn in a theme colour over a theme\n surface, so the two move together. These two backgrounds are absolute:\n \"light\" stays near-white while the app runs the dark theme, and \"dark\"\n stays near-black while it runs the light one. The measurement colour\n picked for one theme is then sitting on the other theme's ground \u2014\n measured, the dark theme's blue reaches 1.8:1 on the light background,\n which is a viewport overlay you cannot see. Pinning the colour to the\n ground rather than to the theme is what makes \"always visible\" true\n instead of true-in-the-common-case.\n\n Literal values because this file is theme-independent by construction \u2014\n it is the one place that already hard-codes the two absolute grounds\n below, for the same reason. Keep them in step with --prism-measure in\n prism-default-theme.ts; semantic-colours.spec.ts fails if they drift. */\n [data-bg=\"light\"] {\n background-color: var(--prism-void-light, #f7f5fc);\n background-image: none;\n --prism-measure: #004d8a;\n }\n [data-bg=\"dark\"] {\n background-color: var(--prism-void-dark, #07050f);\n background-image: none;\n --prism-measure: #41bcff;\n }\n\n /* \"transparent\" shares the checkerboard on purpose. The two say the same\n thing in the two media the canvas has: while browsing, the checkerboard\n is already the UI's word for \"no surface here\"; in a capture it becomes\n literal transparency. A stage that were really see-through in the app\n would just show the shell through the canvas, which means nothing. The\n split between the two lives entirely in CAPTURE_STYLES. */\n [data-bg=\"checker\"],\n [data-bg=\"transparent\"] {\n background-image:\n linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n background-size: 16px 16px;\n background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n }\n"] }]
|
|
133
126
|
}], () => [], { component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], outlet: [{ type: i0.ViewChild, args: ['outlet', { ...{
|
|
134
|
-
read: ViewContainerRef
|
|
127
|
+
read: ViewContainerRef
|
|
135
128
|
}, isSignal: true }] }] }); })();
|
|
136
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismOverviewCellComponent, { className: "PrismOverviewCellComponent", filePath: "app/overview/prism-overview-cell.component.ts", lineNumber:
|
|
129
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismOverviewCellComponent, { className: "PrismOverviewCellComponent", filePath: "app/overview/prism-overview-cell.component.ts", lineNumber: 32 }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"prism-overview.component.d.ts","sourceRoot":"","sources":["../../../src/app/overview/prism-overview.component.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"prism-overview.component.d.ts","sourceRoot":"","sources":["../../../src/app/overview/prism-overview.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;;AAGrE;;;;;;GAMG;AACH,qBAQa,sBAAsB;IAC/B,iFAAiF;IACjF,QAAQ,CAAC,eAAe,+DAAwC;IAEhE,SAAS,CAAC,QAAQ,CAAC,QAAQ,8EAA8E;yCAJhG,sBAAsB;2CAAtB,sBAAsB;CAKlC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, computed, input
|
|
1
|
+
import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
|
|
2
2
|
import { PrismOverviewCellComponent } from './prism-overview-cell.component.js';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
function PrismOverviewComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
@@ -36,18 +36,10 @@ export class PrismOverviewComponent {
|
|
|
36
36
|
} if (rf & 2) {
|
|
37
37
|
let tmp_0_0;
|
|
38
38
|
i0.ɵɵconditional((tmp_0_0 = ctx.activeComponent()) ? 0 : -1, tmp_0_0);
|
|
39
|
-
} }, dependencies: [PrismOverviewCellComponent], styles: ["[_nghost-%COMP%] {
|
|
39
|
+
} }, dependencies: [PrismOverviewCellComponent], styles: ["[_nghost-%COMP%] {\n display: block;\n}\n\n.prism-overview[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n gap: var(--%NS%sp-4);\n align-content: start;\n padding: var(--%NS%sp-6);\n}"] });
|
|
40
40
|
}
|
|
41
41
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismOverviewComponent, [{
|
|
42
42
|
type: Component,
|
|
43
|
-
args: [{ selector: 'prism-overview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismOverviewCellComponent], template:
|
|
44
|
-
@if (activeComponent(); as component) {
|
|
45
|
-
<div class="prism-overview" role="list">
|
|
46
|
-
@for (_ of variants(); track $index) {
|
|
47
|
-
<prism-overview-cell [component]="component" [index]="$index" />
|
|
48
|
-
}
|
|
49
|
-
</div>
|
|
50
|
-
}
|
|
51
|
-
`, styles: ["\n :host { display: block; }\n\n .prism-overview {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n gap: var(--sp-4);\n padding: var(--sp-6);\n align-content: start;\n }\n "] }]
|
|
43
|
+
args: [{ selector: 'prism-overview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismOverviewCellComponent], template: "@if (activeComponent(); as component) {\n <div\n class=\"prism-overview\"\n role=\"list\">\n @for (_ of variants(); track $index) {\n <prism-overview-cell\n [component]=\"component\"\n [index]=\"$index\" />\n }\n </div>\n}\n", styles: [":host {\n display: block;\n}\n\n.prism-overview {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n gap: var(--sp-4);\n align-content: start;\n padding: var(--sp-6);\n}\n"] }]
|
|
52
44
|
}], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
|
|
53
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismOverviewComponent, { className: "PrismOverviewComponent", filePath: "app/overview/prism-overview.component.ts", lineNumber:
|
|
45
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismOverviewComponent, { className: "PrismOverviewComponent", filePath: "app/overview/prism-overview.component.ts", lineNumber: 20 }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"prism-page-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/page-renderer/prism-page-renderer.component.ts"],"names":[],"mappings":";AAIA,
|
|
1
|
+
{"version":3,"file":"prism-page-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/page-renderer/prism-page-renderer.component.ts"],"names":[],"mappings":";AAIA,qBAOa,0BAA0B;IACnC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAkC;IACtD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmC;IACxD,SAAS,CAAC,QAAQ,CAAC,IAAI,iFAAuB;;yCAHrC,0BAA0B;2CAA1B,0BAA0B;CAWtC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Component, effect, ElementRef, inject } from '@angular/core';
|
|
2
1
|
import { JsonPipe, NgComponentOutlet } from '@angular/common';
|
|
2
|
+
import { Component, effect, ElementRef, inject } from '@angular/core';
|
|
3
3
|
import { PrismNavigationService } from '../services/prism-navigation.service.js';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
function PrismPageRendererComponent_Conditional_0_Case_3_Template(rf, ctx) { if (rf & 1) {
|
|
@@ -54,23 +54,10 @@ export class PrismPageRendererComponent {
|
|
|
54
54
|
} if (rf & 2) {
|
|
55
55
|
let tmp_0_0;
|
|
56
56
|
i0.ɵɵconditional((tmp_0_0 = ctx.page()) ? 0 : -1, tmp_0_0);
|
|
57
|
-
} }, dependencies: [NgComponentOutlet, JsonPipe], styles: ["[_nghost-%COMP%] {
|
|
57
|
+
} }, dependencies: [NgComponentOutlet, JsonPipe], styles: ["[_nghost-%COMP%] {\n display: block;\n flex: 1;\n overflow-y: auto;\n}\n\n.prism-page-renderer__title[_ngcontent-%COMP%] {\n padding: 16px 20px;\n margin: 0;\n font-family: var(--%NS%prism-font-sans);\n font-size: 18px;\n font-weight: 600;\n color: var(--%NS%prism-text);\n letter-spacing: -0.01em;\n background: var(--%NS%prism-bg-surface);\n border-bottom: 1px solid var(--%NS%prism-border);\n border-left: 3px solid;\n border-image: linear-gradient(180deg, var(--%NS%prism-primary-from), var(--%NS%prism-primary-to)) 1;\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%] {\n padding: var(--%NS%sp-5) var(--%NS%sp-6);\n font-family: var(--%NS%prism-font-sans);\n font-size: var(--%NS%fs-lg);\n line-height: 1.6;\n color: var(--%NS%prism-text-2);\n}\n\n\n\n\n\n\n\n.prism-page-renderer__component[_ngcontent-%COMP%] :is(h1[_ngcontent-%COMP%], h2[_ngcontent-%COMP%], h3[_ngcontent-%COMP%], h4[_ngcontent-%COMP%], h5[_ngcontent-%COMP%], h6[_ngcontent-%COMP%]) {\n margin: var(--%NS%sp-6) 0 var(--%NS%sp-3);\n font-family: var(--%NS%prism-font-sans);\n font-weight: 600;\n line-height: 1.25;\n color: var(--%NS%prism-text);\n letter-spacing: -0.01em;\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%] [_ngcontent-%COMP%]:is(h1, h2, h3, h4, h5, h6):first-child {\n margin-top: 0;\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\n font-size: 24px;\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n font-size: 20px;\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n font-size: 17px;\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%] :is(h4[_ngcontent-%COMP%], h5[_ngcontent-%COMP%], h6[_ngcontent-%COMP%]) {\n font-size: var(--%NS%fs-xl);\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%] :is(p[_ngcontent-%COMP%], ul[_ngcontent-%COMP%], ol[_ngcontent-%COMP%]) {\n margin: 0 0 var(--%NS%sp-4);\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%] :is(strong[_ngcontent-%COMP%], b[_ngcontent-%COMP%]) {\n color: var(--%NS%prism-text);\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%] a[_ngcontent-%COMP%] {\n color: var(--%NS%prism-primary);\n}\n\n.prism-page-renderer__component[_ngcontent-%COMP%] :is(code[_ngcontent-%COMP%], pre[_ngcontent-%COMP%]) {\n font-family: var(--%NS%prism-font-mono);\n font-size: var(--%NS%fs-md);\n color: var(--%NS%prism-text);\n}\n\n.prism-page-renderer__json[_ngcontent-%COMP%] {\n padding: 24px;\n margin: 0;\n font-family: monospace;\n font-size: 12px;\n color: var(--%NS%prism-text-muted);\n white-space: pre-wrap;\n}"] });
|
|
58
58
|
}
|
|
59
59
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismPageRendererComponent, [{
|
|
60
60
|
type: Component,
|
|
61
|
-
args: [{ selector: 'prism-page-renderer', standalone: true, imports: [JsonPipe, NgComponentOutlet], template:
|
|
62
|
-
@if (page(); as p) {
|
|
63
|
-
<div class="prism-page-renderer">
|
|
64
|
-
<h2 class="prism-page-renderer__title">{{ p.title }}</h2>
|
|
65
|
-
@switch (p.type) { @case ('custom') {
|
|
66
|
-
<pre class="prism-page-renderer__json">{{ $any(p).data | json }}</pre>
|
|
67
|
-
} @case ('component') {
|
|
68
|
-
<div class="prism-page-renderer__component">
|
|
69
|
-
<ng-container *ngComponentOutlet="$any(p).component" />
|
|
70
|
-
</div>
|
|
71
|
-
} }
|
|
72
|
-
</div>
|
|
73
|
-
}
|
|
74
|
-
`, styles: ["\n :host { display: block; flex: 1; overflow-y: auto; }\n .prism-page-renderer__title {\n margin: 0;\n padding: 16px 20px;\n font-size: 18px;\n font-weight: 600;\n letter-spacing: -0.01em;\n color: var(--prism-text);\n font-family: var(--prism-font-sans);\n border-bottom: 1px solid var(--prism-border);\n border-left: 3px solid;\n border-image: linear-gradient(180deg, var(--prism-primary-from), var(--prism-primary-to)) 1;\n background: var(--prism-bg-surface);\n }\n .prism-page-renderer__component {\n padding: var(--sp-5) var(--sp-6);\n color: var(--prism-text-2);\n font-family: var(--prism-font-sans);\n font-size: var(--fs-lg);\n line-height: 1.6;\n }\n\n /* Projected page content arrives through ngComponentOutlet and carries no\n theme of its own. Without this scope a consuming app's plain <h2> renders\n in the browser default colour on the styleguide's dark shell \u2014 measured at\n rgb(26,26,46) on a dark ground, which is darker than the body text beneath\n it and inverts the hierarchy. These are deliberately element selectors:\n the content is authored by the consumer and carries no classes we know. */\n .prism-page-renderer__component :is(h1, h2, h3, h4, h5, h6) {\n color: var(--prism-text);\n font-family: var(--prism-font-sans);\n font-weight: 600;\n letter-spacing: -0.01em;\n line-height: 1.25;\n margin: var(--sp-6) 0 var(--sp-3);\n }\n .prism-page-renderer__component :is(h1, h2, h3, h4, h5, h6):first-child {\n margin-top: 0;\n }\n .prism-page-renderer__component h1 { font-size: 24px; }\n .prism-page-renderer__component h2 { font-size: 20px; }\n .prism-page-renderer__component h3 { font-size: 17px; }\n .prism-page-renderer__component :is(h4, h5, h6) { font-size: var(--fs-xl); }\n\n .prism-page-renderer__component :is(p, ul, ol) { margin: 0 0 var(--sp-4); }\n .prism-page-renderer__component :is(strong, b) { color: var(--prism-text); }\n .prism-page-renderer__component a { color: var(--prism-primary); }\n .prism-page-renderer__component :is(code, pre) {\n font-family: var(--prism-font-mono);\n font-size: var(--fs-md);\n color: var(--prism-text);\n }\n .prism-page-renderer__json {\n margin: 0;\n padding: 24px;\n font-size: 12px;\n font-family: monospace;\n color: var(--prism-text-muted);\n white-space: pre-wrap;\n }\n "] }]
|
|
61
|
+
args: [{ selector: 'prism-page-renderer', standalone: true, imports: [JsonPipe, NgComponentOutlet], template: "@if (page(); as p) {\n <div class=\"prism-page-renderer\">\n <h2 class=\"prism-page-renderer__title\">{{ p.title }}</h2>\n @switch (p.type) {\n @case ('custom') {\n <pre class=\"prism-page-renderer__json\">{{ $any(p).data | json }}</pre>\n }\n @case ('component') {\n <div class=\"prism-page-renderer__component\">\n <ng-container *ngComponentOutlet=\"$any(p).component\" />\n </div>\n }\n }\n </div>\n}\n", styles: [":host {\n display: block;\n flex: 1;\n overflow-y: auto;\n}\n\n.prism-page-renderer__title {\n padding: 16px 20px;\n margin: 0;\n font-family: var(--prism-font-sans);\n font-size: 18px;\n font-weight: 600;\n color: var(--prism-text);\n letter-spacing: -0.01em;\n background: var(--prism-bg-surface);\n border-bottom: 1px solid var(--prism-border);\n border-left: 3px solid;\n border-image: linear-gradient(180deg, var(--prism-primary-from), var(--prism-primary-to)) 1;\n}\n\n.prism-page-renderer__component {\n padding: var(--sp-5) var(--sp-6);\n font-family: var(--prism-font-sans);\n font-size: var(--fs-lg);\n line-height: 1.6;\n color: var(--prism-text-2);\n}\n\n/* Projected page content arrives through ngComponentOutlet and carries no\n theme of its own. Without this scope a consuming app's plain <h2> renders\n in the browser default colour on the styleguide's dark shell \u2014 measured at\n rgb(26,26,46) on a dark ground, which is darker than the body text beneath\n it and inverts the hierarchy. These are deliberately element selectors:\n the content is authored by the consumer and carries no classes we know. */\n.prism-page-renderer__component :is(h1, h2, h3, h4, h5, h6) {\n margin: var(--sp-6) 0 var(--sp-3);\n font-family: var(--prism-font-sans);\n font-weight: 600;\n line-height: 1.25;\n color: var(--prism-text);\n letter-spacing: -0.01em;\n}\n\n.prism-page-renderer__component :is(h1, h2, h3, h4, h5, h6):first-child {\n margin-top: 0;\n}\n\n.prism-page-renderer__component h1 {\n font-size: 24px;\n}\n\n.prism-page-renderer__component h2 {\n font-size: 20px;\n}\n\n.prism-page-renderer__component h3 {\n font-size: 17px;\n}\n\n.prism-page-renderer__component :is(h4, h5, h6) {\n font-size: var(--fs-xl);\n}\n\n.prism-page-renderer__component :is(p, ul, ol) {\n margin: 0 0 var(--sp-4);\n}\n\n.prism-page-renderer__component :is(strong, b) {\n color: var(--prism-text);\n}\n\n.prism-page-renderer__component a {\n color: var(--prism-primary);\n}\n\n.prism-page-renderer__component :is(code, pre) {\n font-family: var(--prism-font-mono);\n font-size: var(--fs-md);\n color: var(--prism-text);\n}\n\n.prism-page-renderer__json {\n padding: 24px;\n margin: 0;\n font-family: monospace;\n font-size: 12px;\n color: var(--prism-text-muted);\n white-space: pre-wrap;\n}\n"] }]
|
|
75
62
|
}], () => [], null); })();
|
|
76
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPageRendererComponent, { className: "PrismPageRendererComponent", filePath: "app/page-renderer/prism-page-renderer.component.ts", lineNumber:
|
|
63
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPageRendererComponent, { className: "PrismPageRendererComponent", filePath: "app/page-renderer/prism-page-renderer.component.ts", lineNumber: 12 }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"a11y-audit.service.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-audit.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,UAAU,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;;AAEvE,wBAAgB,cAAc,CAAC,OAAO,EAAE,UAAU,GAAG,eAAe,CAkBnE;
|
|
1
|
+
{"version":3,"file":"a11y-audit.service.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-audit.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,UAAU,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;;AAEvE,wBAAgB,cAAc,CAAC,OAAO,EAAE,UAAU,GAAG,eAAe,CAkBnE;AAiBD,wBAAsB,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,cAAc,GAAG,OAAO,CAAC,UAAU,CAAC,CAcjG;AAED,qBACa,gBAAgB;IACzB,QAAQ,CAAC,OAAO,4DAAmC;IACnD,QAAQ,CAAC,OAAO,kDAAiB;IACjC,QAAQ,CAAC,KAAK,wDAA+B;IAE7C,QAAQ,CAAC,WAAW,yDAIjB;IAEH,OAAO,CAAC,KAAK,CAA8C;IAC3D,OAAO,CAAC,SAAS,CAAS;;IAS1B,aAAa,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,cAAc,EAAE,UAAU,SAAM,GAAG,IAAI;IAsBhF,KAAK,IAAI,IAAI;yCA3CJ,gBAAgB;;CAoD5B"}
|
|
@@ -15,11 +15,23 @@ export function calculateScore(results) {
|
|
|
15
15
|
moderate,
|
|
16
16
|
minor,
|
|
17
17
|
passes: results.passes.length,
|
|
18
|
-
incomplete: results.incomplete.length
|
|
18
|
+
incomplete: results.incomplete.length
|
|
19
19
|
};
|
|
20
20
|
}
|
|
21
|
+
/**
|
|
22
|
+
* axe-core is a dependency of `@ng-prism/core` and loaded lazily, so a failure
|
|
23
|
+
* here means the chunk could not be fetched — not that anything is missing.
|
|
24
|
+
*/
|
|
25
|
+
async function loadAxe() {
|
|
26
|
+
try {
|
|
27
|
+
return await import('axe-core');
|
|
28
|
+
}
|
|
29
|
+
catch (cause) {
|
|
30
|
+
throw new Error('Could not load axe-core, so the accessibility audit is unavailable. It ships with @ng-prism/core — check that the install is intact and the chunk is reachable.', { cause });
|
|
31
|
+
}
|
|
32
|
+
}
|
|
21
33
|
export async function runCoreAudit(element, config) {
|
|
22
|
-
const axe = await
|
|
34
|
+
const axe = await loadAxe();
|
|
23
35
|
const options = {};
|
|
24
36
|
if (config?.rules) {
|
|
25
37
|
const keys = Object.keys(config.rules);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"a11y-core.plugin.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-core.plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAEvE,eAAO,MAAM,eAAe,EAAE,
|
|
1
|
+
{"version":3,"file":"a11y-core.plugin.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-core.plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAEvE,eAAO,MAAM,eAAe,EAAE,eAQ7B,CAAC"}
|
|
@@ -5,5 +5,5 @@ export const A11Y_CORE_PANEL = {
|
|
|
5
5
|
position: 'bottom',
|
|
6
6
|
placement: 'addon',
|
|
7
7
|
loadComponent: () => import('./a11y-panel.component.js').then((m) => m.A11yPanelComponent),
|
|
8
|
-
loadOverlayComponent: () => import('./a11y-overlay-host.component.js').then((m) => m.A11yOverlayHostComponent)
|
|
8
|
+
loadOverlayComponent: () => import('./a11y-overlay-host.component.js').then((m) => m.A11yOverlayHostComponent)
|
|
9
9
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"a11y-dom-utils.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-dom-utils.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"a11y-dom-utils.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-dom-utils.ts"],"names":[],"mappings":"AAwDA,wBAAgB,eAAe,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAcxD;AAED,wBAAgB,OAAO,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAEhD;AAED,MAAM,WAAW,cAAc;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,GAAG,cAAc,CAmChH;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,CA4ChF;AAED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAIlD;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,MAAM,EAAE,CAS/E"}
|
|
@@ -30,7 +30,7 @@ const IMPLICIT_ROLES = {
|
|
|
30
30
|
TBODY: 'rowgroup',
|
|
31
31
|
DETAILS: 'group',
|
|
32
32
|
ARTICLE: 'article',
|
|
33
|
-
SECTION: 'region'
|
|
33
|
+
SECTION: 'region'
|
|
34
34
|
};
|
|
35
35
|
const INPUT_TYPE_ROLES = {
|
|
36
36
|
checkbox: 'checkbox',
|
|
@@ -41,10 +41,15 @@ const INPUT_TYPE_ROLES = {
|
|
|
41
41
|
reset: 'button',
|
|
42
42
|
button: 'button',
|
|
43
43
|
image: 'button',
|
|
44
|
-
search: 'searchbox'
|
|
44
|
+
search: 'searchbox'
|
|
45
45
|
};
|
|
46
46
|
const HEADING_LEVELS = {
|
|
47
|
-
H1: 1,
|
|
47
|
+
H1: 1,
|
|
48
|
+
H2: 2,
|
|
49
|
+
H3: 3,
|
|
50
|
+
H4: 4,
|
|
51
|
+
H5: 5,
|
|
52
|
+
H6: 6
|
|
48
53
|
};
|
|
49
54
|
export function getImplicitRole(element) {
|
|
50
55
|
const tag = element.tagName.toUpperCase();
|
|
@@ -64,9 +69,7 @@ export function computeAccessibleName(element, getById) {
|
|
|
64
69
|
const labelledBy = element.getAttribute('aria-labelledby');
|
|
65
70
|
if (labelledBy && getById) {
|
|
66
71
|
const parts = labelledBy.trim().split(/\s+/);
|
|
67
|
-
const names = parts
|
|
68
|
-
.map((id) => getById(id)?.textContent?.trim() ?? '')
|
|
69
|
-
.filter(Boolean);
|
|
72
|
+
const names = parts.map((id) => getById(id)?.textContent?.trim() ?? '').filter(Boolean);
|
|
70
73
|
if (names.length)
|
|
71
74
|
return { name: names.join(' '), source: 'aria-labelledby' };
|
|
72
75
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"a11y-header-badge.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-header-badge.component.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"a11y-header-badge.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-header-badge.component.ts"],"names":[],"mappings":";AAOA,KAAK,OAAO,GAAG,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAC;AAExC,qBAOa,wBAAwB;IACjC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA2C;IACpE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAE9D,SAAS,CAAC,QAAQ,CAAC,IAAI;;;;cAqBpB;IAEH,OAAO,CAAC,cAAc;yCA3Bb,wBAAwB;2CAAxB,wBAAwB;CAmCpC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, computed, inject
|
|
2
|
-
import { PRISM_CONFIG, PRISM_MANIFEST } from '../../tokens/prism-tokens.js';
|
|
1
|
+
import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
|
|
3
2
|
import { PrismMetricBadgeComponent } from '../../shared/prism-metric-badge.component.js';
|
|
3
|
+
import { PRISM_CONFIG, PRISM_MANIFEST } from '../../tokens/prism-tokens.js';
|
|
4
4
|
import { resolveA11yThresholds } from './a11y-thresholds.js';
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
6
|
function A11yHeaderBadgeComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
@@ -19,7 +19,7 @@ export class A11yHeaderBadgeComponent {
|
|
|
19
19
|
const score = meta.total.score;
|
|
20
20
|
const thresholds = resolveA11yThresholds({
|
|
21
21
|
...meta.thresholds,
|
|
22
|
-
...this.config.a11y?.thresholds
|
|
22
|
+
...this.config.a11y?.thresholds
|
|
23
23
|
});
|
|
24
24
|
const variant = this.computeVariant(score, meta.total, thresholds);
|
|
25
25
|
return {
|
|
@@ -28,7 +28,7 @@ export class A11yHeaderBadgeComponent {
|
|
|
28
28
|
title: `Library A11y: ${score}% (target ${thresholds.score}%)\n` +
|
|
29
29
|
`${meta.total.auditedComponents} components · ${meta.total.auditedVariants} variants\n` +
|
|
30
30
|
`Violations: ${meta.total.critical} critical · ${meta.total.serious} serious · ` +
|
|
31
|
-
`${meta.total.moderate} moderate · ${meta.total.minor} minor
|
|
31
|
+
`${meta.total.moderate} moderate · ${meta.total.minor} minor`
|
|
32
32
|
};
|
|
33
33
|
}, /* @ts-ignore */
|
|
34
34
|
...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
@@ -55,22 +55,6 @@ export class A11yHeaderBadgeComponent {
|
|
|
55
55
|
}
|
|
56
56
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yHeaderBadgeComponent, [{
|
|
57
57
|
type: Component,
|
|
58
|
-
args: [{
|
|
59
|
-
selector: 'prism-a11y-header-badge',
|
|
60
|
-
standalone: true,
|
|
61
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
62
|
-
imports: [PrismMetricBadgeComponent],
|
|
63
|
-
template: `
|
|
64
|
-
@if (data(); as d) {
|
|
65
|
-
<prism-metric-badge
|
|
66
|
-
icon="accessibility"
|
|
67
|
-
label="Library accessibility score"
|
|
68
|
-
[value]="d.score + '%'"
|
|
69
|
-
[variant]="d.variant"
|
|
70
|
-
[title]="d.title"
|
|
71
|
-
/>
|
|
72
|
-
}
|
|
73
|
-
`,
|
|
74
|
-
}]
|
|
58
|
+
args: [{ selector: 'prism-a11y-header-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismMetricBadgeComponent], template: "@if (data(); as d) {\n <prism-metric-badge\n icon=\"accessibility\"\n label=\"Library accessibility score\"\n [value]=\"d.score + '%'\"\n [variant]=\"d.variant\"\n [title]=\"d.title\" />\n}\n" }]
|
|
75
59
|
}], null, null); })();
|
|
76
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yHeaderBadgeComponent, { className: "A11yHeaderBadgeComponent", filePath: "app/panels/a11y/a11y-header-badge.component.ts", lineNumber:
|
|
60
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yHeaderBadgeComponent, { className: "A11yHeaderBadgeComponent", filePath: "app/panels/a11y/a11y-header-badge.component.ts", lineNumber: 17 }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"a11y-keyboard-overlay.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-keyboard-overlay.component.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"a11y-keyboard-overlay.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-keyboard-overlay.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;;AAEtE,MAAM,WAAW,aAAa;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,qBAOa,4BAA4B;IACrC,SAAS,CAAC,QAAQ,CAAC,UAAU,wBAAiC;IAC9D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA+B;IAC/D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAmC;IAE9D,SAAS,CAAC,QAAQ,CAAC,MAAM,0DAA+B;IAExD,OAAO,CAAC,KAAK,CAAuB;;IAuBpC,OAAO,CAAC,aAAa;yCA/BZ,4BAA4B;2CAA5B,4BAA4B;CA2DxC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, signal
|
|
1
|
+
import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, signal } from '@angular/core';
|
|
2
|
+
import { PrismRendererService } from '../../services/prism-renderer.service.js';
|
|
2
3
|
import { A11yKeyboardService } from './a11y-keyboard.service.js';
|
|
3
4
|
import { A11yPanelStateService } from './a11y-panel-state.service.js';
|
|
4
|
-
import { PrismRendererService } from '../../services/prism-renderer.service.js';
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
6
|
const _forTrack0 = ($index, $item) => $item.index;
|
|
7
7
|
function A11yKeyboardOverlayComponent_Conditional_0_For_1_Template(rf, ctx) { if (rf & 1) {
|
|
@@ -68,7 +68,7 @@ export class A11yKeyboardOverlayComponent {
|
|
|
68
68
|
x: elRect.left - canvasRect.left + scrollLeft,
|
|
69
69
|
y: elRect.top - canvasRect.top + scrollTop,
|
|
70
70
|
width: elRect.width,
|
|
71
|
-
height: elRect.height
|
|
71
|
+
height: elRect.height
|
|
72
72
|
};
|
|
73
73
|
});
|
|
74
74
|
this.badges.set(positions);
|
|
@@ -78,29 +78,10 @@ export class A11yKeyboardOverlayComponent {
|
|
|
78
78
|
i0.ɵɵconditionalCreate(0, A11yKeyboardOverlayComponent_Conditional_0_Template, 2, 0);
|
|
79
79
|
} if (rf & 2) {
|
|
80
80
|
i0.ɵɵconditional(ctx.panelState.activeTab() === "keyboard" ? 0 : -1);
|
|
81
|
-
} }, styles: ["[_nghost-%COMP%] {\n
|
|
81
|
+
} }, styles: ["[_nghost-%COMP%] {\n position: absolute;\n inset: 0;\n z-index: 100;\n overflow: hidden;\n pointer-events: none;\n}\n\n.prism-a11y-kbd-ov__highlight[_ngcontent-%COMP%] {\n position: absolute;\n pointer-events: none;\n background: rgb(129 140 248 / 6%);\n border: 2px solid rgb(129 140 248 / 50%);\n border-radius: 4px;\n box-shadow: 0 0 0 4px rgb(129 140 248 / 8%);\n}\n\n.prism-a11y-kbd-ov__badge[_ngcontent-%COMP%] {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n font-family: var(--%NS%prism-font-sans, system-ui, sans-serif);\n font-size: 10px;\n font-weight: 700;\n color: white;\n pointer-events: auto;\n cursor: default;\n background: var(--%NS%prism-primary);\n border-radius: 50%;\n box-shadow:\n 0 0 0 2px white,\n 0 2px 6px rgb(0 0 0 / 30%);\n}"] });
|
|
82
82
|
}
|
|
83
83
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yKeyboardOverlayComponent, [{
|
|
84
84
|
type: Component,
|
|
85
|
-
args: [{ selector: 'prism-a11y-kbd-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template:
|
|
86
|
-
@if (panelState.activeTab() === 'keyboard') { @for (badge of badges(); track
|
|
87
|
-
badge.index) {
|
|
88
|
-
<div
|
|
89
|
-
class="prism-a11y-kbd-ov__highlight"
|
|
90
|
-
[style.left.px]="badge.x"
|
|
91
|
-
[style.top.px]="badge.y"
|
|
92
|
-
[style.width.px]="badge.width"
|
|
93
|
-
[style.height.px]="badge.height"
|
|
94
|
-
[title]="badge.name || badge.role"
|
|
95
|
-
></div>
|
|
96
|
-
<div
|
|
97
|
-
class="prism-a11y-kbd-ov__badge"
|
|
98
|
-
[style.left.px]="badge.x - 10"
|
|
99
|
-
[style.top.px]="badge.y - 10"
|
|
100
|
-
>
|
|
101
|
-
{{ badge.index }}
|
|
102
|
-
</div>
|
|
103
|
-
} }
|
|
104
|
-
`, styles: ["\n :host {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 100;\n overflow: hidden;\n }\n\n .prism-a11y-kbd-ov__highlight {\n position: absolute;\n border: 2px solid rgba(129, 140, 248, 0.5);\n border-radius: 4px;\n background: rgba(129, 140, 248, 0.06);\n box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.08);\n pointer-events: none;\n }\n\n .prism-a11y-kbd-ov__badge {\n position: absolute;\n width: 20px;\n height: 20px;\n background: var(--prism-primary);\n color: white;\n border-radius: 50%;\n font-size: 10px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 0 0 2px white, 0 2px 6px rgba(0, 0, 0, 0.3);\n font-family: var(--prism-font-sans, system-ui, sans-serif);\n pointer-events: auto;\n cursor: default;\n }\n "] }]
|
|
85
|
+
args: [{ selector: 'prism-a11y-kbd-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (panelState.activeTab() === 'keyboard') {\n @for (badge of badges(); track badge.index) {\n <div\n class=\"prism-a11y-kbd-ov__highlight\"\n [style.left.px]=\"badge.x\"\n [style.top.px]=\"badge.y\"\n [style.width.px]=\"badge.width\"\n [style.height.px]=\"badge.height\"\n [title]=\"badge.name || badge.role\"></div>\n <div\n class=\"prism-a11y-kbd-ov__badge\"\n [style.left.px]=\"badge.x - 10\"\n [style.top.px]=\"badge.y - 10\">\n {{ badge.index }}\n </div>\n }\n}\n", styles: [":host {\n position: absolute;\n inset: 0;\n z-index: 100;\n overflow: hidden;\n pointer-events: none;\n}\n\n.prism-a11y-kbd-ov__highlight {\n position: absolute;\n pointer-events: none;\n background: rgb(129 140 248 / 6%);\n border: 2px solid rgb(129 140 248 / 50%);\n border-radius: 4px;\n box-shadow: 0 0 0 4px rgb(129 140 248 / 8%);\n}\n\n.prism-a11y-kbd-ov__badge {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n font-family: var(--prism-font-sans, system-ui, sans-serif);\n font-size: 10px;\n font-weight: 700;\n color: white;\n pointer-events: auto;\n cursor: default;\n background: var(--prism-primary);\n border-radius: 50%;\n box-shadow:\n 0 0 0 2px white,\n 0 2px 6px rgb(0 0 0 / 30%);\n}\n"] }]
|
|
105
86
|
}], () => [], null); })();
|
|
106
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yKeyboardOverlayComponent, { className: "A11yKeyboardOverlayComponent", filePath: "app/panels/a11y/a11y-keyboard-overlay.component.ts", lineNumber:
|
|
87
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yKeyboardOverlayComponent, { className: "A11yKeyboardOverlayComponent", filePath: "app/panels/a11y/a11y-keyboard-overlay.component.ts", lineNumber: 23 }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"a11y-keyboard.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-keyboard.component.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"a11y-keyboard.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-keyboard.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAGhF,qBAOa,qBAAqB;IAC9B,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA+B;IAE/D,SAAS,CAAC,QAAQ,CAAC,KAAK,+EAOrB;IAEH,SAAS,CAAC,QAAQ,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM;yCAb9B,qBAAqB;2CAArB,qBAAqB;CAkBjC"}
|