@fundamental-ngx/core 0.35.0-rc.10 → 0.35.0-rc.13

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 (190) hide show
  1. package/action-bar/package.json +1 -1
  2. package/action-sheet/package.json +1 -1
  3. package/alert/package.json +1 -1
  4. package/avatar/package.json +1 -1
  5. package/avatar-group/package.json +1 -1
  6. package/bar/package.json +1 -1
  7. package/breadcrumb/breadcrumb-hidden-item/breadcrumb-hidden-item.component.d.ts +23 -0
  8. package/breadcrumb/breadcrumb-item.component.d.ts +29 -0
  9. package/breadcrumb/breadcrumb.component.d.ts +16 -39
  10. package/breadcrumb/breadcrumb.module.d.ts +6 -4
  11. package/breadcrumb/esm2020/breadcrumb-hidden-item/breadcrumb-hidden-item.component.mjs +39 -0
  12. package/breadcrumb/esm2020/breadcrumb-item.component.mjs +48 -0
  13. package/breadcrumb/esm2020/breadcrumb.component.mjs +50 -137
  14. package/breadcrumb/esm2020/breadcrumb.module.mjs +11 -9
  15. package/breadcrumb/esm2020/public_api.mjs +2 -3
  16. package/breadcrumb/fesm2015/fundamental-ngx-core-breadcrumb.mjs +112 -197
  17. package/breadcrumb/fesm2015/fundamental-ngx-core-breadcrumb.mjs.map +1 -1
  18. package/breadcrumb/fesm2020/fundamental-ngx-core-breadcrumb.mjs +111 -197
  19. package/breadcrumb/fesm2020/fundamental-ngx-core-breadcrumb.mjs.map +1 -1
  20. package/breadcrumb/package.json +1 -1
  21. package/breadcrumb/public_api.d.ts +1 -2
  22. package/busy-indicator/package.json +1 -1
  23. package/button/package.json +1 -1
  24. package/calendar/package.json +1 -1
  25. package/card/package.json +1 -1
  26. package/carousel/package.json +1 -1
  27. package/checkbox/package.json +1 -1
  28. package/combobox/package.json +1 -1
  29. package/date-picker/package.json +1 -1
  30. package/datetime/package.json +1 -1
  31. package/datetime-picker/package.json +1 -1
  32. package/dialog/package.json +1 -1
  33. package/dynamic-page/package.json +1 -1
  34. package/dynamic-side-content/package.json +1 -1
  35. package/esm2020/breadcrumb/breadcrumb-hidden-item/breadcrumb-hidden-item.component.mjs +39 -0
  36. package/esm2020/breadcrumb/breadcrumb-item.component.mjs +48 -0
  37. package/esm2020/breadcrumb/breadcrumb.component.mjs +50 -137
  38. package/esm2020/breadcrumb/breadcrumb.module.mjs +11 -9
  39. package/esm2020/breadcrumb/public_api.mjs +2 -3
  40. package/esm2020/feed-list-item/components/item/feed-list-item.component.mjs +1 -1
  41. package/esm2020/form/form-label/form-label.component.mjs +1 -1
  42. package/esm2020/link/link.component.mjs +45 -7
  43. package/esm2020/multi-input/multi-input.component.mjs +1 -1
  44. package/esm2020/popover/popover-service/popover.service.mjs +2 -1
  45. package/esm2020/table/directives/table-text.directive.mjs +7 -5
  46. package/esm2020/text/text.component.mjs +1 -1
  47. package/esm2020/utils/public_api.mjs +2 -1
  48. package/esm2020/utils/services/resize-observer.service.mjs +83 -0
  49. package/facets/package.json +1 -1
  50. package/feed-input/package.json +1 -1
  51. package/feed-list-item/esm2020/components/item/feed-list-item.component.mjs +1 -1
  52. package/feed-list-item/fesm2015/fundamental-ngx-core-feed-list-item.mjs +1 -1
  53. package/feed-list-item/fesm2020/fundamental-ngx-core-feed-list-item.mjs +1 -1
  54. package/feed-list-item/package.json +1 -1
  55. package/fesm2015/fundamental-ngx-core-breadcrumb.mjs +112 -197
  56. package/fesm2015/fundamental-ngx-core-breadcrumb.mjs.map +1 -1
  57. package/fesm2015/fundamental-ngx-core-feed-list-item.mjs +1 -1
  58. package/fesm2015/fundamental-ngx-core-form.mjs +1 -1
  59. package/fesm2015/fundamental-ngx-core-link.mjs +46 -6
  60. package/fesm2015/fundamental-ngx-core-link.mjs.map +1 -1
  61. package/fesm2015/fundamental-ngx-core-multi-input.mjs +1 -1
  62. package/fesm2015/fundamental-ngx-core-popover.mjs +1 -0
  63. package/fesm2015/fundamental-ngx-core-popover.mjs.map +1 -1
  64. package/fesm2015/fundamental-ngx-core-table.mjs +6 -4
  65. package/fesm2015/fundamental-ngx-core-table.mjs.map +1 -1
  66. package/fesm2015/fundamental-ngx-core-text.mjs +1 -1
  67. package/fesm2015/fundamental-ngx-core-utils.mjs +81 -2
  68. package/fesm2015/fundamental-ngx-core-utils.mjs.map +1 -1
  69. package/fesm2020/fundamental-ngx-core-breadcrumb.mjs +111 -197
  70. package/fesm2020/fundamental-ngx-core-breadcrumb.mjs.map +1 -1
  71. package/fesm2020/fundamental-ngx-core-feed-list-item.mjs +1 -1
  72. package/fesm2020/fundamental-ngx-core-form.mjs +1 -1
  73. package/fesm2020/fundamental-ngx-core-link.mjs +44 -6
  74. package/fesm2020/fundamental-ngx-core-link.mjs.map +1 -1
  75. package/fesm2020/fundamental-ngx-core-multi-input.mjs +1 -1
  76. package/fesm2020/fundamental-ngx-core-popover.mjs +1 -0
  77. package/fesm2020/fundamental-ngx-core-popover.mjs.map +1 -1
  78. package/fesm2020/fundamental-ngx-core-table.mjs +6 -4
  79. package/fesm2020/fundamental-ngx-core-table.mjs.map +1 -1
  80. package/fesm2020/fundamental-ngx-core-text.mjs +1 -1
  81. package/fesm2020/fundamental-ngx-core-utils.mjs +81 -2
  82. package/fesm2020/fundamental-ngx-core-utils.mjs.map +1 -1
  83. package/file-uploader/package.json +1 -1
  84. package/fixed-card-layout/package.json +1 -1
  85. package/flexible-column-layout/package.json +1 -1
  86. package/form/esm2020/form-label/form-label.component.mjs +1 -1
  87. package/form/fesm2015/fundamental-ngx-core-form.mjs +1 -1
  88. package/form/fesm2020/fundamental-ngx-core-form.mjs +1 -1
  89. package/form/package.json +1 -1
  90. package/formatted-text/package.json +1 -1
  91. package/grid-list/package.json +1 -1
  92. package/icon/package.json +1 -1
  93. package/illustrated-message/package.json +1 -1
  94. package/infinite-scroll/package.json +1 -1
  95. package/info-label/package.json +1 -1
  96. package/inline-help/package.json +1 -1
  97. package/input-group/package.json +1 -1
  98. package/layout-grid/package.json +1 -1
  99. package/layout-panel/package.json +1 -1
  100. package/link/esm2020/link.component.mjs +45 -7
  101. package/link/fesm2015/fundamental-ngx-core-link.mjs +46 -6
  102. package/link/fesm2015/fundamental-ngx-core-link.mjs.map +1 -1
  103. package/link/fesm2020/fundamental-ngx-core-link.mjs +44 -6
  104. package/link/fesm2020/fundamental-ngx-core-link.mjs.map +1 -1
  105. package/link/link.component.d.ts +8 -2
  106. package/link/package.json +1 -1
  107. package/list/package.json +1 -1
  108. package/menu/package.json +1 -1
  109. package/message-box/package.json +1 -1
  110. package/message-strip/package.json +1 -1
  111. package/message-toast/package.json +1 -1
  112. package/micro-process-flow/package.json +1 -1
  113. package/mobile-mode/package.json +1 -1
  114. package/multi-input/esm2020/multi-input.component.mjs +1 -1
  115. package/multi-input/fesm2015/fundamental-ngx-core-multi-input.mjs +1 -1
  116. package/multi-input/fesm2020/fundamental-ngx-core-multi-input.mjs +1 -1
  117. package/multi-input/package.json +1 -1
  118. package/nested-list/package.json +1 -1
  119. package/notification/package.json +1 -1
  120. package/object-identifier/package.json +1 -1
  121. package/object-marker/package.json +1 -1
  122. package/object-number/package.json +1 -1
  123. package/object-status/package.json +1 -1
  124. package/package.json +1 -1
  125. package/pagination/package.json +1 -1
  126. package/panel/package.json +1 -1
  127. package/popover/esm2020/popover-service/popover.service.mjs +2 -1
  128. package/popover/fesm2015/fundamental-ngx-core-popover.mjs +1 -0
  129. package/popover/fesm2015/fundamental-ngx-core-popover.mjs.map +1 -1
  130. package/popover/fesm2020/fundamental-ngx-core-popover.mjs +1 -0
  131. package/popover/fesm2020/fundamental-ngx-core-popover.mjs.map +1 -1
  132. package/popover/package.json +1 -1
  133. package/product-switch/package.json +1 -1
  134. package/progress-indicator/package.json +1 -1
  135. package/quick-view/package.json +1 -1
  136. package/radio/package.json +1 -1
  137. package/rating-indicator/package.json +1 -1
  138. package/resizable-card-layout/package.json +1 -1
  139. package/scroll-spy/package.json +1 -1
  140. package/scrollbar/package.json +1 -1
  141. package/segmented-button/package.json +1 -1
  142. package/select/package.json +1 -1
  143. package/shared/package.json +1 -1
  144. package/shellbar/package.json +1 -1
  145. package/side-navigation/package.json +1 -1
  146. package/slider/package.json +1 -1
  147. package/split-button/package.json +1 -1
  148. package/splitter/package.json +1 -1
  149. package/status-indicator/package.json +1 -1
  150. package/step-input/package.json +1 -1
  151. package/switch/package.json +1 -1
  152. package/table/directives/table-text.directive.d.ts +5 -5
  153. package/table/esm2020/directives/table-text.directive.mjs +7 -5
  154. package/table/fesm2015/fundamental-ngx-core-table.mjs +6 -4
  155. package/table/fesm2015/fundamental-ngx-core-table.mjs.map +1 -1
  156. package/table/fesm2020/fundamental-ngx-core-table.mjs +6 -4
  157. package/table/fesm2020/fundamental-ngx-core-table.mjs.map +1 -1
  158. package/table/package.json +1 -1
  159. package/tabs/package.json +1 -1
  160. package/text/esm2020/text.component.mjs +1 -1
  161. package/text/fesm2015/fundamental-ngx-core-text.mjs +1 -1
  162. package/text/fesm2020/fundamental-ngx-core-text.mjs +1 -1
  163. package/text/package.json +1 -1
  164. package/theming/package.json +1 -1
  165. package/tile/package.json +1 -1
  166. package/time/package.json +1 -1
  167. package/time-picker/package.json +1 -1
  168. package/timeline/package.json +1 -1
  169. package/title/package.json +1 -1
  170. package/token/package.json +1 -1
  171. package/toolbar/package.json +1 -1
  172. package/tree/package.json +1 -1
  173. package/upload-collection/package.json +1 -1
  174. package/utils/esm2020/public_api.mjs +2 -1
  175. package/utils/esm2020/services/resize-observer.service.mjs +83 -0
  176. package/utils/fesm2015/fundamental-ngx-core-utils.mjs +81 -2
  177. package/utils/fesm2015/fundamental-ngx-core-utils.mjs.map +1 -1
  178. package/utils/fesm2020/fundamental-ngx-core-utils.mjs +81 -2
  179. package/utils/fesm2020/fundamental-ngx-core-utils.mjs.map +1 -1
  180. package/utils/package.json +1 -1
  181. package/utils/public_api.d.ts +1 -0
  182. package/utils/services/resize-observer.service.d.ts +29 -0
  183. package/vertical-navigation/package.json +1 -1
  184. package/wizard/package.json +1 -1
  185. package/breadcrumb/breadcrumb-item.directive.d.ts +0 -28
  186. package/breadcrumb/breadcrumb-link.directive.d.ts +0 -18
  187. package/breadcrumb/esm2020/breadcrumb-item.directive.mjs +0 -51
  188. package/breadcrumb/esm2020/breadcrumb-link.directive.mjs +0 -35
  189. package/esm2020/breadcrumb/breadcrumb-item.directive.mjs +0 -51
  190. package/esm2020/breadcrumb/breadcrumb-link.directive.mjs +0 -35
