@tedi-design-system/angular 6.5.0-rc.14 → 6.5.0-rc.15
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.
|
@@ -133,7 +133,7 @@ class TextComponent {
|
|
|
133
133
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextComponent, decorators: [{
|
|
134
134
|
type: Component,
|
|
135
135
|
args: [{ selector: "[tedi-text]", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
136
|
-
"[class]": "classes()"
|
|
136
|
+
"[class]": "classes()",
|
|
137
137
|
}, template: "<ng-content></ng-content>" }]
|
|
138
138
|
}], propDecorators: { modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
139
139
|
|
|
@@ -1649,37 +1649,44 @@ const translationsMap = {
|
|
|
1649
1649
|
"header.role-switch": {
|
|
1650
1650
|
description: "Label for role switch button",
|
|
1651
1651
|
components: ["HeaderRole"],
|
|
1652
|
-
et: "
|
|
1653
|
-
en: "
|
|
1654
|
-
ru: "
|
|
1652
|
+
et: "Roll",
|
|
1653
|
+
en: "Role",
|
|
1654
|
+
ru: "Роль",
|
|
1655
1655
|
},
|
|
1656
1656
|
"header.role-search": {
|
|
1657
|
-
description: "Label for
|
|
1657
|
+
description: "Label for Role search input",
|
|
1658
1658
|
components: ["HeaderRole"],
|
|
1659
|
-
et: "Otsi
|
|
1659
|
+
et: "Otsi isikut",
|
|
1660
1660
|
en: "Search representative",
|
|
1661
1661
|
ru: "Найти представителя",
|
|
1662
1662
|
},
|
|
1663
|
+
"header.role-search.organization": {
|
|
1664
|
+
description: "Label for Role search input when searching for organizations",
|
|
1665
|
+
components: ["HeaderRole"],
|
|
1666
|
+
et: "Otsi asutust",
|
|
1667
|
+
en: "Search organization",
|
|
1668
|
+
ru: "Найти организацию",
|
|
1669
|
+
},
|
|
1663
1670
|
"header.role-no-representatives": {
|
|
1664
|
-
description: "
|
|
1671
|
+
description: "Text shown when representative search yields no results",
|
|
1665
1672
|
components: ["HeaderRole"],
|
|
1666
|
-
et: "Esindatavaid ei leitud
|
|
1667
|
-
en: "No representatives found
|
|
1668
|
-
ru: "Представители не
|
|
1673
|
+
et: "Esindatavaid ei leitud",
|
|
1674
|
+
en: "No representatives found",
|
|
1675
|
+
ru: "Представители не найдены",
|
|
1669
1676
|
},
|
|
1670
1677
|
"header.login": {
|
|
1671
1678
|
description: "Label for login button",
|
|
1672
1679
|
components: ["HeaderLogin"],
|
|
1673
1680
|
et: "Sisene portaali",
|
|
1674
1681
|
en: "Log in",
|
|
1675
|
-
ru: "
|
|
1682
|
+
ru: "Зайти на портал",
|
|
1676
1683
|
},
|
|
1677
|
-
"header.login
|
|
1684
|
+
"header.login.mobile": {
|
|
1678
1685
|
description: "Label for login button in mobile view",
|
|
1679
1686
|
components: ["HeaderLogin"],
|
|
1680
1687
|
et: "Sisene",
|
|
1681
1688
|
en: "Log in",
|
|
1682
|
-
ru: "
|
|
1689
|
+
ru: "Войти",
|
|
1683
1690
|
},
|
|
1684
1691
|
"header.logout": {
|
|
1685
1692
|
description: "Label for logout button",
|
|
@@ -1688,6 +1695,13 @@ const translationsMap = {
|
|
|
1688
1695
|
en: "Log out",
|
|
1689
1696
|
ru: "Выйти",
|
|
1690
1697
|
},
|
|
1698
|
+
"header.logout.mobile": {
|
|
1699
|
+
description: "Label for logout button (small)",
|
|
1700
|
+
components: ["HeaderLogout"],
|
|
1701
|
+
et: "Välju",
|
|
1702
|
+
en: "Log out",
|
|
1703
|
+
ru: "Выйти",
|
|
1704
|
+
},
|
|
1691
1705
|
"header.logo": {
|
|
1692
1706
|
description: "Alt Label for logo",
|
|
1693
1707
|
components: ["Header"],
|
|
@@ -1698,10 +1712,24 @@ const translationsMap = {
|
|
|
1698
1712
|
"header.profile": {
|
|
1699
1713
|
description: "Label for profile button",
|
|
1700
1714
|
components: ["HeaderProfile"],
|
|
1715
|
+
et: "Minu profiil",
|
|
1716
|
+
en: "My profile",
|
|
1717
|
+
ru: "Мой профиль",
|
|
1718
|
+
},
|
|
1719
|
+
"header.profile.mobile": {
|
|
1720
|
+
description: "Label for profile button on mobile",
|
|
1721
|
+
components: ["HeaderProfile"],
|
|
1701
1722
|
et: "Profiil",
|
|
1702
1723
|
en: "Profile",
|
|
1703
1724
|
ru: "Профиль",
|
|
1704
1725
|
},
|
|
1726
|
+
"header.search": {
|
|
1727
|
+
description: "Label for search button",
|
|
1728
|
+
components: ["HeaderSearch"],
|
|
1729
|
+
et: "Otsing",
|
|
1730
|
+
en: "Search",
|
|
1731
|
+
ru: "Поиск",
|
|
1732
|
+
},
|
|
1705
1733
|
"file-upload.add": {
|
|
1706
1734
|
description: "Label for add file button",
|
|
1707
1735
|
components: ["FileUpload"],
|
|
@@ -2292,9 +2320,9 @@ const translationsMap = {
|
|
|
2292
2320
|
"sidenav.toggleSubmenu": {
|
|
2293
2321
|
description: "Label for sidenav submenu toggle",
|
|
2294
2322
|
components: ["Sidenav"],
|
|
2295
|
-
et: (value, isOpen) =>
|
|
2296
|
-
en: (value, isOpen) =>
|
|
2297
|
-
ru: (value, isOpen) =>
|
|
2323
|
+
et: (value, isOpen) => `${isOpen ? "Sulge" : "Ava"} ${value} alammenüü`,
|
|
2324
|
+
en: (value, isOpen) => `${isOpen ? "Close" : "Open"} ${value} submenu`,
|
|
2325
|
+
ru: (value, isOpen) => `${isOpen ? "Закрыть" : "Открыть"} ${value} подменю`,
|
|
2298
2326
|
},
|
|
2299
2327
|
"buttonGroup.menu": {
|
|
2300
2328
|
description: "Fallback label for ButtonGroup mobile dropdown trigger",
|
|
@@ -4709,7 +4737,7 @@ class PopoverTriggerDirective {
|
|
|
4709
4737
|
this.popover.togglePopover();
|
|
4710
4738
|
}
|
|
4711
4739
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
4712
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.24", type: PopoverTriggerDirective, isStandalone: true, selector: "[tedi-popover-trigger]", inputs: { underline: { classPropertyName: "underline", publicName: "underline", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "button", "aria-haspopup": "dialog" }, listeners: { "click": "onClick()" }, properties: { "id": "popover.containerId() + '_trigger'", "attr.aria-expanded": "popover.isOpen()", "attr.aria-controls": "popover.containerId()", "class.tedi-popover-trigger__text": "underline()" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 });
|
|
4740
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.24", type: PopoverTriggerDirective, isStandalone: true, selector: "[tedi-popover-trigger]", inputs: { underline: { classPropertyName: "underline", publicName: "underline", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "button", "aria-haspopup": "dialog" }, listeners: { "click": "onClick()" }, properties: { "id": "popover.containerId() + '_trigger'", "attr.aria-expanded": "popover.isOpen()", "attr.aria-controls": "popover.containerId() || null", "class.tedi-popover-trigger__text": "underline()" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 });
|
|
4713
4741
|
}
|
|
4714
4742
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PopoverTriggerDirective, decorators: [{
|
|
4715
4743
|
type: Directive,
|
|
@@ -4723,7 +4751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
4723
4751
|
"aria-haspopup": "dialog",
|
|
4724
4752
|
"[id]": "popover.containerId() + '_trigger'",
|
|
4725
4753
|
"[attr.aria-expanded]": "popover.isOpen()",
|
|
4726
|
-
"[attr.aria-controls]": "popover.containerId()",
|
|
4754
|
+
"[attr.aria-controls]": "popover.containerId() || null",
|
|
4727
4755
|
"[class.tedi-popover-trigger__text]": "underline()",
|
|
4728
4756
|
},
|
|
4729
4757
|
}]
|
|
@@ -4762,13 +4790,13 @@ class PopoverContentComponent {
|
|
|
4762
4790
|
this.popover.hidePopover(true);
|
|
4763
4791
|
}
|
|
4764
4792
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PopoverContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4765
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", 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: { properties: { "class": "classes()" } }, 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>\n", styles: ["tedi-popover{display:
|
|
4793
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", 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: { properties: { "class": "classes()" } }, 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>\n", styles: [".tedi-popover{display:inline-flex;align-items:center}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--tedi-borders-01) solid var(--popover-border);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-popover__container--arrow .tedi-popover__arrow{position:absolute;z-index:0;width:1.5rem;height:1.5rem;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}.tedi-popover__container--arrow .tedi-popover-content{z-index:1}.tedi-popover__container--arrow[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--arrow[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--arrow[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--arrow[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover__container--border{position:relative}.tedi-popover__container--border:before{position:absolute;content:\"\";background:var(--popover-border-prominent)}.tedi-popover__container--border .tedi-popover__arrow{box-sizing:border-box;width:1.5rem;height:1.5rem;background:var(--popover-background);border-right:var(--popover-border-width-lg) solid var(--popover-border-prominent);border-bottom:var(--popover-border-width-lg) solid var(--popover-border-prominent);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:polygon(100% 0,100% 100%,0 100%)}.tedi-popover__container--border[data-placement=top]{border-bottom-right-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=top]:before{right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-lg));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--border[data-placement=bottom]{border-top-left-radius:var(--popover-radius-sharp);border-top-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=bottom]:before{top:calc(-1 * var(--popover-border-width-lg));right:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--border[data-placement=left]{border-top-right-radius:var(--popover-radius-sharp);border-bottom-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=left]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-lg));bottom:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--border[data-placement=right]{border-top-left-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=right]:before{top:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-lg));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-content{position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);max-width:calc(100dvw - 1rem);padding:var(--popover-padding-sm);color:var(--popover-text);background:var(--popover-background);border-radius:var(--popover-radius-rounded)}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.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", "icon", "ariaLabel", "showTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4766
4794
|
}
|
|
4767
4795
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PopoverContentComponent, decorators: [{
|
|
4768
4796
|
type: Component,
|
|
4769
4797
|
args: [{ standalone: true, selector: "tedi-popover-content", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ClosingButtonComponent], host: {
|
|
4770
4798
|
"[class]": "classes()",
|
|
4771
|
-
}, 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>\n", styles: ["tedi-popover{display:
|
|
4799
|
+
}, 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>\n", styles: [".tedi-popover{display:inline-flex;align-items:center}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--tedi-borders-01) solid var(--popover-border);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-popover__container--arrow .tedi-popover__arrow{position:absolute;z-index:0;width:1.5rem;height:1.5rem;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}.tedi-popover__container--arrow .tedi-popover-content{z-index:1}.tedi-popover__container--arrow[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--arrow[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--arrow[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--arrow[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover__container--border{position:relative}.tedi-popover__container--border:before{position:absolute;content:\"\";background:var(--popover-border-prominent)}.tedi-popover__container--border .tedi-popover__arrow{box-sizing:border-box;width:1.5rem;height:1.5rem;background:var(--popover-background);border-right:var(--popover-border-width-lg) solid var(--popover-border-prominent);border-bottom:var(--popover-border-width-lg) solid var(--popover-border-prominent);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:polygon(100% 0,100% 100%,0 100%)}.tedi-popover__container--border[data-placement=top]{border-bottom-right-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=top]:before{right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-lg));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--border[data-placement=bottom]{border-top-left-radius:var(--popover-radius-sharp);border-top-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=bottom]:before{top:calc(-1 * var(--popover-border-width-lg));right:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--border[data-placement=left]{border-top-right-radius:var(--popover-radius-sharp);border-bottom-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=left]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-lg));bottom:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--border[data-placement=right]{border-top-left-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=right]:before{top:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-lg));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-content{position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);max-width:calc(100dvw - 1rem);padding:var(--popover-padding-sm);color:var(--popover-text);background:var(--popover-background);border-radius:var(--popover-radius-rounded)}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-popover-content__title{align-self:center}\n"] }]
|
|
4772
4800
|
}], propDecorators: { maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }] } });
|
|
4773
4801
|
|
|
4774
4802
|
let popoverIdCounter = 0;
|
|
@@ -4823,7 +4851,7 @@ class PopoverComponent {
|
|
|
4823
4851
|
arrowLeft = signal(null, ...(ngDevMode ? [{ debugName: "arrowLeft" }] : []));
|
|
4824
4852
|
arrowTop = signal(null, ...(ngDevMode ? [{ debugName: "arrowTop" }] : []));
|
|
4825
4853
|
overlayOrigin = computed(() => this.popoverTrigger().overlayOrigin, ...(ngDevMode ? [{ debugName: "overlayOrigin" }] : []));
|
|
4826
|
-
arrowOffset = computed(() => this.withArrow() ?
|
|
4854
|
+
arrowOffset = computed(() => (this.withArrow() ? 12 : 0), ...(ngDevMode ? [{ debugName: "arrowOffset" }] : []));
|
|
4827
4855
|
overlayPositions = computed(() => toConnectedPositions(this.position(), this.preventOverflow(), this.arrowOffset()), ...(ngDevMode ? [{ debugName: "overlayPositions" }] : []));
|
|
4828
4856
|
panelClasses = computed(() => {
|
|
4829
4857
|
const classList = ["tedi-popover__container"];
|
|
@@ -4920,8 +4948,15 @@ class PopoverComponent {
|
|
|
4920
4948
|
const triggerEl = this.popoverTrigger().host.nativeElement;
|
|
4921
4949
|
if (!overlayEl || !triggerEl)
|
|
4922
4950
|
return;
|
|
4923
|
-
|
|
4924
|
-
|
|
4951
|
+
// Read the arrow's actual rendered size so the calculation stays correct
|
|
4952
|
+
// regardless of whether the SCSS uses px or rem and regardless of root
|
|
4953
|
+
// font-size. If the arrow isn't in the DOM yet (e.g. first
|
|
4954
|
+
// `updateArrowPosition` before the template projects it), bail out — the
|
|
4955
|
+
// subsequent `(positionChange)` call will retry with the real size.
|
|
4956
|
+
const arrowEl = overlayEl.querySelector(".tedi-popover__arrow");
|
|
4957
|
+
if (!arrowEl)
|
|
4958
|
+
return;
|
|
4959
|
+
const offset = calculateArrowOffset(this.currentPlacement(), triggerEl, overlayEl, arrowEl.offsetWidth);
|
|
4925
4960
|
this.arrowLeft.set(offset.left);
|
|
4926
4961
|
this.arrowTop.set(offset.top);
|
|
4927
4962
|
}
|
|
@@ -5020,11 +5055,13 @@ class PopoverComponent {
|
|
|
5020
5055
|
this.hidePopover(true);
|
|
5021
5056
|
}
|
|
5022
5057
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5023
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PopoverComponent, isStandalone: true, selector: "tedi-popover", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", 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 }, withArrow: { classPropertyName: "withArrow", publicName: "withArrow", isSignal: true, isRequired: false, transformFunction: null }, lockScroll: { classPropertyName: "lockScroll", publicName: "lockScroll", isSignal: true, isRequired: false, transformFunction: null }, timeoutDelay: { classPropertyName: "timeoutDelay", publicName: "timeoutDelay", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "popoverTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "popoverContent", first: true, predicate: PopoverContentComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[tedi-popover-trigger]\" />\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n (positionChange)=\"onPositionChange($event)\"\n (attach)=\"onOverlayAttach()\"\n>\n <div\n [class]=\"panelClasses()\"\n [id]=\"containerId()\"\n [attr.data-placement]=\"currentPlacement()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n tabindex=\"-1\"\n role=\"dialog\"\n >\n @if (withArrow()) {\n <div\n class=\"tedi-popover__arrow\"\n [style.left.px]=\"arrowLeft()\"\n [style.top.px]=\"arrowTop()\"\n ></div>\n }\n <ng-content select=\"tedi-popover-content\" />\n </div>\n</ng-template>\n", styles: ["tedi-popover{display:
|
|
5058
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PopoverComponent, isStandalone: true, selector: "tedi-popover", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", 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 }, withArrow: { classPropertyName: "withArrow", publicName: "withArrow", isSignal: true, isRequired: false, transformFunction: null }, lockScroll: { classPropertyName: "lockScroll", publicName: "lockScroll", isSignal: true, isRequired: false, transformFunction: null }, timeoutDelay: { classPropertyName: "timeoutDelay", publicName: "timeoutDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tedi-popover" }, queries: [{ propertyName: "popoverTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "popoverContent", first: true, predicate: PopoverContentComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[tedi-popover-trigger]\" />\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n (positionChange)=\"onPositionChange($event)\"\n (attach)=\"onOverlayAttach()\"\n>\n <div\n [class]=\"panelClasses()\"\n [id]=\"containerId()\"\n [attr.data-placement]=\"currentPlacement()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n tabindex=\"-1\"\n role=\"dialog\"\n >\n @if (withArrow()) {\n <div\n class=\"tedi-popover__arrow\"\n [style.left.px]=\"arrowLeft()\"\n [style.top.px]=\"arrowTop()\"\n ></div>\n }\n <ng-content select=\"tedi-popover-content\" />\n </div>\n</ng-template>\n", styles: [".tedi-popover{display:inline-flex;align-items:center}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--tedi-borders-01) solid var(--popover-border);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-popover__container--arrow .tedi-popover__arrow{position:absolute;z-index:0;width:1.5rem;height:1.5rem;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}.tedi-popover__container--arrow .tedi-popover-content{z-index:1}.tedi-popover__container--arrow[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--arrow[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--arrow[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--arrow[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover__container--border{position:relative}.tedi-popover__container--border:before{position:absolute;content:\"\";background:var(--popover-border-prominent)}.tedi-popover__container--border .tedi-popover__arrow{box-sizing:border-box;width:1.5rem;height:1.5rem;background:var(--popover-background);border-right:var(--popover-border-width-lg) solid var(--popover-border-prominent);border-bottom:var(--popover-border-width-lg) solid var(--popover-border-prominent);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:polygon(100% 0,100% 100%,0 100%)}.tedi-popover__container--border[data-placement=top]{border-bottom-right-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=top]:before{right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-lg));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--border[data-placement=bottom]{border-top-left-radius:var(--popover-radius-sharp);border-top-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=bottom]:before{top:calc(-1 * var(--popover-border-width-lg));right:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--border[data-placement=left]{border-top-right-radius:var(--popover-radius-sharp);border-bottom-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=left]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-lg));bottom:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--border[data-placement=right]{border-top-left-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=right]:before{top:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-lg));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-content{position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);max-width:calc(100dvw - 1rem);padding:var(--popover-padding-sm);color:var(--popover-text);background:var(--popover-background);border-radius:var(--popover-radius-rounded)}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-popover-content__title{align-self:center}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5024
5059
|
}
|
|
5025
5060
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
5026
5061
|
type: Component,
|
|
5027
|
-
args: [{ standalone: true, selector: "tedi-popover", imports: [OverlayModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush,
|
|
5062
|
+
args: [{ standalone: true, selector: "tedi-popover", imports: [OverlayModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
5063
|
+
class: "tedi-popover",
|
|
5064
|
+
}, template: "<ng-content select=\"[tedi-popover-trigger]\" />\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n (positionChange)=\"onPositionChange($event)\"\n (attach)=\"onOverlayAttach()\"\n>\n <div\n [class]=\"panelClasses()\"\n [id]=\"containerId()\"\n [attr.data-placement]=\"currentPlacement()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n tabindex=\"-1\"\n role=\"dialog\"\n >\n @if (withArrow()) {\n <div\n class=\"tedi-popover__arrow\"\n [style.left.px]=\"arrowLeft()\"\n [style.top.px]=\"arrowTop()\"\n ></div>\n }\n <ng-content select=\"tedi-popover-content\" />\n </div>\n</ng-template>\n", styles: [".tedi-popover{display:inline-flex;align-items:center}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--tedi-borders-01) solid var(--popover-border);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-popover__container--arrow .tedi-popover__arrow{position:absolute;z-index:0;width:1.5rem;height:1.5rem;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}.tedi-popover__container--arrow .tedi-popover-content{z-index:1}.tedi-popover__container--arrow[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--arrow[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--arrow[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--arrow[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover__container--border{position:relative}.tedi-popover__container--border:before{position:absolute;content:\"\";background:var(--popover-border-prominent)}.tedi-popover__container--border .tedi-popover__arrow{box-sizing:border-box;width:1.5rem;height:1.5rem;background:var(--popover-background);border-right:var(--popover-border-width-lg) solid var(--popover-border-prominent);border-bottom:var(--popover-border-width-lg) solid var(--popover-border-prominent);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:polygon(100% 0,100% 100%,0 100%)}.tedi-popover__container--border[data-placement=top]{border-bottom-right-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=top]:before{right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-lg));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--border[data-placement=bottom]{border-top-left-radius:var(--popover-radius-sharp);border-top-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=bottom]:before{top:calc(-1 * var(--popover-border-width-lg));right:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--border[data-placement=left]{border-top-right-radius:var(--popover-radius-sharp);border-bottom-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=left]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-lg));bottom:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--border[data-placement=right]{border-top-left-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=right]:before{top:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-lg));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-content{position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);max-width:calc(100dvw - 1rem);padding:var(--popover-padding-sm);color:var(--popover-text);background:var(--popover-background);border-radius:var(--popover-radius-rounded)}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-popover-content__title{align-self:center}\n"] }]
|
|
5028
5065
|
}], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], preventOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventOverflow", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], withBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "withBorder", required: false }] }], withArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "withArrow", required: false }] }], lockScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockScroll", required: false }] }], timeoutDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeoutDelay", required: false }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }], popoverTrigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopoverTriggerDirective), { isSignal: true }] }], popoverContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopoverContentComponent), { isSignal: true }] }] } });
|
|
5029
5066
|
|
|
5030
5067
|
class DatePickerHeaderComponent {
|
|
@@ -13435,34 +13472,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
13435
13472
|
|
|
13436
13473
|
class HeaderComponent {
|
|
13437
13474
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13438
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: HeaderComponent, isStandalone: true, selector: "header[tedi-header]", host: { classAttribute: "tedi-header" }, ngImport: i0, template: "<ng-content select=\"button[tedi-sidenav-toggle]\"></ng-content>\n<div class=\"tedi-header__main\">\n <ng-content></ng-content>\n</div
|
|
13475
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: HeaderComponent, isStandalone: true, selector: "header[tedi-header]", host: { classAttribute: "tedi-header" }, ngImport: i0, template: "<div class=\"tedi-header__main\">\n <ng-content select=\"button[tedi-sidenav-toggle]\"></ng-content>\n <div class=\"tedi-header__main--content\">\n <ng-content></ng-content>\n </div>\n</div>\n<ng-content select=\"tedi-header-bottom\"></ng-content>\n", styles: [".tedi-header{display:block;box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-header__main{display:flex;min-height:var(--layout-header-height);overflow:auto;background:var(--header-background)}.tedi-header__main--content{display:flex;gap:var(--layout-header-items-right-gutter-x);align-items:center;justify-content:space-between;width:100%;min-height:var(--layout-header-height);padding:var(--layout-header-padding-y) var(--layout-header-padding-right) var(--layout-header-padding-y) var(--layout-header-padding-left)}.tedi-header__link-button.tedi-link{display:inline-flex;gap:var(--link-inner-spacing-x);align-items:center;padding:0;font-size:var(--body-regular-size);white-space:nowrap;background-color:transparent;border:0}.tedi-header__link-button.tedi-link,.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]),.tedi-header__link-button.tedi-link:active:not(:disabled,[aria-disabled=true]),.tedi-header__link-button.tedi-link:focus-visible:not(:disabled){color:var(--header-dropdown-default)}.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--header-dropdown-hover)}.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]) span{text-decoration:underline!important}.tedi-header__link-button.tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--header-dropdown-active)}.tedi-header__link-button.tedi-link:focus-visible:not(:disabled){color:var(--header-dropdown-focus)}.tedi-header__link-button.tedi-link span{text-decoration:none!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
13439
13476
|
}
|
|
13440
13477
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
13441
13478
|
type: Component,
|
|
13442
13479
|
args: [{ selector: "header[tedi-header]", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
13443
13480
|
"class": "tedi-header"
|
|
13444
|
-
}, template: "<ng-content select=\"button[tedi-sidenav-toggle]\"></ng-content>\n<div class=\"tedi-header__main\">\n <ng-content></ng-content>\n</div
|
|
13481
|
+
}, template: "<div class=\"tedi-header__main\">\n <ng-content select=\"button[tedi-sidenav-toggle]\"></ng-content>\n <div class=\"tedi-header__main--content\">\n <ng-content></ng-content>\n </div>\n</div>\n<ng-content select=\"tedi-header-bottom\"></ng-content>\n", styles: [".tedi-header{display:block;box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-header__main{display:flex;min-height:var(--layout-header-height);overflow:auto;background:var(--header-background)}.tedi-header__main--content{display:flex;gap:var(--layout-header-items-right-gutter-x);align-items:center;justify-content:space-between;width:100%;min-height:var(--layout-header-height);padding:var(--layout-header-padding-y) var(--layout-header-padding-right) var(--layout-header-padding-y) var(--layout-header-padding-left)}.tedi-header__link-button.tedi-link{display:inline-flex;gap:var(--link-inner-spacing-x);align-items:center;padding:0;font-size:var(--body-regular-size);white-space:nowrap;background-color:transparent;border:0}.tedi-header__link-button.tedi-link,.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]),.tedi-header__link-button.tedi-link:active:not(:disabled,[aria-disabled=true]),.tedi-header__link-button.tedi-link:focus-visible:not(:disabled){color:var(--header-dropdown-default)}.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--header-dropdown-hover)}.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]) span{text-decoration:underline!important}.tedi-header__link-button.tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--header-dropdown-active)}.tedi-header__link-button.tedi-link:focus-visible:not(:disabled){color:var(--header-dropdown-focus)}.tedi-header__link-button.tedi-link span{text-decoration:none!important}\n"] }]
|
|
13445
13482
|
}] });
|
|
13446
13483
|
|
|
13447
13484
|
class HeaderActionsComponent {
|
|
13448
13485
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13449
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: HeaderActionsComponent, isStandalone: true, selector: "tedi-header-actions", host: { classAttribute: "tedi-header-actions" }, ngImport: i0, template: "<ng-content />", isInline: true, styles: [".tedi-header-actions{display:flex;align-items:center;height:100
|
|
13486
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: HeaderActionsComponent, isStandalone: true, selector: "tedi-header-actions", host: { classAttribute: "tedi-header-actions" }, ngImport: i0, template: "<ng-content />", isInline: true, styles: [".tedi-header-actions{display:flex;gap:var(--layout-header-items-right-gutter-x);align-items:center;height:100%;margin-left:auto}.tedi-header-actions>*{display:flex;align-items:center;height:100%}.tedi-header-actions>*:has(.tedi-header-login__button--mobile),.tedi-header-actions>*:has(.tedi-header-profile--mobile){padding-left:0}.tedi-header-actions>.tedi-separator--vertical{align-self:stretch;height:auto!important;margin:var(--layout-header-separator-padding-y) 0}@media(min-width:48rem)and (max-width:61.98rem){.tedi-header-actions{max-height:2.75rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
13450
13487
|
}
|
|
13451
13488
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderActionsComponent, decorators: [{
|
|
13452
13489
|
type: Component,
|
|
13453
13490
|
args: [{ selector: "tedi-header-actions", standalone: true, template: "<ng-content />", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
13454
13491
|
"class": "tedi-header-actions"
|
|
13455
|
-
}, styles: [".tedi-header-actions{display:flex;align-items:center;height:100
|
|
13492
|
+
}, styles: [".tedi-header-actions{display:flex;gap:var(--layout-header-items-right-gutter-x);align-items:center;height:100%;margin-left:auto}.tedi-header-actions>*{display:flex;align-items:center;height:100%}.tedi-header-actions>*:has(.tedi-header-login__button--mobile),.tedi-header-actions>*:has(.tedi-header-profile--mobile){padding-left:0}.tedi-header-actions>.tedi-separator--vertical{align-self:stretch;height:auto!important;margin:var(--layout-header-separator-padding-y) 0}@media(min-width:48rem)and (max-width:61.98rem){.tedi-header-actions{max-height:2.75rem}}\n"] }]
|
|
13493
|
+
}] });
|
|
13494
|
+
|
|
13495
|
+
/**
|
|
13496
|
+
* Mobile-only secondary row rendered below the main header bar.
|
|
13497
|
+
*
|
|
13498
|
+
* Typical use: a compact search bar or mobile-specific navigation that only
|
|
13499
|
+
* appears below the `md` breakpoint. Above `md` the component is hidden via
|
|
13500
|
+
* CSS, so consumers can include it unconditionally — desktop users won't see it.
|
|
13501
|
+
*
|
|
13502
|
+
* @example
|
|
13503
|
+
* <header tedi-header>
|
|
13504
|
+
* <!-- main content -->
|
|
13505
|
+
* <tedi-header-bottom>
|
|
13506
|
+
* <tedi-header-search mobileVariant="inline">
|
|
13507
|
+
* <tedi-search inputId="search" placeholder="Search..." />
|
|
13508
|
+
* </tedi-header-search>
|
|
13509
|
+
* </tedi-header-bottom>
|
|
13510
|
+
* </header>
|
|
13511
|
+
*/
|
|
13512
|
+
class HeaderBottomComponent {
|
|
13513
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderBottomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13514
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: HeaderBottomComponent, isStandalone: true, selector: "tedi-header-bottom", host: { classAttribute: "tedi-header-bottom" }, ngImport: i0, template: "<ng-content />", isInline: true, styles: [".tedi-header-bottom{display:block;padding:var(--layout-grid-gutters-12) var(--layout-page-spacing-x);background:var(--general-surface-primary);border-top:var(--tedi-borders-01) solid var(--general-border-primary);border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}@media(min-width:48rem){.tedi-header-bottom{display:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
13515
|
+
}
|
|
13516
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderBottomComponent, decorators: [{
|
|
13517
|
+
type: Component,
|
|
13518
|
+
args: [{ selector: "tedi-header-bottom", standalone: true, template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
13519
|
+
"class": "tedi-header-bottom",
|
|
13520
|
+
}, styles: [".tedi-header-bottom{display:block;padding:var(--layout-grid-gutters-12) var(--layout-page-spacing-x);background:var(--general-surface-primary);border-top:var(--tedi-borders-01) solid var(--general-border-primary);border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}@media(min-width:48rem){.tedi-header-bottom{display:none}}\n"] }]
|
|
13456
13521
|
}] });
|
|
13457
13522
|
|
|
13458
13523
|
class HeaderContentComponent {
|
|
13524
|
+
/**
|
|
13525
|
+
* Controls the horizontal alignment of the projected content (`justify-content`).
|
|
13526
|
+
* Useful when the center area mixes nav links with another component (e.g. a
|
|
13527
|
+
* `<tedi-header-search>`) and you want to push them apart or align them to one edge.
|
|
13528
|
+
* @default "center"
|
|
13529
|
+
*/
|
|
13530
|
+
alignment = input("center", ...(ngDevMode ? [{ debugName: "alignment" }] : []));
|
|
13531
|
+
classes = computed(() => `tedi-header-content tedi-header-content--${this.alignment()}`, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
13459
13532
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13460
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
13533
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: HeaderContentComponent, isStandalone: true, selector: "tedi-header-content", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<ng-content />", isInline: true, styles: [".tedi-header-content{display:flex;flex:1 0 0;gap:var(--layout-header-items-center-gutter-x);align-items:center}.tedi-header-content--flex-start{justify-content:flex-start}.tedi-header-content--center{justify-content:center}.tedi-header-content--space-between{justify-content:space-between}.tedi-header-content a,.tedi-header-content .tedi-link{color:var(--header-link-default)}.tedi-header-content a:hover:not(:disabled,[aria-disabled=true]),.tedi-header-content .tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--header-link-hover)}.tedi-header-content a:active:not(:disabled,[aria-disabled=true]),.tedi-header-content .tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--header-link-active)}.tedi-header-content a:focus-visible:not(:disabled),.tedi-header-content .tedi-link:focus-visible:not(:disabled){outline:var(--tedi-borders-02) solid var(--header-link-focus);outline-offset:var(--tedi-borders-01)}.tedi-header-content>*{display:flex;gap:var(--layout-header-items-center-gutter-x)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
13461
13534
|
}
|
|
13462
13535
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderContentComponent, decorators: [{
|
|
13463
13536
|
type: Component,
|
|
13464
|
-
args: [{ selector:
|
|
13465
|
-
|
|
13537
|
+
args: [{ selector: "tedi-header-content", standalone: true, template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
13538
|
+
"[class]": "classes()",
|
|
13539
|
+
}, styles: [".tedi-header-content{display:flex;flex:1 0 0;gap:var(--layout-header-items-center-gutter-x);align-items:center}.tedi-header-content--flex-start{justify-content:flex-start}.tedi-header-content--center{justify-content:center}.tedi-header-content--space-between{justify-content:space-between}.tedi-header-content a,.tedi-header-content .tedi-link{color:var(--header-link-default)}.tedi-header-content a:hover:not(:disabled,[aria-disabled=true]),.tedi-header-content .tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--header-link-hover)}.tedi-header-content a:active:not(:disabled,[aria-disabled=true]),.tedi-header-content .tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--header-link-active)}.tedi-header-content a:focus-visible:not(:disabled),.tedi-header-content .tedi-link:focus-visible:not(:disabled){outline:var(--tedi-borders-02) solid var(--header-link-focus);outline-offset:var(--tedi-borders-01)}.tedi-header-content>*{display:flex;gap:var(--layout-header-items-center-gutter-x)}\n"] }]
|
|
13540
|
+
}], propDecorators: { alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }] } });
|
|
13466
13541
|
|
|
13467
13542
|
class HeaderLanguageComponent {
|
|
13468
13543
|
/**
|
|
@@ -13484,7 +13559,7 @@ class HeaderLanguageComponent {
|
|
|
13484
13559
|
this.popover()?.hidePopover();
|
|
13485
13560
|
}
|
|
13486
13561
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderLanguageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13487
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: HeaderLanguageComponent, isStandalone: true, selector: "tedi-header-language", inputs: { languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { languageChange: "languageChange" }, host: { classAttribute: "tedi-header-language" }, viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<span\n tedi-text\n color=\"secondary\"\n modifiers=\"small\"\n class=\"tedi-header-language__label\"\n >{{ \"header.select-lang\" | tediTranslate }}</span\n>\n<tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\">\n <button\n type=\"button\"\n tedi-popover-trigger\n class=\"tedi-link tedi-header__link-button\"\n >\n <span>{{ languages()[translationService.getLanguage()] }}</span>\n <tedi-icon
|
|
13562
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: HeaderLanguageComponent, isStandalone: true, selector: "tedi-header-language", inputs: { languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { languageChange: "languageChange" }, host: { classAttribute: "tedi-header-language" }, viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<span\n tedi-text\n color=\"secondary\"\n modifiers=\"small\"\n class=\"tedi-header-language__label\"\n >{{ \"header.select-lang\" | tediTranslate }}</span\n>\n<tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\">\n <button\n type=\"button\"\n tedi-popover-trigger\n class=\"tedi-link tedi-header__link-button\"\n >\n <span>{{ languages()[translationService.getLanguage()] }}</span>\n <tedi-icon\n name=\"expand_more\"\n [size]=\"16\"\n color=\"inherit\"\n class=\"tedi-header-language__chevron\"\n />\n </button>\n <tedi-popover-content maxWidth=\"none\">\n <button\n *ngFor=\"let language of languageKeys()\"\n type=\"button\"\n class=\"tedi-link tedi-header__link-button\"\n (click)=\"handleChangeLang(language)\"\n >\n <span>{{ languages()[language] }}</span>\n </button>\n </tedi-popover-content>\n</tedi-popover>\n", styles: [".tedi-header-language{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.tedi-header-language [tedi-popover-trigger] .tedi-header-language__chevron{margin:0;transition:transform .2s ease-in-out}.tedi-header-language [tedi-popover-trigger][aria-expanded=true] .tedi-header-language__chevron{transform:rotate(-180deg)}@media(max-width:47.98rem){.tedi-header-language{display:flex;align-items:center;justify-content:center;width:var(--layout-header-mobile-button-size);min-width:var(--layout-header-mobile-button-min-size);height:var(--layout-header-mobile-button-min-size)}}.tedi-header-language__label{display:none}@media(min-width:62rem){.tedi-header-language__label{display:block}}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
13488
13563
|
}
|
|
13489
13564
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderLanguageComponent, decorators: [{
|
|
13490
13565
|
type: Component,
|
|
@@ -13498,43 +13573,266 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
13498
13573
|
TediTranslationPipe,
|
|
13499
13574
|
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
13500
13575
|
class: "tedi-header-language",
|
|
13501
|
-
}, template: "<span\n tedi-text\n color=\"secondary\"\n modifiers=\"small\"\n class=\"tedi-header-language__label\"\n >{{ \"header.select-lang\" | tediTranslate }}</span\n>\n<tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\">\n <button\n type=\"button\"\n tedi-popover-trigger\n class=\"tedi-link tedi-header__link-button\"\n >\n <span>{{ languages()[translationService.getLanguage()] }}</span>\n <tedi-icon
|
|
13576
|
+
}, template: "<span\n tedi-text\n color=\"secondary\"\n modifiers=\"small\"\n class=\"tedi-header-language__label\"\n >{{ \"header.select-lang\" | tediTranslate }}</span\n>\n<tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\">\n <button\n type=\"button\"\n tedi-popover-trigger\n class=\"tedi-link tedi-header__link-button\"\n >\n <span>{{ languages()[translationService.getLanguage()] }}</span>\n <tedi-icon\n name=\"expand_more\"\n [size]=\"16\"\n color=\"inherit\"\n class=\"tedi-header-language__chevron\"\n />\n </button>\n <tedi-popover-content maxWidth=\"none\">\n <button\n *ngFor=\"let language of languageKeys()\"\n type=\"button\"\n class=\"tedi-link tedi-header__link-button\"\n (click)=\"handleChangeLang(language)\"\n >\n <span>{{ languages()[language] }}</span>\n </button>\n </tedi-popover-content>\n</tedi-popover>\n", styles: [".tedi-header-language{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.tedi-header-language [tedi-popover-trigger] .tedi-header-language__chevron{margin:0;transition:transform .2s ease-in-out}.tedi-header-language [tedi-popover-trigger][aria-expanded=true] .tedi-header-language__chevron{transform:rotate(-180deg)}@media(max-width:47.98rem){.tedi-header-language{display:flex;align-items:center;justify-content:center;width:var(--layout-header-mobile-button-size);min-width:var(--layout-header-mobile-button-min-size);height:var(--layout-header-mobile-button-min-size)}}.tedi-header-language__label{display:none}@media(min-width:62rem){.tedi-header-language__label{display:block}}\n"] }]
|
|
13502
13577
|
}], propDecorators: { languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: true }] }], languageChange: [{ type: i0.Output, args: ["languageChange"] }], popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverComponent), { isSignal: true }] }] } });
|
|
13503
13578
|
|
|
13579
|
+
/**
|
|
13580
|
+
* Compact icon + label button used inside the mobile header row
|
|
13581
|
+
* (`<tedi-header-bottom>` or a mobile-specific section of
|
|
13582
|
+
* `<tedi-header-actions>`).
|
|
13583
|
+
*
|
|
13584
|
+
* Renders as an `<a>` when `href` is provided and `disabled` is false,
|
|
13585
|
+
* otherwise as a `<button>` — mirroring the React `HeaderMobileButton`.
|
|
13586
|
+
*
|
|
13587
|
+
* @example
|
|
13588
|
+
* <tedi-header-mobile-button icon="menu" label="Menu" />
|
|
13589
|
+
* <tedi-header-mobile-button icon="search" label="Search" href="/search" />
|
|
13590
|
+
* <tedi-header-mobile-button icon="notifications" label="Alerts" [selected]="true" />
|
|
13591
|
+
*/
|
|
13592
|
+
class HeaderMobileButtonComponent {
|
|
13593
|
+
/** Material icon name displayed inside the button. */
|
|
13594
|
+
icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
13595
|
+
/** Label text displayed below the icon. */
|
|
13596
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
13597
|
+
/**
|
|
13598
|
+
* If provided (and not disabled), the button renders as an `<a>`
|
|
13599
|
+
* navigating to this URL. Otherwise renders as a `<button>`.
|
|
13600
|
+
*/
|
|
13601
|
+
href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
|
|
13602
|
+
/** Whether the button is in a selected state. */
|
|
13603
|
+
selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
|
|
13604
|
+
/** Whether the button is disabled. */
|
|
13605
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
13606
|
+
/**
|
|
13607
|
+
* Accessible name override forwarded to the inner `<button>`/`<a>`.
|
|
13608
|
+
* Useful when the visible label needs to be augmented for screen readers
|
|
13609
|
+
* (e.g. when the button only renders an icon).
|
|
13610
|
+
*/
|
|
13611
|
+
ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
13612
|
+
/**
|
|
13613
|
+
* Forwarded to the inner `<button>` as `aria-haspopup`. Set to `'dialog'`
|
|
13614
|
+
* when the button opens a modal dialog, `'menu'` for menus, etc.
|
|
13615
|
+
*
|
|
13616
|
+
* Only applied when the component renders as a `<button>` (i.e. when
|
|
13617
|
+
* `href` is not set). A real navigation link with popup-trigger semantics
|
|
13618
|
+
* is confusing to assistive tech — if a popup is involved, omit `href`
|
|
13619
|
+
* so the component renders as a button.
|
|
13620
|
+
*/
|
|
13621
|
+
ariaHasPopup = input(...(ngDevMode ? [undefined, { debugName: "ariaHasPopup" }] : []));
|
|
13622
|
+
/**
|
|
13623
|
+
* Forwarded to the inner `<button>` as `aria-expanded`. Pair with
|
|
13624
|
+
* `ariaHasPopup` when this button toggles a dialog/menu open.
|
|
13625
|
+
*
|
|
13626
|
+
* Only applied when the component renders as a `<button>` (i.e. when
|
|
13627
|
+
* `href` is not set).
|
|
13628
|
+
*/
|
|
13629
|
+
ariaExpanded = input(...(ngDevMode ? [undefined, { debugName: "ariaExpanded" }] : []));
|
|
13630
|
+
// Render as `<a>` only when href is set AND not disabled — mirrors React's
|
|
13631
|
+
// `if (disabled || !href) { <Button> } else { <Link> }`.
|
|
13632
|
+
renderAsLink = computed(() => !!this.href() && !this.disabled(), ...(ngDevMode ? [{ debugName: "renderAsLink" }] : []));
|
|
13633
|
+
classes = computed(() => {
|
|
13634
|
+
const list = ["tedi-header-mobile-button"];
|
|
13635
|
+
if (this.selected()) {
|
|
13636
|
+
list.push("tedi-header-mobile-button--selected");
|
|
13637
|
+
}
|
|
13638
|
+
if (this.disabled()) {
|
|
13639
|
+
list.push("tedi-header-mobile-button--disabled");
|
|
13640
|
+
}
|
|
13641
|
+
return list.join(" ");
|
|
13642
|
+
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
13643
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderMobileButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13644
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderMobileButtonComponent, isStandalone: true, selector: "tedi-header-mobile-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaHasPopup: { classPropertyName: "ariaHasPopup", publicName: "ariaHasPopup", isSignal: true, isRequired: false, transformFunction: null }, ariaExpanded: { classPropertyName: "ariaExpanded", publicName: "ariaExpanded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (renderAsLink()) {\n <a\n [href]=\"href()\"\n [class]=\"classes()\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <ng-container *ngTemplateOutlet=\"inner\" />\n </a>\n} @else {\n <button\n type=\"button\"\n [disabled]=\"disabled()\"\n [class]=\"classes()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-haspopup]=\"ariaHasPopup()\"\n [attr.aria-expanded]=\"ariaExpanded()\"\n >\n <ng-container *ngTemplateOutlet=\"inner\" />\n </button>\n}\n\n<ng-template #inner>\n <span class=\"tedi-header-mobile-button__inner\">\n <tedi-icon [name]=\"icon()\" color=\"inherit\" />\n @if (label()) {\n <span\n tedi-text\n modifiers=\"extra-small\"\n class=\"tedi-header-mobile-button__text\"\n >\n {{ label() }}\n </span>\n }\n </span>\n</ng-template>\n", styles: [".tedi-header-mobile-button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:var(--layout-header-mobile-button-size);min-width:var(--layout-header-mobile-button-min-size);height:var(--layout-header-mobile-button-min-size);padding:var(--layout-grid-gutters-08);color:var(--header-mobile-button-text-default);text-decoration:none;cursor:pointer;background-color:var(--header-mobile-button-background-default);border:transparent;border-radius:unset}.tedi-header-mobile-button__inner{display:flex;flex-direction:column;align-items:center}.tedi-header-mobile-button__text{color:inherit}.tedi-header-mobile-button:not(.tedi-header-mobile-button--disabled):hover{color:var(--header-mobile-button-text-hover)}.tedi-header-mobile-button:not(.tedi-header-mobile-button--disabled):active{color:var(--header-mobile-button-text-active)}.tedi-header-mobile-button:not(.tedi-header-mobile-button--disabled):focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--tedi-neutral-100),inset 0 0 0 3px var(--tedi-blue-500)}.tedi-header-mobile-button--selected{background:var(--header-mobile-button-background-selected)}.tedi-header-mobile-button--disabled{color:var(--header-mobile-button-text-disabled);cursor:default;background:var(--header-mobile-button-background-disabled)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
13645
|
+
}
|
|
13646
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderMobileButtonComponent, decorators: [{
|
|
13647
|
+
type: Component,
|
|
13648
|
+
args: [{ selector: "tedi-header-mobile-button", standalone: true, imports: [NgTemplateOutlet, IconComponent, TextComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (renderAsLink()) {\n <a\n [href]=\"href()\"\n [class]=\"classes()\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <ng-container *ngTemplateOutlet=\"inner\" />\n </a>\n} @else {\n <button\n type=\"button\"\n [disabled]=\"disabled()\"\n [class]=\"classes()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-haspopup]=\"ariaHasPopup()\"\n [attr.aria-expanded]=\"ariaExpanded()\"\n >\n <ng-container *ngTemplateOutlet=\"inner\" />\n </button>\n}\n\n<ng-template #inner>\n <span class=\"tedi-header-mobile-button__inner\">\n <tedi-icon [name]=\"icon()\" color=\"inherit\" />\n @if (label()) {\n <span\n tedi-text\n modifiers=\"extra-small\"\n class=\"tedi-header-mobile-button__text\"\n >\n {{ label() }}\n </span>\n }\n </span>\n</ng-template>\n", styles: [".tedi-header-mobile-button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:var(--layout-header-mobile-button-size);min-width:var(--layout-header-mobile-button-min-size);height:var(--layout-header-mobile-button-min-size);padding:var(--layout-grid-gutters-08);color:var(--header-mobile-button-text-default);text-decoration:none;cursor:pointer;background-color:var(--header-mobile-button-background-default);border:transparent;border-radius:unset}.tedi-header-mobile-button__inner{display:flex;flex-direction:column;align-items:center}.tedi-header-mobile-button__text{color:inherit}.tedi-header-mobile-button:not(.tedi-header-mobile-button--disabled):hover{color:var(--header-mobile-button-text-hover)}.tedi-header-mobile-button:not(.tedi-header-mobile-button--disabled):active{color:var(--header-mobile-button-text-active)}.tedi-header-mobile-button:not(.tedi-header-mobile-button--disabled):focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--tedi-neutral-100),inset 0 0 0 3px var(--tedi-blue-500)}.tedi-header-mobile-button--selected{background:var(--header-mobile-button-background-selected)}.tedi-header-mobile-button--disabled{color:var(--header-mobile-button-text-disabled);cursor:default;background:var(--header-mobile-button-background-disabled)}\n"] }]
|
|
13649
|
+
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaHasPopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHasPopup", required: false }] }], ariaExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaExpanded", required: false }] }] } });
|
|
13650
|
+
|
|
13504
13651
|
class HeaderLoginComponent {
|
|
13505
13652
|
breakpointService = inject(BreakpointService);
|
|
13506
13653
|
translationService = inject(TediTranslationService);
|
|
13507
|
-
isMobile = this.breakpointService.isBelowBreakpoint("
|
|
13508
|
-
|
|
13509
|
-
|
|
13510
|
-
|
|
13654
|
+
isMobile = this.breakpointService.isBelowBreakpoint("md");
|
|
13655
|
+
/**
|
|
13656
|
+
* Visual size of the login button.
|
|
13657
|
+
* - `'small'` renders a compact icon-and-caption button (the
|
|
13658
|
+
* `<tedi-header-mobile-button>` variant).
|
|
13659
|
+
* - `'default'` renders a primary button or anchor with text only.
|
|
13660
|
+
*
|
|
13661
|
+
* When left unset, the size is chosen automatically based on the viewport:
|
|
13662
|
+
* `'small'` below the `md` breakpoint, `'default'` from `md` up. Pass an
|
|
13663
|
+
* explicit value to force a variant regardless of viewport.
|
|
13664
|
+
*/
|
|
13665
|
+
size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
|
|
13666
|
+
/**
|
|
13667
|
+
* Custom label text for the login button. When provided, used as-is — not
|
|
13668
|
+
* translated. When omitted or empty, falls back to the `header.login.mobile`
|
|
13669
|
+
* translation key for the compact variant and `header.login` for the full
|
|
13670
|
+
* variant.
|
|
13671
|
+
*/
|
|
13672
|
+
label = input("", ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
13673
|
+
/**
|
|
13674
|
+
* If provided, the login button renders as an `<a>` navigating to this URL.
|
|
13675
|
+
* Otherwise renders as a `<button>`.
|
|
13676
|
+
*/
|
|
13677
|
+
href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
|
|
13678
|
+
xs = input(...(ngDevMode ? [undefined, { debugName: "xs" }] : []));
|
|
13679
|
+
sm = input(...(ngDevMode ? [undefined, { debugName: "sm" }] : []));
|
|
13680
|
+
md = input(...(ngDevMode ? [undefined, { debugName: "md" }] : []));
|
|
13681
|
+
lg = input(...(ngDevMode ? [undefined, { debugName: "lg" }] : []));
|
|
13682
|
+
xl = input(...(ngDevMode ? [undefined, { debugName: "xl" }] : []));
|
|
13683
|
+
xxl = input(...(ngDevMode ? [undefined, { debugName: "xxl" }] : []));
|
|
13684
|
+
breakpointInputs = computed(() => this.breakpointService.getBreakpointInputs({
|
|
13685
|
+
size: this.size(),
|
|
13686
|
+
label: this.label(),
|
|
13687
|
+
xs: this.xs(),
|
|
13688
|
+
sm: this.sm(),
|
|
13689
|
+
md: this.md(),
|
|
13690
|
+
lg: this.lg(),
|
|
13691
|
+
xl: this.xl(),
|
|
13692
|
+
xxl: this.xxl(),
|
|
13693
|
+
}), ...(ngDevMode ? [{ debugName: "breakpointInputs" }] : []));
|
|
13694
|
+
isSmall = computed(() => {
|
|
13695
|
+
const size = this.breakpointInputs().size ?? (this.isMobile() ? "small" : "default");
|
|
13696
|
+
return size === "small";
|
|
13697
|
+
}, ...(ngDevMode ? [{ debugName: "isSmall" }] : []));
|
|
13698
|
+
resolvedLabel = computed(() => {
|
|
13699
|
+
const { label } = this.breakpointInputs();
|
|
13700
|
+
if (label) {
|
|
13701
|
+
return label;
|
|
13702
|
+
}
|
|
13703
|
+
return this.translationService.translate(this.isSmall() ? "header.login.mobile" : "header.login");
|
|
13704
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : []));
|
|
13511
13705
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderLoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13512
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderLoginComponent, isStandalone: true, selector: "tedi-header-login", ngImport: i0, template: "
|
|
13706
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderLoginComponent, isStandalone: true, selector: "tedi-header-login", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isSmall()) {\n <tedi-header-mobile-button\n icon=\"login\"\n [label]=\"resolvedLabel()\"\n [href]=\"href()\"\n />\n} @else if (href()) {\n <a\n tedi-button\n variant=\"primary\"\n [href]=\"href()\"\n class=\"tedi-header-login__button\"\n >\n {{ resolvedLabel() }}\n </a>\n} @else {\n <button\n type=\"button\"\n tedi-button\n variant=\"primary\"\n class=\"tedi-header-login__button\"\n >\n {{ resolvedLabel() }}\n </button>\n}\n", styles: ["tedi-header-login{display:flex;align-items:center;padding-left:0}tedi-header-login .tedi-header-login__button{flex-shrink:0}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: HeaderMobileButtonComponent, selector: "tedi-header-mobile-button", inputs: ["icon", "label", "href", "selected", "disabled", "ariaLabel", "ariaHasPopup", "ariaExpanded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
13513
13707
|
}
|
|
13514
13708
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderLoginComponent, decorators: [{
|
|
13515
13709
|
type: Component,
|
|
13516
|
-
args: [{ selector:
|
|
13710
|
+
args: [{ selector: "tedi-header-login", standalone: true, imports: [ButtonComponent, HeaderMobileButtonComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isSmall()) {\n <tedi-header-mobile-button\n icon=\"login\"\n [label]=\"resolvedLabel()\"\n [href]=\"href()\"\n />\n} @else if (href()) {\n <a\n tedi-button\n variant=\"primary\"\n [href]=\"href()\"\n class=\"tedi-header-login__button\"\n >\n {{ resolvedLabel() }}\n </a>\n} @else {\n <button\n type=\"button\"\n tedi-button\n variant=\"primary\"\n class=\"tedi-header-login__button\"\n >\n {{ resolvedLabel() }}\n </button>\n}\n", styles: ["tedi-header-login{display:flex;align-items:center;padding-left:0}tedi-header-login .tedi-header-login__button{flex-shrink:0}\n"] }]
|
|
13711
|
+
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }] } });
|
|
13712
|
+
|
|
13713
|
+
/**
|
|
13714
|
+
* Marks a projected child of `<tedi-header-logo>` as the dark-theme variant.
|
|
13715
|
+
* `HeaderLogoComponent` detects it via `contentChild` and swaps to the dark
|
|
13716
|
+
* slot when the active theme is `dark`.
|
|
13717
|
+
*/
|
|
13718
|
+
class HeaderLogoDarkDirective {
|
|
13719
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderLogoDarkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
13720
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.24", type: HeaderLogoDarkDirective, isStandalone: true, selector: "[tedi-header-logo-dark]", ngImport: i0 });
|
|
13721
|
+
}
|
|
13722
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderLogoDarkDirective, decorators: [{
|
|
13723
|
+
type: Directive,
|
|
13724
|
+
args: [{
|
|
13725
|
+
selector: "[tedi-header-logo-dark]",
|
|
13726
|
+
standalone: true,
|
|
13727
|
+
}]
|
|
13517
13728
|
}] });
|
|
13518
13729
|
|
|
13519
|
-
class
|
|
13520
|
-
|
|
13521
|
-
|
|
13730
|
+
class HeaderLogoComponent {
|
|
13731
|
+
/**
|
|
13732
|
+
* Optional link URL. When set, the logo is wrapped in an anchor element.
|
|
13733
|
+
*/
|
|
13734
|
+
href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
|
|
13735
|
+
/**
|
|
13736
|
+
* Controls visibility of the logo. Useful for conditionally hiding the logo
|
|
13737
|
+
* based on application state, feature flags, or custom media queries that
|
|
13738
|
+
* fall between standard breakpoints (e.g. 360px). For responsive hiding at
|
|
13739
|
+
* standard breakpoints, prefer wrapping `<tedi-header-logo>` with `*hideAt`
|
|
13740
|
+
* or `*showAt`.
|
|
13741
|
+
* @default true
|
|
13742
|
+
*/
|
|
13743
|
+
showLogo = input(true, ...(ngDevMode ? [{ debugName: "showLogo" }] : []));
|
|
13744
|
+
darkSlot = contentChild(HeaderLogoDarkDirective, ...(ngDevMode ? [{ debugName: "darkSlot" }] : []));
|
|
13745
|
+
themeService = inject(ThemeService);
|
|
13746
|
+
useDark = computed(() => this.themeService.theme() === "dark" && !!this.darkSlot(), ...(ngDevMode ? [{ debugName: "useDark" }] : []));
|
|
13522
13747
|
classes = computed(() => {
|
|
13523
|
-
const
|
|
13524
|
-
if (this.
|
|
13525
|
-
|
|
13526
|
-
|
|
13527
|
-
|
|
13748
|
+
const list = ["tedi-header-logo"];
|
|
13749
|
+
if (this.useDark())
|
|
13750
|
+
list.push("tedi-header-logo--dark");
|
|
13751
|
+
if (!this.showLogo())
|
|
13752
|
+
list.push("tedi-header-logo--hidden");
|
|
13753
|
+
return list.join(" ");
|
|
13528
13754
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
13755
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13756
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderLogoComponent, isStandalone: true, selector: "tedi-header-logo", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, showLogo: { classPropertyName: "showLogo", publicName: "showLogo", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, queries: [{ propertyName: "darkSlot", first: true, predicate: HeaderLogoDarkDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (href(); as link) {\n <a [href]=\"link\" class=\"tedi-header-logo__link\">\n <ng-container *ngTemplateOutlet=\"logos\" />\n </a>\n} @else {\n <ng-container *ngTemplateOutlet=\"logos\" />\n}\n\n<ng-template #logos>\n <span class=\"tedi-header-logo__default\">\n <ng-content />\n </span>\n <span class=\"tedi-header-logo__dark\">\n <ng-content select=\"[tedi-header-logo-dark]\" />\n </span>\n</ng-template>\n", styles: [".tedi-header-logo{display:flex;flex-shrink:0;align-items:center}.tedi-header-logo img,.tedi-header-logo svg{display:block;width:auto;height:var(--layout-header-logo-size);max-height:100%}.tedi-header-logo--hidden{display:none}.tedi-header-logo__link{display:inline-flex;align-items:center}.tedi-header-logo__default{display:contents}.tedi-header-logo__dark,.tedi-header-logo--dark .tedi-header-logo__default{display:none}.tedi-header-logo--dark .tedi-header-logo__dark{display:contents}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
13757
|
+
}
|
|
13758
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderLogoComponent, decorators: [{
|
|
13759
|
+
type: Component,
|
|
13760
|
+
args: [{ selector: "tedi-header-logo", standalone: true, imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
13761
|
+
"[class]": "classes()",
|
|
13762
|
+
}, template: "@if (href(); as link) {\n <a [href]=\"link\" class=\"tedi-header-logo__link\">\n <ng-container *ngTemplateOutlet=\"logos\" />\n </a>\n} @else {\n <ng-container *ngTemplateOutlet=\"logos\" />\n}\n\n<ng-template #logos>\n <span class=\"tedi-header-logo__default\">\n <ng-content />\n </span>\n <span class=\"tedi-header-logo__dark\">\n <ng-content select=\"[tedi-header-logo-dark]\" />\n </span>\n</ng-template>\n", styles: [".tedi-header-logo{display:flex;flex-shrink:0;align-items:center}.tedi-header-logo img,.tedi-header-logo svg{display:block;width:auto;height:var(--layout-header-logo-size);max-height:100%}.tedi-header-logo--hidden{display:none}.tedi-header-logo__link{display:inline-flex;align-items:center}.tedi-header-logo__default{display:contents}.tedi-header-logo__dark,.tedi-header-logo--dark .tedi-header-logo__default{display:none}.tedi-header-logo--dark .tedi-header-logo__dark{display:contents}\n"] }]
|
|
13763
|
+
}], propDecorators: { href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], showLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLogo", required: false }] }], darkSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HeaderLogoDarkDirective), { isSignal: true }] }] } });
|
|
13764
|
+
|
|
13765
|
+
class HeaderLogoutComponent {
|
|
13766
|
+
translationService = inject(TediTranslationService);
|
|
13767
|
+
breakpointService = inject(BreakpointService);
|
|
13768
|
+
isMobile = this.breakpointService.isBelowBreakpoint("md");
|
|
13769
|
+
/**
|
|
13770
|
+
* Visual size of the logout button.
|
|
13771
|
+
* - `'small'` renders a compact icon-and-caption button (the
|
|
13772
|
+
* `<tedi-header-mobile-button>` variant).
|
|
13773
|
+
* - `'default'` renders a full-width link with inline icon and text.
|
|
13774
|
+
*
|
|
13775
|
+
* When left unset (the default), the size is chosen automatically based on
|
|
13776
|
+
* the viewport: `'small'` below the `md` breakpoint, `'default'` from `md`
|
|
13777
|
+
* up. Pass an explicit value to force a variant regardless of viewport —
|
|
13778
|
+
* useful inside tight containers (sidebar panel, dropdown) where the
|
|
13779
|
+
* desktop layout has no room.
|
|
13780
|
+
*/
|
|
13781
|
+
size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
|
|
13782
|
+
/**
|
|
13783
|
+
* Custom label text for the logout button. When provided, used as-is — not
|
|
13784
|
+
* translated. When omitted or empty, falls back to the `header.logout.mobile`
|
|
13785
|
+
* translation key for the compact variant and `header.logout` for the full
|
|
13786
|
+
* variant.
|
|
13787
|
+
*/
|
|
13788
|
+
label = input("", ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
13789
|
+
/**
|
|
13790
|
+
* If provided, the logout button renders as an `<a>` navigating to this URL.
|
|
13791
|
+
* Otherwise renders as a `<button>`.
|
|
13792
|
+
*/
|
|
13793
|
+
href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
|
|
13794
|
+
xs = input(...(ngDevMode ? [undefined, { debugName: "xs" }] : []));
|
|
13795
|
+
sm = input(...(ngDevMode ? [undefined, { debugName: "sm" }] : []));
|
|
13796
|
+
md = input(...(ngDevMode ? [undefined, { debugName: "md" }] : []));
|
|
13797
|
+
lg = input(...(ngDevMode ? [undefined, { debugName: "lg" }] : []));
|
|
13798
|
+
xl = input(...(ngDevMode ? [undefined, { debugName: "xl" }] : []));
|
|
13799
|
+
xxl = input(...(ngDevMode ? [undefined, { debugName: "xxl" }] : []));
|
|
13800
|
+
breakpointInputs = computed(() => this.breakpointService.getBreakpointInputs({
|
|
13801
|
+
size: this.size(),
|
|
13802
|
+
label: this.label(),
|
|
13803
|
+
xs: this.xs(),
|
|
13804
|
+
sm: this.sm(),
|
|
13805
|
+
md: this.md(),
|
|
13806
|
+
lg: this.lg(),
|
|
13807
|
+
xl: this.xl(),
|
|
13808
|
+
xxl: this.xxl(),
|
|
13809
|
+
}), ...(ngDevMode ? [{ debugName: "breakpointInputs" }] : []));
|
|
13810
|
+
isSmall = computed(() => {
|
|
13811
|
+
const size = this.breakpointInputs().size ??
|
|
13812
|
+
(this.isMobile() ? "small" : "default");
|
|
13813
|
+
return size === "small";
|
|
13814
|
+
}, ...(ngDevMode ? [{ debugName: "isSmall" }] : []));
|
|
13815
|
+
resolvedLabel = computed(() => {
|
|
13816
|
+
const { label } = this.breakpointInputs();
|
|
13817
|
+
if (label) {
|
|
13818
|
+
return label;
|
|
13819
|
+
}
|
|
13820
|
+
return this.translationService.translate(this.isSmall() ? "header.logout.mobile" : "header.logout");
|
|
13821
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : []));
|
|
13529
13822
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderLogoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13530
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
13823
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderLogoutComponent, isStandalone: true, selector: "tedi-header-logout", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tedi-header-logout" }, ngImport: i0, template: "@if (isSmall()) {\n <tedi-header-mobile-button\n icon=\"logout\"\n [label]=\"resolvedLabel()\"\n [href]=\"href()\"\n />\n} @else if (href()) {\n <a\n tedi-link\n [underline]=\"false\"\n [href]=\"href()\"\n class=\"tedi-header-logout__button\"\n >\n <tedi-icon name=\"logout\" color=\"inherit\" />\n <span tedi-text color=\"inherit\">\n {{ resolvedLabel() }}\n </span>\n </a>\n} @else {\n <button type=\"button\" class=\"tedi-header-logout__button\">\n <tedi-icon name=\"logout\" color=\"inherit\" />\n <span tedi-text color=\"inherit\">\n {{ resolvedLabel() }}\n </span>\n </button>\n}\n", styles: [".tedi-header-logout{display:inline-flex;align-items:center}.tedi-header-logout__button{display:flex;gap:var(--link-inner-spacing-x);align-items:center;min-width:max-content;padding:0;font-size:var(--body-regular-size)}.tedi-header-logout__button tedi-icon.tedi-icon{margin:0;font-size:var(--icon-03)}.tedi-header-logout__button:not(.tedi-link){color:var(--header-mobile-button-text-default);cursor:pointer;background:transparent;border:0}.tedi-header-logout__button:not(.tedi-link):hover{color:var(--header-mobile-button-text-hover)}.tedi-header-logout__button:not(.tedi-link):hover span{text-decoration:underline}.tedi-header-logout__button:not(.tedi-link):active{color:var(--header-mobile-button-text-active)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: LinkComponent, selector: "[tedi-link]", inputs: ["variant", "size", "underline", "target", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: HeaderMobileButtonComponent, selector: "tedi-header-mobile-button", inputs: ["icon", "label", "href", "selected", "disabled", "ariaLabel", "ariaHasPopup", "ariaExpanded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
13531
13824
|
}
|
|
13532
13825
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderLogoutComponent, decorators: [{
|
|
13533
13826
|
type: Component,
|
|
13534
|
-
args: [{ selector:
|
|
13535
|
-
|
|
13536
|
-
|
|
13537
|
-
|
|
13827
|
+
args: [{ selector: "tedi-header-logout", standalone: true, imports: [
|
|
13828
|
+
IconComponent,
|
|
13829
|
+
TextComponent,
|
|
13830
|
+
LinkComponent,
|
|
13831
|
+
HeaderMobileButtonComponent,
|
|
13832
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
13833
|
+
class: "tedi-header-logout",
|
|
13834
|
+
}, template: "@if (isSmall()) {\n <tedi-header-mobile-button\n icon=\"logout\"\n [label]=\"resolvedLabel()\"\n [href]=\"href()\"\n />\n} @else if (href()) {\n <a\n tedi-link\n [underline]=\"false\"\n [href]=\"href()\"\n class=\"tedi-header-logout__button\"\n >\n <tedi-icon name=\"logout\" color=\"inherit\" />\n <span tedi-text color=\"inherit\">\n {{ resolvedLabel() }}\n </span>\n </a>\n} @else {\n <button type=\"button\" class=\"tedi-header-logout__button\">\n <tedi-icon name=\"logout\" color=\"inherit\" />\n <span tedi-text color=\"inherit\">\n {{ resolvedLabel() }}\n </span>\n </button>\n}\n", styles: [".tedi-header-logout{display:inline-flex;align-items:center}.tedi-header-logout__button{display:flex;gap:var(--link-inner-spacing-x);align-items:center;min-width:max-content;padding:0;font-size:var(--body-regular-size)}.tedi-header-logout__button tedi-icon.tedi-icon{margin:0;font-size:var(--icon-03)}.tedi-header-logout__button:not(.tedi-link){color:var(--header-mobile-button-text-default);cursor:pointer;background:transparent;border:0}.tedi-header-logout__button:not(.tedi-link):hover{color:var(--header-mobile-button-text-hover)}.tedi-header-logout__button:not(.tedi-link):hover span{text-decoration:underline}.tedi-header-logout__button:not(.tedi-link):active{color:var(--header-mobile-button-text-active)}\n"] }]
|
|
13835
|
+
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }] } });
|
|
13538
13836
|
|
|
13539
13837
|
class ShowAtDirective {
|
|
13540
13838
|
showAt = input.required(...(ngDevMode ? [{ debugName: "showAt" }] : []));
|
|
@@ -13617,58 +13915,134 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
13617
13915
|
}], ctorParameters: () => [], propDecorators: { hideAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideAt", required: true }] }] } });
|
|
13618
13916
|
|
|
13619
13917
|
class HeaderProfileComponent {
|
|
13620
|
-
/**
|
|
13621
|
-
|
|
13622
|
-
|
|
13623
|
-
|
|
13918
|
+
/**
|
|
13919
|
+
* Custom label text for the profile button. Falls back to the `header.profile`
|
|
13920
|
+
* translation key on desktop, or `header.profile.mobile` on mobile.
|
|
13921
|
+
*/
|
|
13922
|
+
label = input("", ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
13923
|
+
/**
|
|
13924
|
+
* Whether to display a text label next to the profile icon on non-mobile
|
|
13925
|
+
* viewports. When `false` the desktop trigger renders as an icon-only button
|
|
13926
|
+
* and the label (custom or translated) is used as the `aria-label` only.
|
|
13927
|
+
* When `true` the label is visible and a chevron is shown next to it.
|
|
13928
|
+
*
|
|
13929
|
+
* Has no effect on the mobile/small variant — the mobile button always
|
|
13930
|
+
* shows its label.
|
|
13931
|
+
* @default false
|
|
13932
|
+
*/
|
|
13933
|
+
showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : []));
|
|
13934
|
+
/**
|
|
13935
|
+
* Defines the breakpoint from which the profile menu is displayed as a popover.
|
|
13936
|
+
* Below this breakpoint, it is rendered as a modal.
|
|
13937
|
+
*
|
|
13938
|
+
* @default 'lg'
|
|
13939
|
+
*/
|
|
13940
|
+
showPopover = input("lg", ...(ngDevMode ? [{ debugName: "showPopover" }] : []));
|
|
13941
|
+
/**
|
|
13942
|
+
* Removes default item styles from the mobile modal content. When `true`,
|
|
13943
|
+
* projected children render without the padding, border, or background that
|
|
13944
|
+
* `<tedi-header-profile>` normally applies to each direct child of the
|
|
13945
|
+
* modal. Use when the content requires custom item styling.
|
|
13946
|
+
*
|
|
13947
|
+
* Only affects the mobile/modal branch. The desktop popover uses
|
|
13948
|
+
* `<tedi-popover-content>`'s own styling and is unaffected.
|
|
13949
|
+
*
|
|
13950
|
+
* @default false
|
|
13951
|
+
*/
|
|
13952
|
+
noStyle = input(false, ...(ngDevMode ? [{ debugName: "noStyle" }] : []));
|
|
13953
|
+
/**
|
|
13954
|
+
* Visual size of the profile button.
|
|
13955
|
+
* - `'small'` renders a compact icon-and-caption button (the
|
|
13956
|
+
* `<tedi-header-mobile-button>` variant).
|
|
13957
|
+
* - `'default'` renders a button with the user's name + icon.
|
|
13958
|
+
*
|
|
13959
|
+
* When left unset, the size is chosen automatically based on the viewport:
|
|
13960
|
+
* `'small'` below the `md` breakpoint, `'default'` from `md` up. Pass an
|
|
13961
|
+
* explicit value to force a variant regardless of viewport.
|
|
13962
|
+
*/
|
|
13963
|
+
size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
|
|
13964
|
+
xs = input(...(ngDevMode ? [undefined, { debugName: "xs" }] : []));
|
|
13965
|
+
sm = input(...(ngDevMode ? [undefined, { debugName: "sm" }] : []));
|
|
13966
|
+
md = input(...(ngDevMode ? [undefined, { debugName: "md" }] : []));
|
|
13967
|
+
lg = input(...(ngDevMode ? [undefined, { debugName: "lg" }] : []));
|
|
13968
|
+
xl = input(...(ngDevMode ? [undefined, { debugName: "xl" }] : []));
|
|
13969
|
+
xxl = input(...(ngDevMode ? [undefined, { debugName: "xxl" }] : []));
|
|
13624
13970
|
breakpointService = inject(BreakpointService);
|
|
13625
13971
|
translationService = inject(TediTranslationService);
|
|
13626
13972
|
document = inject(DOCUMENT);
|
|
13627
13973
|
host = inject(ElementRef);
|
|
13628
13974
|
renderer = inject(Renderer2);
|
|
13629
|
-
|
|
13975
|
+
destroyRef = inject(DestroyRef);
|
|
13976
|
+
isMobile = computed(() => this.breakpointService.isBelowBreakpoint("md")(), ...(ngDevMode ? [{ debugName: "isMobile" }] : []));
|
|
13977
|
+
isSmall = computed(() => {
|
|
13978
|
+
const size = this.size() ?? (this.isMobile() ? "small" : "default");
|
|
13979
|
+
return size === "small";
|
|
13980
|
+
}, ...(ngDevMode ? [{ debugName: "isSmall" }] : []));
|
|
13981
|
+
breakpointInputs = computed(() => {
|
|
13982
|
+
return this.breakpointService.getBreakpointInputs({
|
|
13983
|
+
label: this.label(),
|
|
13984
|
+
showPopover: this.showPopover(),
|
|
13985
|
+
xs: this.xs(),
|
|
13986
|
+
sm: this.sm(),
|
|
13987
|
+
md: this.md(),
|
|
13988
|
+
lg: this.lg(),
|
|
13989
|
+
xl: this.xl(),
|
|
13990
|
+
xxl: this.xxl(),
|
|
13991
|
+
});
|
|
13992
|
+
}, ...(ngDevMode ? [{ debugName: "breakpointInputs" }] : []));
|
|
13993
|
+
resolvedLabel = computed(() => {
|
|
13994
|
+
const { label } = this.breakpointInputs();
|
|
13995
|
+
if (label) {
|
|
13996
|
+
return label;
|
|
13997
|
+
}
|
|
13998
|
+
return this.translationService.translate(this.isMobile() ? "header.profile.mobile" : "header.profile");
|
|
13999
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : []));
|
|
13630
14000
|
constructor() {
|
|
13631
|
-
effect(() => {
|
|
14001
|
+
effect((onCleanup) => {
|
|
13632
14002
|
if (this.modalOpen()) {
|
|
13633
14003
|
this.renderer.setStyle(this.document.body, "overflow", "hidden");
|
|
13634
14004
|
}
|
|
13635
14005
|
else {
|
|
13636
14006
|
this.renderer.removeStyle(this.document.body, "overflow");
|
|
13637
14007
|
}
|
|
14008
|
+
onCleanup(() => {
|
|
14009
|
+
this.renderer.removeStyle(this.document.body, "overflow");
|
|
14010
|
+
});
|
|
13638
14011
|
});
|
|
13639
14012
|
}
|
|
13640
14013
|
modalOpen = signal(false, ...(ngDevMode ? [{ debugName: "modalOpen" }] : []));
|
|
14014
|
+
/**
|
|
14015
|
+
* Tracks which `HeaderRoleComponent` instance currently has its
|
|
14016
|
+
* accordion open. When a role opens, it writes its own reference here;
|
|
14017
|
+
* other roles watch this signal and close themselves when it changes.
|
|
14018
|
+
* @internal
|
|
14019
|
+
*/
|
|
14020
|
+
activeRole = signal(null, ...(ngDevMode ? [{ debugName: "activeRole" }] : []));
|
|
13641
14021
|
buttonVariant = computed(() => {
|
|
13642
|
-
if (this.
|
|
14022
|
+
if (this.isSmall() || !this.showLabel()) {
|
|
13643
14023
|
return "neutral";
|
|
13644
14024
|
}
|
|
13645
14025
|
return "secondary";
|
|
13646
14026
|
}, ...(ngDevMode ? [{ debugName: "buttonVariant" }] : []));
|
|
13647
|
-
buttonClass = computed(() => {
|
|
13648
|
-
if (this.breakpointService.isBelowBreakpoint("sm")()) {
|
|
13649
|
-
return "tedi-header-profile--mobile";
|
|
13650
|
-
}
|
|
13651
|
-
return null;
|
|
13652
|
-
}, ...(ngDevMode ? [{ debugName: "buttonClass" }] : []));
|
|
13653
14027
|
ngAfterContentInit() {
|
|
13654
14028
|
const element = this.host.nativeElement;
|
|
13655
|
-
this.
|
|
14029
|
+
const cleanup = this.renderer.listen("document", "click", (event) => {
|
|
13656
14030
|
const target = event.target;
|
|
13657
14031
|
const clickedInside = element.contains(target);
|
|
13658
14032
|
if (this.modalOpen() && !clickedInside) {
|
|
13659
14033
|
this.modalOpen.set(false);
|
|
13660
14034
|
}
|
|
13661
|
-
})
|
|
14035
|
+
});
|
|
14036
|
+
this.destroyRef.onDestroy(cleanup);
|
|
13662
14037
|
}
|
|
13663
14038
|
handleModalOpen() {
|
|
13664
|
-
const
|
|
13665
|
-
if (!(
|
|
13666
|
-
this.breakpointService.isAboveBreakpoint(dropdownBreakpoint)())) {
|
|
14039
|
+
const { showPopover } = this.breakpointInputs();
|
|
14040
|
+
if (!this.breakpointService.isAboveBreakpoint(showPopover)()) {
|
|
13667
14041
|
this.modalOpen.update((prev) => !prev);
|
|
13668
14042
|
}
|
|
13669
14043
|
}
|
|
13670
14044
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13671
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderProfileComponent, isStandalone: true, selector: "tedi-header-profile", inputs: {
|
|
14045
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderProfileComponent, isStandalone: true, selector: "tedi-header-profile", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showPopover: { classPropertyName: "showPopover", publicName: "showPopover", isSignal: true, isRequired: false, transformFunction: null }, noStyle: { classPropertyName: "noStyle", publicName: "noStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *hideAt=\"breakpointInputs().showPopover\">\n <ng-container *ngTemplateOutlet=\"trigger\" />\n</ng-container>\n\n<ng-container *showAt=\"breakpointInputs().showPopover\">\n <tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\">\n <button\n type=\"button\"\n tedi-button\n tedi-popover-trigger\n [attr.data-open]=\"modalOpen()\"\n [variant]=\"buttonVariant()\"\n [attr.aria-label]=\"!showLabel() ? resolvedLabel() : null\"\n (click)=\"handleModalOpen()\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-profile__popover\">\n <ng-container *ngTemplateOutlet=\"content\" />\n </tedi-popover-content>\n </tedi-popover>\n</ng-container>\n\n<ng-template #trigger>\n @if (isSmall()) {\n <tedi-header-mobile-button\n [icon]=\"modalOpen() ? 'close' : 'account_circle'\"\n [label]=\"resolvedLabel()\"\n [selected]=\"modalOpen()\"\n ariaHasPopup=\"dialog\"\n [ariaExpanded]=\"modalOpen()\"\n (click)=\"handleModalOpen()\"\n />\n } @else {\n <button\n type=\"button\"\n tedi-button\n [attr.data-open]=\"modalOpen()\"\n [variant]=\"buttonVariant()\"\n [attr.aria-label]=\"!showLabel() ? resolvedLabel() : null\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"modalOpen()\"\n (click)=\"handleModalOpen()\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n }\n <ng-container *ngTemplateOutlet=\"modal\" />\n</ng-template>\n\n<ng-template #buttonContent>\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n class=\"tedi-header-profile__icon\"\n [class.tedi-header-profile__icon--small]=\"showLabel()\"\n />\n @if (showLabel()) {\n <span class=\"tedi-header-profile__label\">{{ resolvedLabel() }}</span>\n <tedi-icon name=\"expand_more\" class=\"tedi-header-profile__icon--expand\" />\n }\n</ng-template>\n\n<ng-template #modal>\n @if (modalOpen()) {\n <div class=\"tedi-header-profile__overlay\" (click)=\"handleModalOpen()\"></div>\n <div\n class=\"tedi-header-profile__modal\"\n [class.tedi-header-profile__modal--no-style]=\"noStyle()\"\n >\n <ng-container *ngTemplateOutlet=\"content\" />\n </div>\n }\n</ng-template>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["tedi-header-profile{align-content:center}tedi-header-profile [tedi-popover-trigger] .tedi-header-profile__icon--expand{transition:transform .2s ease-in-out}tedi-header-profile [tedi-popover-trigger][aria-expanded=true] .tedi-header-profile__icon--expand{transform:rotate(-180deg)}tedi-header-profile tedi-icon.tedi-header-profile__icon{font-size:var(--icon-06)}tedi-header-profile tedi-icon.tedi-header-profile__icon.tedi-header-profile__icon--small{font-size:var(--icon-03)}tedi-header-profile tedi-icon.tedi-header-profile__icon--expand{font-size:var(--icon-03)}tedi-header-profile .tedi-header-profile__label{white-space:nowrap}tedi-header-profile .tedi-header-profile__overlay{position:absolute;top:var(--layout-header-height);left:0;z-index:calc(var(--z-index-header) - 1);width:100%;height:calc(100dvh - var(--layout-header-height));background:#00000040}tedi-header-profile .tedi-header-profile__modal{position:absolute;top:var(--layout-header-height);right:0;z-index:var(--z-index-header);display:flex;flex-direction:column;width:var(--navigation-vertical-item-width-default);max-width:100%;height:calc(100dvh - var(--layout-header-height));overflow-y:auto;background:var(--general-surface-primary);border-top:1px solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal:not(tedi-header-profile .tedi-header-profile__modal--no-style)>*:not(.tedi-header-role){padding:var(--layout-header-modal-item-padding);border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button{flex-direction:row;gap:var(--link-inner-spacing-x);align-items:center;justify-content:flex-start;width:100%;height:auto;min-height:0;padding:0;font-size:var(--body-regular-size)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button .tedi-header-mobile-button__inner{flex-direction:row;gap:var(--link-inner-spacing-x);align-items:center}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button .tedi-header-mobile-button__text{font-size:inherit}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button tedi-icon{font-size:var(--icon-02)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-logout__button tedi-icon{font-size:var(--icon-02)}.tedi-header-profile__popover tedi-header-logout tedi-icon{font-size:var(--icon-02)}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "directive", type: ShowAtDirective, selector: "[showAt]", inputs: ["showAt"] }, { kind: "directive", type: HideAtDirective, selector: "[hideAt]", inputs: ["hideAt"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HeaderMobileButtonComponent, selector: "tedi-header-mobile-button", inputs: ["icon", "label", "href", "selected", "disabled", "ariaLabel", "ariaHasPopup", "ariaExpanded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
13672
14046
|
}
|
|
13673
14047
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderProfileComponent, decorators: [{
|
|
13674
14048
|
type: Component,
|
|
@@ -13681,33 +14055,219 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
13681
14055
|
ShowAtDirective,
|
|
13682
14056
|
HideAtDirective,
|
|
13683
14057
|
NgTemplateOutlet,
|
|
13684
|
-
|
|
13685
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "
|
|
13686
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
14058
|
+
HeaderMobileButtonComponent,
|
|
14059
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *hideAt=\"breakpointInputs().showPopover\">\n <ng-container *ngTemplateOutlet=\"trigger\" />\n</ng-container>\n\n<ng-container *showAt=\"breakpointInputs().showPopover\">\n <tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\">\n <button\n type=\"button\"\n tedi-button\n tedi-popover-trigger\n [attr.data-open]=\"modalOpen()\"\n [variant]=\"buttonVariant()\"\n [attr.aria-label]=\"!showLabel() ? resolvedLabel() : null\"\n (click)=\"handleModalOpen()\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-profile__popover\">\n <ng-container *ngTemplateOutlet=\"content\" />\n </tedi-popover-content>\n </tedi-popover>\n</ng-container>\n\n<ng-template #trigger>\n @if (isSmall()) {\n <tedi-header-mobile-button\n [icon]=\"modalOpen() ? 'close' : 'account_circle'\"\n [label]=\"resolvedLabel()\"\n [selected]=\"modalOpen()\"\n ariaHasPopup=\"dialog\"\n [ariaExpanded]=\"modalOpen()\"\n (click)=\"handleModalOpen()\"\n />\n } @else {\n <button\n type=\"button\"\n tedi-button\n [attr.data-open]=\"modalOpen()\"\n [variant]=\"buttonVariant()\"\n [attr.aria-label]=\"!showLabel() ? resolvedLabel() : null\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"modalOpen()\"\n (click)=\"handleModalOpen()\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n }\n <ng-container *ngTemplateOutlet=\"modal\" />\n</ng-template>\n\n<ng-template #buttonContent>\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n class=\"tedi-header-profile__icon\"\n [class.tedi-header-profile__icon--small]=\"showLabel()\"\n />\n @if (showLabel()) {\n <span class=\"tedi-header-profile__label\">{{ resolvedLabel() }}</span>\n <tedi-icon name=\"expand_more\" class=\"tedi-header-profile__icon--expand\" />\n }\n</ng-template>\n\n<ng-template #modal>\n @if (modalOpen()) {\n <div class=\"tedi-header-profile__overlay\" (click)=\"handleModalOpen()\"></div>\n <div\n class=\"tedi-header-profile__modal\"\n [class.tedi-header-profile__modal--no-style]=\"noStyle()\"\n >\n <ng-container *ngTemplateOutlet=\"content\" />\n </div>\n }\n</ng-template>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["tedi-header-profile{align-content:center}tedi-header-profile [tedi-popover-trigger] .tedi-header-profile__icon--expand{transition:transform .2s ease-in-out}tedi-header-profile [tedi-popover-trigger][aria-expanded=true] .tedi-header-profile__icon--expand{transform:rotate(-180deg)}tedi-header-profile tedi-icon.tedi-header-profile__icon{font-size:var(--icon-06)}tedi-header-profile tedi-icon.tedi-header-profile__icon.tedi-header-profile__icon--small{font-size:var(--icon-03)}tedi-header-profile tedi-icon.tedi-header-profile__icon--expand{font-size:var(--icon-03)}tedi-header-profile .tedi-header-profile__label{white-space:nowrap}tedi-header-profile .tedi-header-profile__overlay{position:absolute;top:var(--layout-header-height);left:0;z-index:calc(var(--z-index-header) - 1);width:100%;height:calc(100dvh - var(--layout-header-height));background:#00000040}tedi-header-profile .tedi-header-profile__modal{position:absolute;top:var(--layout-header-height);right:0;z-index:var(--z-index-header);display:flex;flex-direction:column;width:var(--navigation-vertical-item-width-default);max-width:100%;height:calc(100dvh - var(--layout-header-height));overflow-y:auto;background:var(--general-surface-primary);border-top:1px solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal:not(tedi-header-profile .tedi-header-profile__modal--no-style)>*:not(.tedi-header-role){padding:var(--layout-header-modal-item-padding);border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button{flex-direction:row;gap:var(--link-inner-spacing-x);align-items:center;justify-content:flex-start;width:100%;height:auto;min-height:0;padding:0;font-size:var(--body-regular-size)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button .tedi-header-mobile-button__inner{flex-direction:row;gap:var(--link-inner-spacing-x);align-items:center}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button .tedi-header-mobile-button__text{font-size:inherit}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button tedi-icon{font-size:var(--icon-02)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-logout__button tedi-icon{font-size:var(--icon-02)}.tedi-header-profile__popover tedi-header-logout tedi-icon{font-size:var(--icon-02)}\n"] }]
|
|
14060
|
+
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], showPopover: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPopover", required: false }] }], noStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "noStyle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }] } });
|
|
13687
14061
|
|
|
14062
|
+
/**
|
|
14063
|
+
* Marker directive applied to a projected child of `<tedi-header-role>` to mark it
|
|
14064
|
+
* as the title content (e.g. a `<tedi-tag>`). The directive itself adds no DOM or
|
|
14065
|
+
* behavior — it only exists so `HeaderRoleComponent` can detect, via `contentChild`,
|
|
14066
|
+
* whether a consumer has projected title content. When projected, the title slot
|
|
14067
|
+
* replaces the bold `role` string fallback.
|
|
14068
|
+
*
|
|
14069
|
+
* @example
|
|
14070
|
+
* <tedi-header-role [representatives]="..." [currentRepresentative]="...">
|
|
14071
|
+
* <tedi-tag tedi-header-role-title>Esindatav</tedi-tag>
|
|
14072
|
+
* </tedi-header-role>
|
|
14073
|
+
*/
|
|
14074
|
+
class HeaderRoleTitleDirective {
|
|
14075
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderRoleTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
14076
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.24", type: HeaderRoleTitleDirective, isStandalone: true, selector: "[tedi-header-role-title]", ngImport: i0 });
|
|
14077
|
+
}
|
|
14078
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderRoleTitleDirective, decorators: [{
|
|
14079
|
+
type: Directive,
|
|
14080
|
+
args: [{
|
|
14081
|
+
selector: "[tedi-header-role-title]",
|
|
14082
|
+
standalone: true,
|
|
14083
|
+
}]
|
|
14084
|
+
}] });
|
|
14085
|
+
|
|
14086
|
+
/**
|
|
14087
|
+
* Structural marker for custom content projected into the role selection
|
|
14088
|
+
* popover (desktop) or accordion (tablet/mobile).
|
|
14089
|
+
*
|
|
14090
|
+
* When present, replaces the default representative list entirely.
|
|
14091
|
+
*
|
|
14092
|
+
* Usage:
|
|
14093
|
+
* ```html
|
|
14094
|
+
* <tedi-header-role ...>
|
|
14095
|
+
* <ng-template tedi-header-role-content>
|
|
14096
|
+
* <div>Custom content here</div>
|
|
14097
|
+
* </ng-template>
|
|
14098
|
+
* </tedi-header-role>
|
|
14099
|
+
* ```
|
|
14100
|
+
*/
|
|
14101
|
+
class HeaderRoleContentDirective {
|
|
14102
|
+
templateRef = inject(TemplateRef);
|
|
14103
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderRoleContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
14104
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.24", type: HeaderRoleContentDirective, isStandalone: true, selector: "[tedi-header-role-content]", ngImport: i0 });
|
|
14105
|
+
}
|
|
14106
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderRoleContentDirective, decorators: [{
|
|
14107
|
+
type: Directive,
|
|
14108
|
+
args: [{
|
|
14109
|
+
selector: "[tedi-header-role-content]",
|
|
14110
|
+
standalone: true,
|
|
14111
|
+
}]
|
|
14112
|
+
}] });
|
|
14113
|
+
/**
|
|
14114
|
+
* Structural marker for custom "no results" content shown when the search
|
|
14115
|
+
* filter produces an empty representative list.
|
|
14116
|
+
*
|
|
14117
|
+
* When absent, the component falls back to a default translated string.
|
|
14118
|
+
*
|
|
14119
|
+
* Usage:
|
|
14120
|
+
* ```html
|
|
14121
|
+
* <tedi-header-role ...>
|
|
14122
|
+
* <ng-template tedi-header-role-no-results>
|
|
14123
|
+
* <tedi-empty-state description="No matches found" />
|
|
14124
|
+
* </ng-template>
|
|
14125
|
+
* </tedi-header-role>
|
|
14126
|
+
* ```
|
|
14127
|
+
*/
|
|
14128
|
+
class HeaderRoleNoResultsDirective {
|
|
14129
|
+
templateRef = inject(TemplateRef);
|
|
14130
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderRoleNoResultsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
14131
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.24", type: HeaderRoleNoResultsDirective, isStandalone: true, selector: "[tedi-header-role-no-results]", ngImport: i0 });
|
|
14132
|
+
}
|
|
14133
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderRoleNoResultsDirective, decorators: [{
|
|
14134
|
+
type: Directive,
|
|
14135
|
+
args: [{
|
|
14136
|
+
selector: "[tedi-header-role-no-results]",
|
|
14137
|
+
standalone: true,
|
|
14138
|
+
}]
|
|
14139
|
+
}] });
|
|
14140
|
+
let nextHeaderRoleInputId = 0;
|
|
13688
14141
|
class HeaderRoleComponent {
|
|
13689
14142
|
/**
|
|
13690
|
-
*
|
|
14143
|
+
* Label text. Rendered as bold text in the title position when no title content is
|
|
14144
|
+
* projected via `[tedi-header-role-title]`. Projected content takes precedence and
|
|
14145
|
+
* replaces this string.
|
|
13691
14146
|
*/
|
|
13692
|
-
|
|
14147
|
+
label = input("", ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
13693
14148
|
/**
|
|
13694
14149
|
* Description text
|
|
13695
14150
|
*/
|
|
13696
14151
|
description = input("", ...(ngDevMode ? [{ debugName: "description" }] : []));
|
|
13697
|
-
/**
|
|
14152
|
+
/**
|
|
14153
|
+
* Whether the consumer projected title content (e.g. `<tedi-tag tedi-header-role-title>`)
|
|
14154
|
+
* via the `[tedi-header-role-title]` slot. Used by the template to know whether the
|
|
14155
|
+
* title position has content even when `label` is empty.
|
|
14156
|
+
*/
|
|
14157
|
+
titleContent = contentChild(HeaderRoleTitleDirective, ...(ngDevMode ? [{ debugName: "titleContent" }] : []));
|
|
14158
|
+
hasTitle = computed(() => !!this.titleContent(), ...(ngDevMode ? [{ debugName: "hasTitle" }] : []));
|
|
14159
|
+
/**
|
|
14160
|
+
* Projected custom content that replaces the default representative list.
|
|
14161
|
+
*/
|
|
14162
|
+
customContent = contentChild(HeaderRoleContentDirective, ...(ngDevMode ? [{ debugName: "customContent" }] : []));
|
|
14163
|
+
hasCustomContent = computed(() => !!this.customContent(), ...(ngDevMode ? [{ debugName: "hasCustomContent" }] : []));
|
|
14164
|
+
customContentTemplate = computed(() => this.customContent()?.templateRef ?? null, ...(ngDevMode ? [{ debugName: "customContentTemplate" }] : []));
|
|
14165
|
+
noResultsContent = contentChild(HeaderRoleNoResultsDirective, ...(ngDevMode ? [{ debugName: "noResultsContent" }] : []));
|
|
14166
|
+
hasNoResultsContent = computed(() => !!this.noResultsContent(), ...(ngDevMode ? [{ debugName: "hasNoResultsContent" }] : []));
|
|
14167
|
+
noResultsTemplate = computed(() => this.noResultsContent()?.templateRef ?? null, ...(ngDevMode ? [{ debugName: "noResultsTemplate" }] : []));
|
|
14168
|
+
/**
|
|
14169
|
+
* Whether to display the search input above the representative list.
|
|
14170
|
+
* @default false
|
|
14171
|
+
*/
|
|
14172
|
+
showSearch = input(false, ...(ngDevMode ? [{ debugName: "showSearch" }] : []));
|
|
14173
|
+
/**
|
|
14174
|
+
* Whether the search input shows a clear button.
|
|
13698
14175
|
* @default false
|
|
13699
14176
|
*/
|
|
13700
|
-
|
|
14177
|
+
searchClearable = input(false, ...(ngDevMode ? [{ debugName: "searchClearable" }] : []));
|
|
14178
|
+
/**
|
|
14179
|
+
* Whether to clear the search input when a representative is selected.
|
|
14180
|
+
* @default true
|
|
14181
|
+
*/
|
|
14182
|
+
clearSearchOnSelect = input(true, ...(ngDevMode ? [{ debugName: "clearSearchOnSelect" }] : []));
|
|
14183
|
+
/**
|
|
14184
|
+
* Whether the role represents an organization.
|
|
14185
|
+
* Affects the search input label.
|
|
14186
|
+
*/
|
|
14187
|
+
isOrganization = input(false, ...(ngDevMode ? [{ debugName: "isOrganization" }] : []));
|
|
14188
|
+
/**
|
|
14189
|
+
* Label for the search input when selecting a representative.
|
|
14190
|
+
* Falls back to i18n labels when not provided.
|
|
14191
|
+
*/
|
|
14192
|
+
searchLabel = input(undefined, ...(ngDevMode ? [{ debugName: "searchLabel" }] : []));
|
|
14193
|
+
/**
|
|
14194
|
+
* Label for the search input when selecting an organization representative.
|
|
14195
|
+
* Overrides both the default and `searchLabel` when `isOrganization` is true.
|
|
14196
|
+
*/
|
|
14197
|
+
organizationSearchLabel = input(undefined, ...(ngDevMode ? [{ debugName: "organizationSearchLabel" }] : []));
|
|
14198
|
+
/**
|
|
14199
|
+
* Whether to show the role selection toggle and dropdown.
|
|
14200
|
+
* When not set, defaults to showing the selection when there are multiple representatives.
|
|
14201
|
+
*/
|
|
14202
|
+
showRoleSwitch = input(undefined, ...(ngDevMode ? [{ debugName: "showRoleSwitch" }] : []));
|
|
13701
14203
|
/** List of representatives */
|
|
13702
14204
|
representatives = input.required(...(ngDevMode ? [{ debugName: "representatives" }] : []));
|
|
13703
14205
|
/** Current representative */
|
|
13704
14206
|
currentRepresentative = model.required(...(ngDevMode ? [{ debugName: "currentRepresentative" }] : []));
|
|
14207
|
+
/**
|
|
14208
|
+
* Emits when the role selection (mobile collapse on tablet/mobile, popover on
|
|
14209
|
+
* desktop) opens or closes.
|
|
14210
|
+
*/
|
|
14211
|
+
roleSelectionToggle = output();
|
|
13705
14212
|
mobileOpen = signal(false, ...(ngDevMode ? [{ debugName: "mobileOpen" }] : []));
|
|
13706
14213
|
inputValue = signal("", ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
|
|
14214
|
+
inputId = `tedi-header-role-input-${nextHeaderRoleInputId++}`;
|
|
14215
|
+
breakpointService = inject(BreakpointService);
|
|
14216
|
+
isTabletView = computed(() => this.breakpointService.isBelowBreakpoint("lg")(), ...(ngDevMode ? [{ debugName: "isTabletView" }] : []));
|
|
14217
|
+
hasRoleSelection = computed(() => this.showRoleSwitch() ?? this.representatives().length > 1, ...(ngDevMode ? [{ debugName: "hasRoleSelection" }] : []));
|
|
14218
|
+
popover = viewChild(PopoverComponent, ...(ngDevMode ? [{ debugName: "popover" }] : []));
|
|
14219
|
+
searchInput = viewChild("searchInput", ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
|
|
14220
|
+
previousPopoverOpen;
|
|
14221
|
+
parentProfile = inject(HeaderProfileComponent, {
|
|
14222
|
+
optional: true,
|
|
14223
|
+
});
|
|
14224
|
+
constructor() {
|
|
14225
|
+
// `setTimeout` (not `queueMicrotask` / `afterNextRender`) is deliberate:
|
|
14226
|
+
// PopoverComponent's `showPopover()` queues its own
|
|
14227
|
+
// `setTimeout(() => container.focus(...))` to focus the floating-UI
|
|
14228
|
+
// overlay container (popover.component.ts:144). Queuing our input focus
|
|
14229
|
+
// via `setTimeout` puts it AFTER the popover's task in the macrotask
|
|
14230
|
+
// queue, so we focus the search input last and the popover doesn't steal
|
|
14231
|
+
// focus back. Microtask-/render-tier alternatives fire BEFORE the
|
|
14232
|
+
// popover's setTimeout and cause focus loss.
|
|
14233
|
+
effect(() => {
|
|
14234
|
+
if (this.popover()?.isOpen() && this.showSearch()) {
|
|
14235
|
+
setTimeout(() => this.searchInput()?.nativeElement.focus());
|
|
14236
|
+
}
|
|
14237
|
+
});
|
|
14238
|
+
effect(() => {
|
|
14239
|
+
const popover = this.popover();
|
|
14240
|
+
if (!popover)
|
|
14241
|
+
return;
|
|
14242
|
+
const isOpen = popover.isOpen();
|
|
14243
|
+
if (this.previousPopoverOpen !== undefined &&
|
|
14244
|
+
this.previousPopoverOpen !== isOpen) {
|
|
14245
|
+
this.roleSelectionToggle.emit(isOpen);
|
|
14246
|
+
}
|
|
14247
|
+
this.previousPopoverOpen = isOpen;
|
|
14248
|
+
});
|
|
14249
|
+
if (this.parentProfile) {
|
|
14250
|
+
effect(() => {
|
|
14251
|
+
if (!this.parentProfile.modalOpen()) {
|
|
14252
|
+
this.mobileOpen.set(false);
|
|
14253
|
+
this.inputValue.set("");
|
|
14254
|
+
}
|
|
14255
|
+
});
|
|
14256
|
+
effect(() => {
|
|
14257
|
+
const active = this.parentProfile.activeRole();
|
|
14258
|
+
const isOpen = this.mobileOpen();
|
|
14259
|
+
this.closeIfOtherRoleActive(active, isOpen);
|
|
14260
|
+
});
|
|
14261
|
+
}
|
|
14262
|
+
}
|
|
13707
14263
|
translationService = inject(TediTranslationService);
|
|
13708
14264
|
switchRoleText = this.translationService.track("header.role-switch");
|
|
13709
14265
|
closeText = this.translationService.track("close");
|
|
13710
|
-
|
|
14266
|
+
defaultSearchText = this.translationService.track("header.role-search");
|
|
14267
|
+
defaultOrgSearchText = this.translationService.track("header.role-search.organization");
|
|
14268
|
+
searchText = computed(() => this.isOrganization()
|
|
14269
|
+
? (this.organizationSearchLabel() ?? this.defaultOrgSearchText())
|
|
14270
|
+
: (this.searchLabel() ?? this.defaultSearchText()), ...(ngDevMode ? [{ debugName: "searchText" }] : []));
|
|
13711
14271
|
noResultsText = this.translationService.track("header.role-no-representatives");
|
|
13712
14272
|
collapseText = computed(() => this.mobileOpen() ? this.closeText() : this.switchRoleText(), ...(ngDevMode ? [{ debugName: "collapseText" }] : []));
|
|
13713
14273
|
filteredRepresentatives = computed(() => {
|
|
@@ -13724,18 +14284,40 @@ class HeaderRoleComponent {
|
|
|
13724
14284
|
return nameMatches || descriptionMatches;
|
|
13725
14285
|
});
|
|
13726
14286
|
}, ...(ngDevMode ? [{ debugName: "filteredRepresentatives" }] : []));
|
|
14287
|
+
closeIfOtherRoleActive(active, isOpen) {
|
|
14288
|
+
if (active !== null && active !== this && isOpen) {
|
|
14289
|
+
this.mobileOpen.set(false);
|
|
14290
|
+
this.inputValue.set("");
|
|
14291
|
+
}
|
|
14292
|
+
}
|
|
13727
14293
|
handleMobileOpen() {
|
|
13728
14294
|
this.mobileOpen.update((prev) => !prev);
|
|
14295
|
+
this.roleSelectionToggle.emit(this.mobileOpen());
|
|
14296
|
+
if (this.mobileOpen() && this.parentProfile) {
|
|
14297
|
+
this.parentProfile.activeRole.set(this);
|
|
14298
|
+
}
|
|
13729
14299
|
}
|
|
13730
14300
|
handleSelectRepresentative(r) {
|
|
13731
14301
|
this.currentRepresentative.set(r);
|
|
14302
|
+
if (this.clearSearchOnSelect()) {
|
|
14303
|
+
this.inputValue.set("");
|
|
14304
|
+
}
|
|
14305
|
+
this.popover()?.hidePopover();
|
|
13732
14306
|
}
|
|
13733
14307
|
handleInputChange(event) {
|
|
13734
14308
|
const value = event.target.value;
|
|
13735
14309
|
this.inputValue.set(value);
|
|
13736
14310
|
}
|
|
14311
|
+
trackById = (_, r) => r.id;
|
|
14312
|
+
resolveIcon(icon) {
|
|
14313
|
+
if (!icon)
|
|
14314
|
+
return null;
|
|
14315
|
+
if (typeof icon === "string")
|
|
14316
|
+
return { name: icon, size: 24 };
|
|
14317
|
+
return { name: icon.name, size: icon.size ?? 24 };
|
|
14318
|
+
}
|
|
13737
14319
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderRoleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13738
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderRoleComponent, isStandalone: true, selector: "tedi-header-role", inputs: { role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, showInput: { classPropertyName: "showInput", publicName: "showInput", isSignal: true, isRequired: false, transformFunction: null }, representatives: { classPropertyName: "representatives", publicName: "representatives", isSignal: true, isRequired: true, transformFunction: null }, currentRepresentative: { classPropertyName: "currentRepresentative", publicName: "currentRepresentative", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { currentRepresentative: "currentRepresentativeChange" }, host: { classAttribute: "tedi-header-role" }, ngImport: i0, template: "<ng-container *hideAt=\"'lg'\">\n <div class=\"tedi-header-role__head\">\n <div\n tedi-text\n color=\"secondary\"\n class=\"tedi-header-role__info\"\n [attr.data-multiple]=\"representatives().length > 1\"\n >\n <b>{{ role() }} {{ currentRepresentative().name }}</b>\n @if (description()) {\n <span class=\"tedi-header-role__description\">{{ description() }}</span>\n }\n </div>\n @if (representatives().length > 1) {\n <button tedi-button variant=\"neutral\" (click)=\"handleMobileOpen()\">\n {{ collapseText() }}\n <tedi-icon name=\"expand_more\" [attr.data-open]=\"mobileOpen()\" />\n </button>\n }\n </div>\n @if (representatives().length > 1) {\n <div class=\"tedi-header-role__collapse\" [attr.data-open]=\"mobileOpen()\">\n <div class=\"tedi-header-role__collapse__items\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n </div>\n }\n</ng-container>\n\n<ng-container *showAt=\"'lg'\">\n @if (role() || description()) {\n <div\n tedi-text\n color=\"secondary\"\n modifiers=\"small\"\n class=\"tedi-header-role__head\"\n >\n @if (role()) {\n <b>{{ role() }}</b>\n }\n\n @if (description()) {\n <span class=\"tedi-header-role__description\">{{ description() }}</span>\n }\n </div>\n }\n\n <ng-container *ngIf=\"representatives().length > 1; else normalText\">\n <tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\">\n <button\n type=\"button\"\n tedi-popover-trigger\n class=\"tedi-link tedi-header__link-button\"\n >\n <span>{{ currentRepresentative().name }}</span>\n <tedi-icon name=\"expand_more\" />\n </button>\n <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-role__dropdown\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </tedi-popover-content>\n </tedi-popover>\n </ng-container>\n</ng-container>\n\n<ng-template #content>\n @if (showInput()) {\n <div>\n <label for=\"representative-input\">{{ searchText() }}</label>\n <input\n id=\"representative-input\"\n class=\"tedi-header-role__input\"\n [value]=\"inputValue()\"\n (input)=\"handleInputChange($event)\"\n />\n </div>\n }\n @if (filteredRepresentatives().length === 0) {\n <span class=\"tedi-header-role__no-results\">{{ noResultsText() }}</span>\n }\n <button\n *ngFor=\"let r of filteredRepresentatives()\"\n class=\"tedi-header-role__representative\"\n [attr.data-selected]=\"\n r.name === currentRepresentative().name &&\n r.description === currentRepresentative().description\n \"\n (click)=\"handleSelectRepresentative(r)\"\n >\n @if (r.icon) {\n <tedi-icon [name]=\"r.icon\" />\n }\n <div>\n <div>{{ r.name }}</div>\n @if (r.description) {\n <div>\n {{ r.description }}\n </div>\n }\n </div>\n </button>\n</ng-template>\n\n<ng-template #normalText>\n <div>{{ currentRepresentative().name }}</div>\n</ng-template>\n", styles: [":root{--_header-role-transition-duration: .3s}.tedi-header-role{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.tedi-header-role__head{display:flex;gap:4px;align-items:center;justify-content:space-between;width:100%}@media(min-width:62rem){.tedi-header-role__head{justify-content:flex-start}}.tedi-header-role__head .tedi-header-role__info{display:flex;flex-direction:row;gap:var(--layout-grid-gutters-16)}.tedi-header-role__head .tedi-header-role__info[data-multiple=true]{flex-direction:column;gap:0}.tedi-header-role__head .tedi-header-role__info[data-multiple=true] .tedi-header-role__description:before{display:none}.tedi-header-role__head .tedi-header-role__info .tedi-header-role__description{position:relative}.tedi-header-role__head .tedi-header-role__info .tedi-header-role__description:before{position:absolute;top:50%;left:calc(-1 * var(--layout-grid-gutters-16) / 2);width:1px;height:1rem;content:\"\";background:var(--general-border-secondary);transform:translateY(-50%)}.tedi-header-role__head button tedi-icon{transition:transform var(--_header-role-transition-duration) ease}.tedi-header-role__head button tedi-icon[data-open=true]{transform:rotate(180deg)}.tedi-header-role tedi-popover-trigger tedi-icon{transition:transform var(--_header-role-transition-duration) ease}.tedi-header-role tedi-popover-trigger[data-open=true] tedi-icon{transform:rotate(180deg)}.tedi-header-role__dropdown{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-16)!important}.tedi-header-role__dropdown>*:not(:first-child){position:relative}.tedi-header-role__dropdown>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}.tedi-header-role__representative{display:flex;gap:8px;align-items:center;width:100%;padding:var(--card-padding-xs);font-size:var(--body-regular-size);color:var(--general-text-secondary);text-align:start;cursor:pointer;background:transparent;border:0;border-radius:var(--card-radius-rounded)}.tedi-header-role__representative:not([data-selected=true]):hover{color:var(--general-text-primary);background:var(--header-popover-item-hover)}.tedi-header-role__representative:not([data-selected=true]):active{color:var(--general-text-white);background:var(--header-popover-item-active)}.tedi-header-role__representative:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-header-role__representative[data-selected=true]{color:var(--general-text-white);background:var(--header-popover-item-selected)}.tedi-header-role__representative tedi-icon{color:inherit}.tedi-header-role__input{gap:var(--form-field-inner-spacing);width:100%;padding:var(--form-field-padding-y-md-default) var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-header-role__no-results{padding-top:var(--layout-grid-gutters-08);color:var(--general-text-secondary);text-align:center}.tedi-header-role__collapse{display:grid;visibility:hidden;grid-template-rows:0fr;width:100%;overflow:hidden;transition:grid-template-rows var(--_header-role-transition-duration) ease}.tedi-header-role__collapse[data-open=true]{visibility:visible;grid-template-rows:1fr}.tedi-header-role__collapse[data-open=true] .tedi-header-role__collapse__items{visibility:visible}.tedi-header-role__collapse__items{display:flex;visibility:hidden;flex-direction:column;gap:var(--layout-grid-gutters-16);min-height:0;transition:visibility var(--_header-role-transition-duration) ease}.tedi-header-role__collapse__items>*:not(:first-child){position:relative}.tedi-header-role__collapse__items>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "directive", type: ShowAtDirective, selector: "[showAt]", inputs: ["showAt"] }, { kind: "directive", type: HideAtDirective, selector: "[hideAt]", inputs: ["hideAt"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
14320
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderRoleComponent, isStandalone: true, selector: "tedi-header-role", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchClearable: { classPropertyName: "searchClearable", publicName: "searchClearable", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnSelect: { classPropertyName: "clearSearchOnSelect", publicName: "clearSearchOnSelect", isSignal: true, isRequired: false, transformFunction: null }, isOrganization: { classPropertyName: "isOrganization", publicName: "isOrganization", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, organizationSearchLabel: { classPropertyName: "organizationSearchLabel", publicName: "organizationSearchLabel", isSignal: true, isRequired: false, transformFunction: null }, showRoleSwitch: { classPropertyName: "showRoleSwitch", publicName: "showRoleSwitch", isSignal: true, isRequired: false, transformFunction: null }, representatives: { classPropertyName: "representatives", publicName: "representatives", isSignal: true, isRequired: true, transformFunction: null }, currentRepresentative: { classPropertyName: "currentRepresentative", publicName: "currentRepresentative", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { currentRepresentative: "currentRepresentativeChange", roleSelectionToggle: "roleSelectionToggle" }, host: { classAttribute: "tedi-header-role" }, queries: [{ propertyName: "titleContent", first: true, predicate: HeaderRoleTitleDirective, descendants: true, isSignal: true }, { propertyName: "customContent", first: true, predicate: HeaderRoleContentDirective, descendants: true, isSignal: true }, { propertyName: "noResultsContent", first: true, predicate: HeaderRoleNoResultsDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *hideAt=\"'lg'\">\n <div\n class=\"tedi-header-role__head\"\n [class.tedi-header-role__head--open]=\"mobileOpen() && hasRoleSelection()\"\n >\n <div\n tedi-text\n color=\"secondary\"\n class=\"tedi-header-role__info\"\n [class.tedi-header-role__info--inline]=\"!hasRoleSelection()\"\n >\n <div class=\"tedi-header-role__info-title\">\n <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n <p tedi-text modifiers=\"bold\" color=\"secondary\">\n {{ currentRepresentative().name }}\n </p>\n </div>\n @if (description()) {\n @if (!hasRoleSelection()) {\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n <span class=\"tedi-header-role__description\">{{ description() }}</span>\n }\n </div>\n @if (hasRoleSelection()) {\n <button\n type=\"button\"\n tedi-button\n variant=\"neutral\"\n (click)=\"handleMobileOpen()\"\n >\n {{ collapseText() }}\n <tedi-icon name=\"expand_more\" [attr.data-open]=\"mobileOpen()\" />\n </button>\n }\n </div>\n @if (hasRoleSelection()) {\n <div class=\"tedi-header-role__collapse\" [attr.data-open]=\"mobileOpen()\">\n <div class=\"tedi-header-role__collapse--items\">\n @if (hasCustomContent()) {\n <ng-container\n *ngTemplateOutlet=\"customContentTemplate()\"\n ></ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n </div>\n </div>\n }\n</ng-container>\n\n<ng-container *showAt=\"'lg'\">\n @if (label() || description() || hasTitle()) {\n <div\n tedi-text\n color=\"secondary\"\n modifiers=\"small\"\n class=\"tedi-header-role__head\"\n [class.tedi-header-role__head--open]=\"hasRoleSelection() && mobileOpen()\"\n >\n <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n\n @if (description()) {\n <span class=\"tedi-header-role__description\">{{ description() }}</span>\n }\n </div>\n }\n\n <ng-container *ngIf=\"hasRoleSelection(); else normalText\">\n <tedi-popover\n [withBorder]=\"true\"\n position=\"bottom\"\n [preventOverflow]=\"true\"\n >\n <button\n type=\"button\"\n tedi-popover-trigger\n class=\"tedi-link tedi-header__link-button\"\n >\n <span>{{ currentRepresentative().name }}</span>\n <tedi-icon name=\"expand_more\" class=\"tedi-header-role__chevron\" />\n </button>\n <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-role__dropdown\">\n @if (hasCustomContent()) {\n <ng-container\n *ngTemplateOutlet=\"customContentTemplate()\"\n ></ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n </tedi-popover-content>\n </tedi-popover>\n </ng-container>\n</ng-container>\n\n<ng-template #content>\n @if (showSearch()) {\n <div>\n <label [attr.for]=\"inputId\">{{ searchText() }}</label>\n <input\n #searchInput\n [id]=\"inputId\"\n class=\"tedi-header-role__input\"\n [value]=\"inputValue()\"\n (input)=\"handleInputChange($event)\"\n />\n </div>\n }\n @if (filteredRepresentatives().length === 0) {\n @if (hasNoResultsContent()) {\n <ng-container *ngTemplateOutlet=\"noResultsTemplate()\"></ng-container>\n } @else {\n <span class=\"tedi-header-role__no-results\">{{ noResultsText() }}</span>\n }\n }\n <button\n *ngFor=\"let r of filteredRepresentatives(); trackBy: trackById\"\n type=\"button\"\n class=\"tedi-header-role__representative\"\n [attr.data-selected]=\"r.id === currentRepresentative().id\"\n (click)=\"handleSelectRepresentative(r)\"\n >\n @if (resolveIcon(r.icon); as icon) {\n <tedi-icon [name]=\"icon.name\" [size]=\"icon.size\" />\n }\n <div>\n <div>{{ r.name }}</div>\n @if (r.description) {\n <div tedi-text modifiers=\"small\">\n {{ r.description }}\n </div>\n }\n </div>\n </button>\n</ng-template>\n\n<ng-template #normalText>\n <div class=\"tedi-header-role__value\">{{ currentRepresentative().name }}</div>\n</ng-template>\n\n<ng-template #roleTitle>\n <ng-content select=\"[tedi-header-role-title]\">\n @if (label(); as labelText) {\n <p\n tedi-text\n [modifiers]=\"isTabletView() ? ['bold'] : ['small', 'bold']\"\n color=\"secondary\"\n >\n {{ labelText }}\n </p>\n }\n </ng-content>\n</ng-template>\n", styles: [":root{--_header-role-transition-duration: .3s}.tedi-header-role{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:unset;background-color:var(--general-surface-secondary);border-bottom:var(--tedi-borders-04) solid var(--general-border-brand)}@media(min-width:62rem){.tedi-header-role{background-color:transparent;border-bottom:0}}.tedi-header-role [tedi-popover-trigger] .tedi-header-role__chevron{margin:0;transition:transform .2s ease-in-out}.tedi-header-role [tedi-popover-trigger][aria-expanded=true] .tedi-header-role__chevron{transform:rotate(-180deg)}.tedi-header-role__head{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:space-between;width:100%;padding:var(--card-padding-md-default);transition:padding var(--_header-role-transition-duration) ease}@media(min-width:62rem){.tedi-header-role__head{justify-content:flex-start;padding:0}}.tedi-header-role__head .tedi-header-role__info{display:flex;flex-direction:column;align-items:flex-start}.tedi-header-role__head .tedi-header-role__info--inline{flex-direction:row;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-header-role__head .tedi-header-role__info-title{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-header-role__head button{gap:var(--link-inner-spacing-x);padding:0;border:none}.tedi-header-role__head button tedi-icon{transition:transform .2s ease-in-out}.tedi-header-role__head button tedi-icon[data-open=true]{transform:rotate(-180deg)}.tedi-header-role__dropdown{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-16)}.tedi-header-role__dropdown>*:not(:first-child){position:relative}.tedi-header-role__dropdown>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}.tedi-header-role__value{min-width:max-content}.tedi-header-role__representative{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;width:100%;padding:var(--card-padding-xs);font-size:var(--body-regular-size);color:var(--general-text-secondary);text-align:start;cursor:pointer;background:transparent;border:0;border-radius:var(--card-radius-rounded)}.tedi-header-role__representative:not([data-selected=true]):hover{color:var(--general-text-primary);background:var(--header-popover-item-hover)}.tedi-header-role__representative:not([data-selected=true]):active{color:var(--general-text-white);background:var(--header-popover-item-active)}.tedi-header-role__representative:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-header-role__representative[data-selected=true]{color:var(--general-text-white);background:var(--header-popover-item-selected)}.tedi-header-role__representative tedi-icon{color:inherit}.tedi-header-role__representative [tedi-text]{color:inherit}.tedi-header-role__input{gap:var(--form-field-inner-spacing);width:100%;padding:var(--form-field-padding-y-md-default) var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-header-role__no-results{padding-top:var(--layout-grid-gutters-08);color:var(--general-text-secondary);text-align:center}.tedi-header-role__collapse{display:grid;visibility:hidden;grid-template-rows:minmax(0,0fr);width:100%;overflow:hidden;transition:grid-template-rows var(--_header-role-transition-duration) ease}.tedi-header-role__collapse[data-open=true]{visibility:visible;grid-template-rows:minmax(0,1fr)}.tedi-header-role__collapse[data-open=true] .tedi-header-role__collapse--items{visibility:visible}.tedi-header-role__collapse--items{display:flex;visibility:hidden;flex-direction:column;gap:var(--layout-grid-gutters-16);min-height:0;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default);overflow:hidden;transition:visibility var(--_header-role-transition-duration) ease}.tedi-header-role__collapse--items>*:not(:first-child){position:relative}.tedi-header-role__collapse--items>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "directive", type: ShowAtDirective, selector: "[showAt]", inputs: ["showAt"] }, { kind: "directive", type: HideAtDirective, selector: "[hideAt]", inputs: ["hideAt"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
13739
14321
|
}
|
|
13740
14322
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderRoleComponent, decorators: [{
|
|
13741
14323
|
type: Component,
|
|
@@ -13751,10 +14333,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
13751
14333
|
TextComponent,
|
|
13752
14334
|
ShowAtDirective,
|
|
13753
14335
|
HideAtDirective,
|
|
14336
|
+
SeparatorComponent,
|
|
13754
14337
|
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
13755
14338
|
class: "tedi-header-role",
|
|
13756
|
-
}, template: "<ng-container *hideAt=\"'lg'\">\n <div
|
|
13757
|
-
}], propDecorators: {
|
|
14339
|
+
}, template: "<ng-container *hideAt=\"'lg'\">\n <div\n class=\"tedi-header-role__head\"\n [class.tedi-header-role__head--open]=\"mobileOpen() && hasRoleSelection()\"\n >\n <div\n tedi-text\n color=\"secondary\"\n class=\"tedi-header-role__info\"\n [class.tedi-header-role__info--inline]=\"!hasRoleSelection()\"\n >\n <div class=\"tedi-header-role__info-title\">\n <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n <p tedi-text modifiers=\"bold\" color=\"secondary\">\n {{ currentRepresentative().name }}\n </p>\n </div>\n @if (description()) {\n @if (!hasRoleSelection()) {\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n <span class=\"tedi-header-role__description\">{{ description() }}</span>\n }\n </div>\n @if (hasRoleSelection()) {\n <button\n type=\"button\"\n tedi-button\n variant=\"neutral\"\n (click)=\"handleMobileOpen()\"\n >\n {{ collapseText() }}\n <tedi-icon name=\"expand_more\" [attr.data-open]=\"mobileOpen()\" />\n </button>\n }\n </div>\n @if (hasRoleSelection()) {\n <div class=\"tedi-header-role__collapse\" [attr.data-open]=\"mobileOpen()\">\n <div class=\"tedi-header-role__collapse--items\">\n @if (hasCustomContent()) {\n <ng-container\n *ngTemplateOutlet=\"customContentTemplate()\"\n ></ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n </div>\n </div>\n }\n</ng-container>\n\n<ng-container *showAt=\"'lg'\">\n @if (label() || description() || hasTitle()) {\n <div\n tedi-text\n color=\"secondary\"\n modifiers=\"small\"\n class=\"tedi-header-role__head\"\n [class.tedi-header-role__head--open]=\"hasRoleSelection() && mobileOpen()\"\n >\n <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n\n @if (description()) {\n <span class=\"tedi-header-role__description\">{{ description() }}</span>\n }\n </div>\n }\n\n <ng-container *ngIf=\"hasRoleSelection(); else normalText\">\n <tedi-popover\n [withBorder]=\"true\"\n position=\"bottom\"\n [preventOverflow]=\"true\"\n >\n <button\n type=\"button\"\n tedi-popover-trigger\n class=\"tedi-link tedi-header__link-button\"\n >\n <span>{{ currentRepresentative().name }}</span>\n <tedi-icon name=\"expand_more\" class=\"tedi-header-role__chevron\" />\n </button>\n <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-role__dropdown\">\n @if (hasCustomContent()) {\n <ng-container\n *ngTemplateOutlet=\"customContentTemplate()\"\n ></ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n </tedi-popover-content>\n </tedi-popover>\n </ng-container>\n</ng-container>\n\n<ng-template #content>\n @if (showSearch()) {\n <div>\n <label [attr.for]=\"inputId\">{{ searchText() }}</label>\n <input\n #searchInput\n [id]=\"inputId\"\n class=\"tedi-header-role__input\"\n [value]=\"inputValue()\"\n (input)=\"handleInputChange($event)\"\n />\n </div>\n }\n @if (filteredRepresentatives().length === 0) {\n @if (hasNoResultsContent()) {\n <ng-container *ngTemplateOutlet=\"noResultsTemplate()\"></ng-container>\n } @else {\n <span class=\"tedi-header-role__no-results\">{{ noResultsText() }}</span>\n }\n }\n <button\n *ngFor=\"let r of filteredRepresentatives(); trackBy: trackById\"\n type=\"button\"\n class=\"tedi-header-role__representative\"\n [attr.data-selected]=\"r.id === currentRepresentative().id\"\n (click)=\"handleSelectRepresentative(r)\"\n >\n @if (resolveIcon(r.icon); as icon) {\n <tedi-icon [name]=\"icon.name\" [size]=\"icon.size\" />\n }\n <div>\n <div>{{ r.name }}</div>\n @if (r.description) {\n <div tedi-text modifiers=\"small\">\n {{ r.description }}\n </div>\n }\n </div>\n </button>\n</ng-template>\n\n<ng-template #normalText>\n <div class=\"tedi-header-role__value\">{{ currentRepresentative().name }}</div>\n</ng-template>\n\n<ng-template #roleTitle>\n <ng-content select=\"[tedi-header-role-title]\">\n @if (label(); as labelText) {\n <p\n tedi-text\n [modifiers]=\"isTabletView() ? ['bold'] : ['small', 'bold']\"\n color=\"secondary\"\n >\n {{ labelText }}\n </p>\n }\n </ng-content>\n</ng-template>\n", styles: [":root{--_header-role-transition-duration: .3s}.tedi-header-role{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:unset;background-color:var(--general-surface-secondary);border-bottom:var(--tedi-borders-04) solid var(--general-border-brand)}@media(min-width:62rem){.tedi-header-role{background-color:transparent;border-bottom:0}}.tedi-header-role [tedi-popover-trigger] .tedi-header-role__chevron{margin:0;transition:transform .2s ease-in-out}.tedi-header-role [tedi-popover-trigger][aria-expanded=true] .tedi-header-role__chevron{transform:rotate(-180deg)}.tedi-header-role__head{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:space-between;width:100%;padding:var(--card-padding-md-default);transition:padding var(--_header-role-transition-duration) ease}@media(min-width:62rem){.tedi-header-role__head{justify-content:flex-start;padding:0}}.tedi-header-role__head .tedi-header-role__info{display:flex;flex-direction:column;align-items:flex-start}.tedi-header-role__head .tedi-header-role__info--inline{flex-direction:row;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-header-role__head .tedi-header-role__info-title{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-header-role__head button{gap:var(--link-inner-spacing-x);padding:0;border:none}.tedi-header-role__head button tedi-icon{transition:transform .2s ease-in-out}.tedi-header-role__head button tedi-icon[data-open=true]{transform:rotate(-180deg)}.tedi-header-role__dropdown{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-16)}.tedi-header-role__dropdown>*:not(:first-child){position:relative}.tedi-header-role__dropdown>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}.tedi-header-role__value{min-width:max-content}.tedi-header-role__representative{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;width:100%;padding:var(--card-padding-xs);font-size:var(--body-regular-size);color:var(--general-text-secondary);text-align:start;cursor:pointer;background:transparent;border:0;border-radius:var(--card-radius-rounded)}.tedi-header-role__representative:not([data-selected=true]):hover{color:var(--general-text-primary);background:var(--header-popover-item-hover)}.tedi-header-role__representative:not([data-selected=true]):active{color:var(--general-text-white);background:var(--header-popover-item-active)}.tedi-header-role__representative:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-header-role__representative[data-selected=true]{color:var(--general-text-white);background:var(--header-popover-item-selected)}.tedi-header-role__representative tedi-icon{color:inherit}.tedi-header-role__representative [tedi-text]{color:inherit}.tedi-header-role__input{gap:var(--form-field-inner-spacing);width:100%;padding:var(--form-field-padding-y-md-default) var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-header-role__no-results{padding-top:var(--layout-grid-gutters-08);color:var(--general-text-secondary);text-align:center}.tedi-header-role__collapse{display:grid;visibility:hidden;grid-template-rows:minmax(0,0fr);width:100%;overflow:hidden;transition:grid-template-rows var(--_header-role-transition-duration) ease}.tedi-header-role__collapse[data-open=true]{visibility:visible;grid-template-rows:minmax(0,1fr)}.tedi-header-role__collapse[data-open=true] .tedi-header-role__collapse--items{visibility:visible}.tedi-header-role__collapse--items{display:flex;visibility:hidden;flex-direction:column;gap:var(--layout-grid-gutters-16);min-height:0;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default);overflow:hidden;transition:visibility var(--_header-role-transition-duration) ease}.tedi-header-role__collapse--items>*:not(:first-child){position:relative}.tedi-header-role__collapse--items>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}\n"] }]
|
|
14340
|
+
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], titleContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HeaderRoleTitleDirective), { isSignal: true }] }], customContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HeaderRoleContentDirective), { isSignal: true }] }], noResultsContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HeaderRoleNoResultsDirective), { isSignal: true }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchClearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchClearable", required: false }] }], clearSearchOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchOnSelect", required: false }] }], isOrganization: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOrganization", required: false }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], organizationSearchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "organizationSearchLabel", required: false }] }], showRoleSwitch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRoleSwitch", required: false }] }], representatives: [{ type: i0.Input, args: [{ isSignal: true, alias: "representatives", required: true }] }], currentRepresentative: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentRepresentative", required: true }] }, { type: i0.Output, args: ["currentRepresentativeChange"] }], roleSelectionToggle: [{ type: i0.Output, args: ["roleSelectionToggle"] }], popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverComponent), { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ["searchInput", { isSignal: true }] }] } });
|
|
14341
|
+
|
|
14342
|
+
class HeaderSearchComponent {
|
|
14343
|
+
/**
|
|
14344
|
+
* Behavior on mobile viewports (below the `md` breakpoint).
|
|
14345
|
+
* - `'modal'` shows a toggle button that opens a fullscreen native dialog containing the projected content.
|
|
14346
|
+
* - `'inline'` renders the projected content inline at all breakpoints (no toggle, no dialog).
|
|
14347
|
+
* @default "modal"
|
|
14348
|
+
*/
|
|
14349
|
+
mobileVariant = input("modal", ...(ngDevMode ? [{ debugName: "mobileVariant" }] : []));
|
|
14350
|
+
/**
|
|
14351
|
+
* Mobile-specific labels for the toggle button and the modal title.
|
|
14352
|
+
* When omitted, both fall back to the `header.search` translation key.
|
|
14353
|
+
*/
|
|
14354
|
+
mobileLabels = input({}, ...(ngDevMode ? [{ debugName: "mobileLabels" }] : []));
|
|
14355
|
+
/**
|
|
14356
|
+
* Disables the mobile toggle button. Has no effect on desktop or in the `inline` variant.
|
|
14357
|
+
* @default false
|
|
14358
|
+
*/
|
|
14359
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
14360
|
+
translationService = inject(TediTranslationService);
|
|
14361
|
+
isMobile = inject(BreakpointService).isBelowBreakpoint("md");
|
|
14362
|
+
modalOpen = signal(false, ...(ngDevMode ? [{ debugName: "modalOpen" }] : []));
|
|
14363
|
+
dialogEl = viewChild("dialog", ...(ngDevMode ? [{ debugName: "dialogEl" }] : []));
|
|
14364
|
+
buttonLabel = computed(() => this.mobileLabels()?.button ??
|
|
14365
|
+
this.translationService.translate("header.search"), ...(ngDevMode ? [{ debugName: "buttonLabel" }] : []));
|
|
14366
|
+
modalTitle = computed(() => this.mobileLabels()?.modalTitle ??
|
|
14367
|
+
this.translationService.translate("header.search"), ...(ngDevMode ? [{ debugName: "modalTitle" }] : []));
|
|
14368
|
+
closeLabel = computed(() => this.translationService.translate("close"), ...(ngDevMode ? [{ debugName: "closeLabel" }] : []));
|
|
14369
|
+
constructor() {
|
|
14370
|
+
effect(() => {
|
|
14371
|
+
const dialog = this.dialogEl()?.nativeElement;
|
|
14372
|
+
if (!dialog)
|
|
14373
|
+
return;
|
|
14374
|
+
if (this.modalOpen() && !dialog.open) {
|
|
14375
|
+
dialog.showModal();
|
|
14376
|
+
}
|
|
14377
|
+
else if (!this.modalOpen() && dialog.open) {
|
|
14378
|
+
dialog.close();
|
|
14379
|
+
}
|
|
14380
|
+
});
|
|
14381
|
+
effect(() => {
|
|
14382
|
+
const dialogRendered = this.isMobile() && this.mobileVariant() === "modal";
|
|
14383
|
+
if (!dialogRendered && this.modalOpen()) {
|
|
14384
|
+
this.modalOpen.set(false);
|
|
14385
|
+
}
|
|
14386
|
+
});
|
|
14387
|
+
}
|
|
14388
|
+
open() {
|
|
14389
|
+
if (this.disabled())
|
|
14390
|
+
return;
|
|
14391
|
+
this.modalOpen.set(true);
|
|
14392
|
+
}
|
|
14393
|
+
close() {
|
|
14394
|
+
this.modalOpen.set(false);
|
|
14395
|
+
}
|
|
14396
|
+
onDialogClose() {
|
|
14397
|
+
this.modalOpen.set(false);
|
|
14398
|
+
}
|
|
14399
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14400
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderSearchComponent, isStandalone: true, selector: "tedi-header-search", inputs: { mobileVariant: { classPropertyName: "mobileVariant", publicName: "mobileVariant", isSignal: true, isRequired: false, transformFunction: null }, mobileLabels: { classPropertyName: "mobileLabels", publicName: "mobileLabels", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tedi-header-search" }, viewQueries: [{ propertyName: "dialogEl", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isMobile() && mobileVariant() === \"modal\") {\n <tedi-header-mobile-button\n icon=\"search\"\n [label]=\"buttonLabel()\"\n [ariaLabel]=\"buttonLabel()\"\n ariaHasPopup=\"dialog\"\n [ariaExpanded]=\"modalOpen()\"\n [selected]=\"modalOpen()\"\n [disabled]=\"disabled()\"\n (click)=\"open()\"\n />\n <dialog\n #dialog\n class=\"tedi-header-search__modal\"\n [attr.aria-label]=\"modalTitle()\"\n (close)=\"onDialogClose()\"\n >\n <div class=\"tedi-header-search__modal-heading\">\n <span tedi-text modifiers=\"h3\" color=\"secondary\">\n {{ modalTitle() }}\n </span>\n <button\n type=\"button\"\n class=\"tedi-header-search__button-close\"\n [attr.aria-label]=\"closeLabel()\"\n (click)=\"close()\"\n >\n <tedi-icon name=\"close\" [size]=\"24\" color=\"inherit\" />\n </button>\n </div>\n <div class=\"tedi-header-search__modal-body\">\n <ng-container *ngTemplateOutlet=\"searchContent\"></ng-container>\n </div>\n </dialog>\n} @else {\n <ng-container *ngTemplateOutlet=\"searchContent\"></ng-container>\n}\n\n<ng-template #searchContent>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".tedi-header-search{display:contents}.tedi-header-search .tedi-search__container{margin-bottom:0}.tedi-header-search__modal{position:fixed;top:0;left:0;z-index:var(--z-index-header);width:100%;max-width:100%;height:100dvh;max-height:100dvh;padding:0;background:var(--modal-background);border:0}.tedi-header-search__modal[open]{display:flex;flex-direction:column}.tedi-header-search__modal::backdrop{background:transparent}.tedi-header-search__modal-heading{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;padding:var(--modal-heading-padding-y) var(--modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-header-search__modal-body{flex:1 1 0;padding:var(--modal-body-padding);overflow-y:auto}.tedi-header-search__button-close{display:inline-flex;align-items:center;justify-content:center;padding:var(--layout-grid-gutters-08);color:var(--button-close-text-default);cursor:pointer;background:transparent;border:0}.tedi-header-search__button-close:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: HeaderMobileButtonComponent, selector: "tedi-header-mobile-button", inputs: ["icon", "label", "href", "selected", "disabled", "ariaLabel", "ariaHasPopup", "ariaExpanded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
14401
|
+
}
|
|
14402
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderSearchComponent, decorators: [{
|
|
14403
|
+
type: Component,
|
|
14404
|
+
args: [{ selector: "tedi-header-search", standalone: true, imports: [
|
|
14405
|
+
NgTemplateOutlet,
|
|
14406
|
+
IconComponent,
|
|
14407
|
+
TextComponent,
|
|
14408
|
+
HeaderMobileButtonComponent,
|
|
14409
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
14410
|
+
class: "tedi-header-search",
|
|
14411
|
+
}, template: "@if (isMobile() && mobileVariant() === \"modal\") {\n <tedi-header-mobile-button\n icon=\"search\"\n [label]=\"buttonLabel()\"\n [ariaLabel]=\"buttonLabel()\"\n ariaHasPopup=\"dialog\"\n [ariaExpanded]=\"modalOpen()\"\n [selected]=\"modalOpen()\"\n [disabled]=\"disabled()\"\n (click)=\"open()\"\n />\n <dialog\n #dialog\n class=\"tedi-header-search__modal\"\n [attr.aria-label]=\"modalTitle()\"\n (close)=\"onDialogClose()\"\n >\n <div class=\"tedi-header-search__modal-heading\">\n <span tedi-text modifiers=\"h3\" color=\"secondary\">\n {{ modalTitle() }}\n </span>\n <button\n type=\"button\"\n class=\"tedi-header-search__button-close\"\n [attr.aria-label]=\"closeLabel()\"\n (click)=\"close()\"\n >\n <tedi-icon name=\"close\" [size]=\"24\" color=\"inherit\" />\n </button>\n </div>\n <div class=\"tedi-header-search__modal-body\">\n <ng-container *ngTemplateOutlet=\"searchContent\"></ng-container>\n </div>\n </dialog>\n} @else {\n <ng-container *ngTemplateOutlet=\"searchContent\"></ng-container>\n}\n\n<ng-template #searchContent>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".tedi-header-search{display:contents}.tedi-header-search .tedi-search__container{margin-bottom:0}.tedi-header-search__modal{position:fixed;top:0;left:0;z-index:var(--z-index-header);width:100%;max-width:100%;height:100dvh;max-height:100dvh;padding:0;background:var(--modal-background);border:0}.tedi-header-search__modal[open]{display:flex;flex-direction:column}.tedi-header-search__modal::backdrop{background:transparent}.tedi-header-search__modal-heading{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;padding:var(--modal-heading-padding-y) var(--modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-header-search__modal-body{flex:1 1 0;padding:var(--modal-body-padding);overflow-y:auto}.tedi-header-search__button-close{display:inline-flex;align-items:center;justify-content:center;padding:var(--layout-grid-gutters-08);color:var(--button-close-text-default);cursor:pointer;background:transparent;border:0}.tedi-header-search__button-close:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}\n"] }]
|
|
14412
|
+
}], ctorParameters: () => [], propDecorators: { mobileVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileVariant", required: false }] }], mobileLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileLabels", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dialogEl: [{ type: i0.ViewChild, args: ["dialog", { isSignal: true }] }] } });
|
|
13758
14413
|
|
|
13759
14414
|
class SideNavService {
|
|
13760
14415
|
breakpointService = inject(BreakpointService);
|
|
@@ -14141,14 +14796,14 @@ class SideNavToggleComponent {
|
|
|
14141
14796
|
return classList.join(" ");
|
|
14142
14797
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
14143
14798
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SideNavToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14144
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: SideNavToggleComponent, isStandalone: true, selector: "button[tedi-sidenav-toggle]", host: { listeners: { "click": "onClick()" }, properties: { "class": "classes()", "attr.aria-label": "ariaLabel()" } }, ngImport: i0, template: "<tedi-icon\n [name]=\"sidenavService.isMobileOpen() ? 'close' : 'menu'\"\n
|
|
14799
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: SideNavToggleComponent, isStandalone: true, selector: "button[tedi-sidenav-toggle]", host: { listeners: { "click": "onClick()" }, properties: { "class": "classes()", "attr.aria-label": "ariaLabel()" } }, ngImport: i0, template: "<tedi-icon\n [name]=\"sidenavService.isMobileOpen() ? 'close' : 'menu'\"\n class=\"tedi-sidenav-toggle__icon\"\n/>\n", styles: [".tedi-sidenav-toggle{position:relative;z-index:var(--z-index-sidenav);display:inline-flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;padding:1rem;cursor:pointer;background:var(--button-main-primary-background-default);border:0;border-radius:0}.tedi-sidenav-toggle__icon.tedi-icon{color:var(--button-main-primary-text-default)}.tedi-sidenav-toggle--hidden{display:none}.tedi-sidenav-toggle:hover{background:var(--button-main-primary-background-hover)}.tedi-sidenav-toggle:active{background:var(--button-main-primary-background-active)}.tedi-sidenav-toggle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
14145
14800
|
}
|
|
14146
14801
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SideNavToggleComponent, decorators: [{
|
|
14147
14802
|
type: Component,
|
|
14148
14803
|
args: [{ selector: "button[tedi-sidenav-toggle]", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [IconComponent], host: {
|
|
14149
14804
|
"[class]": "classes()",
|
|
14150
14805
|
"[attr.aria-label]": "ariaLabel()",
|
|
14151
|
-
}, template: "<tedi-icon\n [name]=\"sidenavService.isMobileOpen() ? 'close' : 'menu'\"\n
|
|
14806
|
+
}, template: "<tedi-icon\n [name]=\"sidenavService.isMobileOpen() ? 'close' : 'menu'\"\n class=\"tedi-sidenav-toggle__icon\"\n/>\n", styles: [".tedi-sidenav-toggle{position:relative;z-index:var(--z-index-sidenav);display:inline-flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;padding:1rem;cursor:pointer;background:var(--button-main-primary-background-default);border:0;border-radius:0}.tedi-sidenav-toggle__icon.tedi-icon{color:var(--button-main-primary-text-default)}.tedi-sidenav-toggle--hidden{display:none}.tedi-sidenav-toggle:hover{background:var(--button-main-primary-background-hover)}.tedi-sidenav-toggle:active{background:var(--button-main-primary-background-active)}.tedi-sidenav-toggle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}\n"] }]
|
|
14152
14807
|
}], propDecorators: { onClick: [{
|
|
14153
14808
|
type: HostListener,
|
|
14154
14809
|
args: ["click"]
|
|
@@ -14474,5 +15129,5 @@ function provideTedi(config = {}) {
|
|
|
14474
15129
|
* Generated bundle index. Do not edit.
|
|
14475
15130
|
*/
|
|
14476
15131
|
|
|
14477
|
-
export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreakpointService, ButtonComponent, ButtonGroupButtonDirective, ButtonGroupComponent, CardButtonComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardIconComponent, CardRowComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseButtonComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, EllipsisComponent, EmptyStateComponent, FeedbackTextComponent, FilterComponent, FilterContentDirective, FilterGroupComponent, FilterPrependDirective, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, HeaderActionsComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoutComponent, HeaderProfileComponent, HeaderRoleComponent, HideAtDirective, HorizontalPushHandler, HorizontalStepperComponent, HorizontalStepperItemComponent, IconComponent, InfoButtonComponent, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SelectComponent, SelectOptionTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TEDI_FORM_FIELD_CONTROL, TEDI_TABLE_CONTEXT, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TagComponent, TediPaginationResultsDirective, TediTableColumnsMenuComponent, TediTableComponent, TediTableHeaderButtonComponent, TediTableToolbarComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTimingsBottomDirective, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, breakpointInput, calculateArrowOffset, createTablePersistence, generateUUID, getCardBorderPlacementColor, getPaddingCssVariables, getPlacementFromPositionChange, groupRowSpan, injectTediTableContext, provideTedi, resolveCardBorderRadius, toConnectedPositions, usePagination };
|
|
15132
|
+
export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreakpointService, ButtonComponent, ButtonGroupButtonDirective, ButtonGroupComponent, CardButtonComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardIconComponent, CardRowComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseButtonComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, EllipsisComponent, EmptyStateComponent, FeedbackTextComponent, FilterComponent, FilterContentDirective, FilterGroupComponent, FilterPrependDirective, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, HeaderActionsComponent, HeaderBottomComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoComponent, HeaderLogoDarkDirective, HeaderLogoutComponent, HeaderMobileButtonComponent, HeaderProfileComponent, HeaderRoleComponent, HeaderRoleContentDirective, HeaderRoleNoResultsDirective, HeaderRoleTitleDirective, HeaderSearchComponent, HideAtDirective, HorizontalPushHandler, HorizontalStepperComponent, HorizontalStepperItemComponent, IconComponent, InfoButtonComponent, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SelectComponent, SelectOptionTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TEDI_FORM_FIELD_CONTROL, TEDI_TABLE_CONTEXT, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TagComponent, TediPaginationResultsDirective, TediTableColumnsMenuComponent, TediTableComponent, TediTableHeaderButtonComponent, TediTableToolbarComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTimingsBottomDirective, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, breakpointInput, calculateArrowOffset, createTablePersistence, generateUUID, getCardBorderPlacementColor, getPaddingCssVariables, getPlacementFromPositionChange, groupRowSpan, injectTediTableContext, provideTedi, resolveCardBorderRadius, toConnectedPositions, usePagination };
|
|
14478
15133
|
//# sourceMappingURL=tedi-design-system-angular-tedi.mjs.map
|