@eui/cli 21.0.0-next.8 → 21.0.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/bin/eui-cli.js +0 -7
  2. package/bin/scripts/inject-config-app.js +12 -0
  3. package/lib/app-utils/build.js +8 -52
  4. package/lib/app-utils/common.js +43 -0
  5. package/lib/app-utils/serve.js +6 -4
  6. package/lib/skeletons/_angular/base/angular.json +16 -0
  7. package/lib/skeletons/_angular/base/eslint.config.js +43 -0
  8. package/lib/skeletons/_angular/base/package.json +5 -7
  9. package/lib/skeletons/_angular/base/src/app/app-starter.service.spec.ts +9 -6
  10. package/lib/skeletons/_angular/base/src/app/app.component.html +1 -1
  11. package/lib/skeletons/_angular/base/src/app/app.component.spec.ts +14 -11
  12. package/lib/skeletons/_angular/base/src/app/features/home/home.component.html +1 -1
  13. package/lib/skeletons/_angular/base/src/app/features/home/home.component.ts +5 -3
  14. package/lib/skeletons/_angular/base/src/app/features/module1/components/page1/page1.component.html +1 -1
  15. package/lib/skeletons/_angular/base/src/app/features/module1/components/page2/page2.component.html +1 -1
  16. package/lib/skeletons/_angular/base/src/app/features/module1/module1.component.html +2 -4
  17. package/lib/skeletons/_angular/base/src/app/features/module2/module2.component.html +1 -1
  18. package/lib/skeletons/_angular/base/src/app/shared/testing/router.mock.ts +2 -9
  19. package/lib/skeletons/_angular/base/src/dummy.spec.ts +2 -0
  20. package/lib/skeletons/_angular/base/src/tsconfig.app.json +3 -0
  21. package/lib/skeletons/_angular/base/tsconfig.json +28 -24
  22. package/lib/skeletons/_angular/base-mobile/package.json +3 -3
  23. package/lib/skeletons/_angular/options/ecl-ec/angular.json +7 -29
  24. package/lib/skeletons/_angular/options/ecl-ec/src/app/app.component.html +101 -155
  25. package/lib/skeletons/_angular/options/ecl-ec/src/app/app.component.ts +4 -3
  26. package/lib/skeletons/_angular/options/ecl-ec/src/app/features/home/home.component.ts +5 -3
  27. package/lib/skeletons/_angular/options/ecl-eu/angular.json +7 -29
  28. package/lib/skeletons/_angular/options/ecl-eu/src/app/app.component.html +43 -68
  29. package/lib/skeletons/_angular/options/ecl-eu/src/app/app.component.ts +2 -3
  30. package/lib/skeletons/_angular/options/ecl-eu/src/app/features/home/home.component.ts +5 -3
  31. package/lib/skeletons/_angular/options/pnpm/package.json +27 -29
  32. package/package.json +1 -1
  33. package/lib/app-utils/projects.js +0 -41
  34. package/lib/skeletons/_angular/base/src/.eslintrc.json +0 -121
  35. package/lib/skeletons/_angular/base/src/karma.conf.js +0 -47
package/lib/skeletons/_angular/options/ecl-ec/src/app/app.component.html CHANGED
@@ -4,9 +4,7 @@
4
4
  <div eclSiteHeaderEnvironment>Environment</div>
5
5
 
6
6
  <ecl-site-header-action>
7
- <ecl-site-header-login
8
- [isLoggedIn]="isLoggedIn"
9
- (login)="onLogin($event)">
7
+ <ecl-site-header-login [isLoggedIn]="isLoggedIn" (login)="onLogin($event)">
10
8
  <p eclSiteHeaderLoginDescription>
11
9
  {{ 'ecl.site-header.LOGGED-IN-AS' | translate }} {{ userInfos?.fullName }}
12
10
  </p>
@@ -18,7 +16,7 @@
18
16
 
19
17
  <ecl-site-header-language></ecl-site-header-language>
