├── .github
    ├── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   └── feature_request.md
    ├── PULL_REQUEST_TEMPLATE.md
    └── workflows
    │   └── release.yml
├── .gitignore
├── .prettierignore
├── .vscode
    └── settings.json
├── CHANGELOG.md
├── LICENSE
├── README.md
├── example
    ├── .browserslistrc
    ├── .editorconfig
    ├── .gitignore
    ├── .storybook
    │   ├── main.ts
    │   ├── preview.ts
    │   ├── tsconfig.json
    │   └── typings.d.ts
    ├── .vscode
    │   ├── extensions.json
    │   ├── launch.json
    │   └── tasks.json
    ├── README.md
    ├── angular.json
    ├── documentation.json
    ├── karma.conf.js
    ├── package.json
    ├── src
    │   ├── app
    │   │   ├── app.component.html
    │   │   ├── app.component.scss
    │   │   ├── app.component.spec.ts
    │   │   ├── app.component.ts
    │   │   ├── app.module.ts
    │   │   ├── ngrx
    │   │   │   ├── counter.actions.ts
    │   │   │   ├── counter.reducer.ts
    │   │   │   ├── my-counter.component.html
    │   │   │   ├── my-counter.component.ts
    │   │   │   ├── my-counter.spec.ts
    │   │   │   └── my-counter.stories.ts
    │   │   └── signal
    │   │   │   ├── with-signal-input.component.ts
    │   │   │   ├── with-signal-input.spec.ts
    │   │   │   └── with-signal-input.stories.ts
    │   ├── assets
    │   │   └── .gitkeep
    │   ├── environments
    │   │   ├── environment.prod.ts
    │   │   └── environment.ts
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── main.ts
    │   ├── polyfills.ts
    │   ├── stories
    │   │   ├── .eslintrc.json
    │   │   ├── Button.stories.ts
    │   │   ├── Header.stories.ts
    │   │   ├── Introduction.mdx
    │   │   ├── Page.stories.ts
    │   │   ├── User.ts
    │   │   ├── assets
    │   │   │   ├── code-brackets.svg
    │   │   │   ├── colors.svg
    │   │   │   ├── comments.svg
    │   │   │   ├── direction.svg
    │   │   │   ├── flow.svg
    │   │   │   ├── plugin.svg
    │   │   │   ├── repo.svg
    │   │   │   └── stackalt.svg
    │   │   ├── button.component.ts
    │   │   ├── button.css
    │   │   ├── button.spec.ts
    │   │   ├── header.component.ts
    │   │   ├── header.css
    │   │   ├── page.component.ts
    │   │   └── page.css
    │   ├── styles.scss
    │   └── test.ts
    ├── tsconfig.app.json
    ├── tsconfig.json
    ├── tsconfig.spec.json
    └── yarn.lock
├── package.json
├── src
    └── index.ts
├── tsconfig.json
└── yarn.lock


/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | **Additional context**
27 | Add any other context about the problem here.
28 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 | 
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 | 
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 | 
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | Issue: 
 2 | 
 3 | ## What Changed
 4 | 
 5 | <!-- Insert a description below -->
 6 | 
 7 | ## Checklist
 8 | 
 9 | Check the ones applicable to your change:
10 | 
11 | - [ ] Tests are updated
12 | - [ ] Documentation is updated
13 | 
14 | ## Change Type
15 | 
16 | Indicate the type of change your pull request is:
17 | 
18 | - [ ] `documentation`
19 | - [ ] `patch`
20 | - [ ] `minor`
21 | - [ ] `major`
22 | 


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Release
 2 | 
 3 | on: [push]
 4 | 
 5 | jobs:
 6 |   release:
 7 |     runs-on: ubuntu-latest
 8 |     if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
 9 |     steps:
