ng-hub-ui-breadcrumbs 21.0.0 → 21.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +10 -16
  2. package/fesm2022/ng-hub-ui-breadcrumbs.mjs +14 -17
  3. package/fesm2022/ng-hub-ui-breadcrumbs.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/types/ng-hub-ui-breadcrumbs.d.ts +10 -10
  6. package/src/lib/styles/breadcrumbs.scss +0 -93
package/README.md CHANGED
@@ -48,14 +48,14 @@ npm install ng-hub-ui-breadcrumbs
48
48
 
49
49
  ### 1. Import the Component
50
50
 
51
- You can import the `HubBreadcrumbsComponent` directly in your standalone component or module.
51
+ You can import the `HubBreadcrumbComponent` directly in your standalone component or module.
52
52
 
53
53
  ```typescript
54
- import { HubBreadcrumbsComponent } from 'ng-hub-ui-breadcrumbs';
54
+ import { HubBreadcrumbComponent } from 'ng-hub-ui-breadcrumbs';
55
55
 
56
56
  @Component({
57
57
  // ...
58
- imports: [HubBreadcrumbsComponent]
58
+ imports: [HubBreadcrumbComponent]
59
59
  })
60
60
  export class AppComponent {}
61
61
  ```
@@ -65,7 +65,7 @@ export class AppComponent {}
65
65
  Place the component in your application's main layout or wherever you want breadcrumbs to appear.
66
66
 
67
67
  ```html
68
- <hub-breadcrumbs></hub-breadcrumbs>
68
+ <hub-breadcrumb></hub-breadcrumb>
69
69
  ```
70
70
 
71
71
  ### 3. Configure Routes
@@ -167,7 +167,7 @@ You can attach arbitrary data (like icons) to your route config and use it in a
167
167
 
168
168
  ```html
169
169
  <!-- Custom Template Implementation -->
170
- <hub-breadcrumbs>
170
+ <hub-breadcrumb>
171
171
  <ng-template hubBreadcrumbItem let-item let-isLast="isLast">
172
172
  <!-- 'item.data' contains the entire route data object -->
173
173
  @if (item.data.icon) {
@@ -183,7 +183,7 @@ You can attach arbitrary data (like icons) to your route config and use it in a
183
183
  Fully customize the structure, including separators/dividers.
184
184
 
185
185
  ```html
186
- <hub-breadcrumbs>
186
+ <hub-breadcrumb>
187
187
  <ng-template hubBreadcrumbItem let-item let-isLast="isLast">
188
188
  <span class="my-breadcrumb-item">
189
189
  <a [routerLink]="item.url">{{ item.label }}</a>
@@ -198,13 +198,13 @@ Fully customize the structure, including separators/dividers.
198
198
 
199
199
  ## API Reference
200
200
 
201
- ### HubBreadcrumbsComponent
201
+ ### HubBreadcrumbComponent
202
202
 
203
203
  The main container component. It doesn't have any inputs as it reads directly from the Router.
204
204
 
205
205
  | Selector | Exported As |
206
206
  | ----------------- | ---------------- |
207
- | `hub-breadcrumbs` | `hubBreadcrumbs` |
207
+ | `hub-breadcrumb` | `hubBreadcrumb` |
208
208
 
209
209
  ### HubBreadcrumbItemDirective
210
210
 
@@ -237,16 +237,10 @@ A structural directive used to define a custom template for breadcrumb items.
237
237
 
238
238
  For a complete and up-to-date token catalog, see [CSS Variables Reference](./docs/css-variables-reference.md).
239
239
 
240
- ### Import styles
241
-
242
- ```scss
243
- @use 'ng-hub-ui-breadcrumbs/src/lib/styles/breadcrumbs.scss';
244
- ```
245
-
246
240
  ### Quick customization example (framework-agnostic)
247
241
 