20
18
 
21
- <ecl-site-header-search (search)="onSearch($event)"></ecl-site-header-search>
19
+ <ecl-site-header-search (searchEvent)="onSearch($event)"></ecl-site-header-search>
22
20
  </ecl-site-header-action>
23
21
 
24
22
  <ecl-menu (menuItemSelect)="onMenuItemSelected($event)" aria-label="Main navigation">
@@ -52,9 +50,11 @@
52
50
 
53
51
  <ecl-page-header>
54
52
  <ecl-breadcrumb>
55
- <ecl-breadcrumb-segment>Home</ecl-breadcrumb-segment>
56
- <ecl-breadcrumb-segment>European Commission</ecl-breadcrumb-segment>
57
- <ecl-breadcrumb-segment [isCurrentPage]="true">ECL</ecl-breadcrumb-segment>
53
+ <ol eclBreadcrumbContainer>
54
+ <li eclBreadcrumbSegment>Home</li>
55
+ <li eclBreadcrumbSegment>European Commission</li>
56
+ <li eclBreadcrumbSegment [isCurrentPage]="true">ECL</li>
57
+ </ol>
58
58
  </ecl-breadcrumb>
59
59
 
60
60
  <div eclPageHeaderInfo>
@@ -67,7 +67,8 @@
67
67
  </div>
68
68
  <div eclPageHeaderDescriptionContainer>
69
69
  <p eclPageHeaderDescription>
70
- The Europa Component Library (ECL) is a comprehensive style guide containing the design elements and visual standards that make up all Europa websites and applications.
70
+ The Europa Component Library (ECL) is a comprehensive style guide containing the design elements and
71
+ visual standards that make up all Europa websites and applications.
71
72
  </p>
72
73
  </div>
73
74
  </ecl-page-header>
@@ -76,162 +77,107 @@
76
77
  <router-outlet></router-outlet>
77
78
  </div>
78
79
 
79
- <ecl-site-footer>
80
+ <footer eclSiteFooter>
80
81
  <div eclSiteFooterRow>
81
- <div eclSiteFooterColumn>
82
- <div eclSiteFooterSection isSiteInfo>
83
- <div eclSiteFooterTitle>
84
- <a eclLink
85
- variant="standalone"
86
- eclSiteFooterTitleLink
87
- routerLink="/">Site name
88
- </a>
89
- </div>
90
- <div eclSiteFooterDescription>This site is managed by the Directorate-General for &quot;DG
91
- identification&quot;
92
- </div>
82
+ <div eclSiteFooterSection variant="site-info">
83
+ <div eclSiteFooterTitle>
84
+ <a eclLink variant="standalone" isInverted eclSiteFooterTitleLink routerLink="/">
85
+ <span eclLinkLabel>Site name</span>
86
+ <ecl-icon icon="arrow-left" size="xs" transform="flip-horizontal" color="inverted"
87
+ ariaHidden="false" role="img">
88
+ </ecl-icon>
89
+ </a>
90
+ </div>
91
+ <div eclSiteFooterDescription>This site is managed by:
92
+ <span eclSiteFooterDescriptionName>[name of the manager of the site]</span>
93
93
  </div>
94
+ <ecl-social-media-follow eclSiteFooterSocialMedia>
95
+ <ecl-social-media-follow-item icon="facebook" href="https://www.facebook.com/dg"
96
+ isInverted></ecl-social-media-follow-item>
97
+ <ecl-social-media-follow-item icon="instagram" href="https://www.instagram.com/dg/"
98
+ isInverted></ecl-social-media-follow-item>
99
+ <ecl-social-media-follow-item icon="twitter" href="https://x.com/dg"
100
+ isInverted></ecl-social-media-follow-item>
101
+ <ecl-social-media-follow-item icon="linkedin" href="https://www.linkedin.com/dg"
102
+ isInverted></ecl-social-media-follow-item>
103
+ <ecl-social-media-follow-item icon="chain" href="https://more_chanels/dg"
104
+ isInverted></ecl-social-media-follow-item>
105
+ </ecl-social-media-follow>
94
106
  </div>
