@tedi-design-system/angular 6.0.0-rc.4 → 6.0.0-rc.5
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/fesm2022/tedi-design-system-angular-tedi.mjs +96 -20
- package/fesm2022/tedi-design-system-angular-tedi.mjs.map +1 -1
- package/package.json +1 -1
- package/tedi/components/layout/sidenav/sidenav-dropdown/sidenav-dropdown.component.d.ts.map +1 -1
- package/tedi/components/layout/sidenav/sidenav-dropdown-group/sidenav-dropdown-group.component.d.ts +9 -2
- package/tedi/components/layout/sidenav/sidenav-dropdown-group/sidenav-dropdown-group.component.d.ts.map +1 -1
- package/tedi/components/layout/sidenav/sidenav-dropdown-item/sidenav-dropdown-item.component.d.ts +5 -1
- package/tedi/components/layout/sidenav/sidenav-dropdown-item/sidenav-dropdown-item.component.d.ts.map +1 -1
- package/tedi/components/layout/sidenav/sidenav-item/sidenav-item.component.d.ts +2 -1
- package/tedi/components/layout/sidenav/sidenav-item/sidenav-item.component.d.ts.map +1 -1
- package/tedi/components/layout/sidenav/sidenav.component.d.ts +2 -0
- package/tedi/components/layout/sidenav/sidenav.component.d.ts.map +1 -1
- package/tedi/services/translation/translations.d.ts +7 -0
- package/tedi/services/translation/translations.d.ts.map +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, Injectable, InjectionToken, REQUEST, PLATFORM_ID, effect, isSignal, Pipe, Renderer2, HostListener, viewChild, contentChild, contentChildren, model, output, forwardRef, ViewChild, TemplateRef, HostBinding, Attribute, Injector, ViewContainerRef, runInInjectionContext, ContentChildren, ContentChild, makeEnvironmentProviders, provideAppInitializer } from '@angular/core';
|
|
2
|
+
import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, Injectable, InjectionToken, REQUEST, PLATFORM_ID, effect, isSignal, Pipe, Renderer2, HostListener, viewChild, contentChild, contentChildren, model, output, forwardRef, ViewChild, TemplateRef, HostBinding, Attribute, Injector, ViewContainerRef, runInInjectionContext, ContentChildren, afterNextRender, ContentChild, makeEnvironmentProviders, provideAppInitializer } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/cdk/layout';
|
|
4
4
|
import { DOCUMENT, isPlatformBrowser, isPlatformServer, NgTemplateOutlet, NgClass, NgFor, NgIf } from '@angular/common';
|
|
5
5
|
import * as i1$1 from 'ngx-float-ui';
|
|
@@ -873,6 +873,13 @@ const translationsMap = {
|
|
|
873
873
|
en: (isOpen) => (isOpen ? "Close menu" : "Open menu"),
|
|
874
874
|
ru: (isOpen) => (isOpen ? "Закрыть меню" : "Открыть меню"),
|
|
875
875
|
},
|
|
876
|
+
"sidenav.toggleSubmenu": {
|
|
877
|
+
description: "Label for sidenav submenu toggle",
|
|
878
|
+
components: ["Sidenav"],
|
|
879
|
+
et: (value, isOpen) => (`${isOpen ? 'Sulge' : 'Ava'} ${value} alammenüü`),
|
|
880
|
+
en: (value, isOpen) => (`${isOpen ? 'Close' : 'Open'} ${value} submenu`),
|
|
881
|
+
ru: (value, isOpen) => (`${isOpen ? 'Закрыть' : 'Открыть'} ${value} подменю`),
|
|
882
|
+
},
|
|
876
883
|
carousel: {
|
|
877
884
|
description: "Label for carousel",
|
|
878
885
|
components: ["CarouselContent"],
|
|
@@ -4876,12 +4883,25 @@ class SideNavComponent {
|
|
|
4876
4883
|
* @default lg
|
|
4877
4884
|
*/
|
|
4878
4885
|
desktopBreakpoint = input("lg");
|
|
4886
|
+
injector = inject(Injector);
|
|
4879
4887
|
constructor(sidenavService) {
|
|
4880
4888
|
this.sidenavService = sidenavService;
|
|
4881
4889
|
effect(() => {
|
|
4882
4890
|
this.sidenavService.desktopBreakpoint.set(this.desktopBreakpoint());
|
|
4883
4891
|
});
|
|
4884
4892
|
}
|
|
4893
|
+
handleBackToMainMenu() {
|
|
4894
|
+
// Find the parent menu item to focus on
|
|
4895
|
+
const openItem = this.sidenavService.items().find(item => item.dropdown?.open());
|
|
4896
|
+
this.sidenavService.handleGoToMainMenu();
|
|
4897
|
+
afterNextRender(() => {
|
|
4898
|
+
if (openItem) {
|
|
4899
|
+
const itemEl = openItem['host']?.nativeElement;
|
|
4900
|
+
const trigger = itemEl?.querySelector('.tedi-sidenav-item__title');
|
|
4901
|
+
trigger?.focus();
|
|
4902
|
+
}
|
|
4903
|
+
}, { injector: this.injector });
|
|
4904
|
+
}
|
|
4885
4905
|
classes = computed(() => {
|
|
4886
4906
|
const classList = ["tedi-sidenav", `tedi-sidenav--${this.size()}`];
|
|
4887
4907
|
if (this.dividers()) {
|
|
@@ -4902,13 +4922,13 @@ class SideNavComponent {
|
|
|
4902
4922
|
return classList.join(" ");
|
|
4903
4923
|
});
|
|
4904
4924
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SideNavComponent, deps: [{ token: SideNavService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4905
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SideNavComponent, isStandalone: true, selector: "nav[tedi-sidenav]", inputs: { dividers: { classPropertyName: "dividers", publicName: "dividers", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, desktopBreakpoint: { classPropertyName: "desktopBreakpoint", publicName: "desktopBreakpoint", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "@if (!sidenavService.isMobile() && collapsible()) {\n <button\n class=\"tedi-sidenav__collapse\"\n (click)=\"sidenavService.handleCollapse()\"\n [attr.aria-label]=\"'toggle' | tediTranslate: !sidenavService.isCollapsed()\"\n >\n <tedi-icon\n [name]=\"\n sidenavService.isCollapsed() ? 'left_panel_open' : 'right_panel_open'\n \"\n color=\"brand\"\n />\n </button>\n}\n@if (sidenavService.isMobileItemOpen()) {\n <button\n class=\"tedi-sidenav-back\"\n (click)=\"sidenavService.handleGoToMainMenu()\"\n >\n <tedi-icon name=\"arrow_back\" color=\"white\" />\n {{ \"sidenav.backToMainMenu\" | tediTranslate }}\n </button>\n}\n<div role=\"menubar\">\n <ng-content></ng-content>\n</div>\n", styles: [":root{--_sidenav-tree-container: 24px;--_sidenav-tree-trunk-width: 2px;--_sidenav-tree-branch-width: 10px;--_sidenav-tree-bullet-size: 8px;--_sidenav-tree-left-padding: ( var(--_sidenav-tree-container) - var(--_sidenav-tree-trunk-width) ) / 2;--_sidenav-dropdown-collapsed-min-width: 16.5rem;--_sidenav-dropdown-collapsed-left: 4px;--_sidenav-dropdown-item-large-height: 48px;--_sidenav-dropdown-item-medium-height: 44px;--_sidenav-dropdown-item-small-height: 36px;--_sidenav-dropdown-item-collapsed-height: 40px;--_sidenav-collapsed-text-width: 4.5rem;--_sidenav-transition-duration: .3s}.tedi-sidenav{position:relative;z-index:var(--z-index-sidenav);display:flex;flex-direction:column;width:var(--navigation-vertical-item-width-default);max-width:100%;min-height:100%;background-color:var(--navigation-vertical-item-background-default);transition:all var(--_sidenav-transition-duration) ease}.tedi-sidenav__collapse{position:absolute;top:var(--navigation-vertical-item-padding-y);right:0;z-index:var(--z-index-sidenav);display:flex;align-items:center;justify-content:center;width:var(--button-sm-height);height:var(--button-sm-height);padding:var(--button-md-icon-padding);cursor:pointer;background:var(--button-floating-secondary-background-default);border:var(--borders-01) solid var(--button-floating-secondary-border-default);border-radius:var(--button-radius-default);transform:translate(50%)}.tedi-sidenav__collapse:hover{color:var(--button-floating-secondary-text-hover);background:var(--button-floating-secondary-background-hover);border:var(--borders-01) solid var(--button-floating-secondary-border-hover)}.tedi-sidenav__collapse:active{color:var(--button-floating-secondary-text-active);background:var(--button-floating-secondary-background-active);border:var(--borders-01) solid var(--button-floating-secondary-border-active)}.tedi-sidenav__collapse:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-sidenav--hidden{display:none}.tedi-sidenav--large{--_sidenav-dropdown-item-height: var(--navigation-vertical-dropdown-item);--_sidenav-item-min-height: var( --navigation-vertical-item-min-height-large );--_sidenav-item-font-size: var(--navigation-vertical-text-size);--_sidenav-item-line-height: var(--body-regular-line-height);--_sidenav-item-padding-y: var(--navigation-vertical-item-padding-y);--_sidenav-item-padding-right: var( --navigation-vertical-item-padding-right );--_sidenav-item-padding-left: var( --navigation-vertical-item-padding-left-level-1 );--_sidenav-item-icon-size: var(--navigation-vertical-item-icon);--_sidenav-item-caret-size: var(--navigation-vertical-item-icon)}.tedi-sidenav--medium{--_sidenav-dropdown-item-height: var(--navigation-vertical-dropdown-item);--_sidenav-item-min-height: var( --navigation-vertical-item-min-height-medium );--_sidenav-item-font-size: var(--navigation-vertical-text-size-sm);--_sidenav-item-line-height: var(--body-small-regular-line-height);--_sidenav-item-padding-y: var(--navigation-vertical-item-padding-y-md);--_sidenav-item-padding-right: var( --navigation-vertical-item-padding-right );--_sidenav-item-padding-left: var( --navigation-vertical-item-padding-left-level-1 );--_sidenav-item-icon-size: var(--navigation-vertical-item-icon-md);--_sidenav-item-caret-size: var(--navigation-vertical-item-icon-md)}.tedi-sidenav--small{--_sidenav-dropdown-item-height: var(--navigation-vertical-dropdown-item);--_sidenav-item-min-height: var( --navigation-vertical-item-min-height-small );--_sidenav-item-font-size: var(--navigation-vertical-text-size-sm);--_sidenav-item-line-height: var(--body-small-regular-line-height);--_sidenav-item-padding-y: var(--navigation-vertical-item-padding-y-sm);--_sidenav-item-padding-right: var( --navigation-vertical-item-padding-right );--_sidenav-item-padding-left: var( --navigation-vertical-item-padding-left-level-1 );--_sidenav-item-icon-size: var(--navigation-vertical-item-icon-sm);--_sidenav-item-caret-size: var(--navigation-vertical-item-icon-sm)}.tedi-sidenav--dividers .tedi-sidenav-item{border-bottom:var(--borders-01) solid var(--navigation-vertical-item-border)}.tedi-sidenav--dividers .tedi-sidenav-item:last-of-type{border-bottom:0}.tedi-sidenav--mobile .tedi-sidenav-item .tedi-sidenav-dropdown{transition:none}.tedi-sidenav--mobile .tedi-sidenav-item .tedi-sidenav-item__text{white-space:wrap;animation:none}.tedi-sidenav--mobile-item-open .tedi-sidenav-group-title{display:none}.tedi-sidenav--mobile-item-open .tedi-sidenav-item{border-bottom:0}.tedi-sidenav--mobile-item-open .tedi-sidenav-item .tedi-sidenav-group-title{display:block}.tedi-sidenav--collapsed{--_sidenav-dropdown-item-height: var( --_sidenav-dropdown-item-collapsed-height );--_sidenav-item-icon-size: var(--navigation-vertical-item-icon);--_sidenav-item-caret-size: var(--navigation-vertical-item-icon-sm);width:var(--navigation-vertical-item-width-collapsed)}.tedi-sidenav--collapsed .tedi-sidenav-item{--_sidenav-item-font-size: var(--navigation-vertical-text-size-sm)}.tedi-sidenav--collapsed .tedi-sidenav-item .tedi-sidenav-item__title{flex-direction:column;min-height:var(--navigation-vertical-item-min-height-large);padding:var(--navigation-vertical-item-padding-y) var(--navigation-vertical-item-padding-x-sm);text-align:center}.tedi-sidenav--collapsed .tedi-sidenav-item .tedi-sidenav-item__caret{position:absolute;top:var(--_sidenav-item-padding-y);right:var(--_sidenav-item-padding-right);font-size:var(--size-03)}.tedi-sidenav--collapsed .tedi-sidenav-item .tedi-sidenav-item__caret[data-open=true]{transform:rotate(-90deg)}.tedi-sidenav--collapsed .tedi-sidenav-item .tedi-sidenav-item__text{max-width:var(--_sidenav-collapsed-text-width);white-space:nowrap;animation:none}.tedi-sidenav--collapsed .tedi-sidenav-group-title{border-bottom:var(--borders-01) solid var(--navigation-vertical-group-title-text)}.tedi-sidenav--collapsed .tedi-sidenav-group-title .tedi-sidenav-group-title__text{display:none}.tedi-sidenav--collapsed .tedi-sidenav-dropdown{position:absolute;top:0;left:calc(100% + var(--_sidenav-dropdown-collapsed-left));visibility:hidden;min-width:var(--_sidenav-dropdown-collapsed-min-width);background:var(--dropdown-item-default-background);border:var(--borders-01) solid var(--card-border-primary);border-radius:var(--form-select-area-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20);transition:none}.tedi-sidenav--collapsed .tedi-sidenav-dropdown--open{visibility:visible}.tedi-sidenav--collapsed .tedi-sidenav-dropdown .tedi-sidenav-group-title{border:0}.tedi-sidenav--collapsed .tedi-sidenav-dropdown .tedi-sidenav-group-title .tedi-sidenav-group-title__text{display:block;padding:var(--dropdown-group-label-padding-y) var(--dropdown-group-label-padding-x) var(--layout-grid-gutters-04) var(--dropdown-group-label-padding-x);font-size:14px;line-height:20px;color:var(--general-text-tertiary)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-item{--_gap: var(--dropdown-item-inner-spacing);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);color:var(--dropdown-item-default-text)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-item.tedi-sidenav-dropdown-item--selected,.tedi-sidenav--collapsed .tedi-sidenav-dropdown-item:hover{color:var(--dropdown-item-hover-text);background-color:var(--dropdown-item-hover-background)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-item:before,.tedi-sidenav--collapsed .tedi-sidenav-dropdown-item:after{width:0;height:0}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item{padding-left:calc(var(--dropdown-item-padding-x) + var(--_sidenav-tree-container) + var(--_gap))}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item:after{top:50%;width:var(--_sidenav-tree-branch-width);height:var(--_sidenav-tree-trunk-width);background-color:var(--navigation-vertical-tree-neutral-default);transform:translateY(-50%)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item:before{width:var(--_sidenav-tree-trunk-width);height:100%;background-color:var(--navigation-vertical-tree-neutral-default)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item:first-of-type{padding-left:var(--dropdown-item-padding-x)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item:first-of-type:after{width:0;height:0}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item:first-of-type:not(:only-child):after,.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item:first-of-type:not(:only-child):before{width:0;height:0}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item:last-of-type:before{height:50%}.tedi-sidenav .tedi-sidenav-back{min-height:var(--_sidenav-item-min-height);padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-left);font-size:var(--_sidenav-item-font-size);font-size:inherit;line-height:var(--_sidenav-item-line-height);color:var(--navigation-vertical-item-text);text-align:start;cursor:pointer;background:transparent;border:0;border-bottom:var(--borders-01) solid var(--navigation-vertical-item-border)}.tedi-sidenav .tedi-sidenav-back:hover{background:var(--navigation-vertical-item-background-hover)}.tedi-sidenav .tedi-sidenav-back tedi-icon{font-size:var(--navigation-vertical-item-icon)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4925
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SideNavComponent, isStandalone: true, selector: "nav[tedi-sidenav]", inputs: { dividers: { classPropertyName: "dividers", publicName: "dividers", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, desktopBreakpoint: { classPropertyName: "desktopBreakpoint", publicName: "desktopBreakpoint", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "@if (!sidenavService.isMobile() && collapsible()) {\n <button\n class=\"tedi-sidenav__collapse\"\n (click)=\"sidenavService.handleCollapse()\"\n [attr.aria-label]=\"'toggle' | tediTranslate: !sidenavService.isCollapsed()\"\n >\n <tedi-icon\n [name]=\"\n sidenavService.isCollapsed() ? 'left_panel_open' : 'right_panel_open'\n \"\n color=\"brand\"\n />\n </button>\n}\n@if (sidenavService.isMobileItemOpen()) {\n <button\n class=\"tedi-sidenav-back\"\n (click)=\"handleBackToMainMenu()\"\n >\n <tedi-icon name=\"arrow_back\" color=\"white\" />\n {{ \"sidenav.backToMainMenu\" | tediTranslate }}\n </button>\n}\n<ul class=\"tedi-sidenav__list\">\n <ng-content></ng-content>\n</ul>\n", styles: [":root{--_sidenav-tree-container: 24px;--_sidenav-tree-trunk-width: 2px;--_sidenav-tree-branch-width: 10px;--_sidenav-tree-bullet-size: 8px;--_sidenav-tree-left-padding: ( var(--_sidenav-tree-container) - var(--_sidenav-tree-trunk-width) ) / 2;--_sidenav-dropdown-collapsed-min-width: 16.5rem;--_sidenav-dropdown-collapsed-left: 4px;--_sidenav-dropdown-item-large-height: 48px;--_sidenav-dropdown-item-medium-height: 44px;--_sidenav-dropdown-item-small-height: 36px;--_sidenav-dropdown-item-collapsed-height: 40px;--_sidenav-collapsed-text-width: 4.5rem;--_sidenav-transition-duration: .3s;--_sidenav-focus-ring: 0 0 0 1px var(--tedi-neutral-100), 0 0 0 3px var(--tedi-primary-400)}.tedi-sidenav__list{padding:0;margin:0;list-style:none}.tedi-sidenav{position:relative;z-index:var(--z-index-sidenav);display:flex;flex-direction:column;width:var(--navigation-vertical-item-width-default);max-width:100%;min-height:100%;background-color:var(--navigation-vertical-item-background-default);transition:all var(--_sidenav-transition-duration) ease}.tedi-sidenav__collapse{position:absolute;top:var(--navigation-vertical-item-padding-y);right:0;z-index:var(--z-index-sidenav);display:flex;align-items:center;justify-content:center;width:var(--button-sm-height);height:var(--button-sm-height);padding:var(--button-md-icon-padding);cursor:pointer;background:var(--button-floating-secondary-background-default);border:var(--borders-01) solid var(--button-floating-secondary-border-default);border-radius:var(--button-radius-default);transform:translate(50%)}.tedi-sidenav__collapse:hover{color:var(--button-floating-secondary-text-hover);background:var(--button-floating-secondary-background-hover);border:var(--borders-01) solid var(--button-floating-secondary-border-hover)}.tedi-sidenav__collapse:active{color:var(--button-floating-secondary-text-active);background:var(--button-floating-secondary-background-active);border:var(--borders-01) solid var(--button-floating-secondary-border-active)}.tedi-sidenav__collapse:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-sidenav--hidden{display:none}.tedi-sidenav--large{--_sidenav-dropdown-item-height: var(--navigation-vertical-dropdown-item);--_sidenav-item-min-height: var( --navigation-vertical-item-min-height-large );--_sidenav-item-font-size: var(--navigation-vertical-text-size);--_sidenav-item-line-height: var(--body-regular-line-height);--_sidenav-item-padding-y: var(--navigation-vertical-item-padding-y);--_sidenav-item-padding-right: var( --navigation-vertical-item-padding-right );--_sidenav-item-padding-left: var( --navigation-vertical-item-padding-left-level-1 );--_sidenav-item-icon-size: var(--navigation-vertical-item-icon);--_sidenav-item-caret-size: var(--navigation-vertical-item-icon)}.tedi-sidenav--medium{--_sidenav-dropdown-item-height: var(--navigation-vertical-dropdown-item);--_sidenav-item-min-height: var( --navigation-vertical-item-min-height-medium );--_sidenav-item-font-size: var(--navigation-vertical-text-size-sm);--_sidenav-item-line-height: var(--body-small-regular-line-height);--_sidenav-item-padding-y: var(--navigation-vertical-item-padding-y-md);--_sidenav-item-padding-right: var( --navigation-vertical-item-padding-right );--_sidenav-item-padding-left: var( --navigation-vertical-item-padding-left-level-1 );--_sidenav-item-icon-size: var(--navigation-vertical-item-icon-md);--_sidenav-item-caret-size: var(--navigation-vertical-item-icon-md)}.tedi-sidenav--small{--_sidenav-dropdown-item-height: var(--navigation-vertical-dropdown-item);--_sidenav-item-min-height: var( --navigation-vertical-item-min-height-small );--_sidenav-item-font-size: var(--navigation-vertical-text-size-sm);--_sidenav-item-line-height: var(--body-small-regular-line-height);--_sidenav-item-padding-y: var(--navigation-vertical-item-padding-y-sm);--_sidenav-item-padding-right: var( --navigation-vertical-item-padding-right );--_sidenav-item-padding-left: var( --navigation-vertical-item-padding-left-level-1 );--_sidenav-item-icon-size: var(--navigation-vertical-item-icon-sm);--_sidenav-item-caret-size: var(--navigation-vertical-item-icon-sm)}.tedi-sidenav--dividers tedi-sidenav-item>.tedi-sidenav-item{border-bottom:var(--borders-01) solid var(--navigation-vertical-item-border)}.tedi-sidenav--dividers tedi-sidenav-item:last-child>.tedi-sidenav-item{border-bottom:0}.tedi-sidenav--mobile .tedi-sidenav-item .tedi-sidenav-dropdown{transition:none}.tedi-sidenav--mobile .tedi-sidenav-item .tedi-sidenav-item__text{white-space:wrap;animation:none}.tedi-sidenav--mobile-item-open .tedi-sidenav-group-title{display:none}.tedi-sidenav--mobile-item-open .tedi-sidenav-item{border-bottom:0}.tedi-sidenav--mobile-item-open .tedi-sidenav-item .tedi-sidenav-group-title{display:block}.tedi-sidenav--collapsed{--_sidenav-dropdown-item-height: var( --_sidenav-dropdown-item-collapsed-height );--_sidenav-item-icon-size: var(--navigation-vertical-item-icon);--_sidenav-item-caret-size: var(--navigation-vertical-item-icon-sm);width:var(--navigation-vertical-item-width-collapsed)}.tedi-sidenav--collapsed tedi-tooltip-trigger{display:block;width:100%}.tedi-sidenav--collapsed .tedi-sidenav-item{--_sidenav-item-font-size: var(--navigation-vertical-text-size-sm)}.tedi-sidenav--collapsed .tedi-sidenav-item .tedi-sidenav-item__title{flex-direction:column;min-height:var(--navigation-vertical-item-min-height-large);padding:var(--navigation-vertical-item-padding-y) var(--navigation-vertical-item-padding-x-sm);text-align:center}.tedi-sidenav--collapsed .tedi-sidenav-item .tedi-sidenav-item__caret{position:absolute;top:var(--_sidenav-item-padding-y);right:var(--_sidenav-item-padding-right);font-size:var(--size-03)}.tedi-sidenav--collapsed .tedi-sidenav-item .tedi-sidenav-item__caret[data-open=true]{transform:rotate(-90deg)}.tedi-sidenav--collapsed .tedi-sidenav-item .tedi-sidenav-item__text{max-width:var(--_sidenav-collapsed-text-width);white-space:nowrap;animation:none}.tedi-sidenav--collapsed .tedi-sidenav-group-title{border-bottom:var(--borders-01) solid var(--navigation-vertical-group-title-text)}.tedi-sidenav--collapsed .tedi-sidenav-group-title .tedi-sidenav-group-title__text{display:none}.tedi-sidenav--collapsed .tedi-sidenav-dropdown{position:absolute;top:0;left:calc(100% + var(--_sidenav-dropdown-collapsed-left));visibility:hidden;min-width:var(--_sidenav-dropdown-collapsed-min-width);background:var(--dropdown-item-default-background);border:var(--borders-01) solid var(--card-border-primary);border-radius:var(--form-select-area-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20);transition:none}.tedi-sidenav--collapsed .tedi-sidenav-dropdown--open{visibility:visible}.tedi-sidenav--collapsed .tedi-sidenav-dropdown .tedi-sidenav-group-title{border:0}.tedi-sidenav--collapsed .tedi-sidenav-dropdown .tedi-sidenav-group-title .tedi-sidenav-group-title__text{display:block;padding:var(--dropdown-group-label-padding-y) var(--dropdown-group-label-padding-x) var(--layout-grid-gutters-04) var(--dropdown-group-label-padding-x);font-size:14px;line-height:20px;color:var(--general-text-tertiary)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-item{--_gap: var(--dropdown-item-inner-spacing);font-size:var(--body-regular-size);color:var(--dropdown-item-default-text)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-item__trigger{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-item__trigger:focus-visible{color:var(--dropdown-item-hover-text);outline:none;background-color:var(--dropdown-item-hover-background);box-shadow:var(--_sidenav-focus-ring)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-item.tedi-sidenav-dropdown-item--selected,.tedi-sidenav--collapsed .tedi-sidenav-dropdown-item:hover{color:var(--dropdown-item-hover-text);background-color:var(--dropdown-item-hover-background)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-item:before,.tedi-sidenav--collapsed .tedi-sidenav-dropdown-item:after{width:0;height:0}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group__parent-wrapper:before{display:none}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item.tedi-sidenav-dropdown-group__parent .tedi-sidenav-dropdown-item__trigger{padding-left:var(--dropdown-item-padding-x)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item.tedi-sidenav-dropdown-group__parent:before,.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item.tedi-sidenav-dropdown-group__parent:after{display:none}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item.tedi-sidenav-dropdown-group__item .tedi-sidenav-dropdown-item__trigger{padding-left:calc(var(--dropdown-item-padding-x) + var(--_sidenav-tree-container) + var(--_gap))}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item.tedi-sidenav-dropdown-group__item:after{top:50%;width:var(--_sidenav-tree-branch-width);height:var(--_sidenav-tree-trunk-width);background-color:var(--navigation-vertical-tree-neutral-default);transform:translateY(-50%)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item.tedi-sidenav-dropdown-group__item:before{width:var(--_sidenav-tree-trunk-width);height:100%;background-color:var(--navigation-vertical-tree-neutral-default)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item.tedi-sidenav-dropdown-group__item:last-of-type:before{height:50%}.tedi-sidenav .tedi-sidenav-back{min-height:var(--_sidenav-item-min-height);padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-left);font-size:var(--_sidenav-item-font-size);font-size:inherit;line-height:var(--_sidenav-item-line-height);color:var(--navigation-vertical-item-text);text-align:start;cursor:pointer;background:transparent;border:0;border-bottom:var(--borders-01) solid var(--navigation-vertical-item-border)}.tedi-sidenav .tedi-sidenav-back:hover{background:var(--navigation-vertical-item-background-hover)}.tedi-sidenav .tedi-sidenav-back tedi-icon{font-size:var(--navigation-vertical-item-icon)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4906
4926
|
}
|
|
4907
4927
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SideNavComponent, decorators: [{
|
|
4908
4928
|
type: Component,
|
|
4909
4929
|
args: [{ selector: "nav[tedi-sidenav]", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [IconComponent, TediTranslationPipe], host: {
|
|
4910
4930
|
"[class]": "classes()",
|
|
4911
|
-
}, template: "@if (!sidenavService.isMobile() && collapsible()) {\n <button\n class=\"tedi-sidenav__collapse\"\n (click)=\"sidenavService.handleCollapse()\"\n [attr.aria-label]=\"'toggle' | tediTranslate: !sidenavService.isCollapsed()\"\n >\n <tedi-icon\n [name]=\"\n sidenavService.isCollapsed() ? 'left_panel_open' : 'right_panel_open'\n \"\n color=\"brand\"\n />\n </button>\n}\n@if (sidenavService.isMobileItemOpen()) {\n <button\n class=\"tedi-sidenav-back\"\n (click)=\"sidenavService.handleGoToMainMenu()\"\n >\n <tedi-icon name=\"arrow_back\" color=\"white\" />\n {{ \"sidenav.backToMainMenu\" | tediTranslate }}\n </button>\n}\n<div role=\"menubar\">\n <ng-content></ng-content>\n</div>\n", styles: [":root{--_sidenav-tree-container: 24px;--_sidenav-tree-trunk-width: 2px;--_sidenav-tree-branch-width: 10px;--_sidenav-tree-bullet-size: 8px;--_sidenav-tree-left-padding: ( var(--_sidenav-tree-container) - var(--_sidenav-tree-trunk-width) ) / 2;--_sidenav-dropdown-collapsed-min-width: 16.5rem;--_sidenav-dropdown-collapsed-left: 4px;--_sidenav-dropdown-item-large-height: 48px;--_sidenav-dropdown-item-medium-height: 44px;--_sidenav-dropdown-item-small-height: 36px;--_sidenav-dropdown-item-collapsed-height: 40px;--_sidenav-collapsed-text-width: 4.5rem;--_sidenav-transition-duration: .3s}.tedi-sidenav{position:relative;z-index:var(--z-index-sidenav);display:flex;flex-direction:column;width:var(--navigation-vertical-item-width-default);max-width:100%;min-height:100%;background-color:var(--navigation-vertical-item-background-default);transition:all var(--_sidenav-transition-duration) ease}.tedi-sidenav__collapse{position:absolute;top:var(--navigation-vertical-item-padding-y);right:0;z-index:var(--z-index-sidenav);display:flex;align-items:center;justify-content:center;width:var(--button-sm-height);height:var(--button-sm-height);padding:var(--button-md-icon-padding);cursor:pointer;background:var(--button-floating-secondary-background-default);border:var(--borders-01) solid var(--button-floating-secondary-border-default);border-radius:var(--button-radius-default);transform:translate(50%)}.tedi-sidenav__collapse:hover{color:var(--button-floating-secondary-text-hover);background:var(--button-floating-secondary-background-hover);border:var(--borders-01) solid var(--button-floating-secondary-border-hover)}.tedi-sidenav__collapse:active{color:var(--button-floating-secondary-text-active);background:var(--button-floating-secondary-background-active);border:var(--borders-01) solid var(--button-floating-secondary-border-active)}.tedi-sidenav__collapse:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-sidenav--hidden{display:none}.tedi-sidenav--large{--_sidenav-dropdown-item-height: var(--navigation-vertical-dropdown-item);--_sidenav-item-min-height: var( --navigation-vertical-item-min-height-large );--_sidenav-item-font-size: var(--navigation-vertical-text-size);--_sidenav-item-line-height: var(--body-regular-line-height);--_sidenav-item-padding-y: var(--navigation-vertical-item-padding-y);--_sidenav-item-padding-right: var( --navigation-vertical-item-padding-right );--_sidenav-item-padding-left: var( --navigation-vertical-item-padding-left-level-1 );--_sidenav-item-icon-size: var(--navigation-vertical-item-icon);--_sidenav-item-caret-size: var(--navigation-vertical-item-icon)}.tedi-sidenav--medium{--_sidenav-dropdown-item-height: var(--navigation-vertical-dropdown-item);--_sidenav-item-min-height: var( --navigation-vertical-item-min-height-medium );--_sidenav-item-font-size: var(--navigation-vertical-text-size-sm);--_sidenav-item-line-height: var(--body-small-regular-line-height);--_sidenav-item-padding-y: var(--navigation-vertical-item-padding-y-md);--_sidenav-item-padding-right: var( --navigation-vertical-item-padding-right );--_sidenav-item-padding-left: var( --navigation-vertical-item-padding-left-level-1 );--_sidenav-item-icon-size: var(--navigation-vertical-item-icon-md);--_sidenav-item-caret-size: var(--navigation-vertical-item-icon-md)}.tedi-sidenav--small{--_sidenav-dropdown-item-height: var(--navigation-vertical-dropdown-item);--_sidenav-item-min-height: var( --navigation-vertical-item-min-height-small );--_sidenav-item-font-size: var(--navigation-vertical-text-size-sm);--_sidenav-item-line-height: var(--body-small-regular-line-height);--_sidenav-item-padding-y: var(--navigation-vertical-item-padding-y-sm);--_sidenav-item-padding-right: var( --navigation-vertical-item-padding-right );--_sidenav-item-padding-left: var( --navigation-vertical-item-padding-left-level-1 );--_sidenav-item-icon-size: var(--navigation-vertical-item-icon-sm);--_sidenav-item-caret-size: var(--navigation-vertical-item-icon-sm)}.tedi-sidenav--dividers .tedi-sidenav-item{border-bottom:var(--borders-01) solid var(--navigation-vertical-item-border)}.tedi-sidenav--dividers .tedi-sidenav-item:last-of-type{border-bottom:0}.tedi-sidenav--mobile .tedi-sidenav-item .tedi-sidenav-dropdown{transition:none}.tedi-sidenav--mobile .tedi-sidenav-item .tedi-sidenav-item__text{white-space:wrap;animation:none}.tedi-sidenav--mobile-item-open .tedi-sidenav-group-title{display:none}.tedi-sidenav--mobile-item-open .tedi-sidenav-item{border-bottom:0}.tedi-sidenav--mobile-item-open .tedi-sidenav-item .tedi-sidenav-group-title{display:block}.tedi-sidenav--collapsed{--_sidenav-dropdown-item-height: var( --_sidenav-dropdown-item-collapsed-height );--_sidenav-item-icon-size: var(--navigation-vertical-item-icon);--_sidenav-item-caret-size: var(--navigation-vertical-item-icon-sm);width:var(--navigation-vertical-item-width-collapsed)}.tedi-sidenav--collapsed .tedi-sidenav-item{--_sidenav-item-font-size: var(--navigation-vertical-text-size-sm)}.tedi-sidenav--collapsed .tedi-sidenav-item .tedi-sidenav-item__title{flex-direction:column;min-height:var(--navigation-vertical-item-min-height-large);padding:var(--navigation-vertical-item-padding-y) var(--navigation-vertical-item-padding-x-sm);text-align:center}.tedi-sidenav--collapsed .tedi-sidenav-item .tedi-sidenav-item__caret{position:absolute;top:var(--_sidenav-item-padding-y);right:var(--_sidenav-item-padding-right);font-size:var(--size-03)}.tedi-sidenav--collapsed .tedi-sidenav-item .tedi-sidenav-item__caret[data-open=true]{transform:rotate(-90deg)}.tedi-sidenav--collapsed .tedi-sidenav-item .tedi-sidenav-item__text{max-width:var(--_sidenav-collapsed-text-width);white-space:nowrap;animation:none}.tedi-sidenav--collapsed .tedi-sidenav-group-title{border-bottom:var(--borders-01) solid var(--navigation-vertical-group-title-text)}.tedi-sidenav--collapsed .tedi-sidenav-group-title .tedi-sidenav-group-title__text{display:none}.tedi-sidenav--collapsed .tedi-sidenav-dropdown{position:absolute;top:0;left:calc(100% + var(--_sidenav-dropdown-collapsed-left));visibility:hidden;min-width:var(--_sidenav-dropdown-collapsed-min-width);background:var(--dropdown-item-default-background);border:var(--borders-01) solid var(--card-border-primary);border-radius:var(--form-select-area-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20);transition:none}.tedi-sidenav--collapsed .tedi-sidenav-dropdown--open{visibility:visible}.tedi-sidenav--collapsed .tedi-sidenav-dropdown .tedi-sidenav-group-title{border:0}.tedi-sidenav--collapsed .tedi-sidenav-dropdown .tedi-sidenav-group-title .tedi-sidenav-group-title__text{display:block;padding:var(--dropdown-group-label-padding-y) var(--dropdown-group-label-padding-x) var(--layout-grid-gutters-04) var(--dropdown-group-label-padding-x);font-size:14px;line-height:20px;color:var(--general-text-tertiary)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-item{--_gap: var(--dropdown-item-inner-spacing);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);color:var(--dropdown-item-default-text)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-item.tedi-sidenav-dropdown-item--selected,.tedi-sidenav--collapsed .tedi-sidenav-dropdown-item:hover{color:var(--dropdown-item-hover-text);background-color:var(--dropdown-item-hover-background)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-item:before,.tedi-sidenav--collapsed .tedi-sidenav-dropdown-item:after{width:0;height:0}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item{padding-left:calc(var(--dropdown-item-padding-x) + var(--_sidenav-tree-container) + var(--_gap))}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item:after{top:50%;width:var(--_sidenav-tree-branch-width);height:var(--_sidenav-tree-trunk-width);background-color:var(--navigation-vertical-tree-neutral-default);transform:translateY(-50%)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item:before{width:var(--_sidenav-tree-trunk-width);height:100%;background-color:var(--navigation-vertical-tree-neutral-default)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item:first-of-type{padding-left:var(--dropdown-item-padding-x)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item:first-of-type:after{width:0;height:0}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item:first-of-type:not(:only-child):after,.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item:first-of-type:not(:only-child):before{width:0;height:0}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item:last-of-type:before{height:50%}.tedi-sidenav .tedi-sidenav-back{min-height:var(--_sidenav-item-min-height);padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-left);font-size:var(--_sidenav-item-font-size);font-size:inherit;line-height:var(--_sidenav-item-line-height);color:var(--navigation-vertical-item-text);text-align:start;cursor:pointer;background:transparent;border:0;border-bottom:var(--borders-01) solid var(--navigation-vertical-item-border)}.tedi-sidenav .tedi-sidenav-back:hover{background:var(--navigation-vertical-item-background-hover)}.tedi-sidenav .tedi-sidenav-back tedi-icon{font-size:var(--navigation-vertical-item-icon)}\n"] }]
|
|
4931
|
+
}, template: "@if (!sidenavService.isMobile() && collapsible()) {\n <button\n class=\"tedi-sidenav__collapse\"\n (click)=\"sidenavService.handleCollapse()\"\n [attr.aria-label]=\"'toggle' | tediTranslate: !sidenavService.isCollapsed()\"\n >\n <tedi-icon\n [name]=\"\n sidenavService.isCollapsed() ? 'left_panel_open' : 'right_panel_open'\n \"\n color=\"brand\"\n />\n </button>\n}\n@if (sidenavService.isMobileItemOpen()) {\n <button\n class=\"tedi-sidenav-back\"\n (click)=\"handleBackToMainMenu()\"\n >\n <tedi-icon name=\"arrow_back\" color=\"white\" />\n {{ \"sidenav.backToMainMenu\" | tediTranslate }}\n </button>\n}\n<ul class=\"tedi-sidenav__list\">\n <ng-content></ng-content>\n</ul>\n", styles: [":root{--_sidenav-tree-container: 24px;--_sidenav-tree-trunk-width: 2px;--_sidenav-tree-branch-width: 10px;--_sidenav-tree-bullet-size: 8px;--_sidenav-tree-left-padding: ( var(--_sidenav-tree-container) - var(--_sidenav-tree-trunk-width) ) / 2;--_sidenav-dropdown-collapsed-min-width: 16.5rem;--_sidenav-dropdown-collapsed-left: 4px;--_sidenav-dropdown-item-large-height: 48px;--_sidenav-dropdown-item-medium-height: 44px;--_sidenav-dropdown-item-small-height: 36px;--_sidenav-dropdown-item-collapsed-height: 40px;--_sidenav-collapsed-text-width: 4.5rem;--_sidenav-transition-duration: .3s;--_sidenav-focus-ring: 0 0 0 1px var(--tedi-neutral-100), 0 0 0 3px var(--tedi-primary-400)}.tedi-sidenav__list{padding:0;margin:0;list-style:none}.tedi-sidenav{position:relative;z-index:var(--z-index-sidenav);display:flex;flex-direction:column;width:var(--navigation-vertical-item-width-default);max-width:100%;min-height:100%;background-color:var(--navigation-vertical-item-background-default);transition:all var(--_sidenav-transition-duration) ease}.tedi-sidenav__collapse{position:absolute;top:var(--navigation-vertical-item-padding-y);right:0;z-index:var(--z-index-sidenav);display:flex;align-items:center;justify-content:center;width:var(--button-sm-height);height:var(--button-sm-height);padding:var(--button-md-icon-padding);cursor:pointer;background:var(--button-floating-secondary-background-default);border:var(--borders-01) solid var(--button-floating-secondary-border-default);border-radius:var(--button-radius-default);transform:translate(50%)}.tedi-sidenav__collapse:hover{color:var(--button-floating-secondary-text-hover);background:var(--button-floating-secondary-background-hover);border:var(--borders-01) solid var(--button-floating-secondary-border-hover)}.tedi-sidenav__collapse:active{color:var(--button-floating-secondary-text-active);background:var(--button-floating-secondary-background-active);border:var(--borders-01) solid var(--button-floating-secondary-border-active)}.tedi-sidenav__collapse:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-sidenav--hidden{display:none}.tedi-sidenav--large{--_sidenav-dropdown-item-height: var(--navigation-vertical-dropdown-item);--_sidenav-item-min-height: var( --navigation-vertical-item-min-height-large );--_sidenav-item-font-size: var(--navigation-vertical-text-size);--_sidenav-item-line-height: var(--body-regular-line-height);--_sidenav-item-padding-y: var(--navigation-vertical-item-padding-y);--_sidenav-item-padding-right: var( --navigation-vertical-item-padding-right );--_sidenav-item-padding-left: var( --navigation-vertical-item-padding-left-level-1 );--_sidenav-item-icon-size: var(--navigation-vertical-item-icon);--_sidenav-item-caret-size: var(--navigation-vertical-item-icon)}.tedi-sidenav--medium{--_sidenav-dropdown-item-height: var(--navigation-vertical-dropdown-item);--_sidenav-item-min-height: var( --navigation-vertical-item-min-height-medium );--_sidenav-item-font-size: var(--navigation-vertical-text-size-sm);--_sidenav-item-line-height: var(--body-small-regular-line-height);--_sidenav-item-padding-y: var(--navigation-vertical-item-padding-y-md);--_sidenav-item-padding-right: var( --navigation-vertical-item-padding-right );--_sidenav-item-padding-left: var( --navigation-vertical-item-padding-left-level-1 );--_sidenav-item-icon-size: var(--navigation-vertical-item-icon-md);--_sidenav-item-caret-size: var(--navigation-vertical-item-icon-md)}.tedi-sidenav--small{--_sidenav-dropdown-item-height: var(--navigation-vertical-dropdown-item);--_sidenav-item-min-height: var( --navigation-vertical-item-min-height-small );--_sidenav-item-font-size: var(--navigation-vertical-text-size-sm);--_sidenav-item-line-height: var(--body-small-regular-line-height);--_sidenav-item-padding-y: var(--navigation-vertical-item-padding-y-sm);--_sidenav-item-padding-right: var( --navigation-vertical-item-padding-right );--_sidenav-item-padding-left: var( --navigation-vertical-item-padding-left-level-1 );--_sidenav-item-icon-size: var(--navigation-vertical-item-icon-sm);--_sidenav-item-caret-size: var(--navigation-vertical-item-icon-sm)}.tedi-sidenav--dividers tedi-sidenav-item>.tedi-sidenav-item{border-bottom:var(--borders-01) solid var(--navigation-vertical-item-border)}.tedi-sidenav--dividers tedi-sidenav-item:last-child>.tedi-sidenav-item{border-bottom:0}.tedi-sidenav--mobile .tedi-sidenav-item .tedi-sidenav-dropdown{transition:none}.tedi-sidenav--mobile .tedi-sidenav-item .tedi-sidenav-item__text{white-space:wrap;animation:none}.tedi-sidenav--mobile-item-open .tedi-sidenav-group-title{display:none}.tedi-sidenav--mobile-item-open .tedi-sidenav-item{border-bottom:0}.tedi-sidenav--mobile-item-open .tedi-sidenav-item .tedi-sidenav-group-title{display:block}.tedi-sidenav--collapsed{--_sidenav-dropdown-item-height: var( --_sidenav-dropdown-item-collapsed-height );--_sidenav-item-icon-size: var(--navigation-vertical-item-icon);--_sidenav-item-caret-size: var(--navigation-vertical-item-icon-sm);width:var(--navigation-vertical-item-width-collapsed)}.tedi-sidenav--collapsed tedi-tooltip-trigger{display:block;width:100%}.tedi-sidenav--collapsed .tedi-sidenav-item{--_sidenav-item-font-size: var(--navigation-vertical-text-size-sm)}.tedi-sidenav--collapsed .tedi-sidenav-item .tedi-sidenav-item__title{flex-direction:column;min-height:var(--navigation-vertical-item-min-height-large);padding:var(--navigation-vertical-item-padding-y) var(--navigation-vertical-item-padding-x-sm);text-align:center}.tedi-sidenav--collapsed .tedi-sidenav-item .tedi-sidenav-item__caret{position:absolute;top:var(--_sidenav-item-padding-y);right:var(--_sidenav-item-padding-right);font-size:var(--size-03)}.tedi-sidenav--collapsed .tedi-sidenav-item .tedi-sidenav-item__caret[data-open=true]{transform:rotate(-90deg)}.tedi-sidenav--collapsed .tedi-sidenav-item .tedi-sidenav-item__text{max-width:var(--_sidenav-collapsed-text-width);white-space:nowrap;animation:none}.tedi-sidenav--collapsed .tedi-sidenav-group-title{border-bottom:var(--borders-01) solid var(--navigation-vertical-group-title-text)}.tedi-sidenav--collapsed .tedi-sidenav-group-title .tedi-sidenav-group-title__text{display:none}.tedi-sidenav--collapsed .tedi-sidenav-dropdown{position:absolute;top:0;left:calc(100% + var(--_sidenav-dropdown-collapsed-left));visibility:hidden;min-width:var(--_sidenav-dropdown-collapsed-min-width);background:var(--dropdown-item-default-background);border:var(--borders-01) solid var(--card-border-primary);border-radius:var(--form-select-area-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20);transition:none}.tedi-sidenav--collapsed .tedi-sidenav-dropdown--open{visibility:visible}.tedi-sidenav--collapsed .tedi-sidenav-dropdown .tedi-sidenav-group-title{border:0}.tedi-sidenav--collapsed .tedi-sidenav-dropdown .tedi-sidenav-group-title .tedi-sidenav-group-title__text{display:block;padding:var(--dropdown-group-label-padding-y) var(--dropdown-group-label-padding-x) var(--layout-grid-gutters-04) var(--dropdown-group-label-padding-x);font-size:14px;line-height:20px;color:var(--general-text-tertiary)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-item{--_gap: var(--dropdown-item-inner-spacing);font-size:var(--body-regular-size);color:var(--dropdown-item-default-text)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-item__trigger{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-item__trigger:focus-visible{color:var(--dropdown-item-hover-text);outline:none;background-color:var(--dropdown-item-hover-background);box-shadow:var(--_sidenav-focus-ring)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-item.tedi-sidenav-dropdown-item--selected,.tedi-sidenav--collapsed .tedi-sidenav-dropdown-item:hover{color:var(--dropdown-item-hover-text);background-color:var(--dropdown-item-hover-background)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-item:before,.tedi-sidenav--collapsed .tedi-sidenav-dropdown-item:after{width:0;height:0}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group__parent-wrapper:before{display:none}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item.tedi-sidenav-dropdown-group__parent .tedi-sidenav-dropdown-item__trigger{padding-left:var(--dropdown-item-padding-x)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item.tedi-sidenav-dropdown-group__parent:before,.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item.tedi-sidenav-dropdown-group__parent:after{display:none}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item.tedi-sidenav-dropdown-group__item .tedi-sidenav-dropdown-item__trigger{padding-left:calc(var(--dropdown-item-padding-x) + var(--_sidenav-tree-container) + var(--_gap))}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item.tedi-sidenav-dropdown-group__item:after{top:50%;width:var(--_sidenav-tree-branch-width);height:var(--_sidenav-tree-trunk-width);background-color:var(--navigation-vertical-tree-neutral-default);transform:translateY(-50%)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item.tedi-sidenav-dropdown-group__item:before{width:var(--_sidenav-tree-trunk-width);height:100%;background-color:var(--navigation-vertical-tree-neutral-default)}.tedi-sidenav--collapsed .tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item.tedi-sidenav-dropdown-group__item:last-of-type:before{height:50%}.tedi-sidenav .tedi-sidenav-back{min-height:var(--_sidenav-item-min-height);padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-left);font-size:var(--_sidenav-item-font-size);font-size:inherit;line-height:var(--_sidenav-item-line-height);color:var(--navigation-vertical-item-text);text-align:start;cursor:pointer;background:transparent;border:0;border-bottom:var(--borders-01) solid var(--navigation-vertical-item-border)}.tedi-sidenav .tedi-sidenav-back:hover{background:var(--navigation-vertical-item-background-hover)}.tedi-sidenav .tedi-sidenav-back tedi-icon{font-size:var(--navigation-vertical-item-icon)}\n"] }]
|
|
4912
4932
|
}], ctorParameters: () => [{ type: SideNavService }] });
|
|
4913
4933
|
|
|
4914
4934
|
class SideNavDropdownItemComponent {
|
|
@@ -4925,6 +4945,16 @@ class SideNavDropdownItemComponent {
|
|
|
4925
4945
|
* Router link
|
|
4926
4946
|
*/
|
|
4927
4947
|
route = input();
|
|
4948
|
+
textContent = signal("");
|
|
4949
|
+
host = inject(ElementRef);
|
|
4950
|
+
ngAfterViewInit() {
|
|
4951
|
+
if (this.host.nativeElement) {
|
|
4952
|
+
const text = this.host.nativeElement.textContent?.trim();
|
|
4953
|
+
if (text) {
|
|
4954
|
+
this.textContent.set(text);
|
|
4955
|
+
}
|
|
4956
|
+
}
|
|
4957
|
+
}
|
|
4928
4958
|
classes = computed(() => {
|
|
4929
4959
|
const classList = ["tedi-sidenav-dropdown-item"];
|
|
4930
4960
|
if (this.selected()) {
|
|
@@ -4933,14 +4963,13 @@ class SideNavDropdownItemComponent {
|
|
|
4933
4963
|
return classList.join(" ");
|
|
4934
4964
|
});
|
|
4935
4965
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SideNavDropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4936
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SideNavDropdownItemComponent, isStandalone: true, selector: "tedi-sidenav-dropdown-item", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null } }, host: {
|
|
4966
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SideNavDropdownItemComponent, isStandalone: true, selector: "tedi-sidenav-dropdown-item", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: "<li [class]=\"classes()\">\n @if (href()) {\n <a [href]=\"href()\" class=\"tedi-sidenav-dropdown-item__trigger\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n } @else if (route()) {\n <a [routerLink]=\"route()\" class=\"tedi-sidenav-dropdown-item__trigger\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n } @else {\n <div class=\"tedi-sidenav-dropdown-item__trigger\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n }\n</li>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".tedi-sidenav-dropdown-item{--_padding-left: var(--navigation-vertical-item-padding-left-level-2);--_gap: var(--navigation-vertical-item-inner-spacing);position:relative;display:block;min-height:var(--_sidenav-dropdown-item-height);color:var(--navigation-vertical-item-text)}.tedi-sidenav-dropdown-item:hover{background:var(--navigation-vertical-item-background-hover)}.tedi-sidenav-dropdown-item--selected{font-weight:var(--body-bold-weight);background:var(--navigation-vertical-item-background-active)}.tedi-sidenav-dropdown-item__trigger{display:block;padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) calc(var(--_padding-left) + var(--_sidenav-tree-container) + var(--_gap));color:inherit;text-decoration:none;cursor:pointer}.tedi-sidenav-dropdown-item__trigger:focus-visible{outline:none;background:var(--navigation-vertical-item-background-focus);box-shadow:var(--_sidenav-focus-ring)}.tedi-sidenav-dropdown-item:before{position:absolute;top:0;left:calc(var(--_padding-left) + var(--_sidenav-tree-left-padding));width:var(--_sidenav-tree-trunk-width);height:100%;content:\"\";background-color:var(--navigation-vertical-tree-brand-default)}.tedi-sidenav-dropdown-item:after{position:absolute;top:50%;left:calc(var(--_padding-left) + var(--_sidenav-tree-left-padding));width:var(--_sidenav-tree-branch-width);height:var(--_sidenav-tree-trunk-width);content:\"\";background-color:var(--navigation-vertical-tree-brand-default);transform:translateY(-50%)}.tedi-sidenav-dropdown-item--parent .tedi-sidenav-dropdown-item__trigger{padding-left:var(--dropdown-item-padding-x)}.tedi-sidenav-dropdown-item--parent:before,.tedi-sidenav-dropdown-item--parent:after{display:none}tedi-sidenav-dropdown-item:last-child>.tedi-sidenav-dropdown-item:before,tedi-sidenav-dropdown-item:has(+tedi-sidenav-dropdown-group)>.tedi-sidenav-dropdown-item:before{height:50%}\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 });
|
|
4937
4967
|
}
|
|
4938
4968
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SideNavDropdownItemComponent, decorators: [{
|
|
4939
4969
|
type: Component,
|
|
4940
4970
|
args: [{ selector: "tedi-sidenav-dropdown-item", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [RouterLink, NgTemplateOutlet], host: {
|
|
4941
|
-
|
|
4942
|
-
|
|
4943
|
-
}, template: "@if (href()) {\n <a [href]=\"href()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n} @else if (route()) {\n <a [routerLink]=\"route()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n} @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".tedi-sidenav-dropdown-item{--_padding-left: var(--navigation-vertical-item-padding-left-level-2);--_gap: var(--navigation-vertical-item-inner-spacing);position:relative;display:block;min-height:var(--_sidenav-dropdown-item-height);padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) calc(var(--_padding-left) + var(--_sidenav-tree-container) + var(--_gap));color:var(--navigation-vertical-item-text);cursor:pointer}.tedi-sidenav-dropdown-item:hover{background:var(--navigation-vertical-item-background-hover)}.tedi-sidenav-dropdown-item--selected{font-weight:var(--body-bold-weight);background:var(--navigation-vertical-item-background-active)}.tedi-sidenav-dropdown-item:before{position:absolute;top:0;left:calc(var(--_padding-left) + var(--_sidenav-tree-left-padding));width:var(--_sidenav-tree-trunk-width);height:100%;content:\"\";background-color:var(--navigation-vertical-tree-brand-default)}.tedi-sidenav-dropdown-item:after{position:absolute;top:50%;left:calc(var(--_padding-left) + var(--_sidenav-tree-left-padding));width:var(--_sidenav-tree-branch-width);height:var(--_sidenav-tree-trunk-width);content:\"\";background-color:var(--navigation-vertical-tree-brand-default);transform:translateY(-50%)}.tedi-sidenav-dropdown-item--parent{padding-left:var(--dropdown-item-padding-x)}.tedi-sidenav-dropdown-item--parent:before,.tedi-sidenav-dropdown-item--parent:after{display:none}.tedi-sidenav-dropdown-item:last-of-type:before{height:50%}.tedi-sidenav-dropdown-item a{color:inherit;text-decoration:none}\n"] }]
|
|
4971
|
+
"style": "display: contents",
|
|
4972
|
+
}, template: "<li [class]=\"classes()\">\n @if (href()) {\n <a [href]=\"href()\" class=\"tedi-sidenav-dropdown-item__trigger\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n } @else if (route()) {\n <a [routerLink]=\"route()\" class=\"tedi-sidenav-dropdown-item__trigger\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n } @else {\n <div class=\"tedi-sidenav-dropdown-item__trigger\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n }\n</li>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".tedi-sidenav-dropdown-item{--_padding-left: var(--navigation-vertical-item-padding-left-level-2);--_gap: var(--navigation-vertical-item-inner-spacing);position:relative;display:block;min-height:var(--_sidenav-dropdown-item-height);color:var(--navigation-vertical-item-text)}.tedi-sidenav-dropdown-item:hover{background:var(--navigation-vertical-item-background-hover)}.tedi-sidenav-dropdown-item--selected{font-weight:var(--body-bold-weight);background:var(--navigation-vertical-item-background-active)}.tedi-sidenav-dropdown-item__trigger{display:block;padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) calc(var(--_padding-left) + var(--_sidenav-tree-container) + var(--_gap));color:inherit;text-decoration:none;cursor:pointer}.tedi-sidenav-dropdown-item__trigger:focus-visible{outline:none;background:var(--navigation-vertical-item-background-focus);box-shadow:var(--_sidenav-focus-ring)}.tedi-sidenav-dropdown-item:before{position:absolute;top:0;left:calc(var(--_padding-left) + var(--_sidenav-tree-left-padding));width:var(--_sidenav-tree-trunk-width);height:100%;content:\"\";background-color:var(--navigation-vertical-tree-brand-default)}.tedi-sidenav-dropdown-item:after{position:absolute;top:50%;left:calc(var(--_padding-left) + var(--_sidenav-tree-left-padding));width:var(--_sidenav-tree-branch-width);height:var(--_sidenav-tree-trunk-width);content:\"\";background-color:var(--navigation-vertical-tree-brand-default);transform:translateY(-50%)}.tedi-sidenav-dropdown-item--parent .tedi-sidenav-dropdown-item__trigger{padding-left:var(--dropdown-item-padding-x)}.tedi-sidenav-dropdown-item--parent:before,.tedi-sidenav-dropdown-item--parent:after{display:none}tedi-sidenav-dropdown-item:last-child>.tedi-sidenav-dropdown-item:before,tedi-sidenav-dropdown-item:has(+tedi-sidenav-dropdown-group)>.tedi-sidenav-dropdown-item:before{height:50%}\n"] }]
|
|
4944
4973
|
}] });
|
|
4945
4974
|
|
|
4946
4975
|
class SideNavGroupTitleComponent {
|
|
@@ -5195,16 +5224,18 @@ class SideNavItemComponent {
|
|
|
5195
5224
|
*/
|
|
5196
5225
|
route = input();
|
|
5197
5226
|
dropdown;
|
|
5198
|
-
textContent = signal(
|
|
5227
|
+
textContent = signal('');
|
|
5199
5228
|
sidenavService = inject(SideNavService);
|
|
5200
5229
|
host = inject(ElementRef);
|
|
5201
5230
|
renderer = inject(Renderer2);
|
|
5231
|
+
injector = inject(Injector);
|
|
5202
5232
|
eventListeners = [];
|
|
5203
5233
|
ngOnInit() {
|
|
5204
5234
|
this.sidenavService.registerItem(this);
|
|
5205
5235
|
}
|
|
5206
5236
|
ngOnDestroy() {
|
|
5207
5237
|
this.sidenavService.unregisterItem(this);
|
|
5238
|
+
this.eventListeners.forEach((unlisten) => unlisten());
|
|
5208
5239
|
}
|
|
5209
5240
|
ngAfterViewInit() {
|
|
5210
5241
|
const dropdown = this.dropdown;
|
|
@@ -5228,6 +5259,16 @@ class SideNavItemComponent {
|
|
|
5228
5259
|
}
|
|
5229
5260
|
}
|
|
5230
5261
|
}));
|
|
5262
|
+
this.eventListeners.push(this.renderer.listen("document", "keydown", (event) => {
|
|
5263
|
+
if (event.key === "Escape" && this.sidenavService.isCollapsed() && dropdown.open()) {
|
|
5264
|
+
dropdown.open.set(false);
|
|
5265
|
+
setTimeout(() => {
|
|
5266
|
+
const hostEl = this.host.nativeElement;
|
|
5267
|
+
const trigger = hostEl.querySelector('.tedi-sidenav-item__title');
|
|
5268
|
+
trigger?.focus();
|
|
5269
|
+
}, 0);
|
|
5270
|
+
}
|
|
5271
|
+
}));
|
|
5231
5272
|
}
|
|
5232
5273
|
classes = computed(() => {
|
|
5233
5274
|
const classList = ["tedi-sidenav-item"];
|
|
@@ -5243,10 +5284,30 @@ class SideNavItemComponent {
|
|
|
5243
5284
|
if (!this.dropdown) {
|
|
5244
5285
|
return;
|
|
5245
5286
|
}
|
|
5287
|
+
const wasOpen = this.dropdown.open();
|
|
5288
|
+
const dropdown = this.dropdown;
|
|
5246
5289
|
this.dropdown.open.update((prev) => !prev);
|
|
5290
|
+
if (this.sidenavService.isCollapsed() || this.sidenavService.isMobile()) {
|
|
5291
|
+
afterNextRender(() => {
|
|
5292
|
+
if (!wasOpen) {
|
|
5293
|
+
// Opening - focus first item in dropdown
|
|
5294
|
+
const dropdownEl = dropdown.element();
|
|
5295
|
+
const openDropdown = dropdownEl?.querySelector('ul.tedi-sidenav-dropdown');
|
|
5296
|
+
const allTriggers = openDropdown?.querySelectorAll('.tedi-sidenav-dropdown-item__trigger');
|
|
5297
|
+
const firstFocusable = Array.from(allTriggers ?? []).find((el) => el.offsetParent !== null);
|
|
5298
|
+
firstFocusable?.focus();
|
|
5299
|
+
}
|
|
5300
|
+
else {
|
|
5301
|
+
// Closing - focus on parent item
|
|
5302
|
+
const hostEl = this.host.nativeElement;
|
|
5303
|
+
const trigger = hostEl.querySelector('.tedi-sidenav-item__title');
|
|
5304
|
+
trigger?.focus();
|
|
5305
|
+
}
|
|
5306
|
+
}, { injector: this.injector });
|
|
5307
|
+
}
|
|
5247
5308
|
}
|
|
5248
5309
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SideNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5249
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SideNavItemComponent, isStandalone: true, selector: "tedi-sidenav-item", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null } }, host: {
|
|
5310
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SideNavItemComponent, isStandalone: true, selector: "tedi-sidenav-item", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents" }, queries: [{ propertyName: "dropdown", first: true, predicate: i0.forwardRef(() => SideNavDropdownComponent), descendants: true }], ngImport: i0, template: "<li [class]=\"classes()\">\n @if (sidenavService.isMobile()) {\n @if (sidenavService.isMobileItemOpen() && dropdown?.open()) {\n <ng-container *ngIf=\"!href() && !route(); else mobileLink\">\n <tedi-sidenav-group-title>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </tedi-sidenav-group-title>\n </ng-container>\n <ng-template #mobileLink>\n <ng-container *ngIf=\"route(); else mobileHref\">\n <a class=\"tedi-sidenav-item__link\" [routerLink]=\"route()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n </ng-container>\n <ng-template #mobileHref>\n <a class=\"tedi-sidenav-item__link\" [href]=\"href()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n </ng-template>\n </ng-template>\n } @else {\n <div class=\"tedi-sidenav-item__trigger\">\n <ng-container *ngTemplateOutlet=\"buttonOrLink\"></ng-container>\n </div>\n }\n } @else if (sidenavService.tooltipEnabled()) {\n <tedi-tooltip position=\"right\">\n <tedi-tooltip-trigger>\n <div class=\"tedi-sidenav-item__trigger\">\n <ng-container *ngTemplateOutlet=\"buttonOrLink\"></ng-container>\n </div>\n </tedi-tooltip-trigger>\n <tedi-tooltip-content position=\"right\">\n {{ textContent() }}\n </tedi-tooltip-content>\n </tedi-tooltip>\n } @else {\n <div class=\"tedi-sidenav-item__trigger\">\n <ng-container *ngTemplateOutlet=\"buttonOrLink\"></ng-container>\n </div>\n }\n\n <ng-content select=\"tedi-sidenav-dropdown\"></ng-content>\n</li>\n\n<ng-template #buttonOrLink>\n <ng-container *ngIf=\"!href() && !route(); else hasLink\">\n <button class=\"tedi-sidenav-item__title\" (click)=\"toggleDropdown()\" [attr.aria-expanded]=\"dropdown?.open()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n @if (dropdown) {\n <tedi-icon\n name=\"expand_more\"\n class=\"tedi-sidenav-item__caret\"\n color=\"white\"\n [attr.data-open]=\"dropdown.open() ? 'true' : 'false'\"\n />\n }\n </button>\n </ng-container>\n <ng-template #hasLink>\n <ng-container\n *ngIf=\"\n (dropdown && sidenavService.isCollapsed()) ||\n (dropdown && sidenavService.isMobile());\n else plainLink\n \"\n >\n <button class=\"tedi-sidenav-item__title\" (click)=\"toggleDropdown()\" [attr.aria-expanded]=\"dropdown.open()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <tedi-icon\n name=\"expand_more\"\n class=\"tedi-sidenav-item__caret\"\n color=\"white\"\n [attr.data-open]=\"dropdown.open() ? 'true' : 'false'\"\n />\n </button>\n </ng-container>\n <ng-template #plainLink>\n @if (route()) {\n <a class=\"tedi-sidenav-item__title\" [routerLink]=\"route()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n } @else {\n <a class=\"tedi-sidenav-item__title\" [href]=\"href()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n }\n @if (dropdown) {\n <button\n class=\"tedi-sidenav-item__caret-button\"\n (click)=\"toggleDropdown()\"\n [attr.aria-expanded]=\"dropdown.open()\"\n >\n <span class=\"sr-only\">{{ 'sidenav.toggleSubmenu' | tediTranslate: textContent(): dropdown.open() }}</span>\n <div class=\"tedi-sidenav-item__caret-container\">\n <tedi-icon\n name=\"expand_more\"\n class=\"tedi-sidenav-item__caret\"\n color=\"white\"\n [attr.data-open]=\"dropdown.open() ? 'true' : 'false'\"\n />\n </div>\n </button>\n }\n </ng-template>\n </ng-template>\n</ng-template>\n\n<ng-template #content>\n @if (icon(); as icon) {\n @if (!(sidenavService.isMobileItemOpen() && dropdown?.open())) {\n <tedi-icon [name]=\"icon\" color=\"white\" class=\"tedi-sidenav-item__icon\" />\n }\n }\n <span class=\"tedi-sidenav-item__text\">\n <ng-content></ng-content>\n </span>\n</ng-template>\n", styles: [".tedi-sidenav-item{position:relative;display:flex;flex-direction:column;font-size:var(--_sidenav-item-font-size);line-height:var(--_sidenav-item-line-height)}.tedi-sidenav-item--hidden{display:none}.tedi-sidenav-item--selected .tedi-sidenav-item__trigger{background:var(--navigation-vertical-item-background-active)}.tedi-sidenav-item--selected .tedi-sidenav-item__text{font-weight:var(--body-bold-weight)}.tedi-sidenav-item__trigger{--_gap: var(--navigation-vertical-item-inner-spacing);position:relative;display:flex;gap:var(--_gap);width:100%;cursor:pointer}.tedi-sidenav-item__trigger:hover{background:var(--navigation-vertical-item-background-hover)}.tedi-sidenav-item__trigger:has(>.tedi-sidenav-item__caret-button:hover){background:transparent}.tedi-sidenav-item__title{display:flex;gap:var(--_gap);align-items:center;width:100%;min-height:var(--_sidenav-item-min-height);padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-left);font-size:inherit;color:var(--navigation-vertical-item-text);text-align:start;text-decoration:none;cursor:pointer;background:transparent;border:0}.tedi-sidenav-item__title:focus-visible{position:relative;z-index:1;outline:none;background:var(--navigation-vertical-item-background-focus);box-shadow:var(--_sidenav-focus-ring)}.tedi-sidenav-item__title:not(:only-child){max-width:calc(100% - var(--_sidenav-item-padding-right) - var(--_sidenav-item-caret-size) - var(--_gap));padding-right:0}.tedi-sidenav-item__icon{font-size:var(--_sidenav-item-icon-size)!important}.tedi-sidenav-item__caret-button{display:flex;place-items:center center;min-height:var(--_sidenav-item-min-height);padding:0;font-size:inherit;cursor:pointer;background:transparent;border:0}.tedi-sidenav-item__caret-button:hover .tedi-sidenav-item__caret-container{background-color:var(--navigation-vertical-item-background-arrow-button-active)}.tedi-sidenav-item__caret-button:focus-visible{position:relative;z-index:1;outline:none}.tedi-sidenav-item__caret-button:focus-visible .tedi-sidenav-item__caret-container{box-shadow:var(--_sidenav-focus-ring)}.tedi-sidenav-item__caret-button:last-child{padding-right:var(--_sidenav-item-padding-right)}.tedi-sidenav-item__caret-container{display:flex;align-items:center;justify-content:center;width:fit-content;height:fit-content;border-radius:var(--button-radius-sm)}.tedi-sidenav-item__caret{margin-left:auto;font-size:var(--_sidenav-item-caret-size)!important;transition:transform var(--_sidenav-transition-duration) ease}.tedi-sidenav-item__caret[data-open=true]{transform:rotate(180deg)}.tedi-sidenav-item__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:enable-wrap 0s var(--_sidenav-transition-duration) forwards}.tedi-sidenav-item__link{padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-left);color:var(--navigation-vertical-item-text);text-decoration:none}.tedi-sidenav-item__link:hover{background:var(--navigation-vertical-item-background-hover)}.tedi-sidenav-item__link:focus-visible{position:relative;z-index:1;outline:none;background:var(--navigation-vertical-item-background-focus);box-shadow:var(--_sidenav-focus-ring)}.tedi-sidenav-item__link .tedi-sidenav-item__text{white-space:wrap}@keyframes enable-wrap{to{max-width:none;white-space:normal}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SideNavGroupTitleComponent, selector: "tedi-sidenav-group-title" }, { kind: "component", type: TooltipComponent, selector: "tedi-tooltip", inputs: ["position", "preventOverflow", "openWith", "appendTo", "timeoutDelay"] }, { kind: "component", type: TooltipTriggerComponent, selector: "tedi-tooltip-trigger" }, { kind: "component", type: TooltipContentComponent, selector: "tedi-tooltip-content", inputs: ["maxWidth"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5250
5311
|
}
|
|
5251
5312
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SideNavItemComponent, decorators: [{
|
|
5252
5313
|
type: Component,
|
|
@@ -5259,10 +5320,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
5259
5320
|
TooltipComponent,
|
|
5260
5321
|
TooltipTriggerComponent,
|
|
5261
5322
|
TooltipContentComponent,
|
|
5323
|
+
TediTranslationPipe,
|
|
5262
5324
|
], host: {
|
|
5263
|
-
|
|
5264
|
-
|
|
5265
|
-
}, template: "@if (sidenavService.isMobile()) {\n @if (sidenavService.isMobileItemOpen() && dropdown?.open()) {\n <ng-container *ngIf=\"!href() && !route(); else mobileLink\">\n <tedi-sidenav-group-title>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </tedi-sidenav-group-title>\n </ng-container>\n <ng-template #mobileLink>\n <ng-container *ngIf=\"route(); else mobileHref\">\n <a class=\"tedi-sidenav-item__link\" [routerLink]=\"route()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n </ng-container>\n <ng-template #mobileHref>\n <a class=\"tedi-sidenav-item__link\" [href]=\"href()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n </ng-template>\n </ng-template>\n } @else {\n <div class=\"tedi-sidenav-item__trigger\">\n <ng-container *ngTemplateOutlet=\"buttonOrLink\"></ng-container>\n </div>\n }\n} @else if (sidenavService.tooltipEnabled()) {\n <tedi-tooltip position=\"right\">\n <tedi-tooltip-trigger class=\"tedi-sidenav-item__trigger\">\n <ng-container *ngTemplateOutlet=\"buttonOrLink\"></ng-container>\n </tedi-tooltip-trigger>\n <tedi-tooltip-content position=\"right\">\n {{ textContent() }}\n </tedi-tooltip-content>\n </tedi-tooltip>\n} @else {\n <div class=\"tedi-sidenav-item__trigger\">\n <ng-container *ngTemplateOutlet=\"buttonOrLink\"></ng-container>\n </div>\n}\n\n<ng-template #buttonOrLink>\n <ng-container *ngIf=\"!href() && !route(); else hasLink\">\n <button class=\"tedi-sidenav-item__title\" (click)=\"toggleDropdown()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n @if (dropdown) {\n <tedi-icon\n name=\"expand_more\"\n class=\"tedi-sidenav-item__caret\"\n color=\"white\"\n [attr.data-open]=\"dropdown.open() ? 'true' : 'false'\"\n />\n }\n </button>\n </ng-container>\n <ng-template #hasLink>\n <ng-container\n *ngIf=\"\n (dropdown && sidenavService.isCollapsed()) ||\n (dropdown && sidenavService.isMobile());\n else plainLink\n \"\n >\n <button class=\"tedi-sidenav-item__title\" (click)=\"toggleDropdown()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <tedi-icon\n name=\"expand_more\"\n class=\"tedi-sidenav-item__caret\"\n color=\"white\"\n [attr.data-open]=\"dropdown.open() ? 'true' : 'false'\"\n />\n </button>\n </ng-container>\n <ng-template #plainLink>\n <ng-container *ngIf=\"route(); else normalHref\">\n <a class=\"tedi-sidenav-item__title\" [routerLink]=\"route()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n </ng-container>\n <ng-template #normalHref>\n <a class=\"tedi-sidenav-item__title\" [href]=\"href()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n </ng-template>\n @if (dropdown) {\n <button\n class=\"tedi-sidenav-item__caret-button\"\n (click)=\"toggleDropdown()\"\n >\n <div class=\"tedi-sidenav-item__caret-container\">\n <tedi-icon\n name=\"expand_more\"\n class=\"tedi-sidenav-item__caret\"\n color=\"white\"\n [attr.data-open]=\"dropdown.open() ? 'true' : 'false'\"\n />\n </div>\n </button>\n }\n </ng-template>\n </ng-template>\n</ng-template>\n\n<ng-template #content>\n @if (icon(); as icon) {\n @if (!(sidenavService.isMobileItemOpen() && dropdown?.open())) {\n <tedi-icon [name]=\"icon\" color=\"white\" class=\"tedi-sidenav-item__icon\" />\n }\n }\n <span class=\"tedi-sidenav-item__text\">\n <ng-content></ng-content>\n </span>\n</ng-template>\n\n<ng-content select=\"tedi-sidenav-dropdown\"></ng-content>\n", styles: [".tedi-sidenav-item{position:relative;display:flex;flex-direction:column;font-size:var(--_sidenav-item-font-size);line-height:var(--_sidenav-item-line-height)}.tedi-sidenav-item--hidden{display:none}.tedi-sidenav-item--selected .tedi-sidenav-item__trigger{background:var(--navigation-vertical-item-background-active)}.tedi-sidenav-item--selected .tedi-sidenav-item__text{font-weight:var(--body-bold-weight)}.tedi-sidenav-item__trigger{--_gap: var(--navigation-vertical-item-inner-spacing);position:relative;display:flex;gap:var(--_gap);width:100%;cursor:pointer}.tedi-sidenav-item__trigger:hover{background:var(--navigation-vertical-item-background-hover)}.tedi-sidenav-item__trigger:has(>.tedi-sidenav-item__caret-button:hover){background:transparent}.tedi-sidenav-item__title{display:flex;gap:var(--_gap);align-items:center;width:100%;min-height:var(--_sidenav-item-min-height);padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-left);font-size:inherit;color:var(--navigation-vertical-item-text);text-align:start;text-decoration:none;cursor:pointer;background:transparent;border:0}.tedi-sidenav-item__title:focus-visible{outline:var(--borders-01) solid var(--tedi-neutral-100);outline-offset:-2px}.tedi-sidenav-item__title:not(:only-child){max-width:calc(100% - var(--_sidenav-item-padding-right) - var(--_sidenav-item-caret-size) - var(--_gap));padding-right:0}.tedi-sidenav-item__icon{font-size:var(--_sidenav-item-icon-size)!important}.tedi-sidenav-item__caret-button{display:flex;place-items:center center;min-height:var(--_sidenav-item-min-height);padding:0;font-size:inherit;cursor:pointer;background:transparent;border:0}.tedi-sidenav-item__caret-button:hover .tedi-sidenav-item__caret-container{background-color:var(--navigation-vertical-item-background-arrow-button-active)}.tedi-sidenav-item__caret-button:focus-visible .tedi-sidenav-item__caret-container{outline:var(--borders-02) solid var(--tedi-neutral-100);outline-offset:var(--borders-01)}.tedi-sidenav-item__caret-button:last-child{padding-right:var(--_sidenav-item-padding-right)}.tedi-sidenav-item__caret-container{display:flex;align-items:center;justify-content:center;width:fit-content;height:fit-content;border-radius:var(--button-radius-sm)}.tedi-sidenav-item__caret{margin-left:auto;font-size:var(--_sidenav-item-caret-size)!important;transition:transform var(--_sidenav-transition-duration) ease}.tedi-sidenav-item__caret[data-open=true]{transform:rotate(180deg)}.tedi-sidenav-item__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:enable-wrap 0s var(--_sidenav-transition-duration) forwards}.tedi-sidenav-item__link{padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-left);color:var(--navigation-vertical-item-text);text-decoration:none}.tedi-sidenav-item__link:hover{background:var(--navigation-vertical-item-background-hover)}.tedi-sidenav-item__link .tedi-sidenav-item__text{white-space:wrap}@keyframes enable-wrap{to{max-width:none;white-space:normal}}\n"] }]
|
|
5325
|
+
"style": "display: contents",
|
|
5326
|
+
}, template: "<li [class]=\"classes()\">\n @if (sidenavService.isMobile()) {\n @if (sidenavService.isMobileItemOpen() && dropdown?.open()) {\n <ng-container *ngIf=\"!href() && !route(); else mobileLink\">\n <tedi-sidenav-group-title>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </tedi-sidenav-group-title>\n </ng-container>\n <ng-template #mobileLink>\n <ng-container *ngIf=\"route(); else mobileHref\">\n <a class=\"tedi-sidenav-item__link\" [routerLink]=\"route()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n </ng-container>\n <ng-template #mobileHref>\n <a class=\"tedi-sidenav-item__link\" [href]=\"href()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n </ng-template>\n </ng-template>\n } @else {\n <div class=\"tedi-sidenav-item__trigger\">\n <ng-container *ngTemplateOutlet=\"buttonOrLink\"></ng-container>\n </div>\n }\n } @else if (sidenavService.tooltipEnabled()) {\n <tedi-tooltip position=\"right\">\n <tedi-tooltip-trigger>\n <div class=\"tedi-sidenav-item__trigger\">\n <ng-container *ngTemplateOutlet=\"buttonOrLink\"></ng-container>\n </div>\n </tedi-tooltip-trigger>\n <tedi-tooltip-content position=\"right\">\n {{ textContent() }}\n </tedi-tooltip-content>\n </tedi-tooltip>\n } @else {\n <div class=\"tedi-sidenav-item__trigger\">\n <ng-container *ngTemplateOutlet=\"buttonOrLink\"></ng-container>\n </div>\n }\n\n <ng-content select=\"tedi-sidenav-dropdown\"></ng-content>\n</li>\n\n<ng-template #buttonOrLink>\n <ng-container *ngIf=\"!href() && !route(); else hasLink\">\n <button class=\"tedi-sidenav-item__title\" (click)=\"toggleDropdown()\" [attr.aria-expanded]=\"dropdown?.open()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n @if (dropdown) {\n <tedi-icon\n name=\"expand_more\"\n class=\"tedi-sidenav-item__caret\"\n color=\"white\"\n [attr.data-open]=\"dropdown.open() ? 'true' : 'false'\"\n />\n }\n </button>\n </ng-container>\n <ng-template #hasLink>\n <ng-container\n *ngIf=\"\n (dropdown && sidenavService.isCollapsed()) ||\n (dropdown && sidenavService.isMobile());\n else plainLink\n \"\n >\n <button class=\"tedi-sidenav-item__title\" (click)=\"toggleDropdown()\" [attr.aria-expanded]=\"dropdown.open()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <tedi-icon\n name=\"expand_more\"\n class=\"tedi-sidenav-item__caret\"\n color=\"white\"\n [attr.data-open]=\"dropdown.open() ? 'true' : 'false'\"\n />\n </button>\n </ng-container>\n <ng-template #plainLink>\n @if (route()) {\n <a class=\"tedi-sidenav-item__title\" [routerLink]=\"route()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n } @else {\n <a class=\"tedi-sidenav-item__title\" [href]=\"href()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n }\n @if (dropdown) {\n <button\n class=\"tedi-sidenav-item__caret-button\"\n (click)=\"toggleDropdown()\"\n [attr.aria-expanded]=\"dropdown.open()\"\n >\n <span class=\"sr-only\">{{ 'sidenav.toggleSubmenu' | tediTranslate: textContent(): dropdown.open() }}</span>\n <div class=\"tedi-sidenav-item__caret-container\">\n <tedi-icon\n name=\"expand_more\"\n class=\"tedi-sidenav-item__caret\"\n color=\"white\"\n [attr.data-open]=\"dropdown.open() ? 'true' : 'false'\"\n />\n </div>\n </button>\n }\n </ng-template>\n </ng-template>\n</ng-template>\n\n<ng-template #content>\n @if (icon(); as icon) {\n @if (!(sidenavService.isMobileItemOpen() && dropdown?.open())) {\n <tedi-icon [name]=\"icon\" color=\"white\" class=\"tedi-sidenav-item__icon\" />\n }\n }\n <span class=\"tedi-sidenav-item__text\">\n <ng-content></ng-content>\n </span>\n</ng-template>\n", styles: [".tedi-sidenav-item{position:relative;display:flex;flex-direction:column;font-size:var(--_sidenav-item-font-size);line-height:var(--_sidenav-item-line-height)}.tedi-sidenav-item--hidden{display:none}.tedi-sidenav-item--selected .tedi-sidenav-item__trigger{background:var(--navigation-vertical-item-background-active)}.tedi-sidenav-item--selected .tedi-sidenav-item__text{font-weight:var(--body-bold-weight)}.tedi-sidenav-item__trigger{--_gap: var(--navigation-vertical-item-inner-spacing);position:relative;display:flex;gap:var(--_gap);width:100%;cursor:pointer}.tedi-sidenav-item__trigger:hover{background:var(--navigation-vertical-item-background-hover)}.tedi-sidenav-item__trigger:has(>.tedi-sidenav-item__caret-button:hover){background:transparent}.tedi-sidenav-item__title{display:flex;gap:var(--_gap);align-items:center;width:100%;min-height:var(--_sidenav-item-min-height);padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-left);font-size:inherit;color:var(--navigation-vertical-item-text);text-align:start;text-decoration:none;cursor:pointer;background:transparent;border:0}.tedi-sidenav-item__title:focus-visible{position:relative;z-index:1;outline:none;background:var(--navigation-vertical-item-background-focus);box-shadow:var(--_sidenav-focus-ring)}.tedi-sidenav-item__title:not(:only-child){max-width:calc(100% - var(--_sidenav-item-padding-right) - var(--_sidenav-item-caret-size) - var(--_gap));padding-right:0}.tedi-sidenav-item__icon{font-size:var(--_sidenav-item-icon-size)!important}.tedi-sidenav-item__caret-button{display:flex;place-items:center center;min-height:var(--_sidenav-item-min-height);padding:0;font-size:inherit;cursor:pointer;background:transparent;border:0}.tedi-sidenav-item__caret-button:hover .tedi-sidenav-item__caret-container{background-color:var(--navigation-vertical-item-background-arrow-button-active)}.tedi-sidenav-item__caret-button:focus-visible{position:relative;z-index:1;outline:none}.tedi-sidenav-item__caret-button:focus-visible .tedi-sidenav-item__caret-container{box-shadow:var(--_sidenav-focus-ring)}.tedi-sidenav-item__caret-button:last-child{padding-right:var(--_sidenav-item-padding-right)}.tedi-sidenav-item__caret-container{display:flex;align-items:center;justify-content:center;width:fit-content;height:fit-content;border-radius:var(--button-radius-sm)}.tedi-sidenav-item__caret{margin-left:auto;font-size:var(--_sidenav-item-caret-size)!important;transition:transform var(--_sidenav-transition-duration) ease}.tedi-sidenav-item__caret[data-open=true]{transform:rotate(180deg)}.tedi-sidenav-item__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:enable-wrap 0s var(--_sidenav-transition-duration) forwards}.tedi-sidenav-item__link{padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-left);color:var(--navigation-vertical-item-text);text-decoration:none}.tedi-sidenav-item__link:hover{background:var(--navigation-vertical-item-background-hover)}.tedi-sidenav-item__link:focus-visible{position:relative;z-index:1;outline:none;background:var(--navigation-vertical-item-background-focus);box-shadow:var(--_sidenav-focus-ring)}.tedi-sidenav-item__link .tedi-sidenav-item__text{white-space:wrap}@keyframes enable-wrap{to{max-width:none;white-space:normal}}\n"] }]
|
|
5266
5327
|
}], propDecorators: { dropdown: [{
|
|
5267
5328
|
type: ContentChild,
|
|
5268
5329
|
args: [forwardRef(() => SideNavDropdownComponent)]
|
|
@@ -5287,26 +5348,41 @@ class SideNavDropdownComponent {
|
|
|
5287
5348
|
return classList.join(" ");
|
|
5288
5349
|
});
|
|
5289
5350
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SideNavDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5290
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SideNavDropdownComponent, isStandalone: true, selector: "tedi-sidenav-dropdown", host: {
|
|
5351
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SideNavDropdownComponent, isStandalone: true, selector: "tedi-sidenav-dropdown", host: { classAttribute: "tedi-sidenav-dropdown-wrapper" }, ngImport: i0, template: "<ul [class]=\"classes()\">\n @if (sidenavService.isCollapsed() && !!sidenavItem.href()) {\n <tedi-sidenav-dropdown-item\n class=\"tedi-sidenav-dropdown-item--parent\"\n [href]=\"sidenavItem.href()\"\n >\n {{ sidenavItem.textContent() }}\n </tedi-sidenav-dropdown-item>\n } @else if (sidenavService.isCollapsed() && !!sidenavItem.route()) {\n <tedi-sidenav-dropdown-item\n class=\"tedi-sidenav-dropdown-item--parent\"\n [route]=\"sidenavItem.route()\"\n >\n {{ sidenavItem.textContent() }}\n </tedi-sidenav-dropdown-item>\n }\n <ng-content></ng-content>\n</ul>\n", styles: [".tedi-sidenav-dropdown-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--_sidenav-transition-duration) ease}.tedi-sidenav-dropdown-wrapper:has(.tedi-sidenav-dropdown--open){grid-template-rows:1fr}.tedi-sidenav-dropdown{visibility:hidden;padding:0;margin:0;overflow:hidden;list-style:none}.tedi-sidenav-dropdown--open{position:relative;z-index:1;visibility:visible;padding-block:4px;margin-block:-4px}\n"], dependencies: [{ kind: "component", type: SideNavDropdownItemComponent, selector: "tedi-sidenav-dropdown-item", inputs: ["selected", "href", "route"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5291
5352
|
}
|
|
5292
5353
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SideNavDropdownComponent, decorators: [{
|
|
5293
5354
|
type: Component,
|
|
5294
5355
|
args: [{ selector: "tedi-sidenav-dropdown", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SideNavDropdownItemComponent], host: {
|
|
5295
|
-
|
|
5296
|
-
|
|
5297
|
-
}, template: "<div class=\"tedi-sidenav-dropdown__items\">\n @if (sidenavService.isCollapsed() && !!sidenavItem.href()) {\n <tedi-sidenav-dropdown-item\n class=\"tedi-sidenav-dropdown-item--parent\"\n [href]=\"sidenavItem.href()\"\n >\n {{ sidenavItem.textContent() }}\n </tedi-sidenav-dropdown-item>\n } @else if (sidenavService.isCollapsed() && !!sidenavItem.route()) {\n <tedi-sidenav-dropdown-item\n class=\"tedi-sidenav-dropdown-item--parent\"\n [route]=\"sidenavItem.route()\"\n >\n {{ sidenavItem.textContent() }}\n </tedi-sidenav-dropdown-item>\n }\n <ng-content></ng-content>\n</div>\n", styles: [".tedi-sidenav-dropdown{display:grid;visibility:hidden;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows var(--_sidenav-transition-duration) ease}.tedi-sidenav-dropdown--open{visibility:visible;grid-template-rows:1fr}.tedi-sidenav-dropdown--open .tedi-sidenav-dropdown__items{visibility:visible}.tedi-sidenav-dropdown__items{visibility:hidden;min-height:0;transition:visibility var(--_sidenav-transition-duration) ease}\n"] }]
|
|
5356
|
+
"class": "tedi-sidenav-dropdown-wrapper",
|
|
5357
|
+
}, template: "<ul [class]=\"classes()\">\n @if (sidenavService.isCollapsed() && !!sidenavItem.href()) {\n <tedi-sidenav-dropdown-item\n class=\"tedi-sidenav-dropdown-item--parent\"\n [href]=\"sidenavItem.href()\"\n >\n {{ sidenavItem.textContent() }}\n </tedi-sidenav-dropdown-item>\n } @else if (sidenavService.isCollapsed() && !!sidenavItem.route()) {\n <tedi-sidenav-dropdown-item\n class=\"tedi-sidenav-dropdown-item--parent\"\n [route]=\"sidenavItem.route()\"\n >\n {{ sidenavItem.textContent() }}\n </tedi-sidenav-dropdown-item>\n }\n <ng-content></ng-content>\n</ul>\n", styles: [".tedi-sidenav-dropdown-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--_sidenav-transition-duration) ease}.tedi-sidenav-dropdown-wrapper:has(.tedi-sidenav-dropdown--open){grid-template-rows:1fr}.tedi-sidenav-dropdown{visibility:hidden;padding:0;margin:0;overflow:hidden;list-style:none}.tedi-sidenav-dropdown--open{position:relative;z-index:1;visibility:visible;padding-block:4px;margin-block:-4px}\n"] }]
|
|
5298
5358
|
}] });
|
|
5299
5359
|
|
|
5300
5360
|
class SideNavDropdownGroupComponent {
|
|
5361
|
+
items;
|
|
5362
|
+
itemsArray = signal([]);
|
|
5363
|
+
firstItem = computed(() => this.itemsArray()[0]);
|
|
5364
|
+
restItems = computed(() => this.itemsArray().slice(1));
|
|
5365
|
+
// to keep same component composition structure but rearrange dom elements inside the group for correct html semantics
|
|
5366
|
+
ngAfterContentInit() {
|
|
5367
|
+
this.itemsArray.set(this.items.toArray());
|
|
5368
|
+
this.items.changes.subscribe(() => {
|
|
5369
|
+
this.itemsArray.set(this.items.toArray());
|
|
5370
|
+
});
|
|
5371
|
+
}
|
|
5301
5372
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SideNavDropdownGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5302
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5373
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SideNavDropdownGroupComponent, isStandalone: true, selector: "tedi-sidenav-dropdown-group", host: { attributes: { "role": "presentation" }, styleAttribute: "display: contents", classAttribute: "tedi-sidenav-dropdown-group" }, queries: [{ propertyName: "items", predicate: SideNavDropdownItemComponent }], ngImport: i0, template: "@if (firstItem(); as first) {\n <li class=\"tedi-sidenav-dropdown-group__parent-wrapper\">\n <div\n class=\"tedi-sidenav-dropdown-item tedi-sidenav-dropdown-group__parent\"\n [class.tedi-sidenav-dropdown-item--selected]=\"first.selected()\"\n >\n @if (first.href()) {\n <a [href]=\"first.href()\" class=\"tedi-sidenav-dropdown-item__trigger\">\n {{ first.textContent() }}\n </a>\n } @else if (first.route()) {\n <a [routerLink]=\"first.route()\" class=\"tedi-sidenav-dropdown-item__trigger\">\n {{ first.textContent() }}\n </a>\n } @else {\n <span class=\"tedi-sidenav-dropdown-item__trigger\">\n {{ first.textContent() }}\n </span>\n }\n </div>\n\n @if (restItems().length > 0) {\n <ul class=\"tedi-sidenav-dropdown-group__list\">\n @for (item of restItems(); track item) {\n <li\n class=\"tedi-sidenav-dropdown-item tedi-sidenav-dropdown-group__item\"\n [class.tedi-sidenav-dropdown-item--selected]=\"item.selected()\"\n >\n @if (item.href()) {\n <a [href]=\"item.href()\" class=\"tedi-sidenav-dropdown-item__trigger\">\n {{ item.textContent() }}\n </a>\n } @else if (item.route()) {\n <a [routerLink]=\"item.route()\" class=\"tedi-sidenav-dropdown-item__trigger\">\n {{ item.textContent() }}\n </a>\n } @else {\n <span class=\"tedi-sidenav-dropdown-item__trigger\">\n {{ item.textContent() }}\n </span>\n }\n </li>\n }\n </ul>\n }\n </li>\n}\n\n<!-- Hidden container for @ContentChildren query -->\n<div style=\"display: none\" aria-hidden=\"true\">\n <ng-content></ng-content>\n</div>\n", styles: [".tedi-sidenav-dropdown-group{--_group-padding-left: var(--navigation-vertical-item-padding-left-level-2)}.tedi-sidenav-dropdown-group__parent-wrapper{position:relative;display:block;list-style:none}.tedi-sidenav-dropdown-group__parent-wrapper:before{position:absolute;top:0;left:calc(var(--_group-padding-left) + var(--_sidenav-tree-left-padding));width:var(--_sidenav-tree-trunk-width);height:calc(var(--_sidenav-dropdown-item-height) / 2);content:\"\";background-color:var(--navigation-vertical-tree-brand-default)}.tedi-sidenav-dropdown-group__list{padding:0;margin:0;list-style:none}.tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item.tedi-sidenav-dropdown-group__parent{position:relative}.tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item.tedi-sidenav-dropdown-group__parent:before{position:absolute;top:50%;left:calc(var(--_padding-left) + var(--_sidenav-tree-left-padding));width:var(--_sidenav-tree-bullet-size);height:var(--_sidenav-tree-bullet-size);content:\"\";background-color:var(--navigation-vertical-tree-brand-default);border-radius:50%;transform:translateY(-50%) translate(calc(-50% + var(--_sidenav-tree-trunk-width) / 2))}.tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item.tedi-sidenav-dropdown-group__parent:after{position:absolute;top:0;left:calc(var(--_padding-left) + var(--_sidenav-tree-left-padding));width:var(--_sidenav-tree-trunk-width);height:100%;content:\"\";background-color:var(--navigation-vertical-tree-brand-default);transform:translateY(50%)}.tedi-sidenav-dropdown-group__item:last-of-type:before{height:50%}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5303
5374
|
}
|
|
5304
5375
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SideNavDropdownGroupComponent, decorators: [{
|
|
5305
5376
|
type: Component,
|
|
5306
|
-
args: [{ selector: "tedi-sidenav-dropdown-group", standalone: true,
|
|
5377
|
+
args: [{ selector: "tedi-sidenav-dropdown-group", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [RouterLink], host: {
|
|
5307
5378
|
"class": "tedi-sidenav-dropdown-group",
|
|
5308
|
-
|
|
5309
|
-
|
|
5379
|
+
"role": "presentation",
|
|
5380
|
+
"style": "display: contents",
|
|
5381
|
+
}, template: "@if (firstItem(); as first) {\n <li class=\"tedi-sidenav-dropdown-group__parent-wrapper\">\n <div\n class=\"tedi-sidenav-dropdown-item tedi-sidenav-dropdown-group__parent\"\n [class.tedi-sidenav-dropdown-item--selected]=\"first.selected()\"\n >\n @if (first.href()) {\n <a [href]=\"first.href()\" class=\"tedi-sidenav-dropdown-item__trigger\">\n {{ first.textContent() }}\n </a>\n } @else if (first.route()) {\n <a [routerLink]=\"first.route()\" class=\"tedi-sidenav-dropdown-item__trigger\">\n {{ first.textContent() }}\n </a>\n } @else {\n <span class=\"tedi-sidenav-dropdown-item__trigger\">\n {{ first.textContent() }}\n </span>\n }\n </div>\n\n @if (restItems().length > 0) {\n <ul class=\"tedi-sidenav-dropdown-group__list\">\n @for (item of restItems(); track item) {\n <li\n class=\"tedi-sidenav-dropdown-item tedi-sidenav-dropdown-group__item\"\n [class.tedi-sidenav-dropdown-item--selected]=\"item.selected()\"\n >\n @if (item.href()) {\n <a [href]=\"item.href()\" class=\"tedi-sidenav-dropdown-item__trigger\">\n {{ item.textContent() }}\n </a>\n } @else if (item.route()) {\n <a [routerLink]=\"item.route()\" class=\"tedi-sidenav-dropdown-item__trigger\">\n {{ item.textContent() }}\n </a>\n } @else {\n <span class=\"tedi-sidenav-dropdown-item__trigger\">\n {{ item.textContent() }}\n </span>\n }\n </li>\n }\n </ul>\n }\n </li>\n}\n\n<!-- Hidden container for @ContentChildren query -->\n<div style=\"display: none\" aria-hidden=\"true\">\n <ng-content></ng-content>\n</div>\n", styles: [".tedi-sidenav-dropdown-group{--_group-padding-left: var(--navigation-vertical-item-padding-left-level-2)}.tedi-sidenav-dropdown-group__parent-wrapper{position:relative;display:block;list-style:none}.tedi-sidenav-dropdown-group__parent-wrapper:before{position:absolute;top:0;left:calc(var(--_group-padding-left) + var(--_sidenav-tree-left-padding));width:var(--_sidenav-tree-trunk-width);height:calc(var(--_sidenav-dropdown-item-height) / 2);content:\"\";background-color:var(--navigation-vertical-tree-brand-default)}.tedi-sidenav-dropdown-group__list{padding:0;margin:0;list-style:none}.tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item.tedi-sidenav-dropdown-group__parent{position:relative}.tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item.tedi-sidenav-dropdown-group__parent:before{position:absolute;top:50%;left:calc(var(--_padding-left) + var(--_sidenav-tree-left-padding));width:var(--_sidenav-tree-bullet-size);height:var(--_sidenav-tree-bullet-size);content:\"\";background-color:var(--navigation-vertical-tree-brand-default);border-radius:50%;transform:translateY(-50%) translate(calc(-50% + var(--_sidenav-tree-trunk-width) / 2))}.tedi-sidenav-dropdown-group .tedi-sidenav-dropdown-item.tedi-sidenav-dropdown-group__parent:after{position:absolute;top:0;left:calc(var(--_padding-left) + var(--_sidenav-tree-left-padding));width:var(--_sidenav-tree-trunk-width);height:100%;content:\"\";background-color:var(--navigation-vertical-tree-brand-default);transform:translateY(50%)}.tedi-sidenav-dropdown-group__item:last-of-type:before{height:50%}\n"] }]
|
|
5382
|
+
}], propDecorators: { items: [{
|
|
5383
|
+
type: ContentChildren,
|
|
5384
|
+
args: [SideNavDropdownItemComponent]
|
|
5385
|
+
}] } });
|
|
5310
5386
|
|
|
5311
5387
|
class SideNavOverlayComponent {
|
|
5312
5388
|
sidenavService = inject(SideNavService);
|