248
242
  ```scss
249
- .hub-breadcrumbs__list {
243
+ .hub-breadcrumb__list {
250
244
  --hub-breadcrumb-bg: #f8f9fa;
251
245
  --hub-breadcrumb-divider: '→';
252
246
  --hub-breadcrumb-link-color: #0d6efd;
@@ -257,7 +251,7 @@ For a complete and up-to-date token catalog, see [CSS Variables Reference](./doc
257
251
  ### Bootstrap integration (optional)
258
252
 
259
253
  ```scss
260
- .hub-breadcrumbs__list {
254
+ .hub-breadcrumb__list {
261
255
  --hub-breadcrumb-bg: var(--bs-light);
262
256
  --hub-breadcrumb-link-color: var(--bs-primary);
263
257
  --hub-breadcrumb-link-hover-color: var(--bs-primary-text-emphasis);
package/fesm2022/ng-hub-ui-breadcrumbs.mjs CHANGED
@@ -1,5 +1,5 @@
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, 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';
@@ -80,34 +80,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
80
80
  }]
81
81
  }] });
82
82
 
83
- class HubBreadcrumbsComponent {
83
+ class HubBreadcrumbComponent {
84
84
  #breadcrumbsSvc = inject(HubBreadcrumbsService);
85
- itemTemplate;
85
+ itemTemplate = contentChild(HubBreadcrumbItemDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : {}), read: TemplateRef });
86
86
  breadcrumbs$ = this.#breadcrumbsSvc.breadcrumbs$;
87
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
88
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: HubBreadcrumbsComponent, isStandalone: true, selector: "hub-breadcrumbs", host: { classAttribute: "hub-breadcrumbs" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: HubBreadcrumbItemDirective, descendants: true }], ngImport: i0, template: "<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", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
87
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
88
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: HubBreadcrumbComponent, isStandalone: true, selector: "hub-breadcrumb", host: { classAttribute: "hub-breadcrumb" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: HubBreadcrumbItemDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<nav aria-label=\"breadcrumb\" class=\"hub-breadcrumb__nav\">\n\t<ol class=\"hub-breadcrumb__list\">\n\t\t@for (item of breadcrumbs$ | async; track item; let last = $last) {\n\t\t\t<li class=\"hub-breadcrumb__item\" [class.hub-breadcrumb__item--active]=\"last\">\n\t\t\t\t@if (itemTemplate()) {\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"itemTemplate()\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t$implicit: item,\n\t\t\t\t\t\t\tisLast: last\n\t\t\t\t\t\t}\"\n\t\t\t\t\t/>\n\t\t\t\t} @else {\n\t\t\t\t\t@if (!last) {\n\t\t\t\t\t\t<a [routerLink]=\"item.url\" class=\"hub-breadcrumb__link\">\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<span class=\"hub-breadcrumb__text\">{{ item.label }}</span>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</li>\n\t\t}\n\t</ol>\n</nav>\n", styles: [":root,:host{--hub-ref-space-0: 0;--hub-ref-space-1: .5rem;--hub-ref-space-3: 1rem;--hub-ref-radius-md: .375rem;--hub-sys-surface-page: transparent;--hub-sys-text-primary: #212529;--hub-sys-text-muted: #6c757d;--hub-sys-link-color: #0d6efd;--hub-sys-link-hover-color: #0a58ca;--hub-breadcrumb-padding-x: var(--hub-ref-space-3, 1rem);--hub-breadcrumb-padding-y: .25rem;--hub-breadcrumb-margin-bottom: var(--hub-ref-space-0, 0);--hub-breadcrumb-bg: var(--hub-sys-surface-page, transparent);--hub-breadcrumb-color: var(--hub-sys-text-primary, #212529);--hub-breadcrumb-border-radius: var(--hub-ref-radius-md, .375rem);--hub-breadcrumb-divider-color: var(--hub-sys-text-muted, #6c757d);--hub-breadcrumb-item-padding-x: var(--hub-ref-space-1, .5rem);--hub-breadcrumb-item-active-color: var(--hub-sys-text-muted, #6c757d);--hub-breadcrumb-link-color: var(--hub-sys-link-color, #0d6efd);--hub-breadcrumb-link-hover-color: var(--hub-sys-link-hover-color, #0a58ca);--hub-breadcrumb-link-decoration: none;--hub-breadcrumb-link-hover-decoration: underline;--hub-breadcrumb-divider: \">\";--hub-breadcrumb-divider-flipped: \"<\";--hub-breadcrumb-font-size: inherit}.hub-breadcrumb__nav .hub-breadcrumb__list{display:flex;flex-wrap:wrap;font-size:var(--hub-breadcrumb-font-size, inherit);padding:var(--hub-breadcrumb-padding-y, .25rem) var(--hub-breadcrumb-padding-x, var(--hub-ref-space-3, 1rem));margin-bottom:var(--hub-breadcrumb-margin-bottom, var(--hub-ref-space-0, 0));list-style:none;color:var(--hub-breadcrumb-color, var(--hub-sys-text-primary, #212529));background-color:var(--hub-breadcrumb-bg, var(--hub-sys-surface-page, transparent));border-radius:var(--hub-breadcrumb-border-radius, var(--hub-ref-radius-md, .375rem))}.hub-breadcrumb__nav .hub-breadcrumb__item+.hub-breadcrumb__item{padding-left:var(--hub-breadcrumb-item-padding-x, var(--hub-ref-space-1, .5rem))}.hub-breadcrumb__nav .hub-breadcrumb__item+.hub-breadcrumb__item:before{float:left;padding-right:var(--hub-breadcrumb-item-padding-x, var(--hub-ref-space-1, .5rem));color:var(--hub-breadcrumb-divider-color, var(--hub-sys-text-muted, #6c757d));content:var(--hub-breadcrumb-divider, \">\")}.hub-breadcrumb__nav .hub-breadcrumb__item--active{color:var(--hub-breadcrumb-item-active-color, var(--hub-sys-text-muted, #6c757d))}.hub-breadcrumb__nav .hub-breadcrumb__link{color:var(--hub-breadcrumb-link-color, var(--hub-sys-link-color, #0d6efd));text-decoration:var(--hub-breadcrumb-link-decoration, none)}.hub-breadcrumb__nav .hub-breadcrumb__link:hover{color:var(--hub-breadcrumb-link-hover-color, var(--hub-sys-link-hover-color, #0a58ca));text-decoration:var(--hub-breadcrumb-link-hover-decoration, underline)}[dir=rtl] .hub-breadcrumb__nav .hub-breadcrumb__item+.hub-breadcrumb__item:before{content:var(--hub-breadcrumb-divider-flipped, var(--hub-breadcrumb-divider, \">\"))}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
89
89
  }