95
- <div eclSiteFooterColumn>
96
- <div eclSiteFooterSection>
97
- <div eclSiteFooterTitle
98
- [isSeparator]="true">
99
- Contact us
107
+ <div eclSiteFooterSection variant="links">
108
+ <div eclSiteFooterRow>
109
+ <div eclSiteFooterSection variant="contact">
110
+ <div eclSiteFooterTitle>
111
+ Contact us </div>
112
+ <ul eclSiteFooterList>
113
+ <li eclSiteFooterListItem><a routerLink="/" eclLink variant="standalone" isInverted
114
+ eclSiteFooterLink>Contact
115
+ information of the DG</a></li>
116
+ </ul>
100
117
  </div>
101
- <ul eclSiteFooterList>
102
- <li eclSiteFooterListItem>
103
- <a eclLink
104
- isInverted
105
- eclSiteFooterLink
106
- variant="standalone"
107
- routerLink="/">
108
- {{ 'ecl.footer.CONTACT-INFO-DG' | translate }}
109
- </a>
110
- </li>
111
- </ul>
112
- </div>
113
- <div eclSiteFooterSection>
114
- <div eclSiteFooterTitle
115
- [isSeparator]="true">
116
- Follow us on
118
+ <div eclSiteFooterSection variant="about">
119
+ <div eclSiteFooterTitle>
120
+ About us </div>
121
+ <ul eclSiteFooterList>
122
+ <li eclSiteFooterListItem><a routerLink="/" eclLink variant="standalone" isInverted
123
+ eclSiteFooterLink>Information
124
+ about the DG</a></li>
125
+ <li eclSiteFooterListItem><a routerLink="/" eclLink variant="standalone" isInverted
126
+ eclSiteFooterLink>Information
127
+ about the DG</a></li>
128
+ </ul>
117
129
  </div>
118
- <ul eclSiteFooterList
119
- [isInline]="true">
120
- <li eclSiteFooterListItem>
121
- <a eclLink
122
- isInverted
123
- eclSiteFooterLink
124
- variant="standalone"
125
- routerLink="/">
126
- <ecl-icon iconSet="social-media"
127
- icon="facebook-negative"
128
- size="xs">
129
- </ecl-icon>
130
- <span eclLinkLabel>Facebook</span>
131
- </a>
132
- </li>
133
- <li eclSiteFooterListItem>
134
- <a eclLink
135
- isInverted
136
- eclSiteFooterLink
137
- variant="standalone"
138
- routerLink="/">
139
- <ecl-icon iconSet="social-media"
140
- icon="twitter-negative"
141
- size="xs">
142
- </ecl-icon>
143
- <span eclLinkLabel>X</span>
144
- </a>
145
- </li>
146
- <li eclSiteFooterListItem>
147
- <a eclLink
148
- isInverted
149
- eclSiteFooterLink
150
- variant="standalone"
151
- routerLink="/">
152
- <ecl-icon iconSet="social-media"
153
- icon="linkedin-negative"
154
- size="xs">
155
- </ecl-icon>
156
- <span eclLinkLabel>Linkedin</span>
157
- </a>
158
- </li>
159
- </ul>
160
130
  </div>
161
- </div>
162
- <div eclSiteFooterColumn>
163
- <div eclSiteFooterSection>
164
- <div eclSiteFooterTitle
165
- [isSeparator]="true">
166
- {{ 'ecl.footer.ABOUT-US' | translate }}
131
+ <div eclSiteFooterRow>
132
+ <div eclSiteFooterSection variant="more">
133
+ <div eclSiteFooterTitle>
134
+ More information on </div>
135
+ <ul eclSiteFooterList>
136
+ <li eclSiteFooterListItem><a routerLink="/" eclLink variant="standalone" isInverted
137
+ eclSiteFooterLink>Class
138
+ name 1</a></li>
139
+ <li eclSiteFooterListItem><a routerLink="/" eclLink variant="standalone" isInverted
140
+ eclSiteFooterLink>Class
141
+ name 2</a></li>
142
+ </ul>
167
143
  </div>