10 |       - uses: actions/checkout@v2
11 | 
12 |       - name: Prepare repository
13 |         run: git fetch --unshallow --tags
14 | 
15 |       - name: Use Node.js 18.19.x
16 |         uses: actions/setup-node@v1
17 |         with:
18 |           node-version: 18.19.x
19 | 
20 |       - name: Install dependencies
21 |         uses: bahmutov/npm-install@v1
22 | 
23 |       - name: Create Release
24 |         env:
25 |           GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
26 |           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
27 |         run: |
28 |           yarn release
29 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.log
2 | .DS_Store
3 | dist
4 | 
5 | node_modules
6 | example/node_modules
7 | 
8 | .env


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | dist


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | 
 2 | {
 3 |   "prettier.bracketSpacing": true,
 4 |   "prettier.semi": false,
 5 |   "prettier.singleQuote": true,
 6 |   "prettier.trailingComma": "all",
 7 |   "prettier.tabWidth": 2,
 8 |   "prettier.printWidth": 100,
 9 |   "editor.formatOnSave": true,
10 |   "editor.tabSize": 2,
11 |   "deepscan.enable": true,
12 |   "typescript.tsdk": "node_modules\\typescript\\lib"
13 | }


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # v1.0.3 (Tue Jul 09 2024)
  2 | 
  3 | #### ⚠️ Pushed to `main`
  4 | 
  5 | - Merge branch 'next' ([@Marklb](https://github.com/Marklb))
  6 | - Update SB version in Readme ([@Marklb](https://github.com/Marklb))
  7 | - Fix composeStories types and example snippets ([@Marklb](https://github.com/Marklb))
  8 | - Upgrade dependencies ([@Marklb](https://github.com/Marklb))
  9 | - Update workflow node version ([@Marklb](https://github.com/Marklb))
 10 | - Upgrade to Storybook v8 ([@Marklb](https://github.com/Marklb))
 11 | - Upgrade example to Angular 18 ([@Marklb](https://github.com/Marklb))
 12 | - Upgrade example to Angular 17 ([@Marklb](https://github.com/Marklb))
 13 | - Before example upgrade ([@Marklb](https://github.com/Marklb))
 14 | 
 15 | #### Authors: 1
 16 | 
 17 | - Mark Berry ([@Marklb](https://github.com/Marklb))
 18 | 
 19 | ---
 20 | 
 21 | # v1.0.2 (Wed Nov 22 2023)
 22 | 
 23 | #### ⚠️ Pushed to `main`
 24 | 
 25 | - Merge branch 'next' into main ([@Marklb](https://github.com/Marklb))
 26 | - Change example tests to createMountable ([@Marklb](https://github.com/Marklb))
 27 | - Add `createMountable` and workaround for redundant component passing ([@Marklb](https://github.com/Marklb))
 28 | 
 29 | #### Authors: 1
 30 | 
 31 | - Mark Berry ([@Marklb](https://github.com/Marklb))
 32 | 
 33 | ---
 34 | 
 35 | # v0.0.13 (Wed Nov 22 2023)
 36 | 
 37 | #### 🐛 Bug Fix
 38 | 
 39 | - Use manual GH token [#4](https://github.com/storybookjs/testing-angular/pull/4) ([@shilman](https://github.com/shilman))
 40 | - Upgrade release workflow to node@16 [#3](https://github.com/storybookjs/testing-angular/pull/3) ([@shilman](https://github.com/shilman))
 41 | 
 42 | #### ⚠️ Pushed to `main`
 43 | 
 44 | - Return `applicationConfig`, instead of adding providers to root component ([@Marklb](https://github.com/Marklb))
 45 | - Merge remote-tracking branch 'origin/next' into next ([@Marklb](https://github.com/Marklb))
 46 | - Remove unused files ([@Marklb](https://github.com/Marklb))
 47 | - Refactor for Storybook v7 ([@Marklb](https://github.com/Marklb))
 48 | 
 49 | #### Authors: 2
 50 | 
 51 | - Mark Berry ([@Marklb](https://github.com/Marklb))
 52 | - Michael Shilman ([@shilman](https://github.com/shilman))
 53 | 
 54 | ---
 55 | 
 56 | # v0.0.12 (Thu Nov 25 2021)
 57 | 
 58 | #### ⚠️ Pushed to `main`
 59 | 
 60 | - Fix first render check ([@Marklb](https://github.com/Marklb))
 61 | 
 62 | #### Authors: 1
 63 | 
 64 | - Mark Berry ([@Marklb](https://github.com/Marklb))
 65 | 
 66 | ---
 67 | 
 68 | # v0.0.10 (Thu Nov 25 2021)
 69 | 
 70 | #### ⚠️ Pushed to `main`
 71 | 
 72 | - Fix first render check ([@Marklb](https://github.com/Marklb))
 73 | 
 74 | #### Authors: 1
 75 | 
 76 | - Mark Berry ([@Marklb](https://github.com/Marklb))
 77 | 
 78 | ---
 79 | 
 80 | # v0.0.9 (Sat Sep 25 2021)
 81 | 
 82 | #### ⚠️ Pushed to `main`
 83 | 
 84 | - Fix typo and consistency in README ([@Marklb](https://github.com/Marklb))
 85 | 
 86 | #### Authors: 1
 87 | 
 88 | - Mark Berry ([@Marklb](https://github.com/Marklb))
 89 | 
 90 | ---
 91 | 
 92 | # v0.0.8 (Wed Sep 22 2021)
 93 | 
 94 | #### ⚠️ Pushed to `main`
 95 | 
 96 | - Bump version to v0.0.7 ([@Marklb](https://github.com/Marklb))
 97 | - Rename to '@storybook/testing-angular' ([@Marklb](https://github.com/Marklb))
 98 | - Add github files ([@Marklb](https://github.com/Marklb))
 99 | - Bump version to v0.0.6 ([@Marklb](https://github.com/Marklb))
100 | - Update README from React to Angular ([@Marklb](https://github.com/Marklb))
101 | - Update code comments ([@Marklb](https://github.com/Marklb))
102 | - Call setGlobalConfig in example test setup ([@Marklb](https://github.com/Marklb))
103 | - Fix compiling of example ([@Marklb](https://github.com/Marklb))
104 | - Fix composeStory not adding component from Meta. ([@Marklb](https://github.com/Marklb))
105 | - Initial commit ([@Marklb](https://github.com/Marklb))
106 | - v0.0.2 ([@Marklb](https://github.com/Marklb))
107 | 
108 | #### Authors: 1
109 | 
110 | - Mark Berry ([@Marklb](https://github.com/Marklb))
111 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 |   
 2 | MIT License
 3 | 
 4 | Permission is hereby granted, free of charge, to any person obtaining a copy
 5 | of this software and associated documentation files (the "Software"), to deal
 6 | in the Software without restriction, including without limitation the rights
 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 8 | copies of the Software, and to permit persons to whom the Software is
 9 | furnished to do so, subject to the following conditions:
10 | 
11 | The above copyright notice and this permission notice shall be included in all
12 | copies or substantial portions of the Software.
13 | 
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
20 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <p align="center">
  2 |   <img src="https://user-images.githubusercontent.com/1671563/132940423-c8e09cff-7b08-4d35-bdcd-0f1263063f7b.png" alt="Storybook Testing Angular" width="100" />
  3 | </p>
  4 | 
  5 | <p align="center">Testing utilities that allow you to reuse your stories in your unit tests</p>
  6 | 
  7 | <br/>
  8 | 
  9 | ## The problem
 10 | 
 11 | You are using [Storybook](https://storybook.js.org/) for your components and writing tests for them with [Jasmine test framework](https://jasmine.github.io/) or [Angular testing library](https://testing-library.com/), most likely with [Karma test runner](https://karma-runner.github.io/). In your Storybook stories, you already defined the scenarios of your components. You also set up the necessary decorators (theming, routing, state management, etc.) to make them all render correctly. When you're writing tests, you also end up defining scenarios of your components, as well as setting up the necessary decorators. By doing the same thing twice, you feel like you're spending too much effort, making writing and maintaining stories/tests become less like fun and more like a burden.
 12 | 
 13 | ## The solution
 14 | 
 15 | `@storybook/testing-angular` is a solution to reuse your Storybook stories in your Angular tests. By reusing your stories in your tests, you have a catalog of component scenarios ready to be tested. All [args](https://storybook.js.org/docs/angular/writing-stories/args) and [decorators](https://storybook.js.org/docs/angular/writing-stories/decorators) from your [story](https://storybook.js.org/docs/angular/api/csf#named-story-exports) and its [meta](https://storybook.js.org/docs/angular/api/csf#default-export), and also [global decorators](https://storybook.js.org/docs/angular/writing-stories/decorators#global-decorators), will be composed by this library and returned to you in a simple component. This way, in your unit tests, all you have to do is select which story you want to render, and all the necessary setup will be already done for you. This is the missing piece that allows for better shareability and maintenance between writing tests and writing Storybook stories.
 16 | 
 17 | ## Installation
 18 | 
 19 | This library should be installed as one of your project's `devDependencies`:
 20 | 
 21 | via [npm](https://www.npmjs.com/)
 22 | 
 23 | <!-- ```
 24 | npm install --save-dev @storybook/testing-angular
 25 | ```
 26 | 
 27 | or via [yarn](https://classic.yarnpkg.com/)
 28 | 
 29 | ```
 30 | yarn add --dev @storybook/testing-angular
 31 | ``` -->
 32 | 
 33 | ## Setup
 34 | 
 35 | ### Storybook 8 and Component Story Format
 36 | 
 37 | This library requires you to be using Storybook version 8, [Component Story Format (CSF)](https://storybook.js.org/docs/angular/api/csf) and [hoisted CSF annotations](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-annotations), which is the recommended way to write stories since Storybook 8.
 38 | 
 39 | Essentially, if you use Storybook 8 and your stories look similar to this, you're good to go!
 40 | 
 41 | ```ts
 42 | // CSF: default export (meta) + named exports (stories)
 43 | export default {
 44 |   title: 'Example/Button',
 45 |   component: Button,
 46 | } as Meta;
 47 | 
 48 | const Primary: Story<ButtonComponent> = args => (args: ButtonComponent) => ({
 49 |   props: args,
 50 | }); // or with Template.bind({})
 51 | Primary.args = {
 52 |   primary: true,
 53 | };
 54 | ```
 55 | 
 56 | ### Global config
 57 | 
 58 | > This is an optional step. If you don't have [global decorators](https://storybook.js.org/docs/angular/writing-stories/decorators#global-decorators), there's no need to do this. However, if you do, this is a necessary step for your global decorators to be applied.
 59 | 
 60 | If you have global decorators/parameters/etc and want them applied to your stories when testing them, you first need to set this up. You can do this by adding to test [setup file](https://angular.io/guide/testing#configuration):
 61 | 
 62 | ```ts
 63 | // test.ts <-- this will run before the tests in karma.
 64 | import { setProjectAnnotations } from '@storybook/testing-angular';
 65 | import * as globalStorybookConfig from '../.storybook/preview'; // path of your preview.js file
 66 | 
 67 | setProjectAnnotations(globalStorybookConfig);
 68 | ```
 69 | 
 70 | ## Usage
 71 | 
 72 | ### `composeStories`
 73 | 
 74 | `composeStories` will process all stories from the component you specify, compose args/decorators in all of them and return an object containing the composed stories.
 75 | 
 76 | If you use the composed story (e.g. PrimaryButton), the component will render with the args that are passed in the story. However, you are free to pass any props on top of the component, and those props will override the default values passed in the story's args.
 77 | 
 78 | ```ts
 79 | import { render, screen } from '@testing-library/angular';
 80 | import {
 81 |   composeStories,
 82 |   createMountable,
 83 | } from '@storybook/testing-angular';
 84 | import * as stories from './button.stories'; // import all stories from the stories file
 85 | import Meta from './button.stories';
 86 | 
 87 | // Every component that is returned maps 1:1 with the stories, but they already contain all decorators from story level, meta level and global level.
 88 | const { Primary, Secondary } = composeStories(stories);
 89 | 
 90 | describe('button', () => {
 91 |   it('renders primary button with default args', async () => {
 92 |     const { component, applicationConfig } = createMountable(
 93 |       Primary({})
 94 |     );
 95 |     await render(component, { providers: applicationConfig.providers });
 96 |     const buttonElement = screen.getByText(
 97 |       /Text coming from args in stories file!/i
 98 |     );
 99 |     expect(buttonElement).not.toBeNull();
100 |   });
101 | 
102 |   it('renders primary button with overriden props', async () => {
103 |     const { component, applicationConfig } = createMountable(
104 |       Primary({ label: 'Hello world' })
105 |     ); // you can override props and they will get merged with values from the Story's args
106 |     await render(component, { providers: applicationConfig.providers });
107 |     const buttonElement = screen.getByText(/Hello world/i);
108 |     expect(buttonElement).not.toBeNull();
109 |   });
110 | });
111 | ```
112 | 
113 | ### `composeStory`
114 | 
115 | You can use `composeStory` if you wish to apply it for a single story rather than all of your stories. You need to pass the meta (default export) as well.
116 | 
117 | ```ts
118 | import { render, screen } from '@testing-library/angular';
119 | import {
120 |   composeStory,
121 |   createMountable,
122 | } from '@storybook/testing-angular';
123 | import Meta, { Primary as PrimaryStory } from './button.stories';
124 | 
125 | // Returns a component that already contain all decorators from story level, meta level and global level.
126 | const Primary = composeStory(PrimaryStory, Meta);
127 | 
128 | describe('button', () => {
129 |   it('onclick handler is called', async () => {
130 |     const onClickSpy = jasmine.createSpy();
131 |     const { component, applicationConfig } = createMountable(
132 |       Primary({ onClick: onClickSpy })
133 |     );
134 |     await render(component, { provider: applicationConfig.provider });
135 |     const buttonElement = screen.getByText(Primary.args?.label!);
136 |     buttonElement.click();
137 |     expect(onClickSpy).toHaveBeenCalled();
138 |   });
139 | });
140 | ```
141 | 
142 | ### Reusing story properties
143 | 
144 | The components returned by `composeStories` or `composeStory` not only can be rendered as Angular components, but also come with the combined properties from story, meta and global configuration. This means that if you want to access `args` or `parameters`, for instance, you can do so:
145 | 
146 | ```ts
147 | import { render, screen } from '@testing-library/angular';
148 | import {
149 |   composeStory,
150 |   createMountable,
151 | } from '@storybook/testing-angular';
152 | import * as stories from './button.stories';
153 | import Meta from './button.stories';
154 | 
155 | const { Primary } = composeStories(stories);
156 | 
157 | describe('button', () => {
158 |   it('reuses args from composed story', async () => {
159 |     const { component, applicationConfig } = createMountable(Primary({}));
160 |     await render(component, { providers: applicationConfig.providers });
161 |     expect(screen.getByText(Primary.args?.label!)).not.toBeNull();
162 |   });
163 | });
164 | ```
165 | 
166 | > **If you're using Typescript**: Given that some of the returned properties are not required, typescript might perceive them as nullable properties and present an error. If you are sure that they exist (e.g. certain arg that is set in the story), you can use the [non-null assertion operator](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator) to tell typescript that it's all good:
167 | 
168 | ```tsx
169 | // ERROR: Object is possibly 'undefined'
170 | Primary.args.children;
171 | 
172 | // SUCCESS: 🎉
173 | Primary.args!.children;
174 | ```
175 | 
176 | ## Typescript
177 | 
178 | `@storybook/testing-angular` is typescript ready and provides autocompletion to easily detect all stories of your component:
179 | 
180 | ![component autocompletion](https://user-images.githubusercontent.com/1671563/111436219-034d1600-8702-11eb-82bb-36913b235787.png)
181 | 
182 | It also provides the props of the components just as you would normally expect when using them directly in your tests:
183 | 
184 | ![props autocompletion](https://user-images.githubusercontent.com/1671563/111436252-0d6f1480-8702-11eb-8186-0102863f66f1.png)
185 | 
186 | Type inference is only possible in projects that have either `strict` or `strictBindApplyCall` modes set to `true` in their `tsconfig.json` file. You also need a TypeScript version over 4.0.0. If you don't have proper type inference, this might be the reason.
187 | 
188 | ```jsonc
189 | // tsconfig.json
190 | {
191 |   "compilerOptions": {
192 |     // ...
193 |     "strict": true, // You need either this option
194 |     "strictBindCallApply": true // or this option
195 |     // ...
196 |   }
197 |   // ...
198 | }
199 | ```
200 | 
201 | ### Disclaimer
202 | 
203 | For the types to be automatically picked up, your stories must be typed. See an example:
204 | 
205 | ```ts
206 | import { Story, Meta } from '@storybook/angular';
207 | 
208 | import { ButtonComponent } from './button.component';
209 | 
210 | export default {
211 |   title: 'Components/Button',
212 |   component: ButtonComponent,
213 | } as Meta;
214 | 
215 | // Story<Props> is the key piece needed for typescript validation
216 | const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
217 |   props: args,
218 | });
219 | 
220 | export const Primary = Template.bind({});
221 | Primary.args = {
222 |   primary: true,
223 |   label: 'Button',
224 | };
225 | ```
226 | 
227 | ## License
228 | 
229 | [MIT](./LICENSE)
230 | 


--------------------------------------------------------------------------------
/example/.browserslistrc:
--------------------------------------------------------------------------------
 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | 
 5 | # For the full list of supported browsers by the Angular framework, please see:
 6 | # https://angular.io/guide/browser-support
 7 | 
 8 | # You can see what browsers were selected by your queries by running:
 9 | #   npx browserslist
10 | 
11 | last 1 Chrome version
12 | last 1 Firefox version
13 | last 2 Edge major versions
14 | last 2 Safari major versions
15 | last 2 iOS major versions
16 | Firefox ESR
17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
18 | 


--------------------------------------------------------------------------------
/example/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.ts]
12 | quote_type = single
13 | 
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 | 


--------------------------------------------------------------------------------
/example/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # Compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | /bazel-out
 8 | 
 9 | # Node
10 | /node_modules
11 | npm-debug.log
12 | yarn-error.log
13 | 
14 | # IDEs and editors
15 | .idea/
16 | .project
17 | .classpath
18 | .c9/
19 | *.launch
20 | .settings/
21 | *.sublime-workspace
22 | 
23 | # Visual Studio Code
24 | .vscode/*
25 | !.vscode/settings.json
26 | !.vscode/tasks.json
27 | !.vscode/launch.json
28 | !.vscode/extensions.json
29 | .history/*
30 | 
31 | # Miscellaneous
32 | /.angular/cache
33 | .sass-cache/
34 | /connect.lock
35 | /coverage
36 | /libpeerconnection.log
37 | testem.log
38 | /typings
39 | 
40 | # System files
41 | .DS_Store
42 | Thumbs.db
43 | 


--------------------------------------------------------------------------------
/example/.storybook/main.ts:
--------------------------------------------------------------------------------
 1 | import type { StorybookConfig } from '@storybook/angular';
 2 | const config: StorybookConfig = {
 3 |   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
 4 |   addons: [
 5 |     '@storybook/addon-links',
 6 |     '@storybook/addon-essentials',
 7 |     '@storybook/addon-interactions',
 8 |   ],
 9 |   framework: {
10 |     name: '@storybook/angular',
11 |     options: {},
12 |   },
13 |   docs: {
14 |     autodocs: 'tag',
15 |   },
16 | };
17 | export default config;
18 | 


--------------------------------------------------------------------------------
/example/.storybook/preview.ts:
--------------------------------------------------------------------------------
 1 | import type { Preview } from '@storybook/angular';
 2 | import { setCompodocJson } from '@storybook/addon-docs/angular';
 3 | import docJson from '../documentation.json';
 4 | setCompodocJson(docJson);
 5 | 
 6 | const preview: Preview = {
 7 |   parameters: {
 8 |     actions: { argTypesRegex: '^on[A-Z].*' },
 9 |     controls: {
10 |       matchers: {
11 |         color: /(background|color)$/i,
12 |         date: /Date$/,
13 |       },
14 |     },
15 |   },
16 | };
17 | 
18 | export default preview;
19 | 


--------------------------------------------------------------------------------
/example/.storybook/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.app.json",
 3 |   "compilerOptions": {
 4 |     "types": ["node"],
 5 |     "allowSyntheticDefaultImports": true,
 6 |     "resolveJsonModule": true
 7 |   },
 8 |   "exclude": ["../src/test.ts", "../src/**/*.spec.ts"],
 9 |   "include": ["../src/**/*", "./preview.ts"],
10 |   "files": ["./typings.d.ts"]
11 | }
12 | 


--------------------------------------------------------------------------------
/example/.storybook/typings.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.md' {
2 |   const content: string;
3 |   export default content;
4 | }
5 | 


--------------------------------------------------------------------------------
/example/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3 |   "recommendations": ["angular.ng-template"]
4 | }
5 | 


--------------------------------------------------------------------------------
/example/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 3 |   "version": "0.2.0",
 4 |   "configurations": [
 5 |     {
 6 |       "name": "ng serve",
 7 |       "type": "chrome",
 8 |       "request": "launch",
 9 |       "preLaunchTask": "npm: start",
10 |       "url": "http://localhost:4200/"
11 |     },
12 |     {
13 |       "name": "ng test",
14 |       "type": "chrome",
15 |       "request": "launch",
16 |       "preLaunchTask": "npm: test",
17 |       "url": "http://localhost:9876/debug.html"
18 |     }
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/example/.vscode/tasks.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
 3 |   "version": "2.0.0",
 4 |   "tasks": [
 5 |     {
 6 |       "type": "npm",
 7 |       "script": "start",
 8 |       "isBackground": true,
 9 |       "problemMatcher": {
10 |         "owner": "typescript",
11 |         "pattern": "$tsc",
12 |         "background": {
13 |           "activeOnStart": true,
14 |           "beginsPattern": {
15 |             "regexp": "(.*?)"
16 |           },
17 |           "endsPattern": {
18 |             "regexp": "bundle generation complete"
19 |           }
20 |         }
21 |       }
22 |     },
23 |     {
24 |       "type": "npm",
25 |       "script": "test",
26 |       "isBackground": true,
27 |       "problemMatcher": {
28 |         "owner": "typescript",
29 |         "pattern": "$tsc",
30 |         "background": {
31 |           "activeOnStart": true,
32 |           "beginsPattern": {
33 |             "regexp": "(.*?)"
34 |           },
35 |           "endsPattern": {
36 |             "regexp": "bundle generation complete"
37 |           }
38 |         }
39 |       }
40 |     }
41 |   ]
42 | }
43 | 


--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
 1 | # Example
 2 | 
 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.0.2.
 4 | 
 5 | ## Development server
 6 | 
 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
 8 | 
 9 | ## Code scaffolding
10 | 
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 | 
13 | ## Build
14 | 
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16 | 
17 | ## Running unit tests
18 | 
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 | 
21 | ## Running end-to-end tests
22 | 
23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
24 | 
25 | ## Further help
26 | 
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
28 | 


--------------------------------------------------------------------------------
/example/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "example": {
  7 |       "projectType": "application",
  8 |       "schematics": {
  9 |         "@schematics/angular:component": {
 10 |           "style": "scss"
 11 |         }
 12 |       },
 13 |       "root": "",
 14 |       "sourceRoot": "src",
 15 |       "prefix": "app",
 16 |       "architect": {
 17 |         "build": {
 18 |           "builder": "@angular-devkit/build-angular:application",
 19 |           "options": {
 20 |             "outputPath": {
 21 |               "base": "dist/example"
 22 |             },
 23 |             "index": "src/index.html",
 24 |             "polyfills": ["zone.js"],
 25 |             "tsConfig": "tsconfig.app.json",
 26 |             "inlineStyleLanguage": "scss",
 27 |             "assets": ["src/favicon.ico", "src/assets"],
 28 |             "styles": ["src/styles.scss"],
 29 |             "scripts": [],
 30 |             "sourceMap": true,
 31 |             "browser": "src/main.ts"
 32 |           },
 33 |           "configurations": {
 34 |             "production": {
 35 |               "budgets": [
 36 |                 {
 37 |                   "type": "initial",
 38 |                   "maximumWarning": "500kb",
 39 |                   "maximumError": "1mb"
 40 |                 },
 41 |                 {
 42 |                   "type": "anyComponentStyle",
 43 |                   "maximumWarning": "2kb",
 44 |                   "maximumError": "4kb"
 45 |                 }
 46 |               ],
 47 |               "outputHashing": "all"
 48 |             },
 49 |             "development": {
 50 |               "optimization": false,
 51 |               "extractLicenses": false,
 52 |               "sourceMap": true,
 53 |               "namedChunks": true
 54 |             }
 55 |           },
 56 |           "defaultConfiguration": "production"
 57 |         },
 58 |         "serve": {
 59 |           "builder": "@angular-devkit/build-angular:dev-server",
 60 |           "configurations": {
 61 |             "production": {
 62 |               "buildTarget": "example:build:production"
 63 |             },
 64 |             "development": {
 65 |               "buildTarget": "example:build:development"
 66 |             }
 67 |           },
 68 |           "defaultConfiguration": "development"
 69 |         },
 70 |         "extract-i18n": {
 71 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 72 |           "options": {
 73 |             "buildTarget": "example:build"
 74 |           }
 75 |         },
 76 |         "test": {
 77 |           "builder": "@angular-devkit/build-angular:karma",
 78 |           "options": {
 79 |             "polyfills": ["zone.js", "zone.js/testing"],
 80 |             "tsConfig": "tsconfig.spec.json",
 81 |             "inlineStyleLanguage": "scss",
 82 |             "assets": ["src/favicon.ico", "src/assets"],
 83 |             "styles": ["src/styles.scss"],
 84 |             "scripts": [],
 85 |             "sourceMap": true
 86 |           }
 87 |         },
 88 |         "storybook": {
 89 |           "builder": "@storybook/angular:start-storybook",
 90 |           "options": {
 91 |             "configDir": ".storybook",
 92 |             "browserTarget": "example:build",
 93 |             "compodoc": true,
 94 |             "compodocArgs": ["-e", "json", "-d", "."],
 95 |             "port": 6009,
 96 |             "open": false
 97 |           }
 98 |         },
 99 |         "build-storybook": {
100 |           "builder": "@storybook/angular:build-storybook",
101 |           "options": {
102 |             "configDir": ".storybook",
103 |             "browserTarget": "example:build",
104 |             "compodoc": true,
105 |             "compodocArgs": ["-e", "json", "-d", "."],
106 |             "outputDir": "storybook-static"
107 |           }
108 |         }
109 |       }
110 |     }
111 |   }
112 | }
113 | 


--------------------------------------------------------------------------------
/example/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       jasmine: {
17 |         // you can add configuration options for Jasmine here
18 |         // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 |         // for example, you can disable the random execution with `random: false`
20 |         // or set a specific seed with `seed: 4321`
21 |       },
22 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
23 |     },
24 |     jasmineHtmlReporter: {
25 |       suppressAll: true // removes the duplicated traces
26 |     },
27 |     coverageReporter: {
28 |       dir: require('path').join(__dirname, './coverage/example'),
29 |       subdir: '.',
30 |       reporters: [
31 |         { type: 'html' },
32 |         { type: 'text-summary' }
33 |       ]
34 |     },
35 |     reporters: ['progress', 'kjhtml'],
36 |     port: 9876,
37 |     colors: true,
38 |     logLevel: config.LOG_INFO,
39 |     autoWatch: true,
40 |     browsers: ['Chrome'],
41 |     singleRun: false,
42 |     restartOnFileChange: true
43 |   });
44 | };
45 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "ng": "ng",
 6 |     "start": "ng serve",
 7 |     "build": "ng build",
 8 |     "watch": "ng build --watch --configuration development",
 9 |     "test": "ng test",
10 |     "storybook": "ng run example:storybook",
11 |     "build-storybook": "ng run example:build-storybook"
12 |   },
13 |   "private": true,
14 |   "dependencies": {
15 |     "@angular/animations": "^18.0.1",
16 |     "@angular/common": "^18.0.1",
17 |     "@angular/compiler": "^18.0.1",
18 |     "@angular/core": "^18.0.1",
19 |     "@angular/forms": "^18.0.1",
20 |     "@angular/platform-browser": "^18.0.1",
21 |     "@angular/platform-browser-dynamic": "^18.0.1",
22 |     "@angular/router": "^18.0.1",
23 |     "@ngrx/store": "^17.2.0",
24 |     "@testing-library/angular": "^14.1.1",
25 |     "rxjs": "~7.8.0",
26 |     "tslib": "^2.6.2",
27 |     "zone.js": "~0.14.6"
28 |   },
29 |   "devDependencies": {
30 |     "@angular-devkit/build-angular": "^18.0.2",
31 |     "@angular/cli": "~18.0.2",
32 |     "@angular/compiler-cli": "^18.0.1",
33 |     "@compodoc/compodoc": "^1.1.21",
34 |     "@storybook/addon-essentials": "^8.1.5",
35 |     "@storybook/addon-interactions": "^8.1.5",
36 |     "@storybook/addon-links": "^8.1.5",
37 |     "@storybook/angular": "^8.1.5",
38 |     "@storybook/blocks": "^8.1.5",
39 |     "@types/jasmine": "~4.3.0",
40 |     "jasmine-core": "~4.6.0",
41 |     "karma": "~6.4.0",
42 |     "karma-chrome-launcher": "~3.2.0",
43 |     "karma-coverage": "~2.2.0",
44 |     "karma-jasmine": "~5.1.0",
45 |     "karma-jasmine-html-reporter": "~2.0.0",
46 |     "react": "^18.2.0",
47 |     "react-dom": "^18.2.0",
48 |     "storybook": "^8.1.5",
49 |     "typescript": "~5.4.5"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/example/src/app/app.component.html:
--------------------------------------------------------------------------------
  1 | <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
  2 | <!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
  3 | <!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
  4 | <!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
  5 | <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
  6 | <!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
  7 | <!-- * * * * * * * to get started with your project! * * * * * * * * -->
  8 | <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
  9 | 
 10 | <style>
 11 |   :host {
 12 |     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 13 |     font-size: 14px;
 14 |     color: #333;
 15 |     box-sizing: border-box;
 16 |     -webkit-font-smoothing: antialiased;
 17 |     -moz-osx-font-smoothing: grayscale;
 18 |   }
 19 | 
 20 |   h1,
 21 |   h2,
 22 |   h3,
 23 |   h4,
 24 |   h5,
 25 |   h6 {
 26 |     margin: 8px 0;
 27 |   }
 28 | 
 29 |   p {
 30 |     margin: 0;
 31 |   }
 32 | 
 33 |   .spacer {
 34 |     flex: 1;
 35 |   }
 36 | 
 37 |   .toolbar {
 38 |     position: absolute;
 39 |     top: 0;
 40 |     left: 0;
 41 |     right: 0;
 42 |     height: 60px;
 43 |     display: flex;
 44 |     align-items: center;
 45 |     background-color: #1976d2;
 46 |     color: white;
 47 |     font-weight: 600;
 48 |   }
 49 | 
 50 |   .toolbar img {
 51 |     margin: 0 16px;
 52 |   }
 53 | 
 54 |   .toolbar #twitter-logo {
 55 |     height: 40px;
 56 |     margin: 0 8px;
 57 |   }
 58 | 
 59 |   .toolbar #youtube-logo {
 60 |     height: 40px;
 61 |     margin: 0 16px;
 62 |   }
 63 | 
 64 |   .toolbar #twitter-logo:hover,
 65 |   .toolbar #youtube-logo:hover {
 66 |     opacity: 0.8;
 67 |   }
 68 | 
 69 |   .content {
 70 |     display: flex;
 71 |     margin: 82px auto 32px;
 72 |     padding: 0 16px;
 73 |     max-width: 960px;
 74 |     flex-direction: column;
 75 |     align-items: center;
 76 |   }
 77 | 
 78 |   svg.material-icons {
 79 |     height: 24px;
 80 |     width: auto;
 81 |   }
 82 | 
 83 |   svg.material-icons:not(:last-child) {
 84 |     margin-right: 8px;
 85 |   }
 86 | 
 87 |   .card svg.material-icons path {
 88 |     fill: #888;
 89 |   }
 90 | 
 91 |   .card-container {
 92 |     display: flex;
 93 |     flex-wrap: wrap;
 94 |     justify-content: center;
 95 |     margin-top: 16px;
 96 |   }
 97 | 
 98 |   .card {
 99 |     all: unset;
100 |     border-radius: 4px;
101 |     border: 1px solid #eee;
102 |     background-color: #fafafa;
103 |     height: 40px;
104 |     width: 200px;
105 |     margin: 0 8px 16px;
106 |     padding: 16px;
107 |     display: flex;
108 |     flex-direction: row;
109 |     justify-content: center;
110 |     align-items: center;
111 |     transition: all 0.2s ease-in-out;
112 |     line-height: 24px;
113 |   }
114 | 
115 |   .card-container .card:not(:last-child) {
116 |     margin-right: 0;
117 |   }
118 | 
119 |   .card.card-small {
120 |     height: 16px;
121 |     width: 168px;
122 |   }
123 | 
124 |   .card-container .card:not(.highlight-card) {
125 |     cursor: pointer;
126 |   }
127 | 
128 |   .card-container .card:not(.highlight-card):hover {
129 |     transform: translateY(-3px);
130 |     box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
131 |   }
132 | 
133 |   .card-container .card:not(.highlight-card):hover .material-icons path {
134 |     fill: rgb(105, 103, 103);
135 |   }
136 | 
137 |   .card.highlight-card {
138 |     background-color: #1976d2;
139 |     color: white;
140 |     font-weight: 600;
141 |     border: none;
142 |     width: auto;
143 |     min-width: 30%;
144 |     position: relative;
145 |   }
146 | 
147 |   .card.card.highlight-card span {
148 |     margin-left: 60px;
149 |   }
150 | 
151 |   svg#rocket {
152 |     width: 80px;
153 |     position: absolute;
154 |     left: -10px;
155 |     top: -24px;
156 |   }
157 | 
158 |   svg#rocket-smoke {
159 |     height: calc(100vh - 95px);
160 |     position: absolute;
161 |     top: 10px;
162 |     right: 180px;
163 |     z-index: -10;
164 |   }
165 | 
166 |   a,
167 |   a:visited,
168 |   a:hover {
169 |     color: #1976d2;
170 |     text-decoration: none;
171 |   }
172 | 
173 |   a:hover {
174 |     color: #125699;
175 |   }
176 | 
177 |   .terminal {
178 |     position: relative;
179 |     width: 80%;
180 |     max-width: 600px;
181 |     border-radius: 6px;
182 |     padding-top: 45px;
183 |     margin-top: 8px;
184 |     overflow: hidden;
185 |     background-color: rgb(15, 15, 16);
186 |   }
187 | 
188 |   .terminal::before {
189 |     content: "\2022 \2022 \2022";
190 |     position: absolute;
191 |     top: 0;
192 |     left: 0;
193 |     height: 4px;
194 |     background: rgb(58, 58, 58);
195 |     color: #c2c3c4;
196 |     width: 100%;
197 |     font-size: 2rem;
198 |     line-height: 0;
199 |     padding: 14px 0;
200 |     text-indent: 4px;
201 |   }
202 | 
203 |   .terminal pre {
204 |     font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
205 |     color: white;
206 |     padding: 0 1rem 1rem;
207 |     margin: 0;
208 |   }
209 | 
210 |   .circle-link {
211 |     height: 40px;
212 |     width: 40px;
213 |     border-radius: 40px;
214 |     margin: 8px;
215 |     background-color: white;
216 |     border: 1px solid #eeeeee;
217 |     display: flex;
218 |     justify-content: center;
219 |     align-items: center;
220 |     cursor: pointer;
221 |     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
222 |     transition: 1s ease-out;
223 |   }
224 | 
225 |   .circle-link:hover {
226 |     transform: translateY(-0.25rem);
227 |     box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
228 |   }
229 | 
230 |   footer {
231 |     margin-top: 8px;
232 |     display: flex;
233 |     align-items: center;
234 |     line-height: 20px;
235 |   }
236 | 
237 |   footer a {
238 |     display: flex;
239 |     align-items: center;
240 |   }
241 | 
242 |   .github-star-badge {
243 |     color: #24292e;
244 |     display: flex;
245 |     align-items: center;
246 |     font-size: 12px;
247 |     padding: 3px 10px;
248 |     border: 1px solid rgba(27,31,35,.2);
249 |     border-radius: 3px;
250 |     background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
251 |     margin-left: 4px;
252 |     font-weight: 600;
253 |   }
254 | 
255 |   .github-star-badge:hover {
256 |     background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
257 |     border-color: rgba(27,31,35,.35);
258 |     background-position: -.5em;
259 |   }
260 | 
261 |   .github-star-badge .material-icons {
262 |     height: 16px;
263 |     width: 16px;
264 |     margin-right: 4px;
265 |   }
266 | 
267 |   svg#clouds {
268 |     position: fixed;
269 |     bottom: -160px;
270 |     left: -230px;
271 |     z-index: -10;
272 |     width: 1920px;
273 |   }
274 | 
275 |   /* Responsive Styles */
276 |   @media screen and (max-width: 767px) {
277 |     .card-container > *:not(.circle-link) ,
278 |     .terminal {
279 |       width: 100%;
280 |     }
281 | 
282 |     .card:not(.highlight-card) {
283 |       height: 16px;
284 |       margin: 8px 0;
285 |     }
286 | 
287 |     .card.highlight-card span {
288 |       margin-left: 72px;
289 |     }
290 | 
291 |     svg#rocket-smoke {
292 |       right: 120px;
293 |       transform: rotate(-5deg);
294 |     }
295 |   }
296 | 
297 |   @media screen and (max-width: 575px) {
298 |     svg#rocket-smoke {
299 |       display: none;
300 |       visibility: hidden;
301 |     }
302 |   }
303 | </style>
304 | 
305 | <!-- Toolbar -->
306 | <div class="toolbar" role="banner">
307 |   <img
308 |     width="40"
309 |     alt="Angular Logo"
310 |     src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
311 |   />
312 |   <span>Welcome</span>
313 |     <div class="spacer"></div>
314 |     <a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
315 |       <svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
316 |         <rect width="400" height="400" fill="none"/>
317 |         <path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
318 |       </svg>
319 |     </a>
320 |     <a aria-label="Angular on YouTube" target="_blank" rel="noopener" href="https://youtube.com/angular" title="YouTube">
321 |       <svg id="youtube-logo" height="24" width="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff">
322 |         <path d="M0 0h24v24H0V0z" fill="none"/>
323 |         <path d="M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z"/>
324 |       </svg>
325 |     </a>
326 | </div>
327 | 
328 | <div class="content" role="main">
329 | 
330 |   <!-- Highlight Card -->
331 |   <div class="card highlight-card card-small">
332 | 
333 |     <svg id="rocket" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678" viewBox="0 0 101.678 101.678">
334 |       <title>Rocket Ship</title>
335 |       <g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
336 |         <circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)" fill="#dd0031"/>
337 |         <g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
338 |           <path id="Path_33" data-name="Path 33" d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z" transform="translate(0.371 3.363)" fill="#fff"/>
339 |           <path id="Path_34" data-name="Path 34" d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z" transform="translate(0 0.005)" fill="#fff"/>
340 |         </g>
341 |       </g>
342 |     </svg>
343 | 
344 |     <span>{{ title }} app is running!</span>
345 | 
346 |     <svg id="rocket-smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632" viewBox="0 0 516.119 1083.632">
347 |       <title>Rocket Ship Smoke</title>
348 |       <path id="Path_40" data-name="Path 40" d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z" transform="translate(-147.025 -140.939)" fill="#f5f5f5"/>
349 |     </svg>
350 | 
351 |   </div>
352 | 
353 |   <!-- Resources -->
354 |   <h2>Resources</h2>
355 |   <p>Here are some links to help you get started:</p>
356 | 
357 |   <div class="card-container">
358 |     <a class="card" target="_blank" rel="noopener" href="https://angular.io/tutorial">
359 |       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
360 |       <span>Learn Angular</span>
361 |       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>    </a>
362 | 
363 |     <a class="card" target="_blank" rel="noopener" href="https://angular.io/cli">
364 |       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
365 |       <span>CLI Documentation</span>
366 |       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
367 |     </a>
368 | 
369 |     <a class="card" target="_blank" rel="noopener" href="https://material.angular.io">
370 |       <svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 8px" width="21.813" height="23.453" viewBox="0 0 179.2 192.7"><path fill="#ffa726" d="M89.4 0 0 32l13.5 118.4 75.9 42.3 76-42.3L179.2 32 89.4 0z"/><path fill="#fb8c00" d="M89.4 0v192.7l76-42.3L179.2 32 89.4 0z"/><path fill="#ffe0b2" d="m102.9 146.3-63.3-30.5 36.3-22.4 63.7 30.6-36.7 22.3z"/><path fill="#fff3e0" d="M102.9 122.8 39.6 92.2l36.3-22.3 63.7 30.6-36.7 22.3z"/><path fill="#fff" d="M102.9 99.3 39.6 68.7l36.3-22.4 63.7 30.6-36.7 22.4z"/></svg>
371 |       <span>Angular Material</span>
372 |       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
373 |     </a>
374 | 
375 |     <a class="card" target="_blank" rel="noopener" href="https://blog.angular.io/">
376 |       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>
377 |       <span>Angular Blog</span>
378 |       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
379 |     </a>
380 | 
381 |     <a class="card" target="_blank" rel="noopener" href="https://angular.io/devtools/">
382 |       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M14.73,13.31C15.52,12.24,16,10.93,16,9.5C16,5.91,13.09,3,9.5,3S3,5.91,3,9.5C3,13.09,5.91,16,9.5,16 c1.43,0,2.74-0.48,3.81-1.27L19.59,21L21,19.59L14.73,13.31z M9.5,14C7.01,14,5,11.99,5,9.5S7.01,5,9.5,5S14,7.01,14,9.5 S11.99,14,9.5,14z"/><polygon points="10.29,8.44 9.5,6 8.71,8.44 6.25,8.44 8.26,10.03 7.49,12.5 9.5,10.97 11.51,12.5 10.74,10.03 12.75,8.44"/></g></g></svg>
383 |       <span>Angular DevTools</span>
384 |       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
385 |     </a>
386 | 
387 |   </div>
388 | 
389 |   <!-- Next Steps -->
390 |   <h2>Next Steps</h2>
391 |   <p>What do you want to do next with your app?</p>
392 | 
393 |   <input type="hidden" #selection>
394 | 
395 |   <div class="card-container">
396 |     <button class="card card-small" (click)="selection.value = 'component'" tabindex="0">
397 |       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
398 |       <span>New Component</span>
399 |     </button>
400 | 
401 |     <button class="card card-small" (click)="selection.value = 'material'" tabindex="0">
402 |       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
403 |       <span>Angular Material</span>
404 |     </button>
405 | 
406 |     <button class="card card-small" (click)="selection.value = 'pwa'" tabindex="0">
407 |       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
408 |       <span>Add PWA Support</span>
409 |     </button>
410 | 
411 |     <button class="card card-small" (click)="selection.value = 'dependency'" tabindex="0">
412 |       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
413 |       <span>Add Dependency</span>
414 |     </button>
415 | 
416 |     <button class="card card-small" (click)="selection.value = 'test'" tabindex="0">
417 |       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
418 |       <span>Run and Watch Tests</span>
419 |     </button>
420 | 
421 |     <button class="card card-small" (click)="selection.value = 'build'" tabindex="0">
422 |       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
423 |       <span>Build for Production</span>
424 |     </button>
425 |   </div>
426 | 
427 |   <!-- Terminal -->
428 |   <div class="terminal" [ngSwitch]="selection.value">
429 |       <pre *ngSwitchDefault>ng generate component xyz</pre>
430 |       <pre *ngSwitchCase="'material'">ng add &#64;angular/material</pre>
431 |       <pre *ngSwitchCase="'pwa'">ng add &#64;angular/pwa</pre>
432 |       <pre *ngSwitchCase="'dependency'">ng add _____</pre>
433 |       <pre *ngSwitchCase="'test'">ng test</pre>
434 |       <pre *ngSwitchCase="'build'">ng build</pre>
435 |   </div>
436 | 
437 |   <!-- Links -->
438 |   <div class="card-container">
439 |     <a class="circle-link" title="Find a Local Meetup" href="https://www.meetup.com/find/?keywords=angular" target="_blank" rel="noopener">
440 |       <svg xmlns="http://www.w3.org/2000/svg" width="24.607" height="23.447" viewBox="0 0 24.607 23.447">
441 |         <title>Meetup Logo</title>
442 |         <path id="logo--mSwarm" d="M21.221,14.95A4.393,4.393,0,0,1,17.6,19.281a4.452,4.452,0,0,1-.8.069c-.09,0-.125.035-.154.117a2.939,2.939,0,0,1-2.506,2.091,2.868,2.868,0,0,1-2.248-.624.168.168,0,0,0-.245-.005,3.926,3.926,0,0,1-2.589.741,4.015,4.015,0,0,1-3.7-3.347,2.7,2.7,0,0,1-.043-.38c0-.106-.042-.146-.143-.166a3.524,3.524,0,0,1-1.516-.69A3.623,3.623,0,0,1,2.23,14.557a3.66,3.66,0,0,1,1.077-3.085.138.138,0,0,0,.026-.2,3.348,3.348,0,0,1-.451-1.821,3.46,3.46,0,0,1,2.749-3.28.44.44,0,0,0,.355-.281,5.072,5.072,0,0,1,3.863-3,5.028,5.028,0,0,1,3.555.666.31.31,0,0,0,.271.03A4.5,4.5,0,0,1,18.3,4.7a4.4,4.4,0,0,1,1.334,2.751,3.658,3.658,0,0,1,.022.706.131.131,0,0,0,.1.157,2.432,2.432,0,0,1,1.574,1.645,2.464,2.464,0,0,1-.7,2.616c-.065.064-.051.1-.014.166A4.321,4.321,0,0,1,21.221,14.95ZM13.4,14.607a2.09,2.09,0,0,0,1.409,1.982,4.7,4.7,0,0,0,1.275.221,1.807,1.807,0,0,0,.9-.151.542.542,0,0,0,.321-.545.558.558,0,0,0-.359-.534,1.2,1.2,0,0,0-.254-.078c-.262-.047-.526-.086-.787-.138a.674.674,0,0,1-.617-.75,3.394,3.394,0,0,1,.218-1.109c.217-.658.509-1.286.79-1.918a15.609,15.609,0,0,0,.745-1.86,1.95,1.95,0,0,0,.06-1.073,1.286,1.286,0,0,0-1.051-1.033,1.977,1.977,0,0,0-1.521.2.339.339,0,0,1-.446-.042c-.1-.092-.2-.189-.307-.284a1.214,1.214,0,0,0-1.643-.061,7.563,7.563,0,0,1-.614.512A.588.588,0,0,1,10.883,8c-.215-.115-.437-.215-.659-.316a2.153,2.153,0,0,0-.695-.248A2.091,2.091,0,0,0,7.541,8.562a9.915,9.915,0,0,0-.405.986c-.559,1.545-1.015,3.123-1.487,4.7a1.528,1.528,0,0,0,.634,1.777,1.755,1.755,0,0,0,1.5.211,1.35,1.35,0,0,0,.824-.858c.543-1.281,1.032-2.584,1.55-3.875.142-.355.28-.712.432-1.064a.548.548,0,0,1,.851-.24.622.622,0,0,1,.185.539,2.161,2.161,0,0,1-.181.621c-.337.852-.68,1.7-1.018,2.552a2.564,2.564,0,0,0-.173.528.624.624,0,0,0,.333.71,1.073,1.073,0,0,0,.814.034,1.22,1.22,0,0,0,.657-.655q.758-1.488,1.511-2.978.35-.687.709-1.37a1.073,1.073,0,0,1,.357-.434.43.43,0,0,1,.463-.016.373.373,0,0,1,.153.387.7.7,0,0,1-.057.236c-.065.157-.127.316-.2.469-.42.883-.846,1.763-1.262,2.648A2.463,2.463,0,0,0,13.4,14.607Zm5.888,6.508a1.09,1.09,0,0,0-2.179.006,1.09,1.09,0,0,0,2.179-.006ZM1.028,12.139a1.038,1.038,0,1,0,.01-2.075,1.038,1.038,0,0,0-.01,2.075ZM13.782.528a1.027,1.027,0,1,0-.011,2.055A1.027,1.027,0,0,0,13.782.528ZM22.21,6.95a.882.882,0,0,0-1.763.011A.882.882,0,0,0,22.21,6.95ZM4.153,4.439a.785.785,0,1,0,.787-.78A.766.766,0,0,0,4.153,4.439Zm8.221,18.22a.676.676,0,1,0-.677.666A.671.671,0,0,0,12.374,22.658ZM22.872,12.2a.674.674,0,0,0-.665.665.656.656,0,0,0,.655.643.634.634,0,0,0,.655-.644A.654.654,0,0,0,22.872,12.2ZM7.171-.123A.546.546,0,0,0,6.613.43a.553.553,0,1,0,1.106,0A.539.539,0,0,0,7.171-.123ZM24.119,9.234a.507.507,0,0,0-.493.488.494.494,0,0,0,.494.494.48.48,0,0,0,.487-.483A.491.491,0,0,0,24.119,9.234Zm-19.454,9.7a.5.5,0,0,0-.488-.488.491.491,0,0,0-.487.5.483.483,0,0,0,.491.479A.49.49,0,0,0,4.665,18.936Z" transform="translate(0 0.123)" fill="#f64060"/>
443 |       </svg>
444 |     </a>
445 | 
446 |     <a class="circle-link" title="Join the Conversation on Discord" href="https://discord.gg/angular" target="_blank" rel="noopener">
447 |       <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 245 240">
448 |         <title>Discord Logo</title>
449 |         <path d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z"/>
450 |         <path d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z"/>
451 |       </svg>
452 |     </a>
453 |   </div>
454 | 
455 |   <!-- Footer -->
456 |   <footer>
457 |       Love Angular?&nbsp;
458 |       <a href="https://github.com/angular/angular" target="_blank" rel="noopener"> Give our repo a star.
459 |         <div class="github-star-badge">
460 |             <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
461 |           Star
462 |         </div>
463 |       </a>
464 |       <a href="https://github.com/angular/angular" target="_blank" rel="noopener">
465 |         <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"/><path d="M0 0h24v24H0z" fill="none"/></svg>
466 |       </a>
467 |   </footer>
468 | 
469 |   <svg id="clouds" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677" viewBox="0 0 2611.084 485.677">
470 |     <title>Gray Clouds Background</title>
471 |     <path id="Path_39" data-name="Path 39" d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z" transform="translate(142.69 -634.312)" fill="#eee"/>
472 |   </svg>
473 | 
474 | </div>
475 | 
476 | <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
477 | <!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
478 | <!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
479 | <!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
480 | <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
481 | <!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
482 | <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
483 | 
484 | 


--------------------------------------------------------------------------------
/example/src/app/app.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/storybookjs/testing-angular/52995bb0d2ff1daaddca54430d626ec42d8dc1eb/example/src/app/app.component.scss


--------------------------------------------------------------------------------
/example/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | import { AppComponent } from './app.component';
 3 | 
 4 | describe('AppComponent', () => {
 5 |   beforeEach(() => TestBed.configureTestingModule({
 6 |     declarations: [AppComponent]
 7 |   }));
 8 | 
 9 |   it('should create the app', () => {
10 |     const fixture = TestBed.createComponent(AppComponent);
11 |     const app = fixture.componentInstance;
12 |     expect(app).toBeTruthy();
13 |   });
14 | 
15 |   it(`should have as title 'example'`, () => {
16 |     const fixture = TestBed.createComponent(AppComponent);
17 |     const app = fixture.componentInstance;
18 |     expect(app.title).toEqual('example');
19 |   });
20 | 
21 |   it('should render title', () => {
22 |     const fixture = TestBed.createComponent(AppComponent);
23 |     fixture.detectChanges();
24 |     const compiled = fixture.nativeElement as HTMLElement;
25 |     expect(compiled.querySelector('.content span')?.textContent).toContain('example app is running!');
26 |   });
27 | });
28 | 


--------------------------------------------------------------------------------
/example/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-root',
 5 |   templateUrl: './app.component.html',
 6 |   styleUrls: ['./app.component.scss']
 7 | })
 8 | export class AppComponent {
 9 |   title = 'example';
10 | }
11 | 


--------------------------------------------------------------------------------
/example/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { BrowserModule } from '@angular/platform-browser';
 3 | 
 4 | import { AppComponent } from './app.component';
 5 | 
 6 | @NgModule({
 7 |   declarations: [
 8 |     AppComponent
 9 |   ],
10 |   imports: [
11 |     BrowserModule
12 |   ],
13 |   providers: [],
14 |   bootstrap: [AppComponent]
15 | })
16 | export class AppModule { }
17 | 


--------------------------------------------------------------------------------
/example/src/app/ngrx/counter.actions.ts:
--------------------------------------------------------------------------------
1 | import { createAction } from '@ngrx/store';
2 | 
3 | export const increment = createAction('[Counter Component] Increment');
4 | export const decrement = createAction('[Counter Component] Decrement');
5 | export const reset = createAction('[Counter Component] Reset');
6 | 


--------------------------------------------------------------------------------
/example/src/app/ngrx/counter.reducer.ts:
--------------------------------------------------------------------------------
 1 | import { createReducer, on } from '@ngrx/store';
 2 | import { increment, decrement, reset } from './counter.actions';
 3 | 
 4 | export const initialState = 0;
 5 | 
 6 | export const counterReducer = createReducer(
 7 |   initialState,
 8 |   on(increment, (state) => state + 1),
 9 |   on(decrement, (state) => state - 1),
10 |   on(reset, (state) => 0)
11 | );
12 | 


--------------------------------------------------------------------------------
/example/src/app/ngrx/my-counter.component.html:
--------------------------------------------------------------------------------
1 | <button id="increment" (click)="increment()">Increment</button>
2 | 
3 | <div>Current Count: {{ count$ | async }}</div>
4 | 
5 | <button id="decrement" (click)="decrement()">Decrement</button>
6 | 
7 | <button id="reset" (click)="reset()">Reset Counter</button>


--------------------------------------------------------------------------------
/example/src/app/ngrx/my-counter.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { Store } from '@ngrx/store';
 3 | import { Observable } from 'rxjs';
 4 | 
 5 | import { increment, decrement, reset } from './counter.actions';
 6 | 
 7 | @Component({
 8 |   selector: 'app-my-counter',
 9 |   templateUrl: './my-counter.component.html',
10 | })
11 | export class MyCounterComponent {
12 |   count$: Observable<number>;
13 | 
14 |   constructor(private store: Store<{ count: number }>) {
15 |     this.count$ = store.select('count');
16 |   }
17 | 
18 |   increment() {
19 |     this.store.dispatch(increment());
20 |   }
21 | 
22 |   decrement() {
23 |     this.store.dispatch(decrement());
24 |   }
25 | 
26 |   reset() {
27 |     this.store.dispatch(reset());
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/example/src/app/ngrx/my-counter.spec.ts:
--------------------------------------------------------------------------------
 1 | import { composeStories, composeStory, createMountable } from '@storybook/testing-angular';
 2 | 
 3 | import { render, screen } from '@testing-library/angular';
 4 | 
 5 | import * as stories from './my-counter.stories';
 6 | import meta, { Primary } from './my-counter.stories';
 7 | 
 8 | const composed = composeStories(stories);
 9 | 
10 | const _Primary = composeStory(Primary, meta);
11 | 
12 | describe('interactive stories test', () => {
13 |   describe('composeStories', () => {
14 |     it('should render and validate story', async () => {
15 |       const { component, applicationConfig } = createMountable(composed.Primary({}));
16 |       await render(component, { providers: applicationConfig.providers });
17 |       expect(screen.getByText("Current Count: 0")).not.toBeNull();
18 |     });
19 |   });
20 | 
21 |   describe('composeStory', () => {
22 |     it('should render and validate story', async () => {
23 |       const { component, applicationConfig } = createMountable(_Primary({}));
24 |       await render(component, { providers: applicationConfig.providers });
25 |       expect(screen.getByText("Current Count: 0")).not.toBeNull();
26 |     });
27 |   });
28 | });
29 | 


--------------------------------------------------------------------------------
/example/src/app/ngrx/my-counter.stories.ts:
--------------------------------------------------------------------------------
 1 | import { Meta, applicationConfig } from '@storybook/angular';
 2 | 
 3 | import { provideStore } from '@ngrx/store';
 4 | 
 5 | import { counterReducer } from './counter.reducer';
 6 | import { MyCounterComponent } from './my-counter.component';
 7 | 
 8 | export default {
 9 |   title: 'NGRX/MyCounter',
10 |   component: MyCounterComponent,
11 |   decorators: [
12 |     applicationConfig({
13 |       providers: [
14 |         provideStore({ count: counterReducer })
15 |       ],
16 |     }),
17 |   ],
18 | } as Meta<MyCounterComponent>;
19 | 
20 | export const Primary = {
21 |   render: (args: MyCounterComponent) => ({
22 |     props: args,
23 |   }),
24 |   args: {},
25 | };
26 | 


--------------------------------------------------------------------------------
/example/src/app/signal/with-signal-input.component.ts:
--------------------------------------------------------------------------------
 1 | import { CommonModule } from '@angular/common';
 2 | import { Component, input } from '@angular/core';
 3 | 
 4 | @Component({
 5 |   selector: 'app-with-signal-input',
 6 |   template: `<div>Is Primary: {{ primary() }}</div>`,
 7 |   standalone: true,
 8 |   imports: [
 9 |     CommonModule,
10 |   ],
11 | })
12 | export default class WithSignalInputComponent {
13 |   primary = input(false);
14 | }
15 | 


--------------------------------------------------------------------------------
/example/src/app/signal/with-signal-input.spec.ts:
--------------------------------------------------------------------------------
 1 | import { composeStories, createMountable } from '@storybook/testing-angular';
 2 | 
 3 | import { render, screen } from '@testing-library/angular';
 4 | 
 5 | import * as stories from './with-signal-input.stories';
 6 | 
 7 | const composed = composeStories(stories);
 8 | 
 9 | describe('with signal input stories test', () =>
10 |   it('should render and validate story', async () => {
11 |     const { component, applicationConfig } = createMountable(composed.Primary({}));
12 |     await render(component, { providers: applicationConfig.providers });
13 |     expect(screen.getByText("Is Primary: false")).not.toBeNull();
14 |   }));
15 | 


--------------------------------------------------------------------------------
/example/src/app/signal/with-signal-input.stories.ts:
--------------------------------------------------------------------------------
 1 | import { Meta, StoryObj } from '@storybook/angular';
 2 | 
 3 | import WithSignalInputComponent from './with-signal-input.component';
 4 | 
 5 | export default {
 6 |   title: 'Signal/WithSignalInput',
 7 |   component: WithSignalInputComponent,
 8 | } as Meta<WithSignalInputComponent>;
 9 | 
10 | export const Primary: StoryObj<WithSignalInputComponent> = {};
11 | 


--------------------------------------------------------------------------------
/example/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/storybookjs/testing-angular/52995bb0d2ff1daaddca54430d626ec42d8dc1eb/example/src/assets/.gitkeep


--------------------------------------------------------------------------------
/example/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/example/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * For easier debugging in development mode, you can import the following file
11 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 |  *
13 |  * This import should be commented out in production mode because it will have a negative impact
14 |  * on performance if an error is thrown.
15 |  */
16 | // import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
17 | 


--------------------------------------------------------------------------------
/example/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/storybookjs/testing-angular/52995bb0d2ff1daaddca54430d626ec42d8dc1eb/example/src/favicon.ico


--------------------------------------------------------------------------------
/example/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Example</title>
 6 |   <base href="/">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
 9 | </head>
10 | <body>
11 |   <app-root></app-root>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/example/src/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 | 
3 | import { AppModule } from './app/app.module';
4 | 
5 | 
6 | platformBrowserDynamic().bootstrapModule(AppModule)
7 |   .catch(err => console.error(err));
8 | 


--------------------------------------------------------------------------------
/example/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /**
22 |  * IE11 requires the following for NgClass support on SVG elements
23 |  */
24 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
25 | 
26 | /**
27 |  * Web Animations `@angular/platform-browser/animations`
28 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
29 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
30 |  */
31 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
32 | 
33 | /**
34 |  * By default, zone.js will patch all possible macroTask and DomEvents
35 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
36 |  * because those flags need to be set before `zone.js` being loaded, and webpack
37 |  * will put import in the top of bundle, so user need to create a separate file
38 |  * in this directory (for example: zone-flags.ts), and put the following flags
39 |  * into that file, and then add the following code before importing zone.js.
40 |  * import './zone-flags';
41 |  *
42 |  * The flags allowed in zone-flags.ts are listed here.
43 |  *
44 |  * The following flags will work for all browsers.
45 |  *
46 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
47 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
48 |  * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
49 |  *
50 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
51 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
52 |  *
53 |  *  (window as any).__Zone_enable_cross_context_check = true;
54 |  *
55 |  */
56 | 
57 | /***************************************************************************************************
58 |  * Zone JS is required by default for Angular itself.
59 |  */
60 | import 'zone.js';  // Included with Angular CLI.
61 | 
62 | 
63 | /***************************************************************************************************
64 |  * APPLICATION IMPORTS
65 |  */
66 | 


--------------------------------------------------------------------------------
/example/src/stories/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "rules": {
3 |     "@typescript-eslint/consistent-type-imports": ["error", { "disallowTypeAnnotations": false }]
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/example/src/stories/Button.stories.ts:
--------------------------------------------------------------------------------
 1 | import type { Meta, StoryObj } from '@storybook/angular';
 2 | import { ButtonComponent } from './button.component';
 3 | 
 4 | // More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
 5 | const meta: Meta<ButtonComponent> = {
 6 |   title: 'Example/Button',
 7 |   component: ButtonComponent,
 8 |   tags: ['autodocs'],
 9 |   render: args => ({
10 |     props: {
11 |       backgroundColor: null,
12 |       ...args,
13 |     },
14 |   }),
15 |   argTypes: {
16 |     backgroundColor: {
17 |       control: 'color',
18 |     },
19 |   },
20 | };
21 | 
22 | export default meta;
23 | type Story = StoryObj<ButtonComponent>;
24 | 
25 | // More on writing stories with args: https://storybook.js.org/docs/angular/writing-stories/args
26 | export const Primary: Story = {
27 |   args: {
28 |     primary: true,
29 |     label: 'Button',
30 |   },
31 | };
32 | 
33 | export const Secondary: Story = {
34 |   args: {
35 |     label: 'Button',
36 |   },
37 | };
38 | 
39 | export const Large: Story = {
40 |   args: {
41 |     size: 'large',
42 |     label: 'Button',
43 |   },
44 | };
45 | 
46 | export const Small: Story = {
47 |   args: {
48 |     size: 'small',
49 |     label: 'Button',
50 |   },
51 | };
52 | 
53 | export const Other: Story = {
54 |   render: args => ({
55 |     props: args,
56 |     template: `<storybook-button [primary]="primary" [label]="label"></storybook-button>`
57 |   }),
58 |   args: {
59 |     primary: true,
60 |     label: 'Button',
61 |   },
62 | };
63 | 


--------------------------------------------------------------------------------
/example/src/stories/Header.stories.ts:
--------------------------------------------------------------------------------
 1 | import { moduleMetadata } from '@storybook/angular';
 2 | import type { Meta, StoryObj } from '@storybook/angular';
 3 | import { CommonModule } from '@angular/common';
 4 | 
 5 | import { ButtonComponent } from './button.component';
 6 | import Header from './header.component';
 7 | 
 8 | const meta: Meta<Header> = {
 9 |   title: 'Example/Header',
10 |   component: Header,
11 |   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/angular/writing-docs/autodocs
12 |   tags: ['autodocs'],
13 |   render: (args) => ({ props: args }),
14 |   decorators: [
15 |     moduleMetadata({
16 |       declarations: [ButtonComponent],
17 |       imports: [CommonModule],
18 |     }),
19 |   ],
20 |   parameters: {
21 |     // More on how to position stories at: https://storybook.js.org/docs/angular/configure/story-layout
22 |     layout: 'fullscreen',
23 |   },
24 | };
25 | 
26 | export default meta;
27 | type Story = StoryObj<Header>;
28 | 
29 | export const LoggedIn: Story = {
30 |   args: {
31 |     user: {
32 |       name: 'Jane Doe',
33 |     },
34 |   },
35 | };
36 | 
37 | export const LoggedOut: Story = {};
38 | 


--------------------------------------------------------------------------------
/example/src/stories/Introduction.mdx:
--------------------------------------------------------------------------------
  1 | import { Meta } from '@storybook/blocks';
  2 | import Code from './assets/code-brackets.svg';
  3 | import Colors from './assets/colors.svg';
  4 | import Comments from './assets/comments.svg';
  5 | import Direction from './assets/direction.svg';
  6 | import Flow from './assets/flow.svg';
  7 | import Plugin from './assets/plugin.svg';
  8 | import Repo from './assets/repo.svg';
  9 | import StackAlt from './assets/stackalt.svg';
 10 | 
 11 | <Meta title="Example/Introduction" />
 12 | 
 13 | <style>
 14 |   {`
 15 |     .subheading {
 16 |       --mediumdark: '#999999';
 17 |       font-weight: 700;
 18 |       font-size: 13px;
 19 |       color: #999;
 20 |       letter-spacing: 6px;
 21 |       line-height: 24px;
 22 |       text-transform: uppercase;
 23 |       margin-bottom: 12px;
 24 |       margin-top: 40px;
 25 |     }
 26 | 
 27 |     .link-list {
 28 |       display: grid;
 29 |       grid-template-columns: 1fr;
 30 |       grid-template-rows: 1fr 1fr;
 31 |       row-gap: 10px;
 32 |     }
 33 | 
 34 |     @media (min-width: 620px) {
 35 |       .link-list {
 36 |         row-gap: 20px;
 37 |         column-gap: 20px;
 38 |         grid-template-columns: 1fr 1fr;
 39 |       }
 40 |     }
 41 | 
 42 |     @media all and (-ms-high-contrast:none) {
 43 |     .link-list {
 44 |         display: -ms-grid;
 45 |         -ms-grid-columns: 1fr 1fr;
 46 |         -ms-grid-rows: 1fr 1fr;
 47 |       }
 48 |     }
 49 | 
 50 |     .link-item {
 51 |       display: block;
 52 |       padding: 20px;
 53 |       border: 1px solid #00000010;
 54 |       border-radius: 5px;
 55 |       transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
 56 |       color: #333333;
 57 |       display: flex;
 58 |       align-items: flex-start;
 59 |     }
 60 | 
 61 |     .link-item:hover {
 62 |       border-color: #1EA7FD50;
 63 |       transform: translate3d(0, -3px, 0);
 64 |       box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
 65 |     }
 66 | 
 67 |     .link-item:active {
 68 |       border-color: #1EA7FD;
 69 |       transform: translate3d(0, 0, 0);
 70 |     }
 71 | 
 72 |     .link-item strong {
 73 |       font-weight: 700;
 74 |       display: block;
 75 |       margin-bottom: 2px;
 76 |     }
 77 | 
 78 |     .link-item img {
 79 |       height: 40px;
 80 |       width: 40px;
 81 |       margin-right: 15px;
 82 |       flex: none;
 83 |     }
 84 | 
 85 |     .link-item span,
 86 |     .link-item p {
 87 |       margin: 0;
 88 |       font-size: 14px;
 89 |       line-height: 20px;
 90 |     }
 91 | 
 92 |     .tip {
 93 |       display: inline-block;
 94 |       border-radius: 1em;
 95 |       font-size: 11px;
 96 |       line-height: 12px;
 97 |       font-weight: 700;
 98 |       background: #E7FDD8;
 99 |       color: #66BF3C;
100 |       padding: 4px 12px;
101 |       margin-right: 10px;
102 |       vertical-align: top;
103 |     }
104 | 
105 |     .tip-wrapper {
106 |       font-size: 13px;
107 |       line-height: 20px;
108 |       margin-top: 40px;
109 |       margin-bottom: 40px;
110 |     }
111 | 
112 |     .tip-wrapper code {
113 |       font-size: 12px;
114 |       display: inline-block;
115 |     }
116 |   `}
117 | </style>
118 | 
119 | # Welcome to Storybook
120 | 
121 | Storybook helps you build UI components in isolation from your app's business logic, data, and context.
122 | That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
123 | 
124 | Browse example stories now by navigating to them in the sidebar.
125 | View their code in the `stories` directory to learn how they work.
126 | We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
127 | 
128 | <div className="subheading">Configure</div>
129 | 
130 | <div className="link-list">
131 |   <a
132 |     className="link-item"
133 |     href="https://storybook.js.org/docs/react/addons/addon-types"
134 |     target="_blank"
135 |   >
136 |     <img src={Plugin} alt="plugin" />
137 |     <span>
138 |       <strong>Presets for popular tools</strong>
139 |       Easy setup for TypeScript, SCSS and more.
140 |     </span>
141 |   </a>
142 |   <a
143 |     className="link-item"
144 |     href="https://storybook.js.org/docs/react/configure/webpack"
145 |     target="_blank"
146 |   >
147 |     <img src={StackAlt} alt="Build" />
148 |     <span>
149 |       <strong>Build configuration</strong>
150 |       How to customize webpack and Babel
151 |     </span>
152 |   </a>
153 |   <a
154 |     className="link-item"
155 |     href="https://storybook.js.org/docs/react/configure/styling-and-css"
156 |     target="_blank"
157 |   >
158 |     <img src={Colors} alt="colors" />
159 |     <span>
160 |       <strong>Styling</strong>
161 |       How to load and configure CSS libraries
162 |     </span>
163 |   </a>
164 |   <a
165 |     className="link-item"
166 |     href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
167 |     target="_blank"
168 |   >
169 |     <img src={Flow} alt="flow" />
170 |     <span>
171 |       <strong>Data</strong>
172 |       Providers and mocking for data libraries
173 |     </span>
174 |   </a>
175 | </div>
176 | 
177 | <div className="subheading">Learn</div>
178 | 
179 | <div className="link-list">
180 |   <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
181 |     <img src={Repo} alt="repo" />
182 |     <span>
183 |       <strong>Storybook documentation</strong>
184 |       Configure, customize, and extend
185 |     </span>
186 |   </a>
187 |   <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
188 |     <img src={Direction} alt="direction" />
189 |     <span>
190 |       <strong>In-depth guides</strong>
191 |       Best practices from leading teams
192 |     </span>
193 |   </a>
194 |   <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
195 |     <img src={Code} alt="code" />
196 |     <span>
197 |       <strong>GitHub project</strong>
198 |       View the source and add issues
199 |     </span>
200 |   </a>
201 |   <a className="link-item" href="https://discord.gg/storybook" target="_blank">
202 |     <img src={Comments} alt="comments" />
203 |     <span>
204 |       <strong>Discord chat</strong>
205 |       Chat with maintainers and the community
206 |     </span>
207 |   </a>
208 | </div>
209 | 
210 | <div className="tip-wrapper">
211 |   <span className="tip">Tip</span>Edit the Markdown in{' '}
212 |   <code>stories/Introduction.stories.mdx</code>
213 | </div>
214 | 


--------------------------------------------------------------------------------
/example/src/stories/Page.stories.ts:
--------------------------------------------------------------------------------
 1 | import type { Meta, StoryObj } from '@storybook/angular';
 2 | import { moduleMetadata } from '@storybook/angular';
 3 | import { within, userEvent } from '@storybook/test';
 4 | import { CommonModule } from '@angular/common';
 5 | 
 6 | import { ButtonComponent } from './button.component';
 7 | import Header from './header.component';
 8 | import Page from './page.component';
 9 | 
10 | const meta: Meta<Page> = {
11 |   title: 'Example/Page',
12 |   component: Page,
13 |   parameters: {
14 |     // More on how to position stories at: https://storybook.js.org/docs/angular/configure/story-layout
15 |     layout: 'fullscreen',
16 |   },
17 |   decorators: [
18 |     moduleMetadata({
19 |       declarations: [ButtonComponent, Header],
20 |       imports: [CommonModule],
21 |     }),
22 |   ],
23 | };
24 | 
25 | export default meta;
26 | type Story = StoryObj<Page>;
27 | 
28 | export const LoggedOut: Story = {
29 |   render: (args: Page) => ({
30 |     props: args,
31 |   }),
32 | };
33 | 
34 | // More on interaction testing: https://storybook.js.org/docs/angular/writing-tests/interaction-testing
35 | export const LoggedIn: Story = {
36 |   render: (args: Page) => ({
37 |     props: args,
38 |   }),
39 |   play: async ({ canvasElement }) => {
40 |     const canvas = within(canvasElement);
41 |     const loginButton = await canvas.getByRole('button', {
42 |       name: /Log in/i,
43 |     });
44 |     await userEvent.click(loginButton);
45 |   },
46 | };
47 | 


--------------------------------------------------------------------------------
/example/src/stories/User.ts:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line @typescript-eslint/no-empty-interface
2 | export interface User {}
3 | 


--------------------------------------------------------------------------------
/example/src/stories/assets/code-brackets.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/code-brackets</title><g id="illustration/code-brackets" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#87E6E5" d="M11.4139325,12 C11.7605938,12 12,12.5059743 12,13.3779712 L12,17.4951758 L6.43502246,23.3839989 C5.85499251,23.9978337 5.85499251,25.0021663 6.43502246,25.6160011 L12,31.5048242 L12,35.6220288 C12,36.4939606 11.7605228,37 11.4139325,37 C11.2725831,37 11.1134406,36.9158987 10.9453839,36.7379973 L0.435022463,25.6160011 C-0.145007488,25.0021663 -0.145007488,23.9978337 0.435022463,23.3839989 L10.9453839,12.2620027 C11.1134051,12.0841663 11.2725831,12 11.4139325,12 Z M36.5860675,12 C36.7274169,12 36.8865594,12.0841013 37.0546161,12.2620027 L47.5649775,23.3839989 C48.1450075,23.9978337 48.1450075,25.0021663 47.5649775,25.6160011 L37.0546161,36.7379973 C36.8865949,36.9158337 36.7274169,37 36.5860675,37 C36.2394062,37 36,36.4940257 36,35.6220288 L36,31.5048242 L41.5649775,25.6160011 C42.1450075,25.0021663 42.1450075,23.9978337 41.5649775,23.3839989 L36,17.4951758 L36,13.3779712 C36,12.5060394 36.2394772,12 36.5860675,12 Z"/><rect id="Rectangle-7-Copy-5" width="35.57" height="4" x="5.009" y="22.662" fill="#A0DB77" rx="2" transform="translate(22.793959, 24.662305) rotate(-75.000000) translate(-22.793959, -24.662305)"/></g></svg>


--------------------------------------------------------------------------------
/example/src/stories/assets/colors.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/colors</title><g id="illustration/colors" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><circle id="Oval" cx="23.763" cy="16.192" r="13.271" fill="#FC521F" opacity=".6"/><circle id="Oval-Copy" cx="15.468" cy="32.308" r="13.271" fill="#66BF3C" opacity=".6"/><path id="Combined-Shape" fill="#FF5F95" d="M15.4683651,19.0362231 C21.5434817,19.0362231 26.6652087,23.1181689 28.2404554,28.6889694 C26.8420385,29.1906678 25.3344184,29.4637769 23.7630101,29.4637769 C17.6878936,29.4637769 12.5661666,25.3818311 10.9909199,19.8110306 C12.3898993,19.3092302 13.8972501,19.0362231 15.4683651,19.0362231 Z"/><circle id="Oval-Copy-2" cx="32.532" cy="32.308" r="13.271" fill="#1EA7FD" opacity=".6"/><path id="Combined-Shape" fill="#87E6E5" d="M24.00025,22.1417324 C26.897967,24.5762286 28.7397972,28.2268506 28.7397972,32.3076552 C28.7397972,36.3884597 26.897967,40.0390817 24.00025,42.4735779 C21.1018087,40.038637 19.2602028,36.3882111 19.2602028,32.3076552 C19.2602028,28.2815316 21.0530043,24.6741393 23.8838362,22.2402492 Z"/><path id="Combined-Shape" fill="#FBD178" d="M32.5316349,19.0362231 C33.9415155,19.0362231 35.3000478,19.2560712 36.5748203,19.6633557 C35.0489179,25.3104816 29.8909911,29.4637769 23.7630101,29.4637769 C22.3527608,29.4637769 20.9938866,29.2438138 19.7188247,28.8363247 C21.2451195,23.1900077 26.403293,19.0362231 32.5316349,19.0362231 Z"/><path id="Combined-Shape" fill="#FFF" d="M24.00025,22.1417324 L24.0124326,22.1519799 C24.1747744,22.288701 24.3337918,22.4292434 24.4893463,22.5734686 L24.3896855,22.4820008 C24.4671836,22.552408 24.5438453,22.6237194 24.619654,22.6959185 L24.4893463,22.5734686 C24.5690639,22.6473803 24.6478719,22.7222591 24.7257519,22.7980864 L24.619654,22.6959185 C24.6907654,22.7636441 24.7611262,22.8321506 24.8307226,22.9014245 L24.7257519,22.7980864 C24.8120661,22.8821258 24.8972403,22.9673303 24.981249,23.0536745 L24.8307226,22.9014245 C24.9073006,22.9776475 24.9829531,23.0547994 25.0576619,23.132862 L25.057852,23.1330605 C25.3140855,23.4007967 25.559391,23.679459 25.7928375,23.9681079 L25.7230574,23.8825538 C25.7985998,23.9743942 25.8729325,24.0672672 25.9460311,24.1611484 L25.7928375,23.9681079 C25.8624256,24.0541514 25.93096,24.1410823 25.998421,24.228881 L25.9460311,24.1611484 C26.0074362,24.2400115 26.0679704,24.319586 26.1276194,24.3998576 L25.998421,24.228881 C26.0663495,24.317288 26.1331896,24.4065749 26.1989214,24.4967216 L26.1276194,24.3998576 C26.204848,24.5037867 26.2805926,24.6088841 26.3548219,24.7151187 L26.1989214,24.4967216 C26.2678555,24.59126 26.3355706,24.6867441 26.4020436,24.7831507 L26.3548219,24.7151187 C26.4130013,24.798383 26.4702498,24.8823459 26.5265523,24.9669921 L26.4020436,24.7831507 C26.4678788,24.8786322 26.5324956,24.9750187 26.5958716,25.0722875 L26.5959296,25.0723765 C26.736338,25.2878741 26.870709,25.5077955 26.9987399,25.7318073 L26.9410662,25.6319089 C26.9973106,25.7283602 27.0523736,25.8255849 27.1062352,25.9235633 L26.9987399,25.7318073 C27.0539848,25.8284676 27.1080492,25.9258895 27.1609136,26.0240532 L27.1606656,26.0235927 C27.2696676,26.2259984 27.3733426,26.4310837 27.4717677,26.6391379 L27.4715275,26.6386302 C27.5541941,26.8133735 27.6329386,26.9896914 27.7079006,27.1679911 C27.7630163,27.299081 27.8161443,27.431391 27.8671831,27.5647345 L27.804312,27.4036517 C27.8391482,27.4912057 27.8730792,27.5792182 27.9060936,27.6676774 L27.8671831,27.5647345 C27.906613,27.6677486 27.9447959,27.7713796 27.9817136,27.8756091 L27.9060936,27.6676774 C27.946474,27.7758735 27.9854831,27.884738 28.0230997,27.9942498 L27.9817136,27.8756091 C28.0144978,27.9681688 28.0462842,28.0612004 28.0770597,28.1546911 L28.0230997,27.9942498 C28.0618265,28.1069941 28.0990774,28.2204244 28.1348294,28.3345177 L28.0770597,28.1546911 C28.1112208,28.2584663 28.1441365,28.3628071 28.175789,28.4676958 L28.1756797,28.4673338 L28.2408136,28.6893554 C28.2284694,28.6937793 28.2161167,28.6981854 28.2037557,28.7025737 L28.2404554,28.6889694 C27.9517707,28.7925384 27.6584322,28.8863659 27.3608394,28.97006 L27.3609965,28.9702524 C27.0695498,29.0519815 26.7741843,29.1241944 26.4751174,29.1863314 L26.5385665,29.1730829 C26.3901218,29.2046704 26.2407589,29.2337757 26.0905233,29.2603535 L26.4751174,29.1863314 C26.3367402,29.215082 26.1975707,29.2416755 26.0576458,29.2660754 L26.0905233,29.2603535 C25.9366833,29.2875689 25.7819282,29.312134 25.6263069,29.334 L26.0576458,29.2660754 C25.9017815,29.2932549 25.7449801,29.3177127 25.5872928,29.3393985 L25.6263069,29.334 C25.493366,29.3526793 25.3597929,29.3693888 25.2256182,29.3840982 L25.5872928,29.3393985 C25.4326976,29.360659 25.277251,29.3792552 25.1210012,29.3951396 L25.2256182,29.3840982 C25.0570566,29.4025774 24.8875455,29.4178998 24.7171453,29.4300052 L25.1210012,29.3951396 C24.9661341,29.4108835 24.810478,29.4239634 24.6540799,29.4343333 L24.7171453,29.4300052 C24.5612618,29.4410793 24.4046342,29.4494611 24.2473088,29.4551045 L24.6540799,29.4343333 C24.5098436,29.4438967 24.3649762,29.4511552 24.2195147,29.4560724 L24.2473088,29.4551045 C24.0865878,29.4608697 23.9251385,29.4637769 23.7630101,29.4637769 L23.3130142,29.4562912 C23.2993121,29.4558347 23.2856153,29.4553574 23.2719237,29.4548593 C22.9596275,29.4434959 22.6502324,29.4213577 22.3439491,29.3888006 L22.3886972,29.3934808 C22.2468147,29.3788837 22.105595,29.3620515 21.9650736,29.3430199 L22.3439491,29.3888006 C22.1914515,29.3725905 22.0397254,29.3537976 21.8888152,29.3324664 L21.9650736,29.3430199 C21.8025527,29.3210088 21.6409661,29.2960557 21.4803691,29.2682161 L21.8888152,29.3324664 C21.7352182,29.3107553 21.5824665,29.2864149 21.4306071,29.2594919 L21.4803691,29.2682161 C21.3506285,29.2457255 21.2215338,29.221351 21.0931142,29.1951218 L21.4306071,29.2594919 C21.2772401,29.2323016 21.1247833,29.2024774 20.973285,29.1700676 L21.0931142,29.1951218 C20.9267071,29.1611338 20.7614335,29.1240315 20.5973571,29.0838786 L20.973285,29.1700676 C20.825476,29.138447 20.6785795,29.1043653 20.5326403,29.0678674 L20.5973571,29.0838786 C20.4596684,29.0501832 20.3228227,29.0143396 20.1868576,28.9763851 L20.5326403,29.0678674 C20.3930822,29.0329653 20.2543997,28.9958536 20.1166319,28.9565718 L20.1169729,28.956669 L19.7188247,28.8363247 L19.7188247,28.8363247 L19.7880988,28.5894836 C19.8166627,28.4914193 19.8463277,28.3938241 19.8770797,28.2967124 L19.8480041,28.389868 C19.888904,28.2573207 19.931824,28.1256601 19.9767281,27.9949221 L19.8770797,28.2967124 C19.9117081,28.1873592 19.9477148,28.0786191 19.9850793,27.9705124 L19.9853117,27.9700125 C20.1152243,27.5939638 20.2618428,27.2250995 20.4240731,26.8647811 L20.345088,27.0439391 C20.3899401,26.9402428 20.4360767,26.8372321 20.4834778,26.7349269 L20.4240731,26.8647811 C20.461061,26.78263 20.4988604,26.7009231 20.5374612,26.6196707 L20.4834778,26.7349269 C20.5344734,26.6248636 20.5869326,26.515617 20.6408302,26.4072119 L20.5374612,26.6196707 C20.5871241,26.5151329 20.6381134,26.4113474 20.6904074,26.308336 L20.6408302,26.4072119 C20.681671,26.3250682 20.7233378,26.2434076 20.7658197,26.1622412 L20.7658807,26.1619302 C20.8435258,26.013775 20.923959,25.866962 21.0070529,25.7218685 C21.2050227,25.3759931 21.4182299,25.0398756 21.6456589,24.7144306 L21.5286537,24.8848257 C21.5876708,24.7975143 21.6476996,24.7109431 21.7087233,24.6251289 L21.6456589,24.7144306 C21.6993229,24.6376387 21.7537788,24.5614411 21.8090146,24.4858495 L21.7087233,24.6251289 C21.7826333,24.5211934 21.8580028,24.4183683 21.9348018,24.3166836 L21.8090146,24.4858495 C21.8722751,24.3992759 21.9365587,24.3134973 22.0018475,24.2285315 L22.0016895,24.2288802 C22.3179789,23.8171232 22.6576794,23.4247699 23.0189296,23.053491 L22.8296293,23.2521975 C22.9033796,23.1732135 22.9780829,23.095131 23.0537208,23.0179683 L23.0189296,23.053491 C23.083529,22.9870982 23.1488175,22.9213793 23.2147836,22.8563459 L23.0537208,23.0179683 C23.131055,22.9390752 23.2093662,22.8611436 23.2886348,22.7841931 L23.2147836,22.8563459 C23.2821211,22.7899605 23.3501645,22.7242893 23.4189017,22.6593447 L23.2886348,22.7841931 C23.3852399,22.6904132 23.4832671,22.5980904 23.582681,22.5072602 L23.4189017,22.6593447 C23.4912637,22.5909753 23.5643945,22.523411 23.6382797,22.4566663 L23.582681,22.5072602 C23.6715916,22.4260264 23.7616113,22.3459865 23.8527148,22.2671658 L23.8525967,22.2671923 C23.8915062,22.2336043 23.9304941,22.2002638 23.9696766,22.1671464 L24.00025,22.1417324 Z"/></g></svg>


--------------------------------------------------------------------------------
/example/src/stories/assets/comments.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/comments</title><g id="illustration/comments" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Path" fill="#96D07C" d="M2.52730803,17.9196415 C2.44329744,17.9745167 2.36370847,18.000488 2.29303375,18.000488 C2.1197031,18.000488 2,17.8443588 2,17.5752855 L2,4 C2,1.790861 3.790861,3.23296945e-13 6,3.23296945e-13 L33.9995117,3.23296945e-13 C36.2086507,3.23296945e-13 37.9995117,1.790861 37.9995117,4 L37.9995117,9.999512 C37.9995117,12.208651 36.2086507,13.999512 33.9995117,13.999512 L8,13.999512 C7.83499225,13.999512 7.6723181,13.9895206 7.51254954,13.9701099 L2.52730803,17.9196415 Z"/><path id="Path" fill="#73E1E0" d="M7.51066,44.9703679 L2.52730803,47.9186655 C2.44329744,47.9735407 2.36370847,47.999512 2.29303375,47.999512 C2.1197031,47.999512 2,47.8433828 2,47.5743095 L2,35 C2,32.790861 3.790861,31 6,31 L26,31 C28.209139,31 30,32.790861 30,35 L30,41 C30,43.209139 28.209139,45 26,45 L8,45 C7.8343417,45 7.67103544,44.9899297 7.51066,44.9703679 Z"/><path id="Path" fill="#FFD476" d="M46,19.5 L46,33.0747975 C46,33.3438708 45.8802969,33.5 45.7069663,33.5 C45.6362915,33.5 45.5567026,33.4740287 45.472692,33.4191535 L40.4887103,29.4704446 C40.3285371,29.489956 40.1654415,29.5 40,29.5 L18,29.5 C15.790861,29.5 14,27.709139 14,25.5 L14,19.5 C14,17.290861 15.790861,15.5 18,15.5 L42,15.5 C44.209139,15.5 46,17.290861 46,19.5 Z"/></g></svg>


--------------------------------------------------------------------------------
/example/src/stories/assets/direction.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/direction</title><g id="illustration/direction" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFD476" d="M23.4917015,33.6030641 L2.93840258,31.4321033 C2.38917316,31.3740904 1.99096346,30.8818233 2.04897631,30.3325939 C2.0747515,30.0885705 2.18934861,29.8625419 2.37095722,29.6975265 L34.2609105,0.721285325 C34.6696614,0.349881049 35.3021022,0.38015648 35.6735064,0.788907393 C35.9232621,1.06377731 36.0001133,1.45442096 35.8730901,1.80341447 L24.5364357,32.9506164 C24.3793473,33.3822133 23.9484565,33.6513092 23.4917015,33.6030641 L23.4917015,33.6030641 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" d="M24.3163597,33.2881029 C24.0306575,33.0138462 23.9337246,32.5968232 24.069176,32.2246735 L35.091923,1.9399251 C35.2266075,1.56988243 35.5659249,1.31333613 35.9586669,1.28460955 C36.5094802,1.24432106 36.9886628,1.65818318 37.0289513,2.20899647 L40.2437557,46.1609256 C40.2644355,46.4436546 40.1641446,46.7218752 39.9678293,46.9263833 C39.5853672,47.3248067 38.9523344,47.3377458 38.5539111,46.9552837 L24.3163597,33.2881029 L24.3163597,33.2881029 Z"/></g></svg>


--------------------------------------------------------------------------------
/example/src/stories/assets/flow.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/flow</title><g id="illustration/flow" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#79C9FC" fill-rule="nonzero" d="M30,29 C32.7614237,29 35,26.7614237 35,24 C35,14.6111593 27.3888407,7 18,7 C8.61115925,7 1,14.6111593 1,24 C1,33.3888407 8.61115925,41 18,41 C19.3333404,41 20.6447683,40.8466238 21.9154603,40.5471706 C19.5096374,39.3319645 17.5510566,37.8612875 16.0456579,36.1314815 C14.1063138,33.9030427 12.769443,31.0725999 12.0293806,27.6556449 C11.360469,26.565281 11,25.3082308 11,24 C11,20.1340068 14.1340068,17 18,17 C21.8659932,17 25,20.1340068 25,24 C25,26.125 27.7040312,29 30,29 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" fill-rule="nonzero" d="M42,29 C44.7614237,29 47,26.7614237 47,24 C47,14.6111593 39.3888407,7 30,7 C20.6111593,7 13,14.6111593 13,24 C13,33.3888407 20.6111593,41 30,41 C31.3333404,41 32.6447683,40.8466238 33.9154603,40.5471706 C31.5096374,39.3319645 29.4051056,37.9781963 28.0456579,36.1314815 C26.0625,33.4375 23,27.1875 23,24 C23,20.1340068 26.1340068,17 30,17 C33.8659932,17 37,20.1340068 37,24 C37.02301,26.3435241 39.7040312,29 42,29 Z" transform="translate(30.000000, 24.000000) scale(-1, -1) translate(-30.000000, -24.000000)"/></g></svg>


--------------------------------------------------------------------------------
/example/src/stories/assets/plugin.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/plugin</title><g id="illustration/plugin" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#79C9FC" d="M26,15.3994248 C26,15.4091303 26,15.4188459 26,15.4285714 L26,21.4694881 C25.8463595,21.4969567 25.6941676,21.51275 25.5873784,21.51275 C25.4974117,21.51275 25.4230979,21.4768034 25.377756,21.4206259 L25.2660784,21.2822603 L25.1317423,21.1657666 C24.2436317,20.3956144 23.100098,19.9633214 21.895551,19.9633214 C19.2039137,19.9633214 17,22.1075558 17,24.7804643 C17,27.4533728 19.2039137,29.5976071 21.895551,29.5976071 C23.1972122,29.5976071 24.3149423,29.2878193 25.1231445,28.3613697 C25.4542273,27.9818463 25.568273,27.9073214 25.5873784,27.9073214 C25.681532,27.9073214 25.8352452,27.9239643 26,27.9524591 L26,32.5714286 C26,32.5811541 26,32.5908697 26,32.6005752 L26,33 C26,35.209139 24.209139,37 22,37 L4,37 C1.790861,37 0,35.209139 0,33 L0,15 C0,12.790861 1.790861,11 4,11 L22,11 C24.209139,11 26,12.790861 26,15 L26,15.3994248 Z"/><path id="Path" fill="#87E6E5" d="M27.9998779,32.5714286 C27.9998779,33.3604068 28.6572726,34 29.4682101,34 L46.5315458,34 C47.3424832,34 47.9998779,33.3604068 47.9998779,32.5714286 L47.9998779,15.4285714 C47.9998779,14.6395932 47.3424832,14 46.5315458,14 L29.4682101,14 C28.6572726,14 27.9998779,14.6395932 27.9998779,15.4285714 L27.9998779,21.8355216 C27.9334367,22.2650514 27.8567585,22.6454496 27.746391,22.8084643 C27.4245309,23.2838571 26.2402709,23.51275 25.5873784,23.51275 C24.8705773,23.51275 24.2322714,23.1857725 23.8214379,22.6767605 C23.3096996,22.2329909 22.6349941,21.9633214 21.895551,21.9633214 C20.2963823,21.9633214 19,23.2245992 19,24.7804643 C19,26.3363293 20.2963823,27.5976071 21.895551,27.5976071 C22.5398535,27.5976071 23.2399343,27.477727 23.6160247,27.0466112 C24.1396029,26.4464286 24.7367044,25.9073214 25.5873784,25.9073214 C26.2402709,25.9073214 27.5912951,26.1766031 27.8226692,26.6116071 C27.8819199,26.7230038 27.9403239,26.921677 27.9998779,27.1556219 L27.9998779,32.5714286 Z"/></g></svg>


--------------------------------------------------------------------------------
/example/src/stories/assets/repo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/repo</title><g id="illustration/repo" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Rectangle-62-Copy" fill="#B7F0EF" d="M27.2217723,9.04506931 L41.2217723,6.2682098 C43.3886973,5.83840648 45.4937616,7.2466219 45.9235649,9.41354696 C45.9743993,9.66983721 46,9.93049166 46,10.1917747 L46,32.581381 C46,34.4904961 44.650862,36.1335143 42.7782277,36.5049459 L28.7782277,39.2818054 C26.6113027,39.7116087 24.5062384,38.3033933 24.0764351,36.1364682 C24.0256007,35.880178 24,35.6195235 24,35.3582405 L24,12.9686342 C24,11.0595191 25.349138,9.4165009 27.2217723,9.04506931 Z" opacity=".7"/><path id="Combined-Shape" fill="#87E6E5" d="M6.77822775,6.2682098 L20.7782277,9.04506931 C22.650862,9.4165009 24,11.0595191 24,12.9686342 L24,35.3582405 C24,37.5673795 22.209139,39.3582405 20,39.3582405 C19.738717,39.3582405 19.4780625,39.3326398 19.2217723,39.2818054 L5.22177225,36.5049459 C3.34913798,36.1335143 2,34.4904961 2,32.581381 L2,10.1917747 C2,7.98263571 3.790861,6.19177471 6,6.19177471 C6.26128305,6.19177471 6.5219375,6.21737537 6.77822775,6.2682098 Z"/><path id="Rectangle-63-Copy-2" fill="#61C1FD" d="M22,10 C23.1666667,10.2291667 24.0179036,10.625 24.5537109,11.1875 C25.0895182,11.75 25.5716146,12.875 26,14.5625 C26,29.3020833 26,37.5208333 26,39.21875 C26,40.9166667 26.4241536,42.9583333 27.2724609,45.34375 L24.5537109,41.875 L22.9824219,45.34375 C22.327474,43.1979167 22,41.2291667 22,39.4375 C22,37.6458333 22,27.8333333 22,10 Z"/></g></svg>


--------------------------------------------------------------------------------
/example/src/stories/assets/stackalt.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/stackalt</title><g id="illustration/stackalt" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFAE00" d="M23.8628277,0 L23.8628277,48 L3.32291648,36.2491883 L3.32155653,11.9499781 L23.8628277,0 Z M23.8670509,0 L44.408322,11.9499781 L44.4069621,36.2491883 L23.8670509,48 L23.8670509,0 Z" opacity=".196"/><path id="Rectangle-46-Copy-3" fill="#66BF3C" d="M15.8232279,19.1155258 L24.7368455,21.4714881 C29.6053842,22.7582937 33.4077423,26.5606518 34.694548,31.4291905 L37.0505103,40.3428082 C37.6150232,42.4786032 36.3412474,44.6676353 34.2054524,45.2321482 C33.5569474,45.4035549 32.87575,45.4091235 32.2245294,45.2483418 L23.3459013,43.0562718 C18.2976962,41.809906 14.3561301,37.8683399 13.1097642,32.8201348 L10.9176943,23.9415066 C10.3881737,21.7967682 11.6975664,19.6288529 13.8423049,19.0993322 C14.4935255,18.9385505 15.1747229,18.9441191 15.8232279,19.1155258 Z" opacity=".5" transform="translate(23.999997, 32.166058) rotate(-45.000000) translate(-23.999997, -32.166058)"/><path id="Rectangle-46-Copy-2" fill="#FFAE00" d="M15.8232279,11.2216893 L24.7368455,13.5776516 C29.6053842,14.8644572 33.4077423,18.6668153 34.694548,23.5353541 L37.0505103,32.4489717 C37.6150232,34.5847667 36.3412474,36.7737988 34.2054524,37.3383117 C33.5569474,37.5097184 32.87575,37.515287 32.2245294,37.3545053 L23.3459013,35.1624353 C18.2976962,33.9160695 14.3561301,29.9745034 13.1097642,24.9262983 L10.9176943,16.0476701 C10.3881737,13.9029317 11.6975664,11.7350164 13.8423049,11.2054957 C14.4935255,11.044714 15.1747229,11.0502826 15.8232279,11.2216893 Z" opacity=".5" transform="translate(23.999997, 24.272222) rotate(-45.000000) translate(-23.999997, -24.272222)"/><path id="Rectangle-46-Copy" fill="#FC521F" d="M15.8232279,3.32785281 L24.7368455,5.68381509 C29.6053842,6.97062075 33.4077423,10.7729788 34.694548,15.6415176 L37.0505103,24.5551352 C37.6150232,26.6909302 36.3412474,28.8799623 34.2054524,29.4444752 C33.5569474,29.6158819 32.87575,29.6214505 32.2245294,29.4606688 L23.3459013,27.2685988 C18.2976962,26.022233 14.3561301,22.0806669 13.1097642,17.0324618 L10.9176943,8.15383364 C10.3881737,6.00909519 11.6975664,3.84117987 13.8423049,3.31165925 C14.4935255,3.15087753 15.1747229,3.15644615 15.8232279,3.32785281 Z" opacity=".5" transform="translate(23.999997, 16.378385) rotate(-45.000000) translate(-23.999997, -16.378385)"/></g></svg>


--------------------------------------------------------------------------------
/example/src/stories/button.component.ts:
--------------------------------------------------------------------------------
 1 | import { CommonModule } from '@angular/common';
 2 | import { Component, Input, Output, EventEmitter } from '@angular/core';
 3 | 
 4 | @Component({
 5 |   selector: 'storybook-button',
 6 |   imports: [CommonModule],
 7 |   template: ` <button
 8 |     type="button"
 9 |     (click)="onClick.emit($event)"
10 |     [ngClass]="classes"
11 |     [ngStyle]="{ 'background-color': backgroundColor }"
12 |   >
13 |     {{ label }}
14 |   </button>`,
15 |   styleUrls: ['./button.css'],
16 | })
17 | export class ButtonComponent {
18 |   /**
19 |    * Is this the principal call to action on the page?
20 |    */
21 |   @Input()
22 |   primary = false;
23 | 
24 |   /**
25 |    * What background color to use
26 |    */
27 |   @Input()
28 |   backgroundColor?: string;
29 | 
30 |   /**
31 |    * How large should the button be?
32 |    */
33 |   @Input()
34 |   size: 'small' | 'medium' | 'large' = 'medium';
35 | 
36 |   /**
37 |    * Button contents
38 |    *
39 |    * @required
40 |    */
41 |   @Input()
42 |   label = 'Button';
43 | 
44 |   /**
45 |    * Optional click handler
46 |    */
47 |   @Output()
48 |   onClick = new EventEmitter<Event>();
49 | 
50 |   public get classes(): string[] {
51 |     const mode = this.primary ? 'storybook-button--primary' : 'storybook-button--secondary';
52 | 
53 |     return ['storybook-button', `storybook-button--${this.size}`, mode];
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/example/src/stories/button.css:
--------------------------------------------------------------------------------
 1 | .storybook-button {
 2 |   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 3 |   font-weight: 700;
 4 |   border: 0;
 5 |   border-radius: 3em;
 6 |   cursor: pointer;
 7 |   display: inline-block;
 8 |   line-height: 1;
 9 | }
10 | .storybook-button--primary {
11 |   color: white;
12 |   background-color: #1ea7fd;
13 | }
14 | .storybook-button--secondary {
15 |   color: #333;
16 |   background-color: transparent;
17 |   box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
18 | }
19 | .storybook-button--small {
20 |   font-size: 12px;
21 |   padding: 10px 16px;
22 | }
23 | .storybook-button--medium {
24 |   font-size: 14px;
25 |   padding: 11px 20px;
26 | }
27 | .storybook-button--large {
28 |   font-size: 16px;
29 |   padding: 12px 24px;
30 | }
31 | 


--------------------------------------------------------------------------------
/example/src/stories/button.spec.ts:
--------------------------------------------------------------------------------
 1 | import { render, screen } from '@testing-library/angular';
 2 | import { composeStories, composeStory, createMountable } from '@storybook/testing-angular';
 3 | 
 4 | import { ButtonComponent } from './button.component';
 5 | // import * as stories from './Button.stories'; // import all stories from the stories file
 6 | import { Primary as _Primary, Other as _Other } from './Button.stories';
 7 | import Meta from './Button.stories';
 8 | 
 9 | import { TestBed } from '@angular/core/testing';
10 | import { ApplicationConfig } from '@angular/core';
11 | 
12 | // Every component that is returned maps 1:1 with the stories, but they already contain all decorators from story level, meta level and global level.
13 | // const { Primary } = composeStories(stories);
14 | // const composed: any = composeStories(stories);
15 | // const Primary: any = composed.Primary;
16 | 
17 | const Primary = composeStory(_Primary, Meta)
18 | const Other = composeStory(_Other, Meta)
19 | // const Primary = composeStory(stories.Primary, Meta)
20 | // const Other = composeStory(stories.Other, Meta)
21 | 
22 | 
23 | describe('button TestBed', () => {
24 |   let component: any
25 |   let applicationConfig: ApplicationConfig
26 | 
27 |   beforeEach(async () => {
28 |     const componentAndConfig = createMountable(Primary({}));
29 |     component = componentAndConfig.component;
30 |     applicationConfig = componentAndConfig.applicationConfig;
31 |     await TestBed.configureTestingModule({
32 |       providers: applicationConfig.providers,
33 |     }).compileComponents();
34 |   });
35 | 
36 |   it('should create the app', () => {
37 |     const fixture = TestBed.createComponent(component);
38 |     const app = fixture.componentInstance;
39 |     expect(app).toBeTruthy();
40 |   });
41 | 
42 |   it('should render title', () => {
43 |     const fixture = TestBed.createComponent(component);
44 |     fixture.detectChanges();
45 |     const compiled = fixture.nativeElement as HTMLElement;
46 |     console.log(compiled.innerHTML)
47 |     expect(compiled.querySelector('button')?.textContent).toContain(Primary.args?.label!);
48 |   });
49 | });
50 | 
51 | describe('button testing-library', () => {
52 |   it('renders primary button', async () => {
53 |     const { component, applicationConfig } = createMountable(Primary({}));
54 |     await render(component, { providers: applicationConfig.providers });
55 |     expect(screen.getByText(Primary.args?.label!)).not.toBeNull();
56 |   });
57 | 
58 |   it('renders other button', async () => {
59 |     const { component, applicationConfig } = createMountable(Other({}));
60 |     await render(component, { providers: applicationConfig.providers });
61 |     expect(screen.getByText(Other.args?.label!)).not.toBeNull();
62 |   });
63 | 
64 |   it('renders primary button with spy', async () => {
65 |     const onClickSpy = jasmine.createSpy()
66 |     const { component, applicationConfig } = createMountable(Primary({ onClick: onClickSpy as any }));
67 |     await render(component, { providers: applicationConfig.providers });
68 |     const buttonElement = screen.getByText(Primary.args?.label!);
69 |     buttonElement.click();
70 |     expect(onClickSpy as any).toHaveBeenCalled();
71 |   });
72 | });
73 | 


--------------------------------------------------------------------------------
/example/src/stories/header.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, Input, Output, EventEmitter } from '@angular/core';
 2 | import type { User } from './User';
 3 | 
 4 | @Component({
 5 |   selector: 'storybook-header',
 6 |   template: `<header>
 7 |     <div class="storybook-header">
 8 |       <div>
 9 |         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
10 |           <g fill="none" fillRule="evenodd">
11 |             <path
12 |               d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
13 |               fill="#FFF"
14 |             />
15 |             <path
16 |               d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
17 |               fill="#555AB9"
18 |             />
19 |             <path
20 |               d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
21 |               fill="#91BAF8"
22 |             />
23 |           </g>
24 |         </svg>
25 |         <h1>Acme</h1>
26 |       </div>
27 |       <div>
28 |         <div *ngIf="user">
29 |           <span class="welcome">
30 |             Welcome, <b>{{ user.name }}</b
31 |             >!
32 |           </span>
33 |           <storybook-button
34 |             *ngIf="user"
35 |             size="small"
36 |             (onClick)="onLogout.emit($event)"
37 |             label="Log out"
38 |           ></storybook-button>
39 |         </div>
40 |         <div *ngIf="!user">
41 |           <storybook-button
42 |             *ngIf="!user"
43 |             size="small"
44 |             class="margin-left"
45 |             (onClick)="onLogin.emit($event)"
46 |             label="Log in"
47 |           ></storybook-button>
48 |           <storybook-button
49 |             *ngIf="!user"
50 |             primary
51 |             size="small"
52 |             primary="true"
53 |             class="margin-left"
54 |             (onClick)="onCreateAccount.emit($event)"
55 |             label="Sign up"
56 |           ></storybook-button>
57 |         </div>
58 |       </div>
59 |     </div>
60 |   </header>`,
61 |   styleUrls: ['./header.css'],
62 | })
63 | export default class HeaderComponent {
64 |   @Input()
65 |   user: User | null = null;
66 | 
67 |   @Output()
68 |   onLogin = new EventEmitter<Event>();
69 | 
70 |   @Output()
71 |   onLogout = new EventEmitter<Event>();
72 | 
73 |   @Output()
74 |   onCreateAccount = new EventEmitter<Event>();
75 | }
76 | 


--------------------------------------------------------------------------------
/example/src/stories/header.css:
--------------------------------------------------------------------------------
 1 | .storybook-header {
 2 |   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 3 |   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 4 |   padding: 15px 20px;
 5 |   display: flex;
 6 |   align-items: center;
 7 |   justify-content: space-between;
 8 | }
 9 | 
10 | .storybook-header svg {
11 |   display: inline-block;
12 |   vertical-align: top;
13 | }
14 | 
15 | .storybook-header h1 {
16 |   font-weight: 700;
17 |   font-size: 20px;
18 |   line-height: 1;
19 |   margin: 6px 0 6px 10px;
20 |   display: inline-block;
21 |   vertical-align: top;
22 | }
23 | 
24 | .storybook-header button + button {
25 |   margin-left: 10px;
26 | }
27 | 
28 | .storybook-header .welcome {
29 |   color: #333;
30 |   font-size: 14px;
31 |   margin-right: 10px;
32 | }
33 | 


--------------------------------------------------------------------------------
/example/src/stories/page.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import type { User } from './User';
 3 | 
 4 | @Component({
 5 |   selector: 'storybook-page',
 6 |   template: `<article>
 7 |     <storybook-header
 8 |       [user]="user"
 9 |       (onLogout)="doLogout()"
10 |       (onLogin)="doLogin()"
11 |       (onCreateAccount)="doCreateAccount()"
12 |     ></storybook-header>
13 |     <section class="storybook-page">
14 |       <h2>Pages in Storybook</h2>
15 |       <p>
16 |         We recommend building UIs with a
17 |         <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
18 |           <strong>component-driven</strong>
19 |         </a>
20 |         process starting with atomic components and ending with pages.
21 |       </p>
22 |       <p>
23 |         Render pages with mock data. This makes it easy to build and review page states without
24 |         needing to navigate to them in your app. Here are some handy patterns for managing page data
25 |         in Storybook:
26 |       </p>
27 |       <ul>
28 |         <li>
29 |           Use a higher-level connected component. Storybook helps you compose such data from the
30 |           "args" of child component stories
31 |         </li>
32 |         <li>
33 |           Assemble data in the page component from your services. You can mock these services out
34 |           using Storybook.
35 |         </li>
36 |       </ul>
37 |       <p>
38 |         Get a guided tutorial on component-driven development at
39 |         <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
40 |           Storybook tutorials
41 |         </a>
42 |         . Read more in the
43 |         <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer"> docs </a>
44 |         .
45 |       </p>
46 |       <div class="tip-wrapper">
47 |         <span class="tip">Tip</span> Adjust the width of the canvas with the
48 |         <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
49 |           <g fill="none" fillRule="evenodd">
50 |             <path
51 |               d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
52 |               id="a"
53 |               fill="#999"
54 |             />
55 |           </g>
56 |         </svg>
57 |         Viewports addon in the toolbar
58 |       </div>
59 |     </section>
60 |   </article>`,
61 |   styleUrls: ['./page.css'],
62 | })
63 | export default class PageComponent {
64 |   user: User | null = null;
65 | 
66 |   doLogout() {
67 |     this.user = null;
68 |   }
69 | 
70 |   doLogin() {
71 |     this.user = { name: 'Jane Doe' };
72 |   }
73 | 
74 |   doCreateAccount() {
75 |     this.user = { name: 'Jane Doe' };
76 |   }
77 | }
78 | 


--------------------------------------------------------------------------------
/example/src/stories/page.css:
--------------------------------------------------------------------------------
 1 | .storybook-page {
 2 |   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 3 |   font-size: 14px;
 4 |   line-height: 24px;
 5 |   padding: 48px 20px;
 6 |   margin: 0 auto;
 7 |   max-width: 600px;
 8 |   color: #333;
 9 | }
10 | 
11 | .storybook-page h2 {
12 |   font-weight: 700;
13 |   font-size: 32px;
14 |   line-height: 1;
15 |   margin: 0 0 4px;
16 |   display: inline-block;
17 |   vertical-align: top;
18 | }
19 | 
20 | .storybook-page p {
21 |   margin: 1em 0;
22 | }
23 | 
24 | .storybook-page a {
25 |   text-decoration: none;
26 |   color: #1ea7fd;
27 | }
28 | 
29 | .storybook-page ul {
30 |   padding-left: 30px;
31 |   margin: 1em 0;
32 | }
33 | 
34 | .storybook-page li {
35 |   margin-bottom: 8px;
36 | }
37 | 
38 | .storybook-page .tip {
39 |   display: inline-block;
40 |   border-radius: 1em;
41 |   font-size: 11px;
42 |   line-height: 12px;
43 |   font-weight: 700;
44 |   background: #e7fdd8;
45 |   color: #66bf3c;
46 |   padding: 4px 12px;
47 |   margin-right: 10px;
48 |   vertical-align: top;
49 | }
50 | 
51 | .storybook-page .tip-wrapper {
52 |   font-size: 13px;
53 |   line-height: 20px;
54 |   margin-top: 40px;
55 |   margin-bottom: 40px;
56 | }
57 | 
58 | .storybook-page .tip-wrapper svg {
59 |   display: inline-block;
60 |   height: 12px;
61 |   width: 12px;
62 |   margin-right: 4px;
63 |   vertical-align: top;
64 |   margin-top: 3px;
65 | }
66 | 
67 | .storybook-page .tip-wrapper svg path {
68 |   fill: #1ea7fd;
69 | }
70 | 


--------------------------------------------------------------------------------
/example/src/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | 


--------------------------------------------------------------------------------
/example/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | import * as globalStorybookConfig from '../.storybook/preview'; // path of your preview.js file
11 | import { setProjectAnnotations } from '@storybook/testing-angular';
12 | 
13 | setProjectAnnotations(globalStorybookConfig);
14 | 
15 | declare const require: {
16 |   context(path: string, deep?: boolean, filter?: RegExp): {
17 |     keys(): string[];
18 |     <T>(id: string): T;
19 |   };
20 | };
21 | 
22 | // First, initialize the Angular testing environment.
23 | getTestBed().initTestEnvironment(
24 |   BrowserDynamicTestingModule,
25 |   platformBrowserDynamicTesting(),
26 |   { teardown: { destroyAfterEach: true } },
27 | );
28 | 
29 | // Then we find all the tests.
30 | const context = require.context('./', true, /\.spec\.ts$/);
31 | // And load the modules.
32 | context.keys().map(context);
33 | 


--------------------------------------------------------------------------------
/example/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/app",
 6 |     "types": []
 7 |   },
 8 |   "files": [
 9 |     "src/main.ts"
10 |   ],
11 |   "include": [
12 |     "src/**/*.d.ts"
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/example/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "compileOnSave": false,
 4 |   "compilerOptions": {
 5 |     "baseUrl": "./",
 6 |     "outDir": "./dist/out-tsc",
 7 |     "forceConsistentCasingInFileNames": true,
 8 |     "strict": true,
 9 |     "esModuleInterop": true,
10 |     "noImplicitOverride": true,
11 |     "noPropertyAccessFromIndexSignature": true,
12 |     "noImplicitReturns": true,
13 |     "noImplicitAny": false,
14 |     "noFallthroughCasesInSwitch": true,
15 |     "sourceMap": true,
16 |     "declaration": false,
17 |     "experimentalDecorators": true,
18 |     "moduleResolution": "node",
19 |     "importHelpers": true,
20 |     "target": "ES2022",
21 |     "module": "ES2022",
22 |     "useDefineForClassFields": false,
23 |     "lib": [
24 |       "ES2022",
25 |       "dom"
26 |     ],
27 |     "paths": {
28 |       "@angular/*": [
29 |         "./node_modules/@angular/*"
30 |       ],
31 |       "webpack/*": [
32 |         "./node_modules/webpack/*"
33 |       ],
34 |       "webpack": [
35 |         "./node_modules/webpack"
36 |       ],
37 |       "@storybook/testing-angular": [
38 |         "../dist"
39 |       ]
40 |     }
41 |   },
42 |   "angularCompilerOptions": {
43 |     "enableI18nLegacyMessageIdFormat": false,
44 |     "strictInjectionParameters": true,
45 |     "strictInputAccessModifiers": true,
46 |     "strictTemplates": true
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/example/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/spec",
 6 |     "types": [
 7 |       "jasmine"
 8 |     ]
 9 |   },
10 |   "include": [
11 |     "src/**/*.spec.ts",
12 |     "src/**/*.d.ts"
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@storybook/testing-angular",
 3 |   "version": "1.0.3",
 4 |   "description": "Testing utilities that allow you to reuse your stories in your unit tests",
 5 |   "keywords": [
 6 |     "storybook-addons",
 7 |     "style",
 8 |     "test"
 9 |   ],
10 |   "license": "MIT",
11 |   "main": "dist/index.js",
12 |   "typings": "dist/index.d.ts",
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "https://github.com/storybookjs/testing-angular"
16 |   },
17 |   "files": [
18 |     "dist",
19 |     "src",
20 |     "README.md"
21 |   ],
22 |   "engines": {
23 |     "node": ">=18.19.1"
24 |   },
25 |   "scripts": {
26 |     "start": "tsdx watch",
27 |     "build": "tsdx build",
28 |     "lint": "tsdx lint",
29 |     "prepare": "tsdx build",
30 |     "size": "size-limit",
31 |     "analyze": "size-limit --why",
32 |     "release": "yarn build && auto shipit"
33 |   },
34 |   "peerDependencies": {
35 |     "@angular/common": ">=16.0.0",
36 |     "@angular/core": ">=16.0.0",
37 |     "@angular/platform-browser": ">=16.0.0",
38 |     "@storybook/angular": ">=8.0.0"
39 |   },
40 |   "husky": {
41 |     "hooks": {
42 |       "pre-commit": "tsdx lint"
43 |     }
44 |   },
45 |   "prettier": {
46 |     "printWidth": 80,
47 |     "semi": true,
48 |     "singleQuote": true,
49 |     "trailingComma": "es5"
50 |   },
51 |   "author": "markberry867@gmail.com",
52 |   "module": "dist/testing-angular.esm.js",
53 |   "size-limit": [
54 |     {
55 |       "path": "dist/testing-angular.cjs.production.min.js",
56 |       "limit": "10 KB"
57 |     },
58 |     {
59 |       "path": "dist/testing-angular.esm.js",
60 |       "limit": "10 KB"
61 |     }
62 |   ],
63 |   "devDependencies": {
64 |     "@angular/common": "~18.0.0",
65 |     "@angular/core": "~18.0.0",
66 |     "@angular/platform-browser": "~18.0.0",
67 |     "@size-limit/preset-small-lib": "^8.2.4",
68 |     "auto": "^11.1.6",
69 |     "concurrently": "^8.1.0",
70 |     "husky": "^9.0.11",
71 |     "size-limit": "^11.1.4",
72 |     "tsdx": "^0.14.1",
73 |     "tslib": "^2.6.2",
74 |     "typescript": "^5.4.5"
75 |   },
76 |   "dependencies": {
77 |     "@storybook/angular": "^8.1.5",
78 |     "@storybook/preview-api": "^8.1.5",
79 |     "@storybook/types": "^8.1.5"
80 |   },
81 |   "resolutions": {
82 |     "**/typescript": "^5.4.5"
83 |   },
84 |   "publishConfig": {
85 |     "access": "public"
86 |   }
87 | }
88 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
  1 | import { AfterViewInit, ApplicationConfig, Component, NgModule, OnDestroy, Type } from '@angular/core';
  2 | import type {
  3 |   Meta,
  4 |   AngularRenderer,
  5 | } from '@storybook/angular';
  6 | import {
  7 |   composeStory as originalComposeStory,
  8 |   composeStories as originalComposeStories,
  9 |   setProjectAnnotations as originalSetProjectAnnotations,
 10 | } from '@storybook/preview-api';
 11 | import type {
 12 |   Args,
 13 |   NamedOrDefaultProjectAnnotations,
 14 |   StoryAnnotationsOrFn,
 15 |   Store_CSFExports,
 16 |   StoriesWithPartialProps,
 17 |   ProjectAnnotations,
 18 | } from '@storybook/types';
 19 | import { BehaviorSubject, Subject } from 'rxjs';
 20 | import { stringify } from 'telejson';
 21 | 
 22 | import { ICollection, StoryFnAngularReturnType } from '@storybook/angular/dist/client/types';
 23 | import { render } from '@storybook/angular/dist/client/render'
 24 | import { getApplication, storyPropsProvider } from '@storybook/angular/renderer'
 25 | import { PropertyExtractor } from '@storybook/angular/dist/client/angular-beta/utils/PropertyExtractor';
 26 | 
 27 | /** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.
 28 |  *
 29 |  * It should be run a single time, so that your global config (e.g. decorators) is applied to your stories when using `composeStories` or `composeStory`.
 30 |  *
 31 |  * Example:
 32 |  *```ts
 33 |  * // setup.js (for jest)
 34 |  * import { setProjectAnnotations } from '@storybook/angular';
 35 |  * import * as projectAnnotations from './.storybook/preview';
 36 |  *
 37 |  * setProjectAnnotations(projectAnnotations);
 38 |  *```
 39 |  *
 40 |  * @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview')
 41 |  */
 42 | export function setProjectAnnotations(
 43 |   projectAnnotations:
 44 |     | NamedOrDefaultProjectAnnotations<AngularRenderer>
 45 |     | NamedOrDefaultProjectAnnotations<AngularRenderer>[]
 46 | ) {
 47 |   originalSetProjectAnnotations<AngularRenderer>(projectAnnotations);
 48 | }
 49 | 
 50 | // This will not be necessary once we have auto preset loading
 51 | const defaultProjectAnnotations: ProjectAnnotations<AngularRenderer> = {
 52 |   render,
 53 | };
 54 | 
 55 | /**
 56 |  * Function that will receive a story along with meta (e.g. a default export from a .stories file)
 57 |  * and optionally projectAnnotations e.g. (import * from '../.storybook/preview)
 58 |  * and will return a composed component that has all args/parameters/decorators/etc combined and applied to it.
 59 |  *
 60 |  *
 61 |  * It's very useful for reusing a story in scenarios outside of Storybook like unit testing.
 62 |  *
 63 |  * Example:
 64 |  *```ts
 65 |  * import { render, screen } from '@testing-library/angular';
 66 |  * import {
 67 |  *   composeStories,
 68 |  *   createMountable,
 69 |  * } from '@storybook/testing-angular';
 70 |  * import Meta, { Primary as PrimaryStory } from './button.stories';
 71 |  *
 72 |  * const Primary = composeStory(PrimaryStory, Meta);
 73 |  *
 74 |  * describe('renders primary button with Hello World', () => {
 75 |  *   it('renders primary button with Hello World', async () => {
 76 |  *     const { component, applicationConfig } = createMountable(Primary({ label: 'Hello world' }));
 77 |  *     await render(component, { providers: applicationConfig.providers });
 78 |  *     const buttonElement = screen.getByText(/Hello world/i);
 79 |  *     expect(buttonElement).not.toBeNull();
 80 |  *   });
 81 |  * });
 82 |  *```
 83 |  *
 84 |  * @param story
 85 |  * @param componentAnnotations - e.g. (import Meta from './Button.stories')
 86 |  * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
 87 |  * @param [exportsName] - in case your story does not contain a name and you want it to have a name.
 88 |  */
 89 | export function composeStory<TArgs extends Args = Args>(
 90 |   story: StoryAnnotationsOrFn<AngularRenderer, TArgs>,
 91 |   componentAnnotations: Meta<TArgs | any>,
 92 |   projectAnnotations?: ProjectAnnotations<AngularRenderer>,
 93 |   exportsName?: string
 94 | ) {
 95 |   componentAnnotations.decorators = [
 96 |     ...(componentAnnotations.decorators ?? ([] as any)),
 97 |     (story: any, context: any) => {
 98 |       return {
 99 |         ...story(context.args),
100 |         // Storybook now retrieves the component from the context, so this is a workaround to preserve the component in composed stories.
101 |         _composedComponent: context.component,
102 |       };
103 |     }
104 |   ];
105 |   return originalComposeStory<AngularRenderer, TArgs>(
106 |     story as StoryAnnotationsOrFn<AngularRenderer, Args>,
107 |     // TODO: Fix types
108 |     componentAnnotations as any,
109 |     projectAnnotations,
110 |     defaultProjectAnnotations,
111 |     exportsName
112 |   );
113 | }
114 | 
115 | /**
116 |  * Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`)
117 |  * and optionally projectAnnotations (e.g. `import * from '../.storybook/preview`)
118 |  * and will return an object containing all the stories passed, but now as a composed component that has all args/parameters/decorators/etc combined and applied to it.
119 |  *
120 |  *
121 |  * It's very useful for reusing stories in scenarios outside of Storybook like unit testing.
122 |  *
123 |  * Example:
124 |  *```ts
125 |  * import { render, screen } from '@testing-library/angular';
126 |  * import {
127 |  *   composeStory,
128 |  *   createMountable,
129 |  * } from '@storybook/testing-angular';
130 |  * import * as stories from './button.stories';
131 |  * import Meta from './button.stories';
132 |  * 
133 |  * const { Primary } = composeStories(stories);
134 |  * 
135 |  * describe('button', () => {
136 |  *   it('reuses args from composed story', async () => {
137 |  *     const { component, applicationConfig } = createMountable(Primary({}));
138 |  *     await render(component, { providers: applicationConfig.providers });
139 |  *     expect(screen.getByText(Primary.args?.label!)).not.toBeNull();
140 |  *   });
141 |  * });
142 |  *```
143 |  *
144 |  * @param csfExports - e.g. (import * as stories from './Button.stories')
145 |  * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
146 |  */
147 | export function composeStories<TModule extends Store_CSFExports<AngularRenderer, any>>(
148 |   csfExports: TModule,
149 |   projectAnnotations?: ProjectAnnotations<AngularRenderer>
150 | ) {
151 |   // @ts-expect-error (Converted from ts-ignore)
152 |   const composedStories = originalComposeStories(csfExports, projectAnnotations, composeStory);
153 | 
154 |   return composedStories as unknown as Omit<
155 |     StoriesWithPartialProps<AngularRenderer, TModule>,
156 |     keyof Store_CSFExports
157 |   >;
158 | }
159 | 
160 | 
161 | interface StoryRenderInfo {
162 |   storyFnAngular: StoryFnAngularReturnType;
163 |   moduleMetadataSnapshot: string;
164 | }
165 | 
166 | export interface RenderableStoryAndModule {
167 |   component: any;
168 |   applicationConfig: ApplicationConfig;
169 | }
170 | 
171 | export class SbTestingRenderer {
172 | 
173 |   protected previousStoryRenderInfo?: StoryRenderInfo;
174 | 
175 |   // Observable to change the properties dynamically without reloading angular module&component
176 |   public storyProps$: Subject<ICollection | undefined> = new Subject<ICollection | undefined>();
177 | 
178 |   protected isFirstRender: boolean = true;
179 | 
180 |   constructor(public storyId: string) { }
181 | 
182 |   public getRenderableComponent({
183 |     storyFnAngular,
184 |     forced,
185 |     // parameters
186 |     component,
187 |     targetDOMNode,
188 |   }: {
189 |     storyFnAngular: StoryFnAngularReturnType;
190 |     forced: boolean;
191 |     // parameters: Parameters;
192 |     component?: any;
193 |     targetDOMNode: HTMLElement;
194 |   }): {
195 |     component: Type<any> | null;
196 |     applicationConfig: ApplicationConfig;
197 |   } | null {
198 |     const targetSelector = this.generateTargetSelectorFromStoryId(targetDOMNode.id);
199 | 
200 |     const newStoryProps$ = new BehaviorSubject<ICollection | undefined>(storyFnAngular.props ?? {});
201 | 
202 |     // Storybook now retrieves the component from the context, so this is a workaround to preserve the component in composed stories.
203 |     const storyComponent = component || (storyFnAngular as any)._composedComponent;
204 | 
205 |     if (
206 |       !this.fullRendererRequired({
207 |         storyFnAngular,
208 |         moduleMetadata: {
209 |           ...storyFnAngular.moduleMetadata,
210 |         },
211 |         forced,
212 |       })
213 |     ) {
214 |       this.storyProps$.next(storyFnAngular.props);
215 |       this.isFirstRender = false;
216 |       return null;
217 |     }
218 | 
219 |     if (!this.isFirstRender) {
220 |       return null;
221 |     }
222 | 
223 |     this.storyProps$ = newStoryProps$;
224 | 
225 |     const analyzedMetadata = new PropertyExtractor(storyFnAngular.moduleMetadata || {}, storyComponent);
226 | 
227 |     return {
228 |       component: getApplication({
229 |         storyFnAngular,
230 |         component: storyComponent,
231 |         targetSelector,
232 |         analyzedMetadata,
233 |       }),
234 |       applicationConfig: {
235 |         ...storyFnAngular.applicationConfig,
236 |         providers: [
237 |           storyPropsProvider(newStoryProps$),
238 |           ...(analyzedMetadata.applicationProviders ?? []),
239 |           ...(storyFnAngular.applicationConfig?.providers ?? []),
240 |         ],
241 |       }
242 |     };
243 |   }
244 | 
245 |   public completeStory(): void {
246 |     // Complete last BehaviorSubject and set a new one for the current module
247 |     if (this.storyProps$) {
248 |       this.storyProps$.complete();
249 |     }
250 |   }
251 | 
252 |   private fullRendererRequired({
253 |     storyFnAngular,
254 |     moduleMetadata,
255 |     forced,
256 |   }: {
257 |     storyFnAngular: StoryFnAngularReturnType;
258 |     moduleMetadata: NgModule;
259 |     forced: boolean;
260 |   }) {
261 |     const { previousStoryRenderInfo } = this;
262 | 
263 |     const currentStoryRender = {
264 |       storyFnAngular,
265 |       moduleMetadataSnapshot: stringify(moduleMetadata),
266 |     };
267 | 
268 |     this.previousStoryRenderInfo = currentStoryRender;
269 | 
270 |     if (
271 |       // check `forceRender` of story RenderContext
272 |       !forced ||
273 |       // if it's the first rendering and storyProps$ is not init
274 |       !this.storyProps$
275 |     ) {
276 |       return true;
277 |     }
278 | 
279 |     // force the rendering if the template has changed
280 |     const hasChangedTemplate =
281 |       !!storyFnAngular?.template &&
282 |       previousStoryRenderInfo?.storyFnAngular?.template !== storyFnAngular.template;
283 |     if (hasChangedTemplate) {
284 |       return true;
285 |     }
286 | 
287 |     // force the rendering if the metadata structure has changed
288 |     const hasChangedModuleMetadata =
289 |       currentStoryRender.moduleMetadataSnapshot !== previousStoryRenderInfo?.moduleMetadataSnapshot;
290 | 
291 |     return hasChangedModuleMetadata;
292 |   }
293 | 
294 |   /**
295 |    * Only ASCII alphanumerics can be used as HTML tag name.
296 |    * https://html.spec.whatwg.org/#elements-2
297 |    *
298 |    * Therefore, stories break when non-ASCII alphanumerics are included in target selector.
299 |    * https://github.com/storybookjs/storybook/issues/15147
300 |    *
301 |    * This method returns storyId when it doesn't contain any non-ASCII alphanumerics.
302 |    * Otherwise, it generates a valid HTML tag name from storyId by removing non-ASCII alphanumerics from storyId, prefixing "sb-", and suffixing "-component"
303 |    * @protected
304 |    * @memberof AbstractRenderer
305 |    */
306 |   protected generateTargetSelectorFromStoryId(id: string) {
307 |     const invalidHtmlTag = /[^A-Za-z0-9-]/g;
308 |     const storyIdIsInvalidHtmlTagName = invalidHtmlTag.test(id);
309 |     return storyIdIsInvalidHtmlTagName ? `sb-${id.replace(invalidHtmlTag, '')}-component` : id;
310 |   }
311 | }
312 | 
313 | /**
314 |  * Function that will receive a StoryFnAngularReturnType and will return a Component and NgModule that renders the story.
315 |  * 
316 |  * @param story 
317 |  * @returns 
318 |  */
319 | export function createMountableStoryComponent(storyFnReturn: StoryFnAngularReturnType, component?: any): RenderableStoryAndModule {
320 |   const storyId = `storybook-testing-wrapper`;
321 |   const renderer = new SbTestingRenderer(storyId);
322 | 
323 |   const domNode = document.createElement('span')
324 |   domNode.id = storyId
325 | 
326 |   const _story: any = {
327 |     ...(storyFnReturn as any),
328 |     moduleMetadata: {
329 |       declarations: [
330 |         ...((storyFnReturn as any).moduleMetadata?.declarations ?? []),
331 |       ],
332 |       imports: [
333 |         ...((storyFnReturn as any).moduleMetadata?.imports ?? []),
334 |       ],
335 |       providers: [
336 |         ...((storyFnReturn as any).moduleMetadata?.providers ?? []),
337 |       ],
338 |       entryComponents: [
339 |         ...((storyFnReturn as any).moduleMetadata?.entryComponents ?? []),
340 |       ],
341 |       schemas: [
342 |         ...((storyFnReturn as any).moduleMetadata?.schemas ?? []),
343 |       ],
344 |     }
345 |   };
346 | 
347 | 
348 |   const _module = renderer.getRenderableComponent({
349 |     storyFnAngular: _story,
350 |     forced: false,
351 |     // parameters: {} as any,
352 |     targetDOMNode: domNode,
353 |     component
354 |   });
355 | 
356 |   // This additional wrapper can probably be avoided by making some changes to
357 |   // the renderer or wrapper component in '@storybook/angular'.
358 |   @Component({
359 |     selector: 'sb-testing-mountable',
360 |     template: `<${storyId}></${storyId}>`,
361 |     imports: [
362 |       (_module as any).component
363 |     ],
364 |     standalone: true
365 |   })
366 |   class SbTestingMountable implements OnDestroy, AfterViewInit {
367 | 
368 |     ngOnDestroy(): void {
369 |       renderer.completeStory();
370 |     }
371 | 
372 |     ngAfterViewInit(): void {
373 |       const domNode = document.createElement('span')
374 |       domNode.id = storyId
375 |       renderer.getRenderableComponent({
376 |         storyFnAngular: storyFnReturn as any,
377 |         forced: false,
378 |         // parameters: {} as any,
379 |         targetDOMNode: domNode,
380 |         component,
381 |       });
382 |     }
383 | 
384 |   }
385 | 
386 |   if (_module === null) {
387 |     throw Error(`Must initially have module`);
388 |   }
389 | 
390 |   return {
391 |     component: SbTestingMountable,
392 |     applicationConfig: _module.applicationConfig
393 |   };
394 | }
395 | 
396 | /**
397 |  * Function that will receive a StoryFnAngularReturnType and will return a Component and NgModule that renders the story.
398 |  */
399 | export function createMountable(storyFnReturn: StoryFnAngularReturnType): RenderableStoryAndModule {
400 |   return createMountableStoryComponent(storyFnReturn);
401 | }
402 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowSyntheticDefaultImports": true,
 4 |     "baseUrl": ".",
 5 |     "emitDecoratorMetadata": true,
 6 |     "esModuleInterop": true,
 7 |     "experimentalDecorators": true,
 8 |     "incremental": false,
 9 |     "isolatedModules": true,
10 |     "jsx": "react",
11 |     "lib": ["es2018", "dom"],
12 |     "module": "ESNext",
13 |     "moduleResolution": "node",
14 |     "noImplicitAny": true,
15 |     "rootDir": "./src",
16 |     "skipLibCheck": true,
17 |     "target": "es2017",
18 |     "importHelpers": true,
19 |     "declaration": true,
20 |     "sourceMap": true,
21 |     "strict": true,
22 |     "noImplicitReturns": true,
23 |     "noFallthroughCasesInSwitch": true,
24 |     "noUnusedLocals": true,
25 |     "noUnusedParameters": true,
26 |     "forceConsistentCasingInFileNames": true,
27 |     "noEmit": true,
28 |   },
29 |   "include": ["src/**/*"]
30 | }
31 | 


--------------------------------------------------------------------------------