@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.
- package/action-bar/package.json +1 -1
- package/action-sheet/package.json +1 -1
- package/alert/package.json +1 -1
- package/avatar/package.json +1 -1
- package/avatar-group/package.json +1 -1
- package/bar/package.json +1 -1
- package/breadcrumb/breadcrumb-hidden-item/breadcrumb-hidden-item.component.d.ts +23 -0
- package/breadcrumb/breadcrumb-item.component.d.ts +29 -0
- package/breadcrumb/breadcrumb.component.d.ts +16 -39
- package/breadcrumb/breadcrumb.module.d.ts +6 -4
- package/breadcrumb/esm2020/breadcrumb-hidden-item/breadcrumb-hidden-item.component.mjs +39 -0
- package/breadcrumb/esm2020/breadcrumb-item.component.mjs +48 -0
- package/breadcrumb/esm2020/breadcrumb.component.mjs +50 -137
- package/breadcrumb/esm2020/breadcrumb.module.mjs +11 -9
- package/breadcrumb/esm2020/public_api.mjs +2 -3
- package/breadcrumb/fesm2015/fundamental-ngx-core-breadcrumb.mjs +112 -197
- package/breadcrumb/fesm2015/fundamental-ngx-core-breadcrumb.mjs.map +1 -1
- package/breadcrumb/fesm2020/fundamental-ngx-core-breadcrumb.mjs +111 -197
- package/breadcrumb/fesm2020/fundamental-ngx-core-breadcrumb.mjs.map +1 -1
- package/breadcrumb/package.json +1 -1
- package/breadcrumb/public_api.d.ts +1 -2
- package/busy-indicator/package.json +1 -1
- package/button/package.json +1 -1
- package/calendar/package.json +1 -1
- package/card/package.json +1 -1
- package/carousel/package.json +1 -1
- package/checkbox/package.json +1 -1
- package/combobox/package.json +1 -1
- package/date-picker/package.json +1 -1
- package/datetime/package.json +1 -1
- package/datetime-picker/package.json +1 -1
- package/dialog/package.json +1 -1
- package/dynamic-page/package.json +1 -1
- package/dynamic-side-content/package.json +1 -1
- package/esm2020/breadcrumb/breadcrumb-hidden-item/breadcrumb-hidden-item.component.mjs +39 -0
- package/esm2020/breadcrumb/breadcrumb-item.component.mjs +48 -0
- package/esm2020/breadcrumb/breadcrumb.component.mjs +50 -137
- package/esm2020/breadcrumb/breadcrumb.module.mjs +11 -9
- package/esm2020/breadcrumb/public_api.mjs +2 -3
- package/esm2020/feed-list-item/components/item/feed-list-item.component.mjs +1 -1
- package/esm2020/form/form-label/form-label.component.mjs +1 -1
- package/esm2020/link/link.component.mjs +45 -7
- package/esm2020/multi-input/multi-input.component.mjs +1 -1
- package/esm2020/popover/popover-service/popover.service.mjs +2 -1
- package/esm2020/table/directives/table-text.directive.mjs +7 -5
- package/esm2020/text/text.component.mjs +1 -1
- package/esm2020/utils/public_api.mjs +2 -1
- package/esm2020/utils/services/resize-observer.service.mjs +83 -0
- package/facets/package.json +1 -1
- package/feed-input/package.json +1 -1
- package/feed-list-item/esm2020/components/item/feed-list-item.component.mjs +1 -1
- package/feed-list-item/fesm2015/fundamental-ngx-core-feed-list-item.mjs +1 -1
- package/feed-list-item/fesm2020/fundamental-ngx-core-feed-list-item.mjs +1 -1
- package/feed-list-item/package.json +1 -1
- package/fesm2015/fundamental-ngx-core-breadcrumb.mjs +112 -197
- package/fesm2015/fundamental-ngx-core-breadcrumb.mjs.map +1 -1
- package/fesm2015/fundamental-ngx-core-feed-list-item.mjs +1 -1
- package/fesm2015/fundamental-ngx-core-form.mjs +1 -1
- package/fesm2015/fundamental-ngx-core-link.mjs +46 -6
- package/fesm2015/fundamental-ngx-core-link.mjs.map +1 -1
- package/fesm2015/fundamental-ngx-core-multi-input.mjs +1 -1
- package/fesm2015/fundamental-ngx-core-popover.mjs +1 -0
- package/fesm2015/fundamental-ngx-core-popover.mjs.map +1 -1
- package/fesm2015/fundamental-ngx-core-table.mjs +6 -4
- package/fesm2015/fundamental-ngx-core-table.mjs.map +1 -1
- package/fesm2015/fundamental-ngx-core-text.mjs +1 -1
- package/fesm2015/fundamental-ngx-core-utils.mjs +81 -2
- package/fesm2015/fundamental-ngx-core-utils.mjs.map +1 -1
- package/fesm2020/fundamental-ngx-core-breadcrumb.mjs +111 -197
- package/fesm2020/fundamental-ngx-core-breadcrumb.mjs.map +1 -1
- package/fesm2020/fundamental-ngx-core-feed-list-item.mjs +1 -1
- package/fesm2020/fundamental-ngx-core-form.mjs +1 -1
- package/fesm2020/fundamental-ngx-core-link.mjs +44 -6
- package/fesm2020/fundamental-ngx-core-link.mjs.map +1 -1
- package/fesm2020/fundamental-ngx-core-multi-input.mjs +1 -1
- package/fesm2020/fundamental-ngx-core-popover.mjs +1 -0
- package/fesm2020/fundamental-ngx-core-popover.mjs.map +1 -1
- package/fesm2020/fundamental-ngx-core-table.mjs +6 -4
- package/fesm2020/fundamental-ngx-core-table.mjs.map +1 -1
- package/fesm2020/fundamental-ngx-core-text.mjs +1 -1
- package/fesm2020/fundamental-ngx-core-utils.mjs +81 -2
- package/fesm2020/fundamental-ngx-core-utils.mjs.map +1 -1
- package/file-uploader/package.json +1 -1
- package/fixed-card-layout/package.json +1 -1
- package/flexible-column-layout/package.json +1 -1
- package/form/esm2020/form-label/form-label.component.mjs +1 -1
- package/form/fesm2015/fundamental-ngx-core-form.mjs +1 -1
- package/form/fesm2020/fundamental-ngx-core-form.mjs +1 -1
- package/form/package.json +1 -1
- package/formatted-text/package.json +1 -1
- package/grid-list/package.json +1 -1
- package/icon/package.json +1 -1
- package/illustrated-message/package.json +1 -1
- package/infinite-scroll/package.json +1 -1
- package/info-label/package.json +1 -1
- package/inline-help/package.json +1 -1
- package/input-group/package.json +1 -1
- package/layout-grid/package.json +1 -1
- package/layout-panel/package.json +1 -1
- package/link/esm2020/link.component.mjs +45 -7
- package/link/fesm2015/fundamental-ngx-core-link.mjs +46 -6
- package/link/fesm2015/fundamental-ngx-core-link.mjs.map +1 -1
- package/link/fesm2020/fundamental-ngx-core-link.mjs +44 -6
- package/link/fesm2020/fundamental-ngx-core-link.mjs.map +1 -1
- package/link/link.component.d.ts +8 -2
- package/link/package.json +1 -1
- package/list/package.json +1 -1
- package/menu/package.json +1 -1
- package/message-box/package.json +1 -1
- package/message-strip/package.json +1 -1
- package/message-toast/package.json +1 -1
- package/micro-process-flow/package.json +1 -1
- package/mobile-mode/package.json +1 -1
- package/multi-input/esm2020/multi-input.component.mjs +1 -1
- package/multi-input/fesm2015/fundamental-ngx-core-multi-input.mjs +1 -1
- package/multi-input/fesm2020/fundamental-ngx-core-multi-input.mjs +1 -1
- package/multi-input/package.json +1 -1
- package/nested-list/package.json +1 -1
- package/notification/package.json +1 -1
- package/object-identifier/package.json +1 -1
- package/object-marker/package.json +1 -1
- package/object-number/package.json +1 -1
- package/object-status/package.json +1 -1
- package/package.json +1 -1
- package/pagination/package.json +1 -1
- package/panel/package.json +1 -1
- package/popover/esm2020/popover-service/popover.service.mjs +2 -1
- package/popover/fesm2015/fundamental-ngx-core-popover.mjs +1 -0
- package/popover/fesm2015/fundamental-ngx-core-popover.mjs.map +1 -1
- package/popover/fesm2020/fundamental-ngx-core-popover.mjs +1 -0
- package/popover/fesm2020/fundamental-ngx-core-popover.mjs.map +1 -1
- package/popover/package.json +1 -1
- package/product-switch/package.json +1 -1
- package/progress-indicator/package.json +1 -1
- package/quick-view/package.json +1 -1
- package/radio/package.json +1 -1
- package/rating-indicator/package.json +1 -1
- package/resizable-card-layout/package.json +1 -1
- package/scroll-spy/package.json +1 -1
- package/scrollbar/package.json +1 -1
- package/segmented-button/package.json +1 -1
- package/select/package.json +1 -1
- package/shared/package.json +1 -1
- package/shellbar/package.json +1 -1
- package/side-navigation/package.json +1 -1
- package/slider/package.json +1 -1
- package/split-button/package.json +1 -1
- package/splitter/package.json +1 -1
- package/status-indicator/package.json +1 -1
- package/step-input/package.json +1 -1
- package/switch/package.json +1 -1
- package/table/directives/table-text.directive.d.ts +5 -5
- package/table/esm2020/directives/table-text.directive.mjs +7 -5
- package/table/fesm2015/fundamental-ngx-core-table.mjs +6 -4
- package/table/fesm2015/fundamental-ngx-core-table.mjs.map +1 -1
- package/table/fesm2020/fundamental-ngx-core-table.mjs +6 -4
- package/table/fesm2020/fundamental-ngx-core-table.mjs.map +1 -1
- package/table/package.json +1 -1
- package/tabs/package.json +1 -1
- package/text/esm2020/text.component.mjs +1 -1
- package/text/fesm2015/fundamental-ngx-core-text.mjs +1 -1
- package/text/fesm2020/fundamental-ngx-core-text.mjs +1 -1
- package/text/package.json +1 -1
- package/theming/package.json +1 -1
- package/tile/package.json +1 -1
- package/time/package.json +1 -1
- package/time-picker/package.json +1 -1
- package/timeline/package.json +1 -1
- package/title/package.json +1 -1
- package/token/package.json +1 -1
- package/toolbar/package.json +1 -1
- package/tree/package.json +1 -1
- package/upload-collection/package.json +1 -1
- package/utils/esm2020/public_api.mjs +2 -1
- package/utils/esm2020/services/resize-observer.service.mjs +83 -0
- package/utils/fesm2015/fundamental-ngx-core-utils.mjs +81 -2
- package/utils/fesm2015/fundamental-ngx-core-utils.mjs.map +1 -1
- package/utils/fesm2020/fundamental-ngx-core-utils.mjs +81 -2
- package/utils/fesm2020/fundamental-ngx-core-utils.mjs.map +1 -1
- package/utils/package.json +1 -1
- package/utils/public_api.d.ts +1 -0
- package/utils/services/resize-observer.service.d.ts +29 -0
- package/vertical-navigation/package.json +1 -1
- package/wizard/package.json +1 -1
- package/breadcrumb/breadcrumb-item.directive.d.ts +0 -28
- package/breadcrumb/breadcrumb-link.directive.d.ts +0 -18
- package/breadcrumb/esm2020/breadcrumb-item.directive.mjs +0 -51
- package/breadcrumb/esm2020/breadcrumb-link.directive.mjs +0 -35
- package/esm2020/breadcrumb/breadcrumb-item.directive.mjs +0 -51
- package/esm2020/breadcrumb/breadcrumb-link.directive.mjs +0 -35
|
@@ -1,97 +1,96 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
3
|
-
import * as
|
|
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 '@
|
|
6
|
-
import {
|
|
7
|
-
import { BehaviorSubject, Subscription } from 'rxjs';
|
|
8
|
-
import * as i1 from '@fundamental-ngx/core/
|
|
9
|
-
import { KeyUtil } from '@fundamental-ngx/core/utils';
|
|
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 { BehaviorSubject, Subscription, startWith, map, tap, firstValueFrom } from 'rxjs';
|
|
8
|
+
import * as i1 from '@fundamental-ngx/core/menu';
|
|
11
9
|
import { MenuComponent, MenuModule } from '@fundamental-ngx/core/menu';
|
|
12
|
-
import
|
|
10
|
+
import * as i1$1 from '@fundamental-ngx/core/utils';
|
|
11
|
+
import { PipeModule } from '@fundamental-ngx/core/utils';
|
|
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-
|
|
23
|
+
* <a fd-link [routerLink]="'#'">Breadcrumb Link</a>
|
|
55
24
|
* </fd-breadcrumb-item>
|
|
56
25
|
* ```
|
|
57
26
|
*/
|
|
58
|
-
class
|
|
59
|
-
constructor(_elementRef) {
|
|
27
|
+
class BreadcrumbItemComponent {
|
|
28
|
+
constructor(_elementRef, renderer2) {
|
|
60
29
|
this._elementRef = _elementRef;
|
|
61
|
-
|
|
62
|
-
this.
|
|
63
|
-
|
|
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
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
39
|
+
get width() {
|
|
40
|
+
return this._elementRef.nativeElement.getBoundingClientRect().width;
|
|
41
|
+
}
|
|
42
|
+
/** @hidden */
|
|
43
|
+
get needsClickProxy() {
|
|
44
|
+
var _a;
|
|
45
|
+
return (!!((_a = this.breadcrumbLink) === null || _a === void 0 ? void 0 : _a.elementRef().nativeElement.getAttribute('href')) || !!this.breadcrumbLink.routerLink);
|
|
78
46
|
}
|
|
79
47
|
}
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type:
|
|
83
|
-
type:
|
|
48
|
+
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 });
|
|
49
|
+
BreadcrumbItemComponent.ɵcmp = 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 });
|
|
50
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbItemComponent, decorators: [{
|
|
51
|
+
type: Component,
|
|
84
52
|
args: [{
|
|
85
|
-
// TODO to be discussed
|
|
86
|
-
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
87
53
|
selector: 'fd-breadcrumb-item',
|
|
54
|
+
template: '<div style="display: inline"><ng-content></ng-content></div>',
|
|
88
55
|
host: {
|
|
89
56
|
class: 'fd-breadcrumb__item'
|
|
90
57
|
}
|
|
91
58
|
}]
|
|
92
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { breadcrumbLink: [{
|
|
59
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { breadcrumbLink: [{
|
|
93
60
|
type: ContentChild,
|
|
94
|
-
args: [forwardRef(() =>
|
|
61
|
+
args: [forwardRef(() => LinkComponent)]
|
|
62
|
+
}] } });
|
|
63
|
+
|
|
64
|
+
class BreadcrumbHiddenItemComponent {
|
|
65
|
+
constructor(_cdr) {
|
|
66
|
+
this._cdr = _cdr;
|
|
67
|
+
}
|
|
68
|
+
/** @hidden */
|
|
69
|
+
ngAfterViewInit() {
|
|
70
|
+
if (this.breadcrumbItem.breadcrumbLink) {
|
|
71
|
+
this.linkContentPortal = new DomPortal(this.breadcrumbItem.breadcrumbLink.contentSpan.nativeElement);
|
|
72
|
+
}
|
|
73
|
+
this.breadcrumbItemPortal = new DomPortal(this.breadcrumbItem.elementRef.nativeElement.firstElementChild);
|
|
74
|
+
this._cdr.detectChanges();
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* We catch interactions with item, Enter, Space, Mouse click and Touch click,
|
|
78
|
+
* if original element had router link we are proxying click to that element
|
|
79
|
+
* */
|
|
80
|
+
itemClicked($event) {
|
|
81
|
+
if (this.breadcrumbItem.needsClickProxy) {
|
|
82
|
+
$event.preventDefault();
|
|
83
|
+
this.breadcrumbItem.breadcrumbLink.elementRef().nativeElement.click();
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
BreadcrumbHiddenItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbHiddenItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
88
|
+
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 });
|
|
89
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbHiddenItemComponent, decorators: [{
|
|
90
|
+
type: Component,
|
|
91
|
+
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" }]
|
|
92
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { breadcrumbItem: [{
|
|
93
|
+
type: Input
|
|
95
94
|
}] } });
|
|
96
95
|
|
|
97
96
|
/**
|
|
@@ -100,29 +99,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
|
|
|
100
99
|
* ```html
|
|
101
100
|
* <fd-breadcrumb>
|
|
102
101
|
* <fd-breadcrumb-item>
|
|
103
|
-
* <a fd-
|
|
102
|
+
* <a fd-link [routerLink]="'#'">Breadcrumb Link</a>
|
|
104
103
|
* </fd-breadcrumb-item>
|
|
105
104
|
* </fd-breadcrumb>
|
|
106
105
|
* ```
|
|
107
106
|
*/
|
|
108
107
|
class BreadcrumbComponent {
|
|
109
|
-
constructor(elementRef, _rtlService, _contentDensityService, _cdRef) {
|
|
108
|
+
constructor(elementRef, _rtlService, _contentDensityService, _cdRef, _resizeObserver, _ngZone) {
|
|
110
109
|
this.elementRef = elementRef;
|
|
111
110
|
this._rtlService = _rtlService;
|
|
112
111
|
this._contentDensityService = _contentDensityService;
|
|
113
112
|
this._cdRef = _cdRef;
|
|
113
|
+
this._resizeObserver = _resizeObserver;
|
|
114
|
+
this._ngZone = _ngZone;
|
|
114
115
|
/** @hidden */
|
|
115
116
|
this.collapsedBreadcrumbItems = [];
|
|
116
117
|
/** @hidden */
|
|
117
118
|
this.placement$ = new BehaviorSubject('bottom-start');
|
|
118
|
-
/** Whether
|
|
119
|
+
/** Whether to append items to the overflow dropdown in reverse order. Default is true. */
|
|
119
120
|
this.reverse = false;
|
|
120
121
|
/** @hidden */
|
|
121
122
|
this._subscriptions = new Subscription();
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
ngAfterContentInit() {
|
|
125
|
-
this.onResize();
|
|
123
|
+
/** @hidden */
|
|
124
|
+
this._itemToSize = new Map();
|
|
126
125
|
}
|
|
127
126
|
/** @hidden */
|
|
128
127
|
ngOnInit() {
|
|
@@ -136,6 +135,16 @@ class BreadcrumbComponent {
|
|
|
136
135
|
}));
|
|
137
136
|
}
|
|
138
137
|
}
|
|
138
|
+
ngAfterViewInit() {
|
|
139
|
+
this._subscriptions.add(this.breadcrumbItems.changes
|
|
140
|
+
.pipe(startWith(this.breadcrumbItems), map((items) => items.toArray()), map((items) => items.map((item) => [item, item.width])), tap((itemToSize) => (this._itemToSize = new Map(itemToSize))))
|
|
141
|
+
.subscribe());
|
|
142
|
+
firstValueFrom(this._ngZone.onStable).then(() => {
|
|
143
|
+
this._subscriptions.add(this._resizeObserver
|
|
144
|
+
.observe(this.containerElement || this.elementRef.nativeElement.parentElement)
|
|
145
|
+
.subscribe(() => this.onResize()));
|
|
146
|
+
});
|
|
147
|
+
}
|
|
139
148
|
/** @hidden */
|
|
140
149
|
ngOnDestroy() {
|
|
141
150
|
this._subscriptions.unsubscribe();
|
|
@@ -149,142 +158,51 @@ class BreadcrumbComponent {
|
|
|
149
158
|
if (this.containerElement) {
|
|
150
159
|
this.containerBoundary = this.containerElement.getBoundingClientRect().width;
|
|
151
160
|
}
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
161
|
+
let visibleSum = 0;
|
|
162
|
+
const breadcrumbItemComponents = this.breadcrumbItems.toArray();
|
|
163
|
+
let i;
|
|
164
|
+
for (i = breadcrumbItemComponents.length - 1; i >= 0; i--) {
|
|
165
|
+
const breadcrumbItem = breadcrumbItemComponents[i];
|
|
166
|
+
const itemSize = this._itemToSize.has(breadcrumbItem)
|
|
167
|
+
? this._itemToSize.get(breadcrumbItem)
|
|
168
|
+
: breadcrumbItem.width;
|
|
169
|
+
if (visibleSum + itemSize <= this.containerBoundary) {
|
|
170
|
+
visibleSum += itemSize;
|
|
171
|
+
breadcrumbItem.show();
|
|
172
|
+
}
|
|
173
|
+
else {
|
|
174
|
+
break;
|
|
160
175
|
}
|
|
161
176
|
}
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
}
|
|
166
|
-
this.previousContainerWidth = this.containerBoundary;
|
|
177
|
+
const collapsedBreadcrumbItems = breadcrumbItemComponents.slice(0, ++i);
|
|
178
|
+
this.collapsedBreadcrumbItems = this.reverse ? collapsedBreadcrumbItems : collapsedBreadcrumbItems.reverse();
|
|
179
|
+
this.collapsedBreadcrumbItems.forEach((item) => item.hide());
|
|
167
180
|
this._cdRef.detectChanges();
|
|
168
181
|
}
|
|
169
182
|
/** @hidden */
|
|
170
183
|
keyDownHandle(event) {
|
|
171
|
-
|
|
172
|
-
|
|
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';
|
|
184
|
+
this.menuComponent.toggle();
|
|
185
|
+
event.preventDefault();
|
|
268
186
|
}
|
|
269
187
|
}
|
|
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: {
|
|
188
|
+
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 });
|
|
189
|
+
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
190
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbComponent, decorators: [{
|
|
273
191
|
type: Component,
|
|
274
192
|
args: [{ selector: 'fd-breadcrumb', host: {
|
|
275
193
|
class: 'fd-breadcrumb'
|
|
276
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-menu #menu [compact]=\"compact\" [closeOnEscapeKey]=\"true\" [focusAutoCapture]=\"true\" [placement]=\"placement$ | async\">\n <
|
|
194
|
+
}, 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"] }]
|
|
277
195
|
}], ctorParameters: function () {
|
|
278
|
-
return [{ type: i0.ElementRef }, { type: i1.RtlService, decorators: [{
|
|
196
|
+
return [{ type: i0.ElementRef }, { type: i1$1.RtlService, decorators: [{
|
|
279
197
|
type: Optional
|
|
280
|
-
}] }, { type: i1.ContentDensityService, decorators: [{
|
|
198
|
+
}] }, { type: i1$1.ContentDensityService, decorators: [{
|
|
281
199
|
type: Optional
|
|
282
|
-
}] }, { type: i0.ChangeDetectorRef }];
|
|
200
|
+
}] }, { type: i0.ChangeDetectorRef }, { type: i1$1.ResizeObserverService }, { type: i0.NgZone }];
|
|
283
201
|
}, propDecorators: { compact: [{
|
|
284
202
|
type: Input
|
|
285
203
|
}], breadcrumbItems: [{
|
|
286
204
|
type: ContentChildren,
|
|
287
|
-
args: [forwardRef(() =>
|
|
205
|
+
args: [forwardRef(() => BreadcrumbItemComponent)]
|
|
288
206
|
}], menuComponent: [{
|
|
289
207
|
type: ViewChild,
|
|
290
208
|
args: [MenuComponent]
|
|
@@ -292,22 +210,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
|
|
|
292
210
|
type: Input
|
|
293
211
|
}], reverse: [{
|
|
294
212
|
type: Input
|
|
295
|
-
}], onResize: [{
|
|
296
|
-
type: HostListener,
|
|
297
|
-
args: ['window:resize', []]
|
|
298
213
|
}] } });
|
|
299
214
|
|
|
300
215
|
class BreadcrumbModule {
|
|
301
216
|
}
|
|
302
217
|
BreadcrumbModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
303
|
-
BreadcrumbModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbModule, declarations: [BreadcrumbComponent,
|
|
304
|
-
BreadcrumbModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbModule, imports: [[CommonModule, IconModule, PopoverModule, MenuModule,
|
|
218
|
+
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] });
|
|
219
|
+
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] });
|
|
305
220
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbModule, decorators: [{
|
|
306
221
|
type: NgModule,
|
|
307
222
|
args: [{
|
|
308
|
-
imports: [CommonModule, IconModule, PopoverModule, MenuModule,
|
|
309
|
-
exports: [BreadcrumbComponent,
|
|
310
|
-
declarations: [BreadcrumbComponent,
|
|
223
|
+
imports: [CommonModule, IconModule, PopoverModule, MenuModule, LinkModule, PortalModule, PipeModule],
|
|
224
|
+
exports: [BreadcrumbComponent, BreadcrumbItemComponent, LinkModule],
|
|
225
|
+
declarations: [BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbHiddenItemComponent]
|
|
311
226
|
}]
|
|
312
227
|
}] });
|
|
313
228
|
|
|
@@ -315,5 +230,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
|
|
|
315
230
|
* Generated bundle index. Do not edit.
|
|
316
231
|
*/
|
|
317
232
|
|
|
318
|
-
export { BreadcrumbComponent,
|
|
233
|
+
export { BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule };
|
|
319
234
|
//# 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":"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"}
|
|
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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"}
|