168
- <ul eclSiteFooterList>
169
- <li eclSiteFooterListItem>
170
- <a eclLink
171
- isInverted
172
- eclSiteFooterLink
173
- variant="standalone"
174
- routerLink="/">
175
- {{ 'ecl.footer.INFO-ABOUT-DG' | translate }}
176
- </a>
177
- </li>
178
- </ul>
179
- </div>
180
- <div eclSiteFooterSection>
181
- <div eclSiteFooterTitle
182
- [isSeparator]="true">
183
- {{ 'ecl.footer.RELATED-SITES' | translate }}
144
+ <div eclSiteFooterSection variant="related">
145
+ <div eclSiteFooterTitle>
146
+ Related links </div>
147
+ <ul eclSiteFooterList>
148
+ <li eclSiteFooterListItem><a routerLink="/" eclLink variant="standalone" isInverted
149
+ eclSiteFooterLink>Related
150
+ link 1</a></li>
151
+ <li eclSiteFooterListItem><a routerLink="/" eclLink variant="standalone" isInverted
152
+ eclSiteFooterLink>Related
153
+ link 2</a></li>
154
+ <li eclSiteFooterListItem><a routerLink="/" eclLink variant="standalone" isInverted
155
+ eclSiteFooterLink>Related
156
+ link 3</a></li>
157
+ </ul>
184
158
  </div>
185
- <ul eclSiteFooterList>
186
- <li eclSiteFooterListItem>
187
- <a eclLink
188
- isInverted
189
- eclSiteFooterLink
190
- variant="standalone"
191
- routerLink="/">
192
- Related link 1
193
- </a>
194
- </li>
195
- <li eclSiteFooterListItem>
196
- <a eclLink
197
- isInverted
198
- eclSiteFooterLink
199
- variant="standalone"
200
- routerLink="/">
201
- Related link 2
202
- </a>
203
- </li>
204
- </ul>
205
159
  </div>
206
- </div>
207
- </div>
208
- <div eclSiteFooterRow>
209
- <div eclSiteFooterColumn>
210
- <div eclSiteFooterSection
211
- [isCondensed]="true">
212
- <div eclSiteFooterContent>{{ 'ecl.footer.MORE-INFO' | translate }}:</div>
213
- <ul eclSiteFooterList>
214
- <li eclSiteFooterListItem>
215
- <a eclLink
216
- isInverted
217
- eclSiteFooterLink
218
- variant="standalone"
219
- routerLink="/">
220
- Class name 1
221
- </a>
222
- </li>
223
- <li eclSiteFooterListItem>
224
- <a eclLink
225
- isInverted
226
- eclSiteFooterLink
227
- variant="standalone"
228
- routerLink="/">
229
- Class name 2
230
- </a>
231
- </li>
232
- </ul>
160
+ <div eclSiteFooterRow>
161
+ <div eclSiteFooterSection variant="custom-1">
162
+ <div eclSiteFooterTitle>Custom links</div>
163
+ <ul eclSiteFooterList>
164
+ <li eclSiteFooterListItem><a routerLink="/" eclLink variant="standalone" isInverted
165
+ eclSiteFooterLink>Custom link</a></li>
166
+ <li eclSiteFooterListItem><a routerLink="/" eclLink variant="standalone" isInverted
167
+ eclSiteFooterLink>Custom link</a></li>
168
+ </ul>
169
+ </div>
170
+ <div eclSiteFooterSection variant="custom-2">
171
+ <div eclSiteFooterTitle>Custom links</div>
172
+ <ul eclSiteFooterList>
173
+ <li eclSiteFooterListItem><a routerLink="/" eclLink variant="standalone" isInverted
174
+ eclSiteFooterLink>Custom link</a></li>
175
+ <li eclSiteFooterListItem><a routerLink="/" eclLink variant="standalone" isInverted
176
+ eclSiteFooterLink>Custom link</a></li>
177
+ </ul>
178
+ </div>
233
179
  </div>
