@design-factory/angular 21.0.4 → 21.1.0-next.1
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/drawer/README.md +54 -0
- package/fesm2022/design-factory-angular-drawer.mjs +202 -67
- package/fesm2022/design-factory-angular-drawer.mjs.map +1 -1
- package/fesm2022/design-factory-angular-internals.mjs +439 -17
- package/fesm2022/design-factory-angular-internals.mjs.map +1 -1
- package/fesm2022/design-factory-angular-sidenav.mjs +223 -210
- package/fesm2022/design-factory-angular-sidenav.mjs.map +1 -1
- package/fesm2022/design-factory-angular-theme.mjs +198 -0
- package/fesm2022/design-factory-angular-theme.mjs.map +1 -0
- package/fesm2022/design-factory-angular-topnav.mjs +1538 -0
- package/fesm2022/design-factory-angular-topnav.mjs.map +1 -0
- package/package.json +22 -6
- package/schematics/collection.json +1 -1
- package/types/design-factory-angular-drawer.d.ts +71 -13
- package/types/design-factory-angular-internals.d.ts +220 -31
- package/types/design-factory-angular-sidenav.d.ts +15 -7
- package/types/design-factory-angular-theme.d.ts +122 -0
- package/types/design-factory-angular-topnav.d.ts +435 -0
|
@@ -0,0 +1,1538 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { InjectionToken, contentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, input, signal, inject, ElementRef, forwardRef, Directive, computed, booleanAttribute, output, contentChild, TemplateRef, viewChild, effect, untracked, DOCUMENT, model, isDevMode } from '@angular/core';
|
|
3
|
+
import { NgTemplateOutlet, TitleCasePipe } from '@angular/common';
|
|
4
|
+
import { toAngularSignal, lg$, md$, xl$, sm$ } from '@design-factory/angular/internals';
|
|
5
|
+
import { RouterLink, RouterLinkActive } from '@angular/router';
|
|
6
|
+
import { NgbDropdown, NgbDropdownAnchor, NgbDropdownMenu, NgbDropdownItem, NgbDropdownToggle } from '@ng-bootstrap/ng-bootstrap/dropdown';
|
|
7
|
+
import { generateId } from '@design-factory/core/utils/id';
|
|
8
|
+
import { NgbPopover } from '@ng-bootstrap/ng-bootstrap/popover';
|
|
9
|
+
import { DfDrawer } from '@design-factory/angular/drawer';
|
|
10
|
+
import { DfSidenavComponent, DfSidenavItemComponent, DfSidenavLinkComponent } from '@design-factory/angular/sidenav';
|
|
11
|
+
import { DfThemeService } from '@design-factory/angular/theme';
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* @internal
|
|
15
|
+
* An Injection Token for the DfTopNavNavigationElement interface, which represents a navigation element in the top navigation component.
|
|
16
|
+
*/
|
|
17
|
+
const DF_TOPNAV_NAVIGATION_ELEMENT = new InjectionToken('DF_TOPNAV_NAVIGATION_ELEMENT');
|
|
18
|
+
/**
|
|
19
|
+
* @internal
|
|
20
|
+
* An abstract class that defines the structure of a navigation element in the top navigation component.
|
|
21
|
+
* It includes an abstract property 'active' which is a Signal that indicates whether the navigation element is active or not.
|
|
22
|
+
*/
|
|
23
|
+
class DfTopNavNavigationElement {
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* The TopNav navigation component, used to display a list of navigation items in the TopNav.
|
|
28
|
+
* @since 21.1
|
|
29
|
+
*/
|
|
30
|
+
class DfTopNavNavigation {
|
|
31
|
+
constructor() {
|
|
32
|
+
this.childrenElements = contentChildren(DF_TOPNAV_NAVIGATION_ELEMENT, ...(ngDevMode ? [{ debugName: "childrenElements" }] : []));
|
|
33
|
+
}
|
|
34
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
35
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: DfTopNavNavigation, isStandalone: true, selector: "df-topnav-navigation", host: { attributes: { "role": "list" }, classAttribute: "df-topnav-navigation" }, queries: [{ propertyName: "childrenElements", predicate: DF_TOPNAV_NAVIGATION_ELEMENT, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".df-topnav-navigation{display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
36
|
+
}
|
|
37
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavNavigation, decorators: [{
|
|
38
|
+
type: Component,
|
|
39
|
+
args: [{ selector: 'df-topnav-navigation', template: `<ng-content />`, host: {
|
|
40
|
+
class: 'df-topnav-navigation',
|
|
41
|
+
role: 'list'
|
|
42
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".df-topnav-navigation{display:flex}\n"] }]
|
|
43
|
+
}], propDecorators: { childrenElements: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DF_TOPNAV_NAVIGATION_ELEMENT), { isSignal: true }] }] } });
|
|
44
|
+
|
|
45
|
+
/**
|
|
46
|
+
* The TopNav navigation item component, used to display a navigation link in the TopNav.
|
|
47
|
+
*
|
|
48
|
+
* It should be used inside a {@link DfTopNavNavigation} component.
|
|
49
|
+
* @since 21.1
|
|
50
|
+
*/
|
|
51
|
+
class DfTopNavNavigationLink extends DfTopNavNavigationElement {
|
|
52
|
+
constructor() {
|
|
53
|
+
super(...arguments);
|
|
54
|
+
/**
|
|
55
|
+
* The label of the navigation link, which will be displayed as the link text.
|
|
56
|
+
*/
|
|
57
|
+
this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
58
|
+
/**
|
|
59
|
+
* The href of the navigation link, which will be used as the link target. It can be either an internal route or an external URL.
|
|
60
|
+
*/
|
|
61
|
+
this.href = input.required(...(ngDevMode ? [{ debugName: "href" }] : []));
|
|
62
|
+
/**
|
|
63
|
+
* The options to determine when the link is active based on the Router state. It can be either an object of type IsActiveMatchOptions or an object with an "exact" boolean property. When not provided, it defaults to { exact: false }.
|
|
64
|
+
*/
|
|
65
|
+
this.routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : []));
|
|
66
|
+
this._active = signal(false, ...(ngDevMode ? [{ debugName: "_active" }] : []));
|
|
67
|
+
/**
|
|
68
|
+
* Indicates if the link is currently active based on the Router state.
|
|
69
|
+
*/
|
|
70
|
+
this.active = this._active.asReadonly();
|
|
71
|
+
}
|
|
72
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavNavigationLink, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
73
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: DfTopNavNavigationLink, isStandalone: true, selector: "df-topnav-navigation-link", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: true, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "style.display": "\"contents\"" } }, providers: [{ provide: DF_TOPNAV_NAVIGATION_ELEMENT, useExisting: DfTopNavNavigationLink }], usesInheritance: true, ngImport: i0, template: `
|
|
74
|
+
<a
|
|
75
|
+
class="df-topnav-navigation-link"
|
|
76
|
+
[routerLink]="href()"
|
|
77
|
+
routerLinkActive="df-topnav-navigation-link-active"
|
|
78
|
+
[routerLinkActiveOptions]="routerLinkActiveOptions()"
|
|
79
|
+
ariaCurrentWhenActive="page"
|
|
80
|
+
[attr.data-text]="label()"
|
|
81
|
+
(isActiveChange)="_active.set($event)"
|
|
82
|
+
>
|
|
83
|
+
<span>{{ label() }}</span>
|
|
84
|
+
</a>
|
|
85
|
+
`, isInline: true, styles: [".df-topnav-navigation-link{height:100%;display:flex;align-items:center;padding:var(--df-spacing-5);outline:none;position:relative;gap:var(--df-spacing-3);text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-topnav-navigation-link{transition:none}}.df-topnav-navigation-link:focus-visible:before{content:\"\";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--df-topnav-navigation-link-bg-color),inset 0 0 0 4px var(--df-topnav-navigation-link-border-color)}.df-topnav-navigation-link{box-shadow:none!important;border:0;border-bottom:0!important;background-color:var(--df-topnav-navigation-link-bg-color)!important}.df-topnav-navigation-link span[data-text]{text-align:center}.df-topnav-navigation-link span[data-text]:before{content:attr(data-text);font-weight:var(--df-typo-weight-bold);visibility:hidden;height:0;overflow:hidden;display:block}.df-topnav-navigation-link.df-topnav-navigation-link-active{font-weight:var(--df-typo-weight-bold)}.df-topnav-navigation-link.df-topnav-navigation-link-active:focus-visible:before{bottom:.1875rem}.df-topnav-navigation-link.df-topnav-navigation-link-active:after{content:\"\";position:absolute;inset:0;border-bottom:.1875rem solid var(--df-topnav-navigation-link-border-color)}.df-topnav-nav-basic .df-topnav-navigation-link{color:var(--df-topnav-color-inert-basic-foreground)!important;--df-topnav-navigation-link-bg-color: var(--df-topnav-color-inert-basic-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-inert-basic-foreground)}.df-topnav-nav-basic .df-topnav-navigation-link:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-hovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-hovered-border);color:var(--df-topnav-color-basic-primary-hovered-foreground)!important}.df-topnav-nav-basic .df-topnav-navigation-link:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-pressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-pressed-border);color:var(--df-topnav-color-basic-primary-pressed-foreground)!important}.df-topnav-nav-basic .df-topnav-navigation-link.df-topnav-navigation-link-active{color:var(--df-topnav-color-basic-primary-active-foreground)!important;--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-active-border)}.df-topnav-nav-basic .df-topnav-navigation-link.df-topnav-navigation-link-active:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-activeHovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-activeHovered-border);color:var(--df-topnav-color-basic-primary-activeHovered-foreground)!important}.df-topnav-nav-basic .df-topnav-navigation-link.df-topnav-navigation-link-active:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-activePressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-activePressed-border);color:var(--df-topnav-color-basic-primary-activePressed-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link{color:var(--df-topnav-color-inert-mirror-foreground)!important;--df-topnav-navigation-link-bg-color: var(--df-topnav-color-inert-mirror-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-inert-mirror-foreground)}.df-topnav-nav-mirror .df-topnav-navigation-link:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-hovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-hovered-border);color:var(--df-topnav-color-mirror-primary-hovered-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-pressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-pressed-border);color:var(--df-topnav-color-mirror-primary-pressed-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link.df-topnav-navigation-link-active{color:var(--df-topnav-color-mirror-primary-active-foreground)!important;--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-active-border)}.df-topnav-nav-mirror .df-topnav-navigation-link.df-topnav-navigation-link-active:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-activeHovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-activeHovered-border);color:var(--df-topnav-color-mirror-primary-activeHovered-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link.df-topnav-navigation-link-active:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-activePressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-activePressed-border);color:var(--df-topnav-color-mirror-primary-activePressed-foreground)!important}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
86
|
+
}
|
|
87
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavNavigationLink, decorators: [{
|
|
88
|
+
type: Component,
|
|
89
|
+
args: [{ selector: 'df-topnav-navigation-link', template: `
|
|
90
|
+
<a
|
|
91
|
+
class="df-topnav-navigation-link"
|
|
92
|
+
[routerLink]="href()"
|
|
93
|
+
routerLinkActive="df-topnav-navigation-link-active"
|
|
94
|
+
[routerLinkActiveOptions]="routerLinkActiveOptions()"
|
|
95
|
+
ariaCurrentWhenActive="page"
|
|
96
|
+
[attr.data-text]="label()"
|
|
97
|
+
(isActiveChange)="_active.set($event)"
|
|
98
|
+
>
|
|
99
|
+
<span>{{ label() }}</span>
|
|
100
|
+
</a>
|
|
101
|
+
`, host: {
|
|
102
|
+
role: 'listitem',
|
|
103
|
+
'[style.display]': '"contents"'
|
|
104
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, RouterLinkActive], providers: [{ provide: DF_TOPNAV_NAVIGATION_ELEMENT, useExisting: DfTopNavNavigationLink }], encapsulation: ViewEncapsulation.None, styles: [".df-topnav-navigation-link{height:100%;display:flex;align-items:center;padding:var(--df-spacing-5);outline:none;position:relative;gap:var(--df-spacing-3);text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-topnav-navigation-link{transition:none}}.df-topnav-navigation-link:focus-visible:before{content:\"\";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--df-topnav-navigation-link-bg-color),inset 0 0 0 4px var(--df-topnav-navigation-link-border-color)}.df-topnav-navigation-link{box-shadow:none!important;border:0;border-bottom:0!important;background-color:var(--df-topnav-navigation-link-bg-color)!important}.df-topnav-navigation-link span[data-text]{text-align:center}.df-topnav-navigation-link span[data-text]:before{content:attr(data-text);font-weight:var(--df-typo-weight-bold);visibility:hidden;height:0;overflow:hidden;display:block}.df-topnav-navigation-link.df-topnav-navigation-link-active{font-weight:var(--df-typo-weight-bold)}.df-topnav-navigation-link.df-topnav-navigation-link-active:focus-visible:before{bottom:.1875rem}.df-topnav-navigation-link.df-topnav-navigation-link-active:after{content:\"\";position:absolute;inset:0;border-bottom:.1875rem solid var(--df-topnav-navigation-link-border-color)}.df-topnav-nav-basic .df-topnav-navigation-link{color:var(--df-topnav-color-inert-basic-foreground)!important;--df-topnav-navigation-link-bg-color: var(--df-topnav-color-inert-basic-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-inert-basic-foreground)}.df-topnav-nav-basic .df-topnav-navigation-link:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-hovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-hovered-border);color:var(--df-topnav-color-basic-primary-hovered-foreground)!important}.df-topnav-nav-basic .df-topnav-navigation-link:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-pressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-pressed-border);color:var(--df-topnav-color-basic-primary-pressed-foreground)!important}.df-topnav-nav-basic .df-topnav-navigation-link.df-topnav-navigation-link-active{color:var(--df-topnav-color-basic-primary-active-foreground)!important;--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-active-border)}.df-topnav-nav-basic .df-topnav-navigation-link.df-topnav-navigation-link-active:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-activeHovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-activeHovered-border);color:var(--df-topnav-color-basic-primary-activeHovered-foreground)!important}.df-topnav-nav-basic .df-topnav-navigation-link.df-topnav-navigation-link-active:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-activePressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-activePressed-border);color:var(--df-topnav-color-basic-primary-activePressed-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link{color:var(--df-topnav-color-inert-mirror-foreground)!important;--df-topnav-navigation-link-bg-color: var(--df-topnav-color-inert-mirror-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-inert-mirror-foreground)}.df-topnav-nav-mirror .df-topnav-navigation-link:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-hovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-hovered-border);color:var(--df-topnav-color-mirror-primary-hovered-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-pressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-pressed-border);color:var(--df-topnav-color-mirror-primary-pressed-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link.df-topnav-navigation-link-active{color:var(--df-topnav-color-mirror-primary-active-foreground)!important;--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-active-border)}.df-topnav-nav-mirror .df-topnav-navigation-link.df-topnav-navigation-link-active:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-activeHovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-activeHovered-border);color:var(--df-topnav-color-mirror-primary-activeHovered-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link.df-topnav-navigation-link-active:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-activePressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-activePressed-border);color:var(--df-topnav-color-mirror-primary-activePressed-foreground)!important}\n"] }]
|
|
105
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: true }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }] } });
|
|
106
|
+
|
|
107
|
+
// TODO - Implement the dropdown mode of the TopNav using the dropdown wrapper and remove the DfTopNavDropdownToggle directive.
|
|
108
|
+
/**
|
|
109
|
+
* @internal
|
|
110
|
+
* Temporary toggle directive for the dropdown mode of the TopNav, which will be used to toggle the dropdown menu when the navigation item is clicked.
|
|
111
|
+
*
|
|
112
|
+
* It will be removed once the dropdown mode is implemented using a more generic approach that can be used in other components as well.
|
|
113
|
+
*/
|
|
114
|
+
class DfTopNavDropdownToggle {
|
|
115
|
+
constructor() {
|
|
116
|
+
this.dropdown = inject(NgbDropdown);
|
|
117
|
+
this.nativeElement = inject(ElementRef).nativeElement;
|
|
118
|
+
}
|
|
119
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavDropdownToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
120
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DfTopNavDropdownToggle, isStandalone: true, selector: "[dfDropdownToggle]", host: { listeners: { "click": "dropdown.toggle()", "keydown.ArrowUp": "dropdown.onKeyDown($any($event))", "keydown.ArrowDown": "dropdown.onKeyDown($any($event))", "keydown.Home": "dropdown.onKeyDown($any($event))", "keydown.End": "dropdown.onKeyDown($any($event))", "keydown.Tab": "dropdown.onKeyDown($any($event))", "keydown.Shift.Tab": "dropdown.onKeyDown($any($event))" }, properties: { "attr.aria-expanded": "dropdown.isOpen()" } }, providers: [{ provide: NgbDropdownAnchor, useExisting: forwardRef(() => DfTopNavDropdownToggle) }], ngImport: i0 }); }
|
|
121
|
+
}
|
|
122
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavDropdownToggle, decorators: [{
|
|
123
|
+
type: Directive,
|
|
124
|
+
args: [{
|
|
125
|
+
selector: '[dfDropdownToggle]',
|
|
126
|
+
host: {
|
|
127
|
+
'[attr.aria-expanded]': 'dropdown.isOpen()',
|
|
128
|
+
'(click)': 'dropdown.toggle()',
|
|
129
|
+
'(keydown.ArrowUp)': 'dropdown.onKeyDown($any($event))',
|
|
130
|
+
'(keydown.ArrowDown)': 'dropdown.onKeyDown($any($event))',
|
|
131
|
+
'(keydown.Home)': 'dropdown.onKeyDown($any($event))',
|
|
132
|
+
'(keydown.End)': 'dropdown.onKeyDown($any($event))',
|
|
133
|
+
'(keydown.Tab)': 'dropdown.onKeyDown($any($event))',
|
|
134
|
+
'(keydown.Shift.Tab)': 'dropdown.onKeyDown($any($event))'
|
|
135
|
+
},
|
|
136
|
+
providers: [{ provide: NgbDropdownAnchor, useExisting: forwardRef(() => DfTopNavDropdownToggle) }]
|
|
137
|
+
}]
|
|
138
|
+
}] });
|
|
139
|
+
/**
|
|
140
|
+
* The TopNav navigation item component, used to display a navigation link in the TopNav which can have child navigation links.
|
|
141
|
+
*
|
|
142
|
+
* It should be used inside a {@link DfTopNavNavigation} component.
|
|
143
|
+
* @since 21.1
|
|
144
|
+
*/
|
|
145
|
+
class DfTopNavNavigationItem extends DfTopNavNavigationElement {
|
|
146
|
+
constructor() {
|
|
147
|
+
super(...arguments);
|
|
148
|
+
/**
|
|
149
|
+
* The label of the navigation item, which will be displayed as the link text.
|
|
150
|
+
*/
|
|
151
|
+
this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
152
|
+
/**
|
|
153
|
+
* The href of the navigation item, which will be used as the link target. It can be either an internal route or an external URL.
|
|
154
|
+
*/
|
|
155
|
+
this.href = input.required(...(ngDevMode ? [{ debugName: "href" }] : []));
|
|
156
|
+
this.childElements = contentChildren(DF_TOPNAV_NAVIGATION_ELEMENT, ...(ngDevMode ? [{ debugName: "childElements" }] : []));
|
|
157
|
+
this.deepChildLinks = contentChildren(DfTopNavNavigationLink, { ...(ngDevMode ? { debugName: "deepChildLinks" } : {}), descendants: true });
|
|
158
|
+
this.rootChildLinks = computed(() => this.childElements().filter((child) => child instanceof DfTopNavNavigationLink), ...(ngDevMode ? [{ debugName: "rootChildLinks" }] : []));
|
|
159
|
+
this.topNav = inject(DfTopNav);
|
|
160
|
+
this.dropdownMode = computed(() => this.topNav.mode() === 'dropdown', ...(ngDevMode ? [{ debugName: "dropdownMode" }] : []));
|
|
161
|
+
this.dropdownId = `topnav-dropdown-button-${generateId()}`;
|
|
162
|
+
/**
|
|
163
|
+
* Indicates if the navigation item is currently active based on the Router state of its child links.
|
|
164
|
+
*/
|
|
165
|
+
this.active = computed(() => this.deepChildLinks().some((link) => link.active()), ...(ngDevMode ? [{ debugName: "active" }] : []));
|
|
166
|
+
}
|
|
167
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavNavigationItem, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
168
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfTopNavNavigationItem, isStandalone: true, selector: "df-topnav-navigation-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "style.display": "\"contents\"" } }, providers: [{ provide: DF_TOPNAV_NAVIGATION_ELEMENT, useExisting: DfTopNavNavigationItem }], queries: [{ propertyName: "childElements", predicate: DF_TOPNAV_NAVIGATION_ELEMENT, isSignal: true }, { propertyName: "deepChildLinks", predicate: DfTopNavNavigationLink, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
|
|
169
|
+
@if (dropdownMode()) {
|
|
170
|
+
<div ngbDropdown #dropdown="ngbDropdown">
|
|
171
|
+
<button
|
|
172
|
+
type="button"
|
|
173
|
+
class="df-topnav-navigation-link"
|
|
174
|
+
[attr.data-text]="label()"
|
|
175
|
+
[class.df-topnav-navigation-link-active]="active()"
|
|
176
|
+
aria-haspopup="true"
|
|
177
|
+
[attr.aria-controls]="dropdownId"
|
|
178
|
+
dfDropdownToggle
|
|
179
|
+
>
|
|
180
|
+
<span>{{ label() }}</span>
|
|
181
|
+
<span
|
|
182
|
+
class="fal"
|
|
183
|
+
aria-hidden="true"
|
|
184
|
+
[class.fa-chevron-down]="!dropdown.isOpen()"
|
|
185
|
+
[class.fa-chevron-up]="dropdown.isOpen()"
|
|
186
|
+
></span>
|
|
187
|
+
</button>
|
|
188
|
+
<div ngbDropdownMenu class="dropdown-menu-right" role="menu" [attr.id]="dropdownId">
|
|
189
|
+
@for (childLink of rootChildLinks(); track childLink) {
|
|
190
|
+
<a
|
|
191
|
+
ngbDropdownItem
|
|
192
|
+
[routerLink]="childLink.href()"
|
|
193
|
+
[class.active]="childLink.active()"
|
|
194
|
+
[attr.aria-current]="childLink.active() ? 'page' : null"
|
|
195
|
+
role="menuitem"
|
|
196
|
+
>
|
|
197
|
+
{{ childLink.label() }}
|
|
198
|
+
</a>
|
|
199
|
+
}
|
|
200
|
+
</div>
|
|
201
|
+
</div>
|
|
202
|
+
} @else {
|
|
203
|
+
<a
|
|
204
|
+
class="df-topnav-navigation-link"
|
|
205
|
+
[routerLink]="href()"
|
|
206
|
+
[class.df-topnav-navigation-link-active]="active()"
|
|
207
|
+
[attr.aria-current]="active() ? 'page' : null"
|
|
208
|
+
[attr.data-text]="label()"
|
|
209
|
+
>
|
|
210
|
+
<span>{{ label() }}</span>
|
|
211
|
+
</a>
|
|
212
|
+
}
|
|
213
|
+
`, isInline: true, styles: [".df-topnav-navigation-link{height:100%;display:flex;align-items:center;padding:var(--df-spacing-5);outline:none;position:relative;gap:var(--df-spacing-3);text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-topnav-navigation-link{transition:none}}.df-topnav-navigation-link:focus-visible:before{content:\"\";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--df-topnav-navigation-link-bg-color),inset 0 0 0 4px var(--df-topnav-navigation-link-border-color)}.df-topnav-navigation-link{box-shadow:none!important;border:0;border-bottom:0!important;background-color:var(--df-topnav-navigation-link-bg-color)!important}.df-topnav-navigation-link span[data-text]{text-align:center}.df-topnav-navigation-link span[data-text]:before{content:attr(data-text);font-weight:var(--df-typo-weight-bold);visibility:hidden;height:0;overflow:hidden;display:block}.df-topnav-navigation-link.df-topnav-navigation-link-active{font-weight:var(--df-typo-weight-bold)}.df-topnav-navigation-link.df-topnav-navigation-link-active:focus-visible:before{bottom:.1875rem}.df-topnav-navigation-link.df-topnav-navigation-link-active:after{content:\"\";position:absolute;inset:0;border-bottom:.1875rem solid var(--df-topnav-navigation-link-border-color)}.df-topnav-nav-basic .df-topnav-navigation-link{color:var(--df-topnav-color-inert-basic-foreground)!important;--df-topnav-navigation-link-bg-color: var(--df-topnav-color-inert-basic-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-inert-basic-foreground)}.df-topnav-nav-basic .df-topnav-navigation-link:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-hovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-hovered-border);color:var(--df-topnav-color-basic-primary-hovered-foreground)!important}.df-topnav-nav-basic .df-topnav-navigation-link:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-pressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-pressed-border);color:var(--df-topnav-color-basic-primary-pressed-foreground)!important}.df-topnav-nav-basic .df-topnav-navigation-link.df-topnav-navigation-link-active{color:var(--df-topnav-color-basic-primary-active-foreground)!important;--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-active-border)}.df-topnav-nav-basic .df-topnav-navigation-link.df-topnav-navigation-link-active:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-activeHovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-activeHovered-border);color:var(--df-topnav-color-basic-primary-activeHovered-foreground)!important}.df-topnav-nav-basic .df-topnav-navigation-link.df-topnav-navigation-link-active:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-activePressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-activePressed-border);color:var(--df-topnav-color-basic-primary-activePressed-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link{color:var(--df-topnav-color-inert-mirror-foreground)!important;--df-topnav-navigation-link-bg-color: var(--df-topnav-color-inert-mirror-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-inert-mirror-foreground)}.df-topnav-nav-mirror .df-topnav-navigation-link:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-hovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-hovered-border);color:var(--df-topnav-color-mirror-primary-hovered-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-pressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-pressed-border);color:var(--df-topnav-color-mirror-primary-pressed-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link.df-topnav-navigation-link-active{color:var(--df-topnav-color-mirror-primary-active-foreground)!important;--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-active-border)}.df-topnav-nav-mirror .df-topnav-navigation-link.df-topnav-navigation-link-active:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-activeHovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-activeHovered-border);color:var(--df-topnav-color-mirror-primary-activeHovered-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link.df-topnav-navigation-link-active:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-activePressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-activePressed-border);color:var(--df-topnav-color-mirror-primary-activePressed-foreground)!important}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: DfTopNavDropdownToggle, selector: "[dfDropdownToggle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
214
|
+
}
|
|
215
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavNavigationItem, decorators: [{
|
|
216
|
+
type: Component,
|
|
217
|
+
args: [{ selector: 'df-topnav-navigation-item', template: `
|
|
218
|
+
@if (dropdownMode()) {
|
|
219
|
+
<div ngbDropdown #dropdown="ngbDropdown">
|
|
220
|
+
<button
|
|
221
|
+
type="button"
|
|
222
|
+
class="df-topnav-navigation-link"
|
|
223
|
+
[attr.data-text]="label()"
|
|
224
|
+
[class.df-topnav-navigation-link-active]="active()"
|
|
225
|
+
aria-haspopup="true"
|
|
226
|
+
[attr.aria-controls]="dropdownId"
|
|
227
|
+
dfDropdownToggle
|
|
228
|
+
>
|
|
229
|
+
<span>{{ label() }}</span>
|
|
230
|
+
<span
|
|
231
|
+
class="fal"
|
|
232
|
+
aria-hidden="true"
|
|
233
|
+
[class.fa-chevron-down]="!dropdown.isOpen()"
|
|
234
|
+
[class.fa-chevron-up]="dropdown.isOpen()"
|
|
235
|
+
></span>
|
|
236
|
+
</button>
|
|
237
|
+
<div ngbDropdownMenu class="dropdown-menu-right" role="menu" [attr.id]="dropdownId">
|
|
238
|
+
@for (childLink of rootChildLinks(); track childLink) {
|
|
239
|
+
<a
|
|
240
|
+
ngbDropdownItem
|
|
241
|
+
[routerLink]="childLink.href()"
|
|
242
|
+
[class.active]="childLink.active()"
|
|
243
|
+
[attr.aria-current]="childLink.active() ? 'page' : null"
|
|
244
|
+
role="menuitem"
|
|
245
|
+
>
|
|
246
|
+
{{ childLink.label() }}
|
|
247
|
+
</a>
|
|
248
|
+
}
|
|
249
|
+
</div>
|
|
250
|
+
</div>
|
|
251
|
+
} @else {
|
|
252
|
+
<a
|
|
253
|
+
class="df-topnav-navigation-link"
|
|
254
|
+
[routerLink]="href()"
|
|
255
|
+
[class.df-topnav-navigation-link-active]="active()"
|
|
256
|
+
[attr.aria-current]="active() ? 'page' : null"
|
|
257
|
+
[attr.data-text]="label()"
|
|
258
|
+
>
|
|
259
|
+
<span>{{ label() }}</span>
|
|
260
|
+
</a>
|
|
261
|
+
}
|
|
262
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
263
|
+
'[style.display]': '"contents"',
|
|
264
|
+
role: 'listitem'
|
|
265
|
+
}, imports: [RouterLink, NgbDropdown, NgbDropdownMenu, NgbDropdownItem, DfTopNavDropdownToggle], providers: [{ provide: DF_TOPNAV_NAVIGATION_ELEMENT, useExisting: DfTopNavNavigationItem }], encapsulation: ViewEncapsulation.None, styles: [".df-topnav-navigation-link{height:100%;display:flex;align-items:center;padding:var(--df-spacing-5);outline:none;position:relative;gap:var(--df-spacing-3);text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-topnav-navigation-link{transition:none}}.df-topnav-navigation-link:focus-visible:before{content:\"\";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--df-topnav-navigation-link-bg-color),inset 0 0 0 4px var(--df-topnav-navigation-link-border-color)}.df-topnav-navigation-link{box-shadow:none!important;border:0;border-bottom:0!important;background-color:var(--df-topnav-navigation-link-bg-color)!important}.df-topnav-navigation-link span[data-text]{text-align:center}.df-topnav-navigation-link span[data-text]:before{content:attr(data-text);font-weight:var(--df-typo-weight-bold);visibility:hidden;height:0;overflow:hidden;display:block}.df-topnav-navigation-link.df-topnav-navigation-link-active{font-weight:var(--df-typo-weight-bold)}.df-topnav-navigation-link.df-topnav-navigation-link-active:focus-visible:before{bottom:.1875rem}.df-topnav-navigation-link.df-topnav-navigation-link-active:after{content:\"\";position:absolute;inset:0;border-bottom:.1875rem solid var(--df-topnav-navigation-link-border-color)}.df-topnav-nav-basic .df-topnav-navigation-link{color:var(--df-topnav-color-inert-basic-foreground)!important;--df-topnav-navigation-link-bg-color: var(--df-topnav-color-inert-basic-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-inert-basic-foreground)}.df-topnav-nav-basic .df-topnav-navigation-link:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-hovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-hovered-border);color:var(--df-topnav-color-basic-primary-hovered-foreground)!important}.df-topnav-nav-basic .df-topnav-navigation-link:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-pressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-pressed-border);color:var(--df-topnav-color-basic-primary-pressed-foreground)!important}.df-topnav-nav-basic .df-topnav-navigation-link.df-topnav-navigation-link-active{color:var(--df-topnav-color-basic-primary-active-foreground)!important;--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-active-border)}.df-topnav-nav-basic .df-topnav-navigation-link.df-topnav-navigation-link-active:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-activeHovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-activeHovered-border);color:var(--df-topnav-color-basic-primary-activeHovered-foreground)!important}.df-topnav-nav-basic .df-topnav-navigation-link.df-topnav-navigation-link-active:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-activePressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-activePressed-border);color:var(--df-topnav-color-basic-primary-activePressed-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link{color:var(--df-topnav-color-inert-mirror-foreground)!important;--df-topnav-navigation-link-bg-color: var(--df-topnav-color-inert-mirror-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-inert-mirror-foreground)}.df-topnav-nav-mirror .df-topnav-navigation-link:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-hovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-hovered-border);color:var(--df-topnav-color-mirror-primary-hovered-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-pressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-pressed-border);color:var(--df-topnav-color-mirror-primary-pressed-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link.df-topnav-navigation-link-active{color:var(--df-topnav-color-mirror-primary-active-foreground)!important;--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-active-border)}.df-topnav-nav-mirror .df-topnav-navigation-link.df-topnav-navigation-link-active:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-activeHovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-activeHovered-border);color:var(--df-topnav-color-mirror-primary-activeHovered-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link.df-topnav-navigation-link-active:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-activePressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-activePressed-border);color:var(--df-topnav-color-mirror-primary-activePressed-foreground)!important}\n"] }]
|
|
266
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: true }] }], childElements: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DF_TOPNAV_NAVIGATION_ELEMENT), { isSignal: true }] }], deepChildLinks: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DfTopNavNavigationLink), { ...{ descendants: true }, isSignal: true }] }] } });
|
|
267
|
+
|
|
268
|
+
/**
|
|
269
|
+
* @internal
|
|
270
|
+
* Styles the buttons used in the TopNav.
|
|
271
|
+
*/
|
|
272
|
+
class DfTopNavButton {
|
|
273
|
+
constructor() {
|
|
274
|
+
/**
|
|
275
|
+
* The appearance of the TopNav button, which will determine its color. It can be either 'primary' or 'neutral'.
|
|
276
|
+
*/
|
|
277
|
+
this.appearance = input('neutral', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
|
|
278
|
+
/**
|
|
279
|
+
* Whether the button is an icon button or not. If true, the button will have a fixed width and height and no padding, to fit only an icon.
|
|
280
|
+
*/
|
|
281
|
+
this.icon = input(false, { ...(ngDevMode ? { debugName: "icon" } : {}), transform: booleanAttribute });
|
|
282
|
+
}
|
|
283
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
284
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: DfTopNavButton, isStandalone: true, selector: "button[dfTopNavButton]", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.df-topnav-btn-icon": "icon()", "class": "'df-topnav-btn-' + appearance()" }, classAttribute: "df-topnav-btn" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".df-topnav-btn{display:flex;align-items:center;justify-content:center;border-radius:var(--df-borderRadius-main-medium);border:none;outline:none;box-shadow:none;-webkit-user-select:none;user-select:none;position:relative;cursor:pointer;gap:var(--df-spacing-3);padding:.3125rem var(--df-spacing-4);transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-topnav-btn{transition:none}}.df-topnav-btn{background-color:var(--df-topnav-btn-bg-color)}.df-topnav-btn:not(:disabled):focus-visible{box-shadow:0 0 0 2px var(--df-topnav-btn-bg-color),0 0 0 4px var(--df-topnav-btn-border-color)}.df-topnav-btn:disabled{cursor:not-allowed}.df-topnav-btn.df-topnav-btn-icon{width:2.25rem;height:2.25rem;padding:0}.df-topnav-nav-basic .df-topnav-btn-primary{color:var(--df-button-text-basic-color-primary-default-foreground)}.df-topnav-nav-basic .df-topnav-btn-primary:not(:disabled):hover{color:var(--df-button-text-basic-color-primary-hovered-foreground);--df-topnav-btn-bg-color: var(--df-button-text-basic-color-primary-hovered-background);--df-topnav-btn-border-color: var(--df-button-text-basic-color-primary-hovered-border)}.df-topnav-nav-basic .df-topnav-btn-primary:not(:disabled):active{color:var(--df-button-text-basic-color-primary-pressed-foreground);--df-topnav-btn-bg-color: var(--df-button-text-basic-color-primary-pressed-background);--df-topnav-btn-border-color: var(--df-button-text-basic-color-primary-pressed-border)}.df-topnav-nav-basic .df-topnav-btn-primary:disabled{color:var(--df-button-text-basic-color-disabled-foreground)}.df-topnav-nav-basic .df-topnav-btn-neutral{color:var(--df-button-text-basic-color-neutral-default-foreground)}.df-topnav-nav-basic .df-topnav-btn-neutral:not(:disabled):hover{color:var(--df-button-text-basic-color-neutral-hovered-foreground);--df-topnav-btn-bg-color: var(--df-button-text-basic-color-neutral-hovered-background);--df-topnav-btn-border-color: var(--df-button-text-basic-color-neutral-hovered-border)}.df-topnav-nav-basic .df-topnav-btn-neutral:not(:disabled):active{color:var(--df-button-text-basic-color-neutral-pressed-foreground);--df-topnav-btn-bg-color: var(--df-button-text-basic-color-neutral-pressed-background);--df-topnav-btn-border-color: var(--df-button-text-basic-color-neutral-pressed-border)}.df-topnav-nav-basic .df-topnav-btn-neutral:disabled{color:var(--df-button-text-basic-color-disabled-foreground)}.df-topnav-nav-mirror .df-topnav-btn-primary{color:var(--df-button-text-mirror-color-primary-default-foreground)}.df-topnav-nav-mirror .df-topnav-btn-primary:not(:disabled):hover{color:var(--df-button-text-mirror-color-primary-hovered-foreground);--df-topnav-btn-bg-color: var(--df-button-text-mirror-color-primary-hovered-background);--df-topnav-btn-border-color: var(--df-button-text-mirror-color-primary-hovered-border)}.df-topnav-nav-mirror .df-topnav-btn-primary:not(:disabled):active{color:var(--df-button-text-mirror-color-primary-pressed-foreground);--df-topnav-btn-bg-color: var(--df-button-text-mirror-color-primary-pressed-background);--df-topnav-btn-border-color: var(--df-button-text-mirror-color-primary-pressed-border)}.df-topnav-nav-mirror .df-topnav-btn-primary:disabled{color:var(--df-button-text-mirror-color-disabled-foreground)}.df-topnav-nav-mirror .df-topnav-btn-neutral{color:var(--df-button-text-mirror-color-neutral-default-foreground)}.df-topnav-nav-mirror .df-topnav-btn-neutral:not(:disabled):hover{color:var(--df-button-text-mirror-color-neutral-hovered-foreground);--df-topnav-btn-bg-color: var(--df-button-text-mirror-color-neutral-hovered-background);--df-topnav-btn-border-color: var(--df-button-text-mirror-color-neutral-hovered-border)}.df-topnav-nav-mirror .df-topnav-btn-neutral:not(:disabled):active{color:var(--df-button-text-mirror-color-neutral-pressed-foreground);--df-topnav-btn-bg-color: var(--df-button-text-mirror-color-neutral-pressed-background);--df-topnav-btn-border-color: var(--df-button-text-mirror-color-neutral-pressed-border)}.df-topnav-nav-mirror .df-topnav-btn-neutral:disabled{color:var(--df-button-text-mirror-color-disabled-foreground)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
285
|
+
}
|
|
286
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavButton, decorators: [{
|
|
287
|
+
type: Component,
|
|
288
|
+
args: [{ selector: 'button[dfTopNavButton]', host: {
|
|
289
|
+
class: 'df-topnav-btn',
|
|
290
|
+
'[class.df-topnav-btn-icon]': 'icon()',
|
|
291
|
+
'[class]': "'df-topnav-btn-' + appearance()"
|
|
292
|
+
}, template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".df-topnav-btn{display:flex;align-items:center;justify-content:center;border-radius:var(--df-borderRadius-main-medium);border:none;outline:none;box-shadow:none;-webkit-user-select:none;user-select:none;position:relative;cursor:pointer;gap:var(--df-spacing-3);padding:.3125rem var(--df-spacing-4);transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-topnav-btn{transition:none}}.df-topnav-btn{background-color:var(--df-topnav-btn-bg-color)}.df-topnav-btn:not(:disabled):focus-visible{box-shadow:0 0 0 2px var(--df-topnav-btn-bg-color),0 0 0 4px var(--df-topnav-btn-border-color)}.df-topnav-btn:disabled{cursor:not-allowed}.df-topnav-btn.df-topnav-btn-icon{width:2.25rem;height:2.25rem;padding:0}.df-topnav-nav-basic .df-topnav-btn-primary{color:var(--df-button-text-basic-color-primary-default-foreground)}.df-topnav-nav-basic .df-topnav-btn-primary:not(:disabled):hover{color:var(--df-button-text-basic-color-primary-hovered-foreground);--df-topnav-btn-bg-color: var(--df-button-text-basic-color-primary-hovered-background);--df-topnav-btn-border-color: var(--df-button-text-basic-color-primary-hovered-border)}.df-topnav-nav-basic .df-topnav-btn-primary:not(:disabled):active{color:var(--df-button-text-basic-color-primary-pressed-foreground);--df-topnav-btn-bg-color: var(--df-button-text-basic-color-primary-pressed-background);--df-topnav-btn-border-color: var(--df-button-text-basic-color-primary-pressed-border)}.df-topnav-nav-basic .df-topnav-btn-primary:disabled{color:var(--df-button-text-basic-color-disabled-foreground)}.df-topnav-nav-basic .df-topnav-btn-neutral{color:var(--df-button-text-basic-color-neutral-default-foreground)}.df-topnav-nav-basic .df-topnav-btn-neutral:not(:disabled):hover{color:var(--df-button-text-basic-color-neutral-hovered-foreground);--df-topnav-btn-bg-color: var(--df-button-text-basic-color-neutral-hovered-background);--df-topnav-btn-border-color: var(--df-button-text-basic-color-neutral-hovered-border)}.df-topnav-nav-basic .df-topnav-btn-neutral:not(:disabled):active{color:var(--df-button-text-basic-color-neutral-pressed-foreground);--df-topnav-btn-bg-color: var(--df-button-text-basic-color-neutral-pressed-background);--df-topnav-btn-border-color: var(--df-button-text-basic-color-neutral-pressed-border)}.df-topnav-nav-basic .df-topnav-btn-neutral:disabled{color:var(--df-button-text-basic-color-disabled-foreground)}.df-topnav-nav-mirror .df-topnav-btn-primary{color:var(--df-button-text-mirror-color-primary-default-foreground)}.df-topnav-nav-mirror .df-topnav-btn-primary:not(:disabled):hover{color:var(--df-button-text-mirror-color-primary-hovered-foreground);--df-topnav-btn-bg-color: var(--df-button-text-mirror-color-primary-hovered-background);--df-topnav-btn-border-color: var(--df-button-text-mirror-color-primary-hovered-border)}.df-topnav-nav-mirror .df-topnav-btn-primary:not(:disabled):active{color:var(--df-button-text-mirror-color-primary-pressed-foreground);--df-topnav-btn-bg-color: var(--df-button-text-mirror-color-primary-pressed-background);--df-topnav-btn-border-color: var(--df-button-text-mirror-color-primary-pressed-border)}.df-topnav-nav-mirror .df-topnav-btn-primary:disabled{color:var(--df-button-text-mirror-color-disabled-foreground)}.df-topnav-nav-mirror .df-topnav-btn-neutral{color:var(--df-button-text-mirror-color-neutral-default-foreground)}.df-topnav-nav-mirror .df-topnav-btn-neutral:not(:disabled):hover{color:var(--df-button-text-mirror-color-neutral-hovered-foreground);--df-topnav-btn-bg-color: var(--df-button-text-mirror-color-neutral-hovered-background);--df-topnav-btn-border-color: var(--df-button-text-mirror-color-neutral-hovered-border)}.df-topnav-nav-mirror .df-topnav-btn-neutral:not(:disabled):active{color:var(--df-button-text-mirror-color-neutral-pressed-foreground);--df-topnav-btn-bg-color: var(--df-button-text-mirror-color-neutral-pressed-background);--df-topnav-btn-border-color: var(--df-button-text-mirror-color-neutral-pressed-border)}.df-topnav-nav-mirror .df-topnav-btn-neutral:disabled{color:var(--df-button-text-mirror-color-disabled-foreground)}\n"] }]
|
|
293
|
+
}], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
|
|
294
|
+
|
|
295
|
+
/**
|
|
296
|
+
* @internal
|
|
297
|
+
* An Injection Token for the DfTopNavQuickActionElement interface, which represents a navigation quick action in the top navigation component.
|
|
298
|
+
*/
|
|
299
|
+
const DF_TOPNAV_QUICK_ACTION_ELEMENT = new InjectionToken('DF_TOPNAV_QUICK_ACTION_ELEMENT');
|
|
300
|
+
/**
|
|
301
|
+
* @internal
|
|
302
|
+
* An abstract class that defines the structure of a quick action element in the top navigation component.
|
|
303
|
+
*/
|
|
304
|
+
class DfTopNavQuickActionElement {
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
/**
|
|
308
|
+
* The TopNav action content directive, used to provide the content of the popover or drawer associated to a {@link DfTopNavQuickActionButton}.
|
|
309
|
+
*
|
|
310
|
+
* It is showed in a popover in desktop and in a drawer on tablet and mobile when the associated quick action button is clicked.
|
|
311
|
+
* @since 21.1
|
|
312
|
+
*/
|
|
313
|
+
class DfTopNavQuickActionButtonContent {
|
|
314
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionButtonContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
315
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DfTopNavQuickActionButtonContent, isStandalone: true, selector: "ng-template[dfTopNavQuickActionButtonContent]", ngImport: i0 }); }
|
|
316
|
+
}
|
|
317
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionButtonContent, decorators: [{
|
|
318
|
+
type: Directive,
|
|
319
|
+
args: [{ selector: 'ng-template[dfTopNavQuickActionButtonContent]' }]
|
|
320
|
+
}] });
|
|
321
|
+
/**
|
|
322
|
+
* The TopNav action icon directive, used to provide a custom icon for the {@link DfTopNavQuickActionButton}.
|
|
323
|
+
*
|
|
324
|
+
* If not provided, the quick action button will use the default icon specified by the {@link DfTopNavQuickActionButton.icon} input.
|
|
325
|
+
* @since 21.1
|
|
326
|
+
*/
|
|
327
|
+
class DfTopNavQuickActionButtonIcon {
|
|
328
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionButtonIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
329
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DfTopNavQuickActionButtonIcon, isStandalone: true, selector: "ng-template[dfTopNavQuickActionButtonIcon]", ngImport: i0 }); }
|
|
330
|
+
}
|
|
331
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionButtonIcon, decorators: [{
|
|
332
|
+
type: Directive,
|
|
333
|
+
args: [{ selector: 'ng-template[dfTopNavQuickActionButtonIcon]' }]
|
|
334
|
+
}] });
|
|
335
|
+
/**
|
|
336
|
+
* The TopNav quick action button component, used to display a quick action button in the TopNav.
|
|
337
|
+
*
|
|
338
|
+
* It should be used inside a {@link DfTopNavQuickActions} component.
|
|
339
|
+
*
|
|
340
|
+
* It can be associated with a popover content using the {@link DfTopNavQuickActionButtonContent} directive or be used alone with the {@link DfTopNavQuickActionButton.act} output.
|
|
341
|
+
*
|
|
342
|
+
* The icon can be set through the {@link DfTopNavQuickActionButton.icon} input or by using the {@link DfTopNavQuickActionButtonIcon} directive.
|
|
343
|
+
*
|
|
344
|
+
* See {@link https://design-factory.amadeus.net/components/topnav/examples#quick-actions|Design Factory example}
|
|
345
|
+
* @since 21.1
|
|
346
|
+
*/
|
|
347
|
+
class DfTopNavQuickActionButton extends DfTopNavQuickActionElement {
|
|
348
|
+
constructor() {
|
|
349
|
+
super();
|
|
350
|
+
/**
|
|
351
|
+
* The appearance of the quick action button, which will determine its color. It can be either 'primary' or 'neutral'.
|
|
352
|
+
*/
|
|
353
|
+
this.appearance = input('neutral', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
|
|
354
|
+
/**
|
|
355
|
+
* The label of the quick action button, which will be used as the aria-label attribute for accessibility on desktop and label in the drawer.
|
|
356
|
+
*/
|
|
357
|
+
this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
358
|
+
/**
|
|
359
|
+
* The icon of the quick action button.
|
|
360
|
+
*/
|
|
361
|
+
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
|
|
362
|
+
/**
|
|
363
|
+
* Whether the quick action button is disabled or not.
|
|
364
|
+
*/
|
|
365
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
|
|
366
|
+
/**
|
|
367
|
+
* The event emitted when the quick action button is clicked. It can be used to perform an action instead of showing the associated popover or drawer content.
|
|
368
|
+
*/
|
|
369
|
+
this.act = output();
|
|
370
|
+
this.actionContent = contentChild(DfTopNavQuickActionButtonContent, { ...(ngDevMode ? { debugName: "actionContent" } : {}), read: TemplateRef });
|
|
371
|
+
this.actionIcon = contentChild(DfTopNavQuickActionButtonIcon, { ...(ngDevMode ? { debugName: "actionIcon" } : {}), read: TemplateRef });
|
|
372
|
+
this.popover = viewChild.required('popover');
|
|
373
|
+
this.isLg = toAngularSignal(lg$);
|
|
374
|
+
/**
|
|
375
|
+
* Need to close the popover on smaller screen
|
|
376
|
+
*/
|
|
377
|
+
effect(() => {
|
|
378
|
+
if (!this.isLg()) {
|
|
379
|
+
untracked(() => {
|
|
380
|
+
this.popover().close(false);
|
|
381
|
+
});
|
|
382
|
+
}
|
|
383
|
+
});
|
|
384
|
+
}
|
|
385
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
386
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: DfTopNavQuickActionButton, isStandalone: true, selector: "df-topnav-quick-action-button", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { act: "act" }, providers: [{ provide: DF_TOPNAV_QUICK_ACTION_ELEMENT, useExisting: DfTopNavQuickActionButton }], queries: [{ propertyName: "actionContent", first: true, predicate: DfTopNavQuickActionButtonContent, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "actionIcon", first: true, predicate: DfTopNavQuickActionButtonIcon, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
|
|
387
|
+
<button
|
|
388
|
+
dfTopNavButton
|
|
389
|
+
icon
|
|
390
|
+
type="button"
|
|
391
|
+
[appearance]="appearance()"
|
|
392
|
+
[attr.aria-label]="label()"
|
|
393
|
+
[ngbPopover]="actionContent()"
|
|
394
|
+
placement="bottom-end"
|
|
395
|
+
autoClose="outside"
|
|
396
|
+
container="body"
|
|
397
|
+
popoverClass="df-topnav-quick-action-popover"
|
|
398
|
+
#popover="ngbPopover"
|
|
399
|
+
[disabled]="disabled()"
|
|
400
|
+
(click)="act.emit()"
|
|
401
|
+
>
|
|
402
|
+
<ng-template #dfTopNavQuickActionDefaultIcon>
|
|
403
|
+
<span class="df-topnav-toggle-icon fal" [class]="icon()"></span>
|
|
404
|
+
</ng-template>
|
|
405
|
+
<ng-container *ngTemplateOutlet="actionIcon() || dfTopNavQuickActionDefaultIcon" />
|
|
406
|
+
</button>
|
|
407
|
+
`, isInline: true, styles: ["@media(min-width:768px)and (max-width:991px){.df-app-container:has(.df-drawer.df-collapse-show,.df-drawer.df-collapse-collapsing) .df-topnav-quick-action-popover{z-index:2010}}\n"], dependencies: [{ kind: "component", type: DfTopNavButton, selector: "button[dfTopNavButton]", inputs: ["appearance", "icon"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
408
|
+
}
|
|
409
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionButton, decorators: [{
|
|
410
|
+
type: Component,
|
|
411
|
+
args: [{ selector: 'df-topnav-quick-action-button', template: `
|
|
412
|
+
<button
|
|
413
|
+
dfTopNavButton
|
|
414
|
+
icon
|
|
415
|
+
type="button"
|
|
416
|
+
[appearance]="appearance()"
|
|
417
|
+
[attr.aria-label]="label()"
|
|
418
|
+
[ngbPopover]="actionContent()"
|
|
419
|
+
placement="bottom-end"
|
|
420
|
+
autoClose="outside"
|
|
421
|
+
container="body"
|
|
422
|
+
popoverClass="df-topnav-quick-action-popover"
|
|
423
|
+
#popover="ngbPopover"
|
|
424
|
+
[disabled]="disabled()"
|
|
425
|
+
(click)="act.emit()"
|
|
426
|
+
>
|
|
427
|
+
<ng-template #dfTopNavQuickActionDefaultIcon>
|
|
428
|
+
<span class="df-topnav-toggle-icon fal" [class]="icon()"></span>
|
|
429
|
+
</ng-template>
|
|
430
|
+
<ng-container *ngTemplateOutlet="actionIcon() || dfTopNavQuickActionDefaultIcon" />
|
|
431
|
+
</button>
|
|
432
|
+
`, imports: [DfTopNavButton, NgbPopover, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: DF_TOPNAV_QUICK_ACTION_ELEMENT, useExisting: DfTopNavQuickActionButton }], styles: ["@media(min-width:768px)and (max-width:991px){.df-app-container:has(.df-drawer.df-collapse-show,.df-drawer.df-collapse-collapsing) .df-topnav-quick-action-popover{z-index:2010}}\n"] }]
|
|
433
|
+
}], ctorParameters: () => [], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], act: [{ type: i0.Output, args: ["act"] }], actionContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfTopNavQuickActionButtonContent), { ...{ read: TemplateRef }, isSignal: true }] }], actionIcon: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfTopNavQuickActionButtonIcon), { ...{ read: TemplateRef }, isSignal: true }] }], popover: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }] } });
|
|
434
|
+
|
|
435
|
+
// Warning: I am deeply sorry for the pyramid of doom that is the nested for loops in the template, but I could not find a better way to render the nested sidenav items and keep sidenav items contentChild queries working.
|
|
436
|
+
/**
|
|
437
|
+
* AppContainer is a simple wrapper component that provides a consistent layout for applications using the {@link DfTopNav} component.
|
|
438
|
+
*
|
|
439
|
+
* It ensures that the content of the application is displayed correctly below the {@link DfTopNav} and can be used to apply common styles or layout properties to the entire application.
|
|
440
|
+
*
|
|
441
|
+
* See {@link https://design-factory.amadeus.net/components/topnav|Design Factory documentation} for details and examples.
|
|
442
|
+
* @since 21.1
|
|
443
|
+
*/
|
|
444
|
+
class DfAppContainer {
|
|
445
|
+
isSideItem(item) {
|
|
446
|
+
return 'children' in item;
|
|
447
|
+
}
|
|
448
|
+
constructor() {
|
|
449
|
+
this.topnav = contentChild.required(DfTopNav);
|
|
450
|
+
this.sidenav = viewChild(DfSidenavComponent, ...(ngDevMode ? [{ debugName: "sidenav" }] : []));
|
|
451
|
+
this.sidenavContent = computed(() => this.topnav()['sidenavContent']() ?? [], ...(ngDevMode ? [{ debugName: "sidenavContent" }] : []));
|
|
452
|
+
this.drawerContainerActions = viewChild.required('drawerContainerActions');
|
|
453
|
+
// Sync the state of the sidenav with the topnav on initialization and whenever the state of the sidenav changes
|
|
454
|
+
effect(() => {
|
|
455
|
+
this.topnav().navExpanded.set(!this.sidenav()?.isMinimized());
|
|
456
|
+
});
|
|
457
|
+
effect(() => {
|
|
458
|
+
let sidenavMinimized = false;
|
|
459
|
+
let sidenav = undefined;
|
|
460
|
+
const topnavExpanded = this.topnav().navExpanded();
|
|
461
|
+
untracked(() => {
|
|
462
|
+
sidenav = this.sidenav();
|
|
463
|
+
sidenavMinimized = sidenav?.isMinimized() ?? false;
|
|
464
|
+
});
|
|
465
|
+
// we need this condition to make sure to not call toggleMinimize when the drawer has not rendered yet (issue with the drawer toggleMinimze)
|
|
466
|
+
if (topnavExpanded === sidenavMinimized) {
|
|
467
|
+
sidenav?.toggleMinimize(!topnavExpanded);
|
|
468
|
+
}
|
|
469
|
+
});
|
|
470
|
+
}
|
|
471
|
+
ngAfterContentInit() {
|
|
472
|
+
this.topnav()['inAppContainer'].set(true);
|
|
473
|
+
}
|
|
474
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfAppContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
475
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfAppContainer, isStandalone: true, selector: "df-app-container", host: { classAttribute: "df-app-container" }, queries: [{ propertyName: "topnav", first: true, predicate: DfTopNav, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sidenav", first: true, predicate: DfSidenavComponent, descendants: true, isSignal: true }, { propertyName: "drawerContainerActions", first: true, predicate: ["drawerContainerActions"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
476
|
+
<ng-content select="df-topnav" />
|
|
477
|
+
<ng-content select="df-env-banner" />
|
|
478
|
+
<div class="df-app-container-content" #drawerContainerActions>
|
|
479
|
+
@if (sidenavContent().length) {
|
|
480
|
+
<df-sidenav [resizable]="false" [searchable]="false" class="df-sidenav-light-sky">
|
|
481
|
+
@for (element1 of sidenavContent(); track element1.label()) {
|
|
482
|
+
@if (isSideItem(element1)) {
|
|
483
|
+
<df-sidenav-item [label]="element1.label()">
|
|
484
|
+
@for (element2 of element1.children(); track element2.label()) {
|
|
485
|
+
@if (isSideItem(element2)) {
|
|
486
|
+
<df-sidenav-item [label]="element2.label()">
|
|
487
|
+
@for (element3 of element2.children(); track element3.label()) {
|
|
488
|
+
@if (isSideItem(element3)) {
|
|
489
|
+
<df-sidenav-item [label]="element3.label()">
|
|
490
|
+
@for (element4 of element3.children(); track element4.label()) {
|
|
491
|
+
@if (!isSideItem(element4)) {
|
|
492
|
+
<df-sidenav-link
|
|
493
|
+
[label]="element4.label()"
|
|
494
|
+
[linkPath]="element4.href()"
|
|
495
|
+
[routerLinkActiveOptions]="element4.routerLinkActiveOptions()"
|
|
496
|
+
/>
|
|
497
|
+
}
|
|
498
|
+
}
|
|
499
|
+
</df-sidenav-item>
|
|
500
|
+
} @else {
|
|
501
|
+
<df-sidenav-link
|
|
502
|
+
[label]="element3.label()"
|
|
503
|
+
[linkPath]="element3.href()"
|
|
504
|
+
[routerLinkActiveOptions]="element3.routerLinkActiveOptions()"
|
|
505
|
+
/>
|
|
506
|
+
}
|
|
507
|
+
}
|
|
508
|
+
</df-sidenav-item>
|
|
509
|
+
} @else {
|
|
510
|
+
<df-sidenav-link
|
|
511
|
+
[label]="element2.label()"
|
|
512
|
+
[linkPath]="element2.href()"
|
|
513
|
+
[routerLinkActiveOptions]="element2.routerLinkActiveOptions()"
|
|
514
|
+
/>
|
|
515
|
+
}
|
|
516
|
+
}
|
|
517
|
+
</df-sidenav-item>
|
|
518
|
+
} @else {
|
|
519
|
+
<df-sidenav-link
|
|
520
|
+
[label]="element1.label()"
|
|
521
|
+
[linkPath]="element1.href()"
|
|
522
|
+
[routerLinkActiveOptions]="element1.routerLinkActiveOptions()"
|
|
523
|
+
/>
|
|
524
|
+
}
|
|
525
|
+
}
|
|
526
|
+
</df-sidenav>
|
|
527
|
+
}
|
|
528
|
+
<ng-content select="main" />
|
|
529
|
+
</div>
|
|
530
|
+
`, isInline: true, styles: [".df-app-container{height:100dvh;width:100%;display:flex;flex-direction:column}.df-app-container-content{flex-grow:1;display:flex;width:100%;position:relative;overflow:hidden}main{flex-grow:1;overflow-y:auto;scrollbar-color:var(--df-color-primary-soft-default-foreground) var(--df-color-inert-neutral-main-background);scroll-padding-top:var(--df-spacing-5)}\n"], dependencies: [{ kind: "component", type: DfSidenavComponent, selector: "df-sidenav", inputs: ["searchable", "resizable", "collapsible", "enableMobile", "disableInitialDesktopAutoScroll"] }, { kind: "component", type: DfSidenavItemComponent, selector: "df-sidenav-item", inputs: ["label", "collapsed", "icon"], outputs: ["collapsedChange"] }, { kind: "component", type: DfSidenavLinkComponent, selector: "df-sidenav-link", inputs: ["linkPath", "label", "icon", "routerLinkActiveOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
531
|
+
}
|
|
532
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfAppContainer, decorators: [{
|
|
533
|
+
type: Component,
|
|
534
|
+
args: [{ selector: 'df-app-container', template: `
|
|
535
|
+
<ng-content select="df-topnav" />
|
|
536
|
+
<ng-content select="df-env-banner" />
|
|
537
|
+
<div class="df-app-container-content" #drawerContainerActions>
|
|
538
|
+
@if (sidenavContent().length) {
|
|
539
|
+
<df-sidenav [resizable]="false" [searchable]="false" class="df-sidenav-light-sky">
|
|
540
|
+
@for (element1 of sidenavContent(); track element1.label()) {
|
|
541
|
+
@if (isSideItem(element1)) {
|
|
542
|
+
<df-sidenav-item [label]="element1.label()">
|
|
543
|
+
@for (element2 of element1.children(); track element2.label()) {
|
|
544
|
+
@if (isSideItem(element2)) {
|
|
545
|
+
<df-sidenav-item [label]="element2.label()">
|
|
546
|
+
@for (element3 of element2.children(); track element3.label()) {
|
|
547
|
+
@if (isSideItem(element3)) {
|
|
548
|
+
<df-sidenav-item [label]="element3.label()">
|
|
549
|
+
@for (element4 of element3.children(); track element4.label()) {
|
|
550
|
+
@if (!isSideItem(element4)) {
|
|
551
|
+
<df-sidenav-link
|
|
552
|
+
[label]="element4.label()"
|
|
553
|
+
[linkPath]="element4.href()"
|
|
554
|
+
[routerLinkActiveOptions]="element4.routerLinkActiveOptions()"
|
|
555
|
+
/>
|
|
556
|
+
}
|
|
557
|
+
}
|
|
558
|
+
</df-sidenav-item>
|
|
559
|
+
} @else {
|
|
560
|
+
<df-sidenav-link
|
|
561
|
+
[label]="element3.label()"
|
|
562
|
+
[linkPath]="element3.href()"
|
|
563
|
+
[routerLinkActiveOptions]="element3.routerLinkActiveOptions()"
|
|
564
|
+
/>
|
|
565
|
+
}
|
|
566
|
+
}
|
|
567
|
+
</df-sidenav-item>
|
|
568
|
+
} @else {
|
|
569
|
+
<df-sidenav-link
|
|
570
|
+
[label]="element2.label()"
|
|
571
|
+
[linkPath]="element2.href()"
|
|
572
|
+
[routerLinkActiveOptions]="element2.routerLinkActiveOptions()"
|
|
573
|
+
/>
|
|
574
|
+
}
|
|
575
|
+
}
|
|
576
|
+
</df-sidenav-item>
|
|
577
|
+
} @else {
|
|
578
|
+
<df-sidenav-link
|
|
579
|
+
[label]="element1.label()"
|
|
580
|
+
[linkPath]="element1.href()"
|
|
581
|
+
[routerLinkActiveOptions]="element1.routerLinkActiveOptions()"
|
|
582
|
+
/>
|
|
583
|
+
}
|
|
584
|
+
}
|
|
585
|
+
</df-sidenav>
|
|
586
|
+
}
|
|
587
|
+
<ng-content select="main" />
|
|
588
|
+
</div>
|
|
589
|
+
`, host: {
|
|
590
|
+
class: 'df-app-container'
|
|
591
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [DfSidenavComponent, DfSidenavItemComponent, DfSidenavLinkComponent], styles: [".df-app-container{height:100dvh;width:100%;display:flex;flex-direction:column}.df-app-container-content{flex-grow:1;display:flex;width:100%;position:relative;overflow:hidden}main{flex-grow:1;overflow-y:auto;scrollbar-color:var(--df-color-primary-soft-default-foreground) var(--df-color-inert-neutral-main-background);scroll-padding-top:var(--df-spacing-5)}\n"] }]
|
|
592
|
+
}], ctorParameters: () => [], propDecorators: { topnav: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfTopNav), { isSignal: true }] }], sidenav: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DfSidenavComponent), { isSignal: true }] }], drawerContainerActions: [{ type: i0.ViewChild, args: ['drawerContainerActions', { isSignal: true }] }] } });
|
|
593
|
+
|
|
594
|
+
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
595
|
+
/**
|
|
596
|
+
* The TopNav action "in topnav" content directive.
|
|
597
|
+
*
|
|
598
|
+
* It drives the display of the {@link DfTopNavQuickAction} on larger screens, where the quick action is displayed in a topnav.
|
|
599
|
+
*
|
|
600
|
+
* @since 21.1
|
|
601
|
+
*/
|
|
602
|
+
class DfTopNavQuickActionInTopNav {
|
|
603
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionInTopNav, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
604
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DfTopNavQuickActionInTopNav, isStandalone: true, selector: "ng-template[dfTopNavQuickActionInTopNav]", ngImport: i0 }); }
|
|
605
|
+
}
|
|
606
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionInTopNav, decorators: [{
|
|
607
|
+
type: Directive,
|
|
608
|
+
args: [{ selector: 'ng-template[dfTopNavQuickActionInTopNav]' }]
|
|
609
|
+
}] });
|
|
610
|
+
/**
|
|
611
|
+
* The TopNav action "in drawer" content directive.
|
|
612
|
+
*
|
|
613
|
+
* It drives the display of the {@link DfTopNavQuickAction} on smaller screens, where the quick action is displayed in a drawer.
|
|
614
|
+
*
|
|
615
|
+
* @since 21.1
|
|
616
|
+
*/
|
|
617
|
+
class DfTopNavQuickActionInDrawer {
|
|
618
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionInDrawer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
619
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DfTopNavQuickActionInDrawer, isStandalone: true, selector: "ng-template[dfTopNavQuickActionInDrawer]", ngImport: i0 }); }
|
|
620
|
+
}
|
|
621
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionInDrawer, decorators: [{
|
|
622
|
+
type: Directive,
|
|
623
|
+
args: [{ selector: 'ng-template[dfTopNavQuickActionInDrawer]' }]
|
|
624
|
+
}] });
|
|
625
|
+
/**
|
|
626
|
+
* The TopNav quick action component, used to display a quick action in the TopNav.
|
|
627
|
+
*
|
|
628
|
+
* Consider using the {@link DfTopNavQuickActionButton} component instead, which provides a button with the appropriate styling and behavior for quick actions in the TopNav.
|
|
629
|
+
*
|
|
630
|
+
* It should be used inside a {@link DfTopNavQuickActions} component.
|
|
631
|
+
* It requires a {@link DfTopNavQuickActionInTopNav} template to be provided as content, which will be displayed in desktop. An optional {@link DfTopNavQuickActionInDrawer} template can also be provided, which will be displayed in mobile and tablet instead of the topnav template.
|
|
632
|
+
*
|
|
633
|
+
* See {@link https://design-factory.amadeus.net/components/topnav/examples#quick-actions|Design Factory example}
|
|
634
|
+
* @since 21.1
|
|
635
|
+
*/
|
|
636
|
+
class DfTopNavQuickAction extends DfTopNavQuickActionElement {
|
|
637
|
+
constructor() {
|
|
638
|
+
super(...arguments);
|
|
639
|
+
this.content = contentChild.required(DfTopNavQuickActionInTopNav, { read: TemplateRef });
|
|
640
|
+
this.drawerContent = contentChild(DfTopNavQuickActionInDrawer, { ...(ngDevMode ? { debugName: "drawerContent" } : {}), read: TemplateRef });
|
|
641
|
+
}
|
|
642
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickAction, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
643
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: DfTopNavQuickAction, isStandalone: true, selector: "df-topnav-quick-action", providers: [{ provide: DF_TOPNAV_QUICK_ACTION_ELEMENT, useExisting: DfTopNavQuickAction }], queries: [{ propertyName: "content", first: true, predicate: DfTopNavQuickActionInTopNav, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "drawerContent", first: true, predicate: DfTopNavQuickActionInDrawer, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: ` <ng-container *ngTemplateOutlet="content()" /> `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
644
|
+
}
|
|
645
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickAction, decorators: [{
|
|
646
|
+
type: Component,
|
|
647
|
+
args: [{
|
|
648
|
+
selector: 'df-topnav-quick-action',
|
|
649
|
+
template: ` <ng-container *ngTemplateOutlet="content()" /> `,
|
|
650
|
+
imports: [NgTemplateOutlet],
|
|
651
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
652
|
+
providers: [{ provide: DF_TOPNAV_QUICK_ACTION_ELEMENT, useExisting: DfTopNavQuickAction }]
|
|
653
|
+
}]
|
|
654
|
+
}], propDecorators: { content: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfTopNavQuickActionInTopNav), { ...{ read: TemplateRef }, isSignal: true }] }], drawerContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfTopNavQuickActionInDrawer), { ...{ read: TemplateRef }, isSignal: true }] }] } });
|
|
655
|
+
|
|
656
|
+
// TODO - Use the wrapped input instead of bootstrap classes
|
|
657
|
+
/**
|
|
658
|
+
* The TopNav quick action search input directive.
|
|
659
|
+
*
|
|
660
|
+
* It should be used inside a {@link DfTopNavQuickActionSearch} component.
|
|
661
|
+
* @since 21.1
|
|
662
|
+
*/
|
|
663
|
+
class DfTopNavQuickActionSearchInput {
|
|
664
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionSearchInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
665
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: DfTopNavQuickActionSearchInput, isStandalone: true, selector: "input[dfTopNavQuickActionSearchInput]", host: { attributes: { "type": "search" }, classAttribute: "df-topnav-quick-action-search-input form-control text-bg-neutral-alt df-input-withicon" }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
666
|
+
}
|
|
667
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionSearchInput, decorators: [{
|
|
668
|
+
type: Component,
|
|
669
|
+
args: [{
|
|
670
|
+
// eslint-disable-next-line @angular-eslint/component-selector
|
|
671
|
+
selector: 'input[dfTopNavQuickActionSearchInput]',
|
|
672
|
+
host: {
|
|
673
|
+
type: 'search',
|
|
674
|
+
class: 'df-topnav-quick-action-search-input form-control text-bg-neutral-alt df-input-withicon'
|
|
675
|
+
},
|
|
676
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
677
|
+
template: ``
|
|
678
|
+
}]
|
|
679
|
+
}] });
|
|
680
|
+
/**
|
|
681
|
+
* The TopNav quick action search component, used to display a search input in the TopNav quick actions.
|
|
682
|
+
*
|
|
683
|
+
* It should be used inside a {@link DfTopNavQuickActions} component and contain a ng-template with an input {@link DfTopNavQuickActionSearchInput}.
|
|
684
|
+
*
|
|
685
|
+
* See {@link https://design-factory.amadeus.net/components/topnav/examples#quick-actions|Design Factory example}
|
|
686
|
+
* @since 21.1
|
|
687
|
+
*/
|
|
688
|
+
class DfTopNavQuickActionSearch extends DfTopNavQuickActionElement {
|
|
689
|
+
constructor() {
|
|
690
|
+
super(...arguments);
|
|
691
|
+
this.templateRef = contentChild.required((TemplateRef));
|
|
692
|
+
/**
|
|
693
|
+
* The aria-label of the search.
|
|
694
|
+
*
|
|
695
|
+
* It is required to set it if you have more than one global search in your page, to allow assistive technologies to differentiate between them.
|
|
696
|
+
* See [ARIA guidelines](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/search_role) for more information.
|
|
697
|
+
*/
|
|
698
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
699
|
+
}
|
|
700
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionSearch, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
701
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: DfTopNavQuickActionSearch, isStandalone: true, selector: "df-topnav-quick-action-search", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "search" }, properties: { "attr.aria-label": "ariaLabel()" } }, providers: [{ provide: DF_TOPNAV_QUICK_ACTION_ELEMENT, useExisting: DfTopNavQuickActionSearch }], queries: [{ propertyName: "templateRef", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
|
|
702
|
+
<div class="df-topnav-quick-action-search-container input-group">
|
|
703
|
+
<div class="input-group-prepend text-bg-neutral-alt" aria-hidden="true">
|
|
704
|
+
<span class="input-group-text fa-light fa-search"></span>
|
|
705
|
+
</div>
|
|
706
|
+
<ng-container *ngTemplateOutlet="templateRef()" />
|
|
707
|
+
</div>
|
|
708
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
709
|
+
}
|
|
710
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionSearch, decorators: [{
|
|
711
|
+
type: Component,
|
|
712
|
+
args: [{
|
|
713
|
+
selector: 'df-topnav-quick-action-search',
|
|
714
|
+
template: `
|
|
715
|
+
<div class="df-topnav-quick-action-search-container input-group">
|
|
716
|
+
<div class="input-group-prepend text-bg-neutral-alt" aria-hidden="true">
|
|
717
|
+
<span class="input-group-text fa-light fa-search"></span>
|
|
718
|
+
</div>
|
|
719
|
+
<ng-container *ngTemplateOutlet="templateRef()" />
|
|
720
|
+
</div>
|
|
721
|
+
`,
|
|
722
|
+
host: {
|
|
723
|
+
role: 'search',
|
|
724
|
+
'[attr.aria-label]': 'ariaLabel()'
|
|
725
|
+
},
|
|
726
|
+
imports: [NgTemplateOutlet],
|
|
727
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
728
|
+
providers: [{ provide: DF_TOPNAV_QUICK_ACTION_ELEMENT, useExisting: DfTopNavQuickActionSearch }]
|
|
729
|
+
}]
|
|
730
|
+
}], propDecorators: { templateRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
731
|
+
|
|
732
|
+
/**
|
|
733
|
+
* The TopNav quick actions component, used to display a list of quick action buttons in the TopNav. On large screens, the buttons are displayed inline, while on smaller screens, they are displayed in a drawer.
|
|
734
|
+
*
|
|
735
|
+
* See {@link https://design-factory.amadeus.net/components/topnav/examples#quick-actions|Design Factory example}
|
|
736
|
+
* @since 21.1
|
|
737
|
+
*/
|
|
738
|
+
class DfTopNavQuickActions {
|
|
739
|
+
isButton(action) {
|
|
740
|
+
return action instanceof DfTopNavQuickActionButton;
|
|
741
|
+
}
|
|
742
|
+
isAction(action) {
|
|
743
|
+
return action instanceof DfTopNavQuickAction;
|
|
744
|
+
}
|
|
745
|
+
async clickQuickAction(actionBtn) {
|
|
746
|
+
if (actionBtn['actionContent']()) {
|
|
747
|
+
this.selectedQuickAction.set(actionBtn);
|
|
748
|
+
}
|
|
749
|
+
else {
|
|
750
|
+
await this.drawer().close(false);
|
|
751
|
+
actionBtn.act.emit();
|
|
752
|
+
}
|
|
753
|
+
}
|
|
754
|
+
constructor() {
|
|
755
|
+
/**
|
|
756
|
+
* When true, the quick action buttons will be displayed in reversed order in the drawer on smaller screens. This is useful when the quick actions are defined in the template in the same order as the navigation items, so that the first quick action is closest to the navigation on smaller screens. Defaults to true.
|
|
757
|
+
*/
|
|
758
|
+
this.reversedVertical = input(true, ...(ngDevMode ? [{ debugName: "reversedVertical" }] : []));
|
|
759
|
+
/**
|
|
760
|
+
* The container element in which the drawer will be rendered on smaller screens. By default, it will try to render in the drawer container provided by the app container, and if not available, it will render in the body element. This input can be used to specify a different container element for the drawer.
|
|
761
|
+
*/
|
|
762
|
+
this.tabletDrawerContainer = input(...(ngDevMode ? [undefined, { debugName: "tabletDrawerContainer" }] : []));
|
|
763
|
+
this.appContainer = inject(DfAppContainer, { optional: true });
|
|
764
|
+
this._actionElements = contentChildren(DF_TOPNAV_QUICK_ACTION_ELEMENT, ...(ngDevMode ? [{ debugName: "_actionElements" }] : []));
|
|
765
|
+
this.drawer = viewChild('drawer', { ...(ngDevMode ? { debugName: "drawer" } : {}), read: DfDrawer });
|
|
766
|
+
this.document = inject(DOCUMENT);
|
|
767
|
+
// Responsive signals
|
|
768
|
+
this.isMd = toAngularSignal(md$);
|
|
769
|
+
this.isLg = toAngularSignal(lg$);
|
|
770
|
+
// the drawer container is the app container drawer container if available, otherwise it falls back to the body element. On md screens, it can be overridden by the tabletDrawerContainer input
|
|
771
|
+
this.drawerContainer = computed(() => this.isMd()
|
|
772
|
+
? (this.tabletDrawerContainer() ??
|
|
773
|
+
this.appContainer?.['drawerContainerActions']?.()?.nativeElement ??
|
|
774
|
+
this.document.body)
|
|
775
|
+
: this.document.body, ...(ngDevMode ? [{ debugName: "drawerContainer" }] : []));
|
|
776
|
+
this.actionElements = computed(() => (this.reversedVertical() && !this.isLg() ? [...this._actionElements()].reverse() : this._actionElements()).filter((el) => !(el instanceof DfTopNavQuickActionSearch)), ...(ngDevMode ? [{ debugName: "actionElements" }] : []));
|
|
777
|
+
this.searchElement = computed(() => this._actionElements().find((el) => el instanceof DfTopNavQuickActionSearch), ...(ngDevMode ? [{ debugName: "searchElement" }] : []));
|
|
778
|
+
this.menuExpanded = signal(false, ...(ngDevMode ? [{ debugName: "menuExpanded" }] : []));
|
|
779
|
+
// the selected quick action in the
|
|
780
|
+
this.selectedQuickAction = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedQuickAction" }] : []));
|
|
781
|
+
// resets the menu state when resizing to large screens, as the drawer will be closed and the selected button will be hidden
|
|
782
|
+
effect(() => {
|
|
783
|
+
if (this.isLg()) {
|
|
784
|
+
this.menuExpanded.set(false);
|
|
785
|
+
}
|
|
786
|
+
});
|
|
787
|
+
effect(() => {
|
|
788
|
+
if (!this.menuExpanded()) {
|
|
789
|
+
this.selectedQuickAction.set(undefined);
|
|
790
|
+
}
|
|
791
|
+
});
|
|
792
|
+
}
|
|
793
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
794
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfTopNavQuickActions, isStandalone: true, selector: "df-topnav-quick-actions", inputs: { reversedVertical: { classPropertyName: "reversedVertical", publicName: "reversedVertical", isSignal: true, isRequired: false, transformFunction: null }, tabletDrawerContainer: { classPropertyName: "tabletDrawerContainer", publicName: "tabletDrawerContainer", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "ngSkipHydration": "true" }, properties: { "style.display": "'contents'" } }, queries: [{ propertyName: "_actionElements", predicate: DF_TOPNAV_QUICK_ACTION_ELEMENT, isSignal: true }], viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true, read: DfDrawer, isSignal: true }], ngImport: i0, template: ` <ng-template #topnavQuickActions>
|
|
795
|
+
<ng-content />
|
|
796
|
+
</ng-template>
|
|
797
|
+
<div class="df-topnav-quick-actions">
|
|
798
|
+
@if (isLg()) {
|
|
799
|
+
<ng-container *ngTemplateOutlet="topnavQuickActions" />
|
|
800
|
+
} @else {
|
|
801
|
+
<button
|
|
802
|
+
dfTopNavButton
|
|
803
|
+
icon
|
|
804
|
+
aria-label="Toggle quick actions menu"
|
|
805
|
+
i18n-aria-label="@@df.topnav.toggle-quick-actions.ariaLabel"
|
|
806
|
+
(click)="menuExpanded.set(!menuExpanded())"
|
|
807
|
+
>
|
|
808
|
+
<span
|
|
809
|
+
class="fal df-topnav-toggle-icon"
|
|
810
|
+
[class.fa-xmark]="menuExpanded()"
|
|
811
|
+
[class.fa-ellipsis-vertical]="!menuExpanded()"
|
|
812
|
+
></span>
|
|
813
|
+
</button>
|
|
814
|
+
<df-drawer
|
|
815
|
+
class="df-topnav-drawer-host"
|
|
816
|
+
position="inline-end"
|
|
817
|
+
className="df-topnav-quick-actions-drawer {{ !isMd() ? 'df-topnav-quick-actions-drawer-mobile' : '' }}"
|
|
818
|
+
[(visible)]="menuExpanded"
|
|
819
|
+
[focusOnInit]="false"
|
|
820
|
+
[keepInDom]="false"
|
|
821
|
+
[container]="drawerContainer()"
|
|
822
|
+
[size]="null"
|
|
823
|
+
[backdrop]="isMd()"
|
|
824
|
+
[bodyScroll]="true"
|
|
825
|
+
#drawer
|
|
826
|
+
>
|
|
827
|
+
@let selected = selectedQuickAction();
|
|
828
|
+
@if (selected) {
|
|
829
|
+
<button type="button" class="df-topnav-drawer-button" (click)="selectedQuickAction.set(undefined)">
|
|
830
|
+
<span class="fal fa-arrow-left df-topnav-drawer-button-icon" aria-hidden="true"></span>
|
|
831
|
+
<span>{{ selected.label() }}</span>
|
|
832
|
+
</button>
|
|
833
|
+
<hr class="df-topnav-drawer-divider" />
|
|
834
|
+
<ng-container *ngTemplateOutlet="selected['actionContent']()" />
|
|
835
|
+
} @else {
|
|
836
|
+
<div class="df-topnav-drawer-buttons-container">
|
|
837
|
+
@if (searchElement()) {
|
|
838
|
+
<div
|
|
839
|
+
class="input-group position-relative"
|
|
840
|
+
[style.z-index]="1"
|
|
841
|
+
role="search"
|
|
842
|
+
[attr.aria-label]="searchElement()!.ariaLabel()"
|
|
843
|
+
>
|
|
844
|
+
<div class="input-group-prepend text-bg-neutral-alt" aria-hidden="true">
|
|
845
|
+
<span class="input-group-text fa-light fa-search"></span>
|
|
846
|
+
</div>
|
|
847
|
+
<ng-container *ngTemplateOutlet="searchElement()!['templateRef']()" />
|
|
848
|
+
</div>
|
|
849
|
+
}
|
|
850
|
+
@for (actionElement of actionElements(); track actionElement) {
|
|
851
|
+
@if (isButton(actionElement)) {
|
|
852
|
+
<button
|
|
853
|
+
type="button"
|
|
854
|
+
class="df-topnav-drawer-button"
|
|
855
|
+
(click)="clickQuickAction(actionElement)"
|
|
856
|
+
[disabled]="actionElement.disabled()"
|
|
857
|
+
>
|
|
858
|
+
<ng-template #dfQuickActionDefaultIcon>
|
|
859
|
+
<span class="fal" [class]="actionElement.icon()" aria-hidden="true"></span>
|
|
860
|
+
</ng-template>
|
|
861
|
+
<ng-container *ngTemplateOutlet="actionElement['actionIcon']() || dfQuickActionDefaultIcon" />
|
|
862
|
+
<span>{{ actionElement.label() }}</span>
|
|
863
|
+
@if (actionElement['actionContent']()) {
|
|
864
|
+
<span
|
|
865
|
+
class="fal fa-chevron-right df-topnav-drawer-button-icon df-topnav-drawer-button-icon-end"
|
|
866
|
+
aria-hidden="true"
|
|
867
|
+
></span>
|
|
868
|
+
}
|
|
869
|
+
</button>
|
|
870
|
+
} @else {
|
|
871
|
+
<ng-container *ngTemplateOutlet="actionElement['drawerContent']() ?? actionElement['content']()" />
|
|
872
|
+
}
|
|
873
|
+
}
|
|
874
|
+
</div>
|
|
875
|
+
}
|
|
876
|
+
</df-drawer>
|
|
877
|
+
}
|
|
878
|
+
</div>`, isInline: true, styles: [".df-topnav-quick-actions{margin-inline-start:auto;display:flex;align-items:center;gap:var(--df-spacing-5)}.df-drawer.df-topnav-quick-actions-drawer{position:absolute!important;transition:none}.df-drawer.df-topnav-quick-actions-drawer.df-collapse-collapsing.df-collapse-horizontal{transition:none}.df-drawer.df-topnav-quick-actions-drawer-mobile{--df-drawer-size: 100vw;--df-drawer-max-size: 100vw;top:var(--df-navbar-height, 3.5rem)!important;height:calc(100dvh - var(--df-navbar-height, 3.5rem))!important}.df-drawer.df-topnav-quick-actions-drawer{transition:none;display:flex;flex-direction:column;padding:var(--df-spacing-5);--df-topnav-drawer-bg-color: var(--df-color-primary-subtle-background);background-color:var(--df-topnav-drawer-bg-color);overflow-y:auto;scrollbar-color:var(--df-color-primary-soft-default-foreground) var(--df-color-inert-neutral-main-background)}.df-drawer .df-topnav-drawer-buttons-container{display:flex;flex-direction:column;gap:1px}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn){height:2.5rem;display:flex;align-items:center;padding-inline:var(--df-spacing-5);border-radius:var(--df-borderRadius-main-medium);gap:var(--df-spacing-3);border:none;outline:none;box-shadow:none;-webkit-user-select:none;user-select:none;position:relative;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn){transition:none}}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn){background-color:var(--df-topnav-drawer-bg-color);color:var(--df-color-neutral-alt-default-foreground);--df-topnav-drawer-btn-border-color: var(--df-color-neutral-alt-default-border)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):not(:disabled) .df-topnav-drawer-button-icon{color:var(--df-color-primary-alt-default-foreground)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):not(:disabled):focus-visible{z-index:1;box-shadow:0 0 0 2px var(--df-topnav-drawer-bg-color),0 0 0 4px var(--df-topnav-drawer-btn-border-color)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):disabled{cursor:not-allowed;color:var(--df-button-text-basic-color-disabled-foreground)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):not(:disabled):hover{--df-topnav-drawer-bg-color: var(--df-color-primary-alt-hovered-background)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):not(:disabled):hover .df-topnav-drawer-button-icon{color:var(--df-color-primary-alt-hovered-foreground)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):not(:disabled):active{--df-topnav-drawer-bg-color: var(--df-color-primary-alt-pressed-background)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):not(:disabled):active .df-topnav-drawer-button-icon{color:var(--df-color-primary-alt-pressed-foreground)}.df-drawer .df-topnav-drawer-button-icon-end{margin-inline-start:auto}.df-drawer .df-topnav-drawer-divider{margin-top:var(--df-spacing-2);margin-bottom:var(--df-spacing-5);border-color:var(--df-color-neutral-alt-default-border)}.df-topnav-drawer-host{display:none}\n"], dependencies: [{ kind: "component", type: DfDrawer, selector: "df-drawer", inputs: ["className", "bodyScroll", "backdrop", "container", "size", "resizable", "visible", "keepInDom", "configuration", "position", "focusOnInit"], outputs: ["sizeChange", "visibleChange", "minimizedChange", "maximizedChange", "resizingChange", "minSize", "maxSize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DfTopNavButton, selector: "button[dfTopNavButton]", inputs: ["appearance", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
879
|
+
}
|
|
880
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActions, decorators: [{
|
|
881
|
+
type: Component,
|
|
882
|
+
args: [{ selector: 'df-topnav-quick-actions', host: {
|
|
883
|
+
'[style.display]': "'contents'",
|
|
884
|
+
ngSkipHydration: 'true'
|
|
885
|
+
}, template: ` <ng-template #topnavQuickActions>
|
|
886
|
+
<ng-content />
|
|
887
|
+
</ng-template>
|
|
888
|
+
<div class="df-topnav-quick-actions">
|
|
889
|
+
@if (isLg()) {
|
|
890
|
+
<ng-container *ngTemplateOutlet="topnavQuickActions" />
|
|
891
|
+
} @else {
|
|
892
|
+
<button
|
|
893
|
+
dfTopNavButton
|
|
894
|
+
icon
|
|
895
|
+
aria-label="Toggle quick actions menu"
|
|
896
|
+
i18n-aria-label="@@df.topnav.toggle-quick-actions.ariaLabel"
|
|
897
|
+
(click)="menuExpanded.set(!menuExpanded())"
|
|
898
|
+
>
|
|
899
|
+
<span
|
|
900
|
+
class="fal df-topnav-toggle-icon"
|
|
901
|
+
[class.fa-xmark]="menuExpanded()"
|
|
902
|
+
[class.fa-ellipsis-vertical]="!menuExpanded()"
|
|
903
|
+
></span>
|
|
904
|
+
</button>
|
|
905
|
+
<df-drawer
|
|
906
|
+
class="df-topnav-drawer-host"
|
|
907
|
+
position="inline-end"
|
|
908
|
+
className="df-topnav-quick-actions-drawer {{ !isMd() ? 'df-topnav-quick-actions-drawer-mobile' : '' }}"
|
|
909
|
+
[(visible)]="menuExpanded"
|
|
910
|
+
[focusOnInit]="false"
|
|
911
|
+
[keepInDom]="false"
|
|
912
|
+
[container]="drawerContainer()"
|
|
913
|
+
[size]="null"
|
|
914
|
+
[backdrop]="isMd()"
|
|
915
|
+
[bodyScroll]="true"
|
|
916
|
+
#drawer
|
|
917
|
+
>
|
|
918
|
+
@let selected = selectedQuickAction();
|
|
919
|
+
@if (selected) {
|
|
920
|
+
<button type="button" class="df-topnav-drawer-button" (click)="selectedQuickAction.set(undefined)">
|
|
921
|
+
<span class="fal fa-arrow-left df-topnav-drawer-button-icon" aria-hidden="true"></span>
|
|
922
|
+
<span>{{ selected.label() }}</span>
|
|
923
|
+
</button>
|
|
924
|
+
<hr class="df-topnav-drawer-divider" />
|
|
925
|
+
<ng-container *ngTemplateOutlet="selected['actionContent']()" />
|
|
926
|
+
} @else {
|
|
927
|
+
<div class="df-topnav-drawer-buttons-container">
|
|
928
|
+
@if (searchElement()) {
|
|
929
|
+
<div
|
|
930
|
+
class="input-group position-relative"
|
|
931
|
+
[style.z-index]="1"
|
|
932
|
+
role="search"
|
|
933
|
+
[attr.aria-label]="searchElement()!.ariaLabel()"
|
|
934
|
+
>
|
|
935
|
+
<div class="input-group-prepend text-bg-neutral-alt" aria-hidden="true">
|
|
936
|
+
<span class="input-group-text fa-light fa-search"></span>
|
|
937
|
+
</div>
|
|
938
|
+
<ng-container *ngTemplateOutlet="searchElement()!['templateRef']()" />
|
|
939
|
+
</div>
|
|
940
|
+
}
|
|
941
|
+
@for (actionElement of actionElements(); track actionElement) {
|
|
942
|
+
@if (isButton(actionElement)) {
|
|
943
|
+
<button
|
|
944
|
+
type="button"
|
|
945
|
+
class="df-topnav-drawer-button"
|
|
946
|
+
(click)="clickQuickAction(actionElement)"
|
|
947
|
+
[disabled]="actionElement.disabled()"
|
|
948
|
+
>
|
|
949
|
+
<ng-template #dfQuickActionDefaultIcon>
|
|
950
|
+
<span class="fal" [class]="actionElement.icon()" aria-hidden="true"></span>
|
|
951
|
+
</ng-template>
|
|
952
|
+
<ng-container *ngTemplateOutlet="actionElement['actionIcon']() || dfQuickActionDefaultIcon" />
|
|
953
|
+
<span>{{ actionElement.label() }}</span>
|
|
954
|
+
@if (actionElement['actionContent']()) {
|
|
955
|
+
<span
|
|
956
|
+
class="fal fa-chevron-right df-topnav-drawer-button-icon df-topnav-drawer-button-icon-end"
|
|
957
|
+
aria-hidden="true"
|
|
958
|
+
></span>
|
|
959
|
+
}
|
|
960
|
+
</button>
|
|
961
|
+
} @else {
|
|
962
|
+
<ng-container *ngTemplateOutlet="actionElement['drawerContent']() ?? actionElement['content']()" />
|
|
963
|
+
}
|
|
964
|
+
}
|
|
965
|
+
</div>
|
|
966
|
+
}
|
|
967
|
+
</df-drawer>
|
|
968
|
+
}
|
|
969
|
+
</div>`, imports: [DfDrawer, NgTemplateOutlet, DfTopNavButton], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".df-topnav-quick-actions{margin-inline-start:auto;display:flex;align-items:center;gap:var(--df-spacing-5)}.df-drawer.df-topnav-quick-actions-drawer{position:absolute!important;transition:none}.df-drawer.df-topnav-quick-actions-drawer.df-collapse-collapsing.df-collapse-horizontal{transition:none}.df-drawer.df-topnav-quick-actions-drawer-mobile{--df-drawer-size: 100vw;--df-drawer-max-size: 100vw;top:var(--df-navbar-height, 3.5rem)!important;height:calc(100dvh - var(--df-navbar-height, 3.5rem))!important}.df-drawer.df-topnav-quick-actions-drawer{transition:none;display:flex;flex-direction:column;padding:var(--df-spacing-5);--df-topnav-drawer-bg-color: var(--df-color-primary-subtle-background);background-color:var(--df-topnav-drawer-bg-color);overflow-y:auto;scrollbar-color:var(--df-color-primary-soft-default-foreground) var(--df-color-inert-neutral-main-background)}.df-drawer .df-topnav-drawer-buttons-container{display:flex;flex-direction:column;gap:1px}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn){height:2.5rem;display:flex;align-items:center;padding-inline:var(--df-spacing-5);border-radius:var(--df-borderRadius-main-medium);gap:var(--df-spacing-3);border:none;outline:none;box-shadow:none;-webkit-user-select:none;user-select:none;position:relative;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn){transition:none}}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn){background-color:var(--df-topnav-drawer-bg-color);color:var(--df-color-neutral-alt-default-foreground);--df-topnav-drawer-btn-border-color: var(--df-color-neutral-alt-default-border)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):not(:disabled) .df-topnav-drawer-button-icon{color:var(--df-color-primary-alt-default-foreground)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):not(:disabled):focus-visible{z-index:1;box-shadow:0 0 0 2px var(--df-topnav-drawer-bg-color),0 0 0 4px var(--df-topnav-drawer-btn-border-color)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):disabled{cursor:not-allowed;color:var(--df-button-text-basic-color-disabled-foreground)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):not(:disabled):hover{--df-topnav-drawer-bg-color: var(--df-color-primary-alt-hovered-background)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):not(:disabled):hover .df-topnav-drawer-button-icon{color:var(--df-color-primary-alt-hovered-foreground)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):not(:disabled):active{--df-topnav-drawer-bg-color: var(--df-color-primary-alt-pressed-background)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):not(:disabled):active .df-topnav-drawer-button-icon{color:var(--df-color-primary-alt-pressed-foreground)}.df-drawer .df-topnav-drawer-button-icon-end{margin-inline-start:auto}.df-drawer .df-topnav-drawer-divider{margin-top:var(--df-spacing-2);margin-bottom:var(--df-spacing-5);border-color:var(--df-color-neutral-alt-default-border)}.df-topnav-drawer-host{display:none}\n"] }]
|
|
970
|
+
}], ctorParameters: () => [], propDecorators: { reversedVertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "reversedVertical", required: false }] }], tabletDrawerContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabletDrawerContainer", required: false }] }], _actionElements: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DF_TOPNAV_QUICK_ACTION_ELEMENT), { isSignal: true }] }], drawer: [{ type: i0.ViewChild, args: ['drawer', { ...{ read: DfDrawer }, isSignal: true }] }] } });
|
|
971
|
+
|
|
972
|
+
/**
|
|
973
|
+
* TopNav (Top Navigation Bar) provides consistent access to product-level navigation and global actions across Amadeus applications.
|
|
974
|
+
*
|
|
975
|
+
* It is recommended to be used with a {@link DfAppContainer} to ensure the correct layout and responsiveness, but it can also be used without it if needed.
|
|
976
|
+
*
|
|
977
|
+
* See {@link https://design-factory.amadeus.net/components/topnav|Design Factory documentation} for details and examples.
|
|
978
|
+
* @since 21.1
|
|
979
|
+
*/
|
|
980
|
+
class DfTopNav {
|
|
981
|
+
constructor() {
|
|
982
|
+
/**
|
|
983
|
+
* The style of the TopNav main nav, which determines the applied styles. Can be either "basic" or "mirror".
|
|
984
|
+
* When not provided, the applied mode will be determined based on the number of navigation links.
|
|
985
|
+
*/
|
|
986
|
+
this.mainNavStyle = input(...(ngDevMode ? [undefined, { debugName: "mainNavStyle" }] : []));
|
|
987
|
+
/**
|
|
988
|
+
* The style of the TopNav secondary nav, which determines the applied styles. Can be either "basic" or "mirror".
|
|
989
|
+
* When not provided, the applied mode will be opposite to the main nav style.
|
|
990
|
+
*/
|
|
991
|
+
this.secondaryNavStyle = input(...(ngDevMode ? [undefined, { debugName: "secondaryNavStyle" }] : []));
|
|
992
|
+
/**
|
|
993
|
+
* The mode of the TopNav, which determines the behavior of the navigation. Can be either "sidenav" or "dropdown".
|
|
994
|
+
*/
|
|
995
|
+
this.mode = input('sidenav', ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
996
|
+
/**
|
|
997
|
+
* Indicates whether the navigation menu is expanded or collapsed. This is used to control the visibility of the sidenav menu when the TopNav is in "sidenav" mode on smaller screens. When set to true, the sidenav menu will be visible, and when set to false, it will be hidden.
|
|
998
|
+
*/
|
|
999
|
+
this.navExpanded = model(false, ...(ngDevMode ? [{ debugName: "navExpanded" }] : []));
|
|
1000
|
+
/**
|
|
1001
|
+
* When set to true, the superheader layout will be applied, which moves the navigation to a second line and applies the "mirror" style to it. When not provided, the superheader layout will be applied automatically when there are more than 5 navigation links and the screen size is large or bigger.
|
|
1002
|
+
*/
|
|
1003
|
+
this.superheader = input(...(ngDevMode ? [undefined, { debugName: "superheader" }] : []));
|
|
1004
|
+
/**
|
|
1005
|
+
* When set to true, the toggle button will be always shown. Useful when the TopNav is used without any navigation links but the toggle button is still needed to access other content.
|
|
1006
|
+
* When not provided, the toggle button will be shown automatically when there are navigation links and the screen size is smaller than large.
|
|
1007
|
+
*/
|
|
1008
|
+
this.showToggle = input(false, { ...(ngDevMode ? { debugName: "showToggle" } : {}), transform: booleanAttribute });
|
|
1009
|
+
this.navigationContainer = contentChild(DfTopNavNavigation, ...(ngDevMode ? [{ debugName: "navigationContainer" }] : []));
|
|
1010
|
+
this.navElements = computed(() => this.navigationContainer()?.['childrenElements']?.() ?? [], ...(ngDevMode ? [{ debugName: "navElements" }] : []));
|
|
1011
|
+
this.navActions = contentChild(DfTopNavQuickActions, ...(ngDevMode ? [{ debugName: "navActions" }] : []));
|
|
1012
|
+
this.inAppContainer = signal(false, ...(ngDevMode ? [{ debugName: "inAppContainer" }] : []));
|
|
1013
|
+
/**
|
|
1014
|
+
* Signal that indicates when the links need to be displayed in the topnav instead of the navbar.
|
|
1015
|
+
*/
|
|
1016
|
+
this.displayLinksInNav = computed(() => this.isXl() || (this.appliedSuperheader() && this.isLg()), ...(ngDevMode ? [{ debugName: "displayLinksInNav" }] : []));
|
|
1017
|
+
/**
|
|
1018
|
+
* The content of the sidenav, which is derived from the TopNav navigation elements.
|
|
1019
|
+
*/
|
|
1020
|
+
this.sidenavContent = computed(() => {
|
|
1021
|
+
if (!this.inAppContainer()) {
|
|
1022
|
+
return [];
|
|
1023
|
+
}
|
|
1024
|
+
const topNavElements = this.navElements();
|
|
1025
|
+
if (!topNavElements.length) {
|
|
1026
|
+
return [];
|
|
1027
|
+
}
|
|
1028
|
+
if (this.mode() === 'dropdown' && this.displayLinksInNav()) {
|
|
1029
|
+
return [];
|
|
1030
|
+
}
|
|
1031
|
+
const activeNavElement = topNavElements.find((el) => el.active());
|
|
1032
|
+
// In desktop mode, we don't show the sidenav when there are only links (so everything can be shown in the topnav) or the current root active item is a link
|
|
1033
|
+
if (this.displayLinksInNav() &&
|
|
1034
|
+
(!topNavElements.some((el) => el instanceof DfTopNavNavigationItem) ||
|
|
1035
|
+
activeNavElement instanceof DfTopNavNavigationLink)) {
|
|
1036
|
+
return [];
|
|
1037
|
+
}
|
|
1038
|
+
let navElements;
|
|
1039
|
+
if (activeNavElement instanceof DfTopNavNavigationItem && this.displayLinksInNav()) {
|
|
1040
|
+
navElements = (activeNavElement['childElements']() ?? []);
|
|
1041
|
+
}
|
|
1042
|
+
else {
|
|
1043
|
+
navElements = topNavElements;
|
|
1044
|
+
}
|
|
1045
|
+
const mapNavElementToSideNavItem = (el) => {
|
|
1046
|
+
if (el instanceof DfTopNavNavigationLink) {
|
|
1047
|
+
return {
|
|
1048
|
+
label: el.label,
|
|
1049
|
+
href: el.href,
|
|
1050
|
+
routerLinkActiveOptions: el.routerLinkActiveOptions
|
|
1051
|
+
};
|
|
1052
|
+
}
|
|
1053
|
+
{
|
|
1054
|
+
return {
|
|
1055
|
+
label: el.label,
|
|
1056
|
+
children: computed(() => (el['childElements']() ?? []).map(mapNavElementToSideNavItem))
|
|
1057
|
+
};
|
|
1058
|
+
}
|
|
1059
|
+
};
|
|
1060
|
+
return navElements.map(mapNavElementToSideNavItem);
|
|
1061
|
+
}, ...(ngDevMode ? [{ debugName: "sidenavContent" }] : []));
|
|
1062
|
+
// Responsive signals
|
|
1063
|
+
this.isLg = toAngularSignal(lg$);
|
|
1064
|
+
this.isXl = toAngularSignal(xl$);
|
|
1065
|
+
this.appliedSuperheader = computed(() => this.superheader() ?? this.navElements().length > 5, ...(ngDevMode ? [{ debugName: "appliedSuperheader" }] : []));
|
|
1066
|
+
this.mainNavAppliedStyle = computed(() => this.mainNavStyle() ?? (this.navElements().length > 0 && !this.appliedSuperheader() ? 'mirror' : 'basic'), ...(ngDevMode ? [{ debugName: "mainNavAppliedStyle" }] : []));
|
|
1067
|
+
this.secondaryNavAppliedStyle = computed(() => this.secondaryNavStyle() ?? (this.mainNavAppliedStyle() === 'mirror' ? 'basic' : 'mirror'), ...(ngDevMode ? [{ debugName: "secondaryNavAppliedStyle" }] : []));
|
|
1068
|
+
// The drawer and sidenav should never be opened together. Those two effects ensure that.
|
|
1069
|
+
effect(() => {
|
|
1070
|
+
if (this.navExpanded()) {
|
|
1071
|
+
const navActions = this.navActions();
|
|
1072
|
+
if (navActions) {
|
|
1073
|
+
navActions['menuExpanded'].set(false);
|
|
1074
|
+
}
|
|
1075
|
+
}
|
|
1076
|
+
});
|
|
1077
|
+
effect(() => {
|
|
1078
|
+
const navActions = this.navActions();
|
|
1079
|
+
if (navActions && navActions['menuExpanded']()) {
|
|
1080
|
+
this.navExpanded.set(false);
|
|
1081
|
+
}
|
|
1082
|
+
});
|
|
1083
|
+
// Warn in development mode if the level of nesting of the navigation items is more than 2, as this is not supported in the dropdown mode and will lead to unexpected behaviors.
|
|
1084
|
+
if (isDevMode()) {
|
|
1085
|
+
effect(() => {
|
|
1086
|
+
if (this.mode() !== 'dropdown') {
|
|
1087
|
+
return;
|
|
1088
|
+
}
|
|
1089
|
+
const isNestingLevelTooDeep = this.navElements().some((el) => el instanceof DfTopNavNavigationItem &&
|
|
1090
|
+
(el['childElements']() ?? []).some((child) => child instanceof DfTopNavNavigationItem));
|
|
1091
|
+
if (isNestingLevelTooDeep) {
|
|
1092
|
+
console.warn('DfTopNav: Navigation with a nesting level greater than 2 is not supported in dropdown mode and may lead to unexpected behaviors.');
|
|
1093
|
+
}
|
|
1094
|
+
});
|
|
1095
|
+
}
|
|
1096
|
+
}
|
|
1097
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNav, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1098
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfTopNav, isStandalone: true, selector: "df-topnav", inputs: { mainNavStyle: { classPropertyName: "mainNavStyle", publicName: "mainNavStyle", isSignal: true, isRequired: false, transformFunction: null }, secondaryNavStyle: { classPropertyName: "secondaryNavStyle", publicName: "secondaryNavStyle", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, navExpanded: { classPropertyName: "navExpanded", publicName: "navExpanded", isSignal: true, isRequired: false, transformFunction: null }, superheader: { classPropertyName: "superheader", publicName: "superheader", isSignal: true, isRequired: false, transformFunction: null }, showToggle: { classPropertyName: "showToggle", publicName: "showToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navExpanded: "navExpandedChange" }, host: { classAttribute: "df-topnav" }, queries: [{ propertyName: "navigationContainer", first: true, predicate: DfTopNavNavigation, descendants: true, isSignal: true }, { propertyName: "navActions", first: true, predicate: DfTopNavQuickActions, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
1099
|
+
<ng-template #navContent>
|
|
1100
|
+
<ng-content select="df-topnav-navigation" />
|
|
1101
|
+
</ng-template>
|
|
1102
|
+
<header class="df-topnav-header">
|
|
1103
|
+
<nav
|
|
1104
|
+
class="df-topnav-nav"
|
|
1105
|
+
[class.df-topnav-nav-basic]="mainNavAppliedStyle() === 'basic'"
|
|
1106
|
+
[class.df-topnav-nav-mirror]="mainNavAppliedStyle() === 'mirror'"
|
|
1107
|
+
[class.df-topnav-nav-border]="mainNavAppliedStyle() === 'basic' && !appliedSuperheader()"
|
|
1108
|
+
aria-label="Main"
|
|
1109
|
+
i18n-aria-label="@@df.topnav.main-nav.ariaLabel"
|
|
1110
|
+
>
|
|
1111
|
+
@if (showToggle() || (sidenavContent().length && !isLg())) {
|
|
1112
|
+
<button
|
|
1113
|
+
dfTopNavButton
|
|
1114
|
+
icon
|
|
1115
|
+
aria-label="Toggle navigation menu"
|
|
1116
|
+
i18n-aria-label="@@df.topnav.toggle-sidenav.ariaLabel"
|
|
1117
|
+
(click)="navExpanded.set(!navExpanded())"
|
|
1118
|
+
aria-haspopup="dialog"
|
|
1119
|
+
>
|
|
1120
|
+
<span
|
|
1121
|
+
class="fal df-topnav-toggle-icon"
|
|
1122
|
+
[class.fa-xmark]="navExpanded()"
|
|
1123
|
+
[class.fa-bars]="!navExpanded()"
|
|
1124
|
+
></span>
|
|
1125
|
+
</button>
|
|
1126
|
+
}
|
|
1127
|
+
<ng-content select="df-topnav-brand" />
|
|
1128
|
+
@if (!appliedSuperheader() && (!inAppContainer() || isXl())) {
|
|
1129
|
+
<ng-container *ngTemplateOutlet="navContent" />
|
|
1130
|
+
}
|
|
1131
|
+
<ng-content select="df-topnav-quick-actions" />
|
|
1132
|
+
</nav>
|
|
1133
|
+
@if (appliedSuperheader() && (!inAppContainer() || isLg())) {
|
|
1134
|
+
<nav
|
|
1135
|
+
class="df-topnav-nav"
|
|
1136
|
+
[class.df-topnav-nav-basic]="secondaryNavAppliedStyle() === 'basic'"
|
|
1137
|
+
[class.df-topnav-nav-mirror]="secondaryNavAppliedStyle() === 'mirror'"
|
|
1138
|
+
aria-label="Secondary"
|
|
1139
|
+
i18n-aria-label="@@df.topnav.secondary-nav.ariaLabel"
|
|
1140
|
+
>
|
|
1141
|
+
<ng-container *ngTemplateOutlet="navContent" />
|
|
1142
|
+
</nav>
|
|
1143
|
+
}
|
|
1144
|
+
</header>
|
|
1145
|
+
`, isInline: true, styles: ["@media(min-width:768px)and (max-width:991px){.df-app-container:has(.df-drawer.df-collapse-show,.df-drawer.df-collapse-collapsing) .df-topnav-header{z-index:2010}}.df-topnav-header{position:relative;z-index:11}body:not(:has(.df-env-banner)) .df-topnav-header{box-shadow:0 0 8px var(--df-color-shadow-1)}.df-topnav-nav{display:flex;align-items:center;height:3.5rem}.df-topnav-nav:first-of-type{padding-inline:var(--df-spacing-3)}@media(min-width:1200px){.df-topnav-nav{gap:var(--df-spacing-5)}}.df-topnav-nav.df-topnav-nav-basic{background:var(--df-topnav-color-inert-basic-background);--df-topnav-btn-bg-color: var(--df-topnav-color-inert-basic-background);--df-topnav-btn-border-color: var(--df-topnav-color-inert-basic-foreground)}.df-topnav-nav.df-topnav-nav-mirror{background:var(--df-topnav-color-inert-mirror-background);--df-topnav-btn-bg-color: var(--df-topnav-color-inert-mirror-background);--df-topnav-btn-border-color: var(--df-topnav-color-inert-mirror-foreground)}.df-topnav-toggle-icon{width:2.25rem;height:1.5rem}.df-topnav-nav-border{border-bottom:1px solid var(--df-color-inert-neutral-main-border)}\n"], dependencies: [{ kind: "component", type: DfTopNavButton, selector: "button[dfTopNavButton]", inputs: ["appearance", "icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1146
|
+
}
|
|
1147
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNav, decorators: [{
|
|
1148
|
+
type: Component,
|
|
1149
|
+
args: [{ selector: 'df-topnav', template: `
|
|
1150
|
+
<ng-template #navContent>
|
|
1151
|
+
<ng-content select="df-topnav-navigation" />
|
|
1152
|
+
</ng-template>
|
|
1153
|
+
<header class="df-topnav-header">
|
|
1154
|
+
<nav
|
|
1155
|
+
class="df-topnav-nav"
|
|
1156
|
+
[class.df-topnav-nav-basic]="mainNavAppliedStyle() === 'basic'"
|
|
1157
|
+
[class.df-topnav-nav-mirror]="mainNavAppliedStyle() === 'mirror'"
|
|
1158
|
+
[class.df-topnav-nav-border]="mainNavAppliedStyle() === 'basic' && !appliedSuperheader()"
|
|
1159
|
+
aria-label="Main"
|
|
1160
|
+
i18n-aria-label="@@df.topnav.main-nav.ariaLabel"
|
|
1161
|
+
>
|
|
1162
|
+
@if (showToggle() || (sidenavContent().length && !isLg())) {
|
|
1163
|
+
<button
|
|
1164
|
+
dfTopNavButton
|
|
1165
|
+
icon
|
|
1166
|
+
aria-label="Toggle navigation menu"
|
|
1167
|
+
i18n-aria-label="@@df.topnav.toggle-sidenav.ariaLabel"
|
|
1168
|
+
(click)="navExpanded.set(!navExpanded())"
|
|
1169
|
+
aria-haspopup="dialog"
|
|
1170
|
+
>
|
|
1171
|
+
<span
|
|
1172
|
+
class="fal df-topnav-toggle-icon"
|
|
1173
|
+
[class.fa-xmark]="navExpanded()"
|
|
1174
|
+
[class.fa-bars]="!navExpanded()"
|
|
1175
|
+
></span>
|
|
1176
|
+
</button>
|
|
1177
|
+
}
|
|
1178
|
+
<ng-content select="df-topnav-brand" />
|
|
1179
|
+
@if (!appliedSuperheader() && (!inAppContainer() || isXl())) {
|
|
1180
|
+
<ng-container *ngTemplateOutlet="navContent" />
|
|
1181
|
+
}
|
|
1182
|
+
<ng-content select="df-topnav-quick-actions" />
|
|
1183
|
+
</nav>
|
|
1184
|
+
@if (appliedSuperheader() && (!inAppContainer() || isLg())) {
|
|
1185
|
+
<nav
|
|
1186
|
+
class="df-topnav-nav"
|
|
1187
|
+
[class.df-topnav-nav-basic]="secondaryNavAppliedStyle() === 'basic'"
|
|
1188
|
+
[class.df-topnav-nav-mirror]="secondaryNavAppliedStyle() === 'mirror'"
|
|
1189
|
+
aria-label="Secondary"
|
|
1190
|
+
i18n-aria-label="@@df.topnav.secondary-nav.ariaLabel"
|
|
1191
|
+
>
|
|
1192
|
+
<ng-container *ngTemplateOutlet="navContent" />
|
|
1193
|
+
</nav>
|
|
1194
|
+
}
|
|
1195
|
+
</header>
|
|
1196
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [DfTopNavButton, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, host: {
|
|
1197
|
+
class: 'df-topnav'
|
|
1198
|
+
}, styles: ["@media(min-width:768px)and (max-width:991px){.df-app-container:has(.df-drawer.df-collapse-show,.df-drawer.df-collapse-collapsing) .df-topnav-header{z-index:2010}}.df-topnav-header{position:relative;z-index:11}body:not(:has(.df-env-banner)) .df-topnav-header{box-shadow:0 0 8px var(--df-color-shadow-1)}.df-topnav-nav{display:flex;align-items:center;height:3.5rem}.df-topnav-nav:first-of-type{padding-inline:var(--df-spacing-3)}@media(min-width:1200px){.df-topnav-nav{gap:var(--df-spacing-5)}}.df-topnav-nav.df-topnav-nav-basic{background:var(--df-topnav-color-inert-basic-background);--df-topnav-btn-bg-color: var(--df-topnav-color-inert-basic-background);--df-topnav-btn-border-color: var(--df-topnav-color-inert-basic-foreground)}.df-topnav-nav.df-topnav-nav-mirror{background:var(--df-topnav-color-inert-mirror-background);--df-topnav-btn-bg-color: var(--df-topnav-color-inert-mirror-background);--df-topnav-btn-border-color: var(--df-topnav-color-inert-mirror-foreground)}.df-topnav-toggle-icon{width:2.25rem;height:1.5rem}.df-topnav-nav-border{border-bottom:1px solid var(--df-color-inert-neutral-main-border)}\n"] }]
|
|
1199
|
+
}], ctorParameters: () => [], propDecorators: { mainNavStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainNavStyle", required: false }] }], secondaryNavStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryNavStyle", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], navExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "navExpanded", required: false }] }, { type: i0.Output, args: ["navExpandedChange"] }], superheader: [{ type: i0.Input, args: [{ isSignal: true, alias: "superheader", required: false }] }], showToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggle", required: false }] }], navigationContainer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfTopNavNavigation), { isSignal: true }] }], navActions: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfTopNavQuickActions), { isSignal: true }] }] } });
|
|
1200
|
+
|
|
1201
|
+
/**
|
|
1202
|
+
* A directive to mark the company template in the {@link DfTopNavBrand} brand component.
|
|
1203
|
+
*
|
|
1204
|
+
* This is used to customize the display of the company logo and name in the {@link DfTopNavBrand} brand component.
|
|
1205
|
+
* @since 21.1
|
|
1206
|
+
*/
|
|
1207
|
+
class DfTopNavBrandLinkContent {
|
|
1208
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavBrandLinkContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1209
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DfTopNavBrandLinkContent, isStandalone: true, selector: "ng-template[dfTopNavBrandLinkContent]", ngImport: i0 }); }
|
|
1210
|
+
}
|
|
1211
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavBrandLinkContent, decorators: [{
|
|
1212
|
+
type: Directive,
|
|
1213
|
+
args: [{
|
|
1214
|
+
selector: 'ng-template[dfTopNavBrandLinkContent]'
|
|
1215
|
+
}]
|
|
1216
|
+
}] });
|
|
1217
|
+
/**
|
|
1218
|
+
* The TopNav brand component, used to display the company and product information.
|
|
1219
|
+
*
|
|
1220
|
+
* See {@link https://design-factory.amadeus.net/components/topnav/examples#brand|Design Factory example}
|
|
1221
|
+
* @since 21.1
|
|
1222
|
+
*/
|
|
1223
|
+
class DfTopNavBrand {
|
|
1224
|
+
constructor() {
|
|
1225
|
+
/**
|
|
1226
|
+
* The URL to navigate to when the brand is clicked. Defaults to "/".
|
|
1227
|
+
*/
|
|
1228
|
+
this.href = input('/', ...(ngDevMode ? [{ debugName: "href" }] : []));
|
|
1229
|
+
/**
|
|
1230
|
+
* The product.
|
|
1231
|
+
*/
|
|
1232
|
+
this.product = input(...(ngDevMode ? [undefined, { debugName: "product" }] : []));
|
|
1233
|
+
/**
|
|
1234
|
+
* The module.
|
|
1235
|
+
*/
|
|
1236
|
+
this.module = input(...(ngDevMode ? [undefined, { debugName: "module" }] : []));
|
|
1237
|
+
/**
|
|
1238
|
+
* Whether to display the Amadeus logo as a vector graphic instead of text.
|
|
1239
|
+
*/
|
|
1240
|
+
this.amaudeusLogoVector = input(false, { ...(ngDevMode ? { debugName: "amaudeusLogoVector" } : {}), transform: booleanAttribute });
|
|
1241
|
+
this.brandLinkContent = contentChild(DfTopNavBrandLinkContent, { ...(ngDevMode ? { debugName: "brandLinkContent" } : {}), read: TemplateRef });
|
|
1242
|
+
this.isSm = toAngularSignal(sm$);
|
|
1243
|
+
}
|
|
1244
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavBrand, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1245
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfTopNavBrand, isStandalone: true, selector: "df-topnav-brand", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, module: { classPropertyName: "module", publicName: "module", isSignal: true, isRequired: false, transformFunction: null }, amaudeusLogoVector: { classPropertyName: "amaudeusLogoVector", publicName: "amaudeusLogoVector", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "brandLinkContent", first: true, predicate: DfTopNavBrandLinkContent, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
|
|
1246
|
+
<div class="df-topnav-brand">
|
|
1247
|
+
<a class="df-topnav-brand-link" [routerLink]="href()">
|
|
1248
|
+
<ng-template #defaultLink>
|
|
1249
|
+
@if (!isSm()) {
|
|
1250
|
+
<svg
|
|
1251
|
+
class="df-topnav-brand-company-amadeus-logo-mobile"
|
|
1252
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1253
|
+
width="16"
|
|
1254
|
+
height="20"
|
|
1255
|
+
viewBox="0 0 16 20"
|
|
1256
|
+
fill="none"
|
|
1257
|
+
aria-label="Amadeus"
|
|
1258
|
+
>
|
|
1259
|
+
<path
|
|
1260
|
+
d="M9.4004 0H2.32686V3.82542C5.69729 3.68039 6.64699 3.63205 8.11894 3.63205C10.4449 3.63205 11.822 4.50311 11.822 6.82811V8.32946H8.11894C1.8994 8.32946 0 10.8962 0 14.2372C0 18.547 3.13347 20 6.26693 20C9.4004 20 11.2998 18.4987 11.9168 18.0627V19.7574H16V6.24617C16 1.69471 13.5784 0 9.4004 0ZM11.822 15.5443C10.7776 15.932 8.87815 16.6096 7.07445 16.6096C5.36554 16.6096 3.98838 15.8353 3.98838 13.9463C3.98838 12.2506 5.03287 11.3796 7.31142 11.2829L11.822 11.0886V15.5443Z"
|
|
1261
|
+
fill="currentColor"
|
|
1262
|
+
/>
|
|
1263
|
+
</svg>
|
|
1264
|
+
} @else {
|
|
1265
|
+
@if (amaudeusLogoVector()) {
|
|
1266
|
+
<svg
|
|
1267
|
+
class="df-topnav-brand-company-amaudeus-logo-desktop"
|
|
1268
|
+
viewBox="0 0 112 16"
|
|
1269
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1270
|
+
aria-label="Amadeus"
|
|
1271
|
+
>
|
|
1272
|
+
<path
|
|
1273
|
+
d="M107.272 6.62415C105.258 5.92656 104.367 5.46175 104.367 4.4161C104.367 3.75718 104.793 2.75021 106.807 2.75021C108.705 2.75021 110.72 3.60249 110.72 3.60249V0.696849C109.868 0.348052 108.357 0 106.652 0C103.746 0 100.958 1.54913 100.958 4.61021C100.958 7.67128 103.747 8.52282 105.646 9.14307C107.428 9.7239 108.629 10.3055 108.629 11.4671C108.629 12.4749 107.931 13.249 105.646 13.249C103.708 13.249 101.384 12.4749 101.384 12.4749V15.3798C101.384 15.3798 103.63 16 105.801 16C108.667 16 112.038 14.9923 112.038 11.2344C112.038 8.67751 109.946 7.55378 107.273 6.62415H107.272Z"
|
|
1274
|
+
fill="currentColor"
|
|
1275
|
+
/>
|
|
1276
|
+
<path
|
|
1277
|
+
d="M34.2475 15.8059V0H29.8701L25.57 11.7773L21.2692 0H16.8917V15.8059H19.8747V3.87394L24.2135 15.8052H26.7316L31.2645 3.87394V15.8052H34.2475V15.8059Z"
|
|
1278
|
+
fill="currentColor"
|
|
1279
|
+
/>
|
|
1280
|
+
<path
|
|
1281
|
+
d="M44.7062 0H38.9343V3.06033C41.6853 2.94432 42.4595 2.90564 43.6605 2.90564C45.5585 2.90564 46.6822 3.60249 46.6822 5.46249V6.66357H43.6605C38.5855 6.66357 37.0364 8.71693 37.0364 11.3898C37.0364 14.8376 39.5932 16 42.1501 16C44.7069 16 46.2568 14.7989 46.7603 14.4501V15.8059H50.0921V4.99693C50.0921 1.35502 48.1168 0 44.7069 0H44.7062ZM46.6822 12.4354C45.8299 12.7456 44.28 13.2877 42.8082 13.2877C41.4138 13.2877 40.2901 12.6682 40.2901 11.157C40.2901 9.8005 41.1424 9.10365 43.0016 9.02631L46.6822 8.87087V12.4354Z"
|
|
1282
|
+
fill="currentColor"
|
|
1283
|
+
/>
|
|
1284
|
+
<path
|
|
1285
|
+
d="M73.8005 2.71154H81.7804V0H70.3906V15.8059H81.7804V13.0944H73.8005V9.25834H80.5793V6.58548H73.8005V2.71154Z"
|
|
1286
|
+
fill="currentColor"
|
|
1287
|
+
/>
|
|
1288
|
+
<path
|
|
1289
|
+
d="M98.2073 15.8059V0H94.7209V12.048C93.8686 12.4354 92.6675 13.0557 90.9243 13.0557C88.7549 13.0557 88.0967 11.8546 88.0967 9.29776V0H84.6095V9.7239C84.6095 13.7919 85.9266 16 90.072 16C92.3968 16 93.5592 15.1477 94.7982 14.4501V15.8059H98.2073Z"
|
|
1290
|
+
fill="currentColor"
|
|
1291
|
+
/>
|
|
1292
|
+
<path
|
|
1293
|
+
d="M59.8152 0H53.5398V15.8059H59.8152C65.123 15.8059 67.7958 13.3651 67.7958 7.74863C67.7958 2.8283 64.8902 0.000743702 59.8152 0.000743702V0ZM59.6597 13.0549H57.0255V2.75021H59.6597C62.2947 2.75021 64.2313 4.02863 64.2313 7.74789C64.2313 11.4671 62.9528 13.0549 59.6597 13.0549Z"
|
|
1294
|
+
fill="currentColor"
|
|
1295
|
+
/>
|
|
1296
|
+
<path
|
|
1297
|
+
d="M7.67054 0H1.89867V3.06033C4.64888 2.94432 5.42382 2.90564 6.6249 2.90564C8.52282 2.90564 9.64656 3.60249 9.64656 5.46249V6.66357H6.6249C1.54987 6.66357 0 8.71693 0 11.3898C0 14.8376 2.55685 16 5.11369 16C7.67054 16 9.22041 14.7989 9.7239 14.4501V15.8059H13.0557V4.99693C13.0557 1.35577 11.0797 0 7.67054 0ZM9.64656 12.4354C8.79427 12.7456 7.2444 13.2877 5.77261 13.2877C4.37817 13.2877 3.25444 12.6682 3.25444 11.157C3.25444 9.8005 4.10672 9.10365 5.96598 9.02631L9.64656 8.87087V12.4354Z"
|
|
1298
|
+
fill="currentColor"
|
|
1299
|
+
/>
|
|
1300
|
+
</svg>
|
|
1301
|
+
} @else {
|
|
1302
|
+
<span class="df-topnav-brand-company-amadeus-text df-topnav-brand-company-desktop">Amadeus</span>
|
|
1303
|
+
}
|
|
1304
|
+
}
|
|
1305
|
+
@if (product()) {
|
|
1306
|
+
<span>{{ product() }}</span>
|
|
1307
|
+
}
|
|
1308
|
+
</ng-template>
|
|
1309
|
+
<ng-container *ngTemplateOutlet="brandLinkContent() ?? defaultLink" />
|
|
1310
|
+
</a>
|
|
1311
|
+
@if (module()) {
|
|
1312
|
+
<span class="df-topnav-brand-module-separator" aria-hidden="true"></span>
|
|
1313
|
+
<span class="df-topnav-brand-module">{{ module() }}</span>
|
|
1314
|
+
}
|
|
1315
|
+
</div>
|
|
1316
|
+
`, isInline: true, styles: [".df-topnav-brand{display:flex;align-items:center}.df-topnav-brand-link{display:flex;align-items:center;padding:var(--df-spacing-3);gap:var(--df-spacing-3);font-size:var(--df-typo-sizing-large);outline:none;box-shadow:none;-webkit-user-select:none;user-select:none;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-topnav-brand-link{transition:none}}.df-topnav-brand-link{border-bottom:0!important;background-color:var(--df-topnav-brand-link-bg-color)!important}.df-topnav-brand-link:focus-visible{box-shadow:inset 0 0 0 2px var(--df-topnav-brand-link-bg-color),inset 0 0 0 4px var(--df-topnav-brand-link-border-color)!important}.df-topnav-brand-company-amadeus-logo-mobile{width:1rem;height:1.25rem}.df-topnav-brand-company-amaudeus-logo-desktop{width:7rem;height:1rem}.df-topnav-brand-module-separator{height:1rem;width:1px;background-color:var(--df-color-inert-neutral-main-border);margin-inline-end:var(--df-spacing-3)}.df-topnav-brand-module{margin-top:calc(.75 * (var(--df-typo-sizing-large) - var(--df-typo-sizing-default)))}.df-topnav-brand-company-amadeus-text{font-weight:var(--df-typo-weight-medium)}.df-topnav-nav-basic .df-topnav-brand{color:var(--df-topnav-color-productName-basic-default-foreground)}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-link{color:var(--df-topnav-color-productName-basic-default-foreground)!important;--df-topnav-brand-link-bg-color: var(--df-topnav-color-inert-basic-background);--df-topnav-brand-link-border-color: var(--df-topnav-color-productName-basic-default-border)}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-link:hover{--df-topnav-brand-link-bg-color: var(--df-topnav-color-productName-basic-hovered-background);--df-topnav-brand-link-border-color: var(--df-topnav-color-productName-basic-hovered-border);color:var(--df-topnav-color-productName-basic-hovered-foreground)!important}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-link:active{--df-topnav-brand-link-bg-color: var(--df-topnav-color-productName-basic-pressed-background);--df-topnav-brand-link-border-color: var(--df-topnav-color-productName-basic-pressed-border);color:var(--df-topnav-color-productName-basic-pressed-foreground)!important}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-company-amaudeus-logo-desktop{color:var(--df-color-logo-main-foreground)}.df-topnav-nav-mirror .df-topnav-brand{color:var(--df-topnav-color-productName-mirror-default-foreground)}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-link{color:var(--df-topnav-color-productName-mirror-default-foreground)!important;--df-topnav-brand-link-bg-color: var(--df-topnav-color-inert-mirror-background);--df-topnav-brand-link-border-color: var(--df-topnav-color-productName-mirror-default-border)}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-link:hover{--df-topnav-brand-link-bg-color: var(--df-topnav-color-productName-mirror-hovered-background);--df-topnav-brand-link-border-color: var(--df-topnav-color-productName-mirror-hovered-border);color:var(--df-topnav-color-productName-mirror-hovered-foreground)!important}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-link:active{--df-topnav-brand-link-bg-color: var(--df-topnav-color-productName-mirror-pressed-background);--df-topnav-brand-link-border-color: var(--df-topnav-color-productName-mirror-pressed-border);color:var(--df-topnav-color-productName-mirror-pressed-foreground)!important}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-company-amaudeus-logo-desktop{color:var(--df-color-logo-alt-foreground)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1317
|
+
}
|
|
1318
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavBrand, decorators: [{
|
|
1319
|
+
type: Component,
|
|
1320
|
+
args: [{ selector: 'df-topnav-brand', template: `
|
|
1321
|
+
<div class="df-topnav-brand">
|
|
1322
|
+
<a class="df-topnav-brand-link" [routerLink]="href()">
|
|
1323
|
+
<ng-template #defaultLink>
|
|
1324
|
+
@if (!isSm()) {
|
|
1325
|
+
<svg
|
|
1326
|
+
class="df-topnav-brand-company-amadeus-logo-mobile"
|
|
1327
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1328
|
+
width="16"
|
|
1329
|
+
height="20"
|
|
1330
|
+
viewBox="0 0 16 20"
|
|
1331
|
+
fill="none"
|
|
1332
|
+
aria-label="Amadeus"
|
|
1333
|
+
>
|
|
1334
|
+
<path
|
|
1335
|
+
d="M9.4004 0H2.32686V3.82542C5.69729 3.68039 6.64699 3.63205 8.11894 3.63205C10.4449 3.63205 11.822 4.50311 11.822 6.82811V8.32946H8.11894C1.8994 8.32946 0 10.8962 0 14.2372C0 18.547 3.13347 20 6.26693 20C9.4004 20 11.2998 18.4987 11.9168 18.0627V19.7574H16V6.24617C16 1.69471 13.5784 0 9.4004 0ZM11.822 15.5443C10.7776 15.932 8.87815 16.6096 7.07445 16.6096C5.36554 16.6096 3.98838 15.8353 3.98838 13.9463C3.98838 12.2506 5.03287 11.3796 7.31142 11.2829L11.822 11.0886V15.5443Z"
|
|
1336
|
+
fill="currentColor"
|
|
1337
|
+
/>
|
|
1338
|
+
</svg>
|
|
1339
|
+
} @else {
|
|
1340
|
+
@if (amaudeusLogoVector()) {
|
|
1341
|
+
<svg
|
|
1342
|
+
class="df-topnav-brand-company-amaudeus-logo-desktop"
|
|
1343
|
+
viewBox="0 0 112 16"
|
|
1344
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1345
|
+
aria-label="Amadeus"
|
|
1346
|
+
>
|
|
1347
|
+
<path
|
|
1348
|
+
d="M107.272 6.62415C105.258 5.92656 104.367 5.46175 104.367 4.4161C104.367 3.75718 104.793 2.75021 106.807 2.75021C108.705 2.75021 110.72 3.60249 110.72 3.60249V0.696849C109.868 0.348052 108.357 0 106.652 0C103.746 0 100.958 1.54913 100.958 4.61021C100.958 7.67128 103.747 8.52282 105.646 9.14307C107.428 9.7239 108.629 10.3055 108.629 11.4671C108.629 12.4749 107.931 13.249 105.646 13.249C103.708 13.249 101.384 12.4749 101.384 12.4749V15.3798C101.384 15.3798 103.63 16 105.801 16C108.667 16 112.038 14.9923 112.038 11.2344C112.038 8.67751 109.946 7.55378 107.273 6.62415H107.272Z"
|
|
1349
|
+
fill="currentColor"
|
|
1350
|
+
/>
|
|
1351
|
+
<path
|
|
1352
|
+
d="M34.2475 15.8059V0H29.8701L25.57 11.7773L21.2692 0H16.8917V15.8059H19.8747V3.87394L24.2135 15.8052H26.7316L31.2645 3.87394V15.8052H34.2475V15.8059Z"
|
|
1353
|
+
fill="currentColor"
|
|
1354
|
+
/>
|
|
1355
|
+
<path
|
|
1356
|
+
d="M44.7062 0H38.9343V3.06033C41.6853 2.94432 42.4595 2.90564 43.6605 2.90564C45.5585 2.90564 46.6822 3.60249 46.6822 5.46249V6.66357H43.6605C38.5855 6.66357 37.0364 8.71693 37.0364 11.3898C37.0364 14.8376 39.5932 16 42.1501 16C44.7069 16 46.2568 14.7989 46.7603 14.4501V15.8059H50.0921V4.99693C50.0921 1.35502 48.1168 0 44.7069 0H44.7062ZM46.6822 12.4354C45.8299 12.7456 44.28 13.2877 42.8082 13.2877C41.4138 13.2877 40.2901 12.6682 40.2901 11.157C40.2901 9.8005 41.1424 9.10365 43.0016 9.02631L46.6822 8.87087V12.4354Z"
|
|
1357
|
+
fill="currentColor"
|
|
1358
|
+
/>
|
|
1359
|
+
<path
|
|
1360
|
+
d="M73.8005 2.71154H81.7804V0H70.3906V15.8059H81.7804V13.0944H73.8005V9.25834H80.5793V6.58548H73.8005V2.71154Z"
|
|
1361
|
+
fill="currentColor"
|
|
1362
|
+
/>
|
|
1363
|
+
<path
|
|
1364
|
+
d="M98.2073 15.8059V0H94.7209V12.048C93.8686 12.4354 92.6675 13.0557 90.9243 13.0557C88.7549 13.0557 88.0967 11.8546 88.0967 9.29776V0H84.6095V9.7239C84.6095 13.7919 85.9266 16 90.072 16C92.3968 16 93.5592 15.1477 94.7982 14.4501V15.8059H98.2073Z"
|
|
1365
|
+
fill="currentColor"
|
|
1366
|
+
/>
|
|
1367
|
+
<path
|
|
1368
|
+
d="M59.8152 0H53.5398V15.8059H59.8152C65.123 15.8059 67.7958 13.3651 67.7958 7.74863C67.7958 2.8283 64.8902 0.000743702 59.8152 0.000743702V0ZM59.6597 13.0549H57.0255V2.75021H59.6597C62.2947 2.75021 64.2313 4.02863 64.2313 7.74789C64.2313 11.4671 62.9528 13.0549 59.6597 13.0549Z"
|
|
1369
|
+
fill="currentColor"
|
|
1370
|
+
/>
|
|
1371
|
+
<path
|
|
1372
|
+
d="M7.67054 0H1.89867V3.06033C4.64888 2.94432 5.42382 2.90564 6.6249 2.90564C8.52282 2.90564 9.64656 3.60249 9.64656 5.46249V6.66357H6.6249C1.54987 6.66357 0 8.71693 0 11.3898C0 14.8376 2.55685 16 5.11369 16C7.67054 16 9.22041 14.7989 9.7239 14.4501V15.8059H13.0557V4.99693C13.0557 1.35577 11.0797 0 7.67054 0ZM9.64656 12.4354C8.79427 12.7456 7.2444 13.2877 5.77261 13.2877C4.37817 13.2877 3.25444 12.6682 3.25444 11.157C3.25444 9.8005 4.10672 9.10365 5.96598 9.02631L9.64656 8.87087V12.4354Z"
|
|
1373
|
+
fill="currentColor"
|
|
1374
|
+
/>
|
|
1375
|
+
</svg>
|
|
1376
|
+
} @else {
|
|
1377
|
+
<span class="df-topnav-brand-company-amadeus-text df-topnav-brand-company-desktop">Amadeus</span>
|
|
1378
|
+
}
|
|
1379
|
+
}
|
|
1380
|
+
@if (product()) {
|
|
1381
|
+
<span>{{ product() }}</span>
|
|
1382
|
+
}
|
|
1383
|
+
</ng-template>
|
|
1384
|
+
<ng-container *ngTemplateOutlet="brandLinkContent() ?? defaultLink" />
|
|
1385
|
+
</a>
|
|
1386
|
+
@if (module()) {
|
|
1387
|
+
<span class="df-topnav-brand-module-separator" aria-hidden="true"></span>
|
|
1388
|
+
<span class="df-topnav-brand-module">{{ module() }}</span>
|
|
1389
|
+
}
|
|
1390
|
+
</div>
|
|
1391
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, styles: [".df-topnav-brand{display:flex;align-items:center}.df-topnav-brand-link{display:flex;align-items:center;padding:var(--df-spacing-3);gap:var(--df-spacing-3);font-size:var(--df-typo-sizing-large);outline:none;box-shadow:none;-webkit-user-select:none;user-select:none;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-topnav-brand-link{transition:none}}.df-topnav-brand-link{border-bottom:0!important;background-color:var(--df-topnav-brand-link-bg-color)!important}.df-topnav-brand-link:focus-visible{box-shadow:inset 0 0 0 2px var(--df-topnav-brand-link-bg-color),inset 0 0 0 4px var(--df-topnav-brand-link-border-color)!important}.df-topnav-brand-company-amadeus-logo-mobile{width:1rem;height:1.25rem}.df-topnav-brand-company-amaudeus-logo-desktop{width:7rem;height:1rem}.df-topnav-brand-module-separator{height:1rem;width:1px;background-color:var(--df-color-inert-neutral-main-border);margin-inline-end:var(--df-spacing-3)}.df-topnav-brand-module{margin-top:calc(.75 * (var(--df-typo-sizing-large) - var(--df-typo-sizing-default)))}.df-topnav-brand-company-amadeus-text{font-weight:var(--df-typo-weight-medium)}.df-topnav-nav-basic .df-topnav-brand{color:var(--df-topnav-color-productName-basic-default-foreground)}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-link{color:var(--df-topnav-color-productName-basic-default-foreground)!important;--df-topnav-brand-link-bg-color: var(--df-topnav-color-inert-basic-background);--df-topnav-brand-link-border-color: var(--df-topnav-color-productName-basic-default-border)}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-link:hover{--df-topnav-brand-link-bg-color: var(--df-topnav-color-productName-basic-hovered-background);--df-topnav-brand-link-border-color: var(--df-topnav-color-productName-basic-hovered-border);color:var(--df-topnav-color-productName-basic-hovered-foreground)!important}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-link:active{--df-topnav-brand-link-bg-color: var(--df-topnav-color-productName-basic-pressed-background);--df-topnav-brand-link-border-color: var(--df-topnav-color-productName-basic-pressed-border);color:var(--df-topnav-color-productName-basic-pressed-foreground)!important}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-company-amaudeus-logo-desktop{color:var(--df-color-logo-main-foreground)}.df-topnav-nav-mirror .df-topnav-brand{color:var(--df-topnav-color-productName-mirror-default-foreground)}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-link{color:var(--df-topnav-color-productName-mirror-default-foreground)!important;--df-topnav-brand-link-bg-color: var(--df-topnav-color-inert-mirror-background);--df-topnav-brand-link-border-color: var(--df-topnav-color-productName-mirror-default-border)}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-link:hover{--df-topnav-brand-link-bg-color: var(--df-topnav-color-productName-mirror-hovered-background);--df-topnav-brand-link-border-color: var(--df-topnav-color-productName-mirror-hovered-border);color:var(--df-topnav-color-productName-mirror-hovered-foreground)!important}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-link:active{--df-topnav-brand-link-bg-color: var(--df-topnav-color-productName-mirror-pressed-background);--df-topnav-brand-link-border-color: var(--df-topnav-color-productName-mirror-pressed-border);color:var(--df-topnav-color-productName-mirror-pressed-foreground)!important}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-company-amaudeus-logo-desktop{color:var(--df-color-logo-alt-foreground)}\n"] }]
|
|
1392
|
+
}], propDecorators: { href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], product: [{ type: i0.Input, args: [{ isSignal: true, alias: "product", required: false }] }], module: [{ type: i0.Input, args: [{ isSignal: true, alias: "module", required: false }] }], amaudeusLogoVector: [{ type: i0.Input, args: [{ isSignal: true, alias: "amaudeusLogoVector", required: false }] }], brandLinkContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfTopNavBrandLinkContent), { ...{ read: TemplateRef }, isSignal: true }] }] } });
|
|
1393
|
+
|
|
1394
|
+
/**
|
|
1395
|
+
* DfTopNavQuickActionThemePicker is a topnav quick action dropdown component that allows users to select a theme mode for the application.
|
|
1396
|
+
*
|
|
1397
|
+
* It uses the {@link DfThemeService} to manage theme state and apply the selected theme. The component displays an icon and label corresponding to the current theme selection and provides options for users to change the theme.
|
|
1398
|
+
* @since 21.1
|
|
1399
|
+
*/
|
|
1400
|
+
class DfTopNavQuickActionThemePicker extends DfTopNavQuickAction {
|
|
1401
|
+
constructor() {
|
|
1402
|
+
super(...arguments);
|
|
1403
|
+
this.themeService = inject(DfThemeService);
|
|
1404
|
+
/**
|
|
1405
|
+
* An array of theme options to display in the dropdown
|
|
1406
|
+
*
|
|
1407
|
+
* Each option includes a `themeMode` which corresponds to a theme mode in the DfThemeService, and an `icon` which is a FontAwesome class name for the icon to display next to the option.
|
|
1408
|
+
*/
|
|
1409
|
+
this.themeOptions = input.required(...(ngDevMode ? [{ debugName: "themeOptions" }] : []));
|
|
1410
|
+
/**
|
|
1411
|
+
* The appearance of the TopNav button, which will determine its color. It can be either 'primary' or 'neutral'.
|
|
1412
|
+
*/
|
|
1413
|
+
this.appearance = input('neutral', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
|
|
1414
|
+
this.mapThemeToIcon = computed(() => {
|
|
1415
|
+
const map = new Map();
|
|
1416
|
+
for (const option of this.themeOptions()) {
|
|
1417
|
+
map.set(option.themeMode, option.icon);
|
|
1418
|
+
}
|
|
1419
|
+
return map;
|
|
1420
|
+
}, ...(ngDevMode ? [{ debugName: "mapThemeToIcon" }] : []));
|
|
1421
|
+
this.toggleId = `df-topnav-dropdown-toggle-${generateId()}`;
|
|
1422
|
+
this.content = viewChild.required('themePickerContent');
|
|
1423
|
+
}
|
|
1424
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionThemePicker, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1425
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfTopNavQuickActionThemePicker, isStandalone: true, selector: "df-topnav-quick-action-theme-picker", inputs: { themeOptions: { classPropertyName: "themeOptions", publicName: "themeOptions", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: DF_TOPNAV_QUICK_ACTION_ELEMENT, useExisting: DfTopNavQuickActionThemePicker }], viewQueries: [{ propertyName: "content", first: true, predicate: ["themePickerContent"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
|
|
1426
|
+
<ng-template #themePickerContent>
|
|
1427
|
+
<div ngbDropdown class="d-flex" #dropdown="ngbDropdown">
|
|
1428
|
+
<button
|
|
1429
|
+
type="button"
|
|
1430
|
+
aria-label="Choose theme"
|
|
1431
|
+
i18n-aria-label="@@df.themePicker.dropdownToggle.ariaLabel"
|
|
1432
|
+
class="w-100 w-lg-auto"
|
|
1433
|
+
dfTopNavButton
|
|
1434
|
+
[attr.id]="toggleId"
|
|
1435
|
+
ngbDropdownToggle
|
|
1436
|
+
>
|
|
1437
|
+
<span aria-hidden="true" class="fas {{ mapThemeToIcon().get(themeService.selected()) }}"></span>
|
|
1438
|
+
<span class="me-auto d-lg-none">
|
|
1439
|
+
{{ themeService.selected() | titlecase }}
|
|
1440
|
+
</span>
|
|
1441
|
+
</button>
|
|
1442
|
+
<div
|
|
1443
|
+
ngbDropdownMenu
|
|
1444
|
+
[attr.aria-labelledby]="toggleId"
|
|
1445
|
+
class="dropdown-menu-end df-topnav-quick-action-theme-picker-dropdown"
|
|
1446
|
+
>
|
|
1447
|
+
@for (themeOption of themeOptions(); track themeOption; let id = $index) {
|
|
1448
|
+
<button
|
|
1449
|
+
type="button"
|
|
1450
|
+
ngbDropdownItem
|
|
1451
|
+
class="dropdown-item gap-3 d-flex"
|
|
1452
|
+
[class.active]="themeOption.themeMode === themeService.selected()"
|
|
1453
|
+
(click)="dropdown.close(); themeService.setTheme(themeOption.themeMode)"
|
|
1454
|
+
>
|
|
1455
|
+
<span class="fas {{ mapThemeToIcon().get(themeOption.themeMode) }}" aria-hidden="true"></span>
|
|
1456
|
+
{{ themeOption.themeMode | titlecase }}
|
|
1457
|
+
</button>
|
|
1458
|
+
}
|
|
1459
|
+
</div>
|
|
1460
|
+
</div>
|
|
1461
|
+
</ng-template>
|
|
1462
|
+
<ng-container *ngTemplateOutlet="themePickerContent" />
|
|
1463
|
+
`, isInline: true, styles: [".df-drawer .df-topnav-quick-action-theme-picker-dropdown{min-width:100%}\n"], dependencies: [{ kind: "directive", type: NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DfTopNavButton, selector: "button[dfTopNavButton]", inputs: ["appearance", "icon"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1464
|
+
}
|
|
1465
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionThemePicker, decorators: [{
|
|
1466
|
+
type: Component,
|
|
1467
|
+
args: [{ selector: 'df-topnav-quick-action-theme-picker', template: `
|
|
1468
|
+
<ng-template #themePickerContent>
|
|
1469
|
+
<div ngbDropdown class="d-flex" #dropdown="ngbDropdown">
|
|
1470
|
+
<button
|
|
1471
|
+
type="button"
|
|
1472
|
+
aria-label="Choose theme"
|
|
1473
|
+
i18n-aria-label="@@df.themePicker.dropdownToggle.ariaLabel"
|
|
1474
|
+
class="w-100 w-lg-auto"
|
|
1475
|
+
dfTopNavButton
|
|
1476
|
+
[attr.id]="toggleId"
|
|
1477
|
+
ngbDropdownToggle
|
|
1478
|
+
>
|
|
1479
|
+
<span aria-hidden="true" class="fas {{ mapThemeToIcon().get(themeService.selected()) }}"></span>
|
|
1480
|
+
<span class="me-auto d-lg-none">
|
|
1481
|
+
{{ themeService.selected() | titlecase }}
|
|
1482
|
+
</span>
|
|
1483
|
+
</button>
|
|
1484
|
+
<div
|
|
1485
|
+
ngbDropdownMenu
|
|
1486
|
+
[attr.aria-labelledby]="toggleId"
|
|
1487
|
+
class="dropdown-menu-end df-topnav-quick-action-theme-picker-dropdown"
|
|
1488
|
+
>
|
|
1489
|
+
@for (themeOption of themeOptions(); track themeOption; let id = $index) {
|
|
1490
|
+
<button
|
|
1491
|
+
type="button"
|
|
1492
|
+
ngbDropdownItem
|
|
1493
|
+
class="dropdown-item gap-3 d-flex"
|
|
1494
|
+
[class.active]="themeOption.themeMode === themeService.selected()"
|
|
1495
|
+
(click)="dropdown.close(); themeService.setTheme(themeOption.themeMode)"
|
|
1496
|
+
>
|
|
1497
|
+
<span class="fas {{ mapThemeToIcon().get(themeOption.themeMode) }}" aria-hidden="true"></span>
|
|
1498
|
+
{{ themeOption.themeMode | titlecase }}
|
|
1499
|
+
</button>
|
|
1500
|
+
}
|
|
1501
|
+
</div>
|
|
1502
|
+
</div>
|
|
1503
|
+
</ng-template>
|
|
1504
|
+
<ng-container *ngTemplateOutlet="themePickerContent" />
|
|
1505
|
+
`, imports: [
|
|
1506
|
+
NgbDropdown,
|
|
1507
|
+
NgbDropdownToggle,
|
|
1508
|
+
NgbDropdownMenu,
|
|
1509
|
+
NgbDropdownItem,
|
|
1510
|
+
TitleCasePipe,
|
|
1511
|
+
NgTemplateOutlet,
|
|
1512
|
+
DfTopNavButton
|
|
1513
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: DF_TOPNAV_QUICK_ACTION_ELEMENT, useExisting: DfTopNavQuickActionThemePicker }], styles: [".df-drawer .df-topnav-quick-action-theme-picker-dropdown{min-width:100%}\n"] }]
|
|
1514
|
+
}], propDecorators: { themeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeOptions", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], content: [{ type: i0.ViewChild, args: ['themePickerContent', { isSignal: true }] }] } });
|
|
1515
|
+
|
|
1516
|
+
/**
|
|
1517
|
+
* The environment banner component, used to display a banner at the top of the page indicating the current environment (e.g., development, staging, production).
|
|
1518
|
+
*
|
|
1519
|
+
* See {@link https://design-factory.amadeus.net/components/topnav/examples#environment-banner|Design Factory example}
|
|
1520
|
+
* @since 21.1
|
|
1521
|
+
*/
|
|
1522
|
+
class DfEnvBanner {
|
|
1523
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfEnvBanner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1524
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: DfEnvBanner, isStandalone: true, selector: "df-env-banner", host: { classAttribute: "df-env-banner" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".df-env-banner{display:flex;width:100%;justify-content:center;background-color:var(--df-color-warning-soft-default-background);color:var(--df-color-warning-soft-default-foreground);font-size:var(--df-typo-sizing-xsmall);z-index:10;box-shadow:0 0 8px var(--df-color-shadow-1)}@media(min-width:768px)and (max-width:991px){.df-app-container:has(.df-drawer.df-collapse-show,.df-drawer.df-collapse-collapsing) .df-env-banner{z-index:2010}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1525
|
+
}
|
|
1526
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfEnvBanner, decorators: [{
|
|
1527
|
+
type: Component,
|
|
1528
|
+
args: [{ selector: 'df-env-banner', template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1529
|
+
class: 'df-env-banner'
|
|
1530
|
+
}, styles: [".df-env-banner{display:flex;width:100%;justify-content:center;background-color:var(--df-color-warning-soft-default-background);color:var(--df-color-warning-soft-default-foreground);font-size:var(--df-typo-sizing-xsmall);z-index:10;box-shadow:0 0 8px var(--df-color-shadow-1)}@media(min-width:768px)and (max-width:991px){.df-app-container:has(.df-drawer.df-collapse-show,.df-drawer.df-collapse-collapsing) .df-env-banner{z-index:2010}}\n"] }]
|
|
1531
|
+
}] });
|
|
1532
|
+
|
|
1533
|
+
/**
|
|
1534
|
+
* Generated bundle index. Do not edit.
|
|
1535
|
+
*/
|
|
1536
|
+
|
|
1537
|
+
export { DfAppContainer, DfEnvBanner, DfTopNav, DfTopNavBrand, DfTopNavBrandLinkContent, DfTopNavNavigation, DfTopNavNavigationItem, DfTopNavNavigationLink, DfTopNavQuickAction, DfTopNavQuickActionButton, DfTopNavQuickActionButtonContent, DfTopNavQuickActionButtonIcon, DfTopNavQuickActionInDrawer, DfTopNavQuickActionInTopNav, DfTopNavQuickActionSearch, DfTopNavQuickActionSearchInput, DfTopNavQuickActionThemePicker, DfTopNavQuickActions };
|
|
1538
|
+
//# sourceMappingURL=design-factory-angular-topnav.mjs.map
|