90
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubBreadcrumbsComponent, decorators: [{
90
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubBreadcrumbComponent, decorators: [{
91
91
  type: Component,
92
- args: [{ selector: 'hub-breadcrumbs', imports: [AsyncPipe, RouterLink, NgTemplateOutlet], host: {
93
- class: 'hub-breadcrumbs'
94
- }, template: "<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" }]
95
- }], propDecorators: { itemTemplate: [{
96
- type: ContentChild,
97
- args: [HubBreadcrumbItemDirective]
98
- }] } });
92
+ args: [{ selector: 'hub-breadcrumb', imports: [AsyncPipe, RouterLink, NgTemplateOutlet], host: {
93
+ class: 'hub-breadcrumb'
94
+ }, template: "<nav aria-label=\"breadcrumb\" class=\"hub-breadcrumb__nav\">\n\t<ol class=\"hub-breadcrumb__list\">\n\t\t@for (item of breadcrumbs$ | async; track item; let last = $last) {\n\t\t\t<li class=\"hub-breadcrumb__item\" [class.hub-breadcrumb__item--active]=\"last\">\n\t\t\t\t@if (itemTemplate()) {\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"itemTemplate()\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t$implicit: item,\n\t\t\t\t\t\t\tisLast: last\n\t\t\t\t\t\t}\"\n\t\t\t\t\t/>\n\t\t\t\t} @else {\n\t\t\t\t\t@if (!last) {\n\t\t\t\t\t\t<a [routerLink]=\"item.url\" class=\"hub-breadcrumb__link\">\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<span class=\"hub-breadcrumb__text\">{{ item.label }}</span>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</li>\n\t\t}\n\t</ol>\n</nav>\n", styles: [":root,:host{--hub-ref-space-0: 0;--hub-ref-space-1: .5rem;--hub-ref-space-3: 1rem;--hub-ref-radius-md: .375rem;--hub-sys-surface-page: transparent;--hub-sys-text-primary: #212529;--hub-sys-text-muted: #6c757d;--hub-sys-link-color: #0d6efd;--hub-sys-link-hover-color: #0a58ca;--hub-breadcrumb-padding-x: var(--hub-ref-space-3, 1rem);--hub-breadcrumb-padding-y: .25rem;--hub-breadcrumb-margin-bottom: var(--hub-ref-space-0, 0);--hub-breadcrumb-bg: var(--hub-sys-surface-page, transparent);--hub-breadcrumb-color: var(--hub-sys-text-primary, #212529);--hub-breadcrumb-border-radius: var(--hub-ref-radius-md, .375rem);--hub-breadcrumb-divider-color: var(--hub-sys-text-muted, #6c757d);--hub-breadcrumb-item-padding-x: var(--hub-ref-space-1, .5rem);--hub-breadcrumb-item-active-color: var(--hub-sys-text-muted, #6c757d);--hub-breadcrumb-link-color: var(--hub-sys-link-color, #0d6efd);--hub-breadcrumb-link-hover-color: var(--hub-sys-link-hover-color, #0a58ca);--hub-breadcrumb-link-decoration: none;--hub-breadcrumb-link-hover-decoration: underline;--hub-breadcrumb-divider: \">\";--hub-breadcrumb-divider-flipped: \"<\";--hub-breadcrumb-font-size: inherit}.hub-breadcrumb__nav .hub-breadcrumb__list{display:flex;flex-wrap:wrap;font-size:var(--hub-breadcrumb-font-size, inherit);padding:var(--hub-breadcrumb-padding-y, .25rem) var(--hub-breadcrumb-padding-x, var(--hub-ref-space-3, 1rem));margin-bottom:var(--hub-breadcrumb-margin-bottom, var(--hub-ref-space-0, 0));list-style:none;color:var(--hub-breadcrumb-color, var(--hub-sys-text-primary, #212529));background-color:var(--hub-breadcrumb-bg, var(--hub-sys-surface-page, transparent));border-radius:var(--hub-breadcrumb-border-radius, var(--hub-ref-radius-md, .375rem))}.hub-breadcrumb__nav .hub-breadcrumb__item+.hub-breadcrumb__item{padding-left:var(--hub-breadcrumb-item-padding-x, var(--hub-ref-space-1, .5rem))}.hub-breadcrumb__nav .hub-breadcrumb__item+.hub-breadcrumb__item:before{float:left;padding-right:var(--hub-breadcrumb-item-padding-x, var(--hub-ref-space-1, .5rem));color:var(--hub-breadcrumb-divider-color, var(--hub-sys-text-muted, #6c757d));content:var(--hub-breadcrumb-divider, \">\")}.hub-breadcrumb__nav .hub-breadcrumb__item--active{color:var(--hub-breadcrumb-item-active-color, var(--hub-sys-text-muted, #6c757d))}.hub-breadcrumb__nav .hub-breadcrumb__link{color:var(--hub-breadcrumb-link-color, var(--hub-sys-link-color, #0d6efd));text-decoration:var(--hub-breadcrumb-link-decoration, none)}.hub-breadcrumb__nav .hub-breadcrumb__link:hover{color:var(--hub-breadcrumb-link-hover-color, var(--hub-sys-link-hover-color, #0a58ca));text-decoration:var(--hub-breadcrumb-link-hover-decoration, underline)}[dir=rtl] .hub-breadcrumb__nav .hub-breadcrumb__item+.hub-breadcrumb__item:before{content:var(--hub-breadcrumb-divider-flipped, var(--hub-breadcrumb-divider, \">\"))}\n"] }]
95
+ }], propDecorators: { itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubBreadcrumbItemDirective), { ...{ read: TemplateRef }, isSignal: true }] }] } });
99
96
 