234
180
  </div>
235
181
  </div>
236
- </ecl-site-footer>
237
- </ecl-app>
182
+ </footer>
183
+ </ecl-app>
package/lib/skeletons/_angular/options/ecl-ec/src/app/app.component.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Component, OnInit, Signal } from '@angular/core';
1
+ import { Component, inject, OnInit, Signal } from '@angular/core';
2
2
  import { RouterOutlet } from '@angular/router';
3
3
  import {
4
4
  UserService,
@@ -10,6 +10,7 @@ import { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';
10
10
  import { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';
11
11
  import { EclMenuItemSelectEvent, EUI_ECL_MENU } from '@eui/ecl/components/ecl-menu';
12
12
  import { EUI_ECL_PAGE_HEADER } from '@eui/ecl/components/ecl-page-header';
13
+ import { EUI_ECL_SOCIAL_MEDIA_FOLLOW } from '@eui/ecl/components/ecl-social-media-follow';
13
14
  import { EUI_ECL_SITE_FOOTER } from '@eui/ecl/components/ecl-site-footer';
14
15
  import { EclSiteHeaderLoginEvent, EclSiteHeaderSearchEvent, EUI_ECL_SITE_HEADER } from '@eui/ecl/components/ecl-site-header';
15
16
  import { TranslateModule } from '@ngx-translate/core';
@@ -27,6 +28,7 @@ import { TranslateModule } from '@ngx-translate/core';
27
28
  ...EUI_ECL_PAGE_HEADER,
28
29
  ...EUI_ECL_SITE_HEADER,
29
30
  ...EUI_ECL_SITE_FOOTER,
31
+ ...EUI_ECL_SOCIAL_MEDIA_FOLLOW,
30
32
  RouterOutlet,
31
33
  TranslateModule,
32
34
  ]
@@ -36,8 +38,7 @@ export class AppComponent implements OnInit {
36
38
  isLoggedIn = false;
37
39
  userState: Signal<UserState>;
38
40
  userInfos: UserState;
39
-
40
- constructor(private userService: UserService<UserState>,) { }
41
+ private userService = inject(UserService<UserState>);
41
42
 
42
43
  ngOnInit(): void {
43
44
  this.userState = this.userService.getSignal();
package/lib/skeletons/_angular/options/ecl-ec/src/app/features/home/home.component.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Component, Inject } from '@angular/core';
1
+ import { Component, inject } from '@angular/core';
2
2
  import { CONFIG_TOKEN, EuiAppConfig } from '@eui/core';
3
3
  import { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';
4
4
  import { EUI_ECL_LIST } from '@eui/ecl/components/ecl-list';
@@ -14,7 +14,9 @@ import { TranslateModule } from '@ngx-translate/core';
14
14
  ],
15
15
  })
16
16
  export class HomeComponent {
17
- constructor(@Inject(CONFIG_TOKEN) protected config: EuiAppConfig) {
18
- console.log(config);
17
+ protected config: EuiAppConfig = inject(CONFIG_TOKEN);
18
+
19
+ constructor() {
20
+ console.log(this.config);
19
21
  }
20
22
  }
package/lib/skeletons/_angular/options/ecl-eu/angular.json CHANGED
@@ -140,39 +140,17 @@
140
140
  "lint": {
141
141
  "builder": "@angular-eslint/builder:lint",
142
142
  "options": {
143
- "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"],
144
- "eslintConfig": "src/.eslintrc.json"
143
+ "lintFilePatterns": [
144
+ "src/**/*.ts",
145
+ "src/**/*.html"
146
+ ],
147
+ "eslintConfig": "eslint.config.js"
145
148
  }
146
149
  },
147
150
  "test": {
148
- "builder": "@angular-devkit/build-angular:karma",
151
+ "builder": "@angular/build:unit-test",
149
152
  "options": {
150
- "polyfills": ["zone.js", "zone.js/testing"],
151
- "tsConfig": "src/tsconfig.spec.json",
152
- "karmaConfig": "src/karma.conf.js",
153
- "inlineStyleLanguage": "scss",
154
- "assets": [
155
- {
156
- "glob": "**/*",
157
- "input": "node_modules/@eui/core/assets/",
158
- "output": "./assets"
159
- },
160
- {
161
- "glob": "**/*",
162
- "input": "node_modules/@eui/styles/dist/assets/ecl",
163
- "output": "./assets/images/ecl"
164
- },
165
- {
166
- "glob": "**/*",
167
- "input": "node_modules/@eui/styles/dist/assets",
168
- "output": "./assets"
169
- },
170
- {
171
- "glob": "**/*",
172
- "input": "node_modules/@eui/ecl/assets/",
173
- "output": "./assets"
174
- }
175
- ]
153
+ "tsConfig": "src/tsconfig.spec.json"
176
154
  }
177
155
  }
178
156
  }
