ng-hub-ui-breadcrumbs 1.0.3 → 21.1.0

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 (14) hide show
  1. package/README.md +184 -442
  2. package/fesm2022/ng-hub-ui-breadcrumbs.mjs +30 -42
  3. package/fesm2022/ng-hub-ui-breadcrumbs.mjs.map +1 -1
  4. package/package.json +3 -3
  5. package/types/ng-hub-ui-breadcrumbs.d.ts +42 -0
  6. package/index.d.ts +0 -5
  7. package/lib/components/hub-breadcrumbs/hub-breadcrumbs.component.d.ts +0 -9
  8. package/lib/directives/hub-breadcrumb-item.directive.d.ts +0 -7
  9. package/lib/hub-breadcrumbs.module.d.ts +0 -8
  10. package/lib/services/hub-breadcrumbs.service.d.ts +0 -12
  11. package/lib/types/breadcrumb-item.d.ts +0 -5
  12. package/lib/types/breadcrumb-template-context.d.ts +0 -5
  13. package/ng-hub-ui-breadcrumbs-1.0.3.tgz +0 -0
  14. package/public-api.d.ts +0 -4
package/README.md CHANGED
@@ -1,463 +1,263 @@
1
- # Hub UI Breadcrumb
1
+ # ng-hub-ui-breadcrumbs
2
2
 
