@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,95 @@
|
|
|
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 * as i1 from '@fundamental-ngx/core/utils';
|
|
8
|
-
import {
|
|
9
|
-
import { BehaviorSubject, Subscription } from 'rxjs';
|
|
10
|
-
import * as
|
|
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
|
|
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
|
+
return (!!this.breadcrumbLink?.elementRef().nativeElement.getAttribute('href') || !!this.breadcrumbLink.routerLink);
|
|
78
45
|
}
|
|
79
46
|
}
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type:
|
|
83
|
-
type:
|
|
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
|
+
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 });
|
|
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(() =>
|
|
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-
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
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
|
-
|
|
163
|
-
|
|
164
|
-
|
|
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
|
-
|
|
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';
|
|
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: {
|
|
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 <
|
|
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(() =>
|
|
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,
|
|
302
|
-
BreadcrumbModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbModule, imports: [[CommonModule, IconModule, PopoverModule, MenuModule,
|
|
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,
|
|
307
|
-
exports: [BreadcrumbComponent,
|
|
308
|
-
declarations: [BreadcrumbComponent,
|
|
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,
|
|
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":"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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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"}
|