ng-hub-ui-breadcrumbs 21.0.0 → 22.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +183 -71
- package/fesm2022/ng-hub-ui-breadcrumbs.mjs +44 -26
- package/fesm2022/ng-hub-ui-breadcrumbs.mjs.map +1 -1
- package/ng-hub-ui-breadcrumbs-22.1.1.tgz +0 -0
- package/package.json +5 -4
- package/src/lib/styles/mixins/_breadcrumb-theme.scss +110 -0
- package/types/ng-hub-ui-breadcrumbs.d.ts +22 -10
- package/src/lib/styles/breadcrumbs.scss +0 -93
package/README.md
CHANGED
|
@@ -1,42 +1,73 @@
|
|
|
1
1
|
# ng-hub-ui-breadcrumbs
|
|
2
2
|
|
|
3
|
+
[Español](./README.es.md) | **English**
|
|
4
|
+
|
|
3
5
|
|
|
4
6
|
|
|
5
7
|
|
|
6
8
|
A flexible and reusable breadcrumb component for Angular applications that automatically generates breadcrumbs entirely based on your routing configuration.
|
|
7
9
|
|
|
10
|
+
## Documentation and Live Examples
|
|
11
|
+
|
|
12
|
+
This package is part of [Hub UI](https://hubui.dev/), a collection of Angular component libraries for standalone apps.
|
|
13
|
+
|
|
14
|
+
- Docs: https://hubui.dev/breadcrumbs/overview/
|
|
15
|
+
- Live examples: https://hubui.dev/breadcrumbs/examples/
|
|
16
|
+
- Hub UI: https://hubui.dev/
|
|
17
|
+
|
|
8
18
|
## 🧩 Library Family `ng-hub-ui`
|
|
9
19
|
|
|
10
20
|
This library is part of the **ng-hub-ui** ecosystem:
|
|
11
21
|
|
|
12
|
-
- [**ng-hub-ui-accordion**](https://www.npmjs.com/package/ng-hub-ui-accordion)
|
|
22
|
+
- [**ng-hub-ui-accordion**](https://www.npmjs.com/package/ng-hub-ui-accordion) (deprecated — use ng-hub-ui-panels)
|
|
23
|
+
- [**ng-hub-ui-action-sheet**](https://www.npmjs.com/package/ng-hub-ui-action-sheet)
|
|
13
24
|
- [**ng-hub-ui-avatar**](https://www.npmjs.com/package/ng-hub-ui-avatar)
|
|
14
25
|
- [**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)
|
|
26
|
+
- [**ng-hub-ui-breadcrumbs**](https://www.npmjs.com/package/ng-hub-ui-breadcrumbs) ← You are here
|
|
16
27
|
- [**ng-hub-ui-calendar**](https://www.npmjs.com/package/ng-hub-ui-calendar)
|
|
28
|
+
- [**ng-hub-ui-dropdown**](https://www.npmjs.com/package/ng-hub-ui-dropdown)
|
|
29
|
+
- [**ng-hub-ui-ds**](https://www.npmjs.com/package/ng-hub-ui-ds)
|
|
30
|
+
- [**ng-hub-ui-forms**](https://www.npmjs.com/package/ng-hub-ui-forms)
|
|
31
|
+
- [**ng-hub-ui-history**](https://www.npmjs.com/package/ng-hub-ui-history)
|
|
32
|
+
- [**ng-hub-ui-milestones**](https://www.npmjs.com/package/ng-hub-ui-milestones)
|
|
17
33
|
- [**ng-hub-ui-modal**](https://www.npmjs.com/package/ng-hub-ui-modal)
|
|
34
|
+
- [**ng-hub-ui-nav**](https://www.npmjs.com/package/ng-hub-ui-nav)
|
|
18
35
|
- [**ng-hub-ui-paginable**](https://www.npmjs.com/package/ng-hub-ui-paginable)
|
|
36
|
+
- [**ng-hub-ui-panels**](https://www.npmjs.com/package/ng-hub-ui-panels)
|
|
19
37
|
- [**ng-hub-ui-portal**](https://www.npmjs.com/package/ng-hub-ui-portal)
|
|
38
|
+
- [**ng-hub-ui-skeleton**](https://www.npmjs.com/package/ng-hub-ui-skeleton)
|
|
39
|
+
- [**ng-hub-ui-sortable**](https://www.npmjs.com/package/ng-hub-ui-sortable)
|
|
20
40
|
- [**ng-hub-ui-stepper**](https://www.npmjs.com/package/ng-hub-ui-stepper)
|
|
21
41
|
- [**ng-hub-ui-utils**](https://www.npmjs.com/package/ng-hub-ui-utils)
|
|
22
42
|
|
|
23
43
|
## Table of Contents
|
|
24
44
|
|
|
45
|
+
- [Description](#description)
|
|
25
46
|
- [Features](#features)
|
|
26
47
|
- [Installation](#installation)
|
|
48
|
+
- [Quick Start](#quick-start)
|
|
27
49
|
- [Usage](#usage)
|
|
28
|
-
- [Examples](#examples)
|
|
29
50
|
- [API Reference](#api-reference)
|
|
30
51
|
- [Styling](#styling)
|
|
31
|
-
- [
|
|
52
|
+
- [Changelog](#changelog)
|
|
53
|
+
- [Contributing](#contributing)
|
|
54
|
+
- [Support](#support)
|
|
55
|
+
- [License](#license)
|
|
56
|
+
|
|
57
|
+
## Description
|
|
58
|
+
|
|
59
|
+
`ng-hub-ui-breadcrumbs` is a lightweight, fully reactive breadcrumb component for Angular standalone applications. Instead of manually maintaining breadcrumb trails, the library subscribes to the Angular `Router` and rebuilds the breadcrumb list automatically on every navigation, reading a `breadcrumb` entry from each route's `data` configuration.
|
|
60
|
+
|
|
61
|
+
It supports static labels, dynamic labels resolved from route data (via functions or `{key}` interpolation), lazy-loaded routes, and full template customization through a structural directive. Styling is handled entirely through CSS custom properties, so the component adapts to any design system or Bootstrap theme without overriding internal markup.
|
|
32
62
|
|
|
33
63
|
## Features
|
|
34
64
|
|
|
35
65
|
- **Automatic Breadcrumb Generation**: Automatically builds breadcrumbs from your Angular `Routes` configuration.
|
|
36
66
|
- **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
|
|
38
|
-
- **RTL Support**:
|
|
39
|
-
- **Lazy Loading Compatible**: Works seamlessly with lazy-loaded
|
|
67
|
+
- **Custom Templates**: Full control over how each breadcrumb item is rendered using a structural directive.
|
|
68
|
+
- **RTL Support**: Ships a flipped divider token (`--hub-breadcrumb-divider-flipped`) for Right-to-Left layouts.
|
|
69
|
+
- **Lazy Loading Compatible**: Works seamlessly with lazy-loaded routes.
|
|
70
|
+
- **Zero Manual Style Import**: Styles are bundled within the component — no separate SCSS import is required.
|
|
40
71
|
|
|
41
72
|
## Installation
|
|
42
73
|
|
|
@@ -44,18 +75,57 @@ This library is part of the **ng-hub-ui** ecosystem:
|
|
|
44
75
|
npm install ng-hub-ui-breadcrumbs
|
|
45
76
|
```
|
|
46
77
|
|
|
78
|
+
## Quick Start
|
|
79
|
+
|
|
80
|
+
Get up and running in under five minutes.
|
|
81
|
+
|
|
82
|
+
### 1. Install
|
|
83
|
+
|
|
84
|
+
```bash
|
|
85
|
+
npm install ng-hub-ui-breadcrumbs
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### 2. Import the component
|
|
89
|
+
|
|
90
|
+
```typescript
|
|
91
|
+
import { HubBreadcrumbComponent } from 'ng-hub-ui-breadcrumbs';
|
|
92
|
+
|
|
93
|
+
@Component({
|
|
94
|
+
// ...
|
|
95
|
+
imports: [HubBreadcrumbComponent]
|
|
96
|
+
})
|
|
97
|
+
export class AppComponent {}
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### 3. Add breadcrumb data to your routes
|
|
101
|
+
|
|
102
|
+
```typescript
|
|
103
|
+
const routes: Routes = [
|
|
104
|
+
{ path: '', data: { breadcrumb: 'Home' } },
|
|
105
|
+
{ path: 'products', data: { breadcrumb: 'Products' } }
|
|
106
|
+
];
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### 4. Drop the component in your layout
|
|
110
|
+
|
|
111
|
+
```html
|
|
112
|
+
<hub-breadcrumb></hub-breadcrumb>
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
**💡 That's it!** The breadcrumb trail now updates automatically as the user navigates.
|
|
116
|
+
|
|
47
117
|
## Usage
|
|
48
118
|
|
|
49
119
|
### 1. Import the Component
|
|
50
120
|
|
|
51
|
-
You can import the `
|
|
121
|
+
You can import the `HubBreadcrumbComponent` directly in your standalone component, or use `HubBreadcrumbsModule` in a module-based setup.
|
|
52
122
|
|
|
53
123
|
```typescript
|
|
54
|
-
import {
|
|
124
|
+
import { HubBreadcrumbComponent } from 'ng-hub-ui-breadcrumbs';
|
|
55
125
|
|
|
56
126
|
@Component({
|
|
57
127
|
// ...
|
|
58
|
-
imports: [
|
|
128
|
+
imports: [HubBreadcrumbComponent]
|
|
59
129
|
})
|
|
60
130
|
export class AppComponent {}
|
|
61
131
|
```
|
|
@@ -65,14 +135,13 @@ export class AppComponent {}
|
|
|
65
135
|
Place the component in your application's main layout or wherever you want breadcrumbs to appear.
|
|
66
136
|
|
|
67
137
|
```html
|
|
68
|
-
<hub-
|
|
138
|
+
<hub-breadcrumb></hub-breadcrumb>
|
|
69
139
|
```
|
|
70
140
|
|
|
71
141
|
### 3. Configure Routes
|
|
72
142
|
|
|
73
143
|
The most critical part is adding `data: { breadcrumb: '...' }` to your routes.
|
|
74
144
|
|
|
75
|
-
````typescript
|
|
76
145
|
```typescript
|
|
77
146
|
const routes: Routes = [
|
|
78
147
|
{
|
|
@@ -87,23 +156,23 @@ const routes: Routes = [
|
|
|
87
156
|
]
|
|
88
157
|
}
|
|
89
158
|
];
|
|
90
|
-
|
|
159
|
+
```
|
|
91
160
|
|
|
92
161
|
### 4. Working with Lazy Loading
|
|
93
162
|
|
|
94
|
-
For lazy-loaded
|
|
163
|
+
For lazy-loaded routes, configure the parent route with breadcrumb data:
|
|
95
164
|
|
|
96
165
|
```typescript
|
|
97
|
-
// app
|
|
166
|
+
// app.routes.ts
|
|
98
167
|
const routes: Routes = [
|
|
99
168
|
{
|
|
100
169
|
path: 'admin',
|
|
101
170
|
data: { breadcrumb: 'Administration' },
|
|
102
|
-
loadChildren: () => import('./admin/admin.
|
|
171
|
+
loadChildren: () => import('./admin/admin.routes').then((m) => m.ADMIN_ROUTES)
|
|
103
172
|
}
|
|
104
173
|
];
|
|
105
174
|
|
|
106
|
-
// admin
|
|
175
|
+
// admin.routes.ts
|
|
107
176
|
const adminRoutes: Routes = [
|
|
108
177
|
{
|
|
109
178
|
path: 'users',
|
|
@@ -114,11 +183,9 @@ const adminRoutes: Routes = [
|
|
|
114
183
|
|
|
115
184
|
This will generate breadcrumbs like: Home > Administration > Users
|
|
116
185
|
|
|
117
|
-
## Examples
|
|
118
|
-
|
|
119
186
|
### Dynamic Labels with Functions
|
|
120
187
|
|
|
121
|
-
You can use a function to generate the breadcrumb label dynamically based on route data.
|
|
188
|
+
You can use a function to generate the breadcrumb label dynamically based on route data. The function receives the resolved route `data`.
|
|
122
189
|
|
|
123
190
|
```typescript
|
|
124
191
|
const routes: Routes = [
|
|
@@ -152,22 +219,22 @@ const routes: Routes = [
|
|
|
152
219
|
|
|
153
220
|
### Custom Icons
|
|
154
221
|
|
|
155
|
-
You can attach arbitrary data (like icons) to your route config and use it in a custom template.
|
|
222
|
+
You can attach arbitrary data (like icons) to your route config and use it in a custom template via the `hubBreadcrumbItem` directive.
|
|
156
223
|
|
|
157
224
|
```typescript
|
|
158
225
|
// Route Configuration
|
|
159
226
|
{
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
227
|
+
path: 'settings',
|
|
228
|
+
data: {
|
|
229
|
+
breadcrumb: 'Settings',
|
|
230
|
+
icon: 'fa fa-cog' // Custom data property
|
|
231
|
+
}
|
|
165
232
|
}
|
|
166
233
|
```
|
|
167
234
|
|
|
168
235
|
```html
|
|
169
236
|
<!-- Custom Template Implementation -->
|
|
170
|
-
<hub-
|
|
237
|
+
<hub-breadcrumb>
|
|
171
238
|
<ng-template hubBreadcrumbItem let-item let-isLast="isLast">
|
|
172
239
|
<!-- 'item.data' contains the entire route data object -->
|
|
173
240
|
@if (item.data.icon) {
|
|
@@ -175,7 +242,7 @@ You can attach arbitrary data (like icons) to your route config and use it in a
|
|
|
175
242
|
}
|
|
176
243
|
<a [routerLink]="item.url">{{ item.label }}</a>
|
|
177
244
|
</ng-template>
|
|
178
|
-
</hub-
|
|
245
|
+
</hub-breadcrumb>
|
|
179
246
|
```
|
|
180
247
|
|
|
181
248
|
### Custom Template & Separators
|
|
@@ -183,7 +250,7 @@ You can attach arbitrary data (like icons) to your route config and use it in a
|
|
|
183
250
|
Fully customize the structure, including separators/dividers.
|
|
184
251
|
|
|
185
252
|
```html
|
|
186
|
-
<hub-
|
|
253
|
+
<hub-breadcrumb>
|
|
187
254
|
<ng-template hubBreadcrumbItem let-item let-isLast="isLast">
|
|
188
255
|
<span class="my-breadcrumb-item">
|
|
189
256
|
<a [routerLink]="item.url">{{ item.label }}</a>
|
|
@@ -193,18 +260,34 @@ Fully customize the structure, including separators/dividers.
|
|
|
193
260
|
<span class="separator"> / </span>
|
|
194
261
|
}
|
|
195
262
|
</ng-template>
|
|
196
|
-
</hub-
|
|
263
|
+
</hub-breadcrumb>
|
|
197
264
|
```
|
|
198
265
|
|
|
199
266
|
## API Reference
|
|
200
267
|
|
|
201
|
-
###
|
|
268
|
+
### HubBreadcrumbComponent
|
|
269
|
+
|
|
270
|
+
The main container component. It reads the breadcrumb trail directly from the Angular `Router` and exposes a single optional input for theming the links.
|
|
271
|
+
|
|
272
|
+
| Selector | Host class |
|
|
273
|
+
| ---------------- | ----------------- |
|
|
274
|
+
| `hub-breadcrumb` | `.hub-breadcrumb` |
|
|
202
275
|
|
|
203
|
-
|
|
276
|
+
#### Inputs
|
|
204
277
|
|
|
205
|
-
|
|
|
206
|
-
|
|
|
207
|
-
| `
|
|
278
|
+
| Input | Type | Default | Description |
|
|
279
|
+
| --------- | -------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
280
|
+
| `variant` | `string` | `undefined` | Selects a **semantic accent** for the breadcrumb links and their hover. The built-in values (`primary`, `success`, `danger`, `warning`, `info`) map to the exact design-system tints; **any other string is also accepted** and resolves through `--hub-sys-color-<variant>`. The current (last) item always stays muted. When omitted, links use the standard link colour (no visual change). |
|
|
281
|
+
|
|
282
|
+
```html
|
|
283
|
+
<!-- Built-in semantic accent -->
|
|
284
|
+
<hub-breadcrumb variant="success"></hub-breadcrumb>
|
|
285
|
+
|
|
286
|
+
<!-- Custom accent — resolves to var(--hub-sys-color-brand) -->
|
|
287
|
+
<hub-breadcrumb variant="brand"></hub-breadcrumb>
|
|
288
|
+
```
|
|
289
|
+
|
|
290
|
+
It projects a single optional content template via the `hubBreadcrumbItem` directive (read through `contentChild`). When no template is provided, the component renders a default breadcrumb list.
|
|
208
291
|
|
|
209
292
|
### HubBreadcrumbItemDirective
|
|
210
293
|
|
|
@@ -214,39 +297,45 @@ A structural directive used to define a custom template for breadcrumb items.
|
|
|
214
297
|
| --------------------- | --------------------------- |
|
|
215
298
|
| `[hubBreadcrumbItem]` | `BreadcrumbTemplateContext` |
|
|
216
299
|
|
|
300
|
+
### HubBreadcrumbsService
|
|
301
|
+
|
|
302
|
+
An injectable (`providedIn: 'root'`) service that exposes the reactive breadcrumb stream. The component uses it internally; you can also inject it directly when you need the breadcrumb data elsewhere.
|
|
303
|
+
|
|
304
|
+
| Member | Type | Description |
|
|
305
|
+
| --------------- | ----------------------------- | ----------------------------------------------------------------------------- |
|
|
306
|
+
| `breadcrumbs$` | `Observable<BreadcrumbItem[]>` | Emits the current breadcrumb trail on every `NavigationEnd` (and on startup). |
|
|
307
|
+
|
|
308
|
+
### HubBreadcrumbsModule
|
|
309
|
+
|
|
310
|
+
An optional `NgModule` that imports and exports `HubBreadcrumbComponent` and `HubBreadcrumbItemDirective` for module-based applications.
|
|
311
|
+
|
|
217
312
|
### Interfaces
|
|
218
313
|
|
|
219
314
|
#### BreadcrumbItem
|
|
220
315
|
|
|
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). |
|
|
316
|
+
| Property | Type | Description |
|
|
317
|
+
| -------- | -------- | -------------------------------------------------------- |
|
|
318
|
+
| `label` | `string` | The resolved text to display for the breadcrumb. |
|
|
319
|
+
| `url` | `string` | The full URL path to navigate to. |
|
|
320
|
+
| `data` | `any` | The original route data object (useful for icons, etc.). |
|
|
226
321
|
|
|
227
322
|
#### BreadcrumbTemplateContext
|
|
228
323
|
|
|
229
|
-
| Property | Type | Description
|
|
230
|
-
| ----------- | ---------------- |
|
|
231
|
-
| `$implicit` | `BreadcrumbItem` | The current breadcrumb item object.
|
|
232
|
-
| `isLast` | `boolean` |
|
|
324
|
+
| Property | Type | Description |
|
|
325
|
+
| ----------- | ---------------- | -------------------------------------------------------------- |
|
|
326
|
+
| `$implicit` | `BreadcrumbItem` | The current breadcrumb item object (bound via `let-item`). |
|
|
327
|
+
| `isLast` | `boolean` | `true` if this item is the last one in the list (current page). |
|
|
233
328
|
|
|
234
329
|
## Styling
|
|
235
330
|
|
|
236
|
-
`ng-hub-ui-breadcrumbs` is fully style-configurable through CSS custom properties.
|
|
331
|
+
`ng-hub-ui-breadcrumbs` is fully style-configurable through CSS custom properties. Styles are bundled within the component, so no manual import is required.
|
|
237
332
|
|
|
238
333
|
For a complete and up-to-date token catalog, see [CSS Variables Reference](./docs/css-variables-reference.md).
|
|
239
334
|
|
|
240
|
-
### Import styles
|
|
241
|
-
|
|
242
|
-
```scss
|
|
243
|
-
@use 'ng-hub-ui-breadcrumbs/src/lib/styles/breadcrumbs.scss';
|
|
244
|
-
```
|
|
245
|
-
|
|
246
335
|
### Quick customization example (framework-agnostic)
|
|
247
336
|
|
|
248
337
|
```scss
|
|
249
|
-
.hub-
|
|
338
|
+
.hub-breadcrumb__list {
|
|
250
339
|
--hub-breadcrumb-bg: #f8f9fa;
|
|
251
340
|
--hub-breadcrumb-divider: '→';
|
|
252
341
|
--hub-breadcrumb-link-color: #0d6efd;
|
|
@@ -254,10 +343,20 @@ For a complete and up-to-date token catalog, see [CSS Variables Reference](./doc
|
|
|
254
343
|
}
|
|
255
344
|
```
|
|
256
345
|
|
|
346
|
+
### Semantic accent token
|
|
347
|
+
|
|
348
|
+
The link colour follows the `--hub-breadcrumb-accent` token (which itself defaults to the standard link colour). Setting a `variant` re-bases this token; you can also override it directly:
|
|
349
|
+
|
|
350
|
+
```scss
|
|
351
|
+
.hub-breadcrumb {
|
|
352
|
+
--hub-breadcrumb-accent: var(--hub-sys-color-info);
|
|
353
|
+
}
|
|
354
|
+
```
|
|
355
|
+
|
|
257
356
|
### Bootstrap integration (optional)
|
|
258
357
|
|
|
259
358
|
```scss
|
|
260
|
-
.hub-
|
|
359
|
+
.hub-breadcrumb__list {
|
|
261
360
|
--hub-breadcrumb-bg: var(--bs-light);
|
|
262
361
|
--hub-breadcrumb-link-color: var(--bs-primary);
|
|
263
362
|
--hub-breadcrumb-link-hover-color: var(--bs-primary-text-emphasis);
|
|
@@ -265,6 +364,29 @@ For a complete and up-to-date token catalog, see [CSS Variables Reference](./doc
|
|
|
265
364
|
}
|
|
266
365
|
```
|
|
267
366
|
|
|
367
|
+
### Theming with the `hub-breadcrumb-theme()` Sass mixin
|
|
368
|
+
|
|
369
|
+
For a one-call theme that sets surface, spacing, divider, current-item colour, links and accent, use the `hub-breadcrumb-theme()` mixin. Every parameter is optional and defaults to `null`, so only the ones you pass are emitted as `--hub-breadcrumb-*` overrides. It is token-based with no Bootstrap dependency.
|
|
370
|
+
|
|
371
|
+
```scss
|
|
372
|
+
@use 'ng-hub-ui-breadcrumbs/styles/mixins/breadcrumb-theme' as *;
|
|
373
|
+
|
|
374
|
+
.docs-breadcrumb {
|
|
375
|
+
@include hub-breadcrumb-theme(
|
|
376
|
+
$bg: #f8fafc,
|
|
377
|
+
$padding-x: 0.75rem,
|
|
378
|
+
$divider: "'/'", // keep the inner quotes — it feeds CSS `content`
|
|
379
|
+
$accent: var(--hub-sys-color-info)
|
|
380
|
+
);
|
|
381
|
+
}
|
|
382
|
+
```
|
|
383
|
+
|
|
384
|
+
## Changelog
|
|
385
|
+
|
|
386
|
+
All notable changes are documented in the [CHANGELOG.md](./CHANGELOG.md). For breaking changes, see [BREAKING_CHANGES.md](./BREAKING_CHANGES.md).
|
|
387
|
+
|
|
388
|
+
The latest release is **v21.1.0**, which renamed the selector from `hub-breadcrumbs` to `hub-breadcrumb` and bundled the component styles (manual style imports are no longer required).
|
|
389
|
+
|
|
268
390
|
## Contributing
|
|
269
391
|
|
|
270
392
|
We appreciate your interest in contributing to Hub Breadcrumb! Here's how you can help:
|
|
@@ -285,25 +407,11 @@ We appreciate your interest in contributing to Hub Breadcrumb! Here's how you ca
|
|
|
285
407
|
```
|
|
286
408
|
|
|
287
409
|
3. **Start the development server**
|
|
410
|
+
|
|
288
411
|
```bash
|
|
289
412
|
npm start
|
|
290
413
|
```
|
|
291
414
|
|
|
292
|
-
### Testing
|
|
293
|
-
|
|
294
|
-
Run the test suite:
|
|
295
|
-
|
|
296
|
-
```bash
|
|
297
|
-
# Unit tests
|
|
298
|
-
npm run test
|
|
299
|
-
|
|
300
|
-
# E2E tests
|
|
301
|
-
npm run e2e
|
|
302
|
-
|
|
303
|
-
# Test coverage
|
|
304
|
-
npm run test:coverage
|
|
305
|
-
```
|
|
306
|
-
|
|
307
415
|
### Commit Guidelines
|
|
308
416
|
|
|
309
417
|
We follow [Conventional Commits](https://www.conventionalcommits.org/):
|
|
@@ -311,7 +419,7 @@ We follow [Conventional Commits](https://www.conventionalcommits.org/):
|
|
|
311
419
|
- `feat:` New features
|
|
312
420
|
- `fix:` Bug fixes
|
|
313
421
|
- `docs:` Documentation changes
|
|
314
|
-
- `style:` Code style changes (formatting, etc)
|
|
422
|
+
- `style:` Code style changes (formatting, etc.)
|
|
315
423
|
- `refactor:` Code refactors
|
|
316
424
|
- `test:` Adding or updating tests
|
|
317
425
|
- `chore:` Maintenance tasks
|
|
@@ -322,7 +430,7 @@ Example:
|
|
|
322
430
|
git commit -m "feat: add custom divider support"
|
|
323
431
|
```
|
|
324
432
|
|
|
325
|
-
## Support
|
|
433
|
+
## Support
|
|
326
434
|
|
|
327
435
|
If you find this project helpful and would like to support its development, you can buy me a coffee:
|
|
328
436
|
|
|
@@ -330,8 +438,12 @@ If you find this project helpful and would like to support its development, you
|
|
|
330
438
|
|
|
331
439
|
Your support is greatly appreciated and helps maintain and improve this project!
|
|
332
440
|
|
|
441
|
+
For bugs and feature requests, please open an issue at https://github.com/carlos-morcillo/ng-hub-ui-breadcrumbs/issues.
|
|
442
|
+
|
|
443
|
+
## License
|
|
444
|
+
|
|
333
445
|
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
334
446
|
|
|
335
447
|
---
|
|
336
448
|
|
|
337
|
-
Made with ❤️ by [Carlos Morcillo Fernández]
|
|
449
|
+
Made with ❤️ by [Carlos Morcillo Fernández](https://www.carlosmorcillo.com)
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, TemplateRef, Directive, Injectable,
|
|
2
|
+
import { inject, TemplateRef, Directive, Injectable, contentChild, input, computed, Component, NgModule } from '@angular/core';
|
|
3
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
8
|
template = inject((TemplateRef));
|
|
9
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
10
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
9
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubBreadcrumbItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
10
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: HubBreadcrumbItemDirective, isStandalone: true, selector: "[hubBreadcrumbItem]", ngImport: i0 });
|
|
11
11
|
}
|
|
12
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
12
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubBreadcrumbItemDirective, decorators: [{
|
|
13
13
|
type: Directive,
|
|
14
14
|
args: [{
|
|
15
15
|
selector: '[hubBreadcrumbItem]'
|
|
@@ -70,44 +70,62 @@ class HubBreadcrumbsService {
|
|
|
70
70
|
return data[key] || match;
|
|
71
71
|
});
|
|
72
72
|
}
|
|
73
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
74
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
73
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubBreadcrumbsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
74
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubBreadcrumbsService, providedIn: 'root' });
|
|
75
75
|
}
|
|
76
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
76
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubBreadcrumbsService, decorators: [{
|
|
77
77
|
type: Injectable,
|
|
78
78
|
args: [{
|
|
79
79
|
providedIn: 'root'
|
|
80
80
|
}]
|
|
81
81
|
}] });
|
|
82
82
|
|
|
83
|
-
|
|
83
|
+
/** Variants with exact design-system token coverage via the SCSS `@each` loop. */
|
|
84
|
+
const BUILT_IN_VARIANTS = new Set(['primary', 'success', 'danger', 'warning', 'info']);
|
|
85
|
+
class HubBreadcrumbComponent {
|
|
84
86
|
#breadcrumbsSvc = inject(HubBreadcrumbsService);
|
|
85
|
-
itemTemplate;
|
|
87
|
+
itemTemplate = contentChild(HubBreadcrumbItemDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
86
88
|
breadcrumbs$ = this.#breadcrumbsSvc.breadcrumbs$;
|
|
87
|
-
|
|
88
|
-
|
|
89
|
+
/**
|
|
90
|
+
* Semantic accent for the breadcrumb links: `'primary'` · `'success'` ·
|
|
91
|
+
* `'danger'` · `'warning'` · `'info'`, or any custom string (read as
|
|
92
|
+
* `--hub-sys-color-<variant>`). Re-bases `--hub-breadcrumb-accent`; the
|
|
93
|
+
* current (last) item stays muted. Defaults to the standard link colour.
|
|
94
|
+
*/
|
|
95
|
+
variant = input(/* @ts-ignore */
|
|
96
|
+
...(ngDevMode ? [undefined, { debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
97
|
+
/**
|
|
98
|
+
* Inline accent for custom (non-built-in) variants — the built-in five are
|
|
99
|
+
* resolved by the SCSS `@each` loop, so this returns `null` for them.
|
|
100
|
+
*/
|
|
101
|
+
customAccent = computed(() => {
|
|
102
|
+
const v = this.variant();
|
|
103
|
+
return v && !BUILT_IN_VARIANTS.has(v) ? `var(--hub-sys-color-${v})` : null;
|
|
104
|
+
}, /* @ts-ignore */
|
|
105
|
+
...(ngDevMode ? [{ debugName: "customAccent" }] : /* istanbul ignore next */ []));
|
|
106
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
107
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubBreadcrumbComponent, isStandalone: true, selector: "hub-breadcrumb", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant() ?? null", "style.--hub-breadcrumb-accent": "customAccent()" }, 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-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, .25rem);--hub-breadcrumb-item-active-color: var(--hub-sys-text-muted, #6c757d);--hub-breadcrumb-accent: var(--hub-sys-link-color, #0d6efd);--hub-breadcrumb-link-color: var(--hub-breadcrumb-accent);--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, .25rem))}.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, .25rem));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, \">\"))}:host([data-variant=primary]),.hub-breadcrumb[data-variant=primary]{--hub-breadcrumb-accent: var(--hub-sys-color-primary);--hub-breadcrumb-link-hover-color: var(--hub-sys-color-primary-emphasis)}:host([data-variant=success]),.hub-breadcrumb[data-variant=success]{--hub-breadcrumb-accent: var(--hub-sys-color-success);--hub-breadcrumb-link-hover-color: var(--hub-sys-color-success-emphasis)}:host([data-variant=danger]),.hub-breadcrumb[data-variant=danger]{--hub-breadcrumb-accent: var(--hub-sys-color-danger);--hub-breadcrumb-link-hover-color: var(--hub-sys-color-danger-emphasis)}:host([data-variant=warning]),.hub-breadcrumb[data-variant=warning]{--hub-breadcrumb-accent: var(--hub-sys-color-warning);--hub-breadcrumb-link-hover-color: var(--hub-sys-color-warning-emphasis)}:host([data-variant=info]),.hub-breadcrumb[data-variant=info]{--hub-breadcrumb-accent: var(--hub-sys-color-info);--hub-breadcrumb-link-hover-color: var(--hub-sys-color-info-emphasis)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
|
|
89
108
|
}
|
|
90
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
109
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubBreadcrumbComponent, decorators: [{
|
|
91
110
|
type: Component,
|
|
92
|
-
args: [{ selector: 'hub-
|
|
93
|
-
class: 'hub-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
}] } });
|
|
111
|
+
args: [{ selector: 'hub-breadcrumb', imports: [AsyncPipe, RouterLink, NgTemplateOutlet], host: {
|
|
112
|
+
class: 'hub-breadcrumb',
|
|
113
|
+
'[attr.data-variant]': 'variant() ?? null',
|
|
114
|
+
'[style.--hub-breadcrumb-accent]': 'customAccent()'
|
|
115
|
+
}, 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-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, .25rem);--hub-breadcrumb-item-active-color: var(--hub-sys-text-muted, #6c757d);--hub-breadcrumb-accent: var(--hub-sys-link-color, #0d6efd);--hub-breadcrumb-link-color: var(--hub-breadcrumb-accent);--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, .25rem))}.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, .25rem));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, \">\"))}:host([data-variant=primary]),.hub-breadcrumb[data-variant=primary]{--hub-breadcrumb-accent: var(--hub-sys-color-primary);--hub-breadcrumb-link-hover-color: var(--hub-sys-color-primary-emphasis)}:host([data-variant=success]),.hub-breadcrumb[data-variant=success]{--hub-breadcrumb-accent: var(--hub-sys-color-success);--hub-breadcrumb-link-hover-color: var(--hub-sys-color-success-emphasis)}:host([data-variant=danger]),.hub-breadcrumb[data-variant=danger]{--hub-breadcrumb-accent: var(--hub-sys-color-danger);--hub-breadcrumb-link-hover-color: var(--hub-sys-color-danger-emphasis)}:host([data-variant=warning]),.hub-breadcrumb[data-variant=warning]{--hub-breadcrumb-accent: var(--hub-sys-color-warning);--hub-breadcrumb-link-hover-color: var(--hub-sys-color-warning-emphasis)}:host([data-variant=info]),.hub-breadcrumb[data-variant=info]{--hub-breadcrumb-accent: var(--hub-sys-color-info);--hub-breadcrumb-link-hover-color: var(--hub-sys-color-info-emphasis)}\n"] }]
|
|
116
|
+
}], propDecorators: { itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubBreadcrumbItemDirective), { ...{ read: TemplateRef }, isSignal: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
99
117
|
|
|
100
118
|
class HubBreadcrumbsModule {
|
|
101
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
102
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
103
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
119
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
120
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: HubBreadcrumbsModule, imports: [HubBreadcrumbComponent, HubBreadcrumbItemDirective], exports: [HubBreadcrumbComponent, HubBreadcrumbItemDirective] });
|
|
121
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubBreadcrumbsModule });
|
|
104
122
|
}
|
|
105
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
123
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubBreadcrumbsModule, decorators: [{
|
|
106
124
|
type: NgModule,
|
|
107
125
|
args: [{
|
|
108
126
|
declarations: [],
|
|
109
|
-
imports: [
|
|
110
|
-
exports: [
|
|
127
|
+
imports: [HubBreadcrumbComponent, HubBreadcrumbItemDirective],
|
|
128
|
+
exports: [HubBreadcrumbComponent, HubBreadcrumbItemDirective]
|
|
111
129
|
}]
|
|
112
130
|
}] });
|
|
113
131
|
|
|
@@ -119,5 +137,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
119
137
|
* Generated bundle index. Do not edit.
|
|
120
138
|
*/
|
|
121
139
|
|
|
122
|
-
export {
|
|
140
|
+
export { HubBreadcrumbComponent, HubBreadcrumbItemDirective, HubBreadcrumbsModule, HubBreadcrumbsService };
|
|
123
141
|
//# sourceMappingURL=ng-hub-ui-breadcrumbs.mjs.map
|
|
@@ -1 +1 @@
|
|
|
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/breadcrumbs/breadcrumbs.component.ts","../../../projects/breadcrumbs/src/lib/components/breadcrumbs/breadcrumbs.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 } 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-breadcrumbs',\n\timports: [AsyncPipe, RouterLink, NgTemplateOutlet],\n\ttemplateUrl: './breadcrumbs.component.html',\n\thost: {\n\t\tclass: 'hub-breadcrumbs'\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-breadcrumbs__nav\">\n\t<ol class=\"hub-breadcrumbs__list\">\n\t\t@for (item of breadcrumbs$ | async; track item; let last = $last) {\n\t\t\t<li\n\t\t\t\tclass=\"hub-breadcrumbs__item\"\n\t\t\t\t[class.hub-breadcrumbs__item--active]=\"last\"\n\t\t\t>\n\t\t\t\t@if (itemTemplate) {\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"itemTemplate.template\"\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\n\t\t\t\t\t\t\t[routerLink]=\"item.url\"\n\t\t\t\t\t\t\tclass=\"hub-breadcrumbs__link\"\n\t\t\t\t\t\t>\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-breadcrumbs__text\">{{\n\t\t\t\t\t\t\titem.label\n\t\t\t\t\t\t}}</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 { HubBreadcrumbsComponent } from './components/breadcrumbs/breadcrumbs.component';\nimport { HubBreadcrumbItemDirective } from './directives/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/breadcrumbs.module';\nexport * from './lib/components/breadcrumbs/breadcrumbs.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;;;MCOY,uBAAuB,CAAA;AACnC,IAAA,eAAe,GAAG,MAAM,CAAC,qBAAqB,CAAC;AAG/C,IAAA,YAAY;AAEZ,IAAA,YAAY,GAAG,IAAI,CAAC,eAAe,CAAC,YAAY;uGANpC,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAGrB,0BAA0B,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjBzC,66BAiCA,4CDzBsB,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;;2FAMP,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBARnC,SAAS;+BACC,iBAAiB,EAAA,OAAA,EAClB,CAAC,SAAS,EAAE,UAAU,EAAE,gBAAgB,CAAC,EAAA,IAAA,EAE5C;AACL,wBAAA,KAAK,EAAE;AACP,qBAAA,EAAA,QAAA,EAAA,66BAAA,EAAA;;sBAKA,YAAY;uBAAC,0BAA0B;;;MER5B,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,uBAAuB,EAAE,0BAA0B,CAAA,EAAA,OAAA,EAAA,CACnD,uBAAuB,EAAE,0BAA0B,CAAA,EAAA,CAAA;wGAEjD,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,uBAAuB,EAAE,0BAA0B,CAAC;AAC9D,oBAAA,OAAO,EAAE,CAAC,uBAAuB,EAAE,0BAA0B;AAC7D,iBAAA;;;ACRD;;AAEG;;ACFH;;AAEG;;;;"}
|
|
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, computed, contentChild, inject, input, TemplateRef } from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { HubBreadcrumbItemDirective } from '../../directives/breadcrumb-item.directive';\nimport { HubBreadcrumbsService } from '../../services/breadcrumbs.service';\n\n/** Variants with exact design-system token coverage via the SCSS `@each` loop. */\nconst BUILT_IN_VARIANTS = new Set<string>(['primary', 'success', 'danger', 'warning', 'info']);\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\t'[attr.data-variant]': 'variant() ?? null',\n\t\t'[style.--hub-breadcrumb-accent]': 'customAccent()'\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\t/**\n\t * Semantic accent for the breadcrumb links: `'primary'` · `'success'` ·\n\t * `'danger'` · `'warning'` · `'info'`, or any custom string (read as\n\t * `--hub-sys-color-<variant>`). Re-bases `--hub-breadcrumb-accent`; the\n\t * current (last) item stays muted. Defaults to the standard link colour.\n\t */\n\treadonly variant = input<string>();\n\n\t/**\n\t * Inline accent for custom (non-built-in) variants — the built-in five are\n\t * resolved by the SCSS `@each` loop, so this returns `null` for them.\n\t */\n\tprotected readonly customAccent = computed(() => {\n\t\tconst v = this.variant();\n\t\treturn v && !BUILT_IN_VARIANTS.has(v) ? `var(--hub-sys-color-${v})` : null;\n\t});\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":"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"}
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ng-hub-ui-breadcrumbs",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "22.1.1",
|
|
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",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"component",
|
|
14
14
|
"typescript"
|
|
15
15
|
],
|
|
16
|
-
"author": "
|
|
16
|
+
"author": "Carlos Morcillo <carlos.morcillo@me.com> (https://www.carlosmorcillo.com)",
|
|
17
17
|
"license": "MIT",
|
|
18
18
|
"repository": {
|
|
19
19
|
"type": "git",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"bugs": {
|
|
23
23
|
"url": "https://github.com/carlos-morcillo/ng-hub-ui-breadcrumbs/issues"
|
|
24
24
|
},
|
|
25
|
-
"homepage": "https://
|
|
25
|
+
"homepage": "https://hubui.dev/",
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"@angular/common": ">=17.0.0",
|
|
28
28
|
"@angular/core": ">=17.0.0"
|
|
@@ -41,5 +41,6 @@
|
|
|
41
41
|
"types": "./types/ng-hub-ui-breadcrumbs.d.ts",
|
|
42
42
|
"default": "./fesm2022/ng-hub-ui-breadcrumbs.mjs"
|
|
43
43
|
}
|
|
44
|
-
}
|
|
44
|
+
},
|
|
45
|
+
"type": "module"
|
|
45
46
|
}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
// ─────────────────────────────────────────────────────────────────────────
|
|
2
|
+
// hub-breadcrumb-theme — one-call theming for `<hub-breadcrumb>`
|
|
3
|
+
// ─────────────────────────────────────────────────────────────────────────
|
|
4
|
+
//
|
|
5
|
+
// Override any of the `--hub-breadcrumb-*` design tokens in a single include.
|
|
6
|
+
// Every parameter is OPTIONAL and defaults to `null`: only the parameters you
|
|
7
|
+
// pass are emitted, so the rest keep the component's defaults. Token-based and
|
|
8
|
+
// self-contained (no Bootstrap dependencies).
|
|
9
|
+
//
|
|
10
|
+
// The semantic `variant` accent (primary / success / … / custom) is applied
|
|
11
|
+
// automatically; use this mixin to restyle the shell — surface, spacing,
|
|
12
|
+
// divider, link colours — or to set a brand accent on a custom selector.
|
|
13
|
+
//
|
|
14
|
+
// @example
|
|
15
|
+
//
|
|
16
|
+
// @use 'ng-hub-ui-breadcrumbs/styles/mixins/breadcrumb-theme' as *;
|
|
17
|
+
//
|
|
18
|
+
// .docs-breadcrumb {
|
|
19
|
+
// @include hub-breadcrumb-theme(
|
|
20
|
+
// $bg: #f8fafc,
|
|
21
|
+
// $padding-x: 0.75rem,
|
|
22
|
+
// $divider: "'/'", // keep the inner quotes — it feeds CSS `content`
|
|
23
|
+
// $accent: var(--hub-sys-color-info)
|
|
24
|
+
// );
|
|
25
|
+
// }
|
|
26
|
+
//
|
|
27
|
+
// scss-docs-start hub-breadcrumb-theme
|
|
28
|
+
@mixin hub-breadcrumb-theme(
|
|
29
|
+
// ── Surface ──
|
|
30
|
+
$bg: null,
|
|
31
|
+
$color: null,
|
|
32
|
+
$border-radius: null,
|
|
33
|
+
$padding-x: null,
|
|
34
|
+
$padding-y: null,
|
|
35
|
+
$margin-bottom: null,
|
|
36
|
+
$font-size: null,
|
|
37
|
+
// ── Divider ──
|
|
38
|
+
$divider: null,
|
|
39
|
+
$divider-flipped: null,
|
|
40
|
+
$divider-color: null,
|
|
41
|
+
$item-padding-x: null,
|
|
42
|
+
// ── Current (last) item ──
|
|
43
|
+
$item-active-color: null,
|
|
44
|
+
// ── Links / accent ──
|
|
45
|
+
$accent: null,
|
|
46
|
+
$link-color: null,
|
|
47
|
+
$link-hover-color: null,
|
|
48
|
+
$link-decoration: null,
|
|
49
|
+
$link-hover-decoration: null
|
|
50
|
+
) {
|
|
51
|
+
// Surface
|
|
52
|
+
@if $bg != null {
|
|
53
|
+
--hub-breadcrumb-bg: #{$bg};
|
|
54
|
+
}
|
|
55
|
+
@if $color != null {
|
|
56
|
+
--hub-breadcrumb-color: #{$color};
|
|
57
|
+
}
|
|
58
|
+
@if $border-radius != null {
|
|
59
|
+
--hub-breadcrumb-border-radius: #{$border-radius};
|
|
60
|
+
}
|
|
61
|
+
@if $padding-x != null {
|
|
62
|
+
--hub-breadcrumb-padding-x: #{$padding-x};
|
|
63
|
+
}
|
|
64
|
+
@if $padding-y != null {
|
|
65
|
+
--hub-breadcrumb-padding-y: #{$padding-y};
|
|
66
|
+
}
|
|
67
|
+
@if $margin-bottom != null {
|
|
68
|
+
--hub-breadcrumb-margin-bottom: #{$margin-bottom};
|
|
69
|
+
}
|
|
70
|
+
@if $font-size != null {
|
|
71
|
+
--hub-breadcrumb-font-size: #{$font-size};
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
// Divider
|
|
75
|
+
@if $divider != null {
|
|
76
|
+
--hub-breadcrumb-divider: #{$divider};
|
|
77
|
+
}
|
|
78
|
+
@if $divider-flipped != null {
|
|
79
|
+
--hub-breadcrumb-divider-flipped: #{$divider-flipped};
|
|
80
|
+
}
|
|
81
|
+
@if $divider-color != null {
|
|
82
|
+
--hub-breadcrumb-divider-color: #{$divider-color};
|
|
83
|
+
}
|
|
84
|
+
@if $item-padding-x != null {
|
|
85
|
+
--hub-breadcrumb-item-padding-x: #{$item-padding-x};
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
// Current item
|
|
89
|
+
@if $item-active-color != null {
|
|
90
|
+
--hub-breadcrumb-item-active-color: #{$item-active-color};
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
// Links / accent
|
|
94
|
+
@if $accent != null {
|
|
95
|
+
--hub-breadcrumb-accent: #{$accent};
|
|
96
|
+
}
|
|
97
|
+
@if $link-color != null {
|
|
98
|
+
--hub-breadcrumb-link-color: #{$link-color};
|
|
99
|
+
}
|
|
100
|
+
@if $link-hover-color != null {
|
|
101
|
+
--hub-breadcrumb-link-hover-color: #{$link-hover-color};
|
|
102
|
+
}
|
|
103
|
+
@if $link-decoration != null {
|
|
104
|
+
--hub-breadcrumb-link-decoration: #{$link-decoration};
|
|
105
|
+
}
|
|
106
|
+
@if $link-hover-decoration != null {
|
|
107
|
+
--hub-breadcrumb-link-hover-decoration: #{$link-hover-decoration};
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
// scss-docs-end hub-breadcrumb-theme
|
|
@@ -8,23 +8,35 @@ interface BreadcrumbItem {
|
|
|
8
8
|
data: any;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
+
declare class HubBreadcrumbComponent {
|
|
12
|
+
#private;
|
|
13
|
+
readonly itemTemplate: i0.Signal<TemplateRef<any> | undefined>;
|
|
14
|
+
breadcrumbs$: rxjs.Observable<BreadcrumbItem[]>;
|
|
15
|
+
/**
|
|
16
|
+
* Semantic accent for the breadcrumb links: `'primary'` · `'success'` ·
|
|
17
|
+
* `'danger'` · `'warning'` · `'info'`, or any custom string (read as
|
|
18
|
+
* `--hub-sys-color-<variant>`). Re-bases `--hub-breadcrumb-accent`; the
|
|
19
|
+
* current (last) item stays muted. Defaults to the standard link colour.
|
|
20
|
+
*/
|
|
21
|
+
readonly variant: i0.InputSignal<string | undefined>;
|
|
22
|
+
/**
|
|
23
|
+
* Inline accent for custom (non-built-in) variants — the built-in five are
|
|
24
|
+
* resolved by the SCSS `@each` loop, so this returns `null` for them.
|
|
25
|
+
*/
|
|
26
|
+
protected readonly customAccent: i0.Signal<string | null>;
|
|
27
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<HubBreadcrumbComponent, never>;
|
|
28
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<HubBreadcrumbComponent, "hub-breadcrumb", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, ["itemTemplate"], never, true, never>;
|
|
29
|
+
}
|
|
30
|
+
|
|
11
31
|
declare class HubBreadcrumbItemDirective {
|
|
12
32
|
template: TemplateRef<any>;
|
|
13
33
|
static ɵfac: i0.ɵɵFactoryDeclaration<HubBreadcrumbItemDirective, never>;
|
|
14
34
|
static ɵdir: i0.ɵɵDirectiveDeclaration<HubBreadcrumbItemDirective, "[hubBreadcrumbItem]", never, {}, {}, never, never, true, never>;
|
|
15
35
|
}
|
|
16
36
|
|
|
17
|
-
declare class HubBreadcrumbsComponent {
|
|
18
|
-
#private;
|
|
19
|
-
itemTemplate?: HubBreadcrumbItemDirective;
|
|
20
|
-
breadcrumbs$: rxjs.Observable<BreadcrumbItem[]>;
|
|
21
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<HubBreadcrumbsComponent, never>;
|
|
22
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<HubBreadcrumbsComponent, "hub-breadcrumbs", never, {}, {}, ["itemTemplate"], never, true, never>;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
37
|
declare class HubBreadcrumbsModule {
|
|
26
38
|
static ɵfac: i0.ɵɵFactoryDeclaration<HubBreadcrumbsModule, never>;
|
|
27
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<HubBreadcrumbsModule, never, [typeof
|
|
39
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<HubBreadcrumbsModule, never, [typeof HubBreadcrumbComponent, typeof HubBreadcrumbItemDirective], [typeof HubBreadcrumbComponent, typeof HubBreadcrumbItemDirective]>;
|
|
28
40
|
static ɵinj: i0.ɵɵInjectorDeclaration<HubBreadcrumbsModule>;
|
|
29
41
|
}
|
|
30
42
|
|
|
@@ -39,4 +51,4 @@ declare class HubBreadcrumbsService {
|
|
|
39
51
|
static ɵprov: i0.ɵɵInjectableDeclaration<HubBreadcrumbsService>;
|
|
40
52
|
}
|
|
41
53
|
|
|
42
|
-
export {
|
|
54
|
+
export { HubBreadcrumbComponent, HubBreadcrumbItemDirective, HubBreadcrumbsModule, HubBreadcrumbsService };
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
:root,
|
|
2
|
-
:host {
|
|
3
|
-
--hub-ref-space-0: 0;
|
|
4
|
-
--hub-ref-space-1: 0.5rem;
|
|
5
|
-
--hub-ref-space-3: 1rem;
|
|
6
|
-
--hub-ref-radius-md: 0.375rem;
|
|
7
|
-
--hub-sys-surface-page: transparent;
|
|
8
|
-
--hub-sys-text-primary: #212529;
|
|
9
|
-
--hub-sys-text-muted: #6c757d;
|
|
10
|
-
--hub-sys-link-color: #0d6efd;
|
|
11
|
-
--hub-sys-link-hover-color: #0a58ca;
|
|
12
|
-
--hub-breadcrumb-padding-x: var(--hub-ref-space-3, 1rem);
|
|
13
|
-
--hub-breadcrumb-padding-y: 0.25rem;
|
|
14
|
-
--hub-breadcrumb-margin-bottom: var(--hub-ref-space-0, 0);
|
|
15
|
-
--hub-breadcrumb-bg: var(--hub-sys-surface-page, transparent);
|
|
16
|
-
--hub-breadcrumb-color: var(--hub-sys-text-primary, #212529);
|
|
17
|
-
--hub-breadcrumb-border-radius: var(--hub-ref-radius-md, 0.375rem);
|
|
18
|
-
--hub-breadcrumb-divider-color: var(--hub-sys-text-muted, #6c757d);
|
|
19
|
-
--hub-breadcrumb-item-padding-x: var(--hub-ref-space-1, 0.5rem);
|
|
20
|
-
--hub-breadcrumb-item-active-color: var(--hub-sys-text-muted, #6c757d);
|
|
21
|
-
--hub-breadcrumb-link-color: var(--hub-sys-link-color, #0d6efd);
|
|
22
|
-
--hub-breadcrumb-link-hover-color: var(--hub-sys-link-hover-color, #0a58ca);
|
|
23
|
-
--hub-breadcrumb-link-decoration: none;
|
|
24
|
-
--hub-breadcrumb-link-hover-decoration: underline;
|
|
25
|
-
--hub-breadcrumb-divider: '>';
|
|
26
|
-
--hub-breadcrumb-divider-flipped: '<';
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.hub-breadcrumbs__nav {
|
|
30
|
-
.hub-breadcrumbs__list {
|
|
31
|
-
display: flex;
|
|
32
|
-
flex-wrap: wrap;
|
|
33
|
-
padding: var(--hub-breadcrumb-padding-y, 0.25rem)
|
|
34
|
-
var(--hub-breadcrumb-padding-x, var(--hub-ref-space-3, 1rem));
|
|
35
|
-
margin-bottom: var(--hub-breadcrumb-margin-bottom, var(--hub-ref-space-0, 0));
|
|
36
|
-
list-style: none;
|
|
37
|
-
color: var(--hub-breadcrumb-color, var(--hub-sys-text-primary, #212529));
|
|
38
|
-
background-color: var(
|
|
39
|
-
--hub-breadcrumb-bg,
|
|
40
|
-
var(--hub-sys-surface-page, transparent)
|
|
41
|
-
);
|
|
42
|
-
border-radius: var(
|
|
43
|
-
--hub-breadcrumb-border-radius,
|
|
44
|
-
var(--hub-ref-radius-md, 0.375rem)
|
|
45
|
-
);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.hub-breadcrumbs__item {
|
|
49
|
-
+ .hub-breadcrumbs__item {
|
|
50
|
-
padding-left: var(
|
|
51
|
-
--hub-breadcrumb-item-padding-x,
|
|
52
|
-
var(--hub-ref-space-1, 0.5rem)
|
|
53
|
-
);
|
|
54
|
-
|
|
55
|
-
&::before {
|
|
56
|
-
float: left;
|
|
57
|
-
padding-right: var(
|
|
58
|
-
--hub-breadcrumb-item-padding-x,
|
|
59
|
-
var(--hub-ref-space-1, 0.5rem)
|
|
60
|
-
);
|
|
61
|
-
color: var(
|
|
62
|
-
--hub-breadcrumb-divider-color,
|
|
63
|
-
var(--hub-sys-text-muted, #6c757d)
|
|
64
|
-
);
|
|
65
|
-
content: var(--hub-breadcrumb-divider, '>');
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
&--active {
|
|
70
|
-
color: var(
|
|
71
|
-
--hub-breadcrumb-item-active-color,
|
|
72
|
-
var(--hub-sys-text-muted, #6c757d)
|
|
73
|
-
);
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.hub-breadcrumbs__link {
|
|
78
|
-
color: var(--hub-breadcrumb-link-color, var(--hub-sys-link-color, #0d6efd));
|
|
79
|
-
text-decoration: var(--hub-breadcrumb-link-decoration, none);
|
|
80
|
-
|
|
81
|
-
&:hover {
|
|
82
|
-
color: var(
|
|
83
|
-
--hub-breadcrumb-link-hover-color,
|
|
84
|
-
var(--hub-sys-link-hover-color, #0a58ca)
|
|
85
|
-
);
|
|
86
|
-
text-decoration: var(--hub-breadcrumb-link-hover-decoration, underline);
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
[dir='rtl'] .hub-breadcrumbs__nav .hub-breadcrumbs__item + .hub-breadcrumbs__item::before {
|
|
92
|
-
content: var(--hub-breadcrumb-divider-flipped, var(--hub-breadcrumb-divider, '>'));
|
|
93
|
-
}
|