@eui/eds 21.3.4-snapshot-1783677674979

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 (144) hide show
  1. package/docs/classes/EdsChipModel.html +606 -0
  2. package/docs/classes/EuiChipTooltip.html +425 -0
  3. package/docs/components/EdsBadge.html +810 -0
  4. package/docs/components/EdsButton.html +793 -0
  5. package/docs/components/EdsChip.html +911 -0
  6. package/docs/components/EdsIcon.html +675 -0
  7. package/docs/components/EdsIconImage.html +604 -0
  8. package/docs/directives/EuiBaseColorVariantsDirective.html +1165 -0
  9. package/docs/directives/EuiBaseSizeVariantsDirective.html +1402 -0
  10. package/docs/fonts/ionicons.eot +0 -0
  11. package/docs/fonts/ionicons.svg +2090 -0
  12. package/docs/fonts/ionicons.ttf +0 -0
  13. package/docs/fonts/ionicons.woff +0 -0
  14. package/docs/fonts/ionicons.woff2 +0 -0
  15. package/docs/fonts/roboto-v15-latin-300.eot +0 -0
  16. package/docs/fonts/roboto-v15-latin-300.svg +314 -0
  17. package/docs/fonts/roboto-v15-latin-300.ttf +0 -0
  18. package/docs/fonts/roboto-v15-latin-300.woff +0 -0
  19. package/docs/fonts/roboto-v15-latin-300.woff2 +0 -0
  20. package/docs/fonts/roboto-v15-latin-700.eot +0 -0
  21. package/docs/fonts/roboto-v15-latin-700.svg +310 -0
  22. package/docs/fonts/roboto-v15-latin-700.ttf +0 -0
  23. package/docs/fonts/roboto-v15-latin-700.woff +0 -0
  24. package/docs/fonts/roboto-v15-latin-700.woff2 +0 -0
  25. package/docs/fonts/roboto-v15-latin-italic.eot +0 -0
  26. package/docs/fonts/roboto-v15-latin-italic.svg +323 -0
  27. package/docs/fonts/roboto-v15-latin-italic.ttf +0 -0
  28. package/docs/fonts/roboto-v15-latin-italic.woff +0 -0
  29. package/docs/fonts/roboto-v15-latin-italic.woff2 +0 -0
  30. package/docs/fonts/roboto-v15-latin-regular.eot +0 -0
  31. package/docs/fonts/roboto-v15-latin-regular.svg +308 -0
  32. package/docs/fonts/roboto-v15-latin-regular.ttf +0 -0
  33. package/docs/fonts/roboto-v15-latin-regular.woff +0 -0
  34. package/docs/fonts/roboto-v15-latin-regular.woff2 +0 -0
  35. package/docs/images/compodoc-vectorise-inverted.png +0 -0
  36. package/docs/images/compodoc-vectorise-inverted.svg +201 -0
  37. package/docs/images/compodoc-vectorise.png +0 -0
  38. package/docs/images/compodoc-vectorise.svg +201 -0
  39. package/docs/images/favicon.ico +0 -0
  40. package/docs/index.html +2264 -0
  41. package/docs/js/compodoc.js +14 -0
  42. package/docs/js/lazy-load-graphs.js +44 -0
  43. package/docs/js/libs/EventDispatcher.js +5 -0
  44. package/docs/js/libs/bootstrap-native.js +2 -0
  45. package/docs/js/libs/clipboard.min.js +7 -0
  46. package/docs/js/libs/custom-elements-es5-adapter.js +15 -0
  47. package/docs/js/libs/custom-elements.min.js +38 -0
  48. package/docs/js/libs/d3.v3.min.js +2 -0
  49. package/docs/js/libs/deep-iterator.js +2 -0
  50. package/docs/js/libs/es6-shim.min.js +12 -0
  51. package/docs/js/libs/htmlparser.js +23 -0
  52. package/docs/js/libs/innersvg.js +9 -0
  53. package/docs/js/libs/jszip.min.js +13 -0
  54. package/docs/js/libs/lit-html.js +1 -0
  55. package/docs/js/libs/prism.js +46 -0
  56. package/docs/js/libs/promise.min.js +6 -0
  57. package/docs/js/libs/svg-pan-zoom.min.js +3 -0
  58. package/docs/js/libs/tablesort.min.js +6 -0
  59. package/docs/js/libs/tablesort.number.min.js +6 -0
  60. package/docs/js/libs/vis-network.min.js +78 -0
  61. package/docs/js/libs/zepto.min.js +2 -0
  62. package/docs/js/menu-wc.js +119 -0
  63. package/docs/js/menu-wc_es5.js +40 -0
  64. package/docs/js/menu.js +269 -0
  65. package/docs/js/routes/routes_index.js +1 -0
  66. package/docs/js/routes.js +308 -0
  67. package/docs/js/search/lunr.min.js +6 -0
  68. package/docs/js/search/search-lunr.js +65 -0
  69. package/docs/js/search/search.js +273 -0
  70. package/docs/js/search/search_index.js +4 -0
  71. package/docs/js/sourceCode.js +58 -0
  72. package/docs/js/svg-pan-zoom.controls.js +53 -0
  73. package/docs/js/tabs.js +21 -0
  74. package/docs/js/tree.js +147 -0
  75. package/docs/json/EdsBadge.md +28 -0
  76. package/docs/json/EdsButton.md +31 -0
  77. package/docs/json/EdsChip.md +30 -0
  78. package/docs/json/EdsIcon.md +32 -0
  79. package/docs/json/EdsIconImage.md +13 -0
  80. package/docs/json/EuiBaseColorVariantsDirective.md +20 -0
  81. package/docs/json/EuiBaseSizeVariantsDirective.md +23 -0
  82. package/docs/json/HbsRenderService.md +6 -0
  83. package/docs/json/TemplateEditorService.md +6 -0
  84. package/docs/json/TemplatePlaygroundComponent.md +8 -0
  85. package/docs/json/ZipExportService.md +6 -0
  86. package/docs/json/documentation.json +5209 -0
  87. package/docs/miscellaneous/variables.html +415 -0
  88. package/docs/modules.html +201 -0
  89. package/docs/overview.html +236 -0
  90. package/docs/routes.html +204 -0
  91. package/docs/styles/bootstrap-card.css +219 -0
  92. package/docs/styles/bootstrap.min.css +6 -0
  93. package/docs/styles/compodoc.css +1124 -0
  94. package/docs/styles/dark.css +121 -0
  95. package/docs/styles/ionicons.min.css +11 -0
  96. package/docs/styles/laravel.css +113 -0
  97. package/docs/styles/material.css +131 -0
  98. package/docs/styles/original.css +51 -0
  99. package/docs/styles/postmark.css +238 -0
  100. package/docs/styles/prism.css +301 -0
  101. package/docs/styles/readthedocs.css +117 -0
  102. package/docs/styles/reset.css +129 -0
  103. package/docs/styles/stripe.css +106 -0
  104. package/docs/styles/style.css +7 -0
  105. package/docs/styles/tablesort.css +33 -0
  106. package/docs/styles/vagrant.css +130 -0
  107. package/docs/template-playground/default-templates.json +192 -0
  108. package/docs/template-playground/hbs-render.service.ts +212 -0
  109. package/docs/template-playground/main.ts +9 -0
  110. package/docs/template-playground/template-editor.service.ts +173 -0
  111. package/docs/template-playground/template-playground.component.ts +614 -0
  112. package/docs/template-playground/template-playground.module.ts +29 -0
  113. package/docs/template-playground/zip-export.service.ts +86 -0
  114. package/docs/template-playground-app/app.js +1389 -0
  115. package/docs/template-playground-app/index.html +462 -0
  116. package/fesm2022/eui-eds-eds-badge.mjs +175 -0
  117. package/fesm2022/eui-eds-eds-badge.mjs.map +1 -0
  118. package/fesm2022/eui-eds-eds-button.mjs +169 -0
  119. package/fesm2022/eui-eds-eds-button.mjs.map +1 -0
  120. package/fesm2022/eui-eds-eds-chip.mjs +196 -0
  121. package/fesm2022/eui-eds-eds-chip.mjs.map +1 -0
  122. package/fesm2022/eui-eds-eds-icon-image.mjs +65 -0
  123. package/fesm2022/eui-eds-eds-icon-image.mjs.map +1 -0
  124. package/fesm2022/eui-eds-eds-icon.mjs +136 -0
  125. package/fesm2022/eui-eds-eds-icon.mjs.map +1 -0
  126. package/fesm2022/eui-eds-shared.mjs +322 -0
  127. package/fesm2022/eui-eds-shared.mjs.map +1 -0
  128. package/fesm2022/eui-eds.mjs +6 -0
  129. package/fesm2022/eui-eds.mjs.map +1 -0
  130. package/package.json +72 -0
  131. package/types/eui-eds-eds-badge.d.ts +74 -0
  132. package/types/eui-eds-eds-badge.d.ts.map +1 -0
  133. package/types/eui-eds-eds-button.d.ts +75 -0
  134. package/types/eui-eds-eds-button.d.ts.map +1 -0
  135. package/types/eui-eds-eds-chip.d.ts +105 -0
  136. package/types/eui-eds-eds-chip.d.ts.map +1 -0
  137. package/types/eui-eds-eds-icon-image.d.ts +34 -0
  138. package/types/eui-eds-eds-icon-image.d.ts.map +1 -0
  139. package/types/eui-eds-eds-icon.d.ts +50 -0
  140. package/types/eui-eds-eds-icon.d.ts.map +1 -0
  141. package/types/eui-eds-shared.d.ts +86 -0
  142. package/types/eui-eds-shared.d.ts.map +1 -0
  143. package/types/eui-eds.d.ts +3 -0
  144. package/types/eui-eds.d.ts.map +1 -0
