sdga-ui 1.0.6 → 1.0.8

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 (73) hide show
  1. package/README.md +4 -4
  2. package/css/dga-ui.css +571 -220
  3. package/css/dga-ui.css.map +1 -1
  4. package/demo-angular/angular.json +3 -0
  5. package/demo-angular/package-lock.json +41 -41
  6. package/demo-angular/package.json +8 -8
  7. package/demo-angular/public/404.html +35 -0
  8. package/demo-angular/public/i18n/ar.json +47 -0
  9. package/demo-angular/public/i18n/en.json +47 -0
  10. package/demo-angular/src/app/app.html +1 -1
  11. package/demo-angular/src/app/app.routes.ts +8 -4
  12. package/demo-angular/src/app/app.ts +11 -2
  13. package/demo-angular/src/app/shared/code-example/code-example.component.html +1 -1
  14. package/demo-angular/src/app/shared/code-example/code-example.component.ts +12 -1
  15. package/demo-angular/src/app/views/alerts/alerts.component.html +10 -10
  16. package/demo-angular/src/app/views/alerts/alerts.component.ts +10 -10
  17. package/demo-angular/src/app/views/buttons/buttons.component.html +118 -47
  18. package/demo-angular/src/app/views/buttons/buttons.component.scss +0 -3
  19. package/demo-angular/src/app/views/buttons/buttons.component.ts +91 -21
  20. package/demo-angular/src/app/views/cards/cards.component.html +6 -6
  21. package/demo-angular/src/app/views/cards/cards.component.ts +10 -10
  22. package/demo-angular/src/app/views/footer/footer.html +270 -0
  23. package/demo-angular/src/app/views/footer/footer.ts +276 -0
  24. package/demo-angular/src/app/views/header/header.html +1 -0
  25. package/demo-angular/src/app/views/header/header.scss +0 -0
  26. package/demo-angular/src/app/views/header/header.spec.ts +23 -0
  27. package/demo-angular/src/app/views/header/header.ts +11 -0
  28. package/demo-angular/src/app/views/home/home.component.html +0 -5
  29. package/demo-angular/src/app/views/links/links.component.html +2 -2
  30. package/demo-angular/src/app/views/links/links.component.ts +1 -1
  31. package/demo-angular/src/app/views/toasts/toasts.component.html +7 -7
  32. package/demo-angular/src/app/views/toasts/toasts.component.ts +7 -7
  33. package/demo-angular/src/index.html +15 -1
  34. package/demo-angular/tsconfig.app.json +2 -1
  35. package/package.json +2 -2
  36. package/sdga-ui/README.md +45 -0
  37. package/sdga-ui/content/docs/components/alerts.mdx +475 -0
  38. package/sdga-ui/content/docs/index.mdx +239 -0
  39. package/sdga-ui/next.config.mjs +10 -0
  40. package/sdga-ui/package-lock.json +5851 -0
  41. package/sdga-ui/package.json +32 -0
  42. package/sdga-ui/postcss.config.mjs +5 -0
  43. package/sdga-ui/source.config.ts +27 -0
  44. package/sdga-ui/src/app/(home)/layout.tsx +6 -0
  45. package/sdga-ui/src/app/(home)/page.tsx +202 -0
  46. package/sdga-ui/src/app/api/search/route.ts +7 -0
  47. package/sdga-ui/src/app/docs/[[...slug]]/page.tsx +54 -0
  48. package/sdga-ui/src/app/docs/layout.tsx +11 -0
  49. package/sdga-ui/src/app/global.css +3 -0
  50. package/sdga-ui/src/app/layout.tsx +25 -0
  51. package/sdga-ui/src/app/llms-full.txt/route.ts +10 -0
  52. package/sdga-ui/src/app/og/docs/[...slug]/route.tsx +34 -0
  53. package/sdga-ui/src/app/sdga-scoped.css +7 -0
  54. package/sdga-ui/src/components/sdga-preview.tsx +105 -0
  55. package/sdga-ui/src/lib/layout.shared.tsx +9 -0
  56. package/sdga-ui/src/lib/source.ts +27 -0
  57. package/sdga-ui/src/mdx-components.tsx +9 -0
  58. package/sdga-ui/tsconfig.json +46 -0
  59. package/theme/_variables.scss +6 -5
  60. package/theme/components/_buttons.scss +1 -197
  61. package/theme/config/_base.scss +11 -1
  62. package/theme/customizations/_alerts.scss +115 -126
  63. package/theme/customizations/_badges.scss +15 -0
  64. package/theme/customizations/_buttons.scss +349 -146
  65. package/theme/customizations/_cards.scss +52 -0
  66. package/theme/customizations/_footer.scss +160 -0
  67. package/theme/customizations/_global.scss +20 -2
  68. package/theme/customizations/_links.scss +62 -45
  69. package/theme/customizations/_toasts.scss +92 -114
  70. package/theme/dga-ui.scss +2 -1
  71. package/demo-angular/src/app/views/bootstrap/bootstrap.component.html +0 -14
  72. package/demo-angular/src/app/views/bootstrap/bootstrap.component.scss +0 -91
  73. package/demo-angular/src/app/views/bootstrap/bootstrap.component.ts +0 -23
