History

dependabot[bot] 125f8c5857 Bump @angular/cdk from 21.2.14 to 22.0.0 in /web_embedding/ng-flutter (#2848 ) Bumps [@angular/cdk](https://github.com/angular/components) from 21.2.14 to 22.0.0. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/angular/components/releases">@angular/cdk's releases</a>.</em></p> <blockquote> <h2>22.0.0</h2> <h3>aria</h3> <table> <thead> <tr> <th>Commit</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="`d91f46b4c5`"><img src="https://img.shields.io/badge/d91f46b4c-feat-blue" alt="feat - d91f46b4c" /></a></td> <td><strong>accordion:</strong> introduce accordion harness (<a href="https://redirect.github.com/angular/components/issues/33046">#33046</a>)</td> </tr> <tr> <td><a href="`e3d84f2e0a`"><img src="https://img.shields.io/badge/e3d84f2e0-feat-blue" alt="feat - e3d84f2e0" /></a></td> <td><strong>combobox:</strong> add test harnesses (<a href="https://redirect.github.com/angular/components/issues/33194">#33194</a>)</td> </tr> <tr> <td><a href="`0ca47b4a06`"><img src="https://img.shields.io/badge/0ca47b4a0-feat-blue" alt="feat - 0ca47b4a0" /></a></td> <td><strong>combobox:</strong> migrate simple-combobox directly into primary entrypoints (<a href="https://redirect.github.com/angular/components/issues/33206">#33206</a>)</td> </tr> <tr> <td><a href="`6ec07bc0cb`"><img src="https://img.shields.io/badge/6ec07bc0c-feat-blue" alt="feat - 6ec07bc0c" /></a></td> <td><strong>grid:</strong> add test harnesses (<a href="https://redirect.github.com/angular/components/issues/33081">#33081</a>)</td> </tr> <tr> <td><a href="`1885d35346`"><img src="https://img.shields.io/badge/1885d3534-feat-blue" alt="feat - 1885d3534" /></a></td> <td><strong>listbox:</strong> introduce listbox harness (<a href="https://redirect.github.com/angular/components/issues/33064">#33064</a>)</td> </tr> <tr> <td><a href="`75fae5275c`"><img src="https://img.shields.io/badge/75fae5275-feat-blue" alt="feat - 75fae5275" /></a></td> <td><strong>menu:</strong> introduce menu harness (<a href="https://redirect.github.com/angular/components/issues/33067">#33067</a>)</td> </tr> <tr> <td><a href="`c25e6252ec`"><img src="https://img.shields.io/badge/c25e6252e-feat-blue" alt="feat - c25e6252e" /></a></td> <td><strong>tabs:</strong> add test harnesses (<a href="https://redirect.github.com/angular/components/issues/33079">#33079</a>)</td> </tr> <tr> <td><a href="`a49508bacf`"><img src="https://img.shields.io/badge/a49508bac-feat-blue" alt="feat - a49508bac" /></a></td> <td><strong>toolbar:</strong> add test harnesses (<a href="https://redirect.github.com/angular/components/issues/33068">#33068</a>)</td> </tr> <tr> <td><a href="`30f2239728`"><img src="https://img.shields.io/badge/30f223972-feat-blue" alt="feat - 30f223972" /></a></td> <td><strong>tree:</strong> add test harnesses (<a href="https://redirect.github.com/angular/components/issues/33066">#33066</a>)</td> </tr> <tr> <td><a href="`91a4932f65`"><img src="https://img.shields.io/badge/91a4932f6-fix-green" alt="fix - 91a4932f6" /></a></td> <td><strong>combobox:</strong> increases autocomplete demo's placeholder text c… (<a href="https://redirect.github.com/angular/components/issues/33084">#33084</a>)</td> </tr> <tr> <td><a href="`218a77cf94`"><img src="https://img.shields.io/badge/218a77cf9-fix-green" alt="fix - 218a77cf9" /></a></td> <td><strong>combobox:</strong> separates placeholder prefixes (<a href="https://redirect.github.com/angular/components/issues/33163">#33163</a>)</td> </tr> <tr> <td><a href="`ce1d9a7286`"><img src="https://img.shields.io/badge/ce1d9a728-fix-green" alt="fix - ce1d9a728" /></a></td> <td><strong>menu:</strong> allow menu item role override (<a href="https://redirect.github.com/angular/components/issues/33264">#33264</a>)</td> </tr> <tr> <td><a href="`196b7064db`"><img src="https://img.shields.io/badge/196b7064d-fix-green" alt="fix - 196b7064d" /></a></td> <td><strong>menu:</strong> defer menu item focus in case menus in cdk overlay (<a href="https://redirect.github.com/angular/components/issues/33258">#33258</a>)</td> </tr> <tr> <td><a href="`6443b79f9a`"><img src="https://img.shields.io/badge/6443b79f9-fix-green" alt="fix - 6443b79f9" /></a></td> <td><strong>menu:</strong> unable to set softDisabled (<a href="https://redirect.github.com/angular/components/issues/33265">#33265</a>)</td> </tr> </tbody> </table> <h3>cdk</h3> <table> <thead> <tr> <th>Commit</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="`1a5d5d101a`"><img src="https://img.shields.io/badge/1a5d5d101-feat-blue" alt="feat - 1a5d5d101" /></a></td> <td><strong>dialog:</strong> add the ability to pass bindings</td> </tr> <tr> <td><a href="`24115c0218`"><img src="https://img.shields.io/badge/24115c021-feat-blue" alt="feat - 24115c021" /></a></td> <td><strong>portal:</strong> add directives support to ComponentPortal (<a href="https://redirect.github.com/angular/components/issues/33142">#33142</a>)</td> </tr> <tr> <td><a href="`7426334c5e`"><img src="https://img.shields.io/badge/7426334c5-fix-green" alt="fix - 7426334c5" /></a></td> <td><strong>a11y:</strong> breaking changes for v22</td> </tr> <tr> <td><a href="`81c6bbd89d`"><img src="https://img.shields.io/badge/81c6bbd89-fix-green" alt="fix - 81c6bbd89" /></a></td> <td><strong>drag-drop:</strong> breaking changes for v22</td> </tr> <tr> <td><a href="`ffb23f6f82`"><img src="https://img.shields.io/badge/ffb23f6f8-fix-green" alt="fix - ffb23f6f8" /></a></td> <td><strong>menu:</strong> breaking changes for v22</td> </tr> <tr> <td><a href="`4c298970ed`"><img src="https://img.shields.io/badge/4c298970e-fix-green" alt="fix - 4c298970e" /></a></td> <td><strong>scrolling:</strong> make it easier to provide custom scrollable (<a href="https://redirect.github.com/angular/components/issues/33269">#33269</a>)</td> </tr> <tr> <td><a href="`aa42b7798b`"><img src="https://img.shields.io/badge/aa42b7798-fix-green" alt="fix - aa42b7798" /></a></td> <td><strong>table:</strong> expose rendered rows (<a href="https://redirect.github.com/angular/components/issues/33304">#33304</a>)</td> </tr> </tbody> </table> <h3>material</h3> <table> <thead> <tr> <th>Commit</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="`867ba993b3`"><img src="https://img.shields.io/badge/867ba993b-feat-blue" alt="feat - 867ba993b" /></a></td> <td><strong>bottom-sheet:</strong> add the ability to pass bindings</td> </tr> <tr> <td><a href="`b4a89d5996`"><img src="https://img.shields.io/badge/b4a89d599-feat-blue" alt="feat - b4a89d599" /></a></td> <td><strong>button:</strong> Add support for showing a progress indicator inside the button (<a href="https://redirect.github.com/angular/components/issues/32698">#32698</a>)</td> </tr> <tr> <td><a href="`a46b0a1d42`"><img src="https://img.shields.io/badge/a46b0a1d4-feat-blue" alt="feat - a46b0a1d4" /></a></td> <td><strong>core:</strong> add mixins for Material Design typography (<a href="https://redirect.github.com/angular/components/issues/32959">#32959</a>)</td> </tr> <tr> <td><a href="`bf3596b53b`"><img src="https://img.shields.io/badge/bf3596b53-feat-blue" alt="feat - bf3596b53" /></a></td> <td><strong>dialog:</strong> add the ability to pass bindings</td> </tr> <tr> <td><a href="`85c16fe4bb`"><img src="https://img.shields.io/badge/85c16fe4b-feat-blue" alt="feat - 85c16fe4b" /></a></td> <td><strong>tabs:</strong> add support for separate tab animation durations (<a href="https://redirect.github.com/angular/components/issues/32869">#32869</a>)</td> </tr> <tr> <td><a href="`440cb16064`"><img src="https://img.shields.io/badge/440cb1606-fix-green" alt="fix - 440cb1606" /></a></td> <td><strong>autocomplete:</strong> remove modal workaround</td> </tr> <tr> <td><a href="`21f8bbbf22`"><img src="https://img.shields.io/badge/21f8bbbf2-fix-green" alt="fix - 21f8bbbf2" /></a></td> <td><strong>badge:</strong> allow badge defaults to be configured (<a href="https://redirect.github.com/angular/components/issues/33312">#33312</a>)</td> </tr> <tr> <td><a href="`07c2d002de`"><img src="https://img.shields.io/badge/07c2d002d-fix-green" alt="fix - 07c2d002d" /></a></td> <td><strong>core:</strong> address sass compiler warnings (<a href="https://redirect.github.com/angular/components/issues/33040">#33040</a>)</td> </tr> <tr> <td><a href="`add8f16c01`"><img src="https://img.shields.io/badge/add8f16c0-fix-green" alt="fix - add8f16c0" /></a></td> <td><strong>list:</strong> breaking changes for v22</td> </tr> <tr> <td><a href="`31904510be`"><img src="https://img.shields.io/badge/31904510b-fix-green" alt="fix - 31904510b" /></a></td> <td><strong>menu:</strong> close menu when cleared from trigger (<a href="https://redirect.github.com/angular/components/issues/33306">#33306</a>)</td> </tr> <tr> <td><a href="`9d73c98b57`"><img src="https://img.shields.io/badge/9d73c98b5-fix-green" alt="fix - 9d73c98b5" /></a></td> <td><strong>menu:</strong> missing panelClass getter (<a href="https://redirect.github.com/angular/components/issues/33191">#33191</a>)</td> </tr> <tr> <td><a href="`348c3c89d5`"><img src="https://img.shields.io/badge/348c3c89d-fix-green" alt="fix - 348c3c89d" /></a></td> <td><strong>select:</strong> remove modal workaround</td> </tr> <tr> <td><a href="`f1a435508a`"><img src="https://img.shields.io/badge/f1a435508-fix-green" alt="fix - f1a435508" /></a></td> <td><strong>sidenav:</strong> handle mixed sidenav and drawer (<a href="https://redirect.github.com/angular/components/issues/33274">#33274</a>)</td> </tr> <tr> <td><a href="`c316198527`"><img src="https://img.shields.io/badge/c31619852-fix-green" alt="fix - c31619852" /></a></td> <td><strong>sidenav:</strong> mark content as inert while open</td> </tr> <tr> <td><a href="`a4d92c5fcb`"><img src="https://img.shields.io/badge/a4d92c5fc-fix-green" alt="fix - a4d92c5fc" /></a></td> <td><strong>sidenav:</strong> more robust reset logic for inert attribute (<a href="https://redirect.github.com/angular/components/issues/33257">#33257</a>)</td> </tr> <tr> <td><a href="`c2f1c5b035`"><img src="https://img.shields.io/badge/c2f1c5b03-fix-green" alt="fix - c2f1c5b03" /></a></td> <td><strong>sidenav:</strong> query not resolving</td> </tr> <tr> <td><a href="`75718e4fbe`"><img src="https://img.shields.io/badge/75718e4fb-fix-green" alt="fix - 75718e4fb" /></a></td> <td><strong>sort:</strong> breaking changes for v22</td> </tr> <tr> <td><a href="`6ed6218c47`"><img src="https://img.shields.io/badge/6ed6218c4-fix-green" alt="fix - 6ed6218c4" /></a></td> <td><strong>tabs:</strong> incorrect animation variable name (<a href="https://redirect.github.com/angular/components/issues/32941">#32941</a>)</td> </tr> </tbody> </table> <h3>google-maps</h3> </blockquote> <p>... (truncated)</p> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/angular/components/blob/main/CHANGELOG.md">@angular/cdk's changelog</a>.</em></p> <blockquote> <h1>22.0.0 "aurostibite-ambulance" (2026-06-03)</h1> <h2>Breaking Changes</h2> <h3>aria</h3> <ul> <li> <p>The legacy combobox and autocomplete implementations have been removed. Use the new standalone combobox instead.</p> <ul> <li>feat(aria/combobox): promote simple-combobox to stable un-prefixed combobox</li> </ul> <ul> <li>Relocates public, private, and example directories to clean <code>combobox</code> entry points.</li> <li>Renames internal layout symbols, selectors, and uppercase tokens (<code>SIMPLE_COMBOBOX_POPUP</code> -> <code>COMBOBOX_POPUP</code>).</li> <li>Establishes full documentation extraction parity with the <code>json_api</code> Bazel rule target.</li> <li>Standardizes the accompanying toolbar component showcase into the clean <code>aria-toolbar</code> path.</li> <li>Re-routes dev-app navigation links and migrates public API golden records.</li> </ul> </li> <li> <p><code>SimpleCombobox</code> has been promoted to <code>Combobox</code>. All <code>simple-combobox</code> prefixed symbols, selectors, and tokens have been renamed to use the <code>combobox</code> prefix.</p> <ul> <li>refactor(aria/combobox): relocate and restructure autocomplete and toolbar examples Relocate the autocomplete examples to <code>src/components-examples/aria/autocomplete</code> and toolbar examples to <code>src/components-examples/aria/toolbar</code>.</li> </ul> <ul> <li>Restore naming continuity with the historical codebase by stripping redundant prefixes from example filenames and component selectors.</li> <li>Sync dev-app preview routing layout paths and strict Bazel target dependency links.</li> </ul> </li> </ul> <h3>cdk</h3> <ul> <li> <ul> <li><code>CDK_DESCRIBEDBY_HOST_ATTRIBUTE</code> has been removed.</li> <li><code>CDK_DESCRIBEDBY_ID_PREFIX</code> has been removed.</li> <li>The <code>injector</code> parameter of the <code>ConfigurableFocusTrap</code> and <code>FocusTrap</code> constructors is now required.</li> <li>The boolean parameter of <code>ConfigurableFocusTrapFactory.create</code> has been replaced with a config object.</li> <li><code>MESSAGES_CONTAINER_ID</code> has been removed.</li> </ul> </li> <li> <ul> <li>The <code>event</code> parameter of <code>DropListRef.drop</code> is now required.</li> </ul> </li> <li> <ul> <li><code>ContextMenuTracker</code> has been renamed to <code>MenuTracker</code>.</li> </ul> </li> </ul> <h3>material</h3> <ul> <li> <ul> <li><code>MatListOption.checkboxPosition</code> has been removed. use <code>togglePosition</code> instead.</li> <li><code>MatListOptionCheckboxPosition</code> has been renamed to <code>MatListOptionTogglePosition</code>.</li> </ul> </li> <li> <ul> <li><code>ArrowViewState</code> has been removed.</li> <li><code>ArrowViewStateTransition</code> has been removed.</li> </ul> </li> </ul> <h3>multiple</h3> <ul> <li> <ul> <li>A bunch of constructors that with rest arguments have been removed. If you were extending Material/CDK components, you may have to update your <code>super</code> calls accordingly.</li> </ul> </li> <li> <p>Renames the values input/model to value in Combobox, Listbox, Tree, Menu, Toolbar, and Select. Users must update their templates to use the value property instead of values.</p> <ul> <li>refactor(multiple): update api goldens</li> </ul> </li> </ul> <h3>google-maps</h3> <table> <thead> <tr> <th>Commit</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="`e44ff83189`">e44ff8318</a></td> <td>feat</td> <td>Add support for the gmp-click event (<a href="https://redirect.github.com/angular/components/pull/33147">#33147</a>)</td> </tr> <tr> <td><a href="`b8201edeef`">b8201edee</a></td> <td>fix</td> <td>deprecate heatmap layer (<a href="https://redirect.github.com/angular/components/pull/33208">#33208</a>)</td> </tr> </tbody> </table> <h3>material</h3> <table> <thead> <tr> <th>Commit</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="`867ba993b3`">867ba993b</a></td> <td>feat</td> <td><strong>bottom-sheet:</strong> add the ability to pass bindings</td> </tr> <tr> <td><a href="`b4a89d5996`">b4a89d599</a></td> <td>feat</td> <td><strong>button:</strong> Add support for showing a progress indicator inside the button (<a href="https://redirect.github.com/angular/components/pull/32698">#32698</a>)</td> </tr> <tr> <td><a href="`a46b0a1d42`">a46b0a1d4</a></td> <td>feat</td> <td><strong>core:</strong> add mixins for Material Design typography (<a href="https://redirect.github.com/angular/components/pull/32959">#32959</a>)</td> </tr> <tr> <td><a href="`bf3596b53b`">bf3596b53</a></td> <td>feat</td> <td><strong>dialog:</strong> add the ability to pass bindings</td> </tr> <tr> <td><a href="`85c16fe4bb`">85c16fe4b</a></td> <td>feat</td> <td><strong>tabs:</strong> add support for separate tab animation durations (<a href="https://redirect.github.com/angular/components/pull/32869">#32869</a>)</td> </tr> <tr> <td><a href="`440cb16064`">440cb1606</a></td> <td>fix</td> <td><strong>autocomplete:</strong> remove modal workaround</td> </tr> </tbody> </table> </blockquote> <p>... (truncated)</p> </details> <details> <summary>Commits</summary> <ul> <li><a href="`85e1545a29`"><code>85e1545</code></a> release: cut the v22.0.0 release</li> <li><a href="`da5c575d91`"><code>da5c575</code></a> build: attempt to address flaky test (<a href="https://redirect.github.com/angular/components/issues/33332">#33332</a>)</li> <li><a href="`daa6d8db8e`"><code>daa6d8d</code></a> release: cut the v22.0.0-rc.3 release</li> <li><a href="`47c0525097`"><code>47c0525</code></a> build: prevent docs site from rendering Aria examples under Material (<a href="https://redirect.github.com/angular/components/issues/33324">#33324</a>)</li> <li><a href="`21f8bbbf22`"><code>21f8bbb</code></a> fix(material/badge): allow badge defaults to be configured (<a href="https://redirect.github.com/angular/components/issues/33312">#33312</a>)</li> <li><a href="`8c8d1a16cd`"><code>8c8d1a1</code></a> docs(material/bottom-sheet): update panelClass comment (<a href="https://redirect.github.com/angular/components/issues/33321">#33321</a>)</li> <li><a href="`8339e2fa31`"><code>8339e2f</code></a> build: update dev-infra actions to 649c3afeaa46674507b9625537e49de54a695e2b (...</li> <li><a href="`10935f0ed2`"><code>10935f0</code></a> refactor(multiple): migrate tests to use whenStable (<a href="https://redirect.github.com/angular/components/issues/33317">#33317</a>)</li> <li><a href="`9750685164`"><code>9750685</code></a> build: update bazel dependencies (<a href="https://redirect.github.com/angular/components/issues/33256">#33256</a>)</li> <li><a href="`5ba22b6f81`"><code>5ba22b6</code></a> build: update cross-repo angular dependencies (<a href="https://redirect.github.com/angular/components/issues/33270">#33270</a>)</li> <li>Additional commits viewable in <a href="https://github.com/angular/components/compare/v21.2.14...v22.0.0">compare view</a></li> </ul> </details> <br /> [![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=@angular/cdk&package-manager=npm_and_yarn&previous-version=21.2.14&new-version=22.0.0)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) </details>		1 day ago
..
element_embedding_demo	Dart 3.9 / Flutter 3.35 [first LLM release] (#2714 )	10 months ago
ng-flutter	Bump @angular/cdk from 21.2.14 to 22.0.0 in /web_embedding/ng-flutter (#2848 )	1 day ago
README.md	[web_embedding] Update README to link to our first community contribs. (#1980 )	3 years ago

README.md

web_embedding

This directory contains examples of how to embed Flutter in web apps (without iframes):

element_embedding_demo: Modifies the index.html of a flutter app so it is launched in a custom hostElement. This is the most basic embedding example.
ng-flutter: A simple Angular app (and component) that replicates the above example, but in an Angular style.

Check the README.md of each example for more details on how to run it, and the "Points of Interest" it may contain.

Community Contributions

Members of the community have graciously ported and contributed the following examples of Flutter Web embedding into other web frameworks:

Author	Host Framework	Code
@p-mazhnik	React JS	p-mazhnik/flutter-embedding cra-flutter
@p-mazhnik	React Native	p-mazhnik/flutter-embedding expo-flutter

(All contributions are welcome! Please, create an issue or open a PR to let us know how you've embedded a Flutter Web app with your favorite web framework (Vue? Svelte? Ember? Aurelia? jQuery? MooTools? Prototype?), so it can be added to the table above!)