ng-hub-ui-breadcrumbs 21.1.0 β 22.1.2
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 +175 -57
- package/fesm2022/ng-hub-ui-breadcrumbs.mjs +39 -18
- package/fesm2022/ng-hub-ui-breadcrumbs.mjs.map +1 -1
- package/ng-hub-ui-breadcrumbs-22.1.2.tgz +0 -0
- package/package.json +8 -7
- package/src/lib/styles/mixins/_breadcrumb-theme.scss +110 -0
- package/types/ng-hub-ui-breadcrumbs.d.ts +13 -1
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,11 +75,50 @@ 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 `HubBreadcrumbComponent` directly in your standalone component or module.
|
|
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
124
|
import { HubBreadcrumbComponent } from 'ng-hub-ui-breadcrumbs';
|
|
@@ -72,7 +142,6 @@ Place the component in your application's main layout or wherever you want bread
|
|
|
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,16 +219,16 @@ 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
|
|
|
@@ -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
|
|
@@ -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
|
|
202
269
|
|
|
203
|
-
The main container component. It
|
|
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` |
|
|
275
|
+
|
|
276
|
+
#### Inputs
|
|
277
|
+
|
|
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
|
+
```
|
|
204
289
|
|
|
205
|
-
|
|
206
|
-
| ----------------- | ---------------- |
|
|
207
|
-
| `hub-breadcrumb` | `hubBreadcrumb` |
|
|
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,26 +297,38 @@ 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
|
|
|
@@ -248,6 +343,16 @@ For a complete and up-to-date token catalog, see [CSS Variables Reference](./doc
|
|
|
248
343
|
}
|
|
249
344
|
```
|
|
250
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
|
+
|
|
251
356
|
### Bootstrap integration (optional)
|
|
252
357
|
|
|
253
358
|
```scss
|
|
@@ -259,6 +364,29 @@ For a complete and up-to-date token catalog, see [CSS Variables Reference](./doc
|
|
|
259
364
|
}
|
|
260
365
|
```
|
|
261
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
|
+
|
|
262
390
|
## Contributing
|
|
263
391
|
|
|
264
392
|
We appreciate your interest in contributing to Hub Breadcrumb! Here's how you can help:
|
|
@@ -279,25 +407,11 @@ We appreciate your interest in contributing to Hub Breadcrumb! Here's how you ca
|
|
|
279
407
|
```
|
|
280
408
|
|
|
281
409
|
3. **Start the development server**
|
|
410
|
+
|
|
282
411
|
```bash
|
|
283
412
|
npm start
|
|
284
413
|
```
|
|
285
414
|
|
|
286
|
-
### Testing
|
|
287
|
-
|
|
288
|
-
Run the test suite:
|
|
289
|
-
|
|
290
|
-
```bash
|
|
291
|
-
# Unit tests
|
|
292
|
-
npm run test
|
|
293
|
-
|
|
294
|
-
# E2E tests
|
|
295
|
-
npm run e2e
|
|
296
|
-
|
|
297
|
-
# Test coverage
|
|
298
|
-
npm run test:coverage
|
|
299
|
-
```
|
|
300
|
-
|
|
301
415
|
### Commit Guidelines
|
|
302
416
|
|
|
303
417
|
We follow [Conventional Commits](https://www.conventionalcommits.org/):
|
|
@@ -305,7 +419,7 @@ We follow [Conventional Commits](https://www.conventionalcommits.org/):
|
|
|
305
419
|
- `feat:` New features
|
|
306
420
|
- `fix:` Bug fixes
|
|
307
421
|
- `docs:` Documentation changes
|
|
308
|
-
- `style:` Code style changes (formatting, etc)
|
|
422
|
+
- `style:` Code style changes (formatting, etc.)
|
|
309
423
|
- `refactor:` Code refactors
|
|
310
424
|
- `test:` Adding or updating tests
|
|
311
425
|
- `chore:` Maintenance tasks
|
|
@@ -316,7 +430,7 @@ Example:
|
|
|
316
430
|
git commit -m "feat: add custom divider support"
|
|
317
431
|
```
|
|
318
432
|
|
|
319
|
-
## Support
|
|
433
|
+
## Support
|
|
320
434
|
|
|
321
435
|
If you find this project helpful and would like to support its development, you can buy me a coffee:
|
|
322
436
|
|
|
@@ -324,8 +438,12 @@ If you find this project helpful and would like to support its development, you
|
|
|
324
438
|
|
|
325
439
|
Your support is greatly appreciated and helps maintain and improve this project!
|
|
326
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
|
+
|
|
327
445
|
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
328
446
|
|
|
329
447
|
---
|
|
330
448
|
|
|
331
|
-
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, contentChild, Component, NgModule } from '@angular/core';
|
|
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,36 +70,57 @@ 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
|
+
/** Variants with exact design-system token coverage via the SCSS `@each` loop. */
|
|
84
|
+
const BUILT_IN_VARIANTS = new Set(['primary', 'success', 'danger', 'warning', 'info']);
|
|
83
85
|
class HubBreadcrumbComponent {
|
|
84
86
|
#breadcrumbsSvc = inject(HubBreadcrumbsService);
|
|
85
|
-
itemTemplate = contentChild(HubBreadcrumbItemDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : {}), read: TemplateRef });
|
|
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
111
|
args: [{ selector: 'hub-breadcrumb', imports: [AsyncPipe, RouterLink, NgTemplateOutlet], host: {
|
|
93
|
-
class: 'hub-breadcrumb'
|
|
94
|
-
|
|
95
|
-
|
|
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 }] }] } });
|
|
96
117
|
|
|
97
118
|
class HubBreadcrumbsModule {
|
|
98
|
-
static Ι΅fac = i0.Ι΅Ι΅ngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
99
|
-
static Ι΅mod = i0.Ι΅Ι΅ngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
100
|
-
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 });
|
|
101
122
|
}
|
|
102
|
-
i0.Ι΅Ι΅ngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
123
|
+
i0.Ι΅Ι΅ngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubBreadcrumbsModule, decorators: [{
|
|
103
124
|
type: NgModule,
|
|
104
125
|
args: [{
|
|
105
126
|
declarations: [],
|
|
@@ -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/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":"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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, 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.2",
|
|
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,19 +13,19 @@
|
|
|
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",
|
|
20
|
-
"url": "https://github.com/carlos-morcillo/ng-hub-ui-breadcrumbs"
|
|
20
|
+
"url": "git+https://github.com/carlos-morcillo/ng-hub-ui-breadcrumbs.git"
|
|
21
21
|
},
|
|
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
|
-
"@angular/common": ">=
|
|
28
|
-
"@angular/core": ">=
|
|
27
|
+
"@angular/common": ">=18.0.0",
|
|
28
|
+
"@angular/core": ">=18.0.0"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"tslib": "^2.3.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
|
|
@@ -12,8 +12,20 @@ declare class HubBreadcrumbComponent {
|
|
|
12
12
|
#private;
|
|
13
13
|
readonly itemTemplate: i0.Signal<TemplateRef<any> | undefined>;
|
|
14
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>;
|
|
15
27
|
static Ι΅fac: i0.Ι΅Ι΅FactoryDeclaration<HubBreadcrumbComponent, never>;
|
|
16
|
-
static Ι΅cmp: i0.Ι΅Ι΅ComponentDeclaration<HubBreadcrumbComponent, "hub-breadcrumb", never, {}, {}, ["itemTemplate"], never, true, never>;
|
|
28
|
+
static Ι΅cmp: i0.Ι΅Ι΅ComponentDeclaration<HubBreadcrumbComponent, "hub-breadcrumb", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, ["itemTemplate"], never, true, never>;
|
|
17
29
|
}
|
|
18
30
|
|
|
19
31
|
declare class HubBreadcrumbItemDirective {
|