@ng-prism/core 22.2.1 → 22.4.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 +34 -36
- package/builders.json +11 -11
- package/dist/app/canvas/canvas-bg.styles.d.ts +7 -12
- package/dist/app/canvas/canvas-bg.styles.d.ts.map +1 -1
- package/dist/app/canvas/canvas-bg.styles.js +37 -22
- package/dist/app/canvas/measure-geometry.d.ts +140 -0
- package/dist/app/canvas/measure-geometry.d.ts.map +1 -0
- package/dist/app/canvas/measure-geometry.js +217 -0
- package/dist/app/canvas/measure-keyboard.d.ts +20 -0
- package/dist/app/canvas/measure-keyboard.d.ts.map +1 -0
- package/dist/app/canvas/measure-keyboard.js +34 -0
- package/dist/app/canvas/measure-quad.d.ts +114 -0
- package/dist/app/canvas/measure-quad.d.ts.map +1 -0
- package/dist/app/canvas/measure-quad.js +173 -0
- package/dist/app/canvas/measure-snap.d.ts +35 -0
- package/dist/app/canvas/measure-snap.d.ts.map +1 -0
- package/dist/app/canvas/measure-snap.js +63 -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-measure.component.d.ts +142 -0
- package/dist/app/canvas/prism-canvas-measure.component.d.ts.map +1 -0
- package/dist/app/canvas/prism-canvas-measure.component.js +554 -0
- package/dist/app/canvas/prism-canvas-pin-row.component.d.ts +23 -0
- package/dist/app/canvas/prism-canvas-pin-row.component.d.ts.map +1 -0
- package/dist/app/canvas/prism-canvas-pin-row.component.js +64 -0
- 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 +28 -28
- package/dist/app/canvas/prism-canvas-toolbar.component.d.ts.map +1 -1
- package/dist/app/canvas/prism-canvas-toolbar.component.js +124 -162
- 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 +2 -2
- package/dist/app/component-head/head-metrics.d.ts.map +1 -1
- package/dist/app/component-head/head-metrics.js +3 -3
- package/dist/app/component-head/prism-component-head.component.d.ts +3 -3
- package/dist/app/component-head/prism-component-head.component.d.ts.map +1 -1
- package/dist/app/component-head/prism-component-head.component.js +24 -64
- 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 +1 -1
- package/dist/app/component-head/prism-head-info.component.d.ts.map +1 -1
- package/dist/app/component-head/prism-head-info.component.js +4 -37
- package/dist/app/component-head/prism-stat.component.d.ts +1 -1
- package/dist/app/component-head/prism-stat.component.d.ts.map +1 -1
- package/dist/app/component-head/prism-stat.component.js +4 -15
- 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 +2 -2
- package/dist/app/discovery-manifest.d.ts.map +1 -1
- package/dist/app/discovery-manifest.js +16 -22
- 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 +9 -78
- package/dist/app/hmr.d.ts.map +1 -1
- package/dist/app/icons/icon-registry.d.ts +2 -2
- package/dist/app/icons/icon-registry.d.ts.map +1 -1
- package/dist/app/icons/icon-registry.js +5 -3
- package/dist/app/icons/prism-icon.component.d.ts +2 -2
- package/dist/app/icons/prism-icon.component.d.ts.map +1 -1
- package/dist/app/icons/prism-icon.component.js +9 -9
- package/dist/app/index.d.ts +3 -3
- package/dist/app/index.d.ts.map +1 -1
- package/dist/app/index.js +17 -24
- 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 +1 -1
- package/dist/app/overview/overview-visibility.d.ts.map +1 -1
- package/dist/app/overview/overview-visibility.js +1 -1
- package/dist/app/overview/prism-overview-cell.component.d.ts +2 -2
- package/dist/app/overview/prism-overview-cell.component.d.ts.map +1 -1
- package/dist/app/overview/prism-overview-cell.component.js +17 -25
- package/dist/app/overview/prism-overview.component.d.ts +2 -2
- package/dist/app/overview/prism-overview.component.d.ts.map +1 -1
- package/dist/app/overview/prism-overview.component.js +6 -14
- 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 +3 -4
- package/dist/app/panels/a11y/a11y-summary.d.ts.map +1 -1
- package/dist/app/panels/a11y/a11y-summary.js +5 -9
- package/dist/app/panels/a11y/a11y-thresholds.d.ts +1 -1
- package/dist/app/panels/a11y/a11y-thresholds.d.ts.map +1 -1
- package/dist/app/panels/a11y/a11y-thresholds.js +2 -2
- 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 +1 -1
- 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 +1 -1
- package/dist/app/panels/builtin-navigation-decorations.d.ts.map +1 -1
- package/dist/app/panels/builtin-navigation-decorations.js +3 -3
- 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 +2 -6
- 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 +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 +8 -12
- package/dist/app/renderer/known-inputs.d.ts +1 -1
- package/dist/app/renderer/known-inputs.d.ts.map +1 -1
- package/dist/app/renderer/known-inputs.js +1 -1
- package/dist/app/renderer/overlay-resolver.d.ts +17 -3
- package/dist/app/renderer/overlay-resolver.d.ts.map +1 -1
- package/dist/app/renderer/overlay-resolver.js +10 -5
- package/dist/app/renderer/prism-renderer.component.d.ts +28 -3
- package/dist/app/renderer/prism-renderer.component.d.ts.map +1 -1
- package/dist/app/renderer/prism-renderer.component.js +107 -80
- package/dist/app/renderer/projectable-content.d.ts.map +1 -1
- package/dist/app/renderer/projectable-content.js +4 -6
- 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 +33 -0
- package/dist/app/services/prism-canvas.service.d.ts.map +1 -1
- package/dist/app/services/prism-canvas.service.js +71 -6
- package/dist/app/services/prism-capture.service.d.ts +24 -50
- package/dist/app/services/prism-capture.service.d.ts.map +1 -1
- package/dist/app/services/prism-capture.service.js +62 -146
- 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-measure.service.d.ts +44 -0
- package/dist/app/services/prism-measure.service.d.ts.map +1 -0
- package/dist/app/services/prism-measure.service.js +91 -0
- 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 +2 -2
- package/dist/app/services/prism-panel.service.d.ts.map +1 -1
- package/dist/app/services/prism-panel.service.js +4 -7
- package/dist/app/services/prism-persistence.service.d.ts.map +1 -1
- package/dist/app/services/prism-persistence.service.js +9 -11
- 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 +4 -10
- package/dist/app/services/prism-variant-bg.service.d.ts +10 -24
- package/dist/app/services/prism-variant-bg.service.d.ts.map +1 -1
- package/dist/app/services/prism-variant-bg.service.js +13 -29
- package/dist/app/shared/prism-metric-badge.component.d.ts +9 -15
- package/dist/app/shared/prism-metric-badge.component.d.ts.map +1 -1
- package/dist/app/shared/prism-metric-badge.component.js +13 -32
- package/dist/app/shell/prism-shell.component.d.ts.map +1 -1
- package/dist/app/shell/prism-shell.component.js +26 -125
- package/dist/app/sidebar/navigation-decorations.d.ts +4 -4
- package/dist/app/sidebar/navigation-decorations.d.ts.map +1 -1
- package/dist/app/sidebar/navigation-decorations.js +3 -3
- package/dist/app/sidebar/prism-sidebar.component.d.ts +3 -3
- package/dist/app/sidebar/prism-sidebar.component.d.ts.map +1 -1
- package/dist/app/sidebar/prism-sidebar.component.js +21 -156
- package/dist/app/theme/prism-default-theme.d.ts.map +1 -1
- package/dist/app/theme/prism-default-theme.js +6 -6
- 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 +1 -1
- package/dist/app/variant-ribbon/spectrum.d.ts.map +1 -1
- package/dist/app/variant-ribbon/spectrum.js +1 -1
- package/dist/app/view-tab-bar/next-view-id.d.ts +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 +2 -4
- 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 +2 -2
- package/dist/builder/a11y/a11y-report-reader.d.ts.map +1 -1
- package/dist/builder/a11y/a11y-report-reader.js +8 -8
- 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 +14 -35
- package/dist/builder/plugin-runner/plugin-runner.d.ts.map +1 -1
- package/dist/builder/plugin-runner/plugin-runner.js +2 -4
- package/dist/builder/scanner/ast-utils.d.ts +46 -2
- package/dist/builder/scanner/ast-utils.d.ts.map +1 -1
- package/dist/builder/scanner/ast-utils.js +338 -38
- package/dist/builder/scanner/class-hierarchy.d.ts +33 -0
- package/dist/builder/scanner/class-hierarchy.d.ts.map +1 -0
- package/dist/builder/scanner/class-hierarchy.js +87 -0
- package/dist/builder/scanner/component.scanner.d.ts +7 -1
- package/dist/builder/scanner/component.scanner.d.ts.map +1 -1
- package/dist/builder/scanner/component.scanner.js +113 -72
- 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 +7 -4
- package/dist/builder/scanner/input.extractor.d.ts.map +1 -1
- package/dist/builder/scanner/input.extractor.js +157 -76
- package/dist/builder/scanner/manifest.generator.d.ts.map +1 -1
- package/dist/builder/scanner/manifest.generator.js +8 -6
- package/dist/builder/scanner/scanner.d.ts +3 -1
- package/dist/builder/scanner/scanner.d.ts.map +1 -1
- package/dist/builder/scanner/scanner.js +10 -8
- package/dist/builder/scanner/showcase-diagnostics.d.ts +25 -0
- package/dist/builder/scanner/showcase-diagnostics.d.ts.map +1 -0
- package/dist/builder/scanner/showcase-diagnostics.js +96 -0
- 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 +1 -1
- package/dist/builder/shared/prism-pipeline.d.ts.map +1 -1
- package/dist/builder/shared/prism-pipeline.js +29 -38
- 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 +14 -12
- 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 +11 -9
- package/dist/decorator/showcase.types.d.ts.map +1 -1
- package/dist/index.js +3 -3
- package/dist/plugin/define-config.js +1 -1
- package/dist/plugin/index.d.ts +4 -4
- package/dist/plugin/index.d.ts.map +1 -1
- package/dist/plugin/index.js +7 -11
- 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 +31 -14
- 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 +6 -10
- 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 +5 -6
- package/dist/shared/canvas-bg.type.d.ts.map +1 -1
- package/dist/shared/canvas-bg.type.js +5 -13
- package/dist/shared/canvas-layout.type.d.ts.map +1 -1
- package/dist/shared/canvas-layout.type.js +1 -4
- package/dist/shared/measure.type.d.ts +52 -0
- package/dist/shared/measure.type.d.ts.map +1 -0
- package/dist/shared/measure.type.js +21 -0
- package/dist/shared/variant-bg.d.ts +20 -31
- package/dist/shared/variant-bg.d.ts.map +1 -1
- package/dist/shared/variant-bg.js +20 -31
- package/dist/shared/viewport.type.d.ts +43 -0
- package/dist/shared/viewport.type.d.ts.map +1 -0
- package/dist/shared/viewport.type.js +44 -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 +7 -16
- package/dist/transformer/strip-directory.d.ts.map +1 -1
- package/dist/transformer/strip-directory.js +2 -4
- package/package.json +5 -2
- 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
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, computed, effect, ElementRef, inject, input, signal
|
|
1
|
+
import { ChangeDetectionStrategy, Component, computed, effect, ElementRef, inject, input, signal } from '@angular/core';
|
|
2
2
|
import { A11yKeyboardService } from './a11y-keyboard.service.js';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
function A11yOverlayHostComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
@@ -57,7 +57,7 @@ export class A11yOverlayHostComponent {
|
|
|
57
57
|
top: elRect.top - parentRect.top,
|
|
58
58
|
left: elRect.left - parentRect.left,
|
|
59
59
|
width: elRect.width,
|
|
60
|
-
height: elRect.height
|
|
60
|
+
height: elRect.height
|
|
61
61
|
};
|
|
62
62
|
}, /* @ts-ignore */
|
|
63
63
|
...(ngDevMode ? [{ debugName: "bounds" }] : /* istanbul ignore next */ []));
|
|
@@ -104,40 +104,13 @@ export class A11yOverlayHostComponent {
|
|
|
104
104
|
} if (rf & 2) {
|
|
105
105
|
let tmp_0_0;
|
|
106
106
|
i0.ɵɵconditional((tmp_0_0 = ctx.bounds()) ? 0 : -1, tmp_0_0);
|
|
107
|
-
} }, styles: ["[_nghost-%COMP%] {
|
|
107
|
+
} }, styles: ["[_nghost-%COMP%] {\n display: contents;\n}\n\n.a11y-mark[_ngcontent-%COMP%] {\n position: absolute;\n z-index: 1;\n pointer-events: none;\n}\n\n.outline[_ngcontent-%COMP%] {\n background: rgb(59 130 246 / 8%);\n border: 2px solid rgb(59 130 246 / 95%);\n border-radius: 4px;\n}\n\n.tag[_ngcontent-%COMP%] {\n display: inline-block;\n padding: 2px 6px;\n font: 11px/1.4 var(--%NS%font-mono);\n color: var(--%NS%prism-text-light, #fff);\n white-space: nowrap;\n background: rgb(17 24 39 / 92%);\n border-radius: 4px;\n box-shadow: 0 1px 2px rgb(0 0 0 / 35%);\n}\n\n.kb[_ngcontent-%COMP%] .tag[_ngcontent-%COMP%] {\n background: rgb(5 150 105 / 95%);\n}"] });
|
|
108
108
|
}
|
|
109
109
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yOverlayHostComponent, [{
|
|
110
110
|
type: Component,
|
|
111
|
-
args: [{ selector: 'prism-a11y-overlay-host', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template:
|
|
112
|
-
@if (bounds(); as b) {
|
|
113
|
-
<div
|
|
114
|
-
class="a11y-mark outline"
|
|
115
|
-
[style.top.px]="b.top"
|
|
116
|
-
[style.left.px]="b.left"
|
|
117
|
-
[style.width.px]="b.width"
|
|
118
|
-
[style.height.px]="b.height"
|
|
119
|
-
></div>
|
|
120
|
-
@if (roleLabel()) {
|
|
121
|
-
<div
|
|
122
|
-
class="a11y-mark"
|
|
123
|
-
[style.top.px]="b.top - 22"
|
|
124
|
-
[style.left.px]="b.left - 2"
|
|
125
|
-
>
|
|
126
|
-
<span class="tag">{{ roleLabel() }}</span>
|
|
127
|
-
</div>
|
|
128
|
-
} @if (tabLabel()) {
|
|
129
|
-
<div
|
|
130
|
-
class="a11y-mark kb"
|
|
131
|
-
[style.top.px]="b.top + b.height + 4"
|
|
132
|
-
[style.left.px]="b.left + b.width + 2"
|
|
133
|
-
style="transform: translateX(-100%)"
|
|
134
|
-
>
|
|
135
|
-
<span class="tag">{{ tabLabel() }}</span>
|
|
136
|
-
</div>
|
|
137
|
-
} }
|
|
138
|
-
`, styles: ["\n :host { display: contents; }\n .a11y-mark {\n position: absolute;\n pointer-events: none;\n z-index: 1;\n }\n .outline {\n border: 2px solid rgba(59, 130, 246, 0.95);\n border-radius: 4px;\n background: rgba(59, 130, 246, 0.08);\n }\n .tag {\n display: inline-block;\n padding: 2px 6px;\n border-radius: 4px;\n background: rgba(17, 24, 39, 0.92);\n color: var(--prism-text-light, #fff);\n font: 11px/1.4 var(--font-mono);\n white-space: nowrap;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);\n }\n .kb .tag { background: rgba(5, 150, 105, 0.95); }\n "] }]
|
|
111
|
+
args: [{ selector: 'prism-a11y-overlay-host', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (bounds(); as b) {\n <div\n class=\"a11y-mark outline\"\n [style.top.px]=\"b.top\"\n [style.left.px]=\"b.left\"\n [style.width.px]=\"b.width\"\n [style.height.px]=\"b.height\"></div>\n @if (roleLabel()) {\n <div\n class=\"a11y-mark\"\n [style.top.px]=\"b.top - 22\"\n [style.left.px]=\"b.left - 2\">\n <span class=\"tag\">{{ roleLabel() }}</span>\n </div>\n }\n @if (tabLabel()) {\n <div\n class=\"a11y-mark kb\"\n [style.top.px]=\"b.top + b.height + 4\"\n [style.left.px]=\"b.left + b.width + 2\"\n style=\"transform: translateX(-100%)\">\n <span class=\"tag\">{{ tabLabel() }}</span>\n </div>\n }\n}\n", styles: [":host {\n display: contents;\n}\n\n.a11y-mark {\n position: absolute;\n z-index: 1;\n pointer-events: none;\n}\n\n.outline {\n background: rgb(59 130 246 / 8%);\n border: 2px solid rgb(59 130 246 / 95%);\n border-radius: 4px;\n}\n\n.tag {\n display: inline-block;\n padding: 2px 6px;\n font: 11px/1.4 var(--font-mono);\n color: var(--prism-text-light, #fff);\n white-space: nowrap;\n background: rgb(17 24 39 / 92%);\n border-radius: 4px;\n box-shadow: 0 1px 2px rgb(0 0 0 / 35%);\n}\n\n.kb .tag {\n background: rgb(5 150 105 / 95%);\n}\n"] }]
|
|
139
112
|
}], () => [], { rendererService: [{ type: i0.Input, args: [{ isSignal: true, alias: "rendererService", required: true }] }] }); })();
|
|
140
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yOverlayHostComponent, { className: "A11yOverlayHostComponent", filePath: "app/panels/a11y/a11y-overlay-host.component.ts", lineNumber:
|
|
113
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yOverlayHostComponent, { className: "A11yOverlayHostComponent", filePath: "app/panels/a11y/a11y-overlay-host.component.ts", lineNumber: 19 }); })();
|
|
141
114
|
function implicitRole(el) {
|
|
142
115
|
const tag = el.tagName.toLowerCase();
|
|
143
116
|
if (tag === 'button')
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"a11y-panel-state.service.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-panel-state.service.ts"],"names":[],"mappings":";AAEA,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,GAAG,IAAI,CAAC;AAEnE,qBACa,qBAAqB;
|
|
1
|
+
{"version":3,"file":"a11y-panel-state.service.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-panel-state.service.ts"],"names":[],"mappings":";AAEA,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,GAAG,IAAI,CAAC;AAEnE,qBACa,qBAAqB;IAC9B,QAAQ,CAAC,SAAS,qDAAoC;yCAD7C,qBAAqB;;CAEjC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { A11yPanelStateService } from './a11y-panel-state.service.js';
|
|
2
1
|
import type { RuntimeComponent } from '../../../plugin/plugin.types.js';
|
|
2
|
+
import { A11yPanelStateService } from './a11y-panel-state.service.js';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
export declare class A11yPanelComponent {
|
|
5
5
|
private readonly auditService;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"a11y-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-panel.component.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"a11y-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-panel.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAGxE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;;AAMtE,qBAQa,kBAAkB;IAC3B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IACzD,SAAS,CAAC,QAAQ,CAAC,KAAK,wBAAiC;IAEzD,QAAQ,CAAC,eAAe,+DAAwC;IAEhE,SAAS,CAAC,QAAQ,CAAC,QAAQ,0CAKxB;IAEH,SAAS,CAAC,QAAQ,CAAC,cAAc,gDAI9B;yCAjBM,kBAAkB;2CAAlB,kBAAkB;CAkB9B"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, computed, inject, input
|
|
1
|
+
import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
|
|
2
2
|
import { A11yAuditService } from './a11y-audit.service.js';
|
|
3
|
-
import { A11yViolationsComponent } from './a11y-violations.component.js';
|
|
4
3
|
import { A11yKeyboardComponent } from './a11y-keyboard.component.js';
|
|
5
|
-
import { A11yTreeComponent } from './a11y-tree.component.js';
|
|
6
|
-
import { A11ySrComponent } from './a11y-sr.component.js';
|
|
7
4
|
import { A11yPanelStateService } from './a11y-panel-state.service.js';
|
|
5
|
+
import { A11ySrComponent } from './a11y-sr.component.js';
|
|
6
|
+
import { A11yTreeComponent } from './a11y-tree.component.js';
|
|
7
|
+
import { A11yViolationsComponent } from './a11y-violations.component.js';
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
9
|
function A11yPanelComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
|
|
10
10
|
i0.ɵɵelementStart(0, "span", 6);
|
|
@@ -91,72 +91,10 @@ export class A11yPanelComponent {
|
|
|
91
91
|
i0.ɵɵclassProp("st-tab--active", ctx.state.activeTab() === "sr");
|
|
92
92
|
i0.ɵɵadvance(3);
|
|
93
93
|
i0.ɵɵconditional(ctx.disabled() ? 12 : 13);
|
|
94
|
-
} }, dependencies: [A11yViolationsComponent,
|
|
95
|
-
A11yKeyboardComponent,
|
|
96
|
-
A11yTreeComponent,
|
|
97
|
-
A11ySrComponent], styles: ["[_nghost-%COMP%] { display: flex; flex-direction: column; height: 100%; }\n\n .a11y-panel[_ngcontent-%COMP%] { display: flex; flex-direction: column; height: 100%; }\n\n .subtabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 2px;\n padding: 10px 20px 0;\n border-bottom: 1px solid var(--%NS%prism-border);\n background: var(--%NS%prism-bg-elevated);\n position: sticky;\n top: 0;\n z-index: 2;\n }\n\n .st-tab[_ngcontent-%COMP%] {\n padding: 7px 12px;\n font-size: 12px;\n font-weight: 500;\n color: var(--%NS%prism-text-muted);\n border-radius: var(--%NS%radius-sm) var(--%NS%radius-sm) 0 0;\n position: relative;\n display: flex;\n align-items: center;\n gap: 6px;\n background: none;\n border: none;\n cursor: pointer;\n font-family: var(--%NS%font-sans);\n transition: color var(--%NS%dur-fast);\n }\n .st-tab[_ngcontent-%COMP%]:hover { color: var(--%NS%prism-text-2); }\n .st-tab--active[_ngcontent-%COMP%] { color: var(--%NS%prism-text); }\n .st-tab--%NS%active[_ngcontent-%COMP%]::after {\n content: '';\n position: absolute;\n left: 8px;\n right: 8px;\n bottom: -1px;\n height: 2px;\n background: var(--%NS%prism-primary);\n border-radius: 1px;\n }\n\n .st-badge[_ngcontent-%COMP%] {\n min-width: 16px;\n height: 16px;\n padding: 0 5px;\n border-radius: 8px;\n font-family: var(--%NS%font-mono);\n font-size: 10px;\n font-weight: 700;\n display: grid;\n place-items: center;\n background: color-mix(in srgb, var(--%NS%prism-primary) 18%, transparent);\n color: var(--%NS%prism-primary);\n }\n .st-badge--ok[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--%NS%prism-success) 18%, transparent);\n color: var(--%NS%prism-success);\n }\n .st-badge--warn[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--%NS%prism-warn) 18%, transparent);\n color: var(--%NS%prism-warn);\n }\n\n .a11y-content[_ngcontent-%COMP%] { flex: 1; overflow: auto; min-height: 0; }\n\n .a11y-disabled[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100px;\n color: var(--%NS%prism-text-muted);\n font-size: 13px;\n }"] });
|
|
94
|
+
} }, dependencies: [A11yViolationsComponent, A11yKeyboardComponent, A11yTreeComponent, A11ySrComponent], styles: ["[_nghost-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.a11y-panel[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.subtabs[_ngcontent-%COMP%] {\n position: sticky;\n top: 0;\n z-index: 2;\n display: flex;\n gap: 2px;\n padding: 10px 20px 0;\n background: var(--%NS%prism-bg-elevated);\n border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n.st-tab[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n gap: 6px;\n align-items: center;\n padding: 7px 12px;\n font-family: var(--%NS%font-sans);\n font-size: 12px;\n font-weight: 500;\n color: var(--%NS%prism-text-muted);\n cursor: pointer;\n background: none;\n border: none;\n border-radius: var(--%NS%radius-sm) var(--%NS%radius-sm) 0 0;\n transition: color var(--%NS%dur-fast);\n}\n\n.st-tab[_ngcontent-%COMP%]:hover {\n color: var(--%NS%prism-text-2);\n}\n\n.st-tab--active[_ngcontent-%COMP%] {\n color: var(--%NS%prism-text);\n}\n\n.st-tab--%NS%active[_ngcontent-%COMP%]::after {\n position: absolute;\n right: 8px;\n bottom: -1px;\n left: 8px;\n height: 2px;\n content: '';\n background: var(--%NS%prism-primary);\n border-radius: 1px;\n}\n\n.st-badge[_ngcontent-%COMP%] {\n display: grid;\n place-items: center;\n min-width: 16px;\n height: 16px;\n padding: 0 5px;\n font-family: var(--%NS%font-mono);\n font-size: 10px;\n font-weight: 700;\n color: var(--%NS%prism-primary);\n background: color-mix(in srgb, var(--%NS%prism-primary) 18%, transparent);\n border-radius: 8px;\n}\n\n.st-badge--ok[_ngcontent-%COMP%] {\n color: var(--%NS%prism-success);\n background: color-mix(in srgb, var(--%NS%prism-success) 18%, transparent);\n}\n\n.st-badge--warn[_ngcontent-%COMP%] {\n color: var(--%NS%prism-warn);\n background: color-mix(in srgb, var(--%NS%prism-warn) 18%, transparent);\n}\n\n.a11y-content[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n overflow: auto;\n}\n\n.a11y-disabled[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100px;\n font-size: 13px;\n color: var(--%NS%prism-text-muted);\n}"] });
|
|
98
95
|
}
|
|
99
96
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yPanelComponent, [{
|
|
100
97
|
type: Component,
|
|
101
|
-
args: [{ selector: 'prism-a11y-panel', standalone: true, imports: [
|
|
102
|
-
A11yViolationsComponent,
|
|
103
|
-
A11yKeyboardComponent,
|
|
104
|
-
A11yTreeComponent,
|
|
105
|
-
A11ySrComponent,
|
|
106
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
107
|
-
<div class="a11y-panel">
|
|
108
|
-
<div class="subtabs">
|
|
109
|
-
<button
|
|
110
|
-
class="st-tab"
|
|
111
|
-
[class.st-tab--active]="state.activeTab() === 'violations'"
|
|
112
|
-
(click)="state.activeTab.set('violations')"
|
|
113
|
-
>
|
|
114
|
-
Violations @if (violationCount() !== null) {
|
|
115
|
-
<span
|
|
116
|
-
class="st-badge"
|
|
117
|
-
[class.st-badge--ok]="violationCount() === 0"
|
|
118
|
-
[class.st-badge--warn]="violationCount()! > 0"
|
|
119
|
-
>
|
|
120
|
-
{{ violationCount() }}
|
|
121
|
-
</span>
|
|
122
|
-
}
|
|
123
|
-
</button>
|
|
124
|
-
<button
|
|
125
|
-
class="st-tab"
|
|
126
|
-
[class.st-tab--active]="state.activeTab() === 'keyboard'"
|
|
127
|
-
(click)="state.activeTab.set('keyboard')"
|
|
128
|
-
>
|
|
129
|
-
Keyboard
|
|
130
|
-
</button>
|
|
131
|
-
<button
|
|
132
|
-
class="st-tab"
|
|
133
|
-
[class.st-tab--active]="state.activeTab() === 'tree'"
|
|
134
|
-
(click)="state.activeTab.set('tree')"
|
|
135
|
-
>
|
|
136
|
-
ARIA Tree
|
|
137
|
-
</button>
|
|
138
|
-
<button
|
|
139
|
-
class="st-tab"
|
|
140
|
-
[class.st-tab--active]="state.activeTab() === 'sr'"
|
|
141
|
-
(click)="state.activeTab.set('sr')"
|
|
142
|
-
>
|
|
143
|
-
Screen Reader
|
|
144
|
-
</button>
|
|
145
|
-
</div>
|
|
146
|
-
|
|
147
|
-
<div class="a11y-content">
|
|
148
|
-
@if (disabled()) {
|
|
149
|
-
<div class="a11y-disabled">
|
|
150
|
-
Accessibility audit disabled for this component.
|
|
151
|
-
</div>
|
|
152
|
-
} @else { @switch (state.activeTab()) { @case ('violations') {
|
|
153
|
-
<prism-a11y-violations /> } @case ('keyboard') {
|
|
154
|
-
<prism-a11y-keyboard /> } @case
|
|
155
|
-
('tree') { <prism-a11y-tree /> }
|
|
156
|
-
@case ('sr') { <prism-a11y-sr /> }
|
|
157
|
-
} }
|
|
158
|
-
</div>
|
|
159
|
-
</div>
|
|
160
|
-
`, styles: ["\n :host { display: flex; flex-direction: column; height: 100%; }\n\n .a11y-panel { display: flex; flex-direction: column; height: 100%; }\n\n .subtabs {\n display: flex;\n gap: 2px;\n padding: 10px 20px 0;\n border-bottom: 1px solid var(--prism-border);\n background: var(--prism-bg-elevated);\n position: sticky;\n top: 0;\n z-index: 2;\n }\n\n .st-tab {\n padding: 7px 12px;\n font-size: 12px;\n font-weight: 500;\n color: var(--prism-text-muted);\n border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n position: relative;\n display: flex;\n align-items: center;\n gap: 6px;\n background: none;\n border: none;\n cursor: pointer;\n font-family: var(--font-sans);\n transition: color var(--dur-fast);\n }\n .st-tab:hover { color: var(--prism-text-2); }\n .st-tab--active { color: var(--prism-text); }\n .st-tab--active::after {\n content: '';\n position: absolute;\n left: 8px;\n right: 8px;\n bottom: -1px;\n height: 2px;\n background: var(--prism-primary);\n border-radius: 1px;\n }\n\n .st-badge {\n min-width: 16px;\n height: 16px;\n padding: 0 5px;\n border-radius: 8px;\n font-family: var(--font-mono);\n font-size: 10px;\n font-weight: 700;\n display: grid;\n place-items: center;\n background: color-mix(in srgb, var(--prism-primary) 18%, transparent);\n color: var(--prism-primary);\n }\n .st-badge--ok {\n background: color-mix(in srgb, var(--prism-success) 18%, transparent);\n color: var(--prism-success);\n }\n .st-badge--warn {\n background: color-mix(in srgb, var(--prism-warn) 18%, transparent);\n color: var(--prism-warn);\n }\n\n .a11y-content { flex: 1; overflow: auto; min-height: 0; }\n\n .a11y-disabled {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100px;\n color: var(--prism-text-muted);\n font-size: 13px;\n }\n "] }]
|
|
98
|
+
args: [{ selector: 'prism-a11y-panel', standalone: true, imports: [A11yViolationsComponent, A11yKeyboardComponent, A11yTreeComponent, A11ySrComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"a11y-panel\">\n <div class=\"subtabs\">\n <button\n class=\"st-tab\"\n [class.st-tab--active]=\"state.activeTab() === 'violations'\"\n (click)=\"state.activeTab.set('violations')\">\n Violations\n @if (violationCount() !== null) {\n <span\n class=\"st-badge\"\n [class.st-badge--ok]=\"violationCount() === 0\"\n [class.st-badge--warn]=\"violationCount()! > 0\">\n {{ violationCount() }}\n </span>\n }\n </button>\n <button\n class=\"st-tab\"\n [class.st-tab--active]=\"state.activeTab() === 'keyboard'\"\n (click)=\"state.activeTab.set('keyboard')\">\n Keyboard\n </button>\n <button\n class=\"st-tab\"\n [class.st-tab--active]=\"state.activeTab() === 'tree'\"\n (click)=\"state.activeTab.set('tree')\">\n ARIA Tree\n </button>\n <button\n class=\"st-tab\"\n [class.st-tab--active]=\"state.activeTab() === 'sr'\"\n (click)=\"state.activeTab.set('sr')\">\n Screen Reader\n </button>\n </div>\n\n <div class=\"a11y-content\">\n @if (disabled()) {\n <div class=\"a11y-disabled\"> Accessibility audit disabled for this component. </div>\n } @else {\n @switch (state.activeTab()) {\n @case ('violations') {\n <prism-a11y-violations />\n }\n @case ('keyboard') {\n <prism-a11y-keyboard />\n }\n @case ('tree') {\n <prism-a11y-tree />\n }\n @case ('sr') {\n <prism-a11y-sr />\n }\n }\n }\n </div>\n</div>\n", styles: [":host {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.a11y-panel {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.subtabs {\n position: sticky;\n top: 0;\n z-index: 2;\n display: flex;\n gap: 2px;\n padding: 10px 20px 0;\n background: var(--prism-bg-elevated);\n border-bottom: 1px solid var(--prism-border);\n}\n\n.st-tab {\n position: relative;\n display: flex;\n gap: 6px;\n align-items: center;\n padding: 7px 12px;\n font-family: var(--font-sans);\n font-size: 12px;\n font-weight: 500;\n color: var(--prism-text-muted);\n cursor: pointer;\n background: none;\n border: none;\n border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n transition: color var(--dur-fast);\n}\n\n.st-tab:hover {\n color: var(--prism-text-2);\n}\n\n.st-tab--active {\n color: var(--prism-text);\n}\n\n.st-tab--active::after {\n position: absolute;\n right: 8px;\n bottom: -1px;\n left: 8px;\n height: 2px;\n content: '';\n background: var(--prism-primary);\n border-radius: 1px;\n}\n\n.st-badge {\n display: grid;\n place-items: center;\n min-width: 16px;\n height: 16px;\n padding: 0 5px;\n font-family: var(--font-mono);\n font-size: 10px;\n font-weight: 700;\n color: var(--prism-primary);\n background: color-mix(in srgb, var(--prism-primary) 18%, transparent);\n border-radius: 8px;\n}\n\n.st-badge--ok {\n color: var(--prism-success);\n background: color-mix(in srgb, var(--prism-success) 18%, transparent);\n}\n\n.st-badge--warn {\n color: var(--prism-warn);\n background: color-mix(in srgb, var(--prism-warn) 18%, transparent);\n}\n\n.a11y-content {\n flex: 1;\n min-height: 0;\n overflow: auto;\n}\n\n.a11y-disabled {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100px;\n font-size: 13px;\n color: var(--prism-text-muted);\n}\n"] }]
|
|
161
99
|
}], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
|
|
162
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yPanelComponent, { className: "A11yPanelComponent", filePath: "app/panels/a11y/a11y-panel.component.ts", lineNumber:
|
|
100
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yPanelComponent, { className: "A11yPanelComponent", filePath: "app/panels/a11y/a11y-panel.component.ts", lineNumber: 19 }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"a11y-perspective.service.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-perspective.service.ts"],"names":[],"mappings":";AAEA,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,eAAe,CAAC;AAE7D,qBACa,sBAAsB;
|
|
1
|
+
{"version":3,"file":"a11y-perspective.service.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-perspective.service.ts"],"names":[],"mappings":";AAEA,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,eAAe,CAAC;AAE7D,qBACa,sBAAsB;IAC/B,QAAQ,CAAC,IAAI,8DAAyC;yCAD7C,sBAAsB;;CAElC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"a11y-score.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-score.component.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"a11y-score.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-score.component.ts"],"names":[],"mappings":";AAMA,qBAOa,kBAAkB;IAC3B,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,QAAQ,CAAC,OAAO,+CAAgB;IAEhC,SAAS,CAAC,QAAQ,CAAC,UAAU,SAA0B;IACvD,SAAS,CAAC,QAAQ,CAAC,CAAC,MAAK;IACzB,SAAS,CAAC,QAAQ,CAAC,IAAI,SAAiB;IAExC,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAAwE;yCAR5F,kBAAkB;2CAAlB,kBAAkB;CAS9B"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, computed, input
|
|
1
|
+
import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
function A11yScoreComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
|
|
4
4
|
i0.ɵɵdomElementStart(0, "div", 7)(1, "div", 8);
|
|
@@ -45,37 +45,10 @@ export class A11yScoreComponent {
|
|
|
45
45
|
i0.ɵɵattribute("r", ctx.R)("stroke-dasharray", ctx.CIRC)("stroke-dashoffset", ctx.dashOffset())("stroke", "url(#" + ctx.gradientId + ")");
|
|
46
46
|
i0.ɵɵadvance();
|
|
47
47
|
i0.ɵɵconditional(!ctx.compact() ? 8 : -1);
|
|
48
|
-
} }, styles: ["[_nghost-%COMP%] {
|
|
48
|
+
} }, styles: ["[_nghost-%COMP%] {\n display: inline-flex;\n}\n\n.score-ring[_ngcontent-%COMP%] {\n position: relative;\n width: 128px;\n height: 128px;\n}\n\n.compact[_nghost-%COMP%] .score-ring[_ngcontent-%COMP%], .compact [_nghost-%COMP%] .score-ring[_ngcontent-%COMP%], \n[style*='width:18px'][_nghost-%COMP%] .score-ring[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n}\n\n.score-ring[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n transform: rotate(-90deg);\n}\n\n.score-ring[_ngcontent-%COMP%] circle[_ngcontent-%COMP%] {\n fill: none;\n stroke-width: 10;\n}\n\n.track[_ngcontent-%COMP%] {\n stroke: var(--%NS%prism-input-bg);\n}\n\n.gradient-start[_ngcontent-%COMP%] {\n stop-color: var(--%NS%prism-primary);\n}\n\n.gradient-end[_ngcontent-%COMP%] {\n stop-color: var(--%NS%prism-accent);\n}\n\n.fill[_ngcontent-%COMP%] {\n stroke-linecap: round;\n transition: stroke-dashoffset 0.5s ease;\n}\n\n.score-val[_ngcontent-%COMP%] {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n gap: 0;\n align-items: center;\n justify-content: center;\n}\n\n.score-num[_ngcontent-%COMP%] {\n font-family: var(--%NS%font-mono);\n font-size: 30px;\n font-weight: 700;\n color: transparent;\n letter-spacing: -0.02em;\n background: linear-gradient(135deg, var(--%NS%prism-primary), var(--%NS%prism-accent));\n background-clip: text;\n}\n\n.score-max[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 500;\n color: var(--%NS%prism-text-ghost);\n}"] });
|
|
49
49
|
}
|
|
50
50
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yScoreComponent, [{
|
|
51
51
|
type: Component,
|
|
52
|
-
args: [{ selector: 'prism-a11y-score', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template:
|
|
53
|
-
<div class="score-ring">
|
|
54
|
-
<svg viewBox="0 0 128 128">
|
|
55
|
-
<defs>
|
|
56
|
-
<linearGradient [id]="gradientId" x1="0" y1="0" x2="1" y2="1">
|
|
57
|
-
<stop offset="0%" class="gradient-start" />
|
|
58
|
-
<stop offset="100%" class="gradient-end" />
|
|
59
|
-
</linearGradient>
|
|
60
|
-
</defs>
|
|
61
|
-
<circle class="track" cx="64" cy="64" [attr.r]="R" />
|
|
62
|
-
<circle
|
|
63
|
-
class="fill"
|
|
64
|
-
cx="64"
|
|
65
|
-
cy="64"
|
|
66
|
-
[attr.r]="R"
|
|
67
|
-
[attr.stroke-dasharray]="CIRC"
|
|
68
|
-
[attr.stroke-dashoffset]="dashOffset()"
|
|
69
|
-
[attr.stroke]="'url(#' + gradientId + ')'"
|
|
70
|
-
/>
|
|
71
|
-
</svg>
|
|
72
|
-
@if (!compact()) {
|
|
73
|
-
<div class="score-val">
|
|
74
|
-
<div class="score-num">{{ score() }}</div>
|
|
75
|
-
<div class="score-max">/ 100</div>
|
|
76
|
-
</div>
|
|
77
|
-
}
|
|
78
|
-
</div>
|
|
79
|
-
`, styles: ["\n :host { display: inline-flex; }\n\n .score-ring {\n position: relative;\n width: 128px;\n height: 128px;\n }\n :host-context(.compact) .score-ring,\n :host([style*=\"width:18px\"]) .score-ring {\n width: 100%;\n height: 100%;\n }\n\n .score-ring svg {\n transform: rotate(-90deg);\n width: 100%;\n height: 100%;\n }\n\n .score-ring circle {\n fill: none;\n stroke-width: 10;\n }\n .track { stroke: var(--prism-input-bg); }\n .gradient-start { stop-color: var(--prism-primary); }\n .gradient-end { stop-color: var(--prism-accent); }\n .fill {\n stroke-linecap: round;\n transition: stroke-dashoffset 0.5s ease;\n }\n\n .score-val {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0;\n }\n .score-num {\n font-size: 30px;\n font-weight: 700;\n letter-spacing: -0.02em;\n background: linear-gradient(135deg, var(--prism-primary), var(--prism-accent));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n font-family: var(--font-mono);\n }\n .score-max {\n font-size: 11px;\n color: var(--prism-text-ghost);\n font-weight: 500;\n }\n "] }]
|
|
52
|
+
args: [{ selector: 'prism-a11y-score', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"score-ring\">\n <svg viewBox=\"0 0 128 128\">\n <defs>\n <linearGradient\n [id]=\"gradientId\"\n x1=\"0\"\n y1=\"0\"\n x2=\"1\"\n y2=\"1\">\n <stop\n offset=\"0%\"\n class=\"gradient-start\" />\n <stop\n offset=\"100%\"\n class=\"gradient-end\" />\n </linearGradient>\n </defs>\n <circle\n class=\"track\"\n cx=\"64\"\n cy=\"64\"\n [attr.r]=\"R\" />\n <circle\n class=\"fill\"\n cx=\"64\"\n cy=\"64\"\n [attr.r]=\"R\"\n [attr.stroke-dasharray]=\"CIRC\"\n [attr.stroke-dashoffset]=\"dashOffset()\"\n [attr.stroke]=\"'url(#' + gradientId + ')'\" />\n </svg>\n @if (!compact()) {\n <div class=\"score-val\">\n <div class=\"score-num\">{{ score() }}</div>\n <div class=\"score-max\">/ 100</div>\n </div>\n }\n</div>\n", styles: [":host {\n display: inline-flex;\n}\n\n.score-ring {\n position: relative;\n width: 128px;\n height: 128px;\n}\n\n:host-context(.compact) .score-ring,\n:host([style*='width:18px']) .score-ring {\n width: 100%;\n height: 100%;\n}\n\n.score-ring svg {\n width: 100%;\n height: 100%;\n transform: rotate(-90deg);\n}\n\n.score-ring circle {\n fill: none;\n stroke-width: 10;\n}\n\n.track {\n stroke: var(--prism-input-bg);\n}\n\n.gradient-start {\n stop-color: var(--prism-primary);\n}\n\n.gradient-end {\n stop-color: var(--prism-accent);\n}\n\n.fill {\n stroke-linecap: round;\n transition: stroke-dashoffset 0.5s ease;\n}\n\n.score-val {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n gap: 0;\n align-items: center;\n justify-content: center;\n}\n\n.score-num {\n font-family: var(--font-mono);\n font-size: 30px;\n font-weight: 700;\n color: transparent;\n letter-spacing: -0.02em;\n background: linear-gradient(135deg, var(--prism-primary), var(--prism-accent));\n background-clip: text;\n}\n\n.score-max {\n font-size: 11px;\n font-weight: 500;\n color: var(--prism-text-ghost);\n}\n"] }]
|
|
80
53
|
}], null, { score: [{ type: i0.Input, args: [{ isSignal: true, alias: "score", required: true }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] }); })();
|
|
81
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yScoreComponent, { className: "A11yScoreComponent", filePath: "app/panels/a11y/a11y-score.component.ts", lineNumber:
|
|
54
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yScoreComponent, { className: "A11yScoreComponent", filePath: "app/panels/a11y/a11y-score.component.ts", lineNumber: 14 }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"a11y-sr-overlay.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-sr-overlay.component.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"a11y-sr-overlay.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-sr-overlay.component.ts"],"names":[],"mappings":";AAMA,UAAU,eAAe;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,qBAOa,sBAAsB;IAC/B,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAkC;IAC9D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAiC;IAC5D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IACnD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAmC;IAE9D,SAAS,CAAC,QAAQ,CAAC,MAAM,4DAAiC;IAC1D,SAAS,CAAC,QAAQ,CAAC,WAAW,kDAAiB;IAE/C,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,KAAK,CAAuB;;IA4BpC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAKjC,OAAO,CAAC,aAAa;yCA5CZ,sBAAsB;2CAAtB,sBAAsB;CA2ElC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, signal
|
|
2
|
-
import { A11ySrService } from './a11y-sr.service.js';
|
|
3
|
-
import { A11yPerspectiveService } from './a11y-perspective.service.js';
|
|
4
|
-
import { A11yPanelStateService } from './a11y-panel-state.service.js';
|
|
1
|
+
import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, signal } from '@angular/core';
|
|
5
2
|
import { PrismRendererService } from '../../services/prism-renderer.service.js';
|
|
3
|
+
import { A11yPanelStateService } from './a11y-panel-state.service.js';
|
|
4
|
+
import { A11yPerspectiveService } from './a11y-perspective.service.js';
|
|
5
|
+
import { A11ySrService } from './a11y-sr.service.js';
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
7
|
const _forTrack0 = ($index, $item) => $item.index;
|
|
8
8
|
function A11ySrOverlayComponent_Conditional_0_For_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
@@ -89,7 +89,7 @@ export class A11ySrOverlayComponent {
|
|
|
89
89
|
y: rect.top - canvasRect.top + scrollTop,
|
|
90
90
|
width: rect.width,
|
|
91
91
|
height: rect.height,
|
|
92
|
-
isActive: i === this.activeIdx
|
|
92
|
+
isActive: i === this.activeIdx
|
|
93
93
|
};
|
|
94
94
|
})
|
|
95
95
|
.filter((p) => p !== null);
|
|
@@ -100,30 +100,10 @@ export class A11ySrOverlayComponent {
|
|
|
100
100
|
i0.ɵɵconditionalCreate(0, A11ySrOverlayComponent_Conditional_0_Template, 2, 0);
|
|
101
101
|
} if (rf & 2) {
|
|
102
102
|
i0.ɵɵconditional(ctx.showOverlay() ? 0 : -1);
|
|
103
|
-
} }, styles: ["[_nghost-%COMP%] {\n
|
|
103
|
+
} }, 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-sr-ov__focus[_ngcontent-%COMP%] {\n position: absolute;\n background: rgb(167 139 250 / 8%);\n border: 2px solid var(--%NS%prism-primary);\n border-radius: 4px;\n box-shadow: 0 0 0 4px rgb(167 139 250 / 12%);\n}\n\n.prism-a11y-sr-ov__badge[_ngcontent-%COMP%] {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 18px;\n height: 18px;\n padding: 0 5px;\n font-family: var(--%NS%prism-font-sans, system-ui, sans-serif);\n font-size: 9px;\n font-weight: 700;\n color: white;\n background: var(--%NS%prism-primary);\n border-radius: 9px;\n box-shadow:\n 0 0 0 1.5px white,\n 0 2px 4px rgb(0 0 0 / 25%);\n}\n\n.prism-a11y-sr-ov__badge--active[_ngcontent-%COMP%] {\n background: var(--%NS%prism-primary-from);\n box-shadow:\n 0 0 0 2px white,\n 0 0 0 4px rgb(124 58 237 / 40%);\n}"] });
|
|
104
104
|
}
|
|
105
105
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11ySrOverlayComponent, [{
|
|
106
106
|
type: Component,
|
|
107
|
-
args: [{ selector: 'prism-a11y-sr-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template:
|
|
108
|
-
@if (showOverlay()) { @for (badge of badges(); track badge.index) { @if
|
|
109
|
-
(badge.isActive) {
|
|
110
|
-
<div
|
|
111
|
-
class="prism-a11y-sr-ov__focus"
|
|
112
|
-
[style.left.px]="badge.x"
|
|
113
|
-
[style.top.px]="badge.y"
|
|
114
|
-
[style.width.px]="badge.width"
|
|
115
|
-
[style.height.px]="badge.height"
|
|
116
|
-
></div>
|
|
117
|
-
}
|
|
118
|
-
<div
|
|
119
|
-
class="prism-a11y-sr-ov__badge"
|
|
120
|
-
[class.prism-a11y-sr-ov__badge--active]="badge.isActive"
|
|
121
|
-
[style.left.px]="badge.x - 10"
|
|
122
|
-
[style.top.px]="badge.y - 10"
|
|
123
|
-
>
|
|
124
|
-
{{ badge.index }}
|
|
125
|
-
</div>
|
|
126
|
-
} }
|
|
127
|
-
`, 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-sr-ov__focus {\n position: absolute;\n border: 2px solid var(--prism-primary);\n border-radius: 4px;\n background: rgba(167, 139, 250, 0.08);\n box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.12);\n }\n\n .prism-a11y-sr-ov__badge {\n position: absolute;\n height: 18px;\n padding: 0 5px;\n min-width: 18px;\n background: var(--prism-primary);\n color: white;\n border-radius: 9px;\n font-size: 9px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 0 0 1.5px white, 0 2px 4px rgba(0, 0, 0, 0.25);\n font-family: var(--prism-font-sans, system-ui, sans-serif);\n }\n\n .prism-a11y-sr-ov__badge--active {\n background: var(--prism-primary-from);\n box-shadow: 0 0 0 2px white, 0 0 0 4px rgba(124, 58, 237, 0.4);\n }\n "] }]
|
|
107
|
+
args: [{ selector: 'prism-a11y-sr-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showOverlay()) {\n @for (badge of badges(); track badge.index) {\n @if (badge.isActive) {\n <div\n class=\"prism-a11y-sr-ov__focus\"\n [style.left.px]=\"badge.x\"\n [style.top.px]=\"badge.y\"\n [style.width.px]=\"badge.width\"\n [style.height.px]=\"badge.height\"></div>\n }\n <div\n class=\"prism-a11y-sr-ov__badge\"\n [class.prism-a11y-sr-ov__badge--active]=\"badge.isActive\"\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-sr-ov__focus {\n position: absolute;\n background: rgb(167 139 250 / 8%);\n border: 2px solid var(--prism-primary);\n border-radius: 4px;\n box-shadow: 0 0 0 4px rgb(167 139 250 / 12%);\n}\n\n.prism-a11y-sr-ov__badge {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 18px;\n height: 18px;\n padding: 0 5px;\n font-family: var(--prism-font-sans, system-ui, sans-serif);\n font-size: 9px;\n font-weight: 700;\n color: white;\n background: var(--prism-primary);\n border-radius: 9px;\n box-shadow:\n 0 0 0 1.5px white,\n 0 2px 4px rgb(0 0 0 / 25%);\n}\n\n.prism-a11y-sr-ov__badge--active {\n background: var(--prism-primary-from);\n box-shadow:\n 0 0 0 2px white,\n 0 0 0 4px rgb(124 58 237 / 40%);\n}\n"] }]
|
|
128
108
|
}], () => [], null); })();
|
|
129
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11ySrOverlayComponent, { className: "A11ySrOverlayComponent", filePath: "app/panels/a11y/a11y-sr-overlay.component.ts", lineNumber:
|
|
109
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11ySrOverlayComponent, { className: "A11ySrOverlayComponent", filePath: "app/panels/a11y/a11y-sr-overlay.component.ts", lineNumber: 23 }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"a11y-sr.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-sr.component.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"a11y-sr.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-sr.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAGhF,qBAOa,eAAe;IACxB,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IAEnD,SAAS,CAAC,QAAQ,CAAC,aAAa,6EAO7B;yCAXM,eAAe;2CAAf,eAAe;CAY3B"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, computed, inject
|
|
2
|
-
import { A11ySrService } from './a11y-sr.service.js';
|
|
1
|
+
import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
|
|
3
2
|
import { PrismRendererService } from '../../services/prism-renderer.service.js';
|
|
3
|
+
import { A11ySrService } from './a11y-sr.service.js';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
const _forTrack0 = ($index, $item) => $item.index;
|
|
6
6
|
function A11ySrComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
@@ -77,33 +77,10 @@ export class A11ySrComponent {
|
|
|
77
77
|
i0.ɵɵconditionalCreate(0, A11ySrComponent_Conditional_0_Template, 2, 0, "div", 0)(1, A11ySrComponent_Conditional_1_Template, 2, 0, "div", 0)(2, A11ySrComponent_Conditional_2_Template, 3, 0, "div", 1);
|
|
78
78
|
} if (rf & 2) {
|
|
79
79
|
i0.ɵɵconditional(!ctx.rendererService.renderedElement() ? 0 : !ctx.announcements().length ? 1 : 2);
|
|
80
|
-
} }, styles: ["[_nghost-%COMP%] {
|
|
80
|
+
} }, styles: ["[_nghost-%COMP%] {\n display: block;\n height: 100%;\n overflow: auto;\n}\n\n.sr-empty[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100px;\n font-size: 13px;\n color: var(--%NS%prism-text-muted);\n}\n\n.sr-body[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 16px 20px;\n}\n\n.sr-line[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 56px 1fr;\n gap: 12px;\n padding: 10px 12px;\n background: var(--%NS%prism-bg-surface);\n border: 1px solid var(--%NS%prism-border);\n border-radius: 8px;\n}\n\n.sr-step[_ngcontent-%COMP%] {\n font-family: var(--%NS%font-mono);\n font-size: 11px;\n font-weight: 600;\n color: var(--%NS%prism-text-ghost);\n}\n\n.sr-text[_ngcontent-%COMP%] {\n font-size: 13px;\n line-height: 1.5;\n color: var(--%NS%prism-text);\n}\n\n.sr-name[_ngcontent-%COMP%] {\n font-style: normal;\n font-weight: 600;\n color: var(--%NS%prism-primary);\n}\n\n.sr-text[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n padding: 1px 5px;\n font-family: var(--%NS%font-mono);\n font-size: 11.5px;\n color: var(--%NS%prism-text-muted);\n background: var(--%NS%prism-input-bg);\n border-radius: var(--%NS%radius-xs);\n}"] });
|
|
81
81
|
}
|
|
82
82
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11ySrComponent, [{
|
|
83
83
|
type: Component,
|
|
84
|
-
args: [{ selector: 'prism-a11y-sr', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template:
|
|
85
|
-
@if (!rendererService.renderedElement()) {
|
|
86
|
-
<div class="sr-empty">
|
|
87
|
-
Select a component to simulate screen reader output.
|
|
88
|
-
</div>
|
|
89
|
-
} @else if (!announcements().length) {
|
|
90
|
-
<div class="sr-empty">No announced elements found.</div>
|
|
91
|
-
} @else {
|
|
92
|
-
<div class="sr-body">
|
|
93
|
-
@for (a of announcements(); track a.index) {
|
|
94
|
-
<div class="sr-line">
|
|
95
|
-
<div class="sr-step">VO · {{ a.index }}</div>
|
|
96
|
-
<div class="sr-text">
|
|
97
|
-
@if (a.name) { "<span class="sr-name">{{ a.name }}</span
|
|
98
|
-
>", }
|
|
99
|
-
<code>{{ a.role }}</code>
|
|
100
|
-
@if (a.states.length) { · {{ a.states.join(', ') }}
|
|
101
|
-
}
|
|
102
|
-
</div>
|
|
103
|
-
</div>
|
|
104
|
-
}
|
|
105
|
-
</div>
|
|
106
|
-
}
|
|
107
|
-
`, styles: ["\n :host { display: block; height: 100%; overflow: auto; }\n\n .sr-empty {\n display: flex; align-items: center; justify-content: center;\n min-height: 100px; color: var(--prism-text-muted); font-size: 13px;\n }\n\n .sr-body {\n padding: 16px 20px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n .sr-line {\n display: grid;\n grid-template-columns: 56px 1fr;\n gap: 12px;\n padding: 10px 12px;\n background: var(--prism-bg-surface);\n border: 1px solid var(--prism-border);\n border-radius: 8px;\n }\n\n .sr-step {\n font-family: var(--font-mono);\n font-size: 11px;\n color: var(--prism-text-ghost);\n font-weight: 600;\n }\n\n .sr-text {\n font-size: 13px;\n color: var(--prism-text);\n line-height: 1.5;\n }\n\n .sr-name {\n color: var(--prism-primary);\n font-weight: 600;\n font-style: normal;\n }\n\n .sr-text code {\n font-family: var(--font-mono);\n font-size: 11.5px;\n color: var(--prism-text-muted);\n padding: 1px 5px;\n background: var(--prism-input-bg);\n border-radius: var(--radius-xs);\n }\n "] }]
|
|
84
|
+
args: [{ selector: 'prism-a11y-sr', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!rendererService.renderedElement()) {\n <div class=\"sr-empty\"> Select a component to simulate screen reader output. </div>\n} @else if (!announcements().length) {\n <div class=\"sr-empty\">No announced elements found.</div>\n} @else {\n <div class=\"sr-body\">\n @for (a of announcements(); track a.index) {\n <div class=\"sr-line\">\n <div class=\"sr-step\">VO \u00B7 {{ a.index }}</div>\n <div class=\"sr-text\">\n @if (a.name) {\n \"<span class=\"sr-name\">{{ a.name }}</span\n >\",\n }\n <code>{{ a.role }}</code>\n @if (a.states.length) {\n \u00B7 {{ a.states.join(', ') }}\n }\n </div>\n </div>\n }\n </div>\n}\n", styles: [":host {\n display: block;\n height: 100%;\n overflow: auto;\n}\n\n.sr-empty {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100px;\n font-size: 13px;\n color: var(--prism-text-muted);\n}\n\n.sr-body {\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 16px 20px;\n}\n\n.sr-line {\n display: grid;\n grid-template-columns: 56px 1fr;\n gap: 12px;\n padding: 10px 12px;\n background: var(--prism-bg-surface);\n border: 1px solid var(--prism-border);\n border-radius: 8px;\n}\n\n.sr-step {\n font-family: var(--font-mono);\n font-size: 11px;\n font-weight: 600;\n color: var(--prism-text-ghost);\n}\n\n.sr-text {\n font-size: 13px;\n line-height: 1.5;\n color: var(--prism-text);\n}\n\n.sr-name {\n font-style: normal;\n font-weight: 600;\n color: var(--prism-primary);\n}\n\n.sr-text code {\n padding: 1px 5px;\n font-family: var(--font-mono);\n font-size: 11.5px;\n color: var(--prism-text-muted);\n background: var(--prism-input-bg);\n border-radius: var(--radius-xs);\n}\n"] }]
|
|
108
85
|
}], null, null); })();
|
|
109
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11ySrComponent, { className: "A11ySrComponent", filePath: "app/panels/a11y/a11y-sr.component.ts", lineNumber:
|
|
86
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11ySrComponent, { className: "A11ySrComponent", filePath: "app/panels/a11y/a11y-sr.component.ts", lineNumber: 12 }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"a11y-sr.service.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-sr.service.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"a11y-sr.service.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-sr.service.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;;AAqCtD,qBACa,aAAa;IACtB,qBAAqB,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,GAAG,cAAc,EAAE;yCADvF,aAAa;;CAUzB"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Injectable } from '@angular/core';
|
|
2
|
-
import { computeAccessibleName, extractStates, getRole, isHidden, statesToList
|
|
2
|
+
import { computeAccessibleName, extractStates, getRole, isHidden, statesToList } from './a11y-dom-utils.js';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
const ROLE_LABELS = {
|
|
5
5
|
button: 'button',
|
|
@@ -29,13 +29,10 @@ const ROLE_LABELS = {
|
|
|
29
29
|
img: 'image',
|
|
30
30
|
region: 'region',
|
|
31
31
|
article: 'article',
|
|
32
|
-
group: 'group'
|
|
32
|
+
group: 'group'
|
|
33
33
|
};
|
|
34
34
|
const ANNOUNCED_ROLES = new Set(Object.keys(ROLE_LABELS));
|
|
35
|
-
const STRUCTURAL_TAGS = new Set([
|
|
36
|
-
'SCRIPT', 'STYLE', 'NOSCRIPT', 'META', 'LINK', 'TITLE', 'HEAD',
|
|
37
|
-
'DIV', 'SPAN',
|
|
38
|
-
]);
|
|
35
|
+
const STRUCTURAL_TAGS = new Set(['SCRIPT', 'STYLE', 'NOSCRIPT', 'META', 'LINK', 'TITLE', 'HEAD', 'DIV', 'SPAN']);
|
|
39
36
|
export class A11ySrService {
|
|
40
37
|
buildAnnouncementList(root, getById) {
|
|
41
38
|
const announcements = [];
|
|
@@ -84,7 +81,7 @@ function walk(element, out, getById) {
|
|
|
84
81
|
name,
|
|
85
82
|
role: roleLabel,
|
|
86
83
|
states: stateList,
|
|
87
|
-
element
|
|
84
|
+
element
|
|
88
85
|
});
|
|
89
86
|
if (role === 'list') {
|
|
90
87
|
for (const child of Array.from(element.childNodes)) {
|
|
@@ -3,12 +3,11 @@ import type { A11yComponentMeta, A11yScoreResult, A11yThresholds } from './a11y.
|
|
|
3
3
|
* A component's standing, derived with the same precedence
|
|
4
4
|
* `checkA11yThresholds` uses library-wide.
|
|
5
5
|
*
|
|
6
|
-
* Browser-safe
|
|
7
|
-
* caller: the derivation is written down once and read from both sides. The
|
|
6
|
+
* Browser-safe, even though the build step is its main caller: the derivation is written down once and read from both sides. The
|
|
8
7
|
* build-time hook stores the result in the component's meta for the navigation
|
|
9
8
|
* marker, and the panel tab grades the *live* audit with the very same rule.
|
|
10
|
-
* The two look at different numbers
|
|
11
|
-
* running now
|
|
9
|
+
* The two look at different numbers (the report is a snapshot, the audit is
|
|
10
|
+
* running now), but they must never grade the same number differently, which
|
|
12
11
|
* is what a second hardcoded scale next to this one would guarantee.
|
|
13
12
|
*/
|
|
14
13
|
export declare function deriveA11ySummary(score: A11yScoreResult, thresholds: A11yThresholds): NonNullable<A11yComponentMeta['summary']>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"a11y-summary.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-summary.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"a11y-summary.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-summary.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAE1F;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,cAAc,GAAG,WAAW,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAmB/H"}
|
|
@@ -2,17 +2,15 @@
|
|
|
2
2
|
* A component's standing, derived with the same precedence
|
|
3
3
|
* `checkA11yThresholds` uses library-wide.
|
|
4
4
|
*
|
|
5
|
-
* Browser-safe
|
|
6
|
-
* caller: the derivation is written down once and read from both sides. The
|
|
5
|
+
* Browser-safe, even though the build step is its main caller: the derivation is written down once and read from both sides. The
|
|
7
6
|
* build-time hook stores the result in the component's meta for the navigation
|
|
8
7
|
* marker, and the panel tab grades the *live* audit with the very same rule.
|
|
9
|
-
* The two look at different numbers
|
|
10
|
-
* running now
|
|
8
|
+
* The two look at different numbers (the report is a snapshot, the audit is
|
|
9
|
+
* running now), but they must never grade the same number differently, which
|
|
11
10
|
* is what a second hardcoded scale next to this one would guarantee.
|
|
12
11
|
*/
|
|
13
12
|
export function deriveA11ySummary(score, thresholds) {
|
|
14
|
-
if (score.critical > thresholds.critical ||
|
|
15
|
-
score.serious > thresholds.serious) {
|
|
13
|
+
if (score.critical > thresholds.critical || score.serious > thresholds.serious) {
|
|
16
14
|
const parts = [];
|
|
17
15
|
if (score.critical > 0)
|
|
18
16
|
parts.push(`${score.critical} critical`);
|
|
@@ -21,9 +19,7 @@ export function deriveA11ySummary(score, thresholds) {
|
|
|
21
19
|
// Only reachable with a negative configured threshold: the branch fires
|
|
22
20
|
// on `0 > threshold` with both counts still at zero, and `parts` stays
|
|
23
21
|
// empty. Fall back to the score-based label rather than ship "A11y: ".
|
|
24
|
-
const label = parts.length > 0
|
|
25
|
-
? `A11y: ${parts.join(', ')}`
|
|
26
|
-
: `A11y score ${score.score}`;
|
|
22
|
+
const label = parts.length > 0 ? `A11y: ${parts.join(', ')}` : `A11y score ${score.score}`;
|
|
27
23
|
return { variant: 'danger', label };
|
|
28
24
|
}
|
|
29
25
|
if (score.moderate > thresholds.moderate || score.score < thresholds.score) {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { A11yThresholds } from './a11y.types.js';
|
|
2
|
-
/** Sentinel value meaning "no upper bound"
|
|
2
|
+
/** Sentinel value meaning "no upper bound". JSON-safe (unlike Infinity, which serializes to null). */
|
|
3
3
|
export declare const A11Y_UNLIMITED: number;
|
|
4
4
|
export declare const DEFAULT_A11Y_THRESHOLDS: A11yThresholds;
|
|
5
5
|
export declare function resolveA11yThresholds(input?: Partial<A11yThresholds>): A11yThresholds;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"a11y-thresholds.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-thresholds.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,
|
|
1
|
+
{"version":3,"file":"a11y-thresholds.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-thresholds.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,sGAAsG;AACtG,eAAO,MAAM,cAAc,QAA0B,CAAC;AAEtD,eAAO,MAAM,uBAAuB,EAAE,cAKrC,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,cAAc,CAGrF"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
/** Sentinel value meaning "no upper bound"
|
|
1
|
+
/** Sentinel value meaning "no upper bound". JSON-safe (unlike Infinity, which serializes to null). */
|
|
2
2
|
export const A11Y_UNLIMITED = Number.MAX_SAFE_INTEGER;
|
|
3
3
|
export const DEFAULT_A11Y_THRESHOLDS = {
|
|
4
4
|
score: 80,
|
|
5
5
|
critical: 0,
|
|
6
6
|
serious: 0,
|
|
7
|
-
moderate: A11Y_UNLIMITED
|
|
7
|
+
moderate: A11Y_UNLIMITED
|
|
8
8
|
};
|
|
9
9
|
export function resolveA11yThresholds(input) {
|
|
10
10
|
if (!input)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"a11y-tree.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-tree.component.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"a11y-tree.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-tree.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAEhF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;;AAEhD,qBAOa,qBAAqB;IAC9B,QAAQ,CAAC,IAAI,gDAA8B;IAC3C,QAAQ,CAAC,KAAK,8CAAY;IAC1B,QAAQ,CAAC,MAAM,+CAAgB;IAE/B,SAAS,CAAC,QAAQ,CAAC,QAAQ,kDAAgB;IAC3C,OAAO,CAAC,WAAW,CAAwB;;IAe3C,SAAS,CAAC,QAAQ,CAAC,YAAY;;;SAS5B;IAEH,SAAS,CAAC,cAAc,IAAI,IAAI;yCAhCvB,qBAAqB;2CAArB,qBAAqB;CAqCjC;AAED,qBAQa,iBAAiB;IAC1B,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA2B;IAEvD,SAAS,CAAC,QAAQ,CAAC,IAAI,kDAOpB;yCAXM,iBAAiB;2CAAjB,iBAAiB;CAY7B"}
|