@@ -0,0 +1,462 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Compodoc Template Playground</title>
7
+ <link rel="icon" type="image/x-icon" href="../images/favicon.ico">
8
+
9
+ <!-- Compodoc CSS files -->
10
+ <link rel="stylesheet" href="../styles/bootstrap.min.css">
11
+ <link rel="stylesheet" href="../styles/compodoc.css">
12
+ <link rel="stylesheet" href="../styles/prism.css">
13
+ <link rel="stylesheet" href="../styles/dark.css">
14
+ <link rel="stylesheet" href="../styles/style.css">
15
+
16
+ <!-- Monaco Editor -->
17
+ <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs/loader.js"></script>
18
+
19
+ <!-- JSZip for creating ZIP files -->
20
+ <script src="https://unpkg.com/jszip@3.10.1/dist/jszip.min.js"
21
+ onerror="console.error('Failed to load JSZip from unpkg, trying cdnjs fallback'); this.remove(); var script = document.createElement('script'); script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js'; script.onerror = function() { console.error('Failed to load JSZip from all CDNs'); window.JSZipLoadError = true; }; document.head.appendChild(script);"></script>
22
+
23
+ <!-- Font Awesome for icons -->
24
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
25
+
26
+ <!-- Custom CSS -->
27
+ <style>
28
+ body {
29
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
30
+ background-color: #f8f9fa;
31
+ margin: 0;
32
+ padding: 0;
33
+ height: 100vh;
34
+ overflow: hidden;
35
+ }
36
+
37
+ .playground-container {
38
+ display: flex;
39
+ height: 100vh;
40
+ flex-direction: column;
41
+ }
42
+
43
+ .playground-header {
44
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
45
+ color: white;
46
+ padding: 1rem 1.5rem;
47
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
48
+ z-index: 1000;
49
+ }
50
+
51
+ .playground-title {
52
+ margin: 0;
53
+ font-size: 1.5rem;
54
+ font-weight: 600;
55
+ display: flex;
56
+ align-items: center;
57
+ gap: 0.5rem;
58
+ }
59
+
60
+ .playground-subtitle {
61
+ margin: 0.25rem 0 0 0;
62
+ font-size: 0.9rem;
63
+ opacity: 0.9;
64
+ }
65
+
66
+ .playground-content {
67
+ display: flex;
68
+ flex: 1;
69
+ overflow: hidden;
70
+ }
71
+
72
+ .variables-panel {
73
+ width: 350px;
74
+ background: white;
75
+ border-right: 1px solid #e9ecef;
76
+ display: flex;
77
+ flex-direction: column;
78
+ height: 100%;
79
+ }
80
+
81
+ .template-panel {
82
+ flex: 1;
83
+ background: white;
84
+ display: flex;
85
+ flex-direction: column;
86
+ height: 100%;
87
+ }
88
+
89
+ .panel-header {
90
+ background: #f8f9fa;
91
+ border-bottom: 1px solid #e9ecef;
92
+ padding: 1rem 1.5rem;
93
+ font-weight: 600;
94
+ display: flex;
95
+ align-items: center;
96
+ justify-content: space-between;
97
+ min-height: 60px;
98
+ }
99
+
100
+ .panel-content {
101
+ flex: 1;
102
+ overflow: auto;
103
+ padding: 1rem;
104
+ }
105
+
106
+ .template-selection {
107
+ margin-bottom: 1rem;
108
+ }
109
+
110
+ .template-select {
111
+ width: 100%;
112
+ padding: 0.5rem;
113
+ border: 1px solid #ddd;
114
+ border-radius: 0.375rem;
115
+ font-size: 0.9rem;
116
+ }
117
+
118
+ .variable-item {
119
+ background: #f8f9fa;
120
+ border: 1px solid #e9ecef;
121
+ border-radius: 0.375rem;
122
+ padding: 0.75rem;
123
+ margin-bottom: 0.5rem;
124
+ position: relative;
125
+ }
126
+
127
+ .variable-name {
128
+ font-weight: 600;
129
+ font-size: 0.9rem;
130
+ color: #495057;
131
+ margin-bottom: 0.25rem;
132
+ }
133
+
134
+ .variable-type {
135
+ font-size: 0.8rem;
136
+ color: #6c757d;
137
+ margin-bottom: 0.5rem;
138
+ }
139
+
140
+ .variable-value {
141
+ width: 100%;
142
+ padding: 0.375rem;
143
+ border: 1px solid #ddd;
144
+ border-radius: 0.25rem;
145
+ font-size: 0.85rem;
146
+ font-family: 'Courier New', monospace;
147
+ background: white;
148
+ }
149
+
150
+ .variable-actions {
151
+ position: absolute;
152
+ top: 0.5rem;
153
+ right: 0.5rem;
154
+ display: flex;
155
+ gap: 0.25rem;
156
+ }
157
+
158
+ .btn-icon {
159
+ padding: 0.25rem;
160
+ width: 24px;
161
+ height: 24px;
162
+ border: none;
163
+ border-radius: 0.25rem;
164
+ display: flex;
165
+ align-items: center;
166
+ justify-content: center;
167
+ font-size: 0.7rem;
168
+ cursor: pointer;
169
+ }
170
+
171
+ .btn-icon:hover {
172
+ transform: scale(1.1);
173
+ }
174
+
175
+ .add-variable-section {
176
+ border-top: 1px solid #e9ecef;
177
+ padding-top: 1rem;
178
+ margin-top: 1rem;
179
+ }
180
+
181
+ .add-variable-form {
182
+ display: flex;
183
+ flex-direction: column;
184
+ gap: 0.5rem;
185
+ }
186
+
187
+ .add-variable-input {
188
+ padding: 0.375rem;
189
+ border: 1px solid #ddd;
190
+ border-radius: 0.25rem;
191
+ font-size: 0.85rem;
192
+ }
193
+
194
+ .template-preview-container {
195
+ flex: 1;
196
+ display: flex;
197
+ flex-direction: column;
198
+ overflow: hidden;
199
+ }
200
+
201
+ .template-editor-container {
202
+ height: 40%;
203
+ border-bottom: 1px solid #e9ecef;
204
+ }
205
+
206
+ .template-preview {
207
+ flex: 1;
208
+ background: white;
209
+ overflow: auto;
210
+ padding: 1rem;
211
+ border: 1px solid #e9ecef;
212
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
213
+ }
214
+
215
+ .toolbar {
216
+ display: flex;
217
+ gap: 0.5rem;
218
+ align-items: center;
219
+ }
220
+
221
+ .btn-toolbar {
222
+ padding: 0.5rem 1rem;
223
+ border: 1px solid #ddd;
224
+ border-radius: 0.375rem;
225
+ background: white;
226
+ color: #495057;
227
+ font-size: 0.85rem;
228
+ cursor: pointer;
229
+ display: flex;
230
+ align-items: center;
231
+ gap: 0.5rem;
232
+ transition: all 0.2s;
233
+ }
234
+
235
+ .btn-toolbar:hover {
236
+ background: #f8f9fa;
237
+ border-color: #007bff;
238
+ color: #007bff;
239
+ }
240
+
241
+ .btn-primary {
242
+ background: #007bff;
243
+ color: white;
244
+ border-color: #007bff;
245
+ }
246
+
247
+ .btn-primary:hover {
248
+ background: #0056b3;
249
+ border-color: #0056b3;
250
+ color: white;
251
+ }
252
+
253
+ .error-message {
254
+ background: #f8d7da;
255
+ color: #721c24;
256
+ padding: 0.75rem;
257
+ border-radius: 0.375rem;
258
+ margin-bottom: 1rem;
259
+ border: 1px solid #f5c6cb;
260
+ }
261
+
262
+ .success-message {
263
+ background: #d4edda;
264
+ color: #155724;
265
+ padding: 0.75rem;
266
+ border-radius: 0.375rem;
267
+ margin-bottom: 1rem;
268
+ border: 1px solid #c3e6cb;
269
+ }
270
+
271
+ .resizer {
272
+ width: 4px;
273
+ background: #e9ecef;
274
+ cursor: col-resize;
275
+ transition: background-color 0.2s;
276
+ }
277
+
278
+ .resizer:hover {
279
+ background: #007bff;
280
+ }
281
+
282
+ .template-metadata {
283
+ font-size: 0.8rem;
284
+ color: #6c757d;
285
+ margin-bottom: 1rem;
286
+ padding: 0.5rem;
287
+ background: #f8f9fa;
288
+ border-radius: 0.375rem;
289
+ }
290
+
291
+ .loading {
292
+ display: flex;
293
+ align-items: center;
294
+ justify-content: center;
295
+ flex: 1;
296
+ color: #6c757d;
297
+ }
298
+
299
+ .spinner {
300
+ width: 20px;
301
+ height: 20px;
302
+ border: 2px solid #f3f3f3;
303
+ border-top: 2px solid #007bff;
304
+ border-radius: 50%;
305
+ animation: spin 1s linear infinite;
306
+ margin-right: 0.5rem;
307
+ }
308
+
309
+ @keyframes spin {
310
+ 0% { transform: rotate(0deg); }
311
+ 100% { transform: rotate(360deg); }
312
+ }
313
+
314
+ /* Responsive design */
315
+ @media (max-width: 768px) {
316
+ .playground-content {
317
+ flex-direction: column;
318
+ }
319
+
320
+ .variables-panel {
321
+ width: 100%;
322
+ height: 40%;
323
+ }
324
+
325
+ .template-panel {
326
+ height: 60%;
327
+ }
328
+ }
329
+ </style>
330
+ </head>
331
+ <body>
332
+ <div class="playground-container">
333
+ <!-- Header -->
334
+ <div class="playground-header">
335
+ <h1 class="playground-title">
336
+ <i class="fas fa-code"></i>
337
+ Compodoc Template Playground
338
+ </h1>
339
+ <p class="playground-subtitle">
340
+ Customize and preview Handlebars templates with live data
341
+ </p>
342
+ </div>
343
+
344
+ <!-- Main Content -->
345
+ <div class="playground-content">
346
+ <!-- Variables/Properties Panel -->
347
+ <div class="variables-panel">
348
+ <div class="panel-header">
349
+ <span><i class="fas fa-sliders-h"></i> Configuration options</span>
350
+ <div class="toolbar">
351
+ <button class="btn-toolbar" id="resetVariables" title="Reset to default values">
352
+ <i class="fas fa-undo"></i>
353
+ </button>
354
+ <button class="btn-toolbar" id="exportData" title="Export current data">
355
+ <i class="fas fa-download"></i>
356
+ </button>
357
+ </div>
358
+ </div>
359
+ <div class="panel-content">
360
+ <!-- Template Selection -->
361
+ <div class="template-selection">
362
+ <label for="templateSelect" class="form-label">Template Type:</label>
363
+ <select class="template-select" id="templateSelect">
364
+ <option value="">Select a template...</option>
365
+ <option value="component">Component</option>
366
+ <option value="module">Module</option>
367
+ <option value="interface">Interface</option>
368
+ <option value="class">Class</option>
369
+ <option value="injectable">Injectable/Service</option>
370
+ <option value="directive">Directive</option>
371
+ <option value="pipe">Pipe</option>
372
+ <option value="guard">Guard</option>
373
+ <option value="interceptor">Interceptor</option>
374
+ <option value="entity">Entity</option>
375
+ <option value="controller">Controller</option>
376
+ <option value="overview">Overview</option>
377
+ <option value="miscellaneous">Miscellaneous</option>
378
+ </select>
379
+ </div>
380
+
381
+ <!-- Template Metadata -->
382
+ <div class="template-metadata" id="templateMetadata" style="display: none;">
383
+ <strong>Template:</strong> <span id="templateName">-</span><br>
384
+ <strong>File:</strong> <span id="templateFile">-</span><br>
385
+ <strong>Description:</strong> <span id="templateDescription">-</span>
386
+ </div>
387
+
388
+ <!-- Variables List -->
389
+ <div id="variablesList">
390
+ <div class="loading">
391
+ <div class="spinner"></div>
392
+ Select a template to see variables
393
+ </div>
394
+ </div>
395
+
396
+ <!-- Add Variable Section -->
397
+
398
+ </div>
399
+ </div>
400
+
401
+ <!-- Resizer -->
402
+ <div class="resizer" id="resizer"></div>
403
+
404
+ <!-- Template Panel -->
405
+ <div class="template-panel">
406
+ <div class="panel-header">
407
+ <span><i class="fas fa-eye"></i> Template Editor</span>
408
+ <div class="toolbar">
409
+ <button class="btn-toolbar" id="copyTemplate" title="Copy template content">
410
+ <i class="fas fa-copy"></i>
411
+ </button>
412
+ <button class="btn-toolbar" id="downloadTemplate" title="Download as ZIP">
413
+ <i class="fas fa-download"></i> Export
414
+ </button>
415
+ <button class="btn-toolbar btn-primary" id="refreshPreview" title="Refresh preview">
416
+ <i class="fas fa-sync"></i>
417
+ </button>
418
+ </div>
419
+ </div>
420
+
421
+ <div class="template-preview-container">
422
+ <!-- Template Editor -->
423
+ <div class="template-editor-container">
424
+ <div id="templateEditor" style="height: 100%;"></div>
425
+ </div>
426
+
427
+ <!-- Template Preview -->
428
+ <div class="panel-header" style="border-top: 1px solid #e9ecef;">
429
+ <span><i class="fas fa-browser"></i> Live Preview</span>
430
+ <div class="toolbar">
431
+ <span class="btn-toolbar" id="previewStatus">Ready</span>
432
+ </div>
433
+ </div>
434
+ <div class="template-preview-iframe-container" style="flex: 1; overflow: hidden;">
435
+ <iframe id="templatePreviewFrame"
436
+ name="templatePreviewFrame"
437
+ style="width: 100%; height: 100%; border: none; background: white;"
438
+ src="about:blank">
439
+ </iframe>
440
+ <div class="template-preview-loading" id="templatePreviewLoading" style="display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
441
+ <div class="loading">
442
+ <div class="spinner"></div>
443
+ Rendering template...
444
+ </div>
445
+ </div>
446
+ </div>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </div>
451
+
452
+ <!-- Compodoc JavaScript files -->
453
+ <script src="../js/libs/bootstrap-native.js"></script>
454
+ <script src="../js/libs/prism.js"></script>
455
+ <script src="../js/compodoc.js"></script>
456
+ <script src="../js/tabs.js"></script>
457
+ <script src="../js/sourceCode.js"></script>
458
+
459
+ <!-- Template Playground App -->
460
+ <script src="app.js"></script>
461
+ </body>
462
+ </html>
@@ -0,0 +1,175 @@
1
+ import * as i0 from '@angular/core';
2
+ import { inject, ChangeDetectorRef, signal, booleanAttribute, ViewChild, Input, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
3
+ import * as i2 from '@angular/cdk/observers';
4
+ import { ObserversModule } from '@angular/cdk/observers';
5
+ import * as i1 from '@eui/eds/shared';
6
+ import { EuiBaseSizeVariantsDirective, EuiBaseColorVariantsDirective } from '@eui/eds/shared';
7
+
8
+ class EdsBadge {
9
+ constructor() {
10
+ /** @description Data attribute for e2e testing */
11
+ this.e2eAttr = 'eds-badge';
12
+ /** @description ARIA role for accessibility */
13
+ this.role = 'status';
14
+ /** @description ARIA label for accessibility */
15
+ this.ariaLabel = 'badge';
16
+ /**
17
+ * Maximum number of characters to display before truncating.
18
+ * When content exceeds this limit, it will be replaced with charReplacement value.
19
+ * Useful for displaying large numbers in a compact format (e.g., "99+" for values over 99).
20
+ */
21
+ this.maxCharCount = 0;
22
+ /**
23
+ * String to display when content is truncated due to maxCharCount.
24
+ * @default '99+'
25
+ */
26
+ this.charReplacement = '';
27
+ /**
28
+ * Whether the badge contains only an icon (displays as a small dot indicator).
29
+ * When true, no text content is shown, creating a minimal status indicator.
30
+ * @default false
31
+ */
32
+ this.euiBadgeIcon = false;
33
+ /**
34
+ * Whether to display the badge with dotted styling variant.
35
+ * Applies alternative visual treatment to the badge.
36
+ * @default false
37
+ */
38
+ this.euiDottedBadge = false;
39
+ this.euiOutline = false;
40
+ this.sizeVariantsBase = inject(EuiBaseSizeVariantsDirective);
41
+ this.colorVariantsBase = inject(EuiBaseColorVariantsDirective);
42
+ this.hasContentUpdated = false;
43
+ // protected baseStatesDirective = inject(BaseStatesDirective);
44
+ this.cdRef = inject(ChangeDetectorRef);
45
+ this.isEmpty = signal(false, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
46
+ }
47
+ /**
48
+ * @description
49
+ * Computes and returns the CSS classes for the badge based on its current state
50
+ *
51
+ * @returns {string} Space-separated string of CSS class names
52
+ */
53
+ get cssClasses() {
54
+ return [
55
+ 'eds-badge',
56
+ this.sizeVariantsBase.getCssClasses('eds-badge'),
57
+ this.colorVariantsBase.getCssClasses('eds-badge'),
58
+ this.isEmpty() || this.euiDottedBadge ? 'eds-badge--empty' : '',
59
+ this.euiBadgeIcon ? 'eds-badge--icon-only' : '',
60
+ this.euiOutline ? 'eds-badge--outline' : '',
61
+ ].join(' ').trim();
62
+ }
63
+ ngOnInit() {
64
+ if (!this.sizeVariantsBase.euiSizeVariant) {
65
+ this.sizeVariantsBase.euiSizeM = true;
66
+ }
67
+ if (!this.colorVariantsBase.euiColorVariant) {
68
+ this.colorVariantsBase.euiNeutral = true;
69
+ }
70
+ }
71
+ ngAfterViewInit() {
72
+ if (this.content) {
73
+ this.isEmpty.set(this.content.nativeElement.childNodes.length === 0);
74
+ this.cdRef.detectChanges();
75
+ if (!this.isEmpty()) {
76
+ this._checkContent();
77
+ this.cdRef.detectChanges();
78
+ }
79
+ }
80
+ }
81
+ /**
82
+ * @description
83
+ * Handles content changes and triggers content checking
84
+ */
85
+ onContentChanged() {
86
+ this._checkContent();
87
+ }
88
+ /**
89
+ * @description
90
+ * Checks if content exceeds maxCharCount and updates content if necessary
91
+ * @private
92
+ */
93
+ _checkContent() {
94
+ if (this.maxCharCount !== 0) {
95
+ const contentText = this.content.nativeElement.outerText;
96
+ if (contentText && contentText.length > this.maxCharCount) {
97
+ this.hasContentUpdated = true;
98
+ this.updatedContent = this.charReplacement || '99+';
99
+ this.cdRef.markForCheck();
100
+ }
101
+ }
102
+ }
103
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EdsBadge, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
104
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: EdsBadge, isStandalone: true, selector: "div[edsBadge], span[edsBadge], eds-badge", inputs: { e2eAttr: "e2eAttr", ariaLabel: ["aria-label", "ariaLabel"], maxCharCount: "maxCharCount", charReplacement: "charReplacement", euiBadgeIcon: ["euiBadgeIcon", "euiBadgeIcon", booleanAttribute], euiDottedBadge: ["euiDottedBadge", "euiDottedBadge", booleanAttribute], euiOutline: ["euiOutline", "euiOutline", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr", "attr.role": "this.role", "attr.aria-label": "this.ariaLabel" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentRef"], descendants: true }], hostDirectives: [{ directive: i1.EuiBaseSizeVariantsDirective, inputs: ["euiSizeXS", "euiSizeXS", "euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeL", "euiSizeL", "euiSizeVariant", "euiSizeVariant"] }, { directive: i1.EuiBaseColorVariantsDirective, inputs: ["euiNeutral", "euiNeutral", "euiInfo", "euiInfo", "euiSuccess", "euiSuccess", "euiWarning", "euiWarning", "euiCritical", "euiCritical", "euiColorVariant", "euiColorVariant"] }], ngImport: i0, template: "@if (hasContentUpdated) {\r\n <span class=\"eds-badge-wrapper\">\r\n {{ updatedContent }}\r\n </span>\r\n} @else {\r\n <span class=\"eds-badge-wrapper\" #contentRef (cdkObserveContent)=\"onContentChanged()\">\r\n <ng-content></ng-content>\r\n </span>\r\n}\r\n", styles: [".eui-21 :host.eds-badge{--_border-width: var(--eds-bw-none)}.eui-21 :host.eds-badge.eds-badge--neutral{--_surface: var(--eds-c-surface-neutral);--_on-surface: var(--eds-c-on-surface-neutral)}.eui-21 :host.eds-badge.eds-badge--info{--_surface: var(--eds-c-surface-info);--_on-surface: var(--eds-c-on-surface-info)}.eui-21 :host.eds-badge.eds-badge--success{--_surface: var(--eds-c-surface-success);--_on-surface: var(--eds-c-on-surface-success)}.eui-21 :host.eds-badge.eds-badge--warning{--_surface: var(--eds-c-surface-warning);--_on-surface: var(--eds-c-on-surface-warning)}.eui-21 :host.eds-badge.eds-badge--critical{--_surface: var(--eds-c-surface-critical);--_on-surface: var(--eds-c-on-surface-critical)}.eui-21 :host.eds-badge.eds-badge--outline.eds-badge--neutral{--_surface: var(--eds-c-surface-neutral-subtle);--_on-surface: var(--eds-c-on-surface-neutral-subtle)}.eui-21 :host.eds-badge.eds-badge--outline.eds-badge--info{--_surface: var(--eds-c-surface-info-subtle);--_on-surface: var(--eds-c-on-surface-info-subtle)}.eui-21 :host.eds-badge.eds-badge--outline.eds-badge--success{--_surface: var(--eds-c-surface-success-subtle);--_on-surface: var(--eds-c-on-surface-success-subtle)}.eui-21 :host.eds-badge.eds-badge--outline.eds-badge--warning{--_surface: var(--eds-c-surface-warning-subtle);--_on-surface: var(--eds-c-on-surface-warning-subtle)}.eui-21 :host.eds-badge.eds-badge--outline.eds-badge--critical{--_surface: var(--eds-c-surface-critical-subtle);--_on-surface: var(--eds-c-on-surface-critical-subtle)}.eui-21 :host.eds-badge.eds-badge--size-xs.eds-badge--empty{--_min-height: var(--eds-si-xs);--_min-width: var(--eds-si-xs);--_padding: none}.eui-21 :host.eds-badge.eds-badge--size-xs:not(.eds-badge--empty):not(.eds-badge--icon-only){--_min-height: var(--eds-si-s);--_min-width: var(--eds-si-s);--_font: var(--eds-f-microcopy-2xs);--_padding: var(--eds-sp-5xs) var(--eds-sp-4xs)}.eui-21 :host.eds-badge.eds-badge--size-s.eds-badge--empty{--_min-height: var(--eds-si-s);--_min-width: var(--eds-si-s);--_padding: none}.eui-21 :host.eds-badge.eds-badge--size-s:not(.eds-badge--empty):not(.eds-badge--icon-only){--_font: var(--eds-f-microcopy-xs);--_padding: var(--eds-sp-none) var(--eds-sp-3xs) var(--eds-sp-none) var(--eds-sp-3xs)}.eui-21 :host.eds-badge.eds-badge--size-m.eds-badge--empty{--_min-height: var(--eds-si-m);--_min-width: var(--eds-si-m);--_padding: none}.eui-21 :host.eds-badge.eds-badge--size-m:not(.eds-badge--empty):not(.eds-badge--icon-only){--_min-height: var(--eds-si-l);--_min-width: var(--eds-si-l);--_font: var(--eds-f-microcopy-xs);--_padding: var(--eds-sp-4xs) var(--eds-sp-3xs) var(--eds-sp-4xs) var(--eds-sp-3xs)}.eui-21 :host.eds-badge.eds-badge--size-l.eds-badge--empty{--_min-height: var(--eds-si-l);--_min-width: var(--eds-si-l);--_padding: none}.eui-21 :host.eds-badge.eds-badge--size-l:not(.eds-badge--empty):not(.eds-badge--icon-only){--_min-height: var(--eds-si-xl);--_min-width: var(--eds-si-xl);--_font: var(--eds-f-paragraph-s-semi-bold);--_padding: var(--eds-sp-4xs) var(--eds-sp-2xs) var(--eds-sp-4xs) var(--eds-sp-2xs)}.eui-21 :host.eds-badge.eds-badge--empty{--_border-width: var(--eds-bw-xs)}.eui-21 :host.eds-badge.eds-badge--icon-only{--_padding: none}.eui-21 :host.eds-badge.eds-badge--icon-only.eds-badge--size-xs{--_icon-size: var(--eds-is-2xs)}.eui-21 :host.eds-badge.eds-badge--icon-only.eds-badge--size-s{--_icon-size: var(--eds-is-xs)}.eui-21 :host.eds-badge.eds-badge--icon-only.eds-badge--size-m{--_icon-size: var(--eds-is-s)}.eui-21 :host.eds-badge.eds-badge--icon-only.eds-badge--size-l{--_icon-size: var(--eds-is-m)}.eui-21 :host.eds-badge{display:inline-flex;border-radius:var(--eds-br-full)}.eui-21 :host.eds-badge .eds-badge-wrapper{display:inline-flex;border-radius:var(--eds-br-full);border:var(--_border-width) solid var(--eds-c-border-inverted);align-items:center;min-height:var(--_min-height);min-width:var(--_min-width);padding:var(--_padding);justify-content:center;font:var(--_font);background-color:var(--_surface);color:var(--_on-surface);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-21 .eds-icon :host.eds-badge{position:absolute}.eui-21 .eds-icon :host.eds-badge,.eui-21 .eds-icon :host.eds-badge--size-m{left:60%;top:-20%}.eui-21 .eds-icon :host.eds-badge--empty{left:60%;top:-10%}.eui-21 .eds-icon :host.eds-badge--size-xs.eds-badge--empty{left:70%;top:-10%}\n"], dependencies: [{ kind: "ngmodule", type: ObserversModule }, { kind: "directive", type: i2.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
105
+ }
106
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EdsBadge, decorators: [{
107
+ type: Component,
108
+ args: [{ selector: 'div[edsBadge], span[edsBadge], eds-badge', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ObserversModule], hostDirectives: [
109
+ {
110
+ directive: EuiBaseSizeVariantsDirective,
111
+ inputs: [
112
+ 'euiSizeXS',
113
+ 'euiSizeS',
114
+ 'euiSizeM',
115
+ 'euiSizeL',
116
+ 'euiSizeVariant',
117
+ ],
118
+ },
119
+ {
120
+ directive: EuiBaseColorVariantsDirective,
121
+ inputs: [
122
+ 'euiNeutral',
123
+ 'euiInfo',
124
+ 'euiSuccess',
125
+ 'euiWarning',
126
+ 'euiCritical',
127
+ 'euiColorVariant',
128
+ ],
129
+ },
130
+ ], template: "@if (hasContentUpdated) {\r\n <span class=\"eds-badge-wrapper\">\r\n {{ updatedContent }}\r\n </span>\r\n} @else {\r\n <span class=\"eds-badge-wrapper\" #contentRef (cdkObserveContent)=\"onContentChanged()\">\r\n <ng-content></ng-content>\r\n </span>\r\n}\r\n", styles: [".eui-21 :host.eds-badge{--_border-width: var(--eds-bw-none)}.eui-21 :host.eds-badge.eds-badge--neutral{--_surface: var(--eds-c-surface-neutral);--_on-surface: var(--eds-c-on-surface-neutral)}.eui-21 :host.eds-badge.eds-badge--info{--_surface: var(--eds-c-surface-info);--_on-surface: var(--eds-c-on-surface-info)}.eui-21 :host.eds-badge.eds-badge--success{--_surface: var(--eds-c-surface-success);--_on-surface: var(--eds-c-on-surface-success)}.eui-21 :host.eds-badge.eds-badge--warning{--_surface: var(--eds-c-surface-warning);--_on-surface: var(--eds-c-on-surface-warning)}.eui-21 :host.eds-badge.eds-badge--critical{--_surface: var(--eds-c-surface-critical);--_on-surface: var(--eds-c-on-surface-critical)}.eui-21 :host.eds-badge.eds-badge--outline.eds-badge--neutral{--_surface: var(--eds-c-surface-neutral-subtle);--_on-surface: var(--eds-c-on-surface-neutral-subtle)}.eui-21 :host.eds-badge.eds-badge--outline.eds-badge--info{--_surface: var(--eds-c-surface-info-subtle);--_on-surface: var(--eds-c-on-surface-info-subtle)}.eui-21 :host.eds-badge.eds-badge--outline.eds-badge--success{--_surface: var(--eds-c-surface-success-subtle);--_on-surface: var(--eds-c-on-surface-success-subtle)}.eui-21 :host.eds-badge.eds-badge--outline.eds-badge--warning{--_surface: var(--eds-c-surface-warning-subtle);--_on-surface: var(--eds-c-on-surface-warning-subtle)}.eui-21 :host.eds-badge.eds-badge--outline.eds-badge--critical{--_surface: var(--eds-c-surface-critical-subtle);--_on-surface: var(--eds-c-on-surface-critical-subtle)}.eui-21 :host.eds-badge.eds-badge--size-xs.eds-badge--empty{--_min-height: var(--eds-si-xs);--_min-width: var(--eds-si-xs);--_padding: none}.eui-21 :host.eds-badge.eds-badge--size-xs:not(.eds-badge--empty):not(.eds-badge--icon-only){--_min-height: var(--eds-si-s);--_min-width: var(--eds-si-s);--_font: var(--eds-f-microcopy-2xs);--_padding: var(--eds-sp-5xs) var(--eds-sp-4xs)}.eui-21 :host.eds-badge.eds-badge--size-s.eds-badge--empty{--_min-height: var(--eds-si-s);--_min-width: var(--eds-si-s);--_padding: none}.eui-21 :host.eds-badge.eds-badge--size-s:not(.eds-badge--empty):not(.eds-badge--icon-only){--_font: var(--eds-f-microcopy-xs);--_padding: var(--eds-sp-none) var(--eds-sp-3xs) var(--eds-sp-none) var(--eds-sp-3xs)}.eui-21 :host.eds-badge.eds-badge--size-m.eds-badge--empty{--_min-height: var(--eds-si-m);--_min-width: var(--eds-si-m);--_padding: none}.eui-21 :host.eds-badge.eds-badge--size-m:not(.eds-badge--empty):not(.eds-badge--icon-only){--_min-height: var(--eds-si-l);--_min-width: var(--eds-si-l);--_font: var(--eds-f-microcopy-xs);--_padding: var(--eds-sp-4xs) var(--eds-sp-3xs) var(--eds-sp-4xs) var(--eds-sp-3xs)}.eui-21 :host.eds-badge.eds-badge--size-l.eds-badge--empty{--_min-height: var(--eds-si-l);--_min-width: var(--eds-si-l);--_padding: none}.eui-21 :host.eds-badge.eds-badge--size-l:not(.eds-badge--empty):not(.eds-badge--icon-only){--_min-height: var(--eds-si-xl);--_min-width: var(--eds-si-xl);--_font: var(--eds-f-paragraph-s-semi-bold);--_padding: var(--eds-sp-4xs) var(--eds-sp-2xs) var(--eds-sp-4xs) var(--eds-sp-2xs)}.eui-21 :host.eds-badge.eds-badge--empty{--_border-width: var(--eds-bw-xs)}.eui-21 :host.eds-badge.eds-badge--icon-only{--_padding: none}.eui-21 :host.eds-badge.eds-badge--icon-only.eds-badge--size-xs{--_icon-size: var(--eds-is-2xs)}.eui-21 :host.eds-badge.eds-badge--icon-only.eds-badge--size-s{--_icon-size: var(--eds-is-xs)}.eui-21 :host.eds-badge.eds-badge--icon-only.eds-badge--size-m{--_icon-size: var(--eds-is-s)}.eui-21 :host.eds-badge.eds-badge--icon-only.eds-badge--size-l{--_icon-size: var(--eds-is-m)}.eui-21 :host.eds-badge{display:inline-flex;border-radius:var(--eds-br-full)}.eui-21 :host.eds-badge .eds-badge-wrapper{display:inline-flex;border-radius:var(--eds-br-full);border:var(--_border-width) solid var(--eds-c-border-inverted);align-items:center;min-height:var(--_min-height);min-width:var(--_min-width);padding:var(--_padding);justify-content:center;font:var(--_font);background-color:var(--_surface);color:var(--_on-surface);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-21 .eds-icon :host.eds-badge{position:absolute}.eui-21 .eds-icon :host.eds-badge,.eui-21 .eds-icon :host.eds-badge--size-m{left:60%;top:-20%}.eui-21 .eds-icon :host.eds-badge--empty{left:60%;top:-10%}.eui-21 .eds-icon :host.eds-badge--size-xs.eds-badge--empty{left:70%;top:-10%}\n"] }]
131
+ }], propDecorators: { cssClasses: [{
132
+ type: HostBinding,
133
+ args: ['class']
134
+ }], e2eAttr: [{
135
+ type: HostBinding,
136
+ args: ['attr.data-e2e']
137
+ }, {
138
+ type: Input
139
+ }], role: [{
140
+ type: HostBinding,
141
+ args: ['attr.role']
142
+ }], ariaLabel: [{
143
+ type: HostBinding,
144
+ args: ['attr.aria-label']
145
+ }, {
146
+ type: Input,
147
+ args: ['aria-label']
148
+ }], maxCharCount: [{
149
+ type: Input
150
+ }], charReplacement: [{
151
+ type: Input
152
+ }], euiBadgeIcon: [{
153
+ type: Input,
154
+ args: [{ transform: booleanAttribute }]
155
+ }], euiDottedBadge: [{
156
+ type: Input,
157
+ args: [{ transform: booleanAttribute }]
158
+ }], euiOutline: [{
159
+ type: Input,
160
+ args: [{ transform: booleanAttribute }]
161
+ }], content: [{
162
+ type: ViewChild,
163
+ args: ['contentRef', { static: false }]
164
+ }] } });
165
+
166
+ const EDS_BADGE = [
167
+ EdsBadge,
168
+ ];
169
+
170
+ /**
171
+ * Generated bundle index. Do not edit.
172
+ */
173
+
174
+ export { EDS_BADGE, EdsBadge };
175
+ //# sourceMappingURL=eui-eds-eds-badge.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"eui-eds-eds-badge.mjs","sources":["../../eds-badge/eds-badge.ts","../../eds-badge/eds-badge.html","../../eds-badge/index.ts","../../eds-badge/eui-eds-eds-badge.ts"],"sourcesContent":["import {\r\n Component,\r\n HostBinding,\r\n ChangeDetectionStrategy,\r\n Input,\r\n ViewChild,\r\n ElementRef,\r\n AfterViewInit,\r\n ChangeDetectorRef,\r\n booleanAttribute,\r\n inject,\r\n signal,\r\n OnInit,\r\n} from '@angular/core';\r\nimport { ObserversModule } from '@angular/cdk/observers';\r\nimport { EuiBaseColorVariantsDirective, EuiBaseSizeVariantsDirective } from '@eui/eds/shared';\r\n\r\n@Component({\r\n selector: 'div[edsBadge], span[edsBadge], eds-badge',\r\n templateUrl: './eds-badge.html',\r\n styleUrl: './eds-badge.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n imports: [ObserversModule],\r\n hostDirectives: [\r\n {\r\n directive: EuiBaseSizeVariantsDirective,\r\n inputs: [\r\n 'euiSizeXS',\r\n 'euiSizeS',\r\n 'euiSizeM',\r\n 'euiSizeL',\r\n 'euiSizeVariant',\r\n ],\r\n },\r\n {\r\n directive: EuiBaseColorVariantsDirective,\r\n inputs: [\r\n 'euiNeutral',\r\n 'euiInfo',\r\n 'euiSuccess',\r\n 'euiWarning',\r\n 'euiCritical',\r\n 'euiColorVariant',\r\n ],\r\n }, \r\n ], \r\n})\r\nexport class EdsBadge implements OnInit, AfterViewInit {\r\n /**\r\n * @description\r\n * Computes and returns the CSS classes for the badge based on its current state\r\n *\r\n * @returns {string} Space-separated string of CSS class names\r\n */\r\n @HostBinding('class')\r\n public get cssClasses(): string {\r\n return [\r\n 'eds-badge',\r\n this.sizeVariantsBase.getCssClasses('eds-badge'),\r\n this.colorVariantsBase.getCssClasses('eds-badge'),\r\n this.isEmpty() || this.euiDottedBadge ? 'eds-badge--empty' : '',\r\n this.euiBadgeIcon ? 'eds-badge--icon-only' : '',\r\n this.euiOutline ? 'eds-badge--outline' : '',\r\n ].join(' ').trim();\r\n }\r\n\r\n /** @description Data attribute for e2e testing */\r\n @HostBinding('attr.data-e2e') @Input() e2eAttr = 'eds-badge';\r\n\r\n /** @description ARIA role for accessibility */\r\n @HostBinding('attr.role') role = 'status';\r\n\r\n /** @description ARIA label for accessibility */\r\n @HostBinding('attr.aria-label') @Input('aria-label') ariaLabel: string | null = 'badge';\r\n\r\n /**\r\n * Maximum number of characters to display before truncating.\r\n * When content exceeds this limit, it will be replaced with charReplacement value.\r\n * Useful for displaying large numbers in a compact format (e.g., \"99+\" for values over 99).\r\n */\r\n @Input() maxCharCount = 0;\r\n\r\n /**\r\n * String to display when content is truncated due to maxCharCount.\r\n * @default '99+'\r\n */\r\n @Input() charReplacement = '';\r\n\r\n /**\r\n * Whether the badge contains only an icon (displays as a small dot indicator).\r\n * When true, no text content is shown, creating a minimal status indicator.\r\n * @default false\r\n */\r\n @Input({ transform: booleanAttribute }) euiBadgeIcon = false;\r\n\r\n /**\r\n * Whether to display the badge with dotted styling variant.\r\n * Applies alternative visual treatment to the badge.\r\n * @default false\r\n */\r\n @Input({ transform: booleanAttribute }) euiDottedBadge = false;\r\n\r\n @Input({ transform: booleanAttribute }) euiOutline = false;\r\n \r\n @ViewChild('contentRef', { static: false }) content!: ElementRef;\r\n\r\n protected sizeVariantsBase: EuiBaseSizeVariantsDirective = inject(EuiBaseSizeVariantsDirective);\r\n protected colorVariantsBase: EuiBaseColorVariantsDirective = inject(EuiBaseColorVariantsDirective);\r\n\r\n protected hasContentUpdated = false;\r\n protected updatedContent!: string;\r\n // protected baseStatesDirective = inject(BaseStatesDirective);\r\n private cdRef = inject(ChangeDetectorRef);\r\n private isEmpty = signal(false);\r\n\r\n ngOnInit(): void {\r\n if (!this.sizeVariantsBase.euiSizeVariant) {\r\n this.sizeVariantsBase.euiSizeM = true;\r\n }\r\n if (!this.colorVariantsBase.euiColorVariant) {\r\n this.colorVariantsBase.euiNeutral = true;\r\n }\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n if (this.content) {\r\n this.isEmpty.set(this.content.nativeElement.childNodes.length === 0);\r\n this.cdRef.detectChanges();\r\n if (!this.isEmpty()) {\r\n this._checkContent();\r\n this.cdRef.detectChanges(); \r\n }\r\n }\r\n }\r\n\r\n /**\r\n * @description\r\n * Handles content changes and triggers content checking\r\n */\r\n onContentChanged(): void {\r\n this._checkContent();\r\n }\r\n\r\n /**\r\n * @description\r\n * Checks if content exceeds maxCharCount and updates content if necessary\r\n * @private\r\n */\r\n private _checkContent(): void {\r\n if (this.maxCharCount !== 0) {\r\n const contentText = this.content.nativeElement.outerText;\r\n if (contentText && contentText.length > this.maxCharCount) {\r\n this.hasContentUpdated = true;\r\n this.updatedContent = this.charReplacement || '99+';\r\n this.cdRef.markForCheck();\r\n }\r\n }\r\n }\r\n}\r\n","@if (hasContentUpdated) {\r\n <span class=\"eds-badge-wrapper\">\r\n {{ updatedContent }}\r\n </span>\r\n} @else {\r\n <span class=\"eds-badge-wrapper\" #contentRef (cdkObserveContent)=\"onContentChanged()\">\r\n <ng-content></ng-content>\r\n </span>\r\n}\r\n","import { EdsBadge } from './eds-badge';\r\n\r\nexport * from './eds-badge';\r\n\r\nexport const EDS_BADGE = [\r\n EdsBadge,\r\n] as const;\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}