@@ -1,97 +1,95 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Directive, Input, ContentChild, forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, ContentChildren, ViewChild, HostListener, NgModule } from '@angular/core';
3
- import * as i3 from '@angular/common';
2
+ import { Component, ContentChild, forwardRef, ChangeDetectionStrategy, Input, ViewEncapsulation, Optional, ContentChildren, ViewChild, NgModule } from '@angular/core';
3
+ import * as i6 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
- import * as i4 from '@angular/router';
6
- import { RouterModule } from '@angular/router';
7
- import * as i1 from '@fundamental-ngx/core/utils';
8
- import { KeyUtil } from '@fundamental-ngx/core/utils';
9
- import { BehaviorSubject, Subscription } from 'rxjs';
10
- import * as i2 from '@fundamental-ngx/core/menu';
5
+ import * as i4 from '@fundamental-ngx/core/link';
6
+ import { LinkComponent, LinkModule } from '@fundamental-ngx/core/link';
7
+ import * as i1$1 from '@fundamental-ngx/core/utils';
8
+ import { PipeModule } from '@fundamental-ngx/core/utils';
9
+ import { BehaviorSubject, Subscription, startWith, map, tap, firstValueFrom } from 'rxjs';
10
+ import * as i1 from '@fundamental-ngx/core/menu';
11
11
  import { MenuComponent, MenuModule } from '@fundamental-ngx/core/menu';
12
- import { ENTER, SPACE } from '@angular/cdk/keycodes';
12
+ import * as i3 from '@angular/cdk/portal';
13
+ import { DomPortal, PortalModule } from '@angular/cdk/portal';
14
+ import * as i5 from '@fundamental-ngx/core/icon';
13
15
  import { IconModule } from '@fundamental-ngx/core/icon';
14
16
  import { PopoverModule } from '@fundamental-ngx/core/popover';
15
17
 
16
- /**
17
- * Breadcrumb link directive. Use Angular router options (such as 'routerLink' and 'queryParams') with this directive.
18
- *
19
- * ```html
20
- * <a fd-breadcrumb-link [routerLink]="'some-url'" [queryParams]="'params'">Breadcrumb Link</a>
21
- * ```
22
- */
23
- class BreadcrumbLinkDirective {
24
- constructor(_elementRef) {
25
- this._elementRef = _elementRef;
26
- /** @hidden */
27
- this.routerLink = '';
28
- }
29
- get elementRef() {
30
- return this._elementRef;
31
- }
32
- }
33
- BreadcrumbLinkDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbLinkDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
34
- BreadcrumbLinkDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: BreadcrumbLinkDirective, selector: "[fd-breadcrumb-link]", inputs: { routerLink: "routerLink" }, host: { classAttribute: "fd-breadcrumb__link" }, ngImport: i0 });
35
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbLinkDirective, decorators: [{
36
- type: Directive,
37
- args: [{
38
- // TODO to be discussed
39
- // eslint-disable-next-line @angular-eslint/directive-selector
40
- selector: '[fd-breadcrumb-link]',
41
- host: {
42
- class: 'fd-breadcrumb__link'
43
- }
44
- }]
45
- }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { routerLink: [{
46
- type: Input
47
- }] } });
48
-
49
18
  /**
50
19
  * Breadcrumb item directive. Must have child breadcrumb link directives.
51
20
  *
52
21
  * ```html
53
22
  * <fd-breadcrumb-item>
54
- * <a fd-breadcrumb-link [routerLink]="'#'">Breadcrumb Link</a>
23
+ * <a fd-link [routerLink]="'#'">Breadcrumb Link</a>
55
24
  * </fd-breadcrumb-item>
56
25
  * ```
57
26
  */