package/lib/skeletons/_angular/options/ecl-eu/src/app/app.component.html CHANGED
@@ -4,9 +4,7 @@
4
4
  <div eclSiteHeaderEnvironment>Environment</div>
5
5
 
6
6
  <ecl-site-header-action>
7
- <ecl-site-header-login
8
- [isLoggedIn]="isLoggedIn"
9
- (login)="onLogin($event)">
7
+ <ecl-site-header-login [isLoggedIn]="isLoggedIn" (login)="onLogin($event)">
10
8
  <p eclSiteHeaderLoginDescription>
11
9
  {{ 'ecl.site-header.LOGGED-IN-AS' | translate }} {{ userInfos?.fullName }}
12
10
  </p>
@@ -18,7 +16,7 @@
18
16
 
19
17
  <ecl-site-header-language></ecl-site-header-language>
20
18
 
21
- <ecl-site-header-search (search)="onSearch($event)"></ecl-site-header-search>
19
+ <ecl-site-header-search (searchEvent)="onSearch($event)"></ecl-site-header-search>
22
20
  </ecl-site-header-action>
23
21
 
24
22
  <ecl-menu (menuItemSelect)="onMenuItemSelected($event)" aria-label="Main navigation">
@@ -52,9 +50,11 @@
52
50
 
53
51
  <ecl-page-header>
54
52
  <ecl-breadcrumb>
55
- <ecl-breadcrumb-segment>Home</ecl-breadcrumb-segment>
56
- <ecl-breadcrumb-segment>European Commission</ecl-breadcrumb-segment>
57
- <ecl-breadcrumb-segment [isCurrentPage]="true">ECL</ecl-breadcrumb-segment>
53
+ <ol eclBreadcrumbContainer>
54
+ <li eclBreadcrumbSegment>Home</li>
55
+ <li eclBreadcrumbSegment>European Commission</li>
56
+ <li eclBreadcrumbSegment [isCurrentPage]="true">ECL</li>
57
+ </ol>
58
58
  </ecl-breadcrumb>
59
59
 
60
60
  <div eclPageHeaderInfo>
@@ -67,7 +67,8 @@
67
67
  </div>
68
68
  <div eclPageHeaderDescriptionContainer>
69
69
  <p eclPageHeaderDescription>
70
- The Europa Component Library (ECL) is a comprehensive style guide containing the design elements and visual standards that make up all Europa websites and applications.
70
+ The Europa Component Library (ECL) is a comprehensive style guide containing the design elements and
71
+ visual standards that make up all Europa websites and applications.
71
72
  </p>
72
73
  </div>
73
74
  </ecl-page-header>
@@ -76,79 +77,66 @@
76
77
  <router-outlet></router-outlet>
77
78
  </div>
78
79
 
