Five more defects in the example viewer, following #70508.
The DOM was queried before Angular rendered it. `setCodeLinesVisibility()`
walks the rendered lines but ran synchronously on tab change, so it measured
the outgoing tab and the incoming file showed in full. The selected tab was
also lost when the code block was hidden and reshown, because the recreated
tab group had no `[selectedIndex]` while `snippetCode` survived, leaving the
strip and the code disagreeing.
`expandable` was computed once at startup by counting hidden DOM nodes, so a
collapsed tab offered no way to expand it, and recomputing that count on tab
change would drop the control whenever the block was expanded, since nothing
is hidden then. Both paths now share one rule: a file is expandable when it
has a `visibleLinesRange` and either the block is expanded or the range
actually hides lines, so a range that covers its whole file still gets no
inert control.
Array indices were also mixed with 1-based line numbers: the gap check tested
`index - 1` for the preceding line, drawing a `...` separator inside
contiguous ranges, and the gutter tested `index` while the code tested
`index + 1`, shifting every line number by one.
Five new specs cover these, using the comma-separated range format the
pipeline emits; each fails with its fix reverted. The tab label also moves
from 0.8125rem to 0.875rem to match the code beside it.
(cherry picked from commit 26afa313f3)
The code block lives inside `@if (showCode())`, so hiding it destroys the DOM and
showing it builds a fresh copy with no hidden lines. Nothing reapplied
`setCodeLinesVisibility()`, so a collapsed block came back showing the whole file.
Reapply it once the block is rendered again. It already branches on `expanded()`,
so a block that was expanded stays expanded.
(cherry picked from commit 90b9e081f5)
Rather than using multiple view modes for code examples, we can just treat the previous snippet mode as
as multifile mode that just only has one file in it.
The ExampleViewer component was extracting only innerHTML from code
blocks in multifile examples, which lost the shell class applied by
the formatCode function. This caused the $ prompt to not appear for
shell commands in multifile blocks even when language="shell" was set.
Modified the Snippet interface to track shell language state and
updated getCodeSnippetsFromMultifileWrapper and getStandaloneCodeSnippet
methods to preserve the shell class. Updated example-viewer template
to conditionally apply the shell class to the code wrapper element.
Fixes inconsistency between standalone and multifile shell code blocks.
Ensures that file names remain visible even if the associated code block
is collapsed or hidden, improving readability and context in the docs.
PR Close#64204
To increase the ease of development we are moving @angular/docs into the adev directory within this repo. While
we are doing this to improve our development experience in the short term, efforts are also in place
to maintain a division between this @angular/docs (shared) code and adev itself, so that it can be extracted
back out in the future when components is ready to leverage it as well.
PR Close#57132
Kam