package/demo-angular/src/app/views/cards/cards.component.ts CHANGED
@@ -32,7 +32,7 @@ export class CardsComponent {
32
32
  cardWithIconCode = `<div class="card" tabindex="0">
33
33
  <div class="card-body">
34
34
  <h5 class="card-title">
35
- <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
35
+ <i class="bi bi-check-circle card-title-icon"></i>
36
36
  </h5>
37
37
  <h6 class="card-subtitle mb-2">Card Title</h6>
38
38
  <p class="card-text">This is a sample card text that describes the content.</p>
@@ -64,7 +64,7 @@ export class CardsComponent {
64
64
  disabledCardCode = `<div class="card disabled" tabindex="0">
65
65
  <div class="card-body">
66
66
  <h5 class="card-title">
67
- <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
67
+ <i class="bi bi-check-circle card-title-icon"></i>
68
68
  <input class="card-title-checked form-check-input ripple"
69
69
  disabled
70
70
  type="checkbox"
@@ -102,7 +102,7 @@ export class CardsComponent {
102
102
  expandableCardHtmlCode = `<div class="card" tabindex="0" [class.expanded]="isExpanded(1)">
103
103
  <div class="card-body">
104
104
  <h5 class="card-title">
105
- <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
105
+ <i class="bi bi-check-circle card-title-icon"></i>
106
106
  <input class="card-title-checked form-check-input ripple"
107
107
  type="checkbox"
108
108
  value=""
@@ -124,9 +124,9 @@ export class CardsComponent {
124
124
  }
125
125
 
126
126
  <div class="card-footer">
127
- <i class="hgi hgi-stroke hgi-arrow-up-01 card-expanded-icon"
128
- [class.hgi-arrow-up-01]="isExpanded(1)"
129
- [class.hgi-arrow-down-01]="!isExpanded(1)"
127
+ <i class="bi card-expanded-icon"
128
+ [class.bi-chevron-up]="isExpanded(1)"
129
+ [class.bi-chevron-down]="!isExpanded(1)"
130
130
  (click)="toggleCard(1)"></i>
131
131
  </div>
132
132
  </div>
@@ -163,7 +163,7 @@ export class CardsComponent {
163
163
  expandableCardSimpleHtmlCode = `<div class="card" tabindex="0" [class.expanded]="isExpanded(2)">
164
164
  <div class="card-body">
165
165
  <h5 class="card-title">
166
- <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
166
+ <i class="bi bi-check-circle card-title-icon"></i>
167
167
  </h5>
168
168
  <h6 class="card-subtitle mb-2">Expandable Card Title</h6>
169
169
  <p class="card-text">Click the arrow to see more details.</p>
@@ -184,9 +184,9 @@ export class CardsComponent {
184
184
  }
185
185
 
186
186
  <div class="card-footer">
187
- <i class="hgi hgi-stroke hgi-arrow-up-01 card-expanded-icon"
188
- [class.hgi-arrow-up-01]="isExpanded(2)"
189
- [class.hgi-arrow-down-01]="!isExpanded(2)"
187
+ <i class="bi card-expanded-icon"
188
+ [class.bi-chevron-up]="isExpanded(2)"
189
+ [class.bi-chevron-down]="!isExpanded(2)"
190
190
  (click)="toggleCard(2)"></i>
191
191
  </div>
192
192
  </div>
package/demo-angular/src/app/views/footer/footer.html ADDED
@@ -0,0 +1,270 @@
1
+ <footer class="dga-footer on-primary">
2
+ <div class="dga-footer-content container-fluid">
3
+ <!-- Main Footer Content -->
4
+ <div class="dga-footer-nav-wrapper">
5
+ <!-- Footer Link Groups (5 columns) -->
6
+ <div class="dga-footer-nav-group">
7
+ <h6 class="dga-footer-section-title">Group Label</h6>
8
+ <ul class="list-unstyled">
9
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
10
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
11
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
12
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
13
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
14
+ </ul>
15
+ </div>
16
+
17
+ <div class="dga-footer-nav-group">
18
+ <h6 class="dga-footer-section-title">Group Label</h6>
19
+ <ul class="list-unstyled">
20
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
21
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
22
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
23
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
24
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
25
+ </ul>
26
+ </div>
27
+
28
+ <div class="dga-footer-nav-group">
29
+ <h6 class="dga-footer-section-title">Group Label</h6>
30
+ <ul class="list-unstyled">
31
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
32
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
33
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
34
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
35
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
36
+ </ul>
37
+ </div>
38
+
39
+ <div class="dga-footer-nav-group">
40
+ <h6 class="dga-footer-section-title">Group Label</h6>
41
+ <ul class="list-unstyled">
42
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
43
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
44
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
45
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
46
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
47
+ </ul>
48
+ </div>
49
+
50
+ <div class="dga-footer-nav-group">
51
+ <h6 class="dga-footer-section-title">Group Label</h6>
52
+ <ul class="list-unstyled">
53
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
54
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
55
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
56
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
57
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
58
+ </ul>
59
+ </div>
60
+
61
+ <!-- Social Media & Accessibility -->
62
+ <div class="dga-footer-social">
63
+ <!-- Social Media -->
64
+ <div class="dga-footer-nav-group">
65
+ <h6 class="dga-footer-section-title">Social Media</h6>
66
+ <div class="d-flex gap-2 flex-wrap">
67
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
68
+ <i class="bi bi-twitter"></i>
69
+ </a>
70
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
71
+ <i class="bi bi-facebook"></i>
72
+ </a>
73
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
74
+ <i class="bi bi-instagram"></i>
75
+ </a>
76
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
77
+ <i class="bi bi-linkedin"></i>
78
+ </a>
79
+ </div>
80
+ </div>
81
+
82
+ <!-- Accessibility Tools -->
83
+ <div class="dga-footer-nav-group">
84
+ <h6 class="dga-footer-section-title">Accessibility Tools</h6>
85
+ <div class="d-flex gap-2 flex-wrap">
86
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
87
+ <i class="bi bi-eye"></i>
88
+ </a>
89
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
90
+ <i class="bi bi-volume-up"></i>
91
+ </a>
92
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
93
+ <i class="bi bi-universal-access"></i>
94
+ </a>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+
100
+ <!-- Bottom Footer -->
101
+ <div class="dga-footer-meta">
102
+ <div class="dga-footer-meta-content">
103
+ <!-- Footer Links Row -->
104
+ <div class="dga-footer-meta-links">
105
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
106
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
107
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
108
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
109
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
110
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
111
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
112
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
113
+ </div>
114
+
115
+ <!-- Copyright -->
116
+ <div class="dga-footer-copyright-container">
117
+ <p class="dga-footer-copyright">All Right Reserved For Digital Government Authority © 2024</p>
118
+ <div class="dga-footer-legal-links">
119
+ <a href="#" class="link-neutral small">Terms and Conditions</a>
120
+ <a href="#" class="link-neutral small">Privacy Policy</a>
121
+ </div>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- Logos -->
126
+ <div class="dga-footer-logo">
127
+ <img src="https://placehold.co/125x42" alt="logo">
128
+ <img src="https://placehold.co/125x42" alt="logo">
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </footer>
133
+
134
+ <app-code-example [htmlCode]="primaryFooterCode"></app-code-example>
135
+
136
+ <footer class="dga-footer bg-neutral-100">
137
+ <div class="dga-footer-content container-fluid">
138
+ <!-- Main Footer Content -->
139
+ <div class="dga-footer-nav-wrapper">
140
+ <!-- Footer Link Groups (5 columns) -->
141
+ <div class="dga-footer-nav-group">
142
+ <h6 class="dga-footer-section-title">Group Label</h6>
143
+ <ul class="list-unstyled">
144
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
145
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
146
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
147
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
148
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
149
+ </ul>
150
+ </div>
151
+
152
+ <div class="dga-footer-nav-group">
153
+ <h6 class="dga-footer-section-title">Group Label</h6>
154
+ <ul class="list-unstyled">
155
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
156
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
157
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
158
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
159
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
160
+ </ul>
161
+ </div>
162
+
163
+ <div class="dga-footer-nav-group">
164
+ <h6 class="dga-footer-section-title">Group Label</h6>
165
+ <ul class="list-unstyled">
166
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
167
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
168
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
169
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
170
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
171
+ </ul>
172
+ </div>
173
+
174
+ <div class="dga-footer-nav-group">
175
+ <h6 class="dga-footer-section-title">Group Label</h6>
176
+ <ul class="list-unstyled">
177
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
178
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
179
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
180
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
181
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
182
+ </ul>
183
+ </div>
184
+
185
+ <div class="dga-footer-nav-group">
186
+ <h6 class="dga-footer-section-title">Group Label</h6>
187
+ <ul class="list-unstyled">
188
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
189
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
190
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
191
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
192
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
193
+ </ul>
194
+ </div>
195
+
196
+ <!-- Social Media & Accessibility -->
197
+ <div class="dga-footer-social">
198
+ <!-- Social Media -->
199
+ <div class="dga-footer-nav-group">
200
+ <h6 class="dga-footer-section-title">Social Media</h6>
201
+ <div class="d-flex gap-2 flex-wrap">
202
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
203
+ <i class="bi bi-twitter"></i>
204
+ </a>
205
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
206
+ <i class="bi bi-facebook"></i>
207
+ </a>
208
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
209
+ <i class="bi bi-instagram"></i>
210
+ </a>
211
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
212
+ <i class="bi bi-linkedin"></i>
213
+ </a>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- Accessibility Tools -->
218
+ <div class="dga-footer-nav-group">
219
+ <h6 class="dga-footer-section-title">Accessibility Tools</h6>
220
+ <div class="d-flex gap-2 flex-wrap">
221
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
222
+ <i class="bi bi-eye"></i>
223
+ </a>
224
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
225
+ <i class="bi bi-volume-up"></i>
226
+ </a>
227
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
228
+ <i class="bi bi-universal-access"></i>
229
+ </a>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </div>
234
+
235
+ <!-- Bottom Footer -->
236
+ <div class="dga-footer-meta">
237
+ <div class="dga-footer-meta-content">
238
+ <!-- Footer Links Row -->
239
+ <div class="dga-footer-meta-links">
240
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
241
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
242
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
243
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
244
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
245
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
246
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
247
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
248
+ </div>
249
+
250
+ <!-- Copyright -->
251
+ <div class="dga-footer-copyright-container">
252
+ <p class="dga-footer-copyright">All Right Reserved For Digital Government Authority © 2024</p>
253
+ <div class="dga-footer-legal-links">
254
+ <a href="#" class="link-neutral small">Terms and Conditions</a>
255
+ <a href="#" class="link-neutral small">Privacy Policy</a>
256
+ </div>
257
+ </div>
258
+ </div>
259
+
260
+ <!-- Logos -->
261
+ <div class="dga-footer-logo">
262
+ <img src="https://placehold.co/125x42" alt="logo">
263
+ <img src="https://placehold.co/125x42" alt="logo">
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </footer>
268
+
269
+
270
+ <app-code-example [htmlCode]="secondaryFooterCode"></app-code-example>
package/demo-angular/src/app/views/footer/footer.ts ADDED
@@ -0,0 +1,276 @@
1
+ import { Component } from '@angular/core';
2
+ import { TranslateModule } from '@ngx-translate/core';
3
+ import { CodeExampleComponent } from '../../shared/code-example/code-example.component';
4
+
5
+ @Component({
6
+ selector: 'app-footer',
7
+ imports: [TranslateModule, CodeExampleComponent],
8
+ templateUrl: './footer.html',
9
+ })
10
+ export class Footer {
11
+ primaryFooterCode = `<footer class="dga-footer on-primary">
12
+ <div class="dga-footer-content container-fluid">
13
+ <!-- Main Footer Content -->
14
+ <div class="dga-footer-nav-wrapper">
15
+ <!-- Footer Link Groups (5 columns) -->
16
+ <div class="dga-footer-nav-group">
17
+ <h6 class="dga-footer-section-title">Group Label</h6>
18
+ <ul class="list-unstyled">
19
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
20
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
21
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
22
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
23
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
24
+ </ul>
25
+ </div>
26
+
27
+ <div class="dga-footer-nav-group">
28
+ <h6 class="dga-footer-section-title">Group Label</h6>
29
+ <ul class="list-unstyled">
30
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
31
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
32
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
33
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
34
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
35
+ </ul>
36
+ </div>
37
+
38
+ <div class="dga-footer-nav-group">
39
+ <h6 class="dga-footer-section-title">Group Label</h6>
40
+ <ul class="list-unstyled">
41
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
42
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
43
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
44
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
45
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
46
+ </ul>
47
+ </div>
48
+
49
+ <div class="dga-footer-nav-group">
50
+ <h6 class="dga-footer-section-title">Group Label</h6>
51
+ <ul class="list-unstyled">
52
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
53
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
54
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
55
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
56
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
57
+ </ul>
58
+ </div>
59
+
60
+ <div class="dga-footer-nav-group">
61
+ <h6 class="dga-footer-section-title">Group Label</h6>
62
+ <ul class="list-unstyled">
63
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
64
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
65
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
66
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
67
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
68
+ </ul>
69
+ </div>
70
+
71
+ <!-- Social Media & Accessibility -->
72
+ <div class="dga-footer-social">
73
+ <!-- Social Media -->
74
+ <div class="dga-footer-nav-group">
75
+ <h6 class="dga-footer-section-title">Social Media</h6>
76
+ <div class="d-flex gap-2 flex-wrap">
77
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
78
+ <i class="bi bi-twitter"></i>
79
+ </a>
80
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
81
+ <i class="bi bi-facebook"></i>
82
+ </a>
83
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
84
+ <i class="bi bi-instagram"></i>
85
+ </a>
86
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
87
+ <i class="bi bi-linkedin"></i>
88
+ </a>
89
+ </div>
90
+ </div>
91
+
92
+ <!-- Accessibility Tools -->
93
+ <div class="dga-footer-nav-group">
94
+ <h6 class="dga-footer-section-title">Accessibility Tools</h6>
95
+ <div class="d-flex gap-2 flex-wrap">
96
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
97
+ <i class="bi bi-eye"></i>
98
+ </a>
99
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
100
+ <i class="bi bi-volume-up"></i>
101
+ </a>
102
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
103
+ <i class="bi bi-universal-access"></i>
104
+ </a>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Bottom Footer -->
111
+ <div class="dga-footer-meta">
112
+ <div class="dga-footer-meta-content">
113
+ <!-- Footer Links Row -->
114
+ <div class="dga-footer-meta-links">
115
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
116
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
117
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
118
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
119
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
120
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
121
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
122
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
123
+ </div>
124
+
125
+ <!-- Copyright -->
126
+ <div class="dga-footer-copyright-container">
127
+ <p class="dga-footer-copyright">All Right Reserved For Digital Government Authority © 2024</p>
128
+ <div class="dga-footer-legal-links">
129
+ <a href="#" class="link-neutral small">Terms and Conditions</a>
130
+ <a href="#" class="link-neutral small">Privacy Policy</a>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Logos -->
136
+ <div class="dga-footer-logo">
137
+ <img src="https://placehold.co/125x42" alt="logo">
138
+ <img src="https://placehold.co/125x42" alt="logo">
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </footer>`;
143
+
144
+ secondaryFooterCode = `<footer class="dga-footer bg-neutral-100">
145
+ <div class="dga-footer-content container-fluid">
146
+ <!-- Main Footer Content -->
147
+ <div class="dga-footer-nav-wrapper">
148
+ <!-- Footer Link Groups (5 columns) -->
149
+ <div class="dga-footer-nav-group">
150
+ <h6 class="dga-footer-section-title">Group Label</h6>
151
+ <ul class="list-unstyled">
152
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
153
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
154
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
155
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
156
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
157
+ </ul>
158
+ </div>
159
+
160
+ <div class="dga-footer-nav-group">
161
+ <h6 class="dga-footer-section-title">Group Label</h6>
162
+ <ul class="list-unstyled">
163
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
164
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
165
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
166
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
167
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
168
+ </ul>
169
+ </div>
170
+
171
+ <div class="dga-footer-nav-group">
172
+ <h6 class="dga-footer-section-title">Group Label</h6>
173
+ <ul class="list-unstyled">
174
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
175
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
176
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
177
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
178
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
179
+ </ul>
180
+ </div>
181
+
182
+ <div class="dga-footer-nav-group">
183
+ <h6 class="dga-footer-section-title">Group Label</h6>
184
+ <ul class="list-unstyled">
185
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
186
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
187
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
188
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
189
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
190
+ </ul>
191
+ </div>
192
+
193
+ <div class="dga-footer-nav-group">
194
+ <h6 class="dga-footer-section-title">Group Label</h6>
195
+ <ul class="list-unstyled">
196
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
197
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
198
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
199
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
200
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
201
+ </ul>
202
+ </div>
203
+
204
+ <!-- Social Media & Accessibility -->
205
+ <div class="dga-footer-social">
206
+ <!-- Social Media -->
207
+ <div class="dga-footer-nav-group">
208
+ <h6 class="dga-footer-section-title">Social Media</h6>
209
+ <div class="d-flex gap-2 flex-wrap">
210
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
211
+ <i class="bi bi-twitter"></i>
212
+ </a>
213
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
214
+ <i class="bi bi-facebook"></i>
215
+ </a>
216
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
217
+ <i class="bi bi-instagram"></i>
218
+ </a>
219
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
220
+ <i class="bi bi-linkedin"></i>
221
+ </a>
222
+ </div>
223
+ </div>
224
+
225
+ <!-- Accessibility Tools -->
226
+ <div class="dga-footer-nav-group">
227
+ <h6 class="dga-footer-section-title">Accessibility Tools</h6>
228
+ <div class="d-flex gap-2 flex-wrap">
229
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
230
+ <i class="bi bi-eye"></i>
231
+ </a>
232
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
233
+ <i class="bi bi-volume-up"></i>
234
+ </a>
235
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
236
+ <i class="bi bi-universal-access"></i>
237
+ </a>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- Bottom Footer -->
244
+ <div class="dga-footer-meta">
245
+ <div class="dga-footer-meta-content">
246
+ <!-- Footer Links Row -->
247
+ <div class="dga-footer-meta-links">
248
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
249
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
250
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
251
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
252
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
253
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
254
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
255
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
256
+ </div>
257
+
258
+ <!-- Copyright -->
259
+ <div class="dga-footer-copyright-container">
260
+ <p class="dga-footer-copyright">All Right Reserved For Digital Government Authority © 2024</p>
261
+ <div class="dga-footer-legal-links">
262
+ <a href="#" class="link-neutral small">Terms and Conditions</a>
263
+ <a href="#" class="link-neutral small">Privacy Policy</a>
264
+ </div>
265
+ </div>
266
+ </div>
267
+
268
+ <!-- Logos -->
269
+ <div class="dga-footer-logo">
270
+ <img src="https://placehold.co/125x42" alt="logo">
271
+ <img src="https://placehold.co/125x42" alt="logo">
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </footer>`;
276
+ }
package/demo-angular/src/app/views/header/header.html ADDED
@@ -0,0 +1 @@
1
+ <header></header>
package/demo-angular/src/app/views/header/header.scss ADDED
File without changes
package/demo-angular/src/app/views/header/header.spec.ts ADDED
@@ -0,0 +1,23 @@
1
+ import { ComponentFixture, TestBed } from '@angular/core/testing';
2
+
3
+ import { Header } from './header';
4
+
5
+ describe('Header', () => {
6
+ let component: Header;
7
+ let fixture: ComponentFixture<Header>;
8
+
9
+ beforeEach(async () => {
10
+ await TestBed.configureTestingModule({
11
+ imports: [Header]
12
+ })
13
+ .compileComponents();
14
+
15
+ fixture = TestBed.createComponent(Header);
16
+ component = fixture.componentInstance;
17
+ await fixture.whenStable();
18
+ });
19
+
20
+ it('should create', () => {
21
+ expect(component).toBeTruthy();
22
+ });
23
+ });