3
- A flexible and reusable breadcrumb component for Angular applications that automatically generates breadcrumbs based on your routing configuration.
3
+ ![NPM Version](https://img.shields.io/npm/v/ng-hub-ui-breadcrumbs)
4
+ ![License](https://img.shields.io/npm/l/ng-hub-ui-breadcrumbs)
4
5
 
5
- ## Installation
6
+ A flexible and reusable breadcrumb component for Angular applications that automatically generates breadcrumbs entirely based on your routing configuration.
6
7
 
7
- ```bash
8
- npm install ng-hub-ui-breadcrumbs
9
- ```
8
+ ## 🧩 Library Family `ng-hub-ui`
10
9
 
11
- ## Features
10
+ This library is part of the **ng-hub-ui** ecosystem:
12
11
 
13
- - Automatic breadcrumb generation from route configuration
14
- - Customizable through CSS variables
15
- - RTL support
16
- - Templating support for custom breadcrumb items
17
- - Bootstrap-compatible styling
12
+ - [**ng-hub-ui-accordion**](https://www.npmjs.com/package/ng-hub-ui-accordion)
13
+ - [**ng-hub-ui-avatar**](https://www.npmjs.com/package/ng-hub-ui-avatar)
14
+ - [**ng-hub-ui-board**](https://www.npmjs.com/package/ng-hub-ui-board)
15
+ - [**ng-hub-ui-breadcrumbs**](https://www.npmjs.com/package/ng-hub-ui-breadcrumbs)
16
+ - [**ng-hub-ui-calendar**](https://www.npmjs.com/package/ng-hub-ui-calendar)
17
+ - [**ng-hub-ui-modal**](https://www.npmjs.com/package/ng-hub-ui-modal)
18
+ - [**ng-hub-ui-paginable**](https://www.npmjs.com/package/ng-hub-ui-paginable)
19
+ - [**ng-hub-ui-portal**](https://www.npmjs.com/package/ng-hub-ui-portal)
20
+ - [**ng-hub-ui-stepper**](https://www.npmjs.com/package/ng-hub-ui-stepper)
21
+ - [**ng-hub-ui-utils**](https://www.npmjs.com/package/ng-hub-ui-utils)
18
22
 
19
- ## Usage
23
+ ## Table of Contents
20
24
 
21
- ## Basic Setup
25
+ - [Features](#features)
26
+ - [Installation](#installation)
27
+ - [Usage](#usage)
28
+ - [Examples](#examples)
29
+ - [API Reference](#api-reference)
30
+ - [Styling](#styling)
31
+ - [Support & License](#support--license)
22
32
 
23
- You can use this component in two ways:
24
-
25
- ### 1. Standalone Components
33
+ ## Features
26
34
 
27
- Import the required artifacts in your component:
35
+ - **Automatic Breadcrumb Generation**: Automatically builds breadcrumbs from your Angular `Routes` configuration.
36
+ - **Dynamic Labels**: Supports dynamic labels via functions or string interpolation using resolved data.
37
+ - **Custom Templates**: Full control over how each breadcrumb item is rendered using directives.
38
+ - **RTL Support**: Built-in support for Right-to-Left languages.
39
+ - **Lazy Loading Compatible**: Works seamlessly with lazy-loaded modules.
28
40
 
29
- ```typescript
30
- import { HubBreadcrumbComponent } from 'ng-hub-ui-breadcrumbs';
31
- import { HubBreadcrumbItemDirective } from 'ng-hub-ui-breadcrumbs';
41
+ ## Installation
32
42
 
33
- @Component({
34
- // ...
35
- imports: [HubBreadcrumbComponent, HubBreadcrumbItemDirective]
36
- })
43
+ ```bash
44
+ npm install ng-hub-ui-breadcrumbs
37
45
  ```
38
46
 
39
- ### 2. Module Import
47
+ ## Usage
48
+
49
+ ### 1. Import the Component
40
50
 
41
- If you prefer using NgModules, import the HubBreadcrumbModule:
51
+ You can import the `HubBreadcrumbComponent` directly in your standalone component or module.
42
52
 
43
53
  ```typescript
44
- import { HubBreadcrumbModule } from 'ng-hub-ui-breadcrumbs';
54
+ import { HubBreadcrumbComponent } from 'ng-hub-ui-breadcrumbs';
45
55
 
46
- @NgModule({
47
- imports: [HubBreadcrumbModule]
56
+ @Component({
57
+ // ...
58
+ imports: [HubBreadcrumbComponent]
48
59
  })
49
- export class AppModule { }
60
+ export class AppComponent {}
50
61
  ```
51
62
 
52
- ### Route Configuration
63
+ ### 2. Add to Template
53
64
 
54
- Configure your routes with breadcrumb data:
55
-
56
- ```typescript
57
- // app-routing.module.ts
58
- const routes: Routes = [
59
- {
60
- path: '',
61
- data: { breadcrumb: 'Home' }
62
- },
63
- {
64
- path: 'products',
65
- data: { breadcrumb: 'Products' },
66
- children: [
67
- {
68
- path: ':id',
69
- resolve: {
70
- resolvedData: ProductResolver
71
- },
72
- data: {
73
- breadcrumb: '{name}' // Will use the product name from resolver
74
- }
75
- }
76
- ]
77
- }
78
- ];
79
- ```
80
-
81
- ### Add to Template
82
-
83
- Add the component to your template:
65
+ Place the component in your application's main layout or wherever you want breadcrumbs to appear.
84
66
 
85
67
  ```html
86
- <hub-breadcrumbs></hub-breadcrumbs>
68
+ <hub-breadcrumb></hub-breadcrumb>
87
69
  ```
88
70
 
89
- <!-- ### Dynamic Labels
71
+ ### 3. Configure Routes
90
72
 
91
- You can use resolved data in your breadcrumb labels:
73
+ The most critical part is adding `data: { breadcrumb: '...' }` to your routes.
92
74
 
75
+ ````typescript
93
76
  ```typescript
94
77
  const routes: Routes = [
95
- {
96
- path: 'product/:id',
97
- resolve: {
98
- resolvedData: ProductResolver
78
+ {
79
+ path: '',
80
+ data: { breadcrumb: 'Home' } // Standard static label
99
81
  },
100
- data: {
101
- breadcrumb: '{name}' // Will be replaced with resolvedData.name
82
+ {
83
+ path: 'products',
84
+ data: { breadcrumb: 'Products' },
85
+ children: [
86
+ // ... child routes
87
+ ]
102
88
  }
103
- }
104
89
  ];
105
- ``` -->
106
-
107
- ### Function Labels
90
+ ````
108
91
 
109
- You can also use functions to generate dynamic labels:
110
-
111
- ```typescript
112
- const routes: Routes = [
113
- {
114
- path: 'products',
115
- resolve: { info: infoResolver },
116
- data: { breadcrumb: (data: any) => `${data.info.title}` },
117
- }
118
- ];
119
- ```
120
-
121
- ### Component Features
122
-
123
- The breadcrumb component automatically:
124
- - Listens to route changes
125
- - Extracts breadcrumb data from route configuration
126
- - Builds the breadcrumb path
127
- - Handles template customization
128
- - Supports RTL languages
129
-
130
- ### Working with Lazy Loading
92
+ ### 4. Working with Lazy Loading
131
93
 
132
94
  For lazy-loaded modules, configure the parent route with breadcrumb data:
133
95
 
134
96
  ```typescript
135
97
  // app-routing.module.ts
136
98
  const routes: Routes = [
137
- {
138
- path: 'admin',
139
- data: { breadcrumb: 'Administration' },
140
- loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
141
- }
99
+ {
100
+ path: 'admin',
101
+ data: { breadcrumb: 'Administration' },
102
+ loadChildren: () => import('./admin/admin.module').then((m) => m.AdminModule)
103
+ }
142
104
  ];
143
105
 
144
106
  // admin-routing.module.ts
145
107
  const adminRoutes: Routes = [
146
- {
147
- path: 'users',
148
- data: { breadcrumb: 'Users' }
149
- }
108
+ {
109
+ path: 'users',
110
+ data: { breadcrumb: 'Users' }
111
+ }
150
112
  ];
151
113
  ```
152
114
 
153
115
  This will generate breadcrumbs like: Home > Administration > Users
154
116
 
155
- ## Custom Template
117
+ ## Examples
156
118
 
157
- You can customize how each breadcrumb item is rendered using a template.
119
+ ### Dynamic Labels with Functions
158
120
 
159
- ### Basic Template
160
-
161
- ```html
162
- <hub-breadcrumbs>
163
- <ng-template hubBreadcrumbItem let-item let-isLast="isLast">
164
- @if (!isLast) {
165
- <a [routerLink]="item.url" class="hub-breadcrumb__link">
166
- {{ item.label }}
167
- </a>
168
- } @else {
169
- <span class="hub-breadcrumb__text">{{ item.label }}</span>
170
- }
171
- </ng-template>
172
- </hub-breadcrumbs>
173
- ```
174
-
175
- ### Template Context
176
-
177
- The template context provides these properties:
121
+ You can use a function to generate the breadcrumb label dynamically based on route data.
178
122
 
179
123
  ```typescript
180
- interface BreadcrumbTemplateContext {
181
- $implicit: BreadcrumbItem; // The current breadcrumb item
182
- isLast: boolean; // Whether this is the last item
183
- }
184
-
185
- interface BreadcrumbItem {
186
- label: string; // The text to display
187
- url: string; // The route URL
188
- data: any; // Additional data from route configuration
189
- }
124
+ const routes: Routes = [
125
+ {
126
+ path: 'dashboard',
127
+ resolve: { userInfo: UserResolver },
128
+ data: {
129
+ breadcrumb: (data: any) => `User: ${data.userInfo.name}` // Function creates label from resolved data
130
+ }
131
+ }
132
+ ];
190
133
  ```
191
134
 
192
- ### Examples
135
+ ### Dynamic Labels with Interpolation
193
136
 
194
- With icons:
195
- ```html
196
- <hub-breadcrumbs>
197
- <ng-template hubBreadcrumbItem let-item let-isLast="isLast">
198
- @if (!isLast) {
199
- <a [routerLink]="item.url" class="hub-breadcrumb__link">
200
- <i [class]="item.data?.icon"></i>
201
- {{ item.label }}
202
- </a>
203
- } @else {
204
- <span class="hub-breadcrumb__text">
205
- <i [class]="item.data?.icon"></i>
206
- {{ item.label }}
207
- </span>
208
- }
209
- </ng-template>
210
- </hub-breadcrumbs>
211
- ```
137
+ Alternatively, you can use string interpolation `{key}` if your data is under a `resolvedData` property.
212
138
 
213
- Route configuration for icons:
214
139
  ```typescript
215
140
  const routes: Routes = [
216
- {
217
- path: 'products',
218
- data: {
219
- breadcrumb: 'Products',
220
- icon: 'fa fa-box' // Will be available in template
141
+ {
142
+ path: 'product/:id',
143
+ resolve: {
144
+ resolvedData: ProductResolver // Must be named 'resolvedData' for interpolation
145
+ },
146
+ data: {
147
+ breadcrumb: 'Product: {name}' // Replaces {name} with resolvedData.name
148
+ }
221
149
  }
222
- }
223
150
  ];
224
151
  ```
225
152
 
226
- With custom separators:
227
- ```html
228
- <hub-breadcrumbs>
229
- <ng-template hubBreadcrumbItem let-item let-isLast="isLast">
230
- @if (!isLast) {
231
- <a [routerLink]="item.url" class="hub-breadcrumb__link">
232
- {{ item.label }}
233
- </a>
234
- <span class="hub-breadcrumb__separator">→</span>
235
- } @else {
236
- <span class="hub-breadcrumb__text">{{ item.label }}</span>
237
- }
238
- </ng-template>
239
- </hub-breadcrumbs>
240
- ```
241
-
242
- Note: When using a custom template, you're responsible for:
243
- - Handling the navigation with `routerLink`
244
- - Managing active/inactive states
245
- - Applying appropriate styles
246
- - Handling RTL if needed
247
-
248
- ## Styling
249
-
250
- The breadcrumb component uses CSS variables for styling, making it highly customizable. It's designed to work with or without Bootstrap.
251
-
252
- ### Default SCSS Variables
253
-
254
- These SCSS variables set the default values:
255
-
256
- ```scss
257
- $border-radius-pill: 50rem !default;
258
- $secondary-color: black !default;
259
- $breadcrumb-font-size: null !default;
260
- $breadcrumb-padding-y: 0.25rem !default;
261
- $breadcrumb-padding-x: 1rem !default;
262
- $breadcrumb-item-padding-x: 0.5rem !default;
263
- $breadcrumb-margin-bottom: 0 !default;
264
- $breadcrumb-bg: white !default;
265
- $breadcrumb-divider-color: $secondary-color !default;
266
- $breadcrumb-active-color: $secondary-color !default;
267
- $breadcrumb-divider: quote('>') !default;
268
- $breadcrumb-divider-flipped: $breadcrumb-divider !default;
269
- $breadcrumb-border-radius: $border-radius-pill !default;
270
- ```
271
-
272
- ### CSS Variables
273
-
274
- These variables are exposed for runtime customization:
275
-
276
- ```css
277
- .hub-breadcrumb__list {
278
- --hub-breadcrumb-padding-x: 1rem;
279
- --hub-breadcrumb-padding-y: 0.25rem;
280
- --hub-breadcrumb-margin-bottom: 0;
281
- --hub-breadcrumb-bg: white;
282
- --hub-breadcrumb-border-radius: 50rem;
283
- --hub-breadcrumb-divider-color: black;
284
- --hub-breadcrumb-item-padding-x: 0.5rem;
285
- --hub-breadcrumb-item-active-color: black;
286
- }
287
- ```
288
-
289
- ### Customizing Styles
153
+ ### Custom Icons
290
154
 
291
- 1. Override SCSS variables (compile-time):
292
- ```scss
293
- // your-styles.scss
294
- $breadcrumb-bg: #f8f9fa;
295
- $breadcrumb-divider: quote('→');
296
- $breadcrumb-active-color: #6c757d;
297
- ```
155
+ You can attach arbitrary data (like icons) to your route config and use it in a custom template.
298
156
 
299
- 2. Override CSS variables (runtime):
300
- ```css
301
- .hub-breadcrumb__list {
302
- --hub-breadcrumb-bg: #f8f9fa;
303
- --hub-breadcrumb-divider-color: #6c757d;
304
- }
305
- ```
306
-
307
- 3. Override classes directly:
308
- ```scss
309
- .hub-breadcrumb__item {
310
- &--active {
311
- font-weight: bold;
157
+ ```typescript
158
+ // Route Configuration
159
+ {
160
+ path: 'settings',
161
+ data: {
162
+ breadcrumb: 'Settings',
163
+ icon: 'fa fa-cog' // Custom data property
312
164
  }
313
165
  }
314
166
  ```
315
167
 
316
- ### RTL Support
317
-
318
- The component automatically handles RTL languages by flipping the divider. You can customize the flipped divider using:
319
-
320
- ```scss
321
- $breadcrumb-divider-flipped: quote('<');
322
- ```
323
-
324
- ### Class Structure
325
-
326
- The component uses BEM methodology:
327
- - `.hub-breadcrumb` - Block (host component)
328
- - `.hub-breadcrumb__list` - Element (container)
329
- - `.hub-breadcrumb__item` - Element (each breadcrumb)
330
- - `.hub-breadcrumb__item--active` - Modifier (active state)
331
-
332
- ### Integration with Bootstrap
333
-
334
- While the component works independently, it's designed to be compatible with Bootstrap's breadcrumb styles. If you're using Bootstrap, the styles will automatically align with your Bootstrap theme.
335
-
336
- ### Inline Style Customization
337
-
338
- You can customize the breadcrumb directly in your template using inline styles:
339
-
340
168
  ```html
341
- <hub-breadcrumbs style="
342
- --hub-breadcrumb-divider: '🐸';
343
- --hub-breadcrumb-bg: #e9ecef;
344
- --hub-breadcrumb-item-active-color: #0d6efd;
345
- "></hub-breadcrumbs>
169
+ <!-- Custom Template Implementation -->
170
+ <hub-breadcrumb>
171
+ <ng-template hubBreadcrumbItem let-item let-isLast="isLast">
172
+ <!-- 'item.data' contains the entire route data object -->
173
+ @if (item.data.icon) {
174
+ <i [class]="item.data.icon"></i>
175
+ }
176
+ <a [routerLink]="item.url">{{ item.label }}</a>
177
+ </ng-template>
178
+ </hub-breadcrumbs>
346
179
  ```
347
180
 
348
- Common use cases:
181
+ ### Custom Template & Separators
349
182
 
350
- 1. Custom divider:
351
- ```html
352
- <hub-breadcrumbs style="--hub-breadcrumb-divider: '→'"></hub-breadcrumbs>
353
- <hub-breadcrumbs style="--hub-breadcrumb-divider: '>'"></hub-breadcrumbs>
354
- <hub-breadcrumbs style="--hub-breadcrumb-divider: '/'"></hub-breadcrumbs>
355
- <hub-breadcrumbs style="--hub-breadcrumb-divider: '🐸'"></hub-breadcrumbs>
356
- ```
183
+ Fully customize the structure, including separators/dividers.
357
184
 
358
- 2. Custom colors:
359
185
  ```html
360
- <hub-breadcrumbs style="
361
- --hub-breadcrumb-bg: transparent;
362
- --hub-breadcrumb-divider-color: #6c757d;
363
- --hub-breadcrumb-item-active-color: #0d6efd;
364
- "></hub-breadcrumbs>
186
+ <hub-breadcrumb>
187
+ <ng-template hubBreadcrumbItem let-item let-isLast="isLast">
188
+ <span class="my-breadcrumb-item">
189
+ <a [routerLink]="item.url">{{ item.label }}</a>
190
+ </span>
191
+ <!-- Custom Separator -->
192
+ @if (!isLast) {
193
+ <span class="separator"> / </span>
194
+ }
195
+ </ng-template>
196
+ </hub-breadcrumbs>
365
197
  ```
366
198
 
367
- 3. Custom spacing:
368
- ```html
369
- <hub-breadcrumbs style="
370
- --hub-breadcrumb-padding-x: 0;
371
- --hub-breadcrumb-padding-y: 0;
372
- --hub-breadcrumb-item-padding-x: 1rem;
373
- "></hub-breadcrumbs>
374
- ```
199
+ ## API Reference
375
200
 
376
- Note: When using emojis or special characters as dividers, make sure to wrap them in quotes.
201
+ ### HubBreadcrumbComponent
377
202
 
378
- ## API
203
+ The main container component. It doesn't have any inputs as it reads directly from the Router.
379
204
 
380
- ### Components
205
+ | Selector | Exported As |
206
+ | ----------------- | ---------------- |
207
+ | `hub-breadcrumb` | `hubBreadcrumb` |
381
208
 
382
- #### HubBreadcrumbComponent
383
- ```typescript
384
- @Component({
385
- selector: 'hub-breadcrumb',
386
- standalone: true
387
- })
388
- ```
389
-
390
- A standalone component that automatically generates breadcrumbs from route configuration.
391
-
392
- ### Directives
209
+ ### HubBreadcrumbItemDirective
393
210
 
394
- #### HubBreadcrumbItemDirective
395
- ```typescript
396
- @Directive({
397
- selector: '[hubBreadcrumbItem]',
398
- standalone: true
399
- })
400
- ```
211
+ A structural directive used to define a custom template for breadcrumb items.
401
212
 
402
- Template directive for customizing breadcrumb item rendering.
213
+ | Selector | Context Type |
214
+ | --------------------- | --------------------------- |
215
+ | `[hubBreadcrumbItem]` | `BreadcrumbTemplateContext` |
403
216
 
404
217
  ### Interfaces
405
218
 
406
219
  #### BreadcrumbItem
407
- ```typescript
408
- interface BreadcrumbItem {
409
- label: string; // Display text
410
- url: string; // Navigation URL
411
- data: any; // Additional data from route configuration
412
- }
413
- ```
220
+
221
+ | Property | Type | Description |
222
+ | -------- | -------- | ------------------------------------------------------- |
223
+ | `label` | `string` | The resolved text to display for the breadcrumb. |
224
+ | `url` | `string` | The full URL path to navigate to. |
225
+ | `data` | `any` | The original route data object (useful for icons, etc). |
414
226
 
415
227
  #### BreadcrumbTemplateContext
416
- ```typescript
417
- interface BreadcrumbTemplateContext {
418
- $implicit: BreadcrumbItem; // Current breadcrumb item
419
- isLast: boolean; // Whether this is the last item
420
- }
421
- ```
422
228
 
423
- ### Route Configuration
229
+ | Property | Type | Description |
230
+ | ----------- | ---------------- | ------------------------------------------------------------- |
231
+ | `$implicit` | `BreadcrumbItem` | The current breadcrumb item object. |
232
+ | `isLast` | `boolean` | True if this item is the last one in the list (current page). |
424
233
 
425
- The component reads breadcrumb configuration from route data:
234
+ ## Styling
426
235
 
427
- ```typescript
428
- interface BreadcrumbRouteData {
429
- breadcrumb: string | ((data: any) => string); // Static text or function
430
- icon?: string; // Optional icon class
431
- [key: string]: any; // Additional custom data
236
+ `ng-hub-ui-breadcrumbs` is fully style-configurable through CSS custom properties.
237
+
238
+ For a complete and up-to-date token catalog, see [CSS Variables Reference](./docs/css-variables-reference.md).
239
+
240
+ ### Quick customization example (framework-agnostic)
241
+
242
+ ```scss
243
+ .hub-breadcrumb__list {
244
+ --hub-breadcrumb-bg: #f8f9fa;
245
+ --hub-breadcrumb-divider: '→';
246
+ --hub-breadcrumb-link-color: #0d6efd;
247
+ --hub-breadcrumb-item-active-color: #6c757d;
432
248
  }
433
249
  ```
434
250
 
435
- ### CSS Custom Properties
436
-
437
- | Property | Description | Default |
438
- |----------|-------------|---------|
439
- | `--hub-breadcrumb-padding-x` | Horizontal padding | `1rem` |
440
- | `--hub-breadcrumb-padding-y` | Vertical padding | `0.25rem` |
441
- | `--hub-breadcrumb-margin-bottom` | Bottom margin | `0` |
442
- | `--hub-breadcrumb-bg` | Background color | `white` |
443
- | `--hub-breadcrumb-border-radius` | Border radius | `50rem` |
444
- | `--hub-breadcrumb-divider-color` | Divider color | `black` |
445
- | `--hub-breadcrumb-item-padding-x` | Item spacing | `0.5rem` |
446
- | `--hub-breadcrumb-item-active-color` | Active item color | `black` |
447
-
448
- ### SCSS Variables
449
-
450
- | Variable | Description | Default |
451
- |----------|-------------|---------|
452
- | `$breadcrumb-padding-y` | Vertical padding | `0.25rem` |
453
- | `$breadcrumb-padding-x` | Horizontal padding | `1rem` |
454
- | `$breadcrumb-margin-bottom` | Bottom margin | `0` |
455
- | `$breadcrumb-bg` | Background color | `white` |
456
- | `$breadcrumb-divider` | Divider character | `'>'` |
457
- | `$breadcrumb-divider-flipped` | RTL divider character | Same as `$breadcrumb-divider` |
458
- | `$breadcrumb-border-radius` | Border radius | `50rem` |
459
- | `$breadcrumb-active-color` | Active item color | `black` |
251
+ ### Bootstrap integration (optional)
460
252
 
253
+ ```scss
254
+ .hub-breadcrumb__list {
255
+ --hub-breadcrumb-bg: var(--bs-light);
256
+ --hub-breadcrumb-link-color: var(--bs-primary);
257
+ --hub-breadcrumb-link-hover-color: var(--bs-primary-text-emphasis);
258
+ --hub-breadcrumb-item-active-color: var(--bs-secondary-color);
259
+ }
260
+ ```
461
261
 
462
262
  ## Contributing
463
263
 
@@ -465,25 +265,28 @@ We appreciate your interest in contributing to Hub Breadcrumb! Here's how you ca
465
265
 
466
266
  ### Development Setup
467
267
 
468
- 1. Clone the repository
469
- ```bash
470
- git clone https://github.com/carlos-morcillo/ng-hub-ui-breadcrumbs.git
471
- cd ng-hub-ui-breadcrumbs
472
- ```
268
+ 1. **Clone the repository**
473
269
 
474
- 2. Install dependencies
475
- ```bash
476
- npm install
477
- ```
270
+ ```bash
271
+ git clone https://github.com/carlos-morcillo/ng-hub-ui-breadcrumbs.git
272
+ cd ng-hub-ui-breadcrumbs
273
+ ```
478
274
 
479
- 3. Start the development server
480
- ```bash
481
- npm start
482
- ```
275
+ 2. **Install dependencies**
276
+
277
+ ```bash
278
+ npm install
279
+ ```
280
+
281
+ 3. **Start the development server**
282
+ ```bash
283
+ npm start
284
+ ```
483
285
 
484
286
  ### Testing
485
287
 
486
288
  Run the test suite:
289
+
487
290
  ```bash
488
291
  # Unit tests
489
292
  npm run test
@@ -495,27 +298,6 @@ npm run e2e
495
298
  npm run test:coverage
496
299
  ```
497
300
 
498
- ### Project Structure
499
-
500
- ```
501
- ng-hub-ui-breadcrumbs/
502
- ├── src/
503
- │ ├── lib/
504
- │ │ ├── components/
505
- │ │ │ ├── hub-breadcrumb.component.ts
506
- │ │ │ ├── hub-breadcrumb.component.spec.ts
507
- │ │ │ └── hub-breadcrumb.component.scss
508
- │ │ ├── directives/
509
- │ │ │ └── hub-breadcrumb-item.directive.ts
510
- │ │ ├── services/
511
- │ │ │ └── hub-breadcrumb.service.ts
512
- │ │ └── interfaces/
513
- │ │ └── breadcrumb-item.ts
514
- │ └── public-api.ts
515
- ├── README.md
516
- └── package.json
517
- ```
518
-
519
301
  ### Commit Guidelines
520
302
 
521
303
  We follow [Conventional Commits](https://www.conventionalcommits.org/):
@@ -529,61 +311,21 @@ We follow [Conventional Commits](https://www.conventionalcommits.org/):
529
311
  - `chore:` Maintenance tasks
530
312
 
531
313
  Example:
532
- ```bash
533
- git commit -m "feat: add custom divider support"
534
- ```
535
314
 
536
- ### Pull Request Process
537
-
538
- 1. Fork the repository
539
- 2. Create a new branch:
540
315
  ```bash
541
- git checkout -b feat/my-new-feature
316
+ git commit -m "feat: add custom divider support"
542
317
  ```
543
- 3. Make your changes
544
- 4. Add tests for any new functionality
545
- 5. Update documentation if needed
546
- 6. Submit a Pull Request
547
318
 
548
- ### Development Guidelines
549
-
550
- - Write unit tests for new features
551
- - Follow Angular style guide
552
- - Update documentation for API changes
553
- - Maintain backward compatibility
554
- - Add comments for complex logic
555
-
556
- ### Issues
557
-
558
- Before creating an issue, please:
559
-
560
- - Check existing issues
561
- - Use the issue template
562
- - Include reproduction steps
563
- - Specify your environment
564
-
565
- ### Code Style
566
-
567
- We follow the [Angular Style Guide](https://angular.io/guide/styleguide):
568
-
569
- - Use TypeScript
570
- - Follow BEM for CSS
571
- - Maintain consistent naming
572
- - Add JSDoc comments
573
-
574
- ## Support the Project
319
+ ## Support & License
575
320
 
576
321
  If you find this project helpful and would like to support its development, you can buy me a coffee:
577
322
 
578
- [!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/carlosmorcillo)
323
+ [!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://buymeacoffee.com/carlosmorcillo)
579
324
 
580
325
  Your support is greatly appreciated and helps maintain and improve this project!
581
326
 
582
- ## License
583
-
584
327
  This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
585
328
 
586
329
  ---
587
330
 
588
331
  Made with ❤️ by [Carlos Morcillo Fernández]
589
-
package/fesm2022/ng-hub-ui-breadcrumbs.mjs CHANGED
@@ -1,32 +1,25 @@
1
1
  import * as i0 from '@angular/core';
2
- import { inject, TemplateRef, Directive, Injectable, Component, ContentChild, NgModule } from '@angular/core';
3
- import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
2
+ import { inject, TemplateRef, Directive, Injectable, contentChild, Component, NgModule } from '@angular/core';
3
+ import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
4
4
  import { Router, ActivatedRoute, NavigationEnd, RouterLink } from '@angular/router';
5
5
  import { filter, startWith, map } from 'rxjs';
6
6
 
7
7
  class HubBreadcrumbItemDirective {
8
- constructor() {
9
- this.template = inject((TemplateRef));
10
- }
11
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: HubBreadcrumbItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
12
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: HubBreadcrumbItemDirective, isStandalone: true, selector: "[hubBreadcrumbItem]", ngImport: i0 }); }
8
+ template = inject((TemplateRef));
9
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubBreadcrumbItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
10
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: HubBreadcrumbItemDirective, isStandalone: true, selector: "[hubBreadcrumbItem]", ngImport: i0 });
13
11
  }
14
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: HubBreadcrumbItemDirective, decorators: [{
12
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubBreadcrumbItemDirective, decorators: [{
15
13
  type: Directive,
16
14
  args: [{
17
- selector: '[hubBreadcrumbItem]',
18
- standalone: true
15
+ selector: '[hubBreadcrumbItem]'
19
16
  }]
20
17
  }] });
21
18
 
22
19
  class HubBreadcrumbsService {
23
- constructor() {
24
- this.#router = inject(Router);
25
- this.#activatedRoute = inject(ActivatedRoute);
26
- this.breadcrumbs$ = this.#router.events.pipe(filter((event) => event instanceof NavigationEnd), startWith(undefined), map(() => this.createBreadcrumbs(this.#activatedRoute.root)));
27
- }
28
- #router;
29
- #activatedRoute;
20
+ #router = inject(Router);
21
+ #activatedRoute = inject(ActivatedRoute);
22
+ breadcrumbs$ = this.#router.events.pipe(filter((event) => event instanceof NavigationEnd), startWith(undefined), map(() => this.createBreadcrumbs(this.#activatedRoute.root)));
30
23
  createBreadcrumbs(route, url = '', breadcrumbs = []) {
31
24
  const children = route.children;
32
25
  if (children.length === 0) {
@@ -77,46 +70,41 @@ class HubBreadcrumbsService {
77
70
  return data[key] || match;
78
71
  });
79
72
  }
80
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: HubBreadcrumbsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
81
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: HubBreadcrumbsService, providedIn: 'root' }); }
73
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubBreadcrumbsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
74
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubBreadcrumbsService, providedIn: 'root' });
82
75
  }
83
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: HubBreadcrumbsService, decorators: [{
76
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubBreadcrumbsService, decorators: [{
84
77
  type: Injectable,
85
78
  args: [{
86
79
  providedIn: 'root'
87
80
  }]
88
81
  }] });
89
82
 
90
- class HubBreadcrumbsComponent {
91
- constructor() {
92
- this.#breadcrumbsSvc = inject(HubBreadcrumbsService);
93
- this.breadcrumbs$ = this.#breadcrumbsSvc.breadcrumbs$;
94
- }
95
- #breadcrumbsSvc;
96
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: HubBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
97
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: HubBreadcrumbsComponent, isStandalone: true, selector: "hub-breadcrumbs", host: { classAttribute: "hub-breadcrumb" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: HubBreadcrumbItemDirective, descendants: true }], ngImport: i0, template: "<nav aria-label=\"breadcrumb\" class=\"hub-breadcrumb__nav\">\n\t<ol class=\"hub-breadcrumb__list\">\n\t\t@for (item of breadcrumbs$ | async; track item; let last = $last) {\n\t\t<li\n\t\t\tclass=\"hub-breadcrumb__item\"\n\t\t\t[class.hub-breadcrumb__item--active]=\"last\"\n\t\t>\n\t\t\t@if (itemTemplate) {\n\t\t\t<ng-container\n\t\t\t\t[ngTemplateOutlet]=\"itemTemplate.template\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: item, isLast: last }\"\n\t\t\t/>\n\t\t\t} @else { @if (!last) {\n\t\t\t<a [routerLink]=\"item.url\" class=\"hub-breadcrumb__link\">\n\t\t\t\t{{ item.label }}\n\t\t\t</a>\n\t\t\t} @else {\n\t\t\t<span class=\"hub-breadcrumb__text\">{{ item.label }}</span>\n\t\t\t} }\n\t\t</li>\n\t\t}\n\t</ol>\n</nav>\n", styles: [".hub-breadcrumb__list{--hub-breadcrumb-padding-x: 1rem;--hub-breadcrumb-padding-y: .25rem;--hub-breadcrumb-margin-bottom: 0;--hub-breadcrumb-bg: white;--hub-breadcrumb-border-radius: 50rem;--hub-breadcrumb-divider-color: black;--hub-breadcrumb-item-padding-x: .5rem;--hub-breadcrumb-item-active-color: black;display:flex;flex-wrap:wrap;padding:var(--hub-breadcrumb-padding-y) var(--hub-breadcrumb-padding-x);margin-bottom:var(--hub-breadcrumb-margin-bottom);list-style:none;background-color:var(--hub-breadcrumb-bg)}.hub-breadcrumb__item+.hub-breadcrumb__item{padding-left:var(--hub-breadcrumb-item-padding-x)}.hub-breadcrumb__item+.hub-breadcrumb__item:before{float:left;padding-right:var(--hub-breadcrumb-item-padding-x);color:var(--hub-breadcrumb-divider-color);content:var(--hub-breadcrumb-divider, \">\")}.hub-breadcrumb__item--active{color:var(--hub-breadcrumb-item-active-color)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
83
+ class HubBreadcrumbComponent {
84
+ #breadcrumbsSvc = inject(HubBreadcrumbsService);
85
+ itemTemplate = contentChild(HubBreadcrumbItemDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : {}), read: TemplateRef });
86
+ breadcrumbs$ = this.#breadcrumbsSvc.breadcrumbs$;
87
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
88
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: HubBreadcrumbComponent, isStandalone: true, selector: "hub-breadcrumb", host: { classAttribute: "hub-breadcrumb" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: HubBreadcrumbItemDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<nav aria-label=\"breadcrumb\" class=\"hub-breadcrumb__nav\">\n\t<ol class=\"hub-breadcrumb__list\">\n\t\t@for (item of breadcrumbs$ | async; track item; let last = $last) {\n\t\t\t<li class=\"hub-breadcrumb__item\" [class.hub-breadcrumb__item--active]=\"last\">\n\t\t\t\t@if (itemTemplate()) {\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"itemTemplate()\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t$implicit: item,\n\t\t\t\t\t\t\tisLast: last\n\t\t\t\t\t\t}\"\n\t\t\t\t\t/>\n\t\t\t\t} @else {\n\t\t\t\t\t@if (!last) {\n\t\t\t\t\t\t<a [routerLink]=\"item.url\" class=\"hub-breadcrumb__link\">\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<span class=\"hub-breadcrumb__text\">{{ item.label }}</span>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</li>\n\t\t}\n\t</ol>\n</nav>\n", styles: [":root,:host{--hub-ref-space-0: 0;--hub-ref-space-1: .5rem;--hub-ref-space-3: 1rem;--hub-ref-radius-md: .375rem;--hub-sys-surface-page: transparent;--hub-sys-text-primary: #212529;--hub-sys-text-muted: #6c757d;--hub-sys-link-color: #0d6efd;--hub-sys-link-hover-color: #0a58ca;--hub-breadcrumb-padding-x: var(--hub-ref-space-3, 1rem);--hub-breadcrumb-padding-y: .25rem;--hub-breadcrumb-margin-bottom: var(--hub-ref-space-0, 0);--hub-breadcrumb-bg: var(--hub-sys-surface-page, transparent);--hub-breadcrumb-color: var(--hub-sys-text-primary, #212529);--hub-breadcrumb-border-radius: var(--hub-ref-radius-md, .375rem);--hub-breadcrumb-divider-color: var(--hub-sys-text-muted, #6c757d);--hub-breadcrumb-item-padding-x: var(--hub-ref-space-1, .5rem);--hub-breadcrumb-item-active-color: var(--hub-sys-text-muted, #6c757d);--hub-breadcrumb-link-color: var(--hub-sys-link-color, #0d6efd);--hub-breadcrumb-link-hover-color: var(--hub-sys-link-hover-color, #0a58ca);--hub-breadcrumb-link-decoration: none;--hub-breadcrumb-link-hover-decoration: underline;--hub-breadcrumb-divider: \">\";--hub-breadcrumb-divider-flipped: \"<\";--hub-breadcrumb-font-size: inherit}.hub-breadcrumb__nav .hub-breadcrumb__list{display:flex;flex-wrap:wrap;font-size:var(--hub-breadcrumb-font-size, inherit);padding:var(--hub-breadcrumb-padding-y, .25rem) var(--hub-breadcrumb-padding-x, var(--hub-ref-space-3, 1rem));margin-bottom:var(--hub-breadcrumb-margin-bottom, var(--hub-ref-space-0, 0));list-style:none;color:var(--hub-breadcrumb-color, var(--hub-sys-text-primary, #212529));background-color:var(--hub-breadcrumb-bg, var(--hub-sys-surface-page, transparent));border-radius:var(--hub-breadcrumb-border-radius, var(--hub-ref-radius-md, .375rem))}.hub-breadcrumb__nav .hub-breadcrumb__item+.hub-breadcrumb__item{padding-left:var(--hub-breadcrumb-item-padding-x, var(--hub-ref-space-1, .5rem))}.hub-breadcrumb__nav .hub-breadcrumb__item+.hub-breadcrumb__item:before{float:left;padding-right:var(--hub-breadcrumb-item-padding-x, var(--hub-ref-space-1, .5rem));color:var(--hub-breadcrumb-divider-color, var(--hub-sys-text-muted, #6c757d));content:var(--hub-breadcrumb-divider, \">\")}.hub-breadcrumb__nav .hub-breadcrumb__item--active{color:var(--hub-breadcrumb-item-active-color, var(--hub-sys-text-muted, #6c757d))}.hub-breadcrumb__nav .hub-breadcrumb__link{color:var(--hub-breadcrumb-link-color, var(--hub-sys-link-color, #0d6efd));text-decoration:var(--hub-breadcrumb-link-decoration, none)}.hub-breadcrumb__nav .hub-breadcrumb__link:hover{color:var(--hub-breadcrumb-link-hover-color, var(--hub-sys-link-hover-color, #0a58ca));text-decoration:var(--hub-breadcrumb-link-hover-decoration, underline)}[dir=rtl] .hub-breadcrumb__nav .hub-breadcrumb__item+.hub-breadcrumb__item:before{content:var(--hub-breadcrumb-divider-flipped, var(--hub-breadcrumb-divider, \">\"))}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
98
89
  }
99
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: HubBreadcrumbsComponent, decorators: [{
90
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubBreadcrumbComponent, decorators: [{
100
91
  type: Component,
101
- args: [{ selector: 'hub-breadcrumbs', standalone: true, imports: [AsyncPipe, RouterLink, NgTemplateOutlet], host: {
92
+ args: [{ selector: 'hub-breadcrumb', imports: [AsyncPipe, RouterLink, NgTemplateOutlet], host: {
102
93
  class: 'hub-breadcrumb'
103
- }, template: "<nav aria-label=\"breadcrumb\" class=\"hub-breadcrumb__nav\">\n\t<ol class=\"hub-breadcrumb__list\">\n\t\t@for (item of breadcrumbs$ | async; track item; let last = $last) {\n\t\t<li\n\t\t\tclass=\"hub-breadcrumb__item\"\n\t\t\t[class.hub-breadcrumb__item--active]=\"last\"\n\t\t>\n\t\t\t@if (itemTemplate) {\n\t\t\t<ng-container\n\t\t\t\t[ngTemplateOutlet]=\"itemTemplate.template\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: item, isLast: last }\"\n\t\t\t/>\n\t\t\t} @else { @if (!last) {\n\t\t\t<a [routerLink]=\"item.url\" class=\"hub-breadcrumb__link\">\n\t\t\t\t{{ item.label }}\n\t\t\t</a>\n\t\t\t} @else {\n\t\t\t<span class=\"hub-breadcrumb__text\">{{ item.label }}</span>\n\t\t\t} }\n\t\t</li>\n\t\t}\n\t</ol>\n</nav>\n", styles: [".hub-breadcrumb__list{--hub-breadcrumb-padding-x: 1rem;--hub-breadcrumb-padding-y: .25rem;--hub-breadcrumb-margin-bottom: 0;--hub-breadcrumb-bg: white;--hub-breadcrumb-border-radius: 50rem;--hub-breadcrumb-divider-color: black;--hub-breadcrumb-item-padding-x: .5rem;--hub-breadcrumb-item-active-color: black;display:flex;flex-wrap:wrap;padding:var(--hub-breadcrumb-padding-y) var(--hub-breadcrumb-padding-x);margin-bottom:var(--hub-breadcrumb-margin-bottom);list-style:none;background-color:var(--hub-breadcrumb-bg)}.hub-breadcrumb__item+.hub-breadcrumb__item{padding-left:var(--hub-breadcrumb-item-padding-x)}.hub-breadcrumb__item+.hub-breadcrumb__item:before{float:left;padding-right:var(--hub-breadcrumb-item-padding-x);color:var(--hub-breadcrumb-divider-color);content:var(--hub-breadcrumb-divider, \">\")}.hub-breadcrumb__item--active{color:var(--hub-breadcrumb-item-active-color)}\n"] }]
104
- }], propDecorators: { itemTemplate: [{
105
- type: ContentChild,
106
- args: [HubBreadcrumbItemDirective]
107
- }] } });
94
+ }, template: "<nav aria-label=\"breadcrumb\" class=\"hub-breadcrumb__nav\">\n\t<ol class=\"hub-breadcrumb__list\">\n\t\t@for (item of breadcrumbs$ | async; track item; let last = $last) {\n\t\t\t<li class=\"hub-breadcrumb__item\" [class.hub-breadcrumb__item--active]=\"last\">\n\t\t\t\t@if (itemTemplate()) {\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"itemTemplate()\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t$implicit: item,\n\t\t\t\t\t\t\tisLast: last\n\t\t\t\t\t\t}\"\n\t\t\t\t\t/>\n\t\t\t\t} @else {\n\t\t\t\t\t@if (!last) {\n\t\t\t\t\t\t<a [routerLink]=\"item.url\" class=\"hub-breadcrumb__link\">\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<span class=\"hub-breadcrumb__text\">{{ item.label }}</span>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</li>\n\t\t}\n\t</ol>\n</nav>\n", styles: [":root,:host{--hub-ref-space-0: 0;--hub-ref-space-1: .5rem;--hub-ref-space-3: 1rem;--hub-ref-radius-md: .375rem;--hub-sys-surface-page: transparent;--hub-sys-text-primary: #212529;--hub-sys-text-muted: #6c757d;--hub-sys-link-color: #0d6efd;--hub-sys-link-hover-color: #0a58ca;--hub-breadcrumb-padding-x: var(--hub-ref-space-3, 1rem);--hub-breadcrumb-padding-y: .25rem;--hub-breadcrumb-margin-bottom: var(--hub-ref-space-0, 0);--hub-breadcrumb-bg: var(--hub-sys-surface-page, transparent);--hub-breadcrumb-color: var(--hub-sys-text-primary, #212529);--hub-breadcrumb-border-radius: var(--hub-ref-radius-md, .375rem);--hub-breadcrumb-divider-color: var(--hub-sys-text-muted, #6c757d);--hub-breadcrumb-item-padding-x: var(--hub-ref-space-1, .5rem);--hub-breadcrumb-item-active-color: var(--hub-sys-text-muted, #6c757d);--hub-breadcrumb-link-color: var(--hub-sys-link-color, #0d6efd);--hub-breadcrumb-link-hover-color: var(--hub-sys-link-hover-color, #0a58ca);--hub-breadcrumb-link-decoration: none;--hub-breadcrumb-link-hover-decoration: underline;--hub-breadcrumb-divider: \">\";--hub-breadcrumb-divider-flipped: \"<\";--hub-breadcrumb-font-size: inherit}.hub-breadcrumb__nav .hub-breadcrumb__list{display:flex;flex-wrap:wrap;font-size:var(--hub-breadcrumb-font-size, inherit);padding:var(--hub-breadcrumb-padding-y, .25rem) var(--hub-breadcrumb-padding-x, var(--hub-ref-space-3, 1rem));margin-bottom:var(--hub-breadcrumb-margin-bottom, var(--hub-ref-space-0, 0));list-style:none;color:var(--hub-breadcrumb-color, var(--hub-sys-text-primary, #212529));background-color:var(--hub-breadcrumb-bg, var(--hub-sys-surface-page, transparent));border-radius:var(--hub-breadcrumb-border-radius, var(--hub-ref-radius-md, .375rem))}.hub-breadcrumb__nav .hub-breadcrumb__item+.hub-breadcrumb__item{padding-left:var(--hub-breadcrumb-item-padding-x, var(--hub-ref-space-1, .5rem))}.hub-breadcrumb__nav .hub-breadcrumb__item+.hub-breadcrumb__item:before{float:left;padding-right:var(--hub-breadcrumb-item-padding-x, var(--hub-ref-space-1, .5rem));color:var(--hub-breadcrumb-divider-color, var(--hub-sys-text-muted, #6c757d));content:var(--hub-breadcrumb-divider, \">\")}.hub-breadcrumb__nav .hub-breadcrumb__item--active{color:var(--hub-breadcrumb-item-active-color, var(--hub-sys-text-muted, #6c757d))}.hub-breadcrumb__nav .hub-breadcrumb__link{color:var(--hub-breadcrumb-link-color, var(--hub-sys-link-color, #0d6efd));text-decoration:var(--hub-breadcrumb-link-decoration, none)}.hub-breadcrumb__nav .hub-breadcrumb__link:hover{color:var(--hub-breadcrumb-link-hover-color, var(--hub-sys-link-hover-color, #0a58ca));text-decoration:var(--hub-breadcrumb-link-hover-decoration, underline)}[dir=rtl] .hub-breadcrumb__nav .hub-breadcrumb__item+.hub-breadcrumb__item:before{content:var(--hub-breadcrumb-divider-flipped, var(--hub-breadcrumb-divider, \">\"))}\n"] }]
95
+ }], propDecorators: { itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubBreadcrumbItemDirective), { ...{ read: TemplateRef }, isSignal: true }] }] } });
108
96
 
109
97
  class HubBreadcrumbsModule {
110
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: HubBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
111
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: HubBreadcrumbsModule, imports: [HubBreadcrumbsComponent, HubBreadcrumbItemDirective], exports: [HubBreadcrumbsComponent, HubBreadcrumbItemDirective] }); }
112
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: HubBreadcrumbsModule }); }
98
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
99
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.2", ngImport: i0, type: HubBreadcrumbsModule, imports: [HubBreadcrumbComponent, HubBreadcrumbItemDirective], exports: [HubBreadcrumbComponent, HubBreadcrumbItemDirective] });
100
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubBreadcrumbsModule });
113
101
  }
114
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: HubBreadcrumbsModule, decorators: [{
102
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubBreadcrumbsModule, decorators: [{
115
103
  type: NgModule,
116
104
  args: [{
117
105
  declarations: [],
118
- imports: [HubBreadcrumbsComponent, HubBreadcrumbItemDirective],
119
- exports: [HubBreadcrumbsComponent, HubBreadcrumbItemDirective]
106
+ imports: [HubBreadcrumbComponent, HubBreadcrumbItemDirective],
107
+ exports: [HubBreadcrumbComponent, HubBreadcrumbItemDirective]
120
108
  }]
121
109
  }] });
122
110
 
@@ -128,5 +116,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
128
116
  * Generated bundle index. Do not edit.
129
117
  */
130
118
 
131
- export { HubBreadcrumbItemDirective, HubBreadcrumbsComponent, HubBreadcrumbsModule, HubBreadcrumbsService };
119
+ export { HubBreadcrumbComponent, HubBreadcrumbItemDirective, HubBreadcrumbsModule, HubBreadcrumbsService };
132
120
  //# sourceMappingURL=ng-hub-ui-breadcrumbs.mjs.map
package/fesm2022/ng-hub-ui-breadcrumbs.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ng-hub-ui-breadcrumbs.mjs","sources":["../../../projects/breadcrumbs/src/lib/directives/hub-breadcrumb-item.directive.ts","../../../projects/breadcrumbs/src/lib/services/hub-breadcrumbs.service.ts","../../../projects/breadcrumbs/src/lib/components/hub-breadcrumbs/hub-breadcrumbs.component.ts","../../../projects/breadcrumbs/src/lib/components/hub-breadcrumbs/hub-breadcrumbs.component.html","../../../projects/breadcrumbs/src/lib/hub-breadcrumbs.module.ts","../../../projects/breadcrumbs/src/public-api.ts","../../../projects/breadcrumbs/src/ng-hub-ui-breadcrumbs.ts"],"sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\nimport { BreadcrumbTemplateContext } from '../types/breadcrumb-template-context';\n\n@Directive({\n\tselector: '[hubBreadcrumbItem]',\n\tstandalone: true\n})\nexport class HubBreadcrumbItemDirective {\n\ttemplate = inject(TemplateRef<BreadcrumbTemplateContext>);\n}\n","import { inject, Injectable } from '@angular/core';\nimport { BreadcrumbItem } from '../types/breadcrumb-item';\nimport { ActivatedRoute, NavigationEnd, Router } from '@angular/router';\nimport { filter, startWith, map } from 'rxjs';\n\n@Injectable({\n\tprovidedIn: 'root'\n})\nexport class HubBreadcrumbsService {\n\t#router = inject(Router);\n\t#activatedRoute = inject(ActivatedRoute);\n\n\tbreadcrumbs$ = this.#router.events.pipe(\n\t\tfilter((event) => event instanceof NavigationEnd),\n\t\tstartWith(undefined),\n\t\tmap(() => this.createBreadcrumbs(this.#activatedRoute.root))\n\t);\n\n\tprivate createBreadcrumbs(\n\t\troute: ActivatedRoute,\n\t\turl: string = '',\n\t\tbreadcrumbs: BreadcrumbItem[] = []\n\t): BreadcrumbItem[] {\n\t\tconst children: ActivatedRoute[] = route.children;\n\n\t\tif (children.length === 0) {\n\t\t\treturn breadcrumbs;\n\t\t}\n\n\t\tfor (const child of children) {\n\t\t\tconst routeSegments = child.snapshot.url;\n\n\t\t\t// Construir la URL para este nivel\n\t\t\tconst routeURL: string = routeSegments\n\t\t\t\t.map((segment) => segment.path)\n\t\t\t\t.join('/');\n\n\t\t\tconst nextUrl = routeURL ? `${url}/${routeURL}` : url;\n\n\t\t\t// Verificar si esta ruta específica tiene datos de breadcrumb\n\t\t\tconst hasBreadcrumbData = this.hasOwnBreadcrumbData(child);\n\n\t\t\tif (hasBreadcrumbData) {\n\t\t\t\tconst label = this.getBreadcrumbLabel(child);\n\t\t\t\tbreadcrumbs.push({\n\t\t\t\t\tlabel,\n\t\t\t\t\turl: nextUrl,\n\t\t\t\t\tdata: child.snapshot.data\n\t\t\t\t});\n\t\t\t}\n\n\t\t\t// Continuar con los hijos\n\t\t\treturn this.createBreadcrumbs(child, nextUrl, breadcrumbs);\n\t\t}\n\n\t\treturn breadcrumbs;\n\t}\n\n\tprivate hasOwnBreadcrumbData(route: ActivatedRoute): boolean {\n\t\t// Verificar si la ruta tiene su propia configuración de breadcrumb\n\t\tconst routeConfig = route.routeConfig;\n\t\treturn !!(\n\t\t\trouteConfig &&\n\t\t\trouteConfig.data &&\n\t\t\trouteConfig.data['breadcrumb']\n\t\t);\n\t}\n\n\tprivate getBreadcrumbLabel(route: ActivatedRoute): string {\n\t\tconst data = route.snapshot.data;\n\t\tlet label = data['breadcrumb'];\n\n\t\tif (typeof label === 'function') {\n\t\t\tlabel = label(data);\n\t\t}\n\n\t\tif (data['resolvedData']) {\n\t\t\tlabel = this.getResolvedBreadcrumb(label, data['resolvedData']);\n\t\t}\n\n\t\treturn label;\n\t}\n\n\tprivate getResolvedBreadcrumb(template: string, data: any): string {\n\t\treturn template.replace(/\\{([^}]+)\\}/g, (match, key) => {\n\t\t\treturn data[key] || match;\n\t\t});\n\t}\n}\n","import { AsyncPipe, NgTemplateOutlet } from '@angular/common';\nimport { Component, ContentChild, inject } from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { HubBreadcrumbItemDirective } from '../../directives/hub-breadcrumb-item.directive';\nimport { HubBreadcrumbsService } from '../../services/hub-breadcrumbs.service';\n\n@Component({\n\tselector: 'hub-breadcrumbs',\n\tstandalone: true,\n\timports: [AsyncPipe, RouterLink, NgTemplateOutlet],\n\ttemplateUrl: './hub-breadcrumbs.component.html',\n\tstyleUrl: './hub-breadcrumbs.component.scss',\n\thost: {\n\t\tclass: 'hub-breadcrumb'\n\t}\n})\nexport class HubBreadcrumbsComponent {\n\t#breadcrumbsSvc = inject(HubBreadcrumbsService);\n\n\t@ContentChild(HubBreadcrumbItemDirective)\n\titemTemplate?: HubBreadcrumbItemDirective;\n\n\tbreadcrumbs$ = this.#breadcrumbsSvc.breadcrumbs$;\n}\n","<nav aria-label=\"breadcrumb\" class=\"hub-breadcrumb__nav\">\n\t<ol class=\"hub-breadcrumb__list\">\n\t\t@for (item of breadcrumbs$ | async; track item; let last = $last) {\n\t\t<li\n\t\t\tclass=\"hub-breadcrumb__item\"\n\t\t\t[class.hub-breadcrumb__item--active]=\"last\"\n\t\t>\n\t\t\t@if (itemTemplate) {\n\t\t\t<ng-container\n\t\t\t\t[ngTemplateOutlet]=\"itemTemplate.template\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: item, isLast: last }\"\n\t\t\t/>\n\t\t\t} @else { @if (!last) {\n\t\t\t<a [routerLink]=\"item.url\" class=\"hub-breadcrumb__link\">\n\t\t\t\t{{ item.label }}\n\t\t\t</a>\n\t\t\t} @else {\n\t\t\t<span class=\"hub-breadcrumb__text\">{{ item.label }}</span>\n\t\t\t} }\n\t\t</li>\n\t\t}\n\t</ol>\n</nav>\n","import { NgModule } from '@angular/core';\nimport { HubBreadcrumbsComponent } from './components/hub-breadcrumbs/hub-breadcrumbs.component';\nimport { HubBreadcrumbItemDirective } from './directives/hub-breadcrumb-item.directive';\n\n@NgModule({\n\tdeclarations: [],\n\timports: [HubBreadcrumbsComponent, HubBreadcrumbItemDirective],\n\texports: [HubBreadcrumbsComponent, HubBreadcrumbItemDirective]\n})\nexport class HubBreadcrumbsModule {}\n","/*\n * Public API Surface of breadcrumbs\n */\nexport * from './lib/hub-breadcrumbs.module';\nexport * from './lib/services/hub-breadcrumbs.service';\nexport * from './lib/components/hub-breadcrumbs/hub-breadcrumbs.component';\nexport * from './lib/directives/hub-breadcrumb-item.directive';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ng-hub-ui-breadcrumbs.mjs","sources":["../../../projects/breadcrumbs/src/lib/directives/breadcrumb-item.directive.ts","../../../projects/breadcrumbs/src/lib/services/breadcrumbs.service.ts","../../../projects/breadcrumbs/src/lib/components/breadcrumb/breadcrumb.component.ts","../../../projects/breadcrumbs/src/lib/components/breadcrumb/breadcrumb.component.html","../../../projects/breadcrumbs/src/lib/breadcrumbs.module.ts","../../../projects/breadcrumbs/src/public-api.ts","../../../projects/breadcrumbs/src/ng-hub-ui-breadcrumbs.ts"],"sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\nimport { BreadcrumbTemplateContext } from '../models/breadcrumb-template-context';\n\n@Directive({\n\tselector: '[hubBreadcrumbItem]'\n})\nexport class HubBreadcrumbItemDirective {\n\ttemplate = inject(TemplateRef<BreadcrumbTemplateContext>);\n}\n","import { inject, Injectable } from '@angular/core';\nimport { ActivatedRoute, NavigationEnd, Router } from '@angular/router';\nimport { filter, map, startWith } from 'rxjs';\nimport { BreadcrumbItem } from '../models/breadcrumb-item';\n\n@Injectable({\n\tprovidedIn: 'root'\n})\nexport class HubBreadcrumbsService {\n\t#router = inject(Router);\n\t#activatedRoute = inject(ActivatedRoute);\n\n\tbreadcrumbs$ = this.#router.events.pipe(\n\t\tfilter((event) => event instanceof NavigationEnd),\n\t\tstartWith(undefined),\n\t\tmap(() => this.createBreadcrumbs(this.#activatedRoute.root))\n\t);\n\n\tprivate createBreadcrumbs(\n\t\troute: ActivatedRoute,\n\t\turl: string = '',\n\t\tbreadcrumbs: BreadcrumbItem[] = []\n\t): BreadcrumbItem[] {\n\t\tconst children: ActivatedRoute[] = route.children;\n\n\t\tif (children.length === 0) {\n\t\t\treturn breadcrumbs;\n\t\t}\n\n\t\tfor (const child of children) {\n\t\t\tconst routeSegments = child.snapshot.url;\n\n\t\t\t// Construir la URL para este nivel\n\t\t\tconst routeURL: string = routeSegments\n\t\t\t\t.map((segment) => segment.path)\n\t\t\t\t.join('/');\n\n\t\t\tconst nextUrl = routeURL ? `${url}/${routeURL}` : url;\n\n\t\t\t// Verificar si esta ruta específica tiene datos de breadcrumb\n\t\t\tconst hasBreadcrumbData = this.hasOwnBreadcrumbData(child);\n\n\t\t\tif (hasBreadcrumbData) {\n\t\t\t\tconst label = this.getBreadcrumbLabel(child);\n\t\t\t\tbreadcrumbs.push({\n\t\t\t\t\tlabel,\n\t\t\t\t\turl: nextUrl,\n\t\t\t\t\tdata: child.snapshot.data\n\t\t\t\t});\n\t\t\t}\n\n\t\t\t// Continuar con los hijos\n\t\t\treturn this.createBreadcrumbs(child, nextUrl, breadcrumbs);\n\t\t}\n\n\t\treturn breadcrumbs;\n\t}\n\n\tprivate hasOwnBreadcrumbData(route: ActivatedRoute): boolean {\n\t\t// Verificar si la ruta tiene su propia configuración de breadcrumb\n\t\tconst routeConfig = route.routeConfig;\n\t\treturn !!(\n\t\t\trouteConfig &&\n\t\t\trouteConfig.data &&\n\t\t\trouteConfig.data['breadcrumb']\n\t\t);\n\t}\n\n\tprivate getBreadcrumbLabel(route: ActivatedRoute): string {\n\t\tconst data = route.snapshot.data;\n\t\tlet label = data['breadcrumb'];\n\n\t\tif (typeof label === 'function') {\n\t\t\tlabel = label(data);\n\t\t}\n\n\t\tif (data['resolvedData']) {\n\t\t\tlabel = this.getResolvedBreadcrumb(label, data['resolvedData']);\n\t\t}\n\n\t\treturn label;\n\t}\n\n\tprivate getResolvedBreadcrumb(template: string, data: any): string {\n\t\treturn template.replace(/\\{([^}]+)\\}/g, (match, key) => {\n\t\t\treturn data[key] || match;\n\t\t});\n\t}\n}\n","import { AsyncPipe, NgTemplateOutlet } from '@angular/common';\nimport { Component, contentChild, inject, TemplateRef } from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { HubBreadcrumbItemDirective } from '../../directives/breadcrumb-item.directive';\nimport { HubBreadcrumbsService } from '../../services/breadcrumbs.service';\n\n@Component({\n\tselector: 'hub-breadcrumb',\n\timports: [AsyncPipe, RouterLink, NgTemplateOutlet],\n\ttemplateUrl: './breadcrumb.component.html',\n\tstyleUrl: './breadcrumb.component.scss',\n\thost: {\n\t\tclass: 'hub-breadcrumb'\n\t}\n})\nexport class HubBreadcrumbComponent {\n\t#breadcrumbsSvc = inject(HubBreadcrumbsService);\n\n\treadonly itemTemplate = contentChild(HubBreadcrumbItemDirective, { read: TemplateRef });\n\n\tbreadcrumbs$ = this.#breadcrumbsSvc.breadcrumbs$;\n}\n","<nav aria-label=\"breadcrumb\" class=\"hub-breadcrumb__nav\">\n\t<ol class=\"hub-breadcrumb__list\">\n\t\t@for (item of breadcrumbs$ | async; track item; let last = $last) {\n\t\t\t<li class=\"hub-breadcrumb__item\" [class.hub-breadcrumb__item--active]=\"last\">\n\t\t\t\t@if (itemTemplate()) {\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"itemTemplate()\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t$implicit: item,\n\t\t\t\t\t\t\tisLast: last\n\t\t\t\t\t\t}\"\n\t\t\t\t\t/>\n\t\t\t\t} @else {\n\t\t\t\t\t@if (!last) {\n\t\t\t\t\t\t<a [routerLink]=\"item.url\" class=\"hub-breadcrumb__link\">\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<span class=\"hub-breadcrumb__text\">{{ item.label }}</span>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</li>\n\t\t}\n\t</ol>\n</nav>\n","import { NgModule } from '@angular/core';\nimport { HubBreadcrumbComponent } from './components/breadcrumb/breadcrumb.component';\nimport { HubBreadcrumbItemDirective } from './directives/breadcrumb-item.directive';\n\n@NgModule({\n\tdeclarations: [],\n\timports: [HubBreadcrumbComponent, HubBreadcrumbItemDirective],\n\texports: [HubBreadcrumbComponent, HubBreadcrumbItemDirective]\n})\nexport class HubBreadcrumbsModule {}\n","/*\n * Public API Surface of breadcrumbs\n */\nexport * from './lib/breadcrumbs.module';\nexport * from './lib/components/breadcrumb/breadcrumb.component';\nexport * from './lib/directives/breadcrumb-item.directive';\nexport * from './lib/services/breadcrumbs.service';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAMa,0BAA0B,CAAA;AACtC,IAAA,QAAQ,GAAG,MAAM,EAAC,WAAsC,EAAC;uGAD7C,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAA1B,0BAA0B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAA1B,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBAHtC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,QAAQ,EAAE;AACV,iBAAA;;;MCGY,qBAAqB,CAAA;AACjC,IAAA,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC;AACxB,IAAA,eAAe,GAAG,MAAM,CAAC,cAAc,CAAC;AAExC,IAAA,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CACtC,MAAM,CAAC,CAAC,KAAK,KAAK,KAAK,YAAY,aAAa,CAAC,EACjD,SAAS,CAAC,SAAS,CAAC,EACpB,GAAG,CAAC,MAAM,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAC5D;AAEO,IAAA,iBAAiB,CACxB,KAAqB,EACrB,MAAc,EAAE,EAChB,cAAgC,EAAE,EAAA;AAElC,QAAA,MAAM,QAAQ,GAAqB,KAAK,CAAC,QAAQ;AAEjD,QAAA,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;AAC1B,YAAA,OAAO,WAAW;QACnB;AAEA,QAAA,KAAK,MAAM,KAAK,IAAI,QAAQ,EAAE;AAC7B,YAAA,MAAM,aAAa,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG;;YAGxC,MAAM,QAAQ,GAAW;iBACvB,GAAG,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,IAAI;iBAC7B,IAAI,CAAC,GAAG,CAAC;AAEX,YAAA,MAAM,OAAO,GAAG,QAAQ,GAAG,CAAA,EAAG,GAAG,CAAA,CAAA,EAAI,QAAQ,CAAA,CAAE,GAAG,GAAG;;YAGrD,MAAM,iBAAiB,GAAG,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC;YAE1D,IAAI,iBAAiB,EAAE;gBACtB,MAAM,KAAK,GAAG,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC;gBAC5C,WAAW,CAAC,IAAI,CAAC;oBAChB,KAAK;AACL,oBAAA,GAAG,EAAE,OAAO;AACZ,oBAAA,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC;AACrB,iBAAA,CAAC;YACH;;YAGA,OAAO,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,OAAO,EAAE,WAAW,CAAC;QAC3D;AAEA,QAAA,OAAO,WAAW;IACnB;AAEQ,IAAA,oBAAoB,CAAC,KAAqB,EAAA;;AAEjD,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW;QACrC,OAAO,CAAC,EACP,WAAW;AACX,YAAA,WAAW,CAAC,IAAI;AAChB,YAAA,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAC9B;IACF;AAEQ,IAAA,kBAAkB,CAAC,KAAqB,EAAA;AAC/C,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI;AAChC,QAAA,IAAI,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;AAE9B,QAAA,IAAI,OAAO,KAAK,KAAK,UAAU,EAAE;AAChC,YAAA,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC;QACpB;AAEA,QAAA,IAAI,IAAI,CAAC,cAAc,CAAC,EAAE;AACzB,YAAA,KAAK,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAChE;AAEA,QAAA,OAAO,KAAK;IACb;IAEQ,qBAAqB,CAAC,QAAgB,EAAE,IAAS,EAAA;QACxD,OAAO,QAAQ,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC,KAAK,EAAE,GAAG,KAAI;AACtD,YAAA,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,KAAK;AAC1B,QAAA,CAAC,CAAC;IACH;uGA/EY,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAArB,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,cAFrB,MAAM,EAAA,CAAA;;2FAEN,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAHjC,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACX,oBAAA,UAAU,EAAE;AACZ,iBAAA;;;MCQY,sBAAsB,CAAA;AAClC,IAAA,eAAe,GAAG,MAAM,CAAC,qBAAqB,CAAC;IAEtC,YAAY,GAAG,YAAY,CAAC,0BAA0B,yDAAI,IAAI,EAAE,WAAW,EAAA,CAAG;AAEvF,IAAA,YAAY,GAAG,IAAI,CAAC,eAAe,CAAC,YAAY;uGALpC,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAGG,0BAA0B,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAAU,WAAW,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClBrF,g0BAyBA,EAAA,MAAA,EAAA,CAAA,wxFAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDjBsB,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAvC,SAAS,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,CAAA;;2FAOP,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBATlC,SAAS;+BACC,gBAAgB,EAAA,OAAA,EACjB,CAAC,SAAS,EAAE,UAAU,EAAE,gBAAgB,CAAC,EAAA,IAAA,EAG5C;AACL,wBAAA,KAAK,EAAE;AACP,qBAAA,EAAA,QAAA,EAAA,g0BAAA,EAAA,MAAA,EAAA,CAAA,wxFAAA,CAAA,EAAA;AAKoC,SAAA,CAAA,EAAA,cAAA,EAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,UAAA,CAAA,MAAA,0BAA0B,CAAA,EAAA,EAAA,GAAE,EAAE,IAAI,EAAE,WAAW,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;MET1E,oBAAoB,CAAA;uGAApB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,YAHtB,sBAAsB,EAAE,0BAA0B,CAAA,EAAA,OAAA,EAAA,CAClD,sBAAsB,EAAE,0BAA0B,CAAA,EAAA,CAAA;wGAEhD,oBAAoB,EAAA,CAAA;;2FAApB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBALhC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,YAAY,EAAE,EAAE;AAChB,oBAAA,OAAO,EAAE,CAAC,sBAAsB,EAAE,0BAA0B,CAAC;AAC7D,oBAAA,OAAO,EAAE,CAAC,sBAAsB,EAAE,0BAA0B;AAC5D,iBAAA;;;ACRD;;AAEG;;ACFH;;AAEG;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ng-hub-ui-breadcrumbs",
3
- "version": "1.0.3",
3
+ "version": "21.1.0",
4
4
  "description": "A flexible and reusable breadcrumb component for Angular applications that automatically generates breadcrumbs based on routing configuration",
5
5
  "keywords": [
6
6
  "angular",
@@ -32,13 +32,13 @@
32
32
  },
33
33
  "sideEffects": false,
34
34
  "module": "fesm2022/ng-hub-ui-breadcrumbs.mjs",
35
- "typings": "index.d.ts",
35
+ "typings": "types/ng-hub-ui-breadcrumbs.d.ts",
36
36
  "exports": {
37
37
  "./package.json": {
38
38
  "default": "./package.json"
39
39
  },
40
40
  ".": {
41
- "types": "./index.d.ts",
41
+ "types": "./types/ng-hub-ui-breadcrumbs.d.ts",
42
42
  "default": "./fesm2022/ng-hub-ui-breadcrumbs.mjs"
43
43
  }
44
44
  }
package/types/ng-hub-ui-breadcrumbs.d.ts ADDED
@@ -0,0 +1,42 @@
1
+ import * as i0 from '@angular/core';
2
+ import { TemplateRef } from '@angular/core';
3
+ import * as rxjs from 'rxjs';
4
+
5
+ interface BreadcrumbItem {
6
+ label: string;
7
+ url: string;
8
+ data: any;
9
+ }
10
+
11
+ declare class HubBreadcrumbComponent {
12
+ #private;
13
+ readonly itemTemplate: i0.Signal<TemplateRef<any> | undefined>;
14
+ breadcrumbs$: rxjs.Observable<BreadcrumbItem[]>;
15
+ static ɵfac: i0.ɵɵFactoryDeclaration<HubBreadcrumbComponent, never>;
16
+ static ɵcmp: i0.ɵɵComponentDeclaration<HubBreadcrumbComponent, "hub-breadcrumb", never, {}, {}, ["itemTemplate"], never, true, never>;
17
+ }
18
+
19
+ declare class HubBreadcrumbItemDirective {
20
+ template: TemplateRef<any>;
21
+ static ɵfac: i0.ɵɵFactoryDeclaration<HubBreadcrumbItemDirective, never>;
22
+ static ɵdir: i0.ɵɵDirectiveDeclaration<HubBreadcrumbItemDirective, "[hubBreadcrumbItem]", never, {}, {}, never, never, true, never>;
23
+ }
24
+
25
+ declare class HubBreadcrumbsModule {
26
+ static ɵfac: i0.ɵɵFactoryDeclaration<HubBreadcrumbsModule, never>;
27
+ static ɵmod: i0.ɵɵNgModuleDeclaration<HubBreadcrumbsModule, never, [typeof HubBreadcrumbComponent, typeof HubBreadcrumbItemDirective], [typeof HubBreadcrumbComponent, typeof HubBreadcrumbItemDirective]>;
28
+ static ɵinj: i0.ɵɵInjectorDeclaration<HubBreadcrumbsModule>;
29
+ }
30
+
31
+ declare class HubBreadcrumbsService {
32
+ #private;
33
+ breadcrumbs$: rxjs.Observable<BreadcrumbItem[]>;
34
+ private createBreadcrumbs;
35
+ private hasOwnBreadcrumbData;
36
+ private getBreadcrumbLabel;
37
+ private getResolvedBreadcrumb;
38
+ static ɵfac: i0.ɵɵFactoryDeclaration<HubBreadcrumbsService, never>;
39
+ static ɵprov: i0.ɵɵInjectableDeclaration<HubBreadcrumbsService>;
40
+ }
41
+
42
+ export { HubBreadcrumbComponent, HubBreadcrumbItemDirective, HubBreadcrumbsModule, HubBreadcrumbsService };
package/index.d.ts DELETED
@@ -1,5 +0,0 @@
1
- /**
2
- * Generated bundle index. Do not edit.
3
- */
4
- /// <amd-module name="ng-hub-ui-breadcrumbs" />
5
- export * from './public-api';
package/lib/components/hub-breadcrumbs/hub-breadcrumbs.component.d.ts DELETED
@@ -1,9 +0,0 @@
1
- import { HubBreadcrumbItemDirective } from '../../directives/hub-breadcrumb-item.directive';
2
- import * as i0 from "@angular/core";
3
- export declare class HubBreadcrumbsComponent {
4
- #private;
5
- itemTemplate?: HubBreadcrumbItemDirective;
6
- breadcrumbs$: import("rxjs").Observable<import("../../types/breadcrumb-item").BreadcrumbItem[]>;
7
- static ɵfac: i0.ɵɵFactoryDeclaration<HubBreadcrumbsComponent, never>;
8
- static ɵcmp: i0.ɵɵComponentDeclaration<HubBreadcrumbsComponent, "hub-breadcrumbs", never, {}, {}, ["itemTemplate"], never, true, never>;
9
- }
package/lib/directives/hub-breadcrumb-item.directive.d.ts DELETED
@@ -1,7 +0,0 @@
1
- import { TemplateRef } from '@angular/core';
2
- import * as i0 from "@angular/core";
3
- export declare class HubBreadcrumbItemDirective {
4
- template: TemplateRef<any>;
5
- static ɵfac: i0.ɵɵFactoryDeclaration<HubBreadcrumbItemDirective, never>;
6
- static ɵdir: i0.ɵɵDirectiveDeclaration<HubBreadcrumbItemDirective, "[hubBreadcrumbItem]", never, {}, {}, never, never, true, never>;
7
- }
package/lib/hub-breadcrumbs.module.d.ts DELETED
@@ -1,8 +0,0 @@
1
- import * as i0 from "@angular/core";
2
- import * as i1 from "./components/hub-breadcrumbs/hub-breadcrumbs.component";
3
- import * as i2 from "./directives/hub-breadcrumb-item.directive";
4
- export declare class HubBreadcrumbsModule {
5
- static ɵfac: i0.ɵɵFactoryDeclaration<HubBreadcrumbsModule, never>;
6
- static ɵmod: i0.ɵɵNgModuleDeclaration<HubBreadcrumbsModule, never, [typeof i1.HubBreadcrumbsComponent, typeof i2.HubBreadcrumbItemDirective], [typeof i1.HubBreadcrumbsComponent, typeof i2.HubBreadcrumbItemDirective]>;
7
- static ɵinj: i0.ɵɵInjectorDeclaration<HubBreadcrumbsModule>;
8
- }
package/lib/services/hub-breadcrumbs.service.d.ts DELETED
@@ -1,12 +0,0 @@
1
- import { BreadcrumbItem } from '../types/breadcrumb-item';
2
- import * as i0 from "@angular/core";
3
- export declare class HubBreadcrumbsService {
4
- #private;
5
- breadcrumbs$: import("rxjs").Observable<BreadcrumbItem[]>;
6
- private createBreadcrumbs;
7
- private hasOwnBreadcrumbData;
8
- private getBreadcrumbLabel;
9
- private getResolvedBreadcrumb;
10
- static ɵfac: i0.ɵɵFactoryDeclaration<HubBreadcrumbsService, never>;
11
- static ɵprov: i0.ɵɵInjectableDeclaration<HubBreadcrumbsService>;
12
- }
package/lib/types/breadcrumb-item.d.ts DELETED
@@ -1,5 +0,0 @@
1
- export interface BreadcrumbItem {
2
- label: string;
3
- url: string;
4
- data: any;
5
- }
package/lib/types/breadcrumb-template-context.d.ts DELETED
@@ -1,5 +0,0 @@
1
- import { BreadcrumbItem } from './breadcrumb-item';
2
- export interface BreadcrumbTemplateContext {
3
- $implicit: BreadcrumbItem;
4
- isLast: boolean;
5
- }
package/ng-hub-ui-breadcrumbs-1.0.3.tgz DELETED
Binary file
package/public-api.d.ts DELETED
@@ -1,4 +0,0 @@
1
- export * from './lib/hub-breadcrumbs.module';
2
- export * from './lib/services/hub-breadcrumbs.service';
3
- export * from './lib/components/hub-breadcrumbs/hub-breadcrumbs.component';
4
- export * from './lib/directives/hub-breadcrumb-item.directive';