Replaces the native select element with a custom combobox implementation for improved accessibility and styling.
(cherry picked from commit 70615117a2)
Switches the Material and CDK components to be used directly, instead of using the modules. This allows better diagnostics for unused directives.
(cherry picked from commit 508d9c34d5)
Removes direct `ViewChild` access from `TextField` components and relies on
Signals Forms via the `focusBoundControl` to manage focus.
(cherry picked from commit 074666b2e8)
This completes the rename started in #66136. `[field]` is too generic of
a selector for the forms system to own, and likely to cause naming
collisions with existing components. Therefore it is being renamed to
`[formField]`
(cherry picked from commit 5671f2cc07)
Remove usages of `detectChanges` and rely on `whenStable`.
This commit also removed the usage of `provideZonelessChangeDetection` which is no longer necessary.
Fixes an issue where the copy-to-clipboard icon moves to a new line when heading text is long and wraps.
Applies improved text wrapping for headings to keep the icon visually aligned.
Fixes#66239
Adds the ability to hide the copy button on code snippets.
Updates documentation to use the new `hideCopy` option with the new
markdown code fence syntax.
Ensures the example viewer header displays correctly by keeping the "Show code"
button aligned to the right and preventing metadata text from wrapping.
Improves layout consistency across documentation examples.
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.
- Replaced <a><button></button></a> with a proper <a> containing text and
aria-label to ensure links have discernible text.
- Added main tag in home page to provide
a consistent main landmark, improving accessibility for screen readers
and satisfying WCAG and Lighthouse requirements.
Fixes#65181.
The example viewer has some `::ng-deep` styles that are used to reset global styles that leak into the live examples. It works by applying a style like `.docs-example-viewer-preview * {all: revert;}`.
The problem with this is that depending on when the first example is rendered, the styles will be lower or higher in the cascade, thus making the reset unreliable. Furthermore, it can affect structural styles from the CDK which intentionally have low specificity.
These changes move the resets into the global stylesheet to make them more predictable.
Long code blocks overflow the headings on narrow screen (like mobiles), this messes up the global layout of the page. With the ellipsis with fix that.
fixes#64845
The DocViewer component's getCodeSnippetsFromMultifileWrapper method was not
extracting the header attribute from nested <docs-code> elements, causing the
ExampleViewer to fall back to displaying file paths instead of custom headers
in tab labels.
This change adds title extraction from the header attribute when processing
multifile code snippets, ensuring that custom headers are properly displayed
in the code viewer tabs.
Fixes#64760
The navigation list component was using `routerLinkActive` with
`{ exact: true }`, which required an exact URL match including query
parameters. When visiting `/update-guide?v=19.0-20.0&l=1`, the link
`/update-guide` didn't match, so the active class wasn't applied.
Updated `routerLinkActiveOptions` to ignore query parameters while
maintaining exact path matching so the navigation item stays highlighted
when interacting with the update guide form.
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
SkyZeroZx