@tedi-design-system/angular 3.0.0-rc.3 → 3.0.0-rc.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/community/components/form/file-dropzone/index.d.ts +3 -0
- package/community/components/form/file-dropzone/index.d.ts.map +1 -1
- package/community/components/form/select/multiselect.component.d.ts +9 -2
- package/community/components/form/select/multiselect.component.d.ts.map +1 -1
- package/community/components/form/select/select.component.d.ts +9 -2
- package/community/components/form/select/select.component.d.ts.map +1 -1
- package/fesm2022/tedi-design-system-angular-community.mjs +42 -16
- package/fesm2022/tedi-design-system-angular-community.mjs.map +1 -1
- package/fesm2022/tedi-design-system-angular-tedi.mjs +163 -237
- package/fesm2022/tedi-design-system-angular-tedi.mjs.map +1 -1
- package/package.json +1 -1
- 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 +4 -3
- 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/tooltip-content.component.d.ts +16 -0
- package/tedi/components/overlay/tooltip/tooltip-content/tooltip-content.component.d.ts.map +1 -0
- package/tedi/components/overlay/tooltip/tooltip-trigger/tooltip-trigger.component.d.ts +16 -0
- package/tedi/components/overlay/tooltip/tooltip-trigger/tooltip-trigger.component.d.ts.map +1 -0
- package/tedi/components/overlay/tooltip/tooltip.component.d.ts +34 -41
- package/tedi/components/overlay/tooltip/tooltip.component.d.ts.map +1 -1
- package/tedi/components/overlay/tooltip/tooltip-content.component.d.ts +0 -21
- package/tedi/components/overlay/tooltip/tooltip-content.component.d.ts.map +0 -1
- package/tedi/components/overlay/tooltip/tooltip-trigger.component.d.ts +0 -11
- package/tedi/components/overlay/tooltip/tooltip-trigger.component.d.ts.map +0 -1
|
@@ -5,11 +5,8 @@ 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 } from 'ngx-float-ui';
|
|
8
|
+
import { NgxFloatUiModule, NgxFloatUiContentComponent } 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';
|
|
13
10
|
|
|
14
11
|
const ICON_WITH_BACKGROUND = [16, 24];
|
|
15
12
|
class IconComponent {
|
|
@@ -667,7 +664,7 @@ const translationsMap = {
|
|
|
667
664
|
"pagination.page-size": {
|
|
668
665
|
description: "Label of page size select",
|
|
669
666
|
components: ["Table", "Pagination"],
|
|
670
|
-
et: "
|
|
667
|
+
et: "Kuva korraga",
|
|
671
668
|
en: "Page size",
|
|
672
669
|
ru: "Размер страницы",
|
|
673
670
|
},
|
|
@@ -2490,9 +2487,9 @@ class PopoverComponent {
|
|
|
2490
2487
|
*/
|
|
2491
2488
|
position = input("top");
|
|
2492
2489
|
/**
|
|
2493
|
-
|
|
2494
|
-
|
|
2495
|
-
|
|
2490
|
+
* Is dismissible by clicking outside of content?
|
|
2491
|
+
* @default true
|
|
2492
|
+
*/
|
|
2496
2493
|
dismissible = input(true);
|
|
2497
2494
|
/**
|
|
2498
2495
|
* Does popover content hide on scroll?
|
|
@@ -2514,23 +2511,30 @@ class PopoverComponent {
|
|
|
2514
2511
|
renderer = inject(Renderer2);
|
|
2515
2512
|
onHide() {
|
|
2516
2513
|
if (this.lockScroll()) {
|
|
2517
|
-
this.renderer.removeStyle(this.document.body,
|
|
2514
|
+
this.renderer.removeStyle(this.document.body, "overflow");
|
|
2518
2515
|
}
|
|
2519
2516
|
}
|
|
2520
2517
|
onOpen() {
|
|
2521
2518
|
if (this.lockScroll()) {
|
|
2522
|
-
this.renderer.setStyle(this.document.body,
|
|
2519
|
+
this.renderer.setStyle(this.document.body, "overflow", "hidden");
|
|
2523
2520
|
}
|
|
2524
2521
|
}
|
|
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
|
+
});
|
|
2525
2529
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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
|
|
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 [floatUiLoose]=\"floatUiComponent\"\n [loosePlacement]=\"position()\"\n [looseTrigger]=\"openWith()\"\n [hideOnClickOutside]=\"dismissible()\"\n [hideOnScroll]=\"hideOnScroll()\"\n [applyClass]=\"floatUiContainerClass()\"\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>\n", styles: ["tedi-popover{display:block}tedi-popover-trigger{display:inline-flex;cursor:pointer}float-ui-content .float-ui-container-popover{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-popover{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){float-ui-content .float-ui-container-popover{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){float-ui-content .float-ui-container-popover{border-radius:var(--popover-radius-rounded-desktop)}}float-ui-content .float-ui-container-popover .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-popover--border{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){float-ui-content .float-ui-container-popover--border{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){float-ui-content .float-ui-container-popover--border{border-radius:var(--popover-radius-rounded-desktop)}}float-ui-content .float-ui-container-popover--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-popover--border[data-float-ui-placement=top]{border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=top] .float-ui-arrow{bottom:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom]{border-top:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom] .float-ui-arrow{top:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left]{border-right:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left] .float-ui-arrow{right:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right]{border-left:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right] .float-ui-arrow{left:-12px!important}float-ui-content .float-ui-container-popover[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-popover[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 });
|
|
2527
2531
|
}
|
|
2528
2532
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
2529
2533
|
type: Component,
|
|
2530
|
-
args: [{ standalone: true, selector: "tedi-popover", imports: [NgxFloatUiModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n
|
|
2534
|
+
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]=\"floatUiContainerClass()\"\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>\n", styles: ["tedi-popover{display:block}tedi-popover-trigger{display:inline-flex;cursor:pointer}float-ui-content .float-ui-container-popover{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-popover{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){float-ui-content .float-ui-container-popover{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){float-ui-content .float-ui-container-popover{border-radius:var(--popover-radius-rounded-desktop)}}float-ui-content .float-ui-container-popover .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-popover--border{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){float-ui-content .float-ui-container-popover--border{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){float-ui-content .float-ui-container-popover--border{border-radius:var(--popover-radius-rounded-desktop)}}float-ui-content .float-ui-container-popover--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-popover--border[data-float-ui-placement=top]{border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=top] .float-ui-arrow{bottom:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom]{border-top:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom] .float-ui-arrow{top:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left]{border-right:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left] .float-ui-arrow{right:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right]{border-left:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right] .float-ui-arrow{left:-12px!important}float-ui-content .float-ui-container-popover[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-popover[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"] }]
|
|
2531
2535
|
}], propDecorators: { floatUiComponent: [{
|
|
2532
2536
|
type: ViewChild,
|
|
2533
|
-
args: [
|
|
2537
|
+
args: ["floatUiComponent"]
|
|
2534
2538
|
}] } });
|
|
2535
2539
|
|
|
2536
2540
|
class PopoverTriggerComponent {
|
|
@@ -2551,11 +2555,11 @@ class PopoverTriggerComponent {
|
|
|
2551
2555
|
}
|
|
2552
2556
|
}
|
|
2553
2557
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PopoverTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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"] });
|
|
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-popover{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-popover{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){float-ui-content .float-ui-container-popover{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){float-ui-content .float-ui-container-popover{border-radius:var(--popover-radius-rounded-desktop)}}float-ui-content .float-ui-container-popover .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-popover--border{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){float-ui-content .float-ui-container-popover--border{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){float-ui-content .float-ui-container-popover--border{border-radius:var(--popover-radius-rounded-desktop)}}float-ui-content .float-ui-container-popover--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-popover--border[data-float-ui-placement=top]{border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=top] .float-ui-arrow{bottom:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom]{border-top:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom] .float-ui-arrow{top:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left]{border-right:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left] .float-ui-arrow{right:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right]{border-left:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right] .float-ui-arrow{left:-12px!important}float-ui-content .float-ui-container-popover[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-popover[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"] });
|
|
2555
2559
|
}
|
|
2556
2560
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PopoverTriggerComponent, decorators: [{
|
|
2557
2561
|
type: Component,
|
|
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"] }]
|
|
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-popover{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-popover{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){float-ui-content .float-ui-container-popover{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){float-ui-content .float-ui-container-popover{border-radius:var(--popover-radius-rounded-desktop)}}float-ui-content .float-ui-container-popover .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-popover--border{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){float-ui-content .float-ui-container-popover--border{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){float-ui-content .float-ui-container-popover--border{border-radius:var(--popover-radius-rounded-desktop)}}float-ui-content .float-ui-container-popover--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-popover--border[data-float-ui-placement=top]{border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=top] .float-ui-arrow{bottom:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom]{border-top:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom] .float-ui-arrow{top:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left]{border-right:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left] .float-ui-arrow{right:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right]{border-left:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right] .float-ui-arrow{left:-12px!important}float-ui-content .float-ui-container-popover[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-popover[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
2563
|
}] });
|
|
2560
2564
|
|
|
2561
2565
|
let popoverTitleId = 0;
|
|
@@ -2584,7 +2588,7 @@ class PopoverContentComponent {
|
|
|
2584
2588
|
this.popover?.floatUiComponent.hide();
|
|
2585
2589
|
}
|
|
2586
2590
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PopoverContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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 });
|
|
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-popover{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-popover{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){float-ui-content .float-ui-container-popover{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){float-ui-content .float-ui-container-popover{border-radius:var(--popover-radius-rounded-desktop)}}float-ui-content .float-ui-container-popover .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-popover--border{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){float-ui-content .float-ui-container-popover--border{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){float-ui-content .float-ui-container-popover--border{border-radius:var(--popover-radius-rounded-desktop)}}float-ui-content .float-ui-container-popover--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-popover--border[data-float-ui-placement=top]{border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=top] .float-ui-arrow{bottom:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom]{border-top:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom] .float-ui-arrow{top:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left]{border-right:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left] .float-ui-arrow{right:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right]{border-left:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right] .float-ui-arrow{left:-12px!important}float-ui-content .float-ui-container-popover[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-popover[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 });
|
|
2588
2592
|
}
|
|
2589
2593
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PopoverContentComponent, decorators: [{
|
|
2590
2594
|
type: Component,
|
|
@@ -2592,7 +2596,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2592
2596
|
"[class]": "classes()",
|
|
2593
2597
|
"role": "dialog",
|
|
2594
2598
|
"[attr.aria-labelledby]": "title() ? titleId : null",
|
|
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"] }]
|
|
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-popover{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-popover{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){float-ui-content .float-ui-container-popover{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){float-ui-content .float-ui-container-popover{border-radius:var(--popover-radius-rounded-desktop)}}float-ui-content .float-ui-container-popover .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-popover--border{border-radius:var(--popover-radius-rounded-mobile)}@media (min-width: 576px){float-ui-content .float-ui-container-popover--border{border-radius:var(--popover-radius-rounded-tablet)}}@media (min-width: 992px){float-ui-content .float-ui-container-popover--border{border-radius:var(--popover-radius-rounded-desktop)}}float-ui-content .float-ui-container-popover--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-popover--border[data-float-ui-placement=top]{border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=top] .float-ui-arrow{bottom:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom]{border-top:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom] .float-ui-arrow{top:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left]{border-right:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left] .float-ui-arrow{right:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right]{border-left:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right] .float-ui-arrow{left:-12px!important}float-ui-content .float-ui-container-popover[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-popover[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"] }]
|
|
2596
2600
|
}] });
|
|
2597
2601
|
|
|
2598
2602
|
class HeaderLanguageComponent {
|
|
@@ -2946,7 +2950,7 @@ class SideNavDropdownItemComponent {
|
|
|
2946
2950
|
/**
|
|
2947
2951
|
* Router link
|
|
2948
2952
|
*/
|
|
2949
|
-
|
|
2953
|
+
route = input();
|
|
2950
2954
|
classes = computed(() => {
|
|
2951
2955
|
const classList = ["tedi-sidenav-dropdown-item"];
|
|
2952
2956
|
if (this.selected()) {
|
|
@@ -2955,13 +2959,13 @@ class SideNavDropdownItemComponent {
|
|
|
2955
2959
|
return classList.join(" ");
|
|
2956
2960
|
});
|
|
2957
2961
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SideNavDropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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 },
|
|
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 }, route: { classPropertyName: "route", publicName: "route", 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 (route()) {\n <a [routerLink]=\"route()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n} @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".tedi-sidenav-dropdown-item{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 });
|
|
2959
2963
|
}
|
|
2960
2964
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SideNavDropdownItemComponent, decorators: [{
|
|
2961
2965
|
type: Component,
|
|
2962
2966
|
args: [{ selector: "tedi-sidenav-dropdown-item", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [RouterLink, NgTemplateOutlet], host: {
|
|
2963
2967
|
"[class]": "classes()",
|
|
2964
|
-
}, template: "@if (href()) {\n <a [href]=\"href()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n} @else if (
|
|
2968
|
+
}, template: "@if (href()) {\n <a [href]=\"href()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n} @else if (route()) {\n <a [routerLink]=\"route()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n} @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".tedi-sidenav-dropdown-item{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"] }]
|
|
2965
2969
|
}] });
|
|
2966
2970
|
|
|
2967
2971
|
class SideNavGroupTitleComponent {
|
|
@@ -2978,255 +2982,177 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2978
2982
|
class TooltipTriggerComponent {
|
|
2979
2983
|
host = inject(ElementRef);
|
|
2980
2984
|
renderer = inject(Renderer2);
|
|
2981
|
-
|
|
2982
|
-
|
|
2985
|
+
tooltip = inject(TooltipComponent);
|
|
2986
|
+
onClick() {
|
|
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() {
|
|
2983
3008
|
const element = this.host.nativeElement;
|
|
2984
3009
|
const firstChild = element.firstChild;
|
|
2985
3010
|
if (!firstChild) {
|
|
2986
3011
|
return;
|
|
2987
3012
|
}
|
|
2988
|
-
if (firstChild.nodeType === Node.TEXT_NODE &&
|
|
2989
|
-
|
|
2990
|
-
const
|
|
2991
|
-
this.renderer.appendChild(span, textNode);
|
|
3013
|
+
if (firstChild.nodeType === Node.TEXT_NODE &&
|
|
3014
|
+
firstChild.textContent?.trim()) {
|
|
3015
|
+
const span = this.renderer.createElement("span");
|
|
2992
3016
|
this.renderer.addClass(span, "tedi-tooltip-trigger__text");
|
|
3017
|
+
this.renderer.addClass(span, "tedi-tooltip-trigger--focus");
|
|
2993
3018
|
this.renderer.setAttribute(span, "tabindex", "0");
|
|
2994
|
-
this.renderer.insertBefore(
|
|
2995
|
-
this.renderer.
|
|
2996
|
-
|
|
3019
|
+
this.renderer.insertBefore(element, span, firstChild);
|
|
3020
|
+
this.renderer.appendChild(span, firstChild);
|
|
3021
|
+
return;
|
|
2997
3022
|
}
|
|
2998
|
-
|
|
2999
|
-
|
|
3000
|
-
this.renderer.setAttribute(
|
|
3001
|
-
this.element.set(element);
|
|
3023
|
+
this.renderer.addClass(firstChild, "tedi-tooltip-trigger--focus");
|
|
3024
|
+
if (!firstChild.getAttribute("tabindex")) {
|
|
3025
|
+
this.renderer.setAttribute(firstChild, "tabindex", "0");
|
|
3002
3026
|
}
|
|
3003
3027
|
}
|
|
3004
3028
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TooltipTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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 });
|
|
3029
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TooltipTriggerComponent, isStandalone: true, selector: "tedi-tooltip-trigger", host: { listeners: { "click": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()" }, properties: { "id": "tooltip.containerId() + '_trigger'", "attr.aria-controls": "tooltip.containerId()" } }, ngImport: i0, template: "<ng-content />", isInline: true, 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3006
3030
|
}
|
|
3007
3031
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TooltipTriggerComponent, decorators: [{
|
|
3008
3032
|
type: Component,
|
|
3009
|
-
args: [{
|
|
3010
|
-
|
|
3011
|
-
|
|
3012
|
-
|
|
3013
|
-
|
|
3014
|
-
|
|
3033
|
+
args: [{ selector: "tedi-tooltip-trigger", standalone: true, template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3034
|
+
"[id]": "tooltip.containerId() + '_trigger'",
|
|
3035
|
+
"[attr.aria-controls]": "tooltip.containerId()",
|
|
3036
|
+
}, 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"] }]
|
|
3037
|
+
}], propDecorators: { onClick: [{
|
|
3038
|
+
type: HostListener,
|
|
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
|
+
}] } });
|
|
3015
3053
|
|
|
3016
|
-
class
|
|
3054
|
+
class TooltipComponent {
|
|
3017
3055
|
/**
|
|
3018
|
-
* The position of the tooltip relative to the trigger element.
|
|
3019
|
-
* be positioned in the specified direction, the CDK will try to position the tooltip
|
|
3020
|
-
* in the next direction in positions list.
|
|
3056
|
+
* The position of the tooltip relative to the trigger element.
|
|
3021
3057
|
* @default top
|
|
3022
3058
|
*/
|
|
3023
3059
|
position = input("top");
|
|
3024
3060
|
/**
|
|
3025
|
-
*
|
|
3026
|
-
* @default
|
|
3061
|
+
* Should position to opposite direction when overflowing screen?
|
|
3062
|
+
* @default true
|
|
3027
3063
|
*/
|
|
3028
|
-
|
|
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 {
|
|
3064
|
+
preventOverflow = input(true);
|
|
3089
3065
|
/**
|
|
3090
|
-
*
|
|
3091
|
-
*
|
|
3066
|
+
* Append floating element to given selector.
|
|
3067
|
+
* Use 'body' to append at the end of DOM or empty string to append next to trigger element.
|
|
3068
|
+
* @default body
|
|
3092
3069
|
*/
|
|
3093
|
-
|
|
3094
|
-
trigger
|
|
3095
|
-
|
|
3096
|
-
|
|
3097
|
-
|
|
3098
|
-
|
|
3099
|
-
|
|
3100
|
-
|
|
3101
|
-
|
|
3102
|
-
|
|
3103
|
-
|
|
3104
|
-
|
|
3105
|
-
|
|
3106
|
-
if (!
|
|
3107
|
-
|
|
3070
|
+
appendTo = input("body");
|
|
3071
|
+
/** Delay time (in ms) for closing tooltip when not hovering trigger or content.
|
|
3072
|
+
* @default 100
|
|
3073
|
+
*/
|
|
3074
|
+
timeoutDelay = input(100);
|
|
3075
|
+
/** Dropdown trigger button */
|
|
3076
|
+
tooltipTrigger = contentChild.required(TooltipTriggerComponent);
|
|
3077
|
+
containerId = signal("");
|
|
3078
|
+
isContentHovered = signal(false);
|
|
3079
|
+
floatUiDisplay = signal("inline");
|
|
3080
|
+
floatUiComponent = viewChild.required(NgxFloatUiContentComponent);
|
|
3081
|
+
hideTimeout;
|
|
3082
|
+
showTooltip() {
|
|
3083
|
+
if (!this.floatUiComponent().state) {
|
|
3084
|
+
clearTimeout(this.hideTimeout);
|
|
3085
|
+
this.floatUiComponent().show();
|
|
3086
|
+
this.floatUiDisplay.set("block");
|
|
3108
3087
|
}
|
|
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
|
-
}));
|
|
3144
3088
|
}
|
|
3145
|
-
|
|
3146
|
-
this.
|
|
3147
|
-
|
|
3148
|
-
|
|
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();
|
|
3089
|
+
hideTooltip() {
|
|
3090
|
+
if (this.floatUiComponent().state) {
|
|
3091
|
+
this.floatUiComponent().hide();
|
|
3092
|
+
this.floatUiDisplay.set("inline");
|
|
3156
3093
|
}
|
|
3157
3094
|
}
|
|
3158
|
-
closeTooltip() {
|
|
3159
|
-
this.overlayRef?.detach();
|
|
3160
|
-
}
|
|
3161
3095
|
toggleTooltip() {
|
|
3162
|
-
if (this.
|
|
3163
|
-
this.
|
|
3096
|
+
if (this.floatUiComponent().state) {
|
|
3097
|
+
this.hideTooltip();
|
|
3164
3098
|
}
|
|
3165
3099
|
else {
|
|
3166
|
-
this.
|
|
3100
|
+
this.showTooltip();
|
|
3167
3101
|
}
|
|
3168
3102
|
}
|
|
3169
|
-
|
|
3170
|
-
const
|
|
3171
|
-
|
|
3172
|
-
|
|
3173
|
-
|
|
3174
|
-
|
|
3175
|
-
this.
|
|
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);
|
|
3185
|
-
}
|
|
3186
|
-
scheduleClose() {
|
|
3187
|
-
this.clearCloseTimeout();
|
|
3188
|
-
this.closeTimeout.set(setTimeout(() => this.closeTooltip(), TOOLTIP_TIMEOUT_MS));
|
|
3189
|
-
}
|
|
3190
|
-
clearCloseTimeout() {
|
|
3191
|
-
const timeout = this.closeTimeout();
|
|
3192
|
-
if (timeout) {
|
|
3193
|
-
clearTimeout(timeout);
|
|
3103
|
+
ngAfterContentChecked() {
|
|
3104
|
+
const floatUiEl = this.floatUiComponent().elRef
|
|
3105
|
+
.nativeElement;
|
|
3106
|
+
const container = floatUiEl.querySelector(".float-ui-container");
|
|
3107
|
+
if (container) {
|
|
3108
|
+
container.setAttribute("aria-labelledby", container.id + "_trigger");
|
|
3109
|
+
this.containerId.set(container.id);
|
|
3194
3110
|
}
|
|
3195
|
-
this.closeTimeout.set(null);
|
|
3196
|
-
}
|
|
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
3111
|
}
|
|
3215
3112
|
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.
|
|
3113
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: TooltipComponent, isStandalone: true, selector: "tedi-tooltip", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, timeoutDelay: { classPropertyName: "timeoutDelay", publicName: "timeoutDelay", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "tooltipTrigger", first: true, predicate: TooltipTriggerComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "floatUiComponent", first: true, predicate: NgxFloatUiContentComponent, descendants: true, isSignal: true }], ngImport: i0, 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"], 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 });
|
|
3217
3114
|
}
|
|
3218
3115
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
3219
3116
|
type: Component,
|
|
3220
|
-
args: [{ standalone: true, selector: "tedi-tooltip", imports: [
|
|
3221
|
-
}]
|
|
3222
|
-
|
|
3223
|
-
|
|
3224
|
-
|
|
3225
|
-
|
|
3226
|
-
|
|
3227
|
-
|
|
3228
|
-
|
|
3229
|
-
|
|
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);
|
|
3136
|
+
}
|
|
3137
|
+
onMouseLeave() {
|
|
3138
|
+
this.tooltip.hideTooltip();
|
|
3139
|
+
this.tooltip.isContentHovered.set(false);
|
|
3140
|
+
}
|
|
3141
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TooltipContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3142
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TooltipContentComponent, isStandalone: true, selector: "tedi-tooltip-content", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "class": "classes()" } }, ngImport: i0, template: "<ng-content />", isInline: true, 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3143
|
+
}
|
|
3144
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TooltipContentComponent, decorators: [{
|
|
3145
|
+
type: Component,
|
|
3146
|
+
args: [{ standalone: true, selector: "tedi-tooltip-content", template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3147
|
+
"[class]": "classes()",
|
|
3148
|
+
role: "tooltip",
|
|
3149
|
+
}, 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"] }]
|
|
3150
|
+
}], propDecorators: { onMouseEnter: [{
|
|
3151
|
+
type: HostListener,
|
|
3152
|
+
args: ["mouseenter"]
|
|
3153
|
+
}], onMouseLeave: [{
|
|
3154
|
+
type: HostListener,
|
|
3155
|
+
args: ["mouseleave"]
|
|
3230
3156
|
}] } });
|
|
3231
3157
|
|
|
3232
3158
|
class SideNavItemComponent {
|
|
@@ -3246,7 +3172,7 @@ class SideNavItemComponent {
|
|
|
3246
3172
|
/**
|
|
3247
3173
|
* Router link
|
|
3248
3174
|
*/
|
|
3249
|
-
|
|
3175
|
+
route = input();
|
|
3250
3176
|
dropdown;
|
|
3251
3177
|
textContent = signal("");
|
|
3252
3178
|
sidenavService = inject(SideNavService);
|
|
@@ -3299,7 +3225,7 @@ class SideNavItemComponent {
|
|
|
3299
3225
|
this.dropdown.open.update((prev) => !prev);
|
|
3300
3226
|
}
|
|
3301
3227
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SideNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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 });
|
|
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 });
|
|
3303
3229
|
}
|
|
3304
3230
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SideNavItemComponent, decorators: [{
|
|
3305
3231
|
type: Component,
|
|
@@ -3314,7 +3240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3314
3240
|
TooltipContentComponent,
|
|
3315
3241
|
], host: {
|
|
3316
3242
|
"[class]": "classes()",
|
|
3317
|
-
}, template: "@if (sidenavService.isMobile()) {\n @if (sidenavService.isMobileItemOpen() && dropdown?.open()) {\n <ng-container *ngIf=\"!href() && !
|
|
3243
|
+
}, 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"] }]
|
|
3318
3244
|
}], propDecorators: { dropdown: [{
|
|
3319
3245
|
type: ContentChild,
|
|
3320
3246
|
args: [forwardRef(() => SideNavDropdownComponent)]
|
|
@@ -3339,13 +3265,13 @@ class SideNavDropdownComponent {
|
|
|
3339
3265
|
return classList.join(" ");
|
|
3340
3266
|
});
|
|
3341
3267
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SideNavDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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.
|
|
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.route()) {\n <tedi-sidenav-dropdown-item\n class=\"tedi-sidenav-dropdown-item--parent\"\n [route]=\"sidenavItem.route()\"\n >\n {{ sidenavItem.textContent() }}\n </tedi-sidenav-dropdown-item>\n }\n <ng-content></ng-content>\n</div>\n", styles: [".tedi-sidenav-dropdown{display:grid;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", "route"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3343
3269
|
}
|
|
3344
3270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SideNavDropdownComponent, decorators: [{
|
|
3345
3271
|
type: Component,
|
|
3346
3272
|
args: [{ selector: "tedi-sidenav-dropdown", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SideNavDropdownItemComponent], host: {
|
|
3347
3273
|
"[class]": "classes()",
|
|
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.
|
|
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.route()) {\n <tedi-sidenav-dropdown-item\n class=\"tedi-sidenav-dropdown-item--parent\"\n [route]=\"sidenavItem.route()\"\n >\n {{ sidenavItem.textContent() }}\n </tedi-sidenav-dropdown-item>\n }\n <ng-content></ng-content>\n</div>\n", styles: [".tedi-sidenav-dropdown{display:grid;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"] }]
|
|
3349
3275
|
}] });
|
|
3350
3276
|
|
|
3351
3277
|
class SideNavDropdownGroupComponent {
|
|
@@ -3591,5 +3517,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3591
3517
|
* Generated bundle index. Do not edit.
|
|
3592
3518
|
*/
|
|
3593
3519
|
|
|
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,
|
|
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 };
|
|
3595
3521
|
//# sourceMappingURL=tedi-design-system-angular-tedi.mjs.map
|