58
- class BreadcrumbItemDirective {
59
- constructor(_elementRef) {
27
+ class BreadcrumbItemComponent {
28
+ constructor(_elementRef, renderer2) {
60
29
  this._elementRef = _elementRef;
61
- /** @hidden */
62
- this.href = '';
63
- /** @hidden */
64
- this.routerLink = '';
30
+ this.renderer2 = renderer2;
31
+ this.show = () => this.renderer2.setStyle(this._elementRef.nativeElement, 'display', 'inline-block');
32
+ this.hide = () => this.renderer2.setStyle(this._elementRef.nativeElement, 'display', 'none');
65
33
  }
66
34
  /** @hidden */
67
35
  get elementRef() {
68
36
  return this._elementRef;
69
37
  }
70
38
  /** @hidden */
71
- ngAfterContentInit() {
72
- if (this.breadcrumbLink && this.breadcrumbLink.elementRef.nativeElement.getAttribute('href')) {
73
- this.href = this.breadcrumbLink.elementRef.nativeElement.getAttribute('href');
74
- }
75
- if (this.breadcrumbLink && this.breadcrumbLink.routerLink) {
76
- this.routerLink = this.breadcrumbLink.routerLink;
77
- }
39
+ get width() {
40
+ return this._elementRef.nativeElement.getBoundingClientRect().width;
41
+ }
42
+ /** @hidden */
43
+ get needsClickProxy() {
44
+ return (!!this.breadcrumbLink?.elementRef().nativeElement.getAttribute('href') || !!this.breadcrumbLink.routerLink);
78
45
  }
79
46
  }
80
- BreadcrumbItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbItemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
81
- BreadcrumbItemDirectivedir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: BreadcrumbItemDirective, selector: "fd-breadcrumb-item", host: { classAttribute: "fd-breadcrumb__item" }, queries: [{ propertyName: "breadcrumbLink", first: true, predicate: i0.forwardRef(function () { return BreadcrumbLinkDirective; }), descendants: true }], ngImport: i0 });
82
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbItemDirective, decorators: [{
83
- type: Directive,
47
+ BreadcrumbItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
48
+ BreadcrumbItemComponentcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: BreadcrumbItemComponent, selector: "fd-breadcrumb-item", host: { classAttribute: "fd-breadcrumb__item" }, queries: [{ propertyName: "breadcrumbLink", first: true, predicate: i0.forwardRef(function () { return LinkComponent; }), descendants: true }], ngImport: i0, template: '<div style="display: inline"><ng-content></ng-content></div>', isInline: true });
49
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbItemComponent, decorators: [{
50
+ type: Component,
84
51
  args: [{
85
- // TODO to be discussed
86
- // eslint-disable-next-line @angular-eslint/directive-selector
87
52
  selector: 'fd-breadcrumb-item',
53
+ template: '<div style="display: inline"><ng-content></ng-content></div>',
88
54
  host: {
89
55
  class: 'fd-breadcrumb__item'
90
56
  }
91
57
  }]
92
- }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { breadcrumbLink: [{
58
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { breadcrumbLink: [{
93
59
  type: ContentChild,
94
- args: [forwardRef(() => BreadcrumbLinkDirective)]
60
+ args: [forwardRef(() => LinkComponent)]
61
+ }] } });
62
+
63
+ class BreadcrumbHiddenItemComponent {
64
+ constructor(_cdr) {
65
+ this._cdr = _cdr;
66
+ }
67
+ /** @hidden */
68
+ ngAfterViewInit() {
69
+ if (this.breadcrumbItem.breadcrumbLink) {
70
+ this.linkContentPortal = new DomPortal(this.breadcrumbItem.breadcrumbLink.contentSpan.nativeElement);
71
+ }
72
+ this.breadcrumbItemPortal = new DomPortal(this.breadcrumbItem.elementRef.nativeElement.firstElementChild);
73
+ this._cdr.detectChanges();
74
+ }
75
+ /**
76
+ * We catch interactions with item, Enter, Space, Mouse click and Touch click,
77
+ * if original element had router link we are proxying click to that element
78
+ * */
79
+ itemClicked($event) {
80
+ if (this.breadcrumbItem.needsClickProxy) {
81
+ $event.preventDefault();
82
+ this.breadcrumbItem.breadcrumbLink.elementRef().nativeElement.click();
83
+ }
84
+ }
85
+ }
86
+ BreadcrumbHiddenItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbHiddenItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
87
+ BreadcrumbHiddenItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: BreadcrumbHiddenItemComponent, selector: "fd-breadcrumb-hidden-item", inputs: { breadcrumbItem: "breadcrumbItem" }, ngImport: i0, template: "<li fd-menu-item [disabled]=\"breadcrumbItem.breadcrumbLink ? breadcrumbItem.breadcrumbLink.disabled : false\">\n <a\n fd-menu-interactive\n (click)=\"itemClicked($event)\"\n (keydown.enter)=\"itemClicked($event)\"\n (keydown.space)=\"itemClicked($event)\"\n >\n <ng-container *ngIf=\"breadcrumbItem?.breadcrumbLink; else portalContent\">\n <ng-container *ngIf=\"breadcrumbItem.breadcrumbLink._prefixIconName\">\n <fd-menu-addon\n position=\"before\"\n [glyph]=\"breadcrumbItem.breadcrumbLink._prefixIconName\"\n ></fd-menu-addon>\n </ng-container>\n <span fd-menu-title>\n <ng-container [cdkPortalOutlet]=\"linkContentPortal\"></ng-container>\n </span>\n <ng-container *ngIf=\"breadcrumbItem.breadcrumbLink._postfixIconName\">\n <fd-menu-addon [glyph]=\"breadcrumbItem.breadcrumbLink._postfixIconName\"></fd-menu-addon>\n </ng-container>\n </ng-container>\n <ng-template #portalContent>\n <span fd-menu-title>\n <ng-container [cdkPortalOutlet]=\"breadcrumbItemPortal\"></ng-container>\n </span>\n </ng-template>\n </a>\n</li>\n", components: [{ type: i1.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { type: i1.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "glyph", "submenuIndicator", "ariaHidden"] }], directives: [{ type: i1.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MenuTitleDirective, selector: "[fd-menu-title]" }, { type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
88
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbHiddenItemComponent, decorators: [{
89
+ type: Component,
90
+ args: [{ selector: 'fd-breadcrumb-hidden-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<li fd-menu-item [disabled]=\"breadcrumbItem.breadcrumbLink ? breadcrumbItem.breadcrumbLink.disabled : false\">\n <a\n fd-menu-interactive\n (click)=\"itemClicked($event)\"\n (keydown.enter)=\"itemClicked($event)\"\n (keydown.space)=\"itemClicked($event)\"\n >\n <ng-container *ngIf=\"breadcrumbItem?.breadcrumbLink; else portalContent\">\n <ng-container *ngIf=\"breadcrumbItem.breadcrumbLink._prefixIconName\">\n <fd-menu-addon\n position=\"before\"\n [glyph]=\"breadcrumbItem.breadcrumbLink._prefixIconName\"\n ></fd-menu-addon>\n </ng-container>\n <span fd-menu-title>\n <ng-container [cdkPortalOutlet]=\"linkContentPortal\"></ng-container>\n </span>\n <ng-container *ngIf=\"breadcrumbItem.breadcrumbLink._postfixIconName\">\n <fd-menu-addon [glyph]=\"breadcrumbItem.breadcrumbLink._postfixIconName\"></fd-menu-addon>\n </ng-container>\n </ng-container>\n <ng-template #portalContent>\n <span fd-menu-title>\n <ng-container [cdkPortalOutlet]=\"breadcrumbItemPortal\"></ng-container>\n </span>\n </ng-template>\n </a>\n</li>\n" }]
91
+ }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { breadcrumbItem: [{
92
+ type: Input
95
93
  }] } });
96
94
 
97
95
  /**
@@ -100,29 +98,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
100
98
  * ```html
101
99
  * <fd-breadcrumb>
102
100
  * <fd-breadcrumb-item>
103
- * <a fd-breadcrumb-link [routerLink]="'#'">Breadcrumb Link</a>
101
+ * <a fd-link [routerLink]="'#'">Breadcrumb Link</a>
104
102
  * </fd-breadcrumb-item>
105
103
  * </fd-breadcrumb>
106
104
  * ```
107
105
  */
108
106
  class BreadcrumbComponent {
109
- constructor(elementRef, _rtlService, _contentDensityService, _cdRef) {
107
+ constructor(elementRef, _rtlService, _contentDensityService, _cdRef, _resizeObserver, _ngZone) {
110
108
  this.elementRef = elementRef;
111
109
  this._rtlService = _rtlService;
112
110
  this._contentDensityService = _contentDensityService;
113
111
  this._cdRef = _cdRef;
112
+ this._resizeObserver = _resizeObserver;
113
+ this._ngZone = _ngZone;
114
114
  /** @hidden */
115
115
  this.collapsedBreadcrumbItems = [];
116
116
  /** @hidden */
117
117
  this.placement$ = new BehaviorSubject('bottom-start');
118
- /** Whether or not to append items to the overflow dropdown in reverse order. Default is true. */
118
+ /** Whether to append items to the overflow dropdown in reverse order. Default is true. */
119
119
  this.reverse = false;
120
120
  /** @hidden */
121
121
  this._subscriptions = new Subscription();
122
- }
123
- /** @hidden */
124
- ngAfterContentInit() {
125
- this.onResize();
122
+ /** @hidden */
123
+ this._itemToSize = new Map();
126
124
  }
127
125
  /** @hidden */
128
126
  ngOnInit() {
@@ -136,6 +134,16 @@ class BreadcrumbComponent {
136
134
  }));
137
135
  }
138
136
  }
137
+ ngAfterViewInit() {
138
+ this._subscriptions.add(this.breadcrumbItems.changes
139
+ .pipe(startWith(this.breadcrumbItems), map((items) => items.toArray()), map((items) => items.map((item) => [item, item.width])), tap((itemToSize) => (this._itemToSize = new Map(itemToSize))))
140
+ .subscribe());
141
+ firstValueFrom(this._ngZone.onStable).then(() => {
142
+ this._subscriptions.add(this._resizeObserver
143
+ .observe(this.containerElement || this.elementRef.nativeElement.parentElement)
144
+ .subscribe(() => this.onResize()));
145
+ });
146
+ }
139
147
  /** @hidden */
140
148
  ngOnDestroy() {
141
149
  this._subscriptions.unsubscribe();
@@ -149,140 +157,49 @@ class BreadcrumbComponent {
149
157
  if (this.containerElement) {
150
158
  this.containerBoundary = this.containerElement.getBoundingClientRect().width;
151
159
  }
152
- /*
153
- if this is the first load and there is no previousContainerWidth,
154
- or the container boundary is smaller than the previousContainerWidth
155
- */
156
- if (!this.previousContainerWidth || this.containerBoundary < this.previousContainerWidth) {
157
- // and the breadcrumbs extend past the window
158
- if (this.elementRef.nativeElement.getBoundingClientRect().width > this.containerBoundary) {
159
- this.collapseBreadcrumbs();
160
+ let visibleSum = 0;
161
+ const breadcrumbItemComponents = this.breadcrumbItems.toArray();
162
+ let i;
163
+ for (i = breadcrumbItemComponents.length - 1; i >= 0; i--) {
164
+ const breadcrumbItem = breadcrumbItemComponents[i];
165
+ const itemSize = this._itemToSize.has(breadcrumbItem)
166
+ ? this._itemToSize.get(breadcrumbItem)
167
+ : breadcrumbItem.width;
168
+ if (visibleSum + itemSize <= this.containerBoundary) {
169
+ visibleSum += itemSize;
170
+ breadcrumbItem.show();
171
+ }
172
+ else {
173
+ break;
160
174
  }
161
175
  }
162
- else if (this.collapsedBreadcrumbItems.length) {
163
- // if the screen is getting bigger and there are collapsed breadcrumbs
164
- this.expandBreadcrumbs();
165
- }
166
- this.previousContainerWidth = this.containerBoundary;
176
+ const collapsedBreadcrumbItems = breadcrumbItemComponents.slice(0, ++i);
177
+ this.collapsedBreadcrumbItems = this.reverse ? collapsedBreadcrumbItems : collapsedBreadcrumbItems.reverse();
178
+ this.collapsedBreadcrumbItems.forEach((item) => item.hide());
167
179
  this._cdRef.detectChanges();
168
180
  }
169
181
  /** @hidden */
170
182
  keyDownHandle(event) {
171
- if (KeyUtil.isKeyCode(event, [ENTER, SPACE])) {
172
- this.menuComponent.toggle();
173
- event.preventDefault();
174
- }
175
- }
176
- /** @hidden */
177
- getContainerBoundary() {
178
- let containerBoundary = this.elementRef.nativeElement.parentElement.getBoundingClientRect().width;
179
- if (this.containerElement) {
180
- containerBoundary = this.containerElement.getBoundingClientRect().width;
181
- }
182
- return containerBoundary;
183
- }
184
- /**
185
- * @hidden
186
- *
187
- * This function moves breadcrumbs from the original QueryList of BreadCrumbItemDirectives into the array of
188
- * collapsedBreadcrumbItems.
189
- * */
190
- collapseBreadcrumbs() {
191
- let i = 0;
192
- const containerBoundary = this.getContainerBoundary();
193
- // move the breadcrumb items into a collapsed menu one by one, until the last one is inside the window
194
- while (this.elementRef.nativeElement.getBoundingClientRect().width > containerBoundary &&
195
- i < this.breadcrumbItems.length) {
196
- const breadcrumbItem = this.breadcrumbItems.filter((item, index) => index === i)[0];
197
- if (this.collapsedBreadcrumbItems.indexOf(breadcrumbItem) === -1) {
198
- this.reverse
199
- ? this.collapsedBreadcrumbItems.push(breadcrumbItem)
200
- : this.collapsedBreadcrumbItems.unshift(breadcrumbItem);
201
- }
202
- // hide the original breadcrumb items that have been moved in to the collapsed menu
203
- breadcrumbItem.elementRef.nativeElement.style.display = 'none';
204
- i++;
205
- }
206
- }
207
- /**
208
- * @hidden
209
- *
210
- * This function removes breadcrumb items from the collapsedBreadcrumbItems array and makes them visible again in the
211
- * original QueryList of BreadcrumbItemDirectives.
212
- * */
213
- expandBreadcrumbs() {
214
- let breakLoop = false;
215
- let i = 0;
216
- const originalCollapsedLength = this.collapsedBreadcrumbItems.length;
217
- while (this.fitInBoundries() && !breakLoop && i < originalCollapsedLength) {
218
- // get the most recently collapsed breadcrumb
219
- const collapsedItemToPop = this.getCollapsedItem();
220
- // find the corresponding breadcrumb from the original breadcrumb item QueryList
221
- const breadcrumbToCheck = this.getBreadcrumbToCheck(collapsedItemToPop);
222
- /*
223
- set display: 'inline-block' and visibility: 'hidden' - this way, the parent breadcrumb component's width will
224
- contain the width of the breadcrumb item we might pop, without actually making the item visible to the user
225
- */
226
- this.applyStylesToBreadcrumb(breadcrumbToCheck);
227
- if (this.fitInBoundries()) {
228
- /*
229
- if the width of the breadcrumb component is still smaller than the window width, including the
230
- breadcrumbToCheck, pop the latest collapsedBreadcrumbItem
231
- */
232
- this.popLastElement();
233
- this.makeBreadcrumbVisible(breadcrumbToCheck);
234
- }
235
- else {
236
- /*
237
- if the width of the breadcrumb component is wider than the window after making the breadcrumbToCheck's
238
- display: 'inline-block', then put it's display back to 'none' and don't pop the collapsedBreadcrumbItem
239
- */
240
- this.makeBreadcrumbInvisible(breadcrumbToCheck);
241
- breakLoop = true;
242
- }
243
- i++;
244
- }
245
- }
246
- fitInBoundries() {
247
- return this.elementRef.nativeElement.getBoundingClientRect().width < this.getContainerBoundary();
248
- }
249
- getCollapsedItem() {
250
- return this.collapsedBreadcrumbItems[this.collapsedBreadcrumbItems.length - 1];
251
- }
252
- getBreadcrumbToCheck(collapsedItemToPop) {
253
- return this.breadcrumbItems.filter((item) => item === collapsedItemToPop)[0];
254
- }
255
- applyStylesToBreadcrumb(breadcrumb) {
256
- breadcrumb.elementRef.nativeElement.style.display = 'inline-block';
257
- breadcrumb.elementRef.nativeElement.style.visibility = 'hidden';
258
- }
259
- popLastElement() {
260
- this.collapsedBreadcrumbItems.pop();
261
- // make the breadcrumb we checked visible
262
- }
263
- makeBreadcrumbVisible(breadcrumb) {
264
- breadcrumb.elementRef.nativeElement.style.visibility = 'visible';
265
- }
266
- makeBreadcrumbInvisible(breadcrumb) {
267
- breadcrumb.elementRef.nativeElement.style.display = 'none';
183
+ this.menuComponent.toggle();
184
+ event.preventDefault();
268
185
  }
269
186
  }
270
- BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i0.ElementRef }, { token: i1.RtlService, optional: true }, { token: i1.ContentDensityService, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
271
- BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: BreadcrumbComponent, selector: "fd-breadcrumb", inputs: { compact: "compact", containerElement: "containerElement", reverse: "reverse" }, host: { listeners: { "window:resize": "onResize()" }, classAttribute: "fd-breadcrumb" }, queries: [{ propertyName: "breadcrumbItems", predicate: i0.forwardRef(function () { return BreadcrumbItemDirective; }) }], viewQueries: [{ propertyName: "menuComponent", first: true, predicate: MenuComponent, descendants: true }], ngImport: i0, template: "<fd-menu #menu [compact]=\"compact\" [closeOnEscapeKey]=\"true\" [focusAutoCapture]=\"true\" [placement]=\"placement$ | async\">\n <li fd-menu-item *ngFor=\"let collapsedBreadcrumbItem of collapsedBreadcrumbItems\">\n <a\n fd-menu-interactive\n [attr.href]=\"collapsedBreadcrumbItem.href\"\n [routerLink]=\"collapsedBreadcrumbItem.routerLink\"\n >\n <span fd-menu-title>{{ collapsedBreadcrumbItem.elementRef.nativeElement.innerText }}</span>\n </a>\n </li>\n</fd-menu>\n\n<fd-breadcrumb-item *ngIf=\"collapsedBreadcrumbItems.length\" [fdMenuTrigger]=\"menu\">\n <a fd-breadcrumb-link tabindex=\"0\" class=\"fd-breadcrumb__collapsed\" (keydown)=\"keyDownHandle($event)\">\n ...\n <i role=\"presentation\" class=\"fd-breadcrumb__dropdown-icon sap-icon sap-icon--slim-arrow-down\"></i>\n </a>\n</fd-breadcrumb-item>\n\n<ng-content></ng-content>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.0-rc.128\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-breadcrumb\n .fd-breadcrumb__item\n .fd-breadcrump__link\n*/.fd-breadcrumb{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;flex-wrap:wrap;align-items:center;list-style:none}.fd-breadcrumb:before,.fd-breadcrumb:after{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;color:var(--sapContent_LabelColor)}.fd-breadcrumb__item:before,.fd-breadcrumb__item:after{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item:after{content:\"/\";color:var(--sapContent_LabelColor);margin-right:.25rem;margin-left:.25rem}.fd-breadcrumb__item:last-child:after{content:none}.fd-breadcrumb__item .fd-breadcrumb__popover-body{border:none;border-top-left-radius:.125rem;border-top-right-radius:.125rem}.fd-breadcrumb__link{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;color:var(--sapLinkColor);text-shadow:var(--sapContent_TextShadow);display:var(--fdLink_Display, inline-block);align-items:center;line-height:inherit;-webkit-text-decoration:none;-webkit-text-decoration:var(--fdLink_Text_Decoration, none);text-decoration:none;text-decoration:var(--fdLink_Text_Decoration, none);display:inline-block;transition:all .125s ease-in}.fd-breadcrumb__link:before,.fd-breadcrumb__link:after{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__link__content{-webkit-text-decoration:none;-webkit-text-decoration:var(--fdLink_Text_Content_Decoration, none);text-decoration:none;text-decoration:var(--fdLink_Text_Content_Decoration, none)}.fd-breadcrumb__link:hover,.fd-breadcrumb__link.is-hover{--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Hover, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Hover, none)}.fd-breadcrumb__link:focus,.fd-breadcrumb__link.is-focus{z-index:5;--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Focus, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Focus, none)}.fd-breadcrumb__link:active,.fd-breadcrumb__link.is-active{--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Active, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Active, none)}.fd-breadcrumb__link[aria-disabled=true],.fd-breadcrumb__link.is-disabled,.fd-breadcrumb__link:disabled{--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Disabled, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Disabled, none)}.fd-breadcrumb__link--subtle{--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Subtle, none);--fdLink_Text_Content_Decoration_Hover: var(--fdLink_Text_Content_Decoration_Subtle_Hover, none);--fdLink_Text_Content_Decoration_Active: var(--fdLink_Text_Content_Decoration_Subtle_Active, none);--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Subtle, none);--fdLink_Text_Decoration_Hover: var(--fdLink_Text_Decoration_Subtle_Hover, none);--fdLink_Text_Decoration_Active: var(--fdLink_Text_Decoration_Subtle_Active, none)}.fd-breadcrumb__link--undecorated{--fdLink_Text_Decoration: none;--fdLink_Text_Decoration_Subtle: none;--fdLink_Text_Decoration_Subtle_Hover: none;--fdLink_Text_Decoration_Subtle_Active: none;--fdLink_Text_Decoration_Hover: none;--fdLink_Text_Decoration_Focus: none;--fdLink_Text_Decoration_Active: none;--fdLink_Text_Decoration_Visited: none;--fdLink_Text_Decoration_Disabled: none;--fdLink_Text_Content_Decoration: none;--fdLink_Text_Content_Decoration_Subtle: none;--fdLink_Text_Content_Decoration_Subtle_Hover: none;--fdLink_Text_Content_Decoration_Subtle_Active: none;--fdLink_Text_Content_Decoration_Hover: none;--fdLink_Text_Content_Decoration_Focus: none;--fdLink_Text_Content_Decoration_Active: none;--fdLink_Text_Content_Decoration_Visited: none;--fdLink_Text_Content_Decoration_Disabled: none}.fd-breadcrumb__link--emphasized{font-weight:700}.fd-breadcrumb__link:visited{color:var(--sapLink_Visited_Color)}.fd-breadcrumb__link:hover,.fd-breadcrumb__link.is-hover{color:var(--sapLink_Hover_Color)}.fd-breadcrumb__link:focus,.fd-breadcrumb__link.is-focus{z-index:5;box-shadow:none;color:var(--fdLink_Text_Focus_Color);background-color:var(--fdLink_Focus_Background);border-radius:var(--fdLink_Focus_Border_Radius);text-shadow:var(--fdLink_Focus_Text_Shadow);outline-offset:var(--fdLink_Hover_Outline_Offset);outline-width:var(--fdLink_Hover_Outline_Width);outline-color:var(--fdLink_Hover_Outline_Color);outline-style:var(--fdLink_Hover_Outline_Style)}.fd-breadcrumb__link:active,.fd-breadcrumb__link.is-active{color:var(--sapLink_Active_Color)}.fd-breadcrumb__link:active:focus,.fd-breadcrumb__link:active.is-focus,.fd-breadcrumb__link.is-active:focus,.fd-breadcrumb__link.is-active.is-focus{z-index:5;background-color:transparent}.fd-breadcrumb__link--inverted{color:var(--sapLink_InvertedColor);text-shadow:none}.fd-breadcrumb__link--inverted:hover,.fd-breadcrumb__link--inverted.is-hover{color:var(--sapLink_InvertedColor)}.fd-breadcrumb__link--inverted:focus,.fd-breadcrumb__link--inverted.is-focus{z-index:5;outline-color:var(--sapContent_ContrastFocusColor)}.fd-breadcrumb__link--subtle{color:var(--sapLink_SubtleColor)}.fd-breadcrumb__link[aria-disabled=true],.fd-breadcrumb__link.is-disabled,.fd-breadcrumb__link:disabled{opacity:var(--sapContent_DisabledOpacity);color:var(--sapLinkColor);pointer-events:none}.fd-breadcrumb__link>img{vertical-align:bottom}.fd-breadcrumb__link:focus .fd-breadcrumb__dropdown-icon{color:var(--sapLink_Active_Color)}.fd-breadcrumb__link:active .fd-breadcrumb__dropdown-icon,.fd-breadcrumb__link:active:hover .fd-breadcrumb__dropdown-icon{color:var(--sapLink_Active_Color)}.fd-breadcrumb__link:hover .fd-breadcrumb__dropdown-icon{color:var(--sapLink_Hover_Color)}.fd-breadcrumb__dropdown-icon [class*=sap-icon],.fd-breadcrumb__dropdown-icon[class*=sap-icon]{color:inherit;background:inherit;font-size:inherit;border-radius:inherit;line-height:1;text-decoration:inherit;color:var(--sapLinkColor)}.fd-breadcrumb{display:inline-block;white-space:nowrap}.fd-breadcrumb .fd-breadcrumb__collapsed{cursor:pointer}\n"], components: [{ type: i2.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "compact", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { type: i2.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { type: i2.MenuTitleDirective, selector: "[fd-menu-title]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: BreadcrumbItemDirective, selector: "fd-breadcrumb-item" }, { type: i2.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { type: BreadcrumbLinkDirective, selector: "[fd-breadcrumb-link]", inputs: ["routerLink"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
187
+ BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.RtlService, optional: true }, { token: i1$1.ContentDensityService, optional: true }, { token: i0.ChangeDetectorRef }, { token: i1$1.ResizeObserverService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
188
+ BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: BreadcrumbComponent, selector: "fd-breadcrumb", inputs: { compact: "compact", containerElement: "containerElement", reverse: "reverse" }, host: { classAttribute: "fd-breadcrumb" }, queries: [{ propertyName: "breadcrumbItems", predicate: i0.forwardRef(function () { return BreadcrumbItemComponent; }) }], viewQueries: [{ propertyName: "menuComponent", first: true, predicate: MenuComponent, descendants: true }], ngImport: i0, template: "<fd-menu #menu [compact]=\"compact\" [closeOnEscapeKey]=\"true\" [focusAutoCapture]=\"true\" [placement]=\"placement$ | async\">\n <fd-breadcrumb-hidden-item\n *ngFor=\"let collapsedBreadcrumbItem of collapsedBreadcrumbItems\"\n [breadcrumbItem]=\"collapsedBreadcrumbItem\"\n >\n </fd-breadcrumb-hidden-item>\n</fd-menu>\n\n<span class=\"fd-breadcrumb__item\" *ngIf=\"collapsedBreadcrumbItems.length\" [fdMenuTrigger]=\"menu\">\n <a\n fd-link\n tabindex=\"0\"\n class=\"fd-breadcrumb__collapsed\"\n (keydown.enter)=\"keyDownHandle($event)\"\n (keydown.space)=\"keyDownHandle($event)\"\n >\n ...\n <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n </a>\n</span>\n\n<ng-content></ng-content>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.0-rc.128\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-breadcrumb\n .fd-breadcrumb__item\n .fd-breadcrump__link\n*/.fd-breadcrumb{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;flex-wrap:wrap;align-items:center;list-style:none}.fd-breadcrumb:before,.fd-breadcrumb:after{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;color:var(--sapContent_LabelColor)}.fd-breadcrumb__item:before,.fd-breadcrumb__item:after{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item:after{content:\"/\";color:var(--sapContent_LabelColor);margin-right:.25rem;margin-left:.25rem}.fd-breadcrumb__item:last-child:after{content:none}.fd-breadcrumb__item .fd-breadcrumb__popover-body{border:none;border-top-left-radius:.125rem;border-top-right-radius:.125rem}.fd-breadcrumb__link{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;color:var(--sapLinkColor);text-shadow:var(--sapContent_TextShadow);display:var(--fdLink_Display, inline-block);align-items:center;line-height:inherit;-webkit-text-decoration:none;-webkit-text-decoration:var(--fdLink_Text_Decoration, none);text-decoration:none;text-decoration:var(--fdLink_Text_Decoration, none);display:inline-block;transition:all .125s ease-in}.fd-breadcrumb__link:before,.fd-breadcrumb__link:after{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__link__content{-webkit-text-decoration:none;-webkit-text-decoration:var(--fdLink_Text_Content_Decoration, none);text-decoration:none;text-decoration:var(--fdLink_Text_Content_Decoration, none)}.fd-breadcrumb__link:hover,.fd-breadcrumb__link.is-hover{--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Hover, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Hover, none)}.fd-breadcrumb__link:focus,.fd-breadcrumb__link.is-focus{z-index:5;--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Focus, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Focus, none)}.fd-breadcrumb__link:active,.fd-breadcrumb__link.is-active{--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Active, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Active, none)}.fd-breadcrumb__link[aria-disabled=true],.fd-breadcrumb__link.is-disabled,.fd-breadcrumb__link:disabled{--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Disabled, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Disabled, none)}.fd-breadcrumb__link--subtle{--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Subtle, none);--fdLink_Text_Content_Decoration_Hover: var(--fdLink_Text_Content_Decoration_Subtle_Hover, none);--fdLink_Text_Content_Decoration_Active: var(--fdLink_Text_Content_Decoration_Subtle_Active, none);--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Subtle, none);--fdLink_Text_Decoration_Hover: var(--fdLink_Text_Decoration_Subtle_Hover, none);--fdLink_Text_Decoration_Active: var(--fdLink_Text_Decoration_Subtle_Active, none)}.fd-breadcrumb__link--undecorated{--fdLink_Text_Decoration: none;--fdLink_Text_Decoration_Subtle: none;--fdLink_Text_Decoration_Subtle_Hover: none;--fdLink_Text_Decoration_Subtle_Active: none;--fdLink_Text_Decoration_Hover: none;--fdLink_Text_Decoration_Focus: none;--fdLink_Text_Decoration_Active: none;--fdLink_Text_Decoration_Visited: none;--fdLink_Text_Decoration_Disabled: none;--fdLink_Text_Content_Decoration: none;--fdLink_Text_Content_Decoration_Subtle: none;--fdLink_Text_Content_Decoration_Subtle_Hover: none;--fdLink_Text_Content_Decoration_Subtle_Active: none;--fdLink_Text_Content_Decoration_Hover: none;--fdLink_Text_Content_Decoration_Focus: none;--fdLink_Text_Content_Decoration_Active: none;--fdLink_Text_Content_Decoration_Visited: none;--fdLink_Text_Content_Decoration_Disabled: none}.fd-breadcrumb__link--emphasized{font-weight:700}.fd-breadcrumb__link:visited{color:var(--sapLink_Visited_Color)}.fd-breadcrumb__link:hover,.fd-breadcrumb__link.is-hover{color:var(--sapLink_Hover_Color)}.fd-breadcrumb__link:focus,.fd-breadcrumb__link.is-focus{z-index:5;box-shadow:none;color:var(--fdLink_Text_Focus_Color);background-color:var(--fdLink_Focus_Background);border-radius:var(--fdLink_Focus_Border_Radius);text-shadow:var(--fdLink_Focus_Text_Shadow);outline-offset:var(--fdLink_Hover_Outline_Offset);outline-width:var(--fdLink_Hover_Outline_Width);outline-color:var(--fdLink_Hover_Outline_Color);outline-style:var(--fdLink_Hover_Outline_Style)}.fd-breadcrumb__link:active,.fd-breadcrumb__link.is-active{color:var(--sapLink_Active_Color)}.fd-breadcrumb__link:active:focus,.fd-breadcrumb__link:active.is-focus,.fd-breadcrumb__link.is-active:focus,.fd-breadcrumb__link.is-active.is-focus{z-index:5;background-color:transparent}.fd-breadcrumb__link--inverted{color:var(--sapLink_InvertedColor);text-shadow:none}.fd-breadcrumb__link--inverted:hover,.fd-breadcrumb__link--inverted.is-hover{color:var(--sapLink_InvertedColor)}.fd-breadcrumb__link--inverted:focus,.fd-breadcrumb__link--inverted.is-focus{z-index:5;outline-color:var(--sapContent_ContrastFocusColor)}.fd-breadcrumb__link--subtle{color:var(--sapLink_SubtleColor)}.fd-breadcrumb__link[aria-disabled=true],.fd-breadcrumb__link.is-disabled,.fd-breadcrumb__link:disabled{opacity:var(--sapContent_DisabledOpacity);color:var(--sapLinkColor);pointer-events:none}.fd-breadcrumb__link>img{vertical-align:bottom}.fd-breadcrumb__link:focus .fd-breadcrumb__dropdown-icon{color:var(--sapLink_Active_Color)}.fd-breadcrumb__link:active .fd-breadcrumb__dropdown-icon,.fd-breadcrumb__link:active:hover .fd-breadcrumb__dropdown-icon{color:var(--sapLink_Active_Color)}.fd-breadcrumb__link:hover .fd-breadcrumb__dropdown-icon{color:var(--sapLink_Hover_Color)}.fd-breadcrumb__dropdown-icon [class*=sap-icon],.fd-breadcrumb__dropdown-icon[class*=sap-icon]{color:inherit;background:inherit;font-size:inherit;border-radius:inherit;line-height:1;text-decoration:inherit;color:var(--sapLinkColor)}.fd-breadcrumb{display:inline-block;white-space:nowrap}.fd-breadcrumb .fd-breadcrumb__collapsed{cursor:pointer}\n"], components: [{ type: i1.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "compact", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { type: BreadcrumbHiddenItemComponent, selector: "fd-breadcrumb-hidden-item", inputs: ["breadcrumbItem"] }, { type: i4.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { type: i5.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }], pipes: { "async": i6.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
272
189
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbComponent, decorators: [{
273
190
  type: Component,
274
191
  args: [{ selector: 'fd-breadcrumb', host: {
275
192
  class: 'fd-breadcrumb'
276
- }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-menu #menu [compact]=\"compact\" [closeOnEscapeKey]=\"true\" [focusAutoCapture]=\"true\" [placement]=\"placement$ | async\">\n <li fd-menu-item *ngFor=\"let collapsedBreadcrumbItem of collapsedBreadcrumbItems\">\n <a\n fd-menu-interactive\n [attr.href]=\"collapsedBreadcrumbItem.href\"\n [routerLink]=\"collapsedBreadcrumbItem.routerLink\"\n >\n <span fd-menu-title>{{ collapsedBreadcrumbItem.elementRef.nativeElement.innerText }}</span>\n </a>\n </li>\n</fd-menu>\n\n<fd-breadcrumb-item *ngIf=\"collapsedBreadcrumbItems.length\" [fdMenuTrigger]=\"menu\">\n <a fd-breadcrumb-link tabindex=\"0\" class=\"fd-breadcrumb__collapsed\" (keydown)=\"keyDownHandle($event)\">\n ...\n <i role=\"presentation\" class=\"fd-breadcrumb__dropdown-icon sap-icon sap-icon--slim-arrow-down\"></i>\n </a>\n</fd-breadcrumb-item>\n\n<ng-content></ng-content>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.0-rc.128\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-breadcrumb\n .fd-breadcrumb__item\n .fd-breadcrump__link\n*/.fd-breadcrumb{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;flex-wrap:wrap;align-items:center;list-style:none}.fd-breadcrumb:before,.fd-breadcrumb:after{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;color:var(--sapContent_LabelColor)}.fd-breadcrumb__item:before,.fd-breadcrumb__item:after{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item:after{content:\"/\";color:var(--sapContent_LabelColor);margin-right:.25rem;margin-left:.25rem}.fd-breadcrumb__item:last-child:after{content:none}.fd-breadcrumb__item .fd-breadcrumb__popover-body{border:none;border-top-left-radius:.125rem;border-top-right-radius:.125rem}.fd-breadcrumb__link{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;color:var(--sapLinkColor);text-shadow:var(--sapContent_TextShadow);display:var(--fdLink_Display, inline-block);align-items:center;line-height:inherit;-webkit-text-decoration:none;-webkit-text-decoration:var(--fdLink_Text_Decoration, none);text-decoration:none;text-decoration:var(--fdLink_Text_Decoration, none);display:inline-block;transition:all .125s ease-in}.fd-breadcrumb__link:before,.fd-breadcrumb__link:after{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__link__content{-webkit-text-decoration:none;-webkit-text-decoration:var(--fdLink_Text_Content_Decoration, none);text-decoration:none;text-decoration:var(--fdLink_Text_Content_Decoration, none)}.fd-breadcrumb__link:hover,.fd-breadcrumb__link.is-hover{--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Hover, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Hover, none)}.fd-breadcrumb__link:focus,.fd-breadcrumb__link.is-focus{z-index:5;--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Focus, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Focus, none)}.fd-breadcrumb__link:active,.fd-breadcrumb__link.is-active{--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Active, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Active, none)}.fd-breadcrumb__link[aria-disabled=true],.fd-breadcrumb__link.is-disabled,.fd-breadcrumb__link:disabled{--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Disabled, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Disabled, none)}.fd-breadcrumb__link--subtle{--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Subtle, none);--fdLink_Text_Content_Decoration_Hover: var(--fdLink_Text_Content_Decoration_Subtle_Hover, none);--fdLink_Text_Content_Decoration_Active: var(--fdLink_Text_Content_Decoration_Subtle_Active, none);--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Subtle, none);--fdLink_Text_Decoration_Hover: var(--fdLink_Text_Decoration_Subtle_Hover, none);--fdLink_Text_Decoration_Active: var(--fdLink_Text_Decoration_Subtle_Active, none)}.fd-breadcrumb__link--undecorated{--fdLink_Text_Decoration: none;--fdLink_Text_Decoration_Subtle: none;--fdLink_Text_Decoration_Subtle_Hover: none;--fdLink_Text_Decoration_Subtle_Active: none;--fdLink_Text_Decoration_Hover: none;--fdLink_Text_Decoration_Focus: none;--fdLink_Text_Decoration_Active: none;--fdLink_Text_Decoration_Visited: none;--fdLink_Text_Decoration_Disabled: none;--fdLink_Text_Content_Decoration: none;--fdLink_Text_Content_Decoration_Subtle: none;--fdLink_Text_Content_Decoration_Subtle_Hover: none;--fdLink_Text_Content_Decoration_Subtle_Active: none;--fdLink_Text_Content_Decoration_Hover: none;--fdLink_Text_Content_Decoration_Focus: none;--fdLink_Text_Content_Decoration_Active: none;--fdLink_Text_Content_Decoration_Visited: none;--fdLink_Text_Content_Decoration_Disabled: none}.fd-breadcrumb__link--emphasized{font-weight:700}.fd-breadcrumb__link:visited{color:var(--sapLink_Visited_Color)}.fd-breadcrumb__link:hover,.fd-breadcrumb__link.is-hover{color:var(--sapLink_Hover_Color)}.fd-breadcrumb__link:focus,.fd-breadcrumb__link.is-focus{z-index:5;box-shadow:none;color:var(--fdLink_Text_Focus_Color);background-color:var(--fdLink_Focus_Background);border-radius:var(--fdLink_Focus_Border_Radius);text-shadow:var(--fdLink_Focus_Text_Shadow);outline-offset:var(--fdLink_Hover_Outline_Offset);outline-width:var(--fdLink_Hover_Outline_Width);outline-color:var(--fdLink_Hover_Outline_Color);outline-style:var(--fdLink_Hover_Outline_Style)}.fd-breadcrumb__link:active,.fd-breadcrumb__link.is-active{color:var(--sapLink_Active_Color)}.fd-breadcrumb__link:active:focus,.fd-breadcrumb__link:active.is-focus,.fd-breadcrumb__link.is-active:focus,.fd-breadcrumb__link.is-active.is-focus{z-index:5;background-color:transparent}.fd-breadcrumb__link--inverted{color:var(--sapLink_InvertedColor);text-shadow:none}.fd-breadcrumb__link--inverted:hover,.fd-breadcrumb__link--inverted.is-hover{color:var(--sapLink_InvertedColor)}.fd-breadcrumb__link--inverted:focus,.fd-breadcrumb__link--inverted.is-focus{z-index:5;outline-color:var(--sapContent_ContrastFocusColor)}.fd-breadcrumb__link--subtle{color:var(--sapLink_SubtleColor)}.fd-breadcrumb__link[aria-disabled=true],.fd-breadcrumb__link.is-disabled,.fd-breadcrumb__link:disabled{opacity:var(--sapContent_DisabledOpacity);color:var(--sapLinkColor);pointer-events:none}.fd-breadcrumb__link>img{vertical-align:bottom}.fd-breadcrumb__link:focus .fd-breadcrumb__dropdown-icon{color:var(--sapLink_Active_Color)}.fd-breadcrumb__link:active .fd-breadcrumb__dropdown-icon,.fd-breadcrumb__link:active:hover .fd-breadcrumb__dropdown-icon{color:var(--sapLink_Active_Color)}.fd-breadcrumb__link:hover .fd-breadcrumb__dropdown-icon{color:var(--sapLink_Hover_Color)}.fd-breadcrumb__dropdown-icon [class*=sap-icon],.fd-breadcrumb__dropdown-icon[class*=sap-icon]{color:inherit;background:inherit;font-size:inherit;border-radius:inherit;line-height:1;text-decoration:inherit;color:var(--sapLinkColor)}.fd-breadcrumb{display:inline-block;white-space:nowrap}.fd-breadcrumb .fd-breadcrumb__collapsed{cursor:pointer}\n"] }]
277
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.RtlService, decorators: [{
193
+ }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-menu #menu [compact]=\"compact\" [closeOnEscapeKey]=\"true\" [focusAutoCapture]=\"true\" [placement]=\"placement$ | async\">\n <fd-breadcrumb-hidden-item\n *ngFor=\"let collapsedBreadcrumbItem of collapsedBreadcrumbItems\"\n [breadcrumbItem]=\"collapsedBreadcrumbItem\"\n >\n </fd-breadcrumb-hidden-item>\n</fd-menu>\n\n<span class=\"fd-breadcrumb__item\" *ngIf=\"collapsedBreadcrumbItems.length\" [fdMenuTrigger]=\"menu\">\n <a\n fd-link\n tabindex=\"0\"\n class=\"fd-breadcrumb__collapsed\"\n (keydown.enter)=\"keyDownHandle($event)\"\n (keydown.space)=\"keyDownHandle($event)\"\n >\n ...\n <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n </a>\n</span>\n\n<ng-content></ng-content>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.0-rc.128\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-breadcrumb\n .fd-breadcrumb__item\n .fd-breadcrump__link\n*/.fd-breadcrumb{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;flex-wrap:wrap;align-items:center;list-style:none}.fd-breadcrumb:before,.fd-breadcrumb:after{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;color:var(--sapContent_LabelColor)}.fd-breadcrumb__item:before,.fd-breadcrumb__item:after{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item:after{content:\"/\";color:var(--sapContent_LabelColor);margin-right:.25rem;margin-left:.25rem}.fd-breadcrumb__item:last-child:after{content:none}.fd-breadcrumb__item .fd-breadcrumb__popover-body{border:none;border-top-left-radius:.125rem;border-top-right-radius:.125rem}.fd-breadcrumb__link{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;color:var(--sapLinkColor);text-shadow:var(--sapContent_TextShadow);display:var(--fdLink_Display, inline-block);align-items:center;line-height:inherit;-webkit-text-decoration:none;-webkit-text-decoration:var(--fdLink_Text_Decoration, none);text-decoration:none;text-decoration:var(--fdLink_Text_Decoration, none);display:inline-block;transition:all .125s ease-in}.fd-breadcrumb__link:before,.fd-breadcrumb__link:after{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__link__content{-webkit-text-decoration:none;-webkit-text-decoration:var(--fdLink_Text_Content_Decoration, none);text-decoration:none;text-decoration:var(--fdLink_Text_Content_Decoration, none)}.fd-breadcrumb__link:hover,.fd-breadcrumb__link.is-hover{--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Hover, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Hover, none)}.fd-breadcrumb__link:focus,.fd-breadcrumb__link.is-focus{z-index:5;--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Focus, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Focus, none)}.fd-breadcrumb__link:active,.fd-breadcrumb__link.is-active{--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Active, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Active, none)}.fd-breadcrumb__link[aria-disabled=true],.fd-breadcrumb__link.is-disabled,.fd-breadcrumb__link:disabled{--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Disabled, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Disabled, none)}.fd-breadcrumb__link--subtle{--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Subtle, none);--fdLink_Text_Content_Decoration_Hover: var(--fdLink_Text_Content_Decoration_Subtle_Hover, none);--fdLink_Text_Content_Decoration_Active: var(--fdLink_Text_Content_Decoration_Subtle_Active, none);--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Subtle, none);--fdLink_Text_Decoration_Hover: var(--fdLink_Text_Decoration_Subtle_Hover, none);--fdLink_Text_Decoration_Active: var(--fdLink_Text_Decoration_Subtle_Active, none)}.fd-breadcrumb__link--undecorated{--fdLink_Text_Decoration: none;--fdLink_Text_Decoration_Subtle: none;--fdLink_Text_Decoration_Subtle_Hover: none;--fdLink_Text_Decoration_Subtle_Active: none;--fdLink_Text_Decoration_Hover: none;--fdLink_Text_Decoration_Focus: none;--fdLink_Text_Decoration_Active: none;--fdLink_Text_Decoration_Visited: none;--fdLink_Text_Decoration_Disabled: none;--fdLink_Text_Content_Decoration: none;--fdLink_Text_Content_Decoration_Subtle: none;--fdLink_Text_Content_Decoration_Subtle_Hover: none;--fdLink_Text_Content_Decoration_Subtle_Active: none;--fdLink_Text_Content_Decoration_Hover: none;--fdLink_Text_Content_Decoration_Focus: none;--fdLink_Text_Content_Decoration_Active: none;--fdLink_Text_Content_Decoration_Visited: none;--fdLink_Text_Content_Decoration_Disabled: none}.fd-breadcrumb__link--emphasized{font-weight:700}.fd-breadcrumb__link:visited{color:var(--sapLink_Visited_Color)}.fd-breadcrumb__link:hover,.fd-breadcrumb__link.is-hover{color:var(--sapLink_Hover_Color)}.fd-breadcrumb__link:focus,.fd-breadcrumb__link.is-focus{z-index:5;box-shadow:none;color:var(--fdLink_Text_Focus_Color);background-color:var(--fdLink_Focus_Background);border-radius:var(--fdLink_Focus_Border_Radius);text-shadow:var(--fdLink_Focus_Text_Shadow);outline-offset:var(--fdLink_Hover_Outline_Offset);outline-width:var(--fdLink_Hover_Outline_Width);outline-color:var(--fdLink_Hover_Outline_Color);outline-style:var(--fdLink_Hover_Outline_Style)}.fd-breadcrumb__link:active,.fd-breadcrumb__link.is-active{color:var(--sapLink_Active_Color)}.fd-breadcrumb__link:active:focus,.fd-breadcrumb__link:active.is-focus,.fd-breadcrumb__link.is-active:focus,.fd-breadcrumb__link.is-active.is-focus{z-index:5;background-color:transparent}.fd-breadcrumb__link--inverted{color:var(--sapLink_InvertedColor);text-shadow:none}.fd-breadcrumb__link--inverted:hover,.fd-breadcrumb__link--inverted.is-hover{color:var(--sapLink_InvertedColor)}.fd-breadcrumb__link--inverted:focus,.fd-breadcrumb__link--inverted.is-focus{z-index:5;outline-color:var(--sapContent_ContrastFocusColor)}.fd-breadcrumb__link--subtle{color:var(--sapLink_SubtleColor)}.fd-breadcrumb__link[aria-disabled=true],.fd-breadcrumb__link.is-disabled,.fd-breadcrumb__link:disabled{opacity:var(--sapContent_DisabledOpacity);color:var(--sapLinkColor);pointer-events:none}.fd-breadcrumb__link>img{vertical-align:bottom}.fd-breadcrumb__link:focus .fd-breadcrumb__dropdown-icon{color:var(--sapLink_Active_Color)}.fd-breadcrumb__link:active .fd-breadcrumb__dropdown-icon,.fd-breadcrumb__link:active:hover .fd-breadcrumb__dropdown-icon{color:var(--sapLink_Active_Color)}.fd-breadcrumb__link:hover .fd-breadcrumb__dropdown-icon{color:var(--sapLink_Hover_Color)}.fd-breadcrumb__dropdown-icon [class*=sap-icon],.fd-breadcrumb__dropdown-icon[class*=sap-icon]{color:inherit;background:inherit;font-size:inherit;border-radius:inherit;line-height:1;text-decoration:inherit;color:var(--sapLinkColor)}.fd-breadcrumb{display:inline-block;white-space:nowrap}.fd-breadcrumb .fd-breadcrumb__collapsed{cursor:pointer}\n"] }]
194
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.RtlService, decorators: [{
278
195
  type: Optional
279
- }] }, { type: i1.ContentDensityService, decorators: [{
196
+ }] }, { type: i1$1.ContentDensityService, decorators: [{
280
197
  type: Optional
281
- }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { compact: [{
198
+ }] }, { type: i0.ChangeDetectorRef }, { type: i1$1.ResizeObserverService }, { type: i0.NgZone }]; }, propDecorators: { compact: [{
282
199
  type: Input
283
200
  }], breadcrumbItems: [{
284
201
  type: ContentChildren,
285
- args: [forwardRef(() => BreadcrumbItemDirective)]
202
+ args: [forwardRef(() => BreadcrumbItemComponent)]
286
203
  }], menuComponent: [{
287
204
  type: ViewChild,
288
205
  args: [MenuComponent]
@@ -290,22 +207,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
290
207
  type: Input
291
208
  }], reverse: [{
292
209
  type: Input
293
- }], onResize: [{
294
- type: HostListener,
295
- args: ['window:resize', []]
296
210
  }] } });
297
211
 
298
212
  class BreadcrumbModule {
299
213
  }
300
214
  BreadcrumbModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
301
- BreadcrumbModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbModule, declarations: [BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbLinkDirective], imports: [CommonModule, IconModule, PopoverModule, MenuModule, RouterModule], exports: [BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbLinkDirective] });
302
- BreadcrumbModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbModule, imports: [[CommonModule, IconModule, PopoverModule, MenuModule, RouterModule]] });
215
+ BreadcrumbModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbModule, declarations: [BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbHiddenItemComponent], imports: [CommonModule, IconModule, PopoverModule, MenuModule, LinkModule, PortalModule, PipeModule], exports: [BreadcrumbComponent, BreadcrumbItemComponent, LinkModule] });
216
+ BreadcrumbModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbModule, imports: [[CommonModule, IconModule, PopoverModule, MenuModule, LinkModule, PortalModule, PipeModule], LinkModule] });
303
217
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbModule, decorators: [{
304
218
  type: NgModule,
305
219
  args: [{
306
- imports: [CommonModule, IconModule, PopoverModule, MenuModule, RouterModule],
307
- exports: [BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbLinkDirective],
308
- declarations: [BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbLinkDirective]
220
+ imports: [CommonModule, IconModule, PopoverModule, MenuModule, LinkModule, PortalModule, PipeModule],
221
+ exports: [BreadcrumbComponent, BreadcrumbItemComponent, LinkModule],
222
+ declarations: [BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbHiddenItemComponent]
309
223
  }]
310
224
  }] });
311
225
 
@@ -313,5 +227,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
313
227
  * Generated bundle index. Do not edit.
314
228
  */
315
229
 
316
- export { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbLinkDirective, BreadcrumbModule };
230
+ export { BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule };
317
231
  //# sourceMappingURL=fundamental-ngx-core-breadcrumb.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"fundamental-ngx-core-breadcrumb.mjs","sources":["../../../../../libs/core/src/lib/breadcrumb/breadcrumb-link.directive.ts","../../../../../libs/core/src/lib/breadcrumb/breadcrumb-item.directive.ts","../../../../../libs/core/src/lib/breadcrumb/breadcrumb.component.ts","../../../../../libs/core/src/lib/breadcrumb/breadcrumb.component.html","../../../../../libs/core/src/lib/breadcrumb/breadcrumb.module.ts","../../../../../libs/core/src/lib/breadcrumb/fundamental-ngx-core-breadcrumb.ts"],"sourcesContent":["import { Directive, ElementRef, Input } from '@angular/core';\n\n/**\n * Breadcrumb link directive. Use Angular router options (such as 'routerLink' and 'queryParams') with this directive.\n *\n * ```html\n * <a fd-breadcrumb-link [routerLink]=\"'some-url'\" [queryParams]=\"'params'\">Breadcrumb Link</a>\n * ```\n */\n@Directive({\n // TODO to be discussed\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: '[fd-breadcrumb-link]',\n host: {\n class: 'fd-breadcrumb__link'\n }\n})\nexport class BreadcrumbLinkDirective {\n /** @hidden */\n @Input()\n routerLink = '';\n\n get elementRef(): ElementRef {\n return this._elementRef;\n }\n\n constructor(private _elementRef: ElementRef) {}\n}\n","import { AfterContentInit, ContentChild, Directive, ElementRef, forwardRef } from '@angular/core';\nimport { BreadcrumbLinkDirective } from './breadcrumb-link.directive';\n\n/**\n * Breadcrumb item directive. Must have child breadcrumb link directives.\n *\n * ```html\n * <fd-breadcrumb-item>\n * <a fd-breadcrumb-link [routerLink]=\"'#'\">Breadcrumb Link</a>\n * </fd-breadcrumb-item>\n * ```\n */\n@Directive({\n // TODO to be discussed\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: 'fd-breadcrumb-item',\n host: {\n class: 'fd-breadcrumb__item'\n }\n})\nexport class BreadcrumbItemDirective implements AfterContentInit {\n /** @hidden */\n get elementRef(): ElementRef {\n return this._elementRef;\n }\n\n /** @hidden */\n href = '';\n\n /** @hidden */\n routerLink = '';\n\n /** @hidden */\n @ContentChild(forwardRef(() => BreadcrumbLinkDirective))\n breadcrumbLink: BreadcrumbLinkDirective;\n\n constructor(private _elementRef: ElementRef) {}\n\n /** @hidden */\n ngAfterContentInit(): void {\n if (this.breadcrumbLink && this.breadcrumbLink.elementRef.nativeElement.getAttribute('href')) {\n this.href = this.breadcrumbLink.elementRef.nativeElement.getAttribute('href');\n }\n if (this.breadcrumbLink && this.breadcrumbLink.routerLink) {\n this.routerLink = this.breadcrumbLink.routerLink;\n }\n }\n}\n","import {\n AfterContentInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n ElementRef,\n forwardRef,\n HostListener,\n Input,\n OnDestroy,\n OnInit,\n Optional,\n QueryList,\n ViewChild,\n ViewEncapsulation\n} from '@angular/core';\nimport { BreadcrumbItemDirective } from './breadcrumb-item.directive';\nimport { RtlService } from '@fundamental-ngx/core/utils';\nimport { BehaviorSubject, Subscription } from 'rxjs';\nimport { KeyUtil } from '@fundamental-ngx/core/utils';\nimport { MenuComponent } from '@fundamental-ngx/core/menu';\nimport { ENTER, SPACE } from '@angular/cdk/keycodes';\nimport { Placement } from '@fundamental-ngx/core/shared';\nimport { ContentDensityService } from '@fundamental-ngx/core/utils';\n\n/**\n * Breadcrumb parent wrapper directive. Must have breadcrumb item child directives.\n *\n * ```html\n * <fd-breadcrumb>\n * <fd-breadcrumb-item>\n * <a fd-breadcrumb-link [routerLink]=\"'#'\">Breadcrumb Link</a>\n * </fd-breadcrumb-item>\n * </fd-breadcrumb>\n * ```\n */\n@Component({\n // TODO to be discussed\n // eslint-disable-next-line\n selector: 'fd-breadcrumb',\n host: {\n class: 'fd-breadcrumb'\n },\n templateUrl: './breadcrumb.component.html',\n styleUrls: ['./breadcrumb.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class BreadcrumbComponent implements AfterContentInit, OnInit, OnDestroy {\n /** Whenever links wrapped inside overflow should be displayed in compact mode */\n @Input()\n compact?: boolean;\n\n /** @hidden */\n @ContentChildren(forwardRef(() => BreadcrumbItemDirective))\n breadcrumbItems: QueryList<BreadcrumbItemDirective>;\n\n /** @hidden */\n @ViewChild(MenuComponent)\n menuComponent: MenuComponent;\n\n /** @hidden */\n collapsedBreadcrumbItems: Array<BreadcrumbItemDirective> = [];\n\n /** @hidden used to compare to the current width to know whether to collapse or expand breadcrumbs */\n previousContainerWidth: number;\n\n /** @hidden */\n placement$ = new BehaviorSubject<Placement>('bottom-start');\n\n /**\n * The element to act as the breadcrumb container. When provided, the breadcrumb's responsive collapsing behavior\n * performs better. When not provided, the immediate parent element's width will be used.\n */\n @Input()\n containerElement: HTMLElement;\n\n /** Whether or not to append items to the overflow dropdown in reverse order. Default is true. */\n @Input()\n reverse = false;\n\n /** @hidden */\n containerBoundary: number;\n\n /** @hidden */\n private _subscriptions = new Subscription();\n\n constructor(\n public elementRef: ElementRef,\n @Optional() private _rtlService: RtlService,\n @Optional() private _contentDensityService: ContentDensityService,\n private _cdRef: ChangeDetectorRef\n ) {}\n\n /** @hidden */\n ngAfterContentInit(): void {\n this.onResize();\n }\n\n /** @hidden */\n ngOnInit(): void {\n if (this._rtlService) {\n this._subscriptions.add(\n this._rtlService.rtl.subscribe((value) => this.placement$.next(value ? 'bottom-end' : 'bottom-start'))\n );\n }\n if (this.compact === undefined && this._contentDensityService) {\n this._subscriptions.add(\n this._contentDensityService._isCompactDensity.subscribe((isCompact) => {\n this.compact = isCompact;\n this._cdRef.markForCheck();\n })\n );\n }\n }\n\n /** @hidden */\n ngOnDestroy(): void {\n this._subscriptions.unsubscribe();\n }\n\n /** @hidden */\n @HostListener('window:resize', [])\n onResize(): void {\n if (!this.elementRef.nativeElement.parentElement) {\n return;\n }\n this.containerBoundary = this.elementRef.nativeElement.parentElement.getBoundingClientRect().width;\n if (this.containerElement) {\n this.containerBoundary = this.containerElement.getBoundingClientRect().width;\n }\n /*\n if this is the first load and there is no previousContainerWidth,\n or the container boundary is smaller than the previousContainerWidth\n */\n if (!this.previousContainerWidth || this.containerBoundary < this.previousContainerWidth) {\n // and the breadcrumbs extend past the window\n if (this.elementRef.nativeElement.getBoundingClientRect().width > this.containerBoundary) {\n this.collapseBreadcrumbs();\n }\n } else if (this.collapsedBreadcrumbItems.length) {\n // if the screen is getting bigger and there are collapsed breadcrumbs\n this.expandBreadcrumbs();\n }\n this.previousContainerWidth = this.containerBoundary;\n this._cdRef.detectChanges();\n }\n\n /** @hidden */\n keyDownHandle(event: KeyboardEvent): void {\n if (KeyUtil.isKeyCode(event, [ENTER, SPACE])) {\n this.menuComponent.toggle();\n event.preventDefault();\n }\n }\n\n /** @hidden */\n getContainerBoundary(): number {\n let containerBoundary = this.elementRef.nativeElement.parentElement.getBoundingClientRect().width;\n if (this.containerElement) {\n containerBoundary = this.containerElement.getBoundingClientRect().width;\n }\n\n return containerBoundary;\n }\n\n /**\n * @hidden\n *\n * This function moves breadcrumbs from the original QueryList of BreadCrumbItemDirectives into the array of\n * collapsedBreadcrumbItems.\n * */\n collapseBreadcrumbs(): void {\n let i = 0;\n const containerBoundary = this.getContainerBoundary();\n // move the breadcrumb items into a collapsed menu one by one, until the last one is inside the window\n while (\n this.elementRef.nativeElement.getBoundingClientRect().width > containerBoundary &&\n i < this.breadcrumbItems.length\n ) {\n const breadcrumbItem = this.breadcrumbItems.filter((item, index) => index === i)[0];\n if (this.collapsedBreadcrumbItems.indexOf(breadcrumbItem) === -1) {\n this.reverse\n ? this.collapsedBreadcrumbItems.push(breadcrumbItem)\n : this.collapsedBreadcrumbItems.unshift(breadcrumbItem);\n }\n // hide the original breadcrumb items that have been moved in to the collapsed menu\n breadcrumbItem.elementRef.nativeElement.style.display = 'none';\n i++;\n }\n }\n\n /**\n * @hidden\n *\n * This function removes breadcrumb items from the collapsedBreadcrumbItems array and makes them visible again in the\n * original QueryList of BreadcrumbItemDirectives.\n * */\n expandBreadcrumbs(): void {\n let breakLoop = false;\n let i = 0;\n const originalCollapsedLength = this.collapsedBreadcrumbItems.length;\n while (this.fitInBoundries() && !breakLoop && i < originalCollapsedLength) {\n // get the most recently collapsed breadcrumb\n const collapsedItemToPop = this.getCollapsedItem();\n // find the corresponding breadcrumb from the original breadcrumb item QueryList\n const breadcrumbToCheck = this.getBreadcrumbToCheck(collapsedItemToPop);\n /*\n set display: 'inline-block' and visibility: 'hidden' - this way, the parent breadcrumb component's width will\n contain the width of the breadcrumb item we might pop, without actually making the item visible to the user\n */\n this.applyStylesToBreadcrumb(breadcrumbToCheck);\n\n if (this.fitInBoundries()) {\n /*\n if the width of the breadcrumb component is still smaller than the window width, including the\n breadcrumbToCheck, pop the latest collapsedBreadcrumbItem\n */\n this.popLastElement();\n this.makeBreadcrumbVisible(breadcrumbToCheck);\n } else {\n /*\n if the width of the breadcrumb component is wider than the window after making the breadcrumbToCheck's\n display: 'inline-block', then put it's display back to 'none' and don't pop the collapsedBreadcrumbItem\n */\n this.makeBreadcrumbInvisible(breadcrumbToCheck);\n breakLoop = true;\n }\n i++;\n }\n }\n\n private fitInBoundries(): boolean {\n return this.elementRef.nativeElement.getBoundingClientRect().width < this.getContainerBoundary();\n }\n\n private getCollapsedItem(): BreadcrumbItemDirective {\n return this.collapsedBreadcrumbItems[this.collapsedBreadcrumbItems.length - 1];\n }\n\n private getBreadcrumbToCheck(collapsedItemToPop: BreadcrumbItemDirective): BreadcrumbItemDirective {\n return this.breadcrumbItems.filter((item) => item === collapsedItemToPop)[0];\n }\n\n private applyStylesToBreadcrumb(breadcrumb: BreadcrumbItemDirective): void {\n breadcrumb.elementRef.nativeElement.style.display = 'inline-block';\n breadcrumb.elementRef.nativeElement.style.visibility = 'hidden';\n }\n\n private popLastElement(): void {\n this.collapsedBreadcrumbItems.pop();\n // make the breadcrumb we checked visible\n }\n\n private makeBreadcrumbVisible(breadcrumb: BreadcrumbItemDirective): void {\n breadcrumb.elementRef.nativeElement.style.visibility = 'visible';\n }\n\n private makeBreadcrumbInvisible(breadcrumb: BreadcrumbItemDirective): void {\n breadcrumb.elementRef.nativeElement.style.display = 'none';\n }\n}\n","<fd-menu #menu [compact]=\"compact\" [closeOnEscapeKey]=\"true\" [focusAutoCapture]=\"true\" [placement]=\"placement$ | async\">\n <li fd-menu-item *ngFor=\"let collapsedBreadcrumbItem of collapsedBreadcrumbItems\">\n <a\n fd-menu-interactive\n [attr.href]=\"collapsedBreadcrumbItem.href\"\n [routerLink]=\"collapsedBreadcrumbItem.routerLink\"\n >\n <span fd-menu-title>{{ collapsedBreadcrumbItem.elementRef.nativeElement.innerText }}</span>\n </a>\n </li>\n</fd-menu>\n\n<fd-breadcrumb-item *ngIf=\"collapsedBreadcrumbItems.length\" [fdMenuTrigger]=\"menu\">\n <a fd-breadcrumb-link tabindex=\"0\" class=\"fd-breadcrumb__collapsed\" (keydown)=\"keyDownHandle($event)\">\n ...\n <i role=\"presentation\" class=\"fd-breadcrumb__dropdown-icon sap-icon sap-icon--slim-arrow-down\"></i>\n </a>\n</fd-breadcrumb-item>\n\n<ng-content></ng-content>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { RouterModule } from '@angular/router';\n\nimport { BreadcrumbComponent } from './breadcrumb.component';\nimport { BreadcrumbItemDirective } from './breadcrumb-item.directive';\nimport { BreadcrumbLinkDirective } from './breadcrumb-link.directive';\nimport { IconModule } from '@fundamental-ngx/core/icon';\nimport { PopoverModule } from '@fundamental-ngx/core/popover';\nimport { MenuModule } from '@fundamental-ngx/core/menu';\n\n@NgModule({\n imports: [CommonModule, IconModule, PopoverModule, MenuModule, RouterModule],\n exports: [BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbLinkDirective],\n declarations: [BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbLinkDirective]\n})\nexport class BreadcrumbModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAEA;;;;;;;MAea,uBAAuB;IAShC,YAAoB,WAAuB;QAAvB,gBAAW,GAAX,WAAW,CAAY;;QAN3C,eAAU,GAAG,EAAE,CAAC;KAM+B;IAJ/C,IAAI,UAAU;QACV,OAAO,IAAI,CAAC,WAAW,CAAC;KAC3B;;oHAPQ,uBAAuB;wGAAvB,uBAAuB;2FAAvB,uBAAuB;kBARnC,SAAS;mBAAC;;;oBAGP,QAAQ,EAAE,sBAAsB;oBAChC,IAAI,EAAE;wBACF,KAAK,EAAE,qBAAqB;qBAC/B;iBACJ;iGAIG,UAAU;sBADT,KAAK;;;AChBV;;;;;;;;;MAiBa,uBAAuB;IAgBhC,YAAoB,WAAuB;QAAvB,gBAAW,GAAX,WAAW,CAAY;;QAT3C,SAAI,GAAG,EAAE,CAAC;;QAGV,eAAU,GAAG,EAAE,CAAC;KAM+B;;IAd/C,IAAI,UAAU;QACV,OAAO,IAAI,CAAC,WAAW,CAAC;KAC3B;;IAeD,kBAAkB;QACd,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;YAC1F,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;SACjF;QACD,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE;YACvD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC;SACpD;KACJ;;oHA1BQ,uBAAuB;wGAAvB,uBAAuB,0LAaD,uBAAuB;2FAb7C,uBAAuB;kBARnC,SAAS;mBAAC;;;oBAGP,QAAQ,EAAE,oBAAoB;oBAC9B,IAAI,EAAE;wBACF,KAAK,EAAE,qBAAqB;qBAC/B;iBACJ;iGAeG,cAAc;sBADb,YAAY;uBAAC,UAAU,CAAC,MAAM,uBAAuB,CAAC;;;ACP3D;;;;;;;;;;;MAuBa,mBAAmB;IAuC5B,YACW,UAAsB,EACT,WAAuB,EACvB,sBAA6C,EACzD,MAAyB;QAH1B,eAAU,GAAV,UAAU,CAAY;QACT,gBAAW,GAAX,WAAW,CAAY;QACvB,2BAAsB,GAAtB,sBAAsB,CAAuB;QACzD,WAAM,GAAN,MAAM,CAAmB;;QA7BrC,6BAAwB,GAAmC,EAAE,CAAC;;QAM9D,eAAU,GAAG,IAAI,eAAe,CAAY,cAAc,CAAC,CAAC;;QAW5D,YAAO,GAAG,KAAK,CAAC;;QAMR,mBAAc,GAAG,IAAI,YAAY,EAAE,CAAC;KAOxC;;IAGJ,kBAAkB;QACd,IAAI,CAAC,QAAQ,EAAE,CAAC;KACnB;;IAGD,QAAQ;QACJ,IAAI,IAAI,CAAC,WAAW,EAAE;YAClB,IAAI,CAAC,cAAc,CAAC,GAAG,CACnB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,GAAG,YAAY,GAAG,cAAc,CAAC,CAAC,CACzG,CAAC;SACL;QACD,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC3D,IAAI,CAAC,cAAc,CAAC,GAAG,CACnB,IAAI,CAAC,sBAAsB,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,SAAS;gBAC9D,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;gBACzB,IAAI,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC;aAC9B,CAAC,CACL,CAAC;SACL;KACJ;;IAGD,WAAW;QACP,IAAI,CAAC,cAAc,CAAC,WAAW,EAAE,CAAC;KACrC;;IAID,QAAQ;QACJ,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,EAAE;YAC9C,OAAO;SACV;QACD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QACnG,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACvB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;SAChF;;;;;QAKD,IAAI,CAAC,IAAI,CAAC,sBAAsB,IAAI,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,sBAAsB,EAAE;;YAEtF,IAAI,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC,iBAAiB,EAAE;gBACtF,IAAI,CAAC,mBAAmB,EAAE,CAAC;aAC9B;SACJ;aAAM,IAAI,IAAI,CAAC,wBAAwB,CAAC,MAAM,EAAE;;YAE7C,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC5B;QACD,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,iBAAiB,CAAC;QACrD,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC;KAC/B;;IAGD,aAAa,CAAC,KAAoB;QAC9B,IAAI,OAAO,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE;YAC1C,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;YAC5B,KAAK,CAAC,cAAc,EAAE,CAAC;SAC1B;KACJ;;IAGD,oBAAoB;QAChB,IAAI,iBAAiB,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QAClG,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACvB,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;SAC3E;QAED,OAAO,iBAAiB,CAAC;KAC5B;;;;;;;IAQD,mBAAmB;QACf,IAAI,CAAC,GAAG,CAAC,CAAC;QACV,MAAM,iBAAiB,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;;QAEtD,OACI,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,iBAAiB;YAC/E,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,EACjC;YACE,MAAM,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,KAAK,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACpF,IAAI,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,EAAE;gBAC9D,IAAI,CAAC,OAAO;sBACN,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,cAAc,CAAC;sBAClD,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;aAC/D;;YAED,cAAc,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YAC/D,CAAC,EAAE,CAAC;SACP;KACJ;;;;;;;IAQD,iBAAiB;QACb,IAAI,SAAS,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,GAAG,CAAC,CAAC;QACV,MAAM,uBAAuB,GAAG,IAAI,CAAC,wBAAwB,CAAC,MAAM,CAAC;QACrE,OAAO,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,GAAG,uBAAuB,EAAE;;YAEvE,MAAM,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;;YAEnD,MAAM,iBAAiB,GAAG,IAAI,CAAC,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;;;;;YAKxE,IAAI,CAAC,uBAAuB,CAAC,iBAAiB,CAAC,CAAC;YAEhD,IAAI,IAAI,CAAC,cAAc,EAAE,EAAE;;;;;gBAKvB,IAAI,CAAC,cAAc,EAAE,CAAC;gBACtB,IAAI,CAAC,qBAAqB,CAAC,iBAAiB,CAAC,CAAC;aACjD;iBAAM;;;;;gBAKH,IAAI,CAAC,uBAAuB,CAAC,iBAAiB,CAAC,CAAC;gBAChD,SAAS,GAAG,IAAI,CAAC;aACpB;YACD,CAAC,EAAE,CAAC;SACP;KACJ;IAEO,cAAc;QAClB,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;KACpG;IAEO,gBAAgB;QACpB,OAAO,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,wBAAwB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;KAClF;IAEO,oBAAoB,CAAC,kBAA2C;QACpE,OAAO,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,KAAK,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;KAChF;IAEO,uBAAuB,CAAC,UAAmC;QAC/D,UAAU,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,GAAG,cAAc,CAAC;QACnE,UAAU,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;KACnE;IAEO,cAAc;QAClB,IAAI,CAAC,wBAAwB,CAAC,GAAG,EAAE,CAAC;;KAEvC;IAEO,qBAAqB,CAAC,UAAmC;QAC7D,UAAU,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAC;KACpE;IAEO,uBAAuB,CAAC,UAAmC;QAC/D,UAAU,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;KAC9D;;gHApNQ,mBAAmB;oGAAnB,mBAAmB,2SAMM,uBAAuB,gFAI9C,aAAa,gDC3D5B,w6BAoBA;2FD6Ba,mBAAmB;kBAZ/B,SAAS;+BAGI,eAAe,QACnB;wBACF,KAAK,EAAE,eAAe;qBACzB,iBAGc,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM;;0BA2C1C,QAAQ;;0BACR,QAAQ;4EAvCb,OAAO;sBADN,KAAK;gBAKN,eAAe;sBADd,eAAe;uBAAC,UAAU,CAAC,MAAM,uBAAuB,CAAC;gBAK1D,aAAa;sBADZ,SAAS;uBAAC,aAAa;gBAiBxB,gBAAgB;sBADf,KAAK;gBAKN,OAAO;sBADN,KAAK;gBA6CN,QAAQ;sBADP,YAAY;uBAAC,eAAe,EAAE,EAAE;;;ME3GxB,gBAAgB;;6GAAhB,gBAAgB;8GAAhB,gBAAgB,iBAFV,mBAAmB,EAAE,uBAAuB,EAAE,uBAAuB,aAF1E,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,aACjE,mBAAmB,EAAE,uBAAuB,EAAE,uBAAuB;8GAGtE,gBAAgB,YAJhB,CAAC,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,CAAC;2FAInE,gBAAgB;kBAL5B,QAAQ;mBAAC;oBACN,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,CAAC;oBAC5E,OAAO,EAAE,CAAC,mBAAmB,EAAE,uBAAuB,EAAE,uBAAuB,CAAC;oBAChF,YAAY,EAAE,CAAC,mBAAmB,EAAE,uBAAuB,EAAE,uBAAuB,CAAC;iBACxF;;;ACfD;;;;;;"}
1
+ {"version":3,"file":"fundamental-ngx-core-breadcrumb.mjs","sources":["../../../../../libs/core/src/lib/breadcrumb/breadcrumb-item.component.ts","../../../../../libs/core/src/lib/breadcrumb/breadcrumb-hidden-item/breadcrumb-hidden-item.component.ts","../../../../../libs/core/src/lib/breadcrumb/breadcrumb-hidden-item/breadcrumb-hidden-item.component.html","../../../../../libs/core/src/lib/breadcrumb/breadcrumb.component.ts","../../../../../libs/core/src/lib/breadcrumb/breadcrumb.component.html","../../../../../libs/core/src/lib/breadcrumb/breadcrumb.module.ts","../../../../../libs/core/src/lib/breadcrumb/fundamental-ngx-core-breadcrumb.ts"],"sourcesContent":["import { Component, ContentChild, ElementRef, forwardRef, Renderer2 } from '@angular/core';\nimport { LinkComponent } from '@fundamental-ngx/core/link';\n\n/**\n * Breadcrumb item directive. Must have child breadcrumb link directives.\n *\n * ```html\n * <fd-breadcrumb-item>\n * <a fd-link [routerLink]=\"'#'\">Breadcrumb Link</a>\n * </fd-breadcrumb-item>\n * ```\n */\n@Component({\n selector: 'fd-breadcrumb-item',\n template: '<div style=\"display: inline\"><ng-content></ng-content></div>',\n host: {\n class: 'fd-breadcrumb__item'\n }\n})\nexport class BreadcrumbItemComponent {\n /** @hidden */\n get elementRef(): ElementRef<HTMLElement> {\n return this._elementRef;\n }\n\n /** @hidden */\n @ContentChild(forwardRef(() => LinkComponent))\n breadcrumbLink: LinkComponent;\n\n /** @hidden */\n get width(): number {\n return this._elementRef.nativeElement.getBoundingClientRect().width;\n }\n\n constructor(private _elementRef: ElementRef<HTMLElement>, private renderer2: Renderer2) {}\n\n /** @hidden */\n get needsClickProxy(): boolean {\n return (\n !!this.breadcrumbLink?.elementRef().nativeElement.getAttribute('href') || !!this.breadcrumbLink.routerLink\n );\n }\n\n show = (): void => this.renderer2.setStyle(this._elementRef.nativeElement, 'display', 'inline-block');\n hide = (): void => this.renderer2.setStyle(this._elementRef.nativeElement, 'display', 'none');\n}\n","import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';\nimport { BreadcrumbItemComponent } from '../breadcrumb-item.component';\nimport { DomPortal } from '@angular/cdk/portal';\n\n@Component({\n selector: 'fd-breadcrumb-hidden-item',\n templateUrl: './breadcrumb-hidden-item.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class BreadcrumbHiddenItemComponent implements AfterViewInit {\n /** Breadcrumb item ref, which is hidden from user and needs to be transformed into menu item */\n @Input()\n breadcrumbItem: BreadcrumbItemComponent;\n\n /** In case there is no link in Item and breadcrumb item is non-interactive, we move whole item content to menu item title */\n breadcrumbItemPortal: DomPortal<Element>;\n\n /** When breadcrumb item has link in it, we are moving link content to menu item title */\n linkContentPortal: DomPortal;\n\n constructor(private _cdr: ChangeDetectorRef) {}\n\n /** @hidden */\n ngAfterViewInit(): void {\n if (this.breadcrumbItem.breadcrumbLink) {\n this.linkContentPortal = new DomPortal<HTMLElement>(\n this.breadcrumbItem.breadcrumbLink.contentSpan.nativeElement\n );\n }\n this.breadcrumbItemPortal = new DomPortal(\n this.breadcrumbItem.elementRef.nativeElement.firstElementChild as Element\n );\n this._cdr.detectChanges();\n }\n\n /**\n * We catch interactions with item, Enter, Space, Mouse click and Touch click,\n * if original element had router link we are proxying click to that element\n * */\n itemClicked($event: any): void {\n if (this.breadcrumbItem.needsClickProxy) {\n $event.preventDefault();\n this.breadcrumbItem.breadcrumbLink.elementRef().nativeElement.click();\n }\n }\n}\n","<li fd-menu-item [disabled]=\"breadcrumbItem.breadcrumbLink ? breadcrumbItem.breadcrumbLink.disabled : false\">\n <a\n fd-menu-interactive\n (click)=\"itemClicked($event)\"\n (keydown.enter)=\"itemClicked($event)\"\n (keydown.space)=\"itemClicked($event)\"\n >\n <ng-container *ngIf=\"breadcrumbItem?.breadcrumbLink; else portalContent\">\n <ng-container *ngIf=\"breadcrumbItem.breadcrumbLink._prefixIconName\">\n <fd-menu-addon\n position=\"before\"\n [glyph]=\"breadcrumbItem.breadcrumbLink._prefixIconName\"\n ></fd-menu-addon>\n </ng-container>\n <span fd-menu-title>\n <ng-container [cdkPortalOutlet]=\"linkContentPortal\"></ng-container>\n </span>\n <ng-container *ngIf=\"breadcrumbItem.breadcrumbLink._postfixIconName\">\n <fd-menu-addon [glyph]=\"breadcrumbItem.breadcrumbLink._postfixIconName\"></fd-menu-addon>\n </ng-container>\n </ng-container>\n <ng-template #portalContent>\n <span fd-menu-title>\n <ng-container [cdkPortalOutlet]=\"breadcrumbItemPortal\"></ng-container>\n </span>\n </ng-template>\n </a>\n</li>\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n ElementRef,\n forwardRef,\n Input,\n NgZone,\n OnDestroy,\n OnInit,\n Optional,\n QueryList,\n ViewChild,\n ViewEncapsulation\n} from '@angular/core';\nimport { BreadcrumbItemComponent } from './breadcrumb-item.component';\nimport { ContentDensityService, ResizeObserverService, RtlService } from '@fundamental-ngx/core/utils';\nimport { BehaviorSubject, firstValueFrom, map, startWith, Subscription, tap } from 'rxjs';\nimport { MenuComponent } from '@fundamental-ngx/core/menu';\nimport { Placement } from '@fundamental-ngx/core/shared';\n\n/**\n * Breadcrumb parent wrapper directive. Must have breadcrumb item child directives.\n *\n * ```html\n * <fd-breadcrumb>\n * <fd-breadcrumb-item>\n * <a fd-link [routerLink]=\"'#'\">Breadcrumb Link</a>\n * </fd-breadcrumb-item>\n * </fd-breadcrumb>\n * ```\n */\n@Component({\n // TODO to be discussed\n // eslint-disable-next-line\n selector: 'fd-breadcrumb',\n host: {\n class: 'fd-breadcrumb'\n },\n templateUrl: './breadcrumb.component.html',\n styleUrls: ['./breadcrumb.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class BreadcrumbComponent implements AfterViewInit, OnInit, OnDestroy {\n /** Whenever links wrapped inside overflow should be displayed in compact mode */\n @Input()\n compact?: boolean;\n\n /** @hidden */\n @ContentChildren(forwardRef(() => BreadcrumbItemComponent))\n breadcrumbItems: QueryList<BreadcrumbItemComponent>;\n\n /** @hidden */\n @ViewChild(MenuComponent)\n menuComponent: MenuComponent;\n\n /** @hidden */\n collapsedBreadcrumbItems: Array<BreadcrumbItemComponent> = [];\n\n /** @hidden */\n placement$ = new BehaviorSubject<Placement>('bottom-start');\n\n /**\n * The element to act as the breadcrumb container. When provided, the breadcrumb's responsive collapsing behavior\n * performs better. When not provided, the immediate parent element's width will be used.\n */\n @Input()\n containerElement: HTMLElement;\n\n /** Whether to append items to the overflow dropdown in reverse order. Default is true. */\n @Input()\n reverse = false;\n\n /** @hidden */\n containerBoundary: number;\n\n /** @hidden */\n private _subscriptions = new Subscription();\n\n /** @hidden */\n private _itemToSize = new Map<BreadcrumbItemComponent, number>();\n\n constructor(\n public elementRef: ElementRef<Element>,\n @Optional() private _rtlService: RtlService,\n @Optional() private _contentDensityService: ContentDensityService,\n private _cdRef: ChangeDetectorRef,\n private _resizeObserver: ResizeObserverService,\n private _ngZone: NgZone\n ) {}\n\n /** @hidden */\n ngOnInit(): void {\n if (this._rtlService) {\n this._subscriptions.add(\n this._rtlService.rtl.subscribe((value) => this.placement$.next(value ? 'bottom-end' : 'bottom-start'))\n );\n }\n if (this.compact === undefined && this._contentDensityService) {\n this._subscriptions.add(\n this._contentDensityService._isCompactDensity.subscribe((isCompact) => {\n this.compact = isCompact;\n this._cdRef.markForCheck();\n })\n );\n }\n }\n\n ngAfterViewInit(): void {\n this._subscriptions.add(\n this.breadcrumbItems.changes\n .pipe(\n startWith(this.breadcrumbItems),\n map((items) => items.toArray() as BreadcrumbItemComponent[]),\n map((items) => items.map((item) => [item, item.width]) as [BreadcrumbItemComponent, number][]),\n tap((itemToSize: [BreadcrumbItemComponent, number][]) => (this._itemToSize = new Map(itemToSize)))\n )\n .subscribe()\n );\n firstValueFrom(this._ngZone.onStable).then(() => {\n this._subscriptions.add(\n this._resizeObserver\n .observe(this.containerElement || (this.elementRef.nativeElement.parentElement as Element))\n .subscribe(() => this.onResize())\n );\n });\n }\n\n /** @hidden */\n ngOnDestroy(): void {\n this._subscriptions.unsubscribe();\n }\n\n /** @hidden */\n onResize(): void {\n if (!this.elementRef.nativeElement.parentElement) {\n return;\n }\n this.containerBoundary = this.elementRef.nativeElement.parentElement.getBoundingClientRect().width;\n\n if (this.containerElement) {\n this.containerBoundary = this.containerElement.getBoundingClientRect().width;\n }\n\n let visibleSum = 0;\n const breadcrumbItemComponents = this.breadcrumbItems.toArray();\n let i;\n for (i = breadcrumbItemComponents.length - 1; i >= 0; i--) {\n const breadcrumbItem = breadcrumbItemComponents[i];\n const itemSize = this._itemToSize.has(breadcrumbItem)\n ? (this._itemToSize.get(breadcrumbItem) as number)\n : breadcrumbItem.width;\n if (visibleSum + itemSize <= this.containerBoundary) {\n visibleSum += itemSize;\n breadcrumbItem.show();\n } else {\n break;\n }\n }\n const collapsedBreadcrumbItems = breadcrumbItemComponents.slice(0, ++i);\n this.collapsedBreadcrumbItems = this.reverse ? collapsedBreadcrumbItems : collapsedBreadcrumbItems.reverse();\n this.collapsedBreadcrumbItems.forEach((item) => item.hide());\n this._cdRef.detectChanges();\n }\n\n /** @hidden */\n keyDownHandle(event: Event): void {\n this.menuComponent.toggle();\n event.preventDefault();\n }\n}\n","<fd-menu #menu [compact]=\"compact\" [closeOnEscapeKey]=\"true\" [focusAutoCapture]=\"true\" [placement]=\"placement$ | async\">\n <fd-breadcrumb-hidden-item\n *ngFor=\"let collapsedBreadcrumbItem of collapsedBreadcrumbItems\"\n [breadcrumbItem]=\"collapsedBreadcrumbItem\"\n >\n </fd-breadcrumb-hidden-item>\n</fd-menu>\n\n<span class=\"fd-breadcrumb__item\" *ngIf=\"collapsedBreadcrumbItems.length\" [fdMenuTrigger]=\"menu\">\n <a\n fd-link\n tabindex=\"0\"\n class=\"fd-breadcrumb__collapsed\"\n (keydown.enter)=\"keyDownHandle($event)\"\n (keydown.space)=\"keyDownHandle($event)\"\n >\n ...\n <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n </a>\n</span>\n\n<ng-content></ng-content>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { BreadcrumbComponent } from './breadcrumb.component';\nimport { BreadcrumbItemComponent } from './breadcrumb-item.component';\nimport { IconModule } from '@fundamental-ngx/core/icon';\nimport { PopoverModule } from '@fundamental-ngx/core/popover';\nimport { MenuModule } from '@fundamental-ngx/core/menu';\nimport { LinkModule } from '@fundamental-ngx/core/link';\nimport { BreadcrumbHiddenItemComponent } from './breadcrumb-hidden-item/breadcrumb-hidden-item.component';\nimport { PortalModule } from '@angular/cdk/portal';\nimport { PipeModule } from '@fundamental-ngx/core/utils';\n\n@NgModule({\n imports: [CommonModule, IconModule, PopoverModule, MenuModule, LinkModule, PortalModule, PipeModule],\n exports: [BreadcrumbComponent, BreadcrumbItemComponent, LinkModule],\n declarations: [BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbHiddenItemComponent]\n})\nexport class BreadcrumbModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fundamental-ngx/core/breadcrumb",
3
- "version": "0.35.0-rc.10",
3
+ "version": "0.35.0-rc.13",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^13.0.0",
6
6
  "@angular/core": "^13.0.0"