100
97
  class HubBreadcrumbsModule {
101
98
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
102
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.2", ngImport: i0, type: HubBreadcrumbsModule, imports: [HubBreadcrumbsComponent, HubBreadcrumbItemDirective], exports: [HubBreadcrumbsComponent, HubBreadcrumbItemDirective] });
99
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.2", ngImport: i0, type: HubBreadcrumbsModule, imports: [HubBreadcrumbComponent, HubBreadcrumbItemDirective], exports: [HubBreadcrumbComponent, HubBreadcrumbItemDirective] });
103
100
  static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubBreadcrumbsModule });
104
101
  }
105
102
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubBreadcrumbsModule, decorators: [{
106
103
  type: NgModule,
107
104
  args: [{
108
105
  declarations: [],
109
- imports: [HubBreadcrumbsComponent, HubBreadcrumbItemDirective],
110
- exports: [HubBreadcrumbsComponent, HubBreadcrumbItemDirective]
106
+ imports: [HubBreadcrumbComponent, HubBreadcrumbItemDirective],
107
+ exports: [HubBreadcrumbComponent, HubBreadcrumbItemDirective]
111
108
  }]
112
109
  }] });
113
110
 
@@ -119,5 +116,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
119
116
  * Generated bundle index. Do not edit.
120
117
  */
