@tedi-design-system/angular 3.0.0-rc.5 → 3.1.0-tmp-main.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/community/components/form/file-dropzone/index.d.ts +0 -3
- package/community/components/form/file-dropzone/index.d.ts.map +1 -1
- package/community/components/form/select/multiselect.component.d.ts +2 -9
- package/community/components/form/select/multiselect.component.d.ts.map +1 -1
- package/community/components/form/select/select.component.d.ts +2 -9
- package/community/components/form/select/select.component.d.ts.map +1 -1
- package/fesm2022/tedi-design-system-angular-community.mjs +16 -42
- package/fesm2022/tedi-design-system-angular-community.mjs.map +1 -1
- package/fesm2022/tedi-design-system-angular-tedi.mjs +237 -163
- package/fesm2022/tedi-design-system-angular-tedi.mjs.map +1 -1
- package/package.json +8 -8
- package/tedi/components/layout/sidenav/sidenav-dropdown-item/sidenav-dropdown-item.component.d.ts +2 -2
- 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 -2
- package/tedi/components/layout/sidenav/sidenav-item/sidenav-item.component.d.ts.map +1 -1
- package/tedi/components/overlay/popover/popover.component.d.ts +3 -4
- package/tedi/components/overlay/popover/popover.component.d.ts.map +1 -1
- package/tedi/components/overlay/tooltip/index.d.ts +2 -2
- package/tedi/components/overlay/tooltip/index.d.ts.map +1 -1
- package/tedi/components/overlay/tooltip/tooltip-content.component.d.ts +21 -0
- package/tedi/components/overlay/tooltip/tooltip-content.component.d.ts.map +1 -0
- package/tedi/components/overlay/tooltip/tooltip-trigger.component.d.ts +11 -0
- package/tedi/components/overlay/tooltip/tooltip-trigger.component.d.ts.map +1 -0
- package/tedi/components/overlay/tooltip/tooltip.component.d.ts +41 -34
- package/tedi/components/overlay/tooltip/tooltip.component.d.ts.map +1 -1
- package/tedi/components/overlay/tooltip/tooltip-content/tooltip-content.component.d.ts +0 -16
- package/tedi/components/overlay/tooltip/tooltip-content/tooltip-content.component.d.ts.map +0 -1
- package/tedi/components/overlay/tooltip/tooltip-trigger/tooltip-trigger.component.d.ts +0 -16
- package/tedi/components/overlay/tooltip/tooltip-trigger/tooltip-trigger.component.d.ts.map +0 -1
|
@@ -5,8 +5,11 @@ import { NgTemplateOutlet, NgClass, DOCUMENT, NgFor, NgIf } from '@angular/commo
|
|
|
5
5
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
6
6
|
import { trigger, state, transition, style, animate } from '@angular/animations';
|
|
7
7
|
import * as i1$1 from 'ngx-float-ui';
|
|
8
|
-
import { NgxFloatUiModule
|
|
8
|
+
import { NgxFloatUiModule } from 'ngx-float-ui';
|
|
9
9
|
import { RouterLink } from '@angular/router';
|
|
10
|
+
import { Overlay, OverlayModule } from '@angular/cdk/overlay';
|
|
11
|
+
import * as i1$2 from '@angular/cdk/portal';
|
|
12
|
+
import { PortalModule, CdkPortal } from '@angular/cdk/portal';
|
|
10
13
|
|
|
11
14
|
const ICON_WITH_BACKGROUND = [16, 24];
|
|
12
15
|
class IconComponent {
|
|
@@ -664,7 +667,7 @@ const translationsMap = {
|
|
|
664
667
|
"pagination.page-size": {
|
|
665
668
|
description: "Label of page size select",
|
|
666
669
|
components: ["Table", "Pagination"],
|
|
667
|
-
et: "
|
|
670
|
+
et: "Lehe suurus",
|
|
668
671
|
en: "Page size",
|
|
669
672
|
ru: "Размер страницы",
|
|
670
673
|
},
|
|
@@ -2487,9 +2490,9 @@ class PopoverComponent {
|
|
|
2487
2490
|
*/
|
|
2488
2491
|
position = input("top");
|
|
2489
2492
|
/**
|
|
2490
|
-
|
|
2491
|
-
|
|
2492
|
-
|
|
2493
|
+
* Is dismissible by clicking outside of content?
|
|
2494
|
+
* @default true
|
|
2495
|
+
*/
|
|
2493
2496
|
dismissible = input(true);
|
|
2494
2497
|
/**
|
|
2495
2498
|
* Does popover content hide on scroll?
|
|
@@ -2511,30 +2514,23 @@ class PopoverComponent {
|
|
|
2511
2514
|
renderer = inject(Renderer2);
|
|
2512
2515
|
onHide() {
|
|
2513
2516
|
if (this.lockScroll()) {
|
|
2514
|
-
this.renderer.removeStyle(this.document.body,
|
|
2517
|
+
this.renderer.removeStyle(this.document.body, 'overflow');
|
|
2515
2518
|
}
|
|
2516
2519
|
}
|
|
2517
2520
|
onOpen() {
|
|
2518
2521
|
if (this.lockScroll()) {
|
|
2519
|
-
this.renderer.setStyle(this.document.body,
|
|
2522
|
+
this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
|
|
2520
2523
|
}
|
|
2521
2524
|
}
|
|
2522
|
-
floatUiContainerClass = computed(() => {
|
|
2523
|
-
const classList = ["float-ui-container-popover"];
|
|
2524
|
-
if (this.withBorder()) {
|
|
2525
|
-
classList.push("float-ui-container-popover--border");
|
|
2526
|
-
}
|
|
2527
|
-
return classList.join(",");
|
|
2528
|
-
});
|
|
2529
2525
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2530
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: PopoverComponent, isStandalone: true, selector: "tedi-popover", inputs: { openWith: { classPropertyName: "openWith", publicName: "openWith", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, withBorder: { classPropertyName: "withBorder", publicName: "withBorder", isSignal: true, isRequired: false, transformFunction: null }, lockScroll: { classPropertyName: "lockScroll", publicName: "lockScroll", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "floatUiComponent", first: true, predicate: ["floatUiComponent"], descendants: true }], ngImport: i0, template: "<div\n
|
|
2526
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: PopoverComponent, isStandalone: true, selector: "tedi-popover", inputs: { openWith: { classPropertyName: "openWith", publicName: "openWith", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, withBorder: { classPropertyName: "withBorder", publicName: "withBorder", isSignal: true, isRequired: false, transformFunction: null }, lockScroll: { classPropertyName: "lockScroll", publicName: "lockScroll", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "floatUiComponent", first: true, predicate: ["floatUiComponent"], descendants: true }], ngImport: i0, template: "<div\n [floatUiLoose]=\"floatUiComponent\"\n [loosePlacement]=\"position()\"\n [looseTrigger]=\"openWith()\"\n [hideOnClickOutside]=\"dismissible()\"\n [hideOnScroll]=\"hideOnScroll()\"\n [applyClass]=\"withBorder() ? 'float-ui-container--border' : ''\"\n [disableAnimation]=\"true\"\n appendTo=\"body\"\n aria-haspopup=\"dialog\"\n style=\"display: inline-flex;\"\n (onHidden)=\"onHide()\"\n (onShown)=\"onOpen()\"\n>\n <ng-content select=\"tedi-popover-trigger\" />\n</div>\n<float-ui-content #floatUiComponent>\n <ng-content select=\"tedi-popover-content\" />\n</float-ui-content>", styles: ["tedi-popover{display:block}tedi-popover-trigger{display:inline-flex;cursor:pointer}float-ui-content .float-ui-container{padding:0;border:var(--borders-01) solid var(--popover-border);box-shadow:0 1px 5px 0 var(--alpha-20, rgba(0, 0, 0, .2))}float-ui-content .float-ui-container{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){float-ui-content .float-ui-container{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){float-ui-content .float-ui-container{border-radius:var(--popover-radius-rounded-desktop)}}float-ui-content .float-ui-container .float-ui-arrow{width:24px;height:24px;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--alpha-20));clip-path:inset(0px -5px -5px 0px);z-index:var(--z-index-dropdown)}float-ui-content .float-ui-container--border{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){float-ui-content .float-ui-container--border{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){float-ui-content .float-ui-container--border{border-radius:var(--popover-radius-rounded-desktop)}}float-ui-content .float-ui-container--border .float-ui-arrow{width:18px;height:18px;border-bottom:4px solid var(--header-popover-border-top);border-right:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=top]{border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=top] .float-ui-arrow{bottom:-12px!important}float-ui-content .float-ui-container--border[data-float-ui-placement=bottom]{border-top:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=bottom] .float-ui-arrow{top:-12px!important}float-ui-content .float-ui-container--border[data-float-ui-placement=left]{border-right:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=left] .float-ui-arrow{right:-12px!important}float-ui-content .float-ui-container--border[data-float-ui-placement=right]{border-left:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=right] .float-ui-arrow{left:-12px!important}float-ui-content .float-ui-container[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container[data-float-ui-placement=right] .float-ui-arrow{transform:rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-content{position:relative;max-width:calc(100dvw - 1rem);display:flex;flex-direction:column;background:var(--popover-background);color:var(--popover-text);z-index:var(--z-index-dropdown)}.tedi-popover-content{gap:var(--layout-grid-gutters-08-mobile)}@media (min-width: 576px){.tedi-popover-content{gap:var(--layout-grid-gutters-08-tablet)}}@media (min-width: 992px){.tedi-popover-content{gap:var(--layout-grid-gutters-08-desktop)}}.tedi-popover-content{padding:var(--popover-padding-sm-mobile)}@media (min-width: 576px){.tedi-popover-content{padding:var(--popover-padding-sm-tablet)}}@media (min-width: 992px){.tedi-popover-content{padding:var(--popover-padding-sm-desktop)}}.tedi-popover-content{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){.tedi-popover-content{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){.tedi-popover-content{border-radius:var(--popover-radius-rounded-desktop)}}.tedi-popover-content--none{width:none}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;justify-content:space-between}.tedi-popover-content__head{gap:var(--layout-grid-gutters-08-mobile)}@media (min-width: 576px){.tedi-popover-content__head{gap:var(--layout-grid-gutters-08-tablet)}}@media (min-width: 992px){.tedi-popover-content__head{gap:var(--layout-grid-gutters-08-desktop)}}.tedi-popover-content__head>div{display:flex;flex-direction:column;flex:1 1 0;min-width:0}.tedi-popover-content__head>div{gap:var(--layout-grid-gutters-08-mobile)}@media (min-width: 576px){.tedi-popover-content__head>div{gap:var(--layout-grid-gutters-08-tablet)}}@media (min-width: 992px){.tedi-popover-content__head>div{gap:var(--layout-grid-gutters-08-desktop)}}.tedi-popover-content__title{align-self:center}\n"], dependencies: [{ kind: "ngmodule", type: NgxFloatUiModule }, { kind: "component", type: i1$1.NgxFloatUiContentComponent, selector: "float-ui-content", exportAs: ["ngxFloatUiContent"] }, { kind: "directive", type: i1$1.NgxFloatUiLooseDirective, selector: "[floatUiLoose]", inputs: ["floatUiLoose", "loosePlacement", "looseTrigger"], exportAs: ["floatUiLoose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2531
2527
|
}
|
|
2532
2528
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
2533
2529
|
type: Component,
|
|
2534
|
-
args: [{ standalone: true, selector: "tedi-popover", imports: [NgxFloatUiModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n
|
|
2530
|
+
args: [{ standalone: true, selector: "tedi-popover", imports: [NgxFloatUiModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [floatUiLoose]=\"floatUiComponent\"\n [loosePlacement]=\"position()\"\n [looseTrigger]=\"openWith()\"\n [hideOnClickOutside]=\"dismissible()\"\n [hideOnScroll]=\"hideOnScroll()\"\n [applyClass]=\"withBorder() ? 'float-ui-container--border' : ''\"\n [disableAnimation]=\"true\"\n appendTo=\"body\"\n aria-haspopup=\"dialog\"\n style=\"display: inline-flex;\"\n (onHidden)=\"onHide()\"\n (onShown)=\"onOpen()\"\n>\n <ng-content select=\"tedi-popover-trigger\" />\n</div>\n<float-ui-content #floatUiComponent>\n <ng-content select=\"tedi-popover-content\" />\n</float-ui-content>", styles: ["tedi-popover{display:block}tedi-popover-trigger{display:inline-flex;cursor:pointer}float-ui-content .float-ui-container{padding:0;border:var(--borders-01) solid var(--popover-border);box-shadow:0 1px 5px 0 var(--alpha-20, rgba(0, 0, 0, .2))}float-ui-content .float-ui-container{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){float-ui-content .float-ui-container{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){float-ui-content .float-ui-container{border-radius:var(--popover-radius-rounded-desktop)}}float-ui-content .float-ui-container .float-ui-arrow{width:24px;height:24px;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--alpha-20));clip-path:inset(0px -5px -5px 0px);z-index:var(--z-index-dropdown)}float-ui-content .float-ui-container--border{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){float-ui-content .float-ui-container--border{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){float-ui-content .float-ui-container--border{border-radius:var(--popover-radius-rounded-desktop)}}float-ui-content .float-ui-container--border .float-ui-arrow{width:18px;height:18px;border-bottom:4px solid var(--header-popover-border-top);border-right:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=top]{border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=top] .float-ui-arrow{bottom:-12px!important}float-ui-content .float-ui-container--border[data-float-ui-placement=bottom]{border-top:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=bottom] .float-ui-arrow{top:-12px!important}float-ui-content .float-ui-container--border[data-float-ui-placement=left]{border-right:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=left] .float-ui-arrow{right:-12px!important}float-ui-content .float-ui-container--border[data-float-ui-placement=right]{border-left:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=right] .float-ui-arrow{left:-12px!important}float-ui-content .float-ui-container[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container[data-float-ui-placement=right] .float-ui-arrow{transform:rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-content{position:relative;max-width:calc(100dvw - 1rem);display:flex;flex-direction:column;background:var(--popover-background);color:var(--popover-text);z-index:var(--z-index-dropdown)}.tedi-popover-content{gap:var(--layout-grid-gutters-08-mobile)}@media (min-width: 576px){.tedi-popover-content{gap:var(--layout-grid-gutters-08-tablet)}}@media (min-width: 992px){.tedi-popover-content{gap:var(--layout-grid-gutters-08-desktop)}}.tedi-popover-content{padding:var(--popover-padding-sm-mobile)}@media (min-width: 576px){.tedi-popover-content{padding:var(--popover-padding-sm-tablet)}}@media (min-width: 992px){.tedi-popover-content{padding:var(--popover-padding-sm-desktop)}}.tedi-popover-content{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){.tedi-popover-content{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){.tedi-popover-content{border-radius:var(--popover-radius-rounded-desktop)}}.tedi-popover-content--none{width:none}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;justify-content:space-between}.tedi-popover-content__head{gap:var(--layout-grid-gutters-08-mobile)}@media (min-width: 576px){.tedi-popover-content__head{gap:var(--layout-grid-gutters-08-tablet)}}@media (min-width: 992px){.tedi-popover-content__head{gap:var(--layout-grid-gutters-08-desktop)}}.tedi-popover-content__head>div{display:flex;flex-direction:column;flex:1 1 0;min-width:0}.tedi-popover-content__head>div{gap:var(--layout-grid-gutters-08-mobile)}@media (min-width: 576px){.tedi-popover-content__head>div{gap:var(--layout-grid-gutters-08-tablet)}}@media (min-width: 992px){.tedi-popover-content__head>div{gap:var(--layout-grid-gutters-08-desktop)}}.tedi-popover-content__title{align-self:center}\n"] }]
|
|
2535
2531
|
}], propDecorators: { floatUiComponent: [{
|
|
2536
2532
|
type: ViewChild,
|
|
2537
|
-
args: [
|
|
2533
|
+
args: ['floatUiComponent']
|
|
2538
2534
|
}] } });
|
|
2539
2535
|
|
|
2540
2536
|
class PopoverTriggerComponent {
|
|
@@ -2555,11 +2551,11 @@ class PopoverTriggerComponent {
|
|
|
2555
2551
|
}
|
|
2556
2552
|
}
|
|
2557
2553
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PopoverTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2558
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: PopoverTriggerComponent, isStandalone: true, selector: "tedi-popover-trigger", ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-popover{display:block}tedi-popover-trigger{display:inline-flex;cursor:pointer}float-ui-content .float-ui-container
|
|
2554
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: PopoverTriggerComponent, isStandalone: true, selector: "tedi-popover-trigger", ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-popover{display:block}tedi-popover-trigger{display:inline-flex;cursor:pointer}float-ui-content .float-ui-container{padding:0;border:var(--borders-01) solid var(--popover-border);box-shadow:0 1px 5px 0 var(--alpha-20, rgba(0, 0, 0, .2))}float-ui-content .float-ui-container{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){float-ui-content .float-ui-container{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){float-ui-content .float-ui-container{border-radius:var(--popover-radius-rounded-desktop)}}float-ui-content .float-ui-container .float-ui-arrow{width:24px;height:24px;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--alpha-20));clip-path:inset(0px -5px -5px 0px);z-index:var(--z-index-dropdown)}float-ui-content .float-ui-container--border{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){float-ui-content .float-ui-container--border{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){float-ui-content .float-ui-container--border{border-radius:var(--popover-radius-rounded-desktop)}}float-ui-content .float-ui-container--border .float-ui-arrow{width:18px;height:18px;border-bottom:4px solid var(--header-popover-border-top);border-right:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=top]{border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=top] .float-ui-arrow{bottom:-12px!important}float-ui-content .float-ui-container--border[data-float-ui-placement=bottom]{border-top:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=bottom] .float-ui-arrow{top:-12px!important}float-ui-content .float-ui-container--border[data-float-ui-placement=left]{border-right:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=left] .float-ui-arrow{right:-12px!important}float-ui-content .float-ui-container--border[data-float-ui-placement=right]{border-left:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=right] .float-ui-arrow{left:-12px!important}float-ui-content .float-ui-container[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container[data-float-ui-placement=right] .float-ui-arrow{transform:rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-content{position:relative;max-width:calc(100dvw - 1rem);display:flex;flex-direction:column;background:var(--popover-background);color:var(--popover-text);z-index:var(--z-index-dropdown)}.tedi-popover-content{gap:var(--layout-grid-gutters-08-mobile)}@media (min-width: 576px){.tedi-popover-content{gap:var(--layout-grid-gutters-08-tablet)}}@media (min-width: 992px){.tedi-popover-content{gap:var(--layout-grid-gutters-08-desktop)}}.tedi-popover-content{padding:var(--popover-padding-sm-mobile)}@media (min-width: 576px){.tedi-popover-content{padding:var(--popover-padding-sm-tablet)}}@media (min-width: 992px){.tedi-popover-content{padding:var(--popover-padding-sm-desktop)}}.tedi-popover-content{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){.tedi-popover-content{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){.tedi-popover-content{border-radius:var(--popover-radius-rounded-desktop)}}.tedi-popover-content--none{width:none}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;justify-content:space-between}.tedi-popover-content__head{gap:var(--layout-grid-gutters-08-mobile)}@media (min-width: 576px){.tedi-popover-content__head{gap:var(--layout-grid-gutters-08-tablet)}}@media (min-width: 992px){.tedi-popover-content__head{gap:var(--layout-grid-gutters-08-desktop)}}.tedi-popover-content__head>div{display:flex;flex-direction:column;flex:1 1 0;min-width:0}.tedi-popover-content__head>div{gap:var(--layout-grid-gutters-08-mobile)}@media (min-width: 576px){.tedi-popover-content__head>div{gap:var(--layout-grid-gutters-08-tablet)}}@media (min-width: 992px){.tedi-popover-content__head>div{gap:var(--layout-grid-gutters-08-desktop)}}.tedi-popover-content__title{align-self:center}\n"] });
|
|
2559
2555
|
}
|
|
2560
2556
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PopoverTriggerComponent, decorators: [{
|
|
2561
2557
|
type: Component,
|
|
2562
|
-
args: [{ selector: "tedi-popover-trigger", standalone: true, template: "<ng-content />", styles: ["tedi-popover{display:block}tedi-popover-trigger{display:inline-flex;cursor:pointer}float-ui-content .float-ui-container
|
|
2558
|
+
args: [{ selector: "tedi-popover-trigger", standalone: true, template: "<ng-content />", styles: ["tedi-popover{display:block}tedi-popover-trigger{display:inline-flex;cursor:pointer}float-ui-content .float-ui-container{padding:0;border:var(--borders-01) solid var(--popover-border);box-shadow:0 1px 5px 0 var(--alpha-20, rgba(0, 0, 0, .2))}float-ui-content .float-ui-container{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){float-ui-content .float-ui-container{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){float-ui-content .float-ui-container{border-radius:var(--popover-radius-rounded-desktop)}}float-ui-content .float-ui-container .float-ui-arrow{width:24px;height:24px;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--alpha-20));clip-path:inset(0px -5px -5px 0px);z-index:var(--z-index-dropdown)}float-ui-content .float-ui-container--border{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){float-ui-content .float-ui-container--border{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){float-ui-content .float-ui-container--border{border-radius:var(--popover-radius-rounded-desktop)}}float-ui-content .float-ui-container--border .float-ui-arrow{width:18px;height:18px;border-bottom:4px solid var(--header-popover-border-top);border-right:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=top]{border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=top] .float-ui-arrow{bottom:-12px!important}float-ui-content .float-ui-container--border[data-float-ui-placement=bottom]{border-top:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=bottom] .float-ui-arrow{top:-12px!important}float-ui-content .float-ui-container--border[data-float-ui-placement=left]{border-right:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=left] .float-ui-arrow{right:-12px!important}float-ui-content .float-ui-container--border[data-float-ui-placement=right]{border-left:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=right] .float-ui-arrow{left:-12px!important}float-ui-content .float-ui-container[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container[data-float-ui-placement=right] .float-ui-arrow{transform:rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-content{position:relative;max-width:calc(100dvw - 1rem);display:flex;flex-direction:column;background:var(--popover-background);color:var(--popover-text);z-index:var(--z-index-dropdown)}.tedi-popover-content{gap:var(--layout-grid-gutters-08-mobile)}@media (min-width: 576px){.tedi-popover-content{gap:var(--layout-grid-gutters-08-tablet)}}@media (min-width: 992px){.tedi-popover-content{gap:var(--layout-grid-gutters-08-desktop)}}.tedi-popover-content{padding:var(--popover-padding-sm-mobile)}@media (min-width: 576px){.tedi-popover-content{padding:var(--popover-padding-sm-tablet)}}@media (min-width: 992px){.tedi-popover-content{padding:var(--popover-padding-sm-desktop)}}.tedi-popover-content{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){.tedi-popover-content{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){.tedi-popover-content{border-radius:var(--popover-radius-rounded-desktop)}}.tedi-popover-content--none{width:none}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;justify-content:space-between}.tedi-popover-content__head{gap:var(--layout-grid-gutters-08-mobile)}@media (min-width: 576px){.tedi-popover-content__head{gap:var(--layout-grid-gutters-08-tablet)}}@media (min-width: 992px){.tedi-popover-content__head{gap:var(--layout-grid-gutters-08-desktop)}}.tedi-popover-content__head>div{display:flex;flex-direction:column;flex:1 1 0;min-width:0}.tedi-popover-content__head>div{gap:var(--layout-grid-gutters-08-mobile)}@media (min-width: 576px){.tedi-popover-content__head>div{gap:var(--layout-grid-gutters-08-tablet)}}@media (min-width: 992px){.tedi-popover-content__head>div{gap:var(--layout-grid-gutters-08-desktop)}}.tedi-popover-content__title{align-self:center}\n"] }]
|
|
2563
2559
|
}] });
|
|
2564
2560
|
|
|
2565
2561
|
let popoverTitleId = 0;
|
|
@@ -2588,7 +2584,7 @@ class PopoverContentComponent {
|
|
|
2588
2584
|
this.popover?.floatUiComponent.hide();
|
|
2589
2585
|
}
|
|
2590
2586
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PopoverContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2591
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: PopoverContentComponent, isStandalone: true, selector: "tedi-popover-content", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "dialog" }, properties: { "class": "classes()", "attr.aria-labelledby": "title() ? titleId : null" } }, ngImport: i0, template: "@if (title() && showClose()) {\n <div class=\"tedi-popover-content__head\">\n <h4 class=\"tedi-popover-content__title\" [id]=\"titleId\">{{ title() }}</h4>\n <button tedi-closing-button (click)=\"handleClose()\"></button>\n </div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else if (showClose()) {\n <div class=\"tedi-popover-content__head\">\n <div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n <button tedi-closing-button size=\"small\" (click)=\"handleClose()\"></button>\n </div>\n} @else if (title()) {\n <h4 [id]=\"titleId\">{{ title() }}</h4>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>", styles: ["tedi-popover{display:block}tedi-popover-trigger{display:inline-flex;cursor:pointer}float-ui-content .float-ui-container
|
|
2587
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: PopoverContentComponent, isStandalone: true, selector: "tedi-popover-content", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "dialog" }, properties: { "class": "classes()", "attr.aria-labelledby": "title() ? titleId : null" } }, ngImport: i0, template: "@if (title() && showClose()) {\n <div class=\"tedi-popover-content__head\">\n <h4 class=\"tedi-popover-content__title\" [id]=\"titleId\">{{ title() }}</h4>\n <button tedi-closing-button (click)=\"handleClose()\"></button>\n </div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else if (showClose()) {\n <div class=\"tedi-popover-content__head\">\n <div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n <button tedi-closing-button size=\"small\" (click)=\"handleClose()\"></button>\n </div>\n} @else if (title()) {\n <h4 [id]=\"titleId\">{{ title() }}</h4>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>", styles: ["tedi-popover{display:block}tedi-popover-trigger{display:inline-flex;cursor:pointer}float-ui-content .float-ui-container{padding:0;border:var(--borders-01) solid var(--popover-border);box-shadow:0 1px 5px 0 var(--alpha-20, rgba(0, 0, 0, .2))}float-ui-content .float-ui-container{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){float-ui-content .float-ui-container{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){float-ui-content .float-ui-container{border-radius:var(--popover-radius-rounded-desktop)}}float-ui-content .float-ui-container .float-ui-arrow{width:24px;height:24px;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--alpha-20));clip-path:inset(0px -5px -5px 0px);z-index:var(--z-index-dropdown)}float-ui-content .float-ui-container--border{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){float-ui-content .float-ui-container--border{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){float-ui-content .float-ui-container--border{border-radius:var(--popover-radius-rounded-desktop)}}float-ui-content .float-ui-container--border .float-ui-arrow{width:18px;height:18px;border-bottom:4px solid var(--header-popover-border-top);border-right:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=top]{border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=top] .float-ui-arrow{bottom:-12px!important}float-ui-content .float-ui-container--border[data-float-ui-placement=bottom]{border-top:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=bottom] .float-ui-arrow{top:-12px!important}float-ui-content .float-ui-container--border[data-float-ui-placement=left]{border-right:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=left] .float-ui-arrow{right:-12px!important}float-ui-content .float-ui-container--border[data-float-ui-placement=right]{border-left:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=right] .float-ui-arrow{left:-12px!important}float-ui-content .float-ui-container[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container[data-float-ui-placement=right] .float-ui-arrow{transform:rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-content{position:relative;max-width:calc(100dvw - 1rem);display:flex;flex-direction:column;background:var(--popover-background);color:var(--popover-text);z-index:var(--z-index-dropdown)}.tedi-popover-content{gap:var(--layout-grid-gutters-08-mobile)}@media (min-width: 576px){.tedi-popover-content{gap:var(--layout-grid-gutters-08-tablet)}}@media (min-width: 992px){.tedi-popover-content{gap:var(--layout-grid-gutters-08-desktop)}}.tedi-popover-content{padding:var(--popover-padding-sm-mobile)}@media (min-width: 576px){.tedi-popover-content{padding:var(--popover-padding-sm-tablet)}}@media (min-width: 992px){.tedi-popover-content{padding:var(--popover-padding-sm-desktop)}}.tedi-popover-content{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){.tedi-popover-content{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){.tedi-popover-content{border-radius:var(--popover-radius-rounded-desktop)}}.tedi-popover-content--none{width:none}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;justify-content:space-between}.tedi-popover-content__head{gap:var(--layout-grid-gutters-08-mobile)}@media (min-width: 576px){.tedi-popover-content__head{gap:var(--layout-grid-gutters-08-tablet)}}@media (min-width: 992px){.tedi-popover-content__head{gap:var(--layout-grid-gutters-08-desktop)}}.tedi-popover-content__head>div{display:flex;flex-direction:column;flex:1 1 0;min-width:0}.tedi-popover-content__head>div{gap:var(--layout-grid-gutters-08-mobile)}@media (min-width: 576px){.tedi-popover-content__head>div{gap:var(--layout-grid-gutters-08-tablet)}}@media (min-width: 992px){.tedi-popover-content__head>div{gap:var(--layout-grid-gutters-08-desktop)}}.tedi-popover-content__title{align-self:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2592
2588
|
}
|
|
2593
2589
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PopoverContentComponent, decorators: [{
|
|
2594
2590
|
type: Component,
|
|
@@ -2596,7 +2592,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2596
2592
|
"[class]": "classes()",
|
|
2597
2593
|
"role": "dialog",
|
|
2598
2594
|
"[attr.aria-labelledby]": "title() ? titleId : null",
|
|
2599
|
-
}, template: "@if (title() && showClose()) {\n <div class=\"tedi-popover-content__head\">\n <h4 class=\"tedi-popover-content__title\" [id]=\"titleId\">{{ title() }}</h4>\n <button tedi-closing-button (click)=\"handleClose()\"></button>\n </div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else if (showClose()) {\n <div class=\"tedi-popover-content__head\">\n <div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n <button tedi-closing-button size=\"small\" (click)=\"handleClose()\"></button>\n </div>\n} @else if (title()) {\n <h4 [id]=\"titleId\">{{ title() }}</h4>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>", styles: ["tedi-popover{display:block}tedi-popover-trigger{display:inline-flex;cursor:pointer}float-ui-content .float-ui-container
|
|
2595
|
+
}, template: "@if (title() && showClose()) {\n <div class=\"tedi-popover-content__head\">\n <h4 class=\"tedi-popover-content__title\" [id]=\"titleId\">{{ title() }}</h4>\n <button tedi-closing-button (click)=\"handleClose()\"></button>\n </div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else if (showClose()) {\n <div class=\"tedi-popover-content__head\">\n <div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n <button tedi-closing-button size=\"small\" (click)=\"handleClose()\"></button>\n </div>\n} @else if (title()) {\n <h4 [id]=\"titleId\">{{ title() }}</h4>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>", styles: ["tedi-popover{display:block}tedi-popover-trigger{display:inline-flex;cursor:pointer}float-ui-content .float-ui-container{padding:0;border:var(--borders-01) solid var(--popover-border);box-shadow:0 1px 5px 0 var(--alpha-20, rgba(0, 0, 0, .2))}float-ui-content .float-ui-container{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){float-ui-content .float-ui-container{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){float-ui-content .float-ui-container{border-radius:var(--popover-radius-rounded-desktop)}}float-ui-content .float-ui-container .float-ui-arrow{width:24px;height:24px;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--alpha-20));clip-path:inset(0px -5px -5px 0px);z-index:var(--z-index-dropdown)}float-ui-content .float-ui-container--border{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){float-ui-content .float-ui-container--border{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){float-ui-content .float-ui-container--border{border-radius:var(--popover-radius-rounded-desktop)}}float-ui-content .float-ui-container--border .float-ui-arrow{width:18px;height:18px;border-bottom:4px solid var(--header-popover-border-top);border-right:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=top]{border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=top] .float-ui-arrow{bottom:-12px!important}float-ui-content .float-ui-container--border[data-float-ui-placement=bottom]{border-top:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=bottom] .float-ui-arrow{top:-12px!important}float-ui-content .float-ui-container--border[data-float-ui-placement=left]{border-right:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=left] .float-ui-arrow{right:-12px!important}float-ui-content .float-ui-container--border[data-float-ui-placement=right]{border-left:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container--border[data-float-ui-placement=right] .float-ui-arrow{left:-12px!important}float-ui-content .float-ui-container[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container[data-float-ui-placement=right] .float-ui-arrow{transform:rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-content{position:relative;max-width:calc(100dvw - 1rem);display:flex;flex-direction:column;background:var(--popover-background);color:var(--popover-text);z-index:var(--z-index-dropdown)}.tedi-popover-content{gap:var(--layout-grid-gutters-08-mobile)}@media (min-width: 576px){.tedi-popover-content{gap:var(--layout-grid-gutters-08-tablet)}}@media (min-width: 992px){.tedi-popover-content{gap:var(--layout-grid-gutters-08-desktop)}}.tedi-popover-content{padding:var(--popover-padding-sm-mobile)}@media (min-width: 576px){.tedi-popover-content{padding:var(--popover-padding-sm-tablet)}}@media (min-width: 992px){.tedi-popover-content{padding:var(--popover-padding-sm-desktop)}}.tedi-popover-content{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){.tedi-popover-content{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){.tedi-popover-content{border-radius:var(--popover-radius-rounded-desktop)}}.tedi-popover-content--none{width:none}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;justify-content:space-between}.tedi-popover-content__head{gap:var(--layout-grid-gutters-08-mobile)}@media (min-width: 576px){.tedi-popover-content__head{gap:var(--layout-grid-gutters-08-tablet)}}@media (min-width: 992px){.tedi-popover-content__head{gap:var(--layout-grid-gutters-08-desktop)}}.tedi-popover-content__head>div{display:flex;flex-direction:column;flex:1 1 0;min-width:0}.tedi-popover-content__head>div{gap:var(--layout-grid-gutters-08-mobile)}@media (min-width: 576px){.tedi-popover-content__head>div{gap:var(--layout-grid-gutters-08-tablet)}}@media (min-width: 992px){.tedi-popover-content__head>div{gap:var(--layout-grid-gutters-08-desktop)}}.tedi-popover-content__title{align-self:center}\n"] }]
|
|
2600
2596
|
}] });
|
|
2601
2597
|
|
|
2602
2598
|
class HeaderLanguageComponent {
|
|
@@ -2950,7 +2946,7 @@ class SideNavDropdownItemComponent {
|
|
|
2950
2946
|
/**
|
|
2951
2947
|
* Router link
|
|
2952
2948
|
*/
|
|
2953
|
-
|
|
2949
|
+
routerLink = input();
|
|
2954
2950
|
classes = computed(() => {
|
|
2955
2951
|
const classList = ["tedi-sidenav-dropdown-item"];
|
|
2956
2952
|
if (this.selected()) {
|
|
@@ -2959,13 +2955,13 @@ class SideNavDropdownItemComponent {
|
|
|
2959
2955
|
return classList.join(" ");
|
|
2960
2956
|
});
|
|
2961
2957
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SideNavDropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2962
|
-
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 },
|
|
2958
|
+
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 }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "@if (href()) {\n <a [href]=\"href()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n} @else if (routerLink()) {\n <a [routerLink]=\"routerLink()\">\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{min-height:var(--_sidenav-dropdown-item-height);position:relative;display:block;color:var(--side-navigation-item-text);padding-top:var(--_sidenav-item-padding-y);padding-bottom:var(--_sidenav-item-padding-y);padding-right:var(--_sidenav-item-padding-right);padding-left:calc(var(--_padding-left) + var(--_sidenav-tree-container) + var(--_gap));cursor:pointer}.tedi-sidenav-dropdown-item{--_padding-left: var(--side-navigation-item-padding-left-level-2-mobile)}@media (min-width: 576px){.tedi-sidenav-dropdown-item{--_padding-left: var(--side-navigation-item-padding-left-level-2-tablet)}}@media (min-width: 992px){.tedi-sidenav-dropdown-item{--_padding-left: var(--side-navigation-item-padding-left-level-2-desktop)}}.tedi-sidenav-dropdown-item{--_gap: var(--side-navigation-item-inner-spacing-mobile)}@media (min-width: 576px){.tedi-sidenav-dropdown-item{--_gap: var(--side-navigation-item-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-sidenav-dropdown-item{--_gap: var(--side-navigation-item-inner-spacing-desktop)}}.tedi-sidenav-dropdown-item:hover{background:var(--side-navigation-item-background-hover)}.tedi-sidenav-dropdown-item--selected{background:var(--side-navigation-item-background-active)}.tedi-sidenav-dropdown-item--selected{font-weight:var(--body-bold-weight-mobile)}@media (min-width: 576px){.tedi-sidenav-dropdown-item--selected{font-weight:var(--body-bold-weight-tablet)}}@media (min-width: 992px){.tedi-sidenav-dropdown-item--selected{font-weight:var(--body-bold-weight-desktop)}}.tedi-sidenav-dropdown-item:before{content:\"\";position:absolute;top:0;left:calc(var(--_padding-left) + var(--_sidenav-tree-left-padding));width:var(--_sidenav-tree-trunk-width);height:100%;background-color:var(--side-navigation-tree-brand-default)}.tedi-sidenav-dropdown-item:after{content:\"\";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);transform:translateY(-50%);background-color:var(--side-navigation-tree-brand-default)}.tedi-sidenav-dropdown-item--parent{padding-left:var(--dropdown-item-padding-x-mobile)}@media (min-width: 576px){.tedi-sidenav-dropdown-item--parent{padding-left:var(--dropdown-item-padding-x-tablet)}}@media (min-width: 992px){.tedi-sidenav-dropdown-item--parent{padding-left:var(--dropdown-item-padding-x-desktop)}}.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{text-decoration:none;color:inherit}\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 });
|
|
2963
2959
|
}
|
|
2964
2960
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SideNavDropdownItemComponent, decorators: [{
|
|
2965
2961
|
type: Component,
|
|
2966
2962
|
args: [{ selector: "tedi-sidenav-dropdown-item", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [RouterLink, NgTemplateOutlet], host: {
|
|
2967
2963
|
"[class]": "classes()",
|
|
2968
|
-
}, template: "@if (href()) {\n <a [href]=\"href()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n} @else if (
|
|
2964
|
+
}, template: "@if (href()) {\n <a [href]=\"href()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n} @else if (routerLink()) {\n <a [routerLink]=\"routerLink()\">\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{min-height:var(--_sidenav-dropdown-item-height);position:relative;display:block;color:var(--side-navigation-item-text);padding-top:var(--_sidenav-item-padding-y);padding-bottom:var(--_sidenav-item-padding-y);padding-right:var(--_sidenav-item-padding-right);padding-left:calc(var(--_padding-left) + var(--_sidenav-tree-container) + var(--_gap));cursor:pointer}.tedi-sidenav-dropdown-item{--_padding-left: var(--side-navigation-item-padding-left-level-2-mobile)}@media (min-width: 576px){.tedi-sidenav-dropdown-item{--_padding-left: var(--side-navigation-item-padding-left-level-2-tablet)}}@media (min-width: 992px){.tedi-sidenav-dropdown-item{--_padding-left: var(--side-navigation-item-padding-left-level-2-desktop)}}.tedi-sidenav-dropdown-item{--_gap: var(--side-navigation-item-inner-spacing-mobile)}@media (min-width: 576px){.tedi-sidenav-dropdown-item{--_gap: var(--side-navigation-item-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-sidenav-dropdown-item{--_gap: var(--side-navigation-item-inner-spacing-desktop)}}.tedi-sidenav-dropdown-item:hover{background:var(--side-navigation-item-background-hover)}.tedi-sidenav-dropdown-item--selected{background:var(--side-navigation-item-background-active)}.tedi-sidenav-dropdown-item--selected{font-weight:var(--body-bold-weight-mobile)}@media (min-width: 576px){.tedi-sidenav-dropdown-item--selected{font-weight:var(--body-bold-weight-tablet)}}@media (min-width: 992px){.tedi-sidenav-dropdown-item--selected{font-weight:var(--body-bold-weight-desktop)}}.tedi-sidenav-dropdown-item:before{content:\"\";position:absolute;top:0;left:calc(var(--_padding-left) + var(--_sidenav-tree-left-padding));width:var(--_sidenav-tree-trunk-width);height:100%;background-color:var(--side-navigation-tree-brand-default)}.tedi-sidenav-dropdown-item:after{content:\"\";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);transform:translateY(-50%);background-color:var(--side-navigation-tree-brand-default)}.tedi-sidenav-dropdown-item--parent{padding-left:var(--dropdown-item-padding-x-mobile)}@media (min-width: 576px){.tedi-sidenav-dropdown-item--parent{padding-left:var(--dropdown-item-padding-x-tablet)}}@media (min-width: 992px){.tedi-sidenav-dropdown-item--parent{padding-left:var(--dropdown-item-padding-x-desktop)}}.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{text-decoration:none;color:inherit}\n"] }]
|
|
2969
2965
|
}] });
|
|
2970
2966
|
|
|
2971
2967
|
class SideNavGroupTitleComponent {
|
|
@@ -2982,177 +2978,255 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2982
2978
|
class TooltipTriggerComponent {
|
|
2983
2979
|
host = inject(ElementRef);
|
|
2984
2980
|
renderer = inject(Renderer2);
|
|
2985
|
-
|
|
2986
|
-
|
|
2987
|
-
this.tooltip.toggleTooltip();
|
|
2988
|
-
}
|
|
2989
|
-
onMouseEnter() {
|
|
2990
|
-
this.tooltip.showTooltip();
|
|
2991
|
-
}
|
|
2992
|
-
onMouseLeave() {
|
|
2993
|
-
clearTimeout(this.tooltip.hideTimeout);
|
|
2994
|
-
this.tooltip.hideTimeout = setTimeout(() => {
|
|
2995
|
-
this.tooltip.hideTooltip();
|
|
2996
|
-
}, this.tooltip.timeoutDelay());
|
|
2997
|
-
}
|
|
2998
|
-
onFocusIn() {
|
|
2999
|
-
this.tooltip.showTooltip();
|
|
3000
|
-
}
|
|
3001
|
-
onFocusOut() {
|
|
3002
|
-
if (this.tooltip.isContentHovered()) {
|
|
3003
|
-
return;
|
|
3004
|
-
}
|
|
3005
|
-
this.tooltip.hideTooltip();
|
|
3006
|
-
}
|
|
3007
|
-
ngAfterContentChecked() {
|
|
2981
|
+
element = signal(null);
|
|
2982
|
+
ngAfterContentInit() {
|
|
3008
2983
|
const element = this.host.nativeElement;
|
|
3009
2984
|
const firstChild = element.firstChild;
|
|
3010
2985
|
if (!firstChild) {
|
|
3011
2986
|
return;
|
|
3012
2987
|
}
|
|
3013
|
-
if (firstChild.nodeType === Node.TEXT_NODE &&
|
|
3014
|
-
|
|
3015
|
-
const
|
|
2988
|
+
if (firstChild.nodeType === Node.TEXT_NODE && firstChild.textContent?.trim()) {
|
|
2989
|
+
const span = this.renderer.createElement('span');
|
|
2990
|
+
const textNode = this.renderer.createText(firstChild.textContent.trim());
|
|
2991
|
+
this.renderer.appendChild(span, textNode);
|
|
3016
2992
|
this.renderer.addClass(span, "tedi-tooltip-trigger__text");
|
|
3017
|
-
this.renderer.addClass(span, "tedi-tooltip-trigger--focus");
|
|
3018
2993
|
this.renderer.setAttribute(span, "tabindex", "0");
|
|
3019
|
-
this.renderer.insertBefore(
|
|
3020
|
-
this.renderer.
|
|
3021
|
-
|
|
2994
|
+
this.renderer.insertBefore(this.host.nativeElement, span, firstChild);
|
|
2995
|
+
this.renderer.removeChild(this.host.nativeElement, firstChild);
|
|
2996
|
+
this.element.set(span);
|
|
3022
2997
|
}
|
|
3023
|
-
|
|
3024
|
-
|
|
3025
|
-
this.renderer.setAttribute(
|
|
2998
|
+
else {
|
|
2999
|
+
const element = firstChild;
|
|
3000
|
+
this.renderer.setAttribute(element, "tabindex", element.getAttribute("tabindex") ?? "0");
|
|
3001
|
+
this.element.set(element);
|
|
3026
3002
|
}
|
|
3027
3003
|
}
|
|
3028
3004
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TooltipTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3029
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TooltipTriggerComponent, isStandalone: true, selector: "tedi-tooltip-trigger",
|
|
3005
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TooltipTriggerComponent, isStandalone: true, selector: "tedi-tooltip-trigger", ngImport: i0, template: "<ng-content />", isInline: true });
|
|
3030
3006
|
}
|
|
3031
3007
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TooltipTriggerComponent, decorators: [{
|
|
3032
3008
|
type: Component,
|
|
3033
|
-
args: [{
|
|
3034
|
-
|
|
3035
|
-
|
|
3036
|
-
|
|
3037
|
-
|
|
3038
|
-
|
|
3039
|
-
args: ["click"]
|
|
3040
|
-
}], onMouseEnter: [{
|
|
3041
|
-
type: HostListener,
|
|
3042
|
-
args: ["mouseenter"]
|
|
3043
|
-
}], onMouseLeave: [{
|
|
3044
|
-
type: HostListener,
|
|
3045
|
-
args: ["mouseleave"]
|
|
3046
|
-
}], onFocusIn: [{
|
|
3047
|
-
type: HostListener,
|
|
3048
|
-
args: ["focusin"]
|
|
3049
|
-
}], onFocusOut: [{
|
|
3050
|
-
type: HostListener,
|
|
3051
|
-
args: ["focusout"]
|
|
3052
|
-
}] } });
|
|
3009
|
+
args: [{
|
|
3010
|
+
selector: "tedi-tooltip-trigger",
|
|
3011
|
+
standalone: true,
|
|
3012
|
+
template: "<ng-content />",
|
|
3013
|
+
}]
|
|
3014
|
+
}] });
|
|
3053
3015
|
|
|
3054
|
-
class
|
|
3016
|
+
class TooltipContentComponent {
|
|
3055
3017
|
/**
|
|
3056
|
-
* The position of the tooltip relative to the trigger element.
|
|
3018
|
+
* The position of the tooltip relative to the trigger element. If tooltip can't
|
|
3019
|
+
* be positioned in the specified direction, the CDK will try to position the tooltip
|
|
3020
|
+
* in the next direction in positions list.
|
|
3057
3021
|
* @default top
|
|
3058
3022
|
*/
|
|
3059
3023
|
position = input("top");
|
|
3060
3024
|
/**
|
|
3061
|
-
*
|
|
3062
|
-
* @default
|
|
3025
|
+
* The width of the tooltip. Can be 'none', 'small', 'medium', or 'large'.
|
|
3026
|
+
* @default medium
|
|
3063
3027
|
*/
|
|
3064
|
-
|
|
3028
|
+
maxWidth = input("medium");
|
|
3029
|
+
classes = computed(() => {
|
|
3030
|
+
return ["tedi-tooltip-content", `tedi-tooltip-content--${this.maxWidth()}`].join(" ");
|
|
3031
|
+
});
|
|
3032
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TooltipContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3033
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TooltipContentComponent, isStandalone: true, selector: "tedi-tooltip-content", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "class": "classes()" } }, ngImport: i0, template: "<ng-content />", isInline: true, styles: [".tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-tooltip-content{position:relative;background:var(--tooltip-background);color:var(--tooltip-text);box-shadow:0 1px 5px 0 var(--alpha-20, rgba(0, 0, 0, .2))}.tedi-tooltip-content{max-width:var(--tooltip-max-width-mobile)}@media (min-width: 576px){.tedi-tooltip-content{max-width:var(--tooltip-max-width-tablet)}}@media (min-width: 992px){.tedi-tooltip-content{max-width:var(--tooltip-max-width-desktop)}}.tedi-tooltip-content{padding:var(--tooltip-padding-y-mobile) var(--tooltip-padding-x-mobile)}@media (min-width: 576px){.tedi-tooltip-content{padding:var(--tooltip-padding-y-tablet) var(--tooltip-padding-x-tablet)}}@media (min-width: 992px){.tedi-tooltip-content{padding:var(--tooltip-padding-y-desktop) var(--tooltip-padding-x-desktop)}}.tedi-tooltip-content{border-radius:var(--tooltip-radius-mobile)}@media (min-width: 576px){.tedi-tooltip-content{border-radius:var(--tooltip-radius-tablet)}}@media (min-width: 992px){.tedi-tooltip-content{border-radius:var(--tooltip-radius-desktop)}}.tedi-tooltip-content:after{content:\"\";position:absolute;width:14px;height:14px;background:var(--tooltip-background);transform:rotate(45deg)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}.tedi-tooltip-content__arrow--top .tedi-tooltip-content:after{top:calc(100% - 7px);left:calc(50% - 7px)}.tedi-tooltip-content__arrow--bottom .tedi-tooltip-content:after{bottom:calc(100% - 7px);left:calc(50% - 7px)}.tedi-tooltip-content__arrow--left .tedi-tooltip-content:after{top:calc(50% - 7px);right:calc(100% - 7px)}.tedi-tooltip-content__arrow--right .tedi-tooltip-content:after{top:calc(50% - 7px);left:calc(100% - 7px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3034
|
+
}
|
|
3035
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TooltipContentComponent, decorators: [{
|
|
3036
|
+
type: Component,
|
|
3037
|
+
args: [{ standalone: true, selector: "tedi-tooltip-content", template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3038
|
+
"[class]": "classes()",
|
|
3039
|
+
"role": "tooltip",
|
|
3040
|
+
}, styles: [".tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-tooltip-content{position:relative;background:var(--tooltip-background);color:var(--tooltip-text);box-shadow:0 1px 5px 0 var(--alpha-20, rgba(0, 0, 0, .2))}.tedi-tooltip-content{max-width:var(--tooltip-max-width-mobile)}@media (min-width: 576px){.tedi-tooltip-content{max-width:var(--tooltip-max-width-tablet)}}@media (min-width: 992px){.tedi-tooltip-content{max-width:var(--tooltip-max-width-desktop)}}.tedi-tooltip-content{padding:var(--tooltip-padding-y-mobile) var(--tooltip-padding-x-mobile)}@media (min-width: 576px){.tedi-tooltip-content{padding:var(--tooltip-padding-y-tablet) var(--tooltip-padding-x-tablet)}}@media (min-width: 992px){.tedi-tooltip-content{padding:var(--tooltip-padding-y-desktop) var(--tooltip-padding-x-desktop)}}.tedi-tooltip-content{border-radius:var(--tooltip-radius-mobile)}@media (min-width: 576px){.tedi-tooltip-content{border-radius:var(--tooltip-radius-tablet)}}@media (min-width: 992px){.tedi-tooltip-content{border-radius:var(--tooltip-radius-desktop)}}.tedi-tooltip-content:after{content:\"\";position:absolute;width:14px;height:14px;background:var(--tooltip-background);transform:rotate(45deg)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}.tedi-tooltip-content__arrow--top .tedi-tooltip-content:after{top:calc(100% - 7px);left:calc(50% - 7px)}.tedi-tooltip-content__arrow--bottom .tedi-tooltip-content:after{bottom:calc(100% - 7px);left:calc(50% - 7px)}.tedi-tooltip-content__arrow--left .tedi-tooltip-content:after{top:calc(50% - 7px);right:calc(100% - 7px)}.tedi-tooltip-content__arrow--right .tedi-tooltip-content:after{top:calc(50% - 7px);left:calc(100% - 7px)}\n"] }]
|
|
3041
|
+
}] });
|
|
3042
|
+
|
|
3043
|
+
const TOOLTIP_ARROW_OFFSET = 15;
|
|
3044
|
+
const TOOLTIP_TIMEOUT_MS = 150;
|
|
3045
|
+
const positionTop = {
|
|
3046
|
+
originX: "center",
|
|
3047
|
+
originY: "top",
|
|
3048
|
+
overlayX: "center",
|
|
3049
|
+
overlayY: "bottom",
|
|
3050
|
+
panelClass: "tedi-tooltip-content__arrow--top",
|
|
3051
|
+
offsetY: -TOOLTIP_ARROW_OFFSET,
|
|
3052
|
+
};
|
|
3053
|
+
const positionBottom = {
|
|
3054
|
+
originX: "center",
|
|
3055
|
+
originY: "bottom",
|
|
3056
|
+
overlayX: "center",
|
|
3057
|
+
overlayY: "top",
|
|
3058
|
+
panelClass: "tedi-tooltip-content__arrow--bottom",
|
|
3059
|
+
offsetY: TOOLTIP_ARROW_OFFSET,
|
|
3060
|
+
};
|
|
3061
|
+
const positionRight = {
|
|
3062
|
+
originX: "end",
|
|
3063
|
+
originY: "center",
|
|
3064
|
+
overlayX: "start",
|
|
3065
|
+
overlayY: "center",
|
|
3066
|
+
panelClass: "tedi-tooltip-content__arrow--left",
|
|
3067
|
+
offsetX: TOOLTIP_ARROW_OFFSET,
|
|
3068
|
+
};
|
|
3069
|
+
const positionLeft = {
|
|
3070
|
+
originX: "start",
|
|
3071
|
+
originY: "center",
|
|
3072
|
+
overlayX: "end",
|
|
3073
|
+
overlayY: "center",
|
|
3074
|
+
panelClass: "tedi-tooltip-content__arrow--right",
|
|
3075
|
+
offsetX: -TOOLTIP_ARROW_OFFSET,
|
|
3076
|
+
};
|
|
3077
|
+
/**
|
|
3078
|
+
* TooltipComponent is a component that displays a Tooltip when the user hovers over or clicks on an element.
|
|
3079
|
+
* It uses the Angular CDK Overlay module to create a flexible connected overlay that can be positioned relative to the trigger element.
|
|
3080
|
+
* The Tooltip can be configured to open on hover or click, and can be positioned at the top, bottom, left, or right of the trigger element.
|
|
3081
|
+
*
|
|
3082
|
+
* Angular CDK Overlay: How positioning works:
|
|
3083
|
+
* https://www.youtube.com/watch?v=IpRQBtBN3iU&ab_channel=BrianTreese
|
|
3084
|
+
*
|
|
3085
|
+
* Angular CDK Overlay: Adding accessibility features
|
|
3086
|
+
* https://www.youtube.com/watch?v=_0JGZATel-8&ab_channel=BrianTreese
|
|
3087
|
+
*/
|
|
3088
|
+
class TooltipComponent {
|
|
3065
3089
|
/**
|
|
3066
|
-
*
|
|
3067
|
-
*
|
|
3068
|
-
* @default body
|
|
3090
|
+
* The trigger event that opens the tooltip. Can be 'click' or 'hover'.
|
|
3091
|
+
* @default hover
|
|
3069
3092
|
*/
|
|
3070
|
-
|
|
3071
|
-
|
|
3072
|
-
|
|
3073
|
-
|
|
3074
|
-
|
|
3075
|
-
|
|
3076
|
-
|
|
3077
|
-
|
|
3078
|
-
|
|
3079
|
-
|
|
3080
|
-
|
|
3081
|
-
|
|
3082
|
-
|
|
3083
|
-
if (!
|
|
3084
|
-
|
|
3085
|
-
this.floatUiComponent().show();
|
|
3086
|
-
this.floatUiDisplay.set("block");
|
|
3093
|
+
openWith = input("hover");
|
|
3094
|
+
trigger;
|
|
3095
|
+
content;
|
|
3096
|
+
portal;
|
|
3097
|
+
overlayRef;
|
|
3098
|
+
overlay = inject(Overlay);
|
|
3099
|
+
renderer = inject(Renderer2);
|
|
3100
|
+
eventListeners = [];
|
|
3101
|
+
closeTimeout = signal(null);
|
|
3102
|
+
isTriggerHovered = signal(false);
|
|
3103
|
+
isTooltipHovered = signal(false);
|
|
3104
|
+
ngAfterContentInit() {
|
|
3105
|
+
const trigger = this.trigger?.element();
|
|
3106
|
+
if (!trigger) {
|
|
3107
|
+
return;
|
|
3087
3108
|
}
|
|
3109
|
+
this.eventListeners.push(this.renderer.listen(trigger, "focus", () => {
|
|
3110
|
+
if (!this.isTriggerHovered()) {
|
|
3111
|
+
this.openTooltip();
|
|
3112
|
+
}
|
|
3113
|
+
}), this.renderer.listen(trigger, "blur", () => {
|
|
3114
|
+
if (!this.isTooltipHovered()) {
|
|
3115
|
+
this.closeTooltip();
|
|
3116
|
+
}
|
|
3117
|
+
}), this.renderer.listen(trigger, "mouseenter", () => {
|
|
3118
|
+
this.isTriggerHovered.set(true);
|
|
3119
|
+
if (this.openWith() === "hover") {
|
|
3120
|
+
this.openTooltip();
|
|
3121
|
+
}
|
|
3122
|
+
}), this.renderer.listen(trigger, "mouseleave", () => {
|
|
3123
|
+
this.isTriggerHovered.set(false);
|
|
3124
|
+
if (this.openWith() === "hover") {
|
|
3125
|
+
this.scheduleClose();
|
|
3126
|
+
}
|
|
3127
|
+
}), this.renderer.listen(trigger, "click", () => {
|
|
3128
|
+
if (this.openWith() === "click") {
|
|
3129
|
+
this.toggleTooltip();
|
|
3130
|
+
}
|
|
3131
|
+
}), this.renderer.listen("document", "click", (event) => {
|
|
3132
|
+
const target = event.target;
|
|
3133
|
+
const clickedInsideTrigger = trigger.contains(target);
|
|
3134
|
+
const tooltip = this.overlayRef?.overlayElement;
|
|
3135
|
+
const clickedInsideTooltip = tooltip?.contains(target);
|
|
3136
|
+
if (!clickedInsideTrigger && !clickedInsideTooltip) {
|
|
3137
|
+
this.closeTooltip();
|
|
3138
|
+
}
|
|
3139
|
+
}), this.renderer.listen("document", "keydown", (event) => {
|
|
3140
|
+
if (event.key === "Escape") {
|
|
3141
|
+
this.closeTooltip();
|
|
3142
|
+
}
|
|
3143
|
+
}));
|
|
3088
3144
|
}
|
|
3089
|
-
|
|
3090
|
-
|
|
3091
|
-
|
|
3092
|
-
|
|
3145
|
+
ngOnDestroy() {
|
|
3146
|
+
this.eventListeners.forEach(off => off());
|
|
3147
|
+
this.eventListeners.length = 0;
|
|
3148
|
+
this.closeTooltip();
|
|
3149
|
+
}
|
|
3150
|
+
openTooltip() {
|
|
3151
|
+
this.clearCloseTimeout();
|
|
3152
|
+
if (!this.overlayRef || !this.overlayRef.hasAttached()) {
|
|
3153
|
+
this.overlayRef = this.overlay.create(this.getOverlayConfig());
|
|
3154
|
+
this.overlayRef.attach(this.portal);
|
|
3155
|
+
this.addTooltipListeners();
|
|
3093
3156
|
}
|
|
3094
3157
|
}
|
|
3158
|
+
closeTooltip() {
|
|
3159
|
+
this.overlayRef?.detach();
|
|
3160
|
+
}
|
|
3095
3161
|
toggleTooltip() {
|
|
3096
|
-
if (this.
|
|
3097
|
-
this.
|
|
3162
|
+
if (this.overlayRef?.hasAttached()) {
|
|
3163
|
+
this.closeTooltip();
|
|
3098
3164
|
}
|
|
3099
3165
|
else {
|
|
3100
|
-
this.
|
|
3166
|
+
this.openTooltip();
|
|
3101
3167
|
}
|
|
3102
3168
|
}
|
|
3103
|
-
|
|
3104
|
-
const
|
|
3105
|
-
|
|
3106
|
-
|
|
3107
|
-
if (container) {
|
|
3108
|
-
container.setAttribute("aria-labelledby", container.id + "_trigger");
|
|
3109
|
-
this.containerId.set(container.id);
|
|
3169
|
+
addTooltipListeners() {
|
|
3170
|
+
const tooltip = this.overlayRef?.overlayElement.querySelector(".tedi-tooltip-content");
|
|
3171
|
+
if (!tooltip) {
|
|
3172
|
+
return;
|
|
3110
3173
|
}
|
|
3174
|
+
const enterListener = this.renderer.listen(tooltip, "mouseenter", () => {
|
|
3175
|
+
this.isTooltipHovered.set(true);
|
|
3176
|
+
this.clearCloseTimeout();
|
|
3177
|
+
});
|
|
3178
|
+
const leaveListener = this.renderer.listen(tooltip, "mouseleave", () => {
|
|
3179
|
+
this.isTooltipHovered.set(false);
|
|
3180
|
+
if (this.openWith() === "hover") {
|
|
3181
|
+
this.scheduleClose();
|
|
3182
|
+
}
|
|
3183
|
+
});
|
|
3184
|
+
this.eventListeners.push(enterListener, leaveListener);
|
|
3111
3185
|
}
|
|
3112
|
-
|
|
3113
|
-
|
|
3114
|
-
|
|
3115
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
3116
|
-
type: Component,
|
|
3117
|
-
args: [{ standalone: true, selector: "tedi-tooltip", imports: [NgxFloatUiModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n applyClass=\"float-ui-container-tooltip\"\n ariaRole=\"tooltip\"\n ariaHidden=\"true\"\n style=\"display: contents\"\n looseTrigger=\"none\"\n [floatUiLoose]=\"floatUiComponent\"\n [loosePlacement]=\"position()\"\n [preventOverflow]=\"position().includes('auto') ? false : preventOverflow()\"\n [disableAnimation]=\"true\"\n [targetElement]=\"tooltipTrigger().host.nativeElement\"\n [appendTo]=\"appendTo()\"\n>\n <ng-content select=\"tedi-tooltip-trigger\" />\n</div>\n<float-ui-content #floatUiComponent [style.display]=\"floatUiDisplay()\">\n <ng-content select=\"tedi-tooltip-content\" />\n</float-ui-content>\n", styles: ["tedi-tooltip{display:contents}float-ui-content .float-ui-container-tooltip{padding:0;border:0;box-shadow:0 1px 5px 0 var(--alpha-20, rgba(0, 0, 0, .2));z-index:var(--z-index-tooltip)}float-ui-content .float-ui-container-tooltip{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){float-ui-content .float-ui-container-tooltip{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){float-ui-content .float-ui-container-tooltip{border-radius:var(--popover-radius-rounded-desktop)}}float-ui-content .float-ui-container-tooltip .float-ui-arrow{width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0px -5px -5px 0px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right] .float-ui-arrow{transform:rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-tooltip-content{position:relative;display:block;background:var(--tooltip-background);color:var(--tooltip-text);box-shadow:0 1px 5px 0 var(--alpha-20, rgba(0, 0, 0, .2))}.tedi-tooltip-content{max-width:var(--tooltip-max-width-mobile)}@media (min-width: 576px){.tedi-tooltip-content{max-width:var(--tooltip-max-width-tablet)}}@media (min-width: 992px){.tedi-tooltip-content{max-width:var(--tooltip-max-width-desktop)}}.tedi-tooltip-content{padding:var(--tooltip-padding-y-mobile) var(--tooltip-padding-x-mobile)}@media (min-width: 576px){.tedi-tooltip-content{padding:var(--tooltip-padding-y-tablet) var(--tooltip-padding-x-tablet)}}@media (min-width: 992px){.tedi-tooltip-content{padding:var(--tooltip-padding-y-desktop) var(--tooltip-padding-x-desktop)}}.tedi-tooltip-content{border-radius:var(--tooltip-radius-mobile)}@media (min-width: 576px){.tedi-tooltip-content{border-radius:var(--tooltip-radius-tablet)}}@media (min-width: 992px){.tedi-tooltip-content{border-radius:var(--tooltip-radius-desktop)}}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"] }]
|
|
3118
|
-
}] });
|
|
3119
|
-
|
|
3120
|
-
class TooltipContentComponent {
|
|
3121
|
-
/**
|
|
3122
|
-
* The width of the tooltip. Can be 'none', 'small', 'medium', or 'large'.
|
|
3123
|
-
* @default medium
|
|
3124
|
-
*/
|
|
3125
|
-
maxWidth = input("medium");
|
|
3126
|
-
tooltip = inject(TooltipComponent);
|
|
3127
|
-
classes = computed(() => {
|
|
3128
|
-
return [
|
|
3129
|
-
"tedi-tooltip-content",
|
|
3130
|
-
`tedi-tooltip-content--${this.maxWidth()}`,
|
|
3131
|
-
].join(" ");
|
|
3132
|
-
});
|
|
3133
|
-
onMouseEnter() {
|
|
3134
|
-
clearTimeout(this.tooltip.hideTimeout);
|
|
3135
|
-
this.tooltip.isContentHovered.set(true);
|
|
3186
|
+
scheduleClose() {
|
|
3187
|
+
this.clearCloseTimeout();
|
|
3188
|
+
this.closeTimeout.set(setTimeout(() => this.closeTooltip(), TOOLTIP_TIMEOUT_MS));
|
|
3136
3189
|
}
|
|
3137
|
-
|
|
3138
|
-
this.
|
|
3139
|
-
|
|
3190
|
+
clearCloseTimeout() {
|
|
3191
|
+
const timeout = this.closeTimeout();
|
|
3192
|
+
if (timeout) {
|
|
3193
|
+
clearTimeout(timeout);
|
|
3194
|
+
}
|
|
3195
|
+
this.closeTimeout.set(null);
|
|
3140
3196
|
}
|
|
3141
|
-
|
|
3142
|
-
|
|
3197
|
+
getOverlayConfig() {
|
|
3198
|
+
const positionMap = {
|
|
3199
|
+
top: [positionTop, positionBottom, positionLeft, positionRight],
|
|
3200
|
+
bottom: [positionBottom, positionTop, positionLeft, positionRight],
|
|
3201
|
+
left: [positionLeft, positionRight, positionTop, positionBottom],
|
|
3202
|
+
right: [positionRight, positionLeft, positionTop, positionBottom],
|
|
3203
|
+
};
|
|
3204
|
+
const position = this.content?.position() ?? 'top';
|
|
3205
|
+
const strategy = this.overlay
|
|
3206
|
+
.position()
|
|
3207
|
+
.flexibleConnectedTo(this.trigger.element())
|
|
3208
|
+
.withPositions(positionMap[position]);
|
|
3209
|
+
return {
|
|
3210
|
+
hasBackdrop: false,
|
|
3211
|
+
scrollStrategy: this.overlay.scrollStrategies.close(),
|
|
3212
|
+
positionStrategy: strategy,
|
|
3213
|
+
};
|
|
3214
|
+
}
|
|
3215
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3216
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TooltipComponent, isStandalone: true, selector: "tedi-tooltip", inputs: { openWith: { classPropertyName: "openWith", publicName: "openWith", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "trigger", first: true, predicate: TooltipTriggerComponent, descendants: true }, { propertyName: "content", first: true, predicate: TooltipContentComponent, descendants: true }], viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true, static: true }], ngImport: i0, template: "<ng-content select=\"tedi-tooltip-trigger\" />\n<ng-template cdkPortal>\n <ng-content select=\"tedi-tooltip-content\" />\n</ng-template>", styles: [".tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-tooltip-content{position:relative;background:var(--tooltip-background);color:var(--tooltip-text);box-shadow:0 1px 5px 0 var(--alpha-20, rgba(0, 0, 0, .2))}.tedi-tooltip-content{max-width:var(--tooltip-max-width-mobile)}@media (min-width: 576px){.tedi-tooltip-content{max-width:var(--tooltip-max-width-tablet)}}@media (min-width: 992px){.tedi-tooltip-content{max-width:var(--tooltip-max-width-desktop)}}.tedi-tooltip-content{padding:var(--tooltip-padding-y-mobile) var(--tooltip-padding-x-mobile)}@media (min-width: 576px){.tedi-tooltip-content{padding:var(--tooltip-padding-y-tablet) var(--tooltip-padding-x-tablet)}}@media (min-width: 992px){.tedi-tooltip-content{padding:var(--tooltip-padding-y-desktop) var(--tooltip-padding-x-desktop)}}.tedi-tooltip-content{border-radius:var(--tooltip-radius-mobile)}@media (min-width: 576px){.tedi-tooltip-content{border-radius:var(--tooltip-radius-tablet)}}@media (min-width: 992px){.tedi-tooltip-content{border-radius:var(--tooltip-radius-desktop)}}.tedi-tooltip-content:after{content:\"\";position:absolute;width:14px;height:14px;background:var(--tooltip-background);transform:rotate(45deg)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}.tedi-tooltip-content__arrow--top .tedi-tooltip-content:after{top:calc(100% - 7px);left:calc(50% - 7px)}.tedi-tooltip-content__arrow--bottom .tedi-tooltip-content:after{bottom:calc(100% - 7px);left:calc(50% - 7px)}.tedi-tooltip-content__arrow--left .tedi-tooltip-content:after{top:calc(50% - 7px);right:calc(100% - 7px)}.tedi-tooltip-content__arrow--right .tedi-tooltip-content:after{top:calc(50% - 7px);left:calc(100% - 7px)}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$2.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3143
3217
|
}
|
|
3144
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type:
|
|
3218
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
3145
3219
|
type: Component,
|
|
3146
|
-
args: [{ standalone: true, selector: "tedi-tooltip
|
|
3147
|
-
|
|
3148
|
-
|
|
3149
|
-
|
|
3150
|
-
|
|
3151
|
-
type:
|
|
3152
|
-
args: [
|
|
3153
|
-
}],
|
|
3154
|
-
type:
|
|
3155
|
-
args: [
|
|
3220
|
+
args: [{ standalone: true, selector: "tedi-tooltip", imports: [OverlayModule, PortalModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"tedi-tooltip-trigger\" />\n<ng-template cdkPortal>\n <ng-content select=\"tedi-tooltip-content\" />\n</ng-template>", styles: [".tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-tooltip-content{position:relative;background:var(--tooltip-background);color:var(--tooltip-text);box-shadow:0 1px 5px 0 var(--alpha-20, rgba(0, 0, 0, .2))}.tedi-tooltip-content{max-width:var(--tooltip-max-width-mobile)}@media (min-width: 576px){.tedi-tooltip-content{max-width:var(--tooltip-max-width-tablet)}}@media (min-width: 992px){.tedi-tooltip-content{max-width:var(--tooltip-max-width-desktop)}}.tedi-tooltip-content{padding:var(--tooltip-padding-y-mobile) var(--tooltip-padding-x-mobile)}@media (min-width: 576px){.tedi-tooltip-content{padding:var(--tooltip-padding-y-tablet) var(--tooltip-padding-x-tablet)}}@media (min-width: 992px){.tedi-tooltip-content{padding:var(--tooltip-padding-y-desktop) var(--tooltip-padding-x-desktop)}}.tedi-tooltip-content{border-radius:var(--tooltip-radius-mobile)}@media (min-width: 576px){.tedi-tooltip-content{border-radius:var(--tooltip-radius-tablet)}}@media (min-width: 992px){.tedi-tooltip-content{border-radius:var(--tooltip-radius-desktop)}}.tedi-tooltip-content:after{content:\"\";position:absolute;width:14px;height:14px;background:var(--tooltip-background);transform:rotate(45deg)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}.tedi-tooltip-content__arrow--top .tedi-tooltip-content:after{top:calc(100% - 7px);left:calc(50% - 7px)}.tedi-tooltip-content__arrow--bottom .tedi-tooltip-content:after{bottom:calc(100% - 7px);left:calc(50% - 7px)}.tedi-tooltip-content__arrow--left .tedi-tooltip-content:after{top:calc(50% - 7px);right:calc(100% - 7px)}.tedi-tooltip-content__arrow--right .tedi-tooltip-content:after{top:calc(50% - 7px);left:calc(100% - 7px)}\n"] }]
|
|
3221
|
+
}], propDecorators: { trigger: [{
|
|
3222
|
+
type: ContentChild,
|
|
3223
|
+
args: [TooltipTriggerComponent]
|
|
3224
|
+
}], content: [{
|
|
3225
|
+
type: ContentChild,
|
|
3226
|
+
args: [TooltipContentComponent]
|
|
3227
|
+
}], portal: [{
|
|
3228
|
+
type: ViewChild,
|
|
3229
|
+
args: [CdkPortal, { static: true }]
|
|
3156
3230
|
}] } });
|
|
3157
3231
|
|
|
3158
3232
|
class SideNavItemComponent {
|
|
@@ -3172,7 +3246,7 @@ class SideNavItemComponent {
|
|
|
3172
3246
|
/**
|
|
3173
3247
|
* Router link
|
|
3174
3248
|
*/
|
|
3175
|
-
|
|
3249
|
+
routerLink = input();
|
|
3176
3250
|
dropdown;
|
|
3177
3251
|
textContent = signal("");
|
|
3178
3252
|
sidenavService = inject(SideNavService);
|
|
@@ -3225,7 +3299,7 @@ class SideNavItemComponent {
|
|
|
3225
3299
|
this.dropdown.open.update((prev) => !prev);
|
|
3226
3300
|
}
|
|
3227
3301
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SideNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3228
|
-
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: { properties: { "class": "classes()" } }, queries: [{ propertyName: "dropdown", first: true, predicate: i0.forwardRef(() => SideNavDropdownComponent), descendants: true }], ngImport: i0, 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(--side-navigation-item-background-active)}.tedi-sidenav-item--selected .tedi-sidenav-item__text{font-weight:var(--body-bold-weight-mobile)}@media (min-width: 576px){.tedi-sidenav-item--selected .tedi-sidenav-item__text{font-weight:var(--body-bold-weight-tablet)}}@media (min-width: 992px){.tedi-sidenav-item--selected .tedi-sidenav-item__text{font-weight:var(--body-bold-weight-desktop)}}.tedi-sidenav-item__trigger{width:100%;position:relative;display:flex;cursor:pointer;gap:var(--_gap)}.tedi-sidenav-item__trigger{--_gap: var(--side-navigation-item-inner-spacing-mobile)}@media (min-width: 576px){.tedi-sidenav-item__trigger{--_gap: var(--side-navigation-item-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-sidenav-item__trigger{--_gap: var(--side-navigation-item-inner-spacing-desktop)}}.tedi-sidenav-item__trigger:hover{background:var(--side-navigation-item-background-hover)}.tedi-sidenav-item__trigger:has(>.tedi-sidenav-item__caret-button:hover){background:transparent}.tedi-sidenav-item__title{width:100%;min-height:var(--_sidenav-item-min-height);display:flex;align-items:center;gap:var(--_gap);text-decoration:none;text-align:start;border:0;background:transparent;font-size:inherit;cursor:pointer;color:var(--side-navigation-item-text);padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-left)}.tedi-sidenav-item__title:focus-visible{outline:var(--borders-02) solid var(--primary-500);outline-offset:var(--borders-01)}.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{min-height:var(--_sidenav-item-min-height);display:flex;align-items:center;justify-items:center;border:0;background:transparent;font-size:inherit;cursor:pointer;padding:0}.tedi-sidenav-item__caret-button:hover .tedi-sidenav-item__caret-container{background-color:var(--side-navigation-item-background-arrow-button-active)}.tedi-sidenav-item__caret-button:focus-visible .tedi-sidenav-item__caret-container{outline:var(--borders-02) solid var(--primary-500);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;justify-content:center;align-items:center;width:fit-content;height:fit-content}.tedi-sidenav-item__caret-container{border-radius:var(--button-radius-sm-mobile)}@media (min-width: 576px){.tedi-sidenav-item__caret-container{border-radius:var(--button-radius-sm-tablet)}}@media (min-width: 992px){.tedi-sidenav-item__caret-container{border-radius:var(--button-radius-sm-desktop)}}.tedi-sidenav-item__caret{font-size:var(--_sidenav-item-caret-size)!important;transition:transform var(--_sidenav-transition-duration) ease;margin-left:auto}.tedi-sidenav-item__caret[data-open=true]{transform:rotate(180deg)}.tedi-sidenav-item__text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:enable-wrap 0s var(--_sidenav-transition-duration) forwards}.tedi-sidenav-item__link{text-decoration:none;color:var(--side-navigation-item-text);padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-left)}.tedi-sidenav-item__link:hover{background:var(--side-navigation-item-background-hover)}.tedi-sidenav-item__link .tedi-sidenav-item__text{white-space:wrap}@keyframes enable-wrap{to{white-space:normal;max-width:none}}\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", "appendTo", "timeoutDelay"] }, { kind: "component", type: TooltipTriggerComponent, selector: "tedi-tooltip-trigger" }, { kind: "component", type: TooltipContentComponent, selector: "tedi-tooltip-content", inputs: ["maxWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3302
|
+
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 }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, queries: [{ propertyName: "dropdown", first: true, predicate: i0.forwardRef(() => SideNavDropdownComponent), descendants: true }], ngImport: i0, template: "@if (sidenavService.isMobile()) {\n @if (sidenavService.isMobileItemOpen() && dropdown?.open()) {\n <ng-container *ngIf=\"!href() && !routerLink(); 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=\"routerLink(); else mobileHref\">\n <a\n class=\"tedi-sidenav-item__link\"\n [routerLink]=\"routerLink()\"\n tabindex=\"0\"\n >\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()\" tabindex=\"0\">\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 {\n <tedi-tooltip>\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\" [style]=\"{ 'display': sidenavService.tooltipEnabled() ? 'block' : 'none' }\">\n {{ textContent() }}\n </tedi-tooltip-content>\n </tedi-tooltip>\n}\n\n<ng-template #buttonOrLink>\n <ng-container *ngIf=\"!href() && !routerLink(); else hasLink\">\n <button\n class=\"tedi-sidenav-item__title\"\n (click)=\"toggleDropdown()\"\n tabindex=\"0\"\n >\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\n class=\"tedi-sidenav-item__title\"\n (click)=\"toggleDropdown()\"\n tabindex=\"0\"\n >\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=\"routerLink(); else normalHref\">\n <a\n class=\"tedi-sidenav-item__title\"\n [routerLink]=\"routerLink()\"\n tabindex=\"0\"\n >\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()\" tabindex=\"0\">\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 tabindex=\"0\"\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(--side-navigation-item-background-active)}.tedi-sidenav-item--selected .tedi-sidenav-item__text{font-weight:var(--body-bold-weight-mobile)}@media (min-width: 576px){.tedi-sidenav-item--selected .tedi-sidenav-item__text{font-weight:var(--body-bold-weight-tablet)}}@media (min-width: 992px){.tedi-sidenav-item--selected .tedi-sidenav-item__text{font-weight:var(--body-bold-weight-desktop)}}.tedi-sidenav-item__trigger{position:relative;display:flex;cursor:pointer;gap:var(--_gap)}.tedi-sidenav-item__trigger{--_gap: var(--side-navigation-item-inner-spacing-mobile)}@media (min-width: 576px){.tedi-sidenav-item__trigger{--_gap: var(--side-navigation-item-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-sidenav-item__trigger{--_gap: var(--side-navigation-item-inner-spacing-desktop)}}.tedi-sidenav-item__trigger:hover{background:var(--side-navigation-item-background-hover)}.tedi-sidenav-item__trigger:has(>.tedi-sidenav-item__caret-button:hover){background:transparent}.tedi-sidenav-item__title{width:100%;min-height:var(--_sidenav-item-min-height);display:flex;align-items:center;gap:var(--_gap);text-decoration:none;text-align:start;border:0;background:transparent;font-size:inherit;cursor:pointer;color:var(--side-navigation-item-text);padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-left)}.tedi-sidenav-item__title:focus-visible{outline:var(--borders-02) solid var(--primary-500);outline-offset:var(--borders-01)}.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{min-height:var(--_sidenav-item-min-height);display:flex;align-items:center;justify-items:center;border:0;background:transparent;font-size:inherit;cursor:pointer;padding:0}.tedi-sidenav-item__caret-button:hover .tedi-sidenav-item__caret-container{background-color:var(--side-navigation-item-background-arrow-button-active)}.tedi-sidenav-item__caret-button:focus-visible .tedi-sidenav-item__caret-container{outline:var(--borders-02) solid var(--primary-500);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;justify-content:center;align-items:center;width:fit-content;height:fit-content}.tedi-sidenav-item__caret-container{border-radius:var(--button-radius-sm-mobile)}@media (min-width: 576px){.tedi-sidenav-item__caret-container{border-radius:var(--button-radius-sm-tablet)}}@media (min-width: 992px){.tedi-sidenav-item__caret-container{border-radius:var(--button-radius-sm-desktop)}}.tedi-sidenav-item__caret{font-size:var(--_sidenav-item-caret-size)!important;transition:transform var(--_sidenav-transition-duration) ease;margin-left:auto}.tedi-sidenav-item__caret[data-open=true]{transform:rotate(180deg)}.tedi-sidenav-item__text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:enable-wrap 0s var(--_sidenav-transition-duration) forwards}.tedi-sidenav-item__link{text-decoration:none;color:var(--side-navigation-item-text);padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-left)}.tedi-sidenav-item__link:hover{background:var(--side-navigation-item-background-hover)}.tedi-sidenav-item__link .tedi-sidenav-item__text{white-space:wrap}@keyframes enable-wrap{to{white-space:normal;max-width:none}}\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: ["openWith"] }, { kind: "component", type: TooltipTriggerComponent, selector: "tedi-tooltip-trigger" }, { kind: "component", type: TooltipContentComponent, selector: "tedi-tooltip-content", inputs: ["position", "maxWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3229
3303
|
}
|
|
3230
3304
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SideNavItemComponent, decorators: [{
|
|
3231
3305
|
type: Component,
|
|
@@ -3240,7 +3314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3240
3314
|
TooltipContentComponent,
|
|
3241
3315
|
], host: {
|
|
3242
3316
|
"[class]": "classes()",
|
|
3243
|
-
}, template: "@if (sidenavService.isMobile()) {\n @if (sidenavService.isMobileItemOpen() && dropdown?.open()) {\n <ng-container *ngIf=\"!href() && !
|
|
3317
|
+
}, template: "@if (sidenavService.isMobile()) {\n @if (sidenavService.isMobileItemOpen() && dropdown?.open()) {\n <ng-container *ngIf=\"!href() && !routerLink(); 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=\"routerLink(); else mobileHref\">\n <a\n class=\"tedi-sidenav-item__link\"\n [routerLink]=\"routerLink()\"\n tabindex=\"0\"\n >\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()\" tabindex=\"0\">\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 {\n <tedi-tooltip>\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\" [style]=\"{ 'display': sidenavService.tooltipEnabled() ? 'block' : 'none' }\">\n {{ textContent() }}\n </tedi-tooltip-content>\n </tedi-tooltip>\n}\n\n<ng-template #buttonOrLink>\n <ng-container *ngIf=\"!href() && !routerLink(); else hasLink\">\n <button\n class=\"tedi-sidenav-item__title\"\n (click)=\"toggleDropdown()\"\n tabindex=\"0\"\n >\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\n class=\"tedi-sidenav-item__title\"\n (click)=\"toggleDropdown()\"\n tabindex=\"0\"\n >\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=\"routerLink(); else normalHref\">\n <a\n class=\"tedi-sidenav-item__title\"\n [routerLink]=\"routerLink()\"\n tabindex=\"0\"\n >\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()\" tabindex=\"0\">\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 tabindex=\"0\"\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(--side-navigation-item-background-active)}.tedi-sidenav-item--selected .tedi-sidenav-item__text{font-weight:var(--body-bold-weight-mobile)}@media (min-width: 576px){.tedi-sidenav-item--selected .tedi-sidenav-item__text{font-weight:var(--body-bold-weight-tablet)}}@media (min-width: 992px){.tedi-sidenav-item--selected .tedi-sidenav-item__text{font-weight:var(--body-bold-weight-desktop)}}.tedi-sidenav-item__trigger{position:relative;display:flex;cursor:pointer;gap:var(--_gap)}.tedi-sidenav-item__trigger{--_gap: var(--side-navigation-item-inner-spacing-mobile)}@media (min-width: 576px){.tedi-sidenav-item__trigger{--_gap: var(--side-navigation-item-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-sidenav-item__trigger{--_gap: var(--side-navigation-item-inner-spacing-desktop)}}.tedi-sidenav-item__trigger:hover{background:var(--side-navigation-item-background-hover)}.tedi-sidenav-item__trigger:has(>.tedi-sidenav-item__caret-button:hover){background:transparent}.tedi-sidenav-item__title{width:100%;min-height:var(--_sidenav-item-min-height);display:flex;align-items:center;gap:var(--_gap);text-decoration:none;text-align:start;border:0;background:transparent;font-size:inherit;cursor:pointer;color:var(--side-navigation-item-text);padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-left)}.tedi-sidenav-item__title:focus-visible{outline:var(--borders-02) solid var(--primary-500);outline-offset:var(--borders-01)}.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{min-height:var(--_sidenav-item-min-height);display:flex;align-items:center;justify-items:center;border:0;background:transparent;font-size:inherit;cursor:pointer;padding:0}.tedi-sidenav-item__caret-button:hover .tedi-sidenav-item__caret-container{background-color:var(--side-navigation-item-background-arrow-button-active)}.tedi-sidenav-item__caret-button:focus-visible .tedi-sidenav-item__caret-container{outline:var(--borders-02) solid var(--primary-500);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;justify-content:center;align-items:center;width:fit-content;height:fit-content}.tedi-sidenav-item__caret-container{border-radius:var(--button-radius-sm-mobile)}@media (min-width: 576px){.tedi-sidenav-item__caret-container{border-radius:var(--button-radius-sm-tablet)}}@media (min-width: 992px){.tedi-sidenav-item__caret-container{border-radius:var(--button-radius-sm-desktop)}}.tedi-sidenav-item__caret{font-size:var(--_sidenav-item-caret-size)!important;transition:transform var(--_sidenav-transition-duration) ease;margin-left:auto}.tedi-sidenav-item__caret[data-open=true]{transform:rotate(180deg)}.tedi-sidenav-item__text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:enable-wrap 0s var(--_sidenav-transition-duration) forwards}.tedi-sidenav-item__link{text-decoration:none;color:var(--side-navigation-item-text);padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-left)}.tedi-sidenav-item__link:hover{background:var(--side-navigation-item-background-hover)}.tedi-sidenav-item__link .tedi-sidenav-item__text{white-space:wrap}@keyframes enable-wrap{to{white-space:normal;max-width:none}}\n"] }]
|
|
3244
3318
|
}], propDecorators: { dropdown: [{
|
|
3245
3319
|
type: ContentChild,
|
|
3246
3320
|
args: [forwardRef(() => SideNavDropdownComponent)]
|
|
@@ -3265,13 +3339,13 @@ class SideNavDropdownComponent {
|
|
|
3265
3339
|
return classList.join(" ");
|
|
3266
3340
|
});
|
|
3267
3341
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SideNavDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3268
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SideNavDropdownComponent, isStandalone: true, selector: "tedi-sidenav-dropdown", host: { properties: { "class": "classes()" } }, ngImport: i0, 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.
|
|
3342
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SideNavDropdownComponent, isStandalone: true, selector: "tedi-sidenav-dropdown", host: { properties: { "class": "classes()" } }, ngImport: i0, 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.routerLink()) {\n <tedi-sidenav-dropdown-item\n class=\"tedi-sidenav-dropdown-item--parent\"\n [routerLink]=\"sidenavItem.routerLink()\"\n >\n {{ sidenavItem.textContent() }}\n </tedi-sidenav-dropdown-item>\n }\n <ng-content></ng-content>\n</div>\n", styles: [".tedi-sidenav-dropdown{display:grid;grid-template-rows:0fr;overflow:hidden;visibility: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{min-height:0;transition:visibility var(--_sidenav-transition-duration) ease;visibility:hidden}\n"], dependencies: [{ kind: "component", type: SideNavDropdownItemComponent, selector: "tedi-sidenav-dropdown-item", inputs: ["selected", "href", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3269
3343
|
}
|
|
3270
3344
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SideNavDropdownComponent, decorators: [{
|
|
3271
3345
|
type: Component,
|
|
3272
3346
|
args: [{ selector: "tedi-sidenav-dropdown", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SideNavDropdownItemComponent], host: {
|
|
3273
3347
|
"[class]": "classes()",
|
|
3274
|
-
}, 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.
|
|
3348
|
+
}, 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.routerLink()) {\n <tedi-sidenav-dropdown-item\n class=\"tedi-sidenav-dropdown-item--parent\"\n [routerLink]=\"sidenavItem.routerLink()\"\n >\n {{ sidenavItem.textContent() }}\n </tedi-sidenav-dropdown-item>\n }\n <ng-content></ng-content>\n</div>\n", styles: [".tedi-sidenav-dropdown{display:grid;grid-template-rows:0fr;overflow:hidden;visibility: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{min-height:0;transition:visibility var(--_sidenav-transition-duration) ease;visibility:hidden}\n"] }]
|
|
3275
3349
|
}] });
|
|
3276
3350
|
|
|
3277
3351
|
class SideNavDropdownGroupComponent {
|
|
@@ -3517,5 +3591,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3517
3591
|
* Generated bundle index. Do not edit.
|
|
3518
3592
|
*/
|
|
3519
3593
|
|
|
3520
|
-
export { AlertComponent, BREAKPOINTS, BreakpointService, ButtonComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, ClosingButtonComponent, ColComponent, CollapseComponent, FeedbackTextComponent, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, HeaderActionsComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoutComponent, HeaderProfileComponent, HeaderRoleComponent, HideAtDirective, IconComponent, InfoButtonComponent, LabelComponent, LinkComponent, ListComponent, NumberFieldComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerComponent, RowComponent, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SpinnerComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTitleComponent, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, breakpointInput, generateUUID };
|
|
3594
|
+
export { AlertComponent, BREAKPOINTS, BreakpointService, ButtonComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, ClosingButtonComponent, ColComponent, CollapseComponent, FeedbackTextComponent, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, HeaderActionsComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoutComponent, HeaderProfileComponent, HeaderRoleComponent, HideAtDirective, IconComponent, InfoButtonComponent, LabelComponent, LinkComponent, ListComponent, NumberFieldComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerComponent, RowComponent, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SpinnerComponent, TOOLTIP_ARROW_OFFSET, TOOLTIP_TIMEOUT_MS, TediTranslationPipe, TediTranslationService, TextComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTitleComponent, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, breakpointInput, generateUUID };
|
|
3521
3595
|
//# sourceMappingURL=tedi-design-system-angular-tedi.mjs.map
|