79
- <ecl-site-footer>
80
+ <footer eclSiteFooter>
80
81
  <div eclSiteFooterRow>
81
82
  <div eclSiteFooterColumn>
82
- <div eclSiteFooterSection isSiteInfo>
83
+ <div eclSiteFooterSection variant="site-info">
83
84
  <div eclSiteFooterTitle>
84
- <a eclLink
85
- variant="standalone"
86
- eclSiteFooterTitleLink
87
- routerLink="/">Site name
85
+ <a eclLink variant="standalone" eclSiteFooterTitleLink routerLink="/">
86
+ <span eclLinkLabel>Site name</span>
87
+ <ecl-icon icon="arrow-left" size="s" transform="flip-horizontal">
88
+ </ecl-icon>
88
89
  </a>
89
90
  </div>
90
91
  <div eclSiteFooterDescription>
91
- This site is managed by <a routerLink="/" eclLink variant="standalone">site owner name</a>
92
- and is an official website of the European Union
92
+ This site is managed by: [name of the manager of the site]
93
93
  </div>
94
+ <ul eclSiteFooterList>
95
+ <li eclSiteFooterListItem>
96
+ <a eclLink eclSiteFooterLink variant="standalone" routerLink="/">
97
+ {{ 'ecl.footer.ACCESSIBILITY-STATEMENT' | translate }}
98
+ </a>
99
+ </li>
100
+ </ul>
94
101
  </div>
95
102
  </div>
96
103
  <div eclSiteFooterColumn>
97
104
  <div eclSiteFooterSection>
98
- <div eclSiteFooterTitle
99
- [isSeparator]="true">
105
+ <div eclSiteFooterTitle isSeparator>
100
106
  Contact site name
101
107
  </div>
102
108
  <ul eclSiteFooterList>
103
109
  <li eclSiteFooterListItem>
104
- <a eclLink
105
- eclSiteFooterLink
106
- variant="standalone"
107
- routerLink="/">
110
+ <a eclLink eclSiteFooterLink variant="standalone" routerLink="/">
108
111
  Link
109
112
  </a>
110
113
  </li>
111
114
  </ul>
112
115
  </div>
113
116
  <div eclSiteFooterSection>
114
- <div eclSiteFooterTitle
115
- [isSeparator]="true">
117
+ <div eclSiteFooterTitle isSeparator>
116
118
  Follow us
117
119
  </div>
118
- <ul eclSiteFooterList
119
- [isInline]="true">
120
+ <ul eclSiteFooterList isInline>
120
121
  <li eclSiteFooterListItem>
121
- <a eclLink
122
- eclSiteFooterLink
123
- variant="standalone"
124
- routerLink="/">
125
- <ecl-icon iconSet="social-media"
126
- icon="facebook"
127
- size="xs">
122
+ <a eclLink eclSiteFooterLink variant="standalone" routerLink="/">
123
+ <ecl-icon iconSet="social-media" icon="facebook" size="xs">
128
124
  </ecl-icon>
129
125
  <span eclLinkLabel>Social 1</span>
130
126
  </a>
131
127
  </li>
128
+
129
+
132
130
  <li eclSiteFooterListItem>
133
- <a eclLink
134
- eclSiteFooterLink
135
- variant="standalone"
136
- routerLink="/">
137
- <ecl-icon iconSet="social-media"
138
- icon="twitter"
139
- size="xs">
131
+ <a eclLink eclSiteFooterLink variant="standalone" routerLink="/">
132
+ <ecl-icon iconSet="social-media" icon="twitter" size="xs">
140
133
  </ecl-icon>
141
134
  <span eclLinkLabel>Social 2</span>
142
135
  </a>
143
136
  </li>
144
137
  <li eclSiteFooterListItem>
145
- <a eclLink
146
- eclSiteFooterLink
147
- variant="standalone"
148
- routerLink="/">
149
- <ecl-icon iconSet="social-media"
150
- icon="mastodon"
151
- size="xs">
138
+ <a eclLink eclSiteFooterLink variant="standalone" routerLink="/">
139
+ <ecl-icon iconSet="social-media" icon="mastodon" size="xs">
152
140
  </ecl-icon>
153
141
  <span eclLinkLabel>Social 3</span>
154
142
  </a>
@@ -158,40 +146,27 @@
158
146
  </div>
159
147
  <div eclSiteFooterColumn>
160
148
  <div eclSiteFooterSection>
161
- <div eclSiteFooterTitle
162
- [isSeparator]="true">
149
+ <div eclSiteFooterTitle isSeparator>
163
150
  Optional links
164
151
  </div>
165
152
  <ul eclSiteFooterList>
166
153
  <li eclSiteFooterListItem>
167
- <a eclLink
168
- eclSiteFooterLink
169
- variant="standalone"
170
- routerLink="/">
171
- {{ 'ecl.footer.ACCESSIBILITY' | translate }}
154
+ <a eclLink eclSiteFooterLink variant="standalone" routerLink="/">
155
+ Link 1
172
156
  </a>
173
157
  </li>
174
158
  <li eclSiteFooterListItem>
175
- <a eclLink
176
- eclSiteFooterLink
177
- variant="standalone"
178
- routerLink="/">
159
+ <a eclLink eclSiteFooterLink variant="standalone" routerLink="/">
179
160
  Link 2
180
161
  </a>
181
162
  </li>
182
163
  <li eclSiteFooterListItem>
183
- <a eclLink
184
- eclSiteFooterLink
185
- variant="standalone"
186
- routerLink="/">
164
+ <a eclLink eclSiteFooterLink variant="standalone" routerLink="/">
187
165
  Link 3
188
166
  </a>
189
167
  </li>
190
168
  <li eclSiteFooterListItem>
191
- <a eclLink
192
- eclSiteFooterLink
193
- variant="standalone"
194
- routerLink="/">
169
+ <a eclLink eclSiteFooterLink variant="standalone" routerLink="/">
195
170
  Link 4
196
171
  </a>
197
172
  </li>
@@ -199,5 +174,5 @@
199
174
  </div>
200
175
  </div>
201
176
  </div>
202
- </ecl-site-footer>
203
- </ecl-app>
177
+ </footer>
178
+ </ecl-app>
package/lib/skeletons/_angular/options/ecl-eu/src/app/app.component.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Component, OnInit, Signal } from '@angular/core';
1
+ import { Component, inject, OnInit, Signal } from '@angular/core';
2
2
  import { RouterOutlet } from '@angular/router';
3
3
  import {
4
4
  UserService,
@@ -36,8 +36,7 @@ export class AppComponent implements OnInit {
36
36
  isLoggedIn = false;
37
37
  userState: Signal<UserState>;
38
38
  userInfos: UserState;
39
-
40
- constructor(private userService: UserService<UserState>,) { }
39
+ private userService = inject(UserService<UserState>);
41
40
 
42
41
  ngOnInit(): void {
43
42
  this.userState = this.userService.getSignal();
package/lib/skeletons/_angular/options/ecl-eu/src/app/features/home/home.component.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Component, Inject } from '@angular/core';
1
+ import { Component, inject } from '@angular/core';
2
2
  import { CONFIG_TOKEN, EuiAppConfig } from '@eui/core';
3
3
  import { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';
4
4
  import { EUI_ECL_LIST } from '@eui/ecl/components/ecl-list';
@@ -14,7 +14,9 @@ import { TranslateModule } from '@ngx-translate/core';
14
14
  ],
15
15
  })
16
16
  export class HomeComponent {
17
- constructor(@Inject(CONFIG_TOKEN) protected config: EuiAppConfig) {
18
- console.log(config);
17
+ protected config: EuiAppConfig = inject(CONFIG_TOKEN);
18
+
19
+ constructor() {
20
+ console.log(this.config);
19
21
  }
20
22
  }