121
118
 
122
- export { HubBreadcrumbItemDirective, HubBreadcrumbsComponent, HubBreadcrumbsModule, HubBreadcrumbsService };
119
+ export { HubBreadcrumbComponent, HubBreadcrumbItemDirective, HubBreadcrumbsModule, HubBreadcrumbsService };
123
120
  //# sourceMappingURL=ng-hub-ui-breadcrumbs.mjs.map
package/fesm2022/ng-hub-ui-breadcrumbs.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ng-hub-ui-breadcrumbs.mjs","sources":["../../../projects/breadcrumbs/src/lib/directives/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":"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"}
1
+ {"version":3,"file":"ng-hub-ui-breadcrumbs.mjs","sources":["../../../projects/breadcrumbs/src/lib/directives/breadcrumb-item.directive.ts","../../../projects/breadcrumbs/src/lib/services/breadcrumbs.service.ts","../../../projects/breadcrumbs/src/lib/components/breadcrumb/breadcrumb.component.ts","../../../projects/breadcrumbs/src/lib/components/breadcrumb/breadcrumb.component.html","../../../projects/breadcrumbs/src/lib/breadcrumbs.module.ts","../../../projects/breadcrumbs/src/public-api.ts","../../../projects/breadcrumbs/src/ng-hub-ui-breadcrumbs.ts"],"sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\nimport { BreadcrumbTemplateContext } from '../models/breadcrumb-template-context';\n\n@Directive({\n\tselector: '[hubBreadcrumbItem]'\n})\nexport class HubBreadcrumbItemDirective {\n\ttemplate = inject(TemplateRef<BreadcrumbTemplateContext>);\n}\n","import { inject, Injectable } from '@angular/core';\nimport { ActivatedRoute, NavigationEnd, Router } from '@angular/router';\nimport { filter, map, startWith } from 'rxjs';\nimport { BreadcrumbItem } from '../models/breadcrumb-item';\n\n@Injectable({\n\tprovidedIn: 'root'\n})\nexport class HubBreadcrumbsService {\n\t#router = inject(Router);\n\t#activatedRoute = inject(ActivatedRoute);\n\n\tbreadcrumbs$ = this.#router.events.pipe(\n\t\tfilter((event) => event instanceof NavigationEnd),\n\t\tstartWith(undefined),\n\t\tmap(() => this.createBreadcrumbs(this.#activatedRoute.root))\n\t);\n\n\tprivate createBreadcrumbs(\n\t\troute: ActivatedRoute,\n\t\turl: string = '',\n\t\tbreadcrumbs: BreadcrumbItem[] = []\n\t): BreadcrumbItem[] {\n\t\tconst children: ActivatedRoute[] = route.children;\n\n\t\tif (children.length === 0) {\n\t\t\treturn breadcrumbs;\n\t\t}\n\n\t\tfor (const child of children) {\n\t\t\tconst routeSegments = child.snapshot.url;\n\n\t\t\t// Construir la URL para este nivel\n\t\t\tconst routeURL: string = routeSegments\n\t\t\t\t.map((segment) => segment.path)\n\t\t\t\t.join('/');\n\n\t\t\tconst nextUrl = routeURL ? `${url}/${routeURL}` : url;\n\n\t\t\t// Verificar si esta ruta específica tiene datos de breadcrumb\n\t\t\tconst hasBreadcrumbData = this.hasOwnBreadcrumbData(child);\n\n\t\t\tif (hasBreadcrumbData) {\n\t\t\t\tconst label = this.getBreadcrumbLabel(child);\n\t\t\t\tbreadcrumbs.push({\n\t\t\t\t\tlabel,\n\t\t\t\t\turl: nextUrl,\n\t\t\t\t\tdata: child.snapshot.data\n\t\t\t\t});\n\t\t\t}\n\n\t\t\t// Continuar con los hijos\n\t\t\treturn this.createBreadcrumbs(child, nextUrl, breadcrumbs);\n\t\t}\n\n\t\treturn breadcrumbs;\n\t}\n\n\tprivate hasOwnBreadcrumbData(route: ActivatedRoute): boolean {\n\t\t// Verificar si la ruta tiene su propia configuración de breadcrumb\n\t\tconst routeConfig = route.routeConfig;\n\t\treturn !!(\n\t\t\trouteConfig &&\n\t\t\trouteConfig.data &&\n\t\t\trouteConfig.data['breadcrumb']\n\t\t);\n\t}\n\n\tprivate getBreadcrumbLabel(route: ActivatedRoute): string {\n\t\tconst data = route.snapshot.data;\n\t\tlet label = data['breadcrumb'];\n\n\t\tif (typeof label === 'function') {\n\t\t\tlabel = label(data);\n\t\t}\n\n\t\tif (data['resolvedData']) {\n\t\t\tlabel = this.getResolvedBreadcrumb(label, data['resolvedData']);\n\t\t}\n\n\t\treturn label;\n\t}\n\n\tprivate getResolvedBreadcrumb(template: string, data: any): string {\n\t\treturn template.replace(/\\{([^}]+)\\}/g, (match, key) => {\n\t\t\treturn data[key] || match;\n\t\t});\n\t}\n}\n","import { AsyncPipe, NgTemplateOutlet } from '@angular/common';\nimport { Component, contentChild, inject, TemplateRef } from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { HubBreadcrumbItemDirective } from '../../directives/breadcrumb-item.directive';\nimport { HubBreadcrumbsService } from '../../services/breadcrumbs.service';\n\n@Component({\n\tselector: 'hub-breadcrumb',\n\timports: [AsyncPipe, RouterLink, NgTemplateOutlet],\n\ttemplateUrl: './breadcrumb.component.html',\n\tstyleUrl: './breadcrumb.component.scss',\n\thost: {\n\t\tclass: 'hub-breadcrumb'\n\t}\n})\nexport class HubBreadcrumbComponent {\n\t#breadcrumbsSvc = inject(HubBreadcrumbsService);\n\n\treadonly itemTemplate = contentChild(HubBreadcrumbItemDirective, { read: TemplateRef });\n\n\tbreadcrumbs$ = this.#breadcrumbsSvc.breadcrumbs$;\n}\n","<nav aria-label=\"breadcrumb\" class=\"hub-breadcrumb__nav\">\n\t<ol class=\"hub-breadcrumb__list\">\n\t\t@for (item of breadcrumbs$ | async; track item; let last = $last) {\n\t\t\t<li class=\"hub-breadcrumb__item\" [class.hub-breadcrumb__item--active]=\"last\">\n\t\t\t\t@if (itemTemplate()) {\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"itemTemplate()\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t$implicit: item,\n\t\t\t\t\t\t\tisLast: last\n\t\t\t\t\t\t}\"\n\t\t\t\t\t/>\n\t\t\t\t} @else {\n\t\t\t\t\t@if (!last) {\n\t\t\t\t\t\t<a [routerLink]=\"item.url\" class=\"hub-breadcrumb__link\">\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<span class=\"hub-breadcrumb__text\">{{ item.label }}</span>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</li>\n\t\t}\n\t</ol>\n</nav>\n","import { NgModule } from '@angular/core';\nimport { HubBreadcrumbComponent } from './components/breadcrumb/breadcrumb.component';\nimport { HubBreadcrumbItemDirective } from './directives/breadcrumb-item.directive';\n\n@NgModule({\n\tdeclarations: [],\n\timports: [HubBreadcrumbComponent, HubBreadcrumbItemDirective],\n\texports: [HubBreadcrumbComponent, HubBreadcrumbItemDirective]\n})\nexport class HubBreadcrumbsModule {}\n","/*\n * Public API Surface of breadcrumbs\n */\nexport * from './lib/breadcrumbs.module';\nexport * from './lib/components/breadcrumb/breadcrumb.component';\nexport * from './lib/directives/breadcrumb-item.directive';\nexport * from './lib/services/breadcrumbs.service';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ng-hub-ui-breadcrumbs",
3
- "version": "21.0.0",
3
+ "version": "21.1.0",
4
4
  "description": "A flexible and reusable breadcrumb component for Angular applications that automatically generates breadcrumbs based on routing configuration",
5
5
  "keywords": [
6
6
  "angular",
package/types/ng-hub-ui-breadcrumbs.d.ts CHANGED
@@ -8,23 +8,23 @@ 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
+ static ɵfac: i0.ɵɵFactoryDeclaration<HubBreadcrumbComponent, never>;
16
+ static ɵcmp: i0.ɵɵComponentDeclaration<HubBreadcrumbComponent, "hub-breadcrumb", never, {}, {}, ["itemTemplate"], never, true, never>;
17
+ }
18
+
11
19
  declare class HubBreadcrumbItemDirective {
12
20
  template: TemplateRef<any>;
13
21
  static ɵfac: i0.ɵɵFactoryDeclaration<HubBreadcrumbItemDirective, never>;
14
22
  static ɵdir: i0.ɵɵDirectiveDeclaration<HubBreadcrumbItemDirective, "[hubBreadcrumbItem]", never, {}, {}, never, never, true, never>;
15
23
  }
16
24
 
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
25
  declare class HubBreadcrumbsModule {
26
26
  static ɵfac: i0.ɵɵFactoryDeclaration<HubBreadcrumbsModule, never>;
27
- static ɵmod: i0.ɵɵNgModuleDeclaration<HubBreadcrumbsModule, never, [typeof HubBreadcrumbsComponent, typeof HubBreadcrumbItemDirective], [typeof HubBreadcrumbsComponent, typeof HubBreadcrumbItemDirective]>;
27
+ static ɵmod: i0.ɵɵNgModuleDeclaration<HubBreadcrumbsModule, never, [typeof HubBreadcrumbComponent, typeof HubBreadcrumbItemDirective], [typeof HubBreadcrumbComponent, typeof HubBreadcrumbItemDirective]>;
28
28
  static ɵinj: i0.ɵɵInjectorDeclaration<HubBreadcrumbsModule>;
29
29
  }
30
30
 
@@ -39,4 +39,4 @@ declare class HubBreadcrumbsService {
39
39
  static ɵprov: i0.ɵɵInjectableDeclaration<HubBreadcrumbsService>;
40
40
  }
41
41
 
42
- export { HubBreadcrumbItemDirective, HubBreadcrumbsComponent, HubBreadcrumbsModule, HubBreadcrumbsService };
42
+ export { HubBreadcrumbComponent, HubBreadcrumbItemDirective, HubBreadcrumbsModule, HubBreadcrumbsService };
package/src/lib/styles/breadcrumbs.scss DELETED
@@ -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
- }