@tedi-design-system/angular 6.5.0-rc.14 → 6.5.0-rc.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/tedi-design-system-angular-tedi.mjs +1058 -137
- package/fesm2022/tedi-design-system-angular-tedi.mjs.map +1 -1
- package/index.css +1 -1
- package/package.json +2 -2
- package/tedi/index.d.ts +629 -35
- package/tedi/index.d.ts.map +1 -1
|
@@ -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 {
|
|
@@ -7740,8 +7777,15 @@ class TextFieldComponent {
|
|
|
7740
7777
|
formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
|
|
7741
7778
|
onChange = () => { };
|
|
7742
7779
|
onTouched = () => { };
|
|
7780
|
+
constructor() {
|
|
7781
|
+
effect(() => {
|
|
7782
|
+
const value = this.value();
|
|
7783
|
+
if (this.el.nativeElement.value !== value) {
|
|
7784
|
+
this.el.nativeElement.value = value;
|
|
7785
|
+
}
|
|
7786
|
+
});
|
|
7787
|
+
}
|
|
7743
7788
|
setValue(value) {
|
|
7744
|
-
this.el.nativeElement.value = value;
|
|
7745
7789
|
this.value.set(value);
|
|
7746
7790
|
}
|
|
7747
7791
|
writeValue(value) {
|
|
@@ -7775,7 +7819,7 @@ class TextFieldComponent {
|
|
|
7775
7819
|
this.onTouched();
|
|
7776
7820
|
}
|
|
7777
7821
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7778
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TextFieldComponent, isStandalone: true, selector: "input[tedi-text-field]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, arrowsHidden: { classPropertyName: "arrowsHidden", publicName: "arrowsHidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", clear: "clear" }, host: { listeners: { "input": "handleInputChange($event)", "blur": "handleBlur()" }, properties: { "class.tedi-text-field--arrows-hidden": "arrowsHidden()", "attr.aria-invalid": "invalid() || null"
|
|
7822
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TextFieldComponent, isStandalone: true, selector: "input[tedi-text-field]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, arrowsHidden: { classPropertyName: "arrowsHidden", publicName: "arrowsHidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", clear: "clear" }, host: { listeners: { "input": "handleInputChange($event)", "blur": "handleBlur()" }, properties: { "class.tedi-text-field--arrows-hidden": "arrowsHidden()", "attr.aria-invalid": "invalid() || null" }, classAttribute: "tedi-text-field" }, providers: [
|
|
7779
7823
|
{
|
|
7780
7824
|
provide: NG_VALUE_ACCESSOR,
|
|
7781
7825
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
@@ -7803,11 +7847,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
7803
7847
|
class: "tedi-text-field",
|
|
7804
7848
|
"[class.tedi-text-field--arrows-hidden]": "arrowsHidden()",
|
|
7805
7849
|
"[attr.aria-invalid]": "invalid() || null",
|
|
7806
|
-
"[value]": "value()",
|
|
7807
7850
|
"(input)": "handleInputChange($event)",
|
|
7808
7851
|
"(blur)": "handleBlur()",
|
|
7809
7852
|
}, styles: [".tedi-text-field{flex:1;height:100%;padding:var(--form-field-padding-y-md-default) var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-text-field::placeholder{color:var(--form-input-text-placeholder)}.tedi-text-field:disabled{color:var(--form-input-text-disabled);cursor:not-allowed;background:transparent}.tedi-text-field--arrows-hidden::-webkit-outer-spin-button,.tedi-text-field--arrows-hidden::-webkit-inner-spin-button{appearance:none}.tedi-text-field--arrows-hidden[type=number]{appearance:textfield}.tedi-form-field--with-icon .tedi-text-field{padding-right:0}.tedi-form-field--small .tedi-text-field{padding-block:var(--form-field-padding-y-sm);padding-inline:var(--form-field-padding-x-md-default)}.tedi-form-field--large .tedi-text-field{padding-block:var(--form-field-padding-y-lg);padding-inline:var(--form-field-padding-x-lg)}\n"] }]
|
|
7810
|
-
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], arrowsHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowsHidden", required: false }] }], clear: [{ type: i0.Output, args: ["clear"] }] } });
|
|
7853
|
+
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], arrowsHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowsHidden", required: false }] }], clear: [{ type: i0.Output, args: ["clear"] }] } });
|
|
7811
7854
|
|
|
7812
7855
|
/**
|
|
7813
7856
|
* Checks if a string is a valid `HH:mm` time (00:00 – 23:59).
|
|
@@ -10185,6 +10228,43 @@ function injectTediTableContext() {
|
|
|
10185
10228
|
return ctx;
|
|
10186
10229
|
}
|
|
10187
10230
|
|
|
10231
|
+
/**
|
|
10232
|
+
* Collapse consecutive rows with an equal key into row spans, keyed by row id.
|
|
10233
|
+
* The first row of each run maps to the run length (`N`); the rows it covers
|
|
10234
|
+
* map to `0`. Pass the **rendered** row set (typically
|
|
10235
|
+
* `table.getRowModel().rows`) so spans operate post-filter / sort / pagination.
|
|
10236
|
+
*/
|
|
10237
|
+
function computeGroupSpans(rows, keyFn) {
|
|
10238
|
+
const spans = new Map();
|
|
10239
|
+
let i = 0;
|
|
10240
|
+
while (i < rows.length) {
|
|
10241
|
+
const groupKey = keyFn(rows[i]);
|
|
10242
|
+
let j = i + 1;
|
|
10243
|
+
while (j < rows.length && keyFn(rows[j]) === groupKey)
|
|
10244
|
+
j++;
|
|
10245
|
+
spans.set(rows[i].id, j - i);
|
|
10246
|
+
for (let k = i + 1; k < j; k++)
|
|
10247
|
+
spans.set(rows[k].id, 0);
|
|
10248
|
+
i = j;
|
|
10249
|
+
}
|
|
10250
|
+
return spans;
|
|
10251
|
+
}
|
|
10252
|
+
/**
|
|
10253
|
+
* Build a `rowSpan` callback that auto-collapses consecutive equal keys.
|
|
10254
|
+
* Returns `N > 1` for the first row in a run and `0` for the covered rows.
|
|
10255
|
+
* Pass the **same** array of rows the table is rendering — typically
|
|
10256
|
+
* `table.getRowModel().rows` — so spans operate on the post-filter / sort /
|
|
10257
|
+
* pagination row set.
|
|
10258
|
+
*
|
|
10259
|
+
* Prefer the column-level `groupBy` option, which computes this internally
|
|
10260
|
+
* against the live row model; reach for this helper only when you need a
|
|
10261
|
+
* standalone `rowSpan` callback.
|
|
10262
|
+
*/
|
|
10263
|
+
function groupRowSpan(rows, keyFn) {
|
|
10264
|
+
const spans = computeGroupSpans(rows, keyFn);
|
|
10265
|
+
return (info) => spans.get(info.row.id) ?? 1;
|
|
10266
|
+
}
|
|
10267
|
+
|
|
10188
10268
|
/**
|
|
10189
10269
|
* State slices persisted by default when `persist` is configured without a
|
|
10190
10270
|
* custom `include` list. Limited to user-preference slices — task-scoped
|
|
@@ -10305,6 +10385,13 @@ function createTablePersistence(options) {
|
|
|
10305
10385
|
const SELECT_COLUMN_ID = "__select__";
|
|
10306
10386
|
const EXPAND_COLUMN_ID = "__expand__";
|
|
10307
10387
|
const DRAG_COLUMN_ID = "__drag__";
|
|
10388
|
+
/**
|
|
10389
|
+
* Fixed width (px) for the icon-only control columns (drag / select / expand).
|
|
10390
|
+
* Accounts for the cell's horizontal padding so the control still gets room.
|
|
10391
|
+
*/
|
|
10392
|
+
const CONTROL_COLUMN_WIDTH = 60;
|
|
10393
|
+
/** Interactive controls inside a cell that should not trigger row activation. */
|
|
10394
|
+
const INTERACTIVE_CELL_SELECTOR = "a, button, input, select, textarea, [role='button'], [role='checkbox'], [role='link'], [contenteditable='true']";
|
|
10308
10395
|
const passthroughFilter = () => true;
|
|
10309
10396
|
const DEFAULT_FILTER_FNS = {
|
|
10310
10397
|
text: passthroughFilter,
|
|
@@ -10497,6 +10584,42 @@ class TediTableComponent {
|
|
|
10497
10584
|
* @default undefined
|
|
10498
10585
|
*/
|
|
10499
10586
|
getSubRows = input(undefined, ...(ngDevMode ? [{ debugName: "getSubRows" }] : []));
|
|
10587
|
+
/**
|
|
10588
|
+
* Table-level row grouping key. When set, consecutive rendered rows with an
|
|
10589
|
+
* equal key form a group, and:
|
|
10590
|
+
* - the control columns (select / expand / drag) span each group — one
|
|
10591
|
+
* checkbox and one chevron per group instead of per row,
|
|
10592
|
+
* - row selection operates per group (see `enableRowSelection`),
|
|
10593
|
+
* - group boundaries drive `rowGroupDividers`.
|
|
10594
|
+
*
|
|
10595
|
+
* Data columns opt into spanning the same groups with `groupBy: true`; a
|
|
10596
|
+
* column can also group independently with its own `groupBy: (row) => key`.
|
|
10597
|
+
* @default undefined
|
|
10598
|
+
*/
|
|
10599
|
+
groupRowsBy = input(undefined, ...(ngDevMode ? [{ debugName: "groupRowsBy" }] : []));
|
|
10600
|
+
/**
|
|
10601
|
+
* How row dividers are drawn when the table is grouped via `groupRowsBy`:
|
|
10602
|
+
* - `"all"` (default) — a divider under every row, as usual.
|
|
10603
|
+
* - `"between"` — dividers only at group boundaries; rows within a group
|
|
10604
|
+
* read as one block.
|
|
10605
|
+
* - `"none"` — no row dividers.
|
|
10606
|
+
*
|
|
10607
|
+
* No effect when `groupRowsBy` is not set.
|
|
10608
|
+
* @default "all"
|
|
10609
|
+
*/
|
|
10610
|
+
rowGroupDividers = input("all", ...(ngDevMode ? [{ debugName: "rowGroupDividers" }] : []));
|
|
10611
|
+
/**
|
|
10612
|
+
* Order of the auto-injected control columns (drag handle, selection
|
|
10613
|
+
* checkbox, expand chevron). Only the controls that are actually enabled
|
|
10614
|
+
* render; any enabled control omitted from this list is appended at the end.
|
|
10615
|
+
* Use it to e.g. place the checkbox before the expand chevron.
|
|
10616
|
+
* @default ["drag", "select", "expand"]
|
|
10617
|
+
*/
|
|
10618
|
+
controlColumnOrder = input([
|
|
10619
|
+
"drag",
|
|
10620
|
+
"select",
|
|
10621
|
+
"expand",
|
|
10622
|
+
], ...(ngDevMode ? [{ debugName: "controlColumnOrder" }] : []));
|
|
10500
10623
|
/**
|
|
10501
10624
|
* Enables pagination and configures the bottom paginator slot. This is also
|
|
10502
10625
|
* the source of truth for `pageSize` / `pageSizeOptions` — the top slot
|
|
@@ -10742,44 +10865,126 @@ class TediTableComponent {
|
|
|
10742
10865
|
hasFilterableColumns = computed(() => this.columns().some((col) => Boolean(col.filterable)), ...(ngDevMode ? [{ debugName: "hasFilterableColumns" }] : []));
|
|
10743
10866
|
augmentedColumns = computed(() => {
|
|
10744
10867
|
const cols = this.columns();
|
|
10745
|
-
|
|
10868
|
+
// When the table is grouped, the control columns span each group too —
|
|
10869
|
+
// one checkbox / chevron / drag handle per group instead of per row.
|
|
10870
|
+
const controlGroupBy = this.groupRowsBy() !== undefined ? true : undefined;
|
|
10871
|
+
const controls = {};
|
|
10746
10872
|
if (this.reorderableRows()) {
|
|
10747
|
-
|
|
10873
|
+
controls.drag = {
|
|
10748
10874
|
id: DRAG_COLUMN_ID,
|
|
10749
10875
|
enableSorting: false,
|
|
10750
10876
|
enableHiding: false,
|
|
10751
10877
|
enableColumnFilter: false,
|
|
10752
|
-
size:
|
|
10878
|
+
size: CONTROL_COLUMN_WIDTH,
|
|
10879
|
+
minSize: CONTROL_COLUMN_WIDTH,
|
|
10880
|
+
maxSize: CONTROL_COLUMN_WIDTH,
|
|
10753
10881
|
header: "",
|
|
10754
10882
|
cell: () => "",
|
|
10755
|
-
|
|
10883
|
+
meta: { align: "center", vAlign: "top" },
|
|
10884
|
+
groupBy: controlGroupBy,
|
|
10885
|
+
};
|
|
10756
10886
|
}
|
|
10757
10887
|
if (this.hasSelection()) {
|
|
10758
|
-
|
|
10888
|
+
controls.select = {
|
|
10759
10889
|
id: SELECT_COLUMN_ID,
|
|
10760
10890
|
enableSorting: false,
|
|
10761
10891
|
enableHiding: false,
|
|
10762
10892
|
enableColumnFilter: false,
|
|
10763
|
-
size:
|
|
10893
|
+
size: CONTROL_COLUMN_WIDTH,
|
|
10894
|
+
minSize: CONTROL_COLUMN_WIDTH,
|
|
10895
|
+
maxSize: CONTROL_COLUMN_WIDTH,
|
|
10764
10896
|
header: "",
|
|
10765
10897
|
cell: () => "",
|
|
10766
|
-
|
|
10898
|
+
meta: { align: "center", vAlign: "top" },
|
|
10899
|
+
groupBy: controlGroupBy,
|
|
10900
|
+
};
|
|
10767
10901
|
}
|
|
10768
10902
|
if (this.hasExpansion()) {
|
|
10769
|
-
|
|
10903
|
+
// Icon-only toggles are pinned to the control-column width; a visible
|
|
10904
|
+
// label needs room, so fall back to TanStack's default sizing then.
|
|
10905
|
+
const iconOnly = !this.expandButtonHasLabel();
|
|
10906
|
+
controls.expand = {
|
|
10770
10907
|
id: EXPAND_COLUMN_ID,
|
|
10771
10908
|
enableSorting: false,
|
|
10772
10909
|
enableHiding: false,
|
|
10773
10910
|
enableColumnFilter: false,
|
|
10774
|
-
|
|
10775
|
-
|
|
10776
|
-
|
|
10911
|
+
size: iconOnly ? CONTROL_COLUMN_WIDTH : undefined,
|
|
10912
|
+
minSize: iconOnly ? CONTROL_COLUMN_WIDTH : undefined,
|
|
10913
|
+
maxSize: iconOnly ? CONTROL_COLUMN_WIDTH : undefined,
|
|
10777
10914
|
header: "",
|
|
10778
10915
|
cell: () => "",
|
|
10779
|
-
|
|
10916
|
+
meta: iconOnly
|
|
10917
|
+
? { align: "center", vAlign: "top" }
|
|
10918
|
+
: { vAlign: "top" },
|
|
10919
|
+
groupBy: controlGroupBy,
|
|
10920
|
+
};
|
|
10780
10921
|
}
|
|
10922
|
+
const order = [...new Set(this.controlColumnOrder())];
|
|
10923
|
+
const ordered = order
|
|
10924
|
+
.map((key) => controls[key])
|
|
10925
|
+
.filter((col) => col !== undefined);
|
|
10926
|
+
// Append any enabled control the consumer left out of the order list.
|
|
10927
|
+
const leading = [
|
|
10928
|
+
...ordered,
|
|
10929
|
+
...Object.keys(controls)
|
|
10930
|
+
.filter((key) => !order.includes(key))
|
|
10931
|
+
.map((key) => controls[key]),
|
|
10932
|
+
];
|
|
10781
10933
|
return [...leading, ...cols];
|
|
10782
10934
|
}, ...(ngDevMode ? [{ debugName: "augmentedColumns" }] : []));
|
|
10935
|
+
/**
|
|
10936
|
+
* Per-column group spans (`columnId → (rowId → span)`), computed from the
|
|
10937
|
+
* live row model for every column that opts into grouping via `groupBy`.
|
|
10938
|
+
* A `groupBy: true` column reuses the table-level `groupRowsBy` key.
|
|
10939
|
+
*/
|
|
10940
|
+
groupSpansByColumn = computed(() => {
|
|
10941
|
+
const rows = this.rows();
|
|
10942
|
+
const tableKey = this.groupRowsBy();
|
|
10943
|
+
const result = new Map();
|
|
10944
|
+
for (const col of this.leafColumns()) {
|
|
10945
|
+
const groupBy = col.columnDef.groupBy;
|
|
10946
|
+
if (!groupBy)
|
|
10947
|
+
continue;
|
|
10948
|
+
const keyFn = groupBy === true ? tableKey : groupBy;
|
|
10949
|
+
if (!keyFn)
|
|
10950
|
+
continue;
|
|
10951
|
+
result.set(col.id, computeGroupSpans(rows, keyFn));
|
|
10952
|
+
}
|
|
10953
|
+
return result;
|
|
10954
|
+
}, ...(ngDevMode ? [{ debugName: "groupSpansByColumn" }] : []));
|
|
10955
|
+
/**
|
|
10956
|
+
* Table-level row groups keyed by `groupRowsBy`: maps every row id to the
|
|
10957
|
+
* full set of rows in its (consecutive) group. Empty when the table is not
|
|
10958
|
+
* grouped. Drives group selection and group dividers.
|
|
10959
|
+
*/
|
|
10960
|
+
rowGroups = computed(() => {
|
|
10961
|
+
const keyFn = this.groupRowsBy();
|
|
10962
|
+
const rows = this.rows();
|
|
10963
|
+
const map = new Map();
|
|
10964
|
+
if (!keyFn)
|
|
10965
|
+
return map;
|
|
10966
|
+
let i = 0;
|
|
10967
|
+
while (i < rows.length) {
|
|
10968
|
+
const key = keyFn(rows[i]);
|
|
10969
|
+
let j = i + 1;
|
|
10970
|
+
while (j < rows.length && keyFn(rows[j]) === key)
|
|
10971
|
+
j++;
|
|
10972
|
+
const members = rows.slice(i, j);
|
|
10973
|
+
for (const member of members)
|
|
10974
|
+
map.set(member.id, members);
|
|
10975
|
+
i = j;
|
|
10976
|
+
}
|
|
10977
|
+
return map;
|
|
10978
|
+
}, ...(ngDevMode ? [{ debugName: "rowGroups" }] : []));
|
|
10979
|
+
/** Row ids that start a group — used to draw dividers at group boundaries. */
|
|
10980
|
+
groupStartRowIds = computed(() => {
|
|
10981
|
+
const ids = new Set();
|
|
10982
|
+
for (const members of this.rowGroups().values()) {
|
|
10983
|
+
if (members.length > 0)
|
|
10984
|
+
ids.add(members[0].id);
|
|
10985
|
+
}
|
|
10986
|
+
return ids;
|
|
10987
|
+
}, ...(ngDevMode ? [{ debugName: "groupStartRowIds" }] : []));
|
|
10783
10988
|
buildStateChangeHandlers() {
|
|
10784
10989
|
const paginationEnabled = this.paginationEnabled();
|
|
10785
10990
|
const paginationOpts = this.paginationOptions();
|
|
@@ -10847,6 +11052,10 @@ class TediTableComponent {
|
|
|
10847
11052
|
? (this.getRowCanExpand() ?? (() => true))
|
|
10848
11053
|
: this.getRowCanExpand(),
|
|
10849
11054
|
getSubRows: this.getSubRows(),
|
|
11055
|
+
// For tree data, keep a parent (and show only the matching descendants)
|
|
11056
|
+
// when a leaf matches — otherwise a filter that doesn't match the parent
|
|
11057
|
+
// row drops its whole subtree. No-op for flat data (every row is a leaf).
|
|
11058
|
+
filterFromLeafRows: true,
|
|
10850
11059
|
...this.buildStateChangeHandlers(),
|
|
10851
11060
|
filterFns: DEFAULT_FILTER_FNS,
|
|
10852
11061
|
getCoreRowModel: getCoreRowModel(),
|
|
@@ -10907,6 +11116,9 @@ class TediTableComponent {
|
|
|
10907
11116
|
for (const [on, name] of flags)
|
|
10908
11117
|
if (on)
|
|
10909
11118
|
classes.push(name);
|
|
11119
|
+
if (this.groupRowsBy() && this.rowGroupDividers() !== "all") {
|
|
11120
|
+
classes.push(`tedi-table--group-dividers-${this.rowGroupDividers()}`);
|
|
11121
|
+
}
|
|
10910
11122
|
classes.push(...this.paginationHostClasses());
|
|
10911
11123
|
this.trackTableInputs();
|
|
10912
11124
|
if (untracked(() => this.table.getHeaderGroups().length) > 1)
|
|
@@ -11039,7 +11251,12 @@ class TediTableComponent {
|
|
|
11039
11251
|
return toPatch(next);
|
|
11040
11252
|
});
|
|
11041
11253
|
}
|
|
11042
|
-
handleRowClick(row) {
|
|
11254
|
+
handleRowClick(event, row) {
|
|
11255
|
+
// Clicks that land on an interactive control inside a cell (checkbox,
|
|
11256
|
+
// link, button, form field, …) must not also activate the row or toggle
|
|
11257
|
+
// its expansion — so consumers don't need to add `stopPropagation` by hand.
|
|
11258
|
+
if (this.isInteractiveTarget(event))
|
|
11259
|
+
return;
|
|
11043
11260
|
// A click that ends a text drag-select shouldn't activate the row —
|
|
11044
11261
|
// otherwise copying cell text inadvertently fires the row action.
|
|
11045
11262
|
if (this.hasTextSelection())
|
|
@@ -11051,6 +11268,25 @@ class TediTableComponent {
|
|
|
11051
11268
|
this.rowClick.emit(row);
|
|
11052
11269
|
}
|
|
11053
11270
|
}
|
|
11271
|
+
/**
|
|
11272
|
+
* True when the click originated on an interactive control between the event
|
|
11273
|
+
* target and the row element (exclusive), so row-level handlers can bow out.
|
|
11274
|
+
*/
|
|
11275
|
+
isInteractiveTarget(event) {
|
|
11276
|
+
const row = event.currentTarget;
|
|
11277
|
+
let el = event.target;
|
|
11278
|
+
while (el && el !== row) {
|
|
11279
|
+
if (el instanceof HTMLLabelElement) {
|
|
11280
|
+
if (el.control)
|
|
11281
|
+
return true;
|
|
11282
|
+
}
|
|
11283
|
+
else if (el.matches(INTERACTIVE_CELL_SELECTOR)) {
|
|
11284
|
+
return true;
|
|
11285
|
+
}
|
|
11286
|
+
el = el.parentElement;
|
|
11287
|
+
}
|
|
11288
|
+
return false;
|
|
11289
|
+
}
|
|
11054
11290
|
hasTextSelection() {
|
|
11055
11291
|
if (typeof window === "undefined")
|
|
11056
11292
|
return false;
|
|
@@ -11119,6 +11355,53 @@ class TediTableComponent {
|
|
|
11119
11355
|
columnMaxWidth(column) {
|
|
11120
11356
|
return this.authoredColumnSizing().get(column.id)?.maxSize ?? null;
|
|
11121
11357
|
}
|
|
11358
|
+
/**
|
|
11359
|
+
* Columns frozen by `stickyFirstColumn`, keyed by id: the leading control
|
|
11360
|
+
* columns (select / expand / drag) plus the first content column, pinned
|
|
11361
|
+
* together as one block. `left` is the cumulative offset; `start` / `edge`
|
|
11362
|
+
* mark the block's left and right edges (the right edge draws the divider).
|
|
11363
|
+
* Empty when `stickyFirstColumn` is off.
|
|
11364
|
+
*/
|
|
11365
|
+
stickyLeftColumns = computed(() => {
|
|
11366
|
+
const map = new Map();
|
|
11367
|
+
if (!this.stickyFirstColumn())
|
|
11368
|
+
return map;
|
|
11369
|
+
const leaf = this.leafColumns();
|
|
11370
|
+
const controlIds = new Set([
|
|
11371
|
+
DRAG_COLUMN_ID,
|
|
11372
|
+
SELECT_COLUMN_ID,
|
|
11373
|
+
EXPAND_COLUMN_ID,
|
|
11374
|
+
]);
|
|
11375
|
+
const frozen = [];
|
|
11376
|
+
let i = 0;
|
|
11377
|
+
while (i < leaf.length && controlIds.has(leaf[i].id))
|
|
11378
|
+
frozen.push(leaf[i++]);
|
|
11379
|
+
if (i < leaf.length)
|
|
11380
|
+
frozen.push(leaf[i]); // first content column
|
|
11381
|
+
let left = 0;
|
|
11382
|
+
frozen.forEach((col, idx) => {
|
|
11383
|
+
map.set(col.id, {
|
|
11384
|
+
left,
|
|
11385
|
+
start: idx === 0,
|
|
11386
|
+
edge: idx === frozen.length - 1,
|
|
11387
|
+
});
|
|
11388
|
+
left += col.getSize();
|
|
11389
|
+
});
|
|
11390
|
+
return map;
|
|
11391
|
+
}, ...(ngDevMode ? [{ debugName: "stickyLeftColumns" }] : []));
|
|
11392
|
+
/** Sticky `left` (px) for a frozen column; `null` when the column isn't frozen. */
|
|
11393
|
+
stickyLeft(id) {
|
|
11394
|
+
return this.stickyLeftColumns().get(id)?.left ?? null;
|
|
11395
|
+
}
|
|
11396
|
+
/** Sticky-column class fragment for a cell (`""` when not frozen). */
|
|
11397
|
+
stickyLeftClass(id) {
|
|
11398
|
+
const info = this.stickyLeftColumns().get(id);
|
|
11399
|
+
if (!info)
|
|
11400
|
+
return "";
|
|
11401
|
+
return (" tedi-table__cell--sticky-left" +
|
|
11402
|
+
(info.start ? " tedi-table__cell--sticky-left-start" : "") +
|
|
11403
|
+
(info.edge ? " tedi-table__cell--sticky-left-edge" : ""));
|
|
11404
|
+
}
|
|
11122
11405
|
handleRowKeydown(event, row) {
|
|
11123
11406
|
if (!this.interactive())
|
|
11124
11407
|
return;
|
|
@@ -11538,8 +11821,52 @@ class TediTableComponent {
|
|
|
11538
11821
|
handleSelectAll(checked) {
|
|
11539
11822
|
this.table.toggleAllPageRowsSelected(checked);
|
|
11540
11823
|
}
|
|
11824
|
+
/**
|
|
11825
|
+
* Selectable rows that a single checkbox controls. For a real group (>1
|
|
11826
|
+
* member) that's the whole group; otherwise it's the row itself — which
|
|
11827
|
+
* keeps TanStack's parent→sub-row cascade (`row.toggleSelected`) intact for
|
|
11828
|
+
* `getSubRows` parents that happen to be singleton groups.
|
|
11829
|
+
*/
|
|
11830
|
+
selectionGroup(row) {
|
|
11831
|
+
const members = this.rowGroups().get(row.id);
|
|
11832
|
+
return members && members.length > 1 ? members : null;
|
|
11833
|
+
}
|
|
11541
11834
|
handleSelectRow(row, checked) {
|
|
11542
|
-
|
|
11835
|
+
const group = this.selectionGroup(row);
|
|
11836
|
+
if (!group) {
|
|
11837
|
+
row.toggleSelected(checked);
|
|
11838
|
+
return;
|
|
11839
|
+
}
|
|
11840
|
+
const ids = group.filter((r) => r.getCanSelect()).map((r) => r.id);
|
|
11841
|
+
this.table.setRowSelection((prev) => {
|
|
11842
|
+
const next = { ...prev };
|
|
11843
|
+
for (const id of ids) {
|
|
11844
|
+
if (checked) {
|
|
11845
|
+
next[id] = true;
|
|
11846
|
+
}
|
|
11847
|
+
else {
|
|
11848
|
+
delete next[id];
|
|
11849
|
+
}
|
|
11850
|
+
}
|
|
11851
|
+
return next;
|
|
11852
|
+
});
|
|
11853
|
+
}
|
|
11854
|
+
/** Whether the (group) checkbox for `row` should render as checked. */
|
|
11855
|
+
isRowSelected(row) {
|
|
11856
|
+
const group = this.selectionGroup(row);
|
|
11857
|
+
if (!group)
|
|
11858
|
+
return row.getIsSelected();
|
|
11859
|
+
const selectable = group.filter((r) => r.getCanSelect());
|
|
11860
|
+
return selectable.length > 0 && selectable.every((r) => r.getIsSelected());
|
|
11861
|
+
}
|
|
11862
|
+
/** Whether the (group) checkbox for `row` should render as indeterminate. */
|
|
11863
|
+
isRowIndeterminate(row) {
|
|
11864
|
+
const group = this.selectionGroup(row);
|
|
11865
|
+
if (!group)
|
|
11866
|
+
return row.getIsSomeSelected();
|
|
11867
|
+
const selectable = group.filter((r) => r.getCanSelect());
|
|
11868
|
+
return (selectable.some((r) => r.getIsSelected()) &&
|
|
11869
|
+
!selectable.every((r) => r.getIsSelected()));
|
|
11543
11870
|
}
|
|
11544
11871
|
handleExpandToggle(row) {
|
|
11545
11872
|
row.toggleExpanded();
|
|
@@ -11746,6 +12073,11 @@ class TediTableComponent {
|
|
|
11746
12073
|
* - `N>1` → emit `rowspan="N"`
|
|
11747
12074
|
*/
|
|
11748
12075
|
resolveRowSpan(cell, cellContext) {
|
|
12076
|
+
const groupSpans = this.groupSpansByColumn().get(cell.column.id);
|
|
12077
|
+
if (groupSpans) {
|
|
12078
|
+
const span = groupSpans.get(cellContext.row.id) ?? 1;
|
|
12079
|
+
return span === 1 ? null : span;
|
|
12080
|
+
}
|
|
11749
12081
|
const columnDef = cell.column.columnDef;
|
|
11750
12082
|
if (!columnDef.rowSpan)
|
|
11751
12083
|
return null;
|
|
@@ -11757,13 +12089,13 @@ class TediTableComponent {
|
|
|
11757
12089
|
return value;
|
|
11758
12090
|
}
|
|
11759
12091
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TediTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11760
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TediTableComponent, isStandalone: true, selector: "tedi-table", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, verticalBorders: { classPropertyName: "verticalBorders", publicName: "verticalBorders", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null }, stickyFirstColumn: { classPropertyName: "stickyFirstColumn", publicName: "stickyFirstColumn", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, fixedLayout: { classPropertyName: "fixedLayout", publicName: "fixedLayout", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, activeRowId: { classPropertyName: "activeRowId", publicName: "activeRowId", isSignal: true, isRequired: false, transformFunction: null }, selectedRowHighlight: { classPropertyName: "selectedRowHighlight", publicName: "selectedRowHighlight", isSignal: true, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: true, isRequired: false, transformFunction: null }, enableRowSelection: { classPropertyName: "enableRowSelection", publicName: "enableRowSelection", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, enableColumnFilters: { classPropertyName: "enableColumnFilters", publicName: "enableColumnFilters", isSignal: true, isRequired: false, transformFunction: null }, renderSubComponent: { classPropertyName: "renderSubComponent", publicName: "renderSubComponent", isSignal: true, isRequired: false, transformFunction: null }, getRowCanExpand: { classPropertyName: "getRowCanExpand", publicName: "getRowCanExpand", isSignal: true, isRequired: false, transformFunction: null }, expandTrigger: { classPropertyName: "expandTrigger", publicName: "expandTrigger", isSignal: true, isRequired: false, transformFunction: null }, expandButtonVariant: { classPropertyName: "expandButtonVariant", publicName: "expandButtonVariant", isSignal: true, isRequired: false, transformFunction: null }, expandButtonLabel: { classPropertyName: "expandButtonLabel", publicName: "expandButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, getSubRows: { classPropertyName: "getSubRows", publicName: "getSubRows", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, paginationTop: { classPropertyName: "paginationTop", publicName: "paginationTop", isSignal: true, isRequired: false, transformFunction: null }, manualPagination: { classPropertyName: "manualPagination", publicName: "manualPagination", isSignal: true, isRequired: false, transformFunction: null }, manualSorting: { classPropertyName: "manualSorting", publicName: "manualSorting", isSignal: true, isRequired: false, transformFunction: null }, manualFiltering: { classPropertyName: "manualFiltering", publicName: "manualFiltering", isSignal: true, isRequired: false, transformFunction: null }, pageCount: { classPropertyName: "pageCount", publicName: "pageCount", isSignal: true, isRequired: false, transformFunction: null }, rowCount: { classPropertyName: "rowCount", publicName: "rowCount", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, defaultState: { classPropertyName: "defaultState", publicName: "defaultState", isSignal: true, isRequired: false, transformFunction: null }, persist: { classPropertyName: "persist", publicName: "persist", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placeholderRole: { classPropertyName: "placeholderRole", publicName: "placeholderRole", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, rowAriaLabel: { classPropertyName: "rowAriaLabel", publicName: "rowAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, reorderableRows: { classPropertyName: "reorderableRows", publicName: "reorderableRows", isSignal: true, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", rowClick: "rowClick", rowDrop: "rowDrop" }, host: { attributes: { "data-name": "tedi-table" }, properties: { "class": "hostClasses()" } }, providers: [
|
|
12092
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TediTableComponent, isStandalone: true, selector: "tedi-table", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, verticalBorders: { classPropertyName: "verticalBorders", publicName: "verticalBorders", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null }, stickyFirstColumn: { classPropertyName: "stickyFirstColumn", publicName: "stickyFirstColumn", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, fixedLayout: { classPropertyName: "fixedLayout", publicName: "fixedLayout", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, activeRowId: { classPropertyName: "activeRowId", publicName: "activeRowId", isSignal: true, isRequired: false, transformFunction: null }, selectedRowHighlight: { classPropertyName: "selectedRowHighlight", publicName: "selectedRowHighlight", isSignal: true, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: true, isRequired: false, transformFunction: null }, enableRowSelection: { classPropertyName: "enableRowSelection", publicName: "enableRowSelection", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, enableColumnFilters: { classPropertyName: "enableColumnFilters", publicName: "enableColumnFilters", isSignal: true, isRequired: false, transformFunction: null }, renderSubComponent: { classPropertyName: "renderSubComponent", publicName: "renderSubComponent", isSignal: true, isRequired: false, transformFunction: null }, getRowCanExpand: { classPropertyName: "getRowCanExpand", publicName: "getRowCanExpand", isSignal: true, isRequired: false, transformFunction: null }, expandTrigger: { classPropertyName: "expandTrigger", publicName: "expandTrigger", isSignal: true, isRequired: false, transformFunction: null }, expandButtonVariant: { classPropertyName: "expandButtonVariant", publicName: "expandButtonVariant", isSignal: true, isRequired: false, transformFunction: null }, expandButtonLabel: { classPropertyName: "expandButtonLabel", publicName: "expandButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, getSubRows: { classPropertyName: "getSubRows", publicName: "getSubRows", isSignal: true, isRequired: false, transformFunction: null }, groupRowsBy: { classPropertyName: "groupRowsBy", publicName: "groupRowsBy", isSignal: true, isRequired: false, transformFunction: null }, rowGroupDividers: { classPropertyName: "rowGroupDividers", publicName: "rowGroupDividers", isSignal: true, isRequired: false, transformFunction: null }, controlColumnOrder: { classPropertyName: "controlColumnOrder", publicName: "controlColumnOrder", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, paginationTop: { classPropertyName: "paginationTop", publicName: "paginationTop", isSignal: true, isRequired: false, transformFunction: null }, manualPagination: { classPropertyName: "manualPagination", publicName: "manualPagination", isSignal: true, isRequired: false, transformFunction: null }, manualSorting: { classPropertyName: "manualSorting", publicName: "manualSorting", isSignal: true, isRequired: false, transformFunction: null }, manualFiltering: { classPropertyName: "manualFiltering", publicName: "manualFiltering", isSignal: true, isRequired: false, transformFunction: null }, pageCount: { classPropertyName: "pageCount", publicName: "pageCount", isSignal: true, isRequired: false, transformFunction: null }, rowCount: { classPropertyName: "rowCount", publicName: "rowCount", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, defaultState: { classPropertyName: "defaultState", publicName: "defaultState", isSignal: true, isRequired: false, transformFunction: null }, persist: { classPropertyName: "persist", publicName: "persist", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placeholderRole: { classPropertyName: "placeholderRole", publicName: "placeholderRole", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, rowAriaLabel: { classPropertyName: "rowAriaLabel", publicName: "rowAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, reorderableRows: { classPropertyName: "reorderableRows", publicName: "reorderableRows", isSignal: true, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", rowClick: "rowClick", rowDrop: "rowDrop" }, host: { attributes: { "data-name": "tedi-table" }, properties: { "class": "hostClasses()" } }, providers: [
|
|
11761
12093
|
{
|
|
11762
12094
|
provide: TEDI_TABLE_CONTEXT,
|
|
11763
12095
|
useFactory: (component) => component.contextValue,
|
|
11764
12096
|
deps: [TediTableComponent],
|
|
11765
12097
|
},
|
|
11766
|
-
], queries: [{ propertyName: "customResultsTemplateRef", first: true, predicate: TediPaginationResultsDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n <div\n [id]=\"liveRegionId\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n class=\"tedi-table__sr-only\"\n ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"top.boundaryCount\"\n [siblingCount]=\"top.siblingCount\"\n [labels]=\"top.labels\"\n [background]=\"top.background\"\n [dividerPosition]=\"top.dividerPosition\"\n [hideResults]=\"top.hideResults\"\n [hidePageSize]=\"top.hidePageSize\"\n [hidePager]=\"top.hidePager\"\n [hideArrows]=\"top.hideArrows\"\n [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n [arrowVariant]=\"top.arrowVariant\"\n [showArrowLabels]=\"top.showArrowLabels\"\n [previousIcon]=\"top.previousIcon\"\n [nextIcon]=\"top.nextIcon\"\n [showModalTitle]=\"top.showModalTitle\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (topResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n\n<div class=\"tedi-table__scroll\" [attr.style]=\"maxHeightStyle()\" cdkScrollable>\n <table\n class=\"tedi-table__table\"\n [attr.id]=\"id() || null\"\n [attr.aria-rowcount]=\"ariaRowCount()\"\n [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n >\n @if (caption(); as cap) {\n <caption class=\"tedi-table__caption\">\n @if (isString(cap)) {\n {{ cap }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n }\n </caption>\n }\n\n <thead class=\"tedi-table__head\">\n @for (\n headerGroup of headerGroups();\n track headerGroup.id;\n let rowIndex = $index\n ) {\n <tr\n class=\"tedi-table__row\"\n [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n cdkDropListAutoScrollDisabled\n (cdkDropListDropped)=\"handleColumnDrop($event)\"\n >\n @for (header of headerGroup.headers; track header.id) {\n @if (shouldRenderHeader(header, rowIndex)) {\n @let meta = getColumnMeta(header.column);\n @let ariaSort = getHeaderAriaSort(header.column);\n @let headerLabel = getHeaderLabel(header.column);\n @let rowSpan = getHeaderRowSpan(header, rowIndex);\n <th\n scope=\"col\"\n cdkDrag\n [cdkDragDisabled]=\"\n !reorderableColumns() ||\n rowIndex > 0 ||\n header.column.id === SELECT_COLUMN_ID ||\n header.column.id === EXPAND_COLUMN_ID\n \"\n cdkDragLockAxis=\"x\"\n (keydown)=\"handleHeaderKeydown($event, header)\"\n [class]=\"\n 'tedi-table__header-cell' +\n (isHeaderGroup(header)\n ? ' tedi-table__header-cell--group'\n : '') +\n (meta?.align\n ? ' tedi-table__cell--align-' + meta?.align\n : '') +\n (meta?.vAlign\n ? ' tedi-table__cell--valign-' + meta?.vAlign\n : '') +\n (pickedUpColumnId() === header.column.id\n ? ' tedi-table__header-cell--picked-up'\n : '')\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n [attr.rowspan]=\"rowSpan\"\n [attr.aria-sort]=\"ariaSort\"\n [attr.aria-label]=\"headerLabel\"\n [style.width.px]=\"headerCellWidth(header.column)\"\n [style.min-width.px]=\"columnMinWidth(header.column)\"\n [style.max-width.px]=\"columnMaxWidth(header.column)\"\n >\n @if (header.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-all'\"\n [name]=\"resolvedId() + '-select-all'\"\n [attr.aria-label]=\"selectAllLabel()\"\n [checked]=\"isAllPageRowsSelected()\"\n [indeterminate]=\"\n isSomePageRowsSelected() && !isAllPageRowsSelected()\n \"\n (change)=\"handleSelectAll($any($event.target).checked)\"\n />\n }\n } @else if (header.column.id === EXPAND_COLUMN_ID) {\n <!-- empty -->\n } @else if (header.column.id === DRAG_COLUMN_ID) {\n <!-- empty -->\n } @else {\n <span class=\"tedi-table__header-content\">\n @if (\n reorderableColumns() &&\n rowIndex === 0 &&\n !isHeaderGroup(header)\n ) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpColumnId() === header.column.id\n \"\n [id]=\"reorderHandleId(header.column.id)\"\n [attr.aria-label]=\"dragColumnLabel()\"\n [attr.aria-pressed]=\"\n reorderableColumns()\n ? pickedUpColumnId() === header.column.id\n : null\n \"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n }\n <ng-container\n *flexRender=\"\n header.column.columnDef.header;\n props: header.getContext();\n let content\n \"\n >\n @if (shouldRenderSortableHeader(header.column, content)) {\n <button\n tedi-table-header-button\n [icon]=\"sortIcon(header.column)\"\n [selected]=\"!!header.column.getIsSorted()\"\n (click)=\"handleSortToggle(header.column)\"\n >\n {{ content }}\n </button>\n } @else if (isString(content) || isNumber(content)) {\n {{ content }}\n } @else {\n {{ content }}\n }\n </ng-container>\n @if (shouldRenderFilterButton(header.column)) {\n <tedi-popover\n #filterPopover\n class=\"tedi-table__filter-popover\"\n position=\"bottom-end\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-popover-trigger\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"handleFilterTriggerClick(header.column)\"\n ></button>\n <tedi-popover-content>\n <div class=\"tedi-table__filter\">\n <div class=\"tedi-table__filter-body\">\n @if (filterTemplateFor(header.column); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl;\n context: filterContextFor(\n header.column,\n filterPopover\n )\n \"\n />\n }\n </div>\n <div class=\"tedi-table__filter-actions\">\n <button\n tedi-button\n variant=\"secondary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterClear(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterClearLabel() }}\n </button>\n <button\n tedi-button\n variant=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterApply(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterApplyLabel() }}\n </button>\n </div>\n </div>\n </tedi-popover-content>\n </tedi-popover>\n }\n </span>\n }\n </th>\n }\n }\n </tr>\n }\n @if (enableColumnFilters()) {\n <tr\n class=\"tedi-table__row tedi-table__row--filter\"\n [attr.aria-rowindex]=\"\n ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n \"\n >\n @for (column of leafColumns(); track column.id) {\n @let filterId = resolvedId() + \"-filter-\" + column.id;\n <th class=\"tedi-table__header-cell\" scope=\"col\">\n @if (column.getCanFilter()) {\n <tedi-form-field size=\"small\">\n <input\n tedi-text-field\n type=\"text\"\n [id]=\"filterId\"\n [name]=\"filterId\"\n [attr.aria-label]=\"filterLabel(column)\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"getFilterValue(column)\"\n (input)=\"\n handleColumnFilter(column, $any($event.target).value)\n \"\n />\n </tedi-form-field>\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody\n class=\"tedi-table__body\"\n cdkDropList\n [cdkDropListDisabled]=\"!reorderableRows()\"\n (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n >\n @if (rows().length === 0) {\n <tr class=\"tedi-table__row\">\n <td\n class=\"tedi-table__cell tedi-table__cell--placeholder\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n @if (placeholder(); as pl) {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n </div>\n } @else {\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n }\n } @else {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n {{ placeholderLabel() }}\n </div>\n } @else {\n {{ placeholderLabel() }}\n }\n }\n </td>\n </tr>\n } @else {\n @for (row of rows(); track row.id) {\n @let isActiveRow =\n activeRowId() !== undefined && row.id === activeRowId();\n @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n @let subRowId = resolvedId() + \"-sub-\" + row.id;\n @let expandsOnClick = rowExpandsOnClick(row);\n <tr\n cdkDrag\n [cdkDragDisabled]=\"!reorderableRows()\"\n cdkDragLockAxis=\"y\"\n [class]=\"\n 'tedi-table__row' +\n (this.selectedRowHighlight() && row.getIsSelected()\n ? ' tedi-table__row--selected'\n : '') +\n (isActiveRow ? ' tedi-table__row--active' : '') +\n (interactive() || expandsOnClick\n ? ' tedi-table__row--clickable'\n : '') +\n (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n (pickedUpRow() === row.original\n ? ' tedi-table__row--picked-up'\n : '')\n \"\n [attr.role]=\"interactive() ? 'button' : null\"\n [attr.tabindex]=\"interactive() ? 0 : null\"\n [attr.aria-label]=\"rowAriaLabelFor(row)\"\n [attr.aria-rowindex]=\"ariaRowIndex\"\n [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n (click)=\"(interactive() || expandsOnClick) && handleRowClick(row)\"\n (keydown)=\"handleRowKeydown($event, row)\"\n (mouseenter)=\"handleRowMouseEnter(row)\"\n (mouseleave)=\"handleRowMouseLeave()\"\n >\n @for (cell of row.getVisibleCells(); track cell.id) {\n @let cellMeta = getColumnMeta(cell.column);\n @let cellContext = cell.getContext();\n @let resolvedSpan = resolveRowSpan(cell, cellContext);\n @if (resolvedSpan !== 0) {\n <td\n [class]=\"\n 'tedi-table__cell' +\n (cellMeta?.align\n ? ' tedi-table__cell--align-' + cellMeta?.align\n : '') +\n (cellMeta?.vAlign\n ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n : '')\n \"\n [attr.rowspan]=\"\n resolvedSpan !== null && resolvedSpan > 1\n ? resolvedSpan\n : null\n \"\n >\n @if (cell.column.id === DRAG_COLUMN_ID) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpRow() === row.original\n \"\n [id]=\"rowReorderHandleId(row.id)\"\n [attr.aria-label]=\"dragRowLabel()\"\n [attr.aria-pressed]=\"\n reorderableRows()\n ? pickedUpRow() === row.original\n : null\n \"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleRowReorderKeydown($event, row)\"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n } @else if (cell.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-' + row.id\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"row.getIsSelected()\"\n [disabled]=\"!row.getCanSelect()\"\n [indeterminate]=\"row.getIsSomeSelected()\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-row'\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"row.getIsSelected()\"\n [disabled]=\"!row.getCanSelect()\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n }\n } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n <span\n class=\"tedi-table__expand-toggle\"\n [class.tedi-table__expand-toggle--icon-only]=\"\n !expandButtonHasLabel()\n \"\n >\n @if (row.getCanExpand()) {\n @let expandOpen = row.getIsExpanded();\n <button\n tedi-collapse-button\n [arrowType]=\"resolvedExpandVariant()\"\n [hideText]=\"!expandButtonHasLabel()\"\n [openText]=\"expandButtonOpenText()\"\n [closeText]=\"expandButtonCloseText()\"\n [open]=\"expandOpen\"\n [id]=\"resolvedId() + '-expand-' + row.id\"\n [ariaControls]=\"subRowId\"\n [ariaLabel]=\"\n expandButtonHasLabel()\n ? undefined\n : expandRowLabel(expandOpen)\n \"\n (openChange)=\"handleExpandToggle(row)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleExpandKeydown($event)\"\n ></button>\n }\n </span>\n } @else {\n <ng-container\n *flexRender=\"\n cell.column.columnDef.cell;\n props: cellContext;\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n }\n </tr>\n @if (renderSubComponent(); as subTpl) {\n @if (row.getCanExpand()) {\n @let isExpanded = row.getIsExpanded();\n <tr\n [class]=\"\n 'tedi-table__row tedi-table__row--sub-component' +\n (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n \"\n >\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\n [attr.role]=\"isExpanded ? 'region' : null\"\n [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n [attr.inert]=\"isExpanded ? null : ''\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n <div class=\"tedi-table__sub-component-wrapper\">\n <div class=\"tedi-table__sub-component-content\">\n <div class=\"tedi-table__sub-component-inner\">\n <ng-container\n *ngTemplateOutlet=\"subTpl; context: { $implicit: row }\"\n />\n </div>\n </div>\n </div>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n\n @if (hasFooter()) {\n <tfoot class=\"tedi-table__foot\">\n @for (group of footerGroups(); track group.id) {\n <tr class=\"tedi-table__row\">\n @for (header of group.headers; track header.id) {\n @let footerMeta = getColumnMeta(header.column);\n <td\n [class]=\"\n 'tedi-table__cell tedi-table__cell--footer' +\n (footerMeta?.align\n ? ' tedi-table__cell--align-' + footerMeta?.align\n : '') +\n (footerMeta?.vAlign\n ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n : '')\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n >\n @if (!header.isPlaceholder) {\n <ng-container\n *flexRender=\"\n header.column.columnDef.footer;\n props: header.getContext();\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n </tr>\n }\n </tfoot>\n }\n </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"bottom.boundaryCount\"\n [siblingCount]=\"bottom.siblingCount\"\n [labels]=\"bottom.labels\"\n [background]=\"bottom.background\"\n [dividerPosition]=\"bottom.dividerPosition\"\n [hideResults]=\"bottom.hideResults\"\n [hidePageSize]=\"bottom.hidePageSize\"\n [hidePager]=\"bottom.hidePager\"\n [hideArrows]=\"bottom.hideArrows\"\n [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n [arrowVariant]=\"bottom.arrowVariant\"\n [showArrowLabels]=\"bottom.showArrowLabels\"\n [previousIcon]=\"bottom.previousIcon\"\n [nextIcon]=\"bottom.nextIcon\"\n [showModalTitle]=\"bottom.showModalTitle\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (bottomResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__row{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row:last-child{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary)}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small .tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small .tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__cell--footer{color:var(--general-text-primary)}.tedi-table__row--selected{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__row--sub-component{background:var(--table-striped);border-bottom:0}.tedi-table__row--sub-component-open{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n){background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__row>.tedi-table__header-cell:first-child{position:sticky;left:0;z-index:2;background:var(--table-default);box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__row>.tedi-table__cell:first-child{position:sticky;left:0;z-index:1;background:var(--table-default);box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell:first-child{background:var(--table-striped)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell:first-child{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell:first-child{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell--picked-up:first-child{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell:first-child{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell:first-child{z-index:3;box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--fixed-layout .tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}.tedi-table__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "component", type: PaginationComponent, selector: "tedi-pagination", inputs: ["pageCount", "page", "totalItems", "pageSize", "pageSizeOptions", "boundaryCount", "siblingCount", "labels", "background", "dividerPosition", "hideResults", "hidePageSize", "hidePager", "hideArrows", "disableArrowsAtBoundary", "arrowVariant", "showArrowLabels", "previousIcon", "nextIcon", "showModalTitle"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TediPaginationResultsDirective, selector: "[tediPaginationResults]" }, { kind: "component", type: TediTableHeaderButtonComponent, selector: "button[tedi-table-header-button]", inputs: ["icon", "filled", "selected", "disabled", "iconSize", "aria-label"] }, { kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: RadioComponent, selector: "input[type=radio][tedi-radio]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "arrowsHidden"], outputs: ["valueChange", "clear"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "inputClass"] }, { 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: CollapseButtonComponent, selector: "button[tedi-collapse-button]", inputs: ["open", "openText", "closeText", "hideText", "arrowType", "size", "inverted", "ariaControls", "ariaLabel", "id"], outputs: ["openChange"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
12098
|
+
], queries: [{ propertyName: "customResultsTemplateRef", first: true, predicate: TediPaginationResultsDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n <div\n [id]=\"liveRegionId\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n class=\"tedi-table__sr-only\"\n ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"top.boundaryCount\"\n [siblingCount]=\"top.siblingCount\"\n [labels]=\"top.labels\"\n [background]=\"top.background\"\n [dividerPosition]=\"top.dividerPosition\"\n [hideResults]=\"top.hideResults\"\n [hidePageSize]=\"top.hidePageSize\"\n [hidePager]=\"top.hidePager\"\n [hideArrows]=\"top.hideArrows\"\n [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n [arrowVariant]=\"top.arrowVariant\"\n [showArrowLabels]=\"top.showArrowLabels\"\n [previousIcon]=\"top.previousIcon\"\n [nextIcon]=\"top.nextIcon\"\n [showModalTitle]=\"top.showModalTitle\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (topResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n\n<div class=\"tedi-table__scroll\" [attr.style]=\"maxHeightStyle()\" cdkScrollable>\n <table\n class=\"tedi-table__table\"\n [attr.id]=\"id() || null\"\n [attr.aria-rowcount]=\"ariaRowCount()\"\n [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n >\n @if (caption(); as cap) {\n <caption class=\"tedi-table__caption\">\n @if (isString(cap)) {\n {{ cap }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n }\n </caption>\n }\n\n <thead class=\"tedi-table__head\">\n @for (\n headerGroup of headerGroups();\n track headerGroup.id;\n let rowIndex = $index\n ) {\n <tr\n class=\"tedi-table__row\"\n [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n cdkDropListAutoScrollDisabled\n (cdkDropListDropped)=\"handleColumnDrop($event)\"\n >\n @for (header of headerGroup.headers; track header.id) {\n @if (shouldRenderHeader(header, rowIndex)) {\n @let meta = getColumnMeta(header.column);\n @let ariaSort = getHeaderAriaSort(header.column);\n @let headerLabel = getHeaderLabel(header.column);\n @let rowSpan = getHeaderRowSpan(header, rowIndex);\n <th\n scope=\"col\"\n cdkDrag\n [cdkDragDisabled]=\"\n !reorderableColumns() ||\n rowIndex > 0 ||\n header.column.id === SELECT_COLUMN_ID ||\n header.column.id === EXPAND_COLUMN_ID\n \"\n cdkDragLockAxis=\"x\"\n (keydown)=\"handleHeaderKeydown($event, header)\"\n [class]=\"\n 'tedi-table__header-cell' +\n (isHeaderGroup(header)\n ? ' tedi-table__header-cell--group'\n : '') +\n (meta?.align\n ? ' tedi-table__cell--align-' + meta?.align\n : '') +\n (meta?.vAlign\n ? ' tedi-table__cell--valign-' + meta?.vAlign\n : '') +\n (pickedUpColumnId() === header.column.id\n ? ' tedi-table__header-cell--picked-up'\n : '') +\n stickyLeftClass(header.column.id)\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n [attr.rowspan]=\"rowSpan\"\n [attr.aria-sort]=\"ariaSort\"\n [attr.aria-label]=\"headerLabel\"\n [style.width.px]=\"headerCellWidth(header.column)\"\n [style.min-width.px]=\"columnMinWidth(header.column)\"\n [style.max-width.px]=\"columnMaxWidth(header.column)\"\n [style.left.px]=\"stickyLeft(header.column.id)\"\n >\n @if (header.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-all'\"\n [name]=\"resolvedId() + '-select-all'\"\n [attr.aria-label]=\"selectAllLabel()\"\n [checked]=\"isAllPageRowsSelected()\"\n [indeterminate]=\"\n isSomePageRowsSelected() && !isAllPageRowsSelected()\n \"\n (change)=\"handleSelectAll($any($event.target).checked)\"\n />\n }\n } @else if (header.column.id === EXPAND_COLUMN_ID) {\n <!-- empty -->\n } @else if (header.column.id === DRAG_COLUMN_ID) {\n <!-- empty -->\n } @else {\n <span class=\"tedi-table__header-content\">\n @if (\n reorderableColumns() &&\n rowIndex === 0 &&\n !isHeaderGroup(header)\n ) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpColumnId() === header.column.id\n \"\n [id]=\"reorderHandleId(header.column.id)\"\n [attr.aria-label]=\"dragColumnLabel()\"\n [attr.aria-pressed]=\"\n reorderableColumns()\n ? pickedUpColumnId() === header.column.id\n : null\n \"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n }\n <ng-container\n *flexRender=\"\n header.column.columnDef.header;\n props: header.getContext();\n let content\n \"\n >\n @if (shouldRenderSortableHeader(header.column, content)) {\n <button\n tedi-table-header-button\n [icon]=\"sortIcon(header.column)\"\n [selected]=\"!!header.column.getIsSorted()\"\n (click)=\"handleSortToggle(header.column)\"\n >\n {{ content }}\n </button>\n } @else if (isString(content) || isNumber(content)) {\n {{ content }}\n } @else {\n {{ content }}\n }\n </ng-container>\n @if (shouldRenderFilterButton(header.column)) {\n <tedi-popover\n #filterPopover\n class=\"tedi-table__filter-popover\"\n position=\"bottom-end\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-popover-trigger\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"handleFilterTriggerClick(header.column)\"\n ></button>\n <tedi-popover-content>\n <div class=\"tedi-table__filter\">\n <div class=\"tedi-table__filter-body\">\n @if (filterTemplateFor(header.column); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl;\n context: filterContextFor(\n header.column,\n filterPopover\n )\n \"\n />\n }\n </div>\n <div class=\"tedi-table__filter-actions\">\n <button\n tedi-button\n variant=\"secondary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterClear(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterClearLabel() }}\n </button>\n <button\n tedi-button\n variant=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterApply(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterApplyLabel() }}\n </button>\n </div>\n </div>\n </tedi-popover-content>\n </tedi-popover>\n }\n </span>\n }\n </th>\n }\n }\n </tr>\n }\n @if (enableColumnFilters()) {\n <tr\n class=\"tedi-table__row tedi-table__row--filter\"\n [attr.aria-rowindex]=\"\n ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n \"\n >\n @for (column of leafColumns(); track column.id) {\n @let filterId = resolvedId() + \"-filter-\" + column.id;\n <th class=\"tedi-table__header-cell\" scope=\"col\">\n @if (column.getCanFilter()) {\n <tedi-form-field size=\"small\">\n <input\n tedi-text-field\n type=\"text\"\n [id]=\"filterId\"\n [name]=\"filterId\"\n [attr.aria-label]=\"filterLabel(column)\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"getFilterValue(column)\"\n (input)=\"\n handleColumnFilter(column, $any($event.target).value)\n \"\n />\n </tedi-form-field>\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody\n class=\"tedi-table__body\"\n cdkDropList\n [cdkDropListDisabled]=\"!reorderableRows()\"\n (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n >\n @if (rows().length === 0) {\n <tr class=\"tedi-table__row\">\n <td\n class=\"tedi-table__cell tedi-table__cell--placeholder\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n @if (placeholder(); as pl) {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n </div>\n } @else {\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n }\n } @else {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n {{ placeholderLabel() }}\n </div>\n } @else {\n {{ placeholderLabel() }}\n }\n }\n </td>\n </tr>\n } @else {\n @for (row of rows(); track row.id) {\n @let isActiveRow =\n activeRowId() !== undefined && row.id === activeRowId();\n @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n @let subRowId = resolvedId() + \"-sub-\" + row.id;\n @let expandsOnClick = rowExpandsOnClick(row);\n <tr\n cdkDrag\n [cdkDragDisabled]=\"!reorderableRows()\"\n cdkDragLockAxis=\"y\"\n [class]=\"\n 'tedi-table__row' +\n (this.selectedRowHighlight() && row.getIsSelected()\n ? ' tedi-table__row--selected'\n : '') +\n (isActiveRow ? ' tedi-table__row--active' : '') +\n (interactive() || expandsOnClick\n ? ' tedi-table__row--clickable'\n : '') +\n (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n (groupStartRowIds().has(row.id)\n ? ' tedi-table__row--group-start'\n : '') +\n (pickedUpRow() === row.original\n ? ' tedi-table__row--picked-up'\n : '')\n \"\n [attr.role]=\"interactive() ? 'button' : null\"\n [attr.tabindex]=\"interactive() ? 0 : null\"\n [attr.aria-label]=\"rowAriaLabelFor(row)\"\n [attr.aria-rowindex]=\"ariaRowIndex\"\n [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n (click)=\"\n (interactive() || expandsOnClick) && handleRowClick($event, row)\n \"\n (keydown)=\"handleRowKeydown($event, row)\"\n (mouseenter)=\"handleRowMouseEnter(row)\"\n (mouseleave)=\"handleRowMouseLeave()\"\n >\n @for (cell of row.getVisibleCells(); track cell.id) {\n @let cellMeta = getColumnMeta(cell.column);\n @let cellContext = cell.getContext();\n @let resolvedSpan = resolveRowSpan(cell, cellContext);\n @if (resolvedSpan !== 0) {\n <td\n [class]=\"\n 'tedi-table__cell' +\n (cellMeta?.align\n ? ' tedi-table__cell--align-' + cellMeta?.align\n : '') +\n (cellMeta?.vAlign\n ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n : '') +\n stickyLeftClass(cell.column.id)\n \"\n [style.left.px]=\"stickyLeft(cell.column.id)\"\n [attr.rowspan]=\"\n resolvedSpan !== null && resolvedSpan > 1\n ? resolvedSpan\n : null\n \"\n >\n @if (cell.column.id === DRAG_COLUMN_ID) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpRow() === row.original\n \"\n [id]=\"rowReorderHandleId(row.id)\"\n [attr.aria-label]=\"dragRowLabel()\"\n [attr.aria-pressed]=\"\n reorderableRows()\n ? pickedUpRow() === row.original\n : null\n \"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleRowReorderKeydown($event, row)\"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n } @else if (cell.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-' + row.id\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"isRowSelected(row)\"\n [disabled]=\"!row.getCanSelect()\"\n [indeterminate]=\"isRowIndeterminate(row)\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-row'\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"row.getIsSelected()\"\n [disabled]=\"!row.getCanSelect()\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n }\n } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n <span\n class=\"tedi-table__expand-toggle\"\n [class.tedi-table__expand-toggle--icon-only]=\"\n !expandButtonHasLabel()\n \"\n >\n @if (row.getCanExpand()) {\n @let expandOpen = row.getIsExpanded();\n <button\n tedi-collapse-button\n [arrowType]=\"resolvedExpandVariant()\"\n [hideText]=\"!expandButtonHasLabel()\"\n [openText]=\"expandButtonOpenText()\"\n [closeText]=\"expandButtonCloseText()\"\n [open]=\"expandOpen\"\n [id]=\"resolvedId() + '-expand-' + row.id\"\n [ariaControls]=\"subRowId\"\n [ariaLabel]=\"\n expandButtonHasLabel()\n ? undefined\n : expandRowLabel(expandOpen)\n \"\n (openChange)=\"handleExpandToggle(row)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleExpandKeydown($event)\"\n ></button>\n }\n </span>\n } @else {\n <ng-container\n *flexRender=\"\n cell.column.columnDef.cell;\n props: cellContext;\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n }\n </tr>\n @if (renderSubComponent(); as subTpl) {\n @if (row.getCanExpand()) {\n @let isExpanded = row.getIsExpanded();\n <tr\n [class]=\"\n 'tedi-table__row tedi-table__row--sub-component' +\n (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n \"\n >\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\n [attr.role]=\"isExpanded ? 'region' : null\"\n [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n [attr.inert]=\"isExpanded ? null : ''\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n <div class=\"tedi-table__sub-component-wrapper\">\n <div class=\"tedi-table__sub-component-content\">\n <div class=\"tedi-table__sub-component-inner\">\n <ng-container\n *ngTemplateOutlet=\"subTpl; context: { $implicit: row }\"\n />\n </div>\n </div>\n </div>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n\n @if (hasFooter()) {\n <tfoot class=\"tedi-table__foot\">\n @for (group of footerGroups(); track group.id) {\n <tr class=\"tedi-table__row\">\n @for (header of group.headers; track header.id) {\n @let footerMeta = getColumnMeta(header.column);\n <td\n [class]=\"\n 'tedi-table__cell tedi-table__cell--footer' +\n (footerMeta?.align\n ? ' tedi-table__cell--align-' + footerMeta?.align\n : '') +\n (footerMeta?.vAlign\n ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n : '')\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n >\n @if (!header.isPlaceholder) {\n <ng-container\n *flexRender=\"\n header.column.columnDef.footer;\n props: header.getContext();\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n </tr>\n }\n </tfoot>\n }\n </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"bottom.boundaryCount\"\n [siblingCount]=\"bottom.siblingCount\"\n [labels]=\"bottom.labels\"\n [background]=\"bottom.background\"\n [dividerPosition]=\"bottom.dividerPosition\"\n [hideResults]=\"bottom.hideResults\"\n [hidePageSize]=\"bottom.hidePageSize\"\n [hidePager]=\"bottom.hidePager\"\n [hideArrows]=\"bottom.hideArrows\"\n [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n [arrowVariant]=\"bottom.arrowVariant\"\n [showArrowLabels]=\"bottom.showArrowLabels\"\n [previousIcon]=\"bottom.previousIcon\"\n [nextIcon]=\"bottom.nextIcon\"\n [showModalTitle]=\"bottom.showModalTitle\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (bottomResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-center .tedi-table__expand-toggle{justify-content:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small .tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small .tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--fixed-layout .tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}.tedi-table__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "component", type: PaginationComponent, selector: "tedi-pagination", inputs: ["pageCount", "page", "totalItems", "pageSize", "pageSizeOptions", "boundaryCount", "siblingCount", "labels", "background", "dividerPosition", "hideResults", "hidePageSize", "hidePager", "hideArrows", "disableArrowsAtBoundary", "arrowVariant", "showArrowLabels", "previousIcon", "nextIcon", "showModalTitle"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TediPaginationResultsDirective, selector: "[tediPaginationResults]" }, { kind: "component", type: TediTableHeaderButtonComponent, selector: "button[tedi-table-header-button]", inputs: ["icon", "filled", "selected", "disabled", "iconSize", "aria-label"] }, { kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: RadioComponent, selector: "input[type=radio][tedi-radio]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "arrowsHidden"], outputs: ["valueChange", "clear"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "inputClass"] }, { 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: CollapseButtonComponent, selector: "button[tedi-collapse-button]", inputs: ["open", "openText", "closeText", "hideText", "arrowType", "size", "inverted", "ariaControls", "ariaLabel", "id"], outputs: ["openChange"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11767
12099
|
}
|
|
11768
12100
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TediTableComponent, decorators: [{
|
|
11769
12101
|
type: Component,
|
|
@@ -11797,37 +12129,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
11797
12129
|
useFactory: (component) => component.contextValue,
|
|
11798
12130
|
deps: [TediTableComponent],
|
|
11799
12131
|
},
|
|
11800
|
-
], template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n <div\n [id]=\"liveRegionId\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n class=\"tedi-table__sr-only\"\n ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"top.boundaryCount\"\n [siblingCount]=\"top.siblingCount\"\n [labels]=\"top.labels\"\n [background]=\"top.background\"\n [dividerPosition]=\"top.dividerPosition\"\n [hideResults]=\"top.hideResults\"\n [hidePageSize]=\"top.hidePageSize\"\n [hidePager]=\"top.hidePager\"\n [hideArrows]=\"top.hideArrows\"\n [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n [arrowVariant]=\"top.arrowVariant\"\n [showArrowLabels]=\"top.showArrowLabels\"\n [previousIcon]=\"top.previousIcon\"\n [nextIcon]=\"top.nextIcon\"\n [showModalTitle]=\"top.showModalTitle\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (topResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n\n<div class=\"tedi-table__scroll\" [attr.style]=\"maxHeightStyle()\" cdkScrollable>\n <table\n class=\"tedi-table__table\"\n [attr.id]=\"id() || null\"\n [attr.aria-rowcount]=\"ariaRowCount()\"\n [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n >\n @if (caption(); as cap) {\n <caption class=\"tedi-table__caption\">\n @if (isString(cap)) {\n {{ cap }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n }\n </caption>\n }\n\n <thead class=\"tedi-table__head\">\n @for (\n headerGroup of headerGroups();\n track headerGroup.id;\n let rowIndex = $index\n ) {\n <tr\n class=\"tedi-table__row\"\n [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n cdkDropListAutoScrollDisabled\n (cdkDropListDropped)=\"handleColumnDrop($event)\"\n >\n @for (header of headerGroup.headers; track header.id) {\n @if (shouldRenderHeader(header, rowIndex)) {\n @let meta = getColumnMeta(header.column);\n @let ariaSort = getHeaderAriaSort(header.column);\n @let headerLabel = getHeaderLabel(header.column);\n @let rowSpan = getHeaderRowSpan(header, rowIndex);\n <th\n scope=\"col\"\n cdkDrag\n [cdkDragDisabled]=\"\n !reorderableColumns() ||\n rowIndex > 0 ||\n header.column.id === SELECT_COLUMN_ID ||\n header.column.id === EXPAND_COLUMN_ID\n \"\n cdkDragLockAxis=\"x\"\n (keydown)=\"handleHeaderKeydown($event, header)\"\n [class]=\"\n 'tedi-table__header-cell' +\n (isHeaderGroup(header)\n ? ' tedi-table__header-cell--group'\n : '') +\n (meta?.align\n ? ' tedi-table__cell--align-' + meta?.align\n : '') +\n (meta?.vAlign\n ? ' tedi-table__cell--valign-' + meta?.vAlign\n : '') +\n (pickedUpColumnId() === header.column.id\n ? ' tedi-table__header-cell--picked-up'\n : '')\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n [attr.rowspan]=\"rowSpan\"\n [attr.aria-sort]=\"ariaSort\"\n [attr.aria-label]=\"headerLabel\"\n [style.width.px]=\"headerCellWidth(header.column)\"\n [style.min-width.px]=\"columnMinWidth(header.column)\"\n [style.max-width.px]=\"columnMaxWidth(header.column)\"\n >\n @if (header.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-all'\"\n [name]=\"resolvedId() + '-select-all'\"\n [attr.aria-label]=\"selectAllLabel()\"\n [checked]=\"isAllPageRowsSelected()\"\n [indeterminate]=\"\n isSomePageRowsSelected() && !isAllPageRowsSelected()\n \"\n (change)=\"handleSelectAll($any($event.target).checked)\"\n />\n }\n } @else if (header.column.id === EXPAND_COLUMN_ID) {\n <!-- empty -->\n } @else if (header.column.id === DRAG_COLUMN_ID) {\n <!-- empty -->\n } @else {\n <span class=\"tedi-table__header-content\">\n @if (\n reorderableColumns() &&\n rowIndex === 0 &&\n !isHeaderGroup(header)\n ) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpColumnId() === header.column.id\n \"\n [id]=\"reorderHandleId(header.column.id)\"\n [attr.aria-label]=\"dragColumnLabel()\"\n [attr.aria-pressed]=\"\n reorderableColumns()\n ? pickedUpColumnId() === header.column.id\n : null\n \"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n }\n <ng-container\n *flexRender=\"\n header.column.columnDef.header;\n props: header.getContext();\n let content\n \"\n >\n @if (shouldRenderSortableHeader(header.column, content)) {\n <button\n tedi-table-header-button\n [icon]=\"sortIcon(header.column)\"\n [selected]=\"!!header.column.getIsSorted()\"\n (click)=\"handleSortToggle(header.column)\"\n >\n {{ content }}\n </button>\n } @else if (isString(content) || isNumber(content)) {\n {{ content }}\n } @else {\n {{ content }}\n }\n </ng-container>\n @if (shouldRenderFilterButton(header.column)) {\n <tedi-popover\n #filterPopover\n class=\"tedi-table__filter-popover\"\n position=\"bottom-end\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-popover-trigger\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"handleFilterTriggerClick(header.column)\"\n ></button>\n <tedi-popover-content>\n <div class=\"tedi-table__filter\">\n <div class=\"tedi-table__filter-body\">\n @if (filterTemplateFor(header.column); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl;\n context: filterContextFor(\n header.column,\n filterPopover\n )\n \"\n />\n }\n </div>\n <div class=\"tedi-table__filter-actions\">\n <button\n tedi-button\n variant=\"secondary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterClear(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterClearLabel() }}\n </button>\n <button\n tedi-button\n variant=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterApply(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterApplyLabel() }}\n </button>\n </div>\n </div>\n </tedi-popover-content>\n </tedi-popover>\n }\n </span>\n }\n </th>\n }\n }\n </tr>\n }\n @if (enableColumnFilters()) {\n <tr\n class=\"tedi-table__row tedi-table__row--filter\"\n [attr.aria-rowindex]=\"\n ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n \"\n >\n @for (column of leafColumns(); track column.id) {\n @let filterId = resolvedId() + \"-filter-\" + column.id;\n <th class=\"tedi-table__header-cell\" scope=\"col\">\n @if (column.getCanFilter()) {\n <tedi-form-field size=\"small\">\n <input\n tedi-text-field\n type=\"text\"\n [id]=\"filterId\"\n [name]=\"filterId\"\n [attr.aria-label]=\"filterLabel(column)\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"getFilterValue(column)\"\n (input)=\"\n handleColumnFilter(column, $any($event.target).value)\n \"\n />\n </tedi-form-field>\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody\n class=\"tedi-table__body\"\n cdkDropList\n [cdkDropListDisabled]=\"!reorderableRows()\"\n (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n >\n @if (rows().length === 0) {\n <tr class=\"tedi-table__row\">\n <td\n class=\"tedi-table__cell tedi-table__cell--placeholder\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n @if (placeholder(); as pl) {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n </div>\n } @else {\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n }\n } @else {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n {{ placeholderLabel() }}\n </div>\n } @else {\n {{ placeholderLabel() }}\n }\n }\n </td>\n </tr>\n } @else {\n @for (row of rows(); track row.id) {\n @let isActiveRow =\n activeRowId() !== undefined && row.id === activeRowId();\n @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n @let subRowId = resolvedId() + \"-sub-\" + row.id;\n @let expandsOnClick = rowExpandsOnClick(row);\n <tr\n cdkDrag\n [cdkDragDisabled]=\"!reorderableRows()\"\n cdkDragLockAxis=\"y\"\n [class]=\"\n 'tedi-table__row' +\n (this.selectedRowHighlight() && row.getIsSelected()\n ? ' tedi-table__row--selected'\n : '') +\n (isActiveRow ? ' tedi-table__row--active' : '') +\n (interactive() || expandsOnClick\n ? ' tedi-table__row--clickable'\n : '') +\n (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n (pickedUpRow() === row.original\n ? ' tedi-table__row--picked-up'\n : '')\n \"\n [attr.role]=\"interactive() ? 'button' : null\"\n [attr.tabindex]=\"interactive() ? 0 : null\"\n [attr.aria-label]=\"rowAriaLabelFor(row)\"\n [attr.aria-rowindex]=\"ariaRowIndex\"\n [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n (click)=\"(interactive() || expandsOnClick) && handleRowClick(row)\"\n (keydown)=\"handleRowKeydown($event, row)\"\n (mouseenter)=\"handleRowMouseEnter(row)\"\n (mouseleave)=\"handleRowMouseLeave()\"\n >\n @for (cell of row.getVisibleCells(); track cell.id) {\n @let cellMeta = getColumnMeta(cell.column);\n @let cellContext = cell.getContext();\n @let resolvedSpan = resolveRowSpan(cell, cellContext);\n @if (resolvedSpan !== 0) {\n <td\n [class]=\"\n 'tedi-table__cell' +\n (cellMeta?.align\n ? ' tedi-table__cell--align-' + cellMeta?.align\n : '') +\n (cellMeta?.vAlign\n ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n : '')\n \"\n [attr.rowspan]=\"\n resolvedSpan !== null && resolvedSpan > 1\n ? resolvedSpan\n : null\n \"\n >\n @if (cell.column.id === DRAG_COLUMN_ID) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpRow() === row.original\n \"\n [id]=\"rowReorderHandleId(row.id)\"\n [attr.aria-label]=\"dragRowLabel()\"\n [attr.aria-pressed]=\"\n reorderableRows()\n ? pickedUpRow() === row.original\n : null\n \"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleRowReorderKeydown($event, row)\"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n } @else if (cell.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-' + row.id\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"row.getIsSelected()\"\n [disabled]=\"!row.getCanSelect()\"\n [indeterminate]=\"row.getIsSomeSelected()\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-row'\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"row.getIsSelected()\"\n [disabled]=\"!row.getCanSelect()\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n }\n } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n <span\n class=\"tedi-table__expand-toggle\"\n [class.tedi-table__expand-toggle--icon-only]=\"\n !expandButtonHasLabel()\n \"\n >\n @if (row.getCanExpand()) {\n @let expandOpen = row.getIsExpanded();\n <button\n tedi-collapse-button\n [arrowType]=\"resolvedExpandVariant()\"\n [hideText]=\"!expandButtonHasLabel()\"\n [openText]=\"expandButtonOpenText()\"\n [closeText]=\"expandButtonCloseText()\"\n [open]=\"expandOpen\"\n [id]=\"resolvedId() + '-expand-' + row.id\"\n [ariaControls]=\"subRowId\"\n [ariaLabel]=\"\n expandButtonHasLabel()\n ? undefined\n : expandRowLabel(expandOpen)\n \"\n (openChange)=\"handleExpandToggle(row)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleExpandKeydown($event)\"\n ></button>\n }\n </span>\n } @else {\n <ng-container\n *flexRender=\"\n cell.column.columnDef.cell;\n props: cellContext;\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n }\n </tr>\n @if (renderSubComponent(); as subTpl) {\n @if (row.getCanExpand()) {\n @let isExpanded = row.getIsExpanded();\n <tr\n [class]=\"\n 'tedi-table__row tedi-table__row--sub-component' +\n (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n \"\n >\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\n [attr.role]=\"isExpanded ? 'region' : null\"\n [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n [attr.inert]=\"isExpanded ? null : ''\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n <div class=\"tedi-table__sub-component-wrapper\">\n <div class=\"tedi-table__sub-component-content\">\n <div class=\"tedi-table__sub-component-inner\">\n <ng-container\n *ngTemplateOutlet=\"subTpl; context: { $implicit: row }\"\n />\n </div>\n </div>\n </div>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n\n @if (hasFooter()) {\n <tfoot class=\"tedi-table__foot\">\n @for (group of footerGroups(); track group.id) {\n <tr class=\"tedi-table__row\">\n @for (header of group.headers; track header.id) {\n @let footerMeta = getColumnMeta(header.column);\n <td\n [class]=\"\n 'tedi-table__cell tedi-table__cell--footer' +\n (footerMeta?.align\n ? ' tedi-table__cell--align-' + footerMeta?.align\n : '') +\n (footerMeta?.vAlign\n ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n : '')\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n >\n @if (!header.isPlaceholder) {\n <ng-container\n *flexRender=\"\n header.column.columnDef.footer;\n props: header.getContext();\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n </tr>\n }\n </tfoot>\n }\n </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"bottom.boundaryCount\"\n [siblingCount]=\"bottom.siblingCount\"\n [labels]=\"bottom.labels\"\n [background]=\"bottom.background\"\n [dividerPosition]=\"bottom.dividerPosition\"\n [hideResults]=\"bottom.hideResults\"\n [hidePageSize]=\"bottom.hidePageSize\"\n [hidePager]=\"bottom.hidePager\"\n [hideArrows]=\"bottom.hideArrows\"\n [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n [arrowVariant]=\"bottom.arrowVariant\"\n [showArrowLabels]=\"bottom.showArrowLabels\"\n [previousIcon]=\"bottom.previousIcon\"\n [nextIcon]=\"bottom.nextIcon\"\n [showModalTitle]=\"bottom.showModalTitle\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (bottomResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__row{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row:last-child{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary)}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small .tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small .tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__cell--footer{color:var(--general-text-primary)}.tedi-table__row--selected{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__row--sub-component{background:var(--table-striped);border-bottom:0}.tedi-table__row--sub-component-open{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n){background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__row>.tedi-table__header-cell:first-child{position:sticky;left:0;z-index:2;background:var(--table-default);box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__row>.tedi-table__cell:first-child{position:sticky;left:0;z-index:1;background:var(--table-default);box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell:first-child{background:var(--table-striped)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell:first-child{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell:first-child{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell--picked-up:first-child{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell:first-child{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell:first-child{z-index:3;box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--fixed-layout .tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}.tedi-table__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"] }]
|
|
11801
|
-
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], verticalBorders: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalBorders", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], stickyFirstColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyFirstColumn", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], fixedLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedLayout", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], activeRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRowId", required: false }] }], selectedRowHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRowHighlight", required: false }] }], rowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHover", required: false }] }], enableRowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableRowSelection", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], enableColumnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableColumnFilters", required: false }] }], renderSubComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderSubComponent", required: false }] }], getRowCanExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowCanExpand", required: false }] }], expandTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandTrigger", required: false }] }], expandButtonVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandButtonVariant", required: false }] }], expandButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandButtonLabel", required: false }] }], getSubRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "getSubRows", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], paginationTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationTop", required: false }] }], manualPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualPagination", required: false }] }], manualSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualSorting", required: false }] }], manualFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualFiltering", required: false }] }], pageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageCount", required: false }] }], rowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowCount", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], defaultState: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultState", required: false }] }], persist: [{ type: i0.Input, args: [{ isSignal: true, alias: "persist", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placeholderRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderRole", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], rowAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowAriaLabel", required: false }] }], reorderableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableRows", required: false }] }], reorderableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableColumns", required: false }] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDrop: [{ type: i0.Output, args: ["rowDrop"] }], customResultsTemplateRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TediPaginationResultsDirective), { ...{ read: TemplateRef }, isSignal: true }] }] } });
|
|
11802
|
-
|
|
11803
|
-
/**
|
|
11804
|
-
* Build a `rowSpan` callback that auto-collapses consecutive equal keys.
|
|
11805
|
-
* Returns `N > 1` for the first row in a run and `0` for the covered rows.
|
|
11806
|
-
* Pass the **same** array of rows the table is rendering — typically
|
|
11807
|
-
* `table.getRowModel().rows` — so spans operate on the post-filter / sort /
|
|
11808
|
-
* pagination row set.
|
|
11809
|
-
*/
|
|
11810
|
-
function groupRowSpan(rows, keyFn) {
|
|
11811
|
-
const indexById = new Map();
|
|
11812
|
-
const spans = new Array(rows.length).fill(1);
|
|
11813
|
-
let i = 0;
|
|
11814
|
-
while (i < rows.length) {
|
|
11815
|
-
const groupKey = keyFn(rows[i]);
|
|
11816
|
-
let j = i + 1;
|
|
11817
|
-
while (j < rows.length && keyFn(rows[j]) === groupKey)
|
|
11818
|
-
j++;
|
|
11819
|
-
const groupSize = j - i;
|
|
11820
|
-
spans[i] = groupSize;
|
|
11821
|
-
for (let k = i + 1; k < j; k++)
|
|
11822
|
-
spans[k] = 0;
|
|
11823
|
-
i = j;
|
|
11824
|
-
}
|
|
11825
|
-
rows.forEach((row, index) => indexById.set(row.id, index));
|
|
11826
|
-
return (info) => {
|
|
11827
|
-
const idx = indexById.get(info.row.id);
|
|
11828
|
-
return idx === undefined ? 1 : spans[idx];
|
|
11829
|
-
};
|
|
11830
|
-
}
|
|
12132
|
+
], template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n <div\n [id]=\"liveRegionId\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n class=\"tedi-table__sr-only\"\n ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"top.boundaryCount\"\n [siblingCount]=\"top.siblingCount\"\n [labels]=\"top.labels\"\n [background]=\"top.background\"\n [dividerPosition]=\"top.dividerPosition\"\n [hideResults]=\"top.hideResults\"\n [hidePageSize]=\"top.hidePageSize\"\n [hidePager]=\"top.hidePager\"\n [hideArrows]=\"top.hideArrows\"\n [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n [arrowVariant]=\"top.arrowVariant\"\n [showArrowLabels]=\"top.showArrowLabels\"\n [previousIcon]=\"top.previousIcon\"\n [nextIcon]=\"top.nextIcon\"\n [showModalTitle]=\"top.showModalTitle\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (topResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n\n<div class=\"tedi-table__scroll\" [attr.style]=\"maxHeightStyle()\" cdkScrollable>\n <table\n class=\"tedi-table__table\"\n [attr.id]=\"id() || null\"\n [attr.aria-rowcount]=\"ariaRowCount()\"\n [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n >\n @if (caption(); as cap) {\n <caption class=\"tedi-table__caption\">\n @if (isString(cap)) {\n {{ cap }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n }\n </caption>\n }\n\n <thead class=\"tedi-table__head\">\n @for (\n headerGroup of headerGroups();\n track headerGroup.id;\n let rowIndex = $index\n ) {\n <tr\n class=\"tedi-table__row\"\n [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n cdkDropListAutoScrollDisabled\n (cdkDropListDropped)=\"handleColumnDrop($event)\"\n >\n @for (header of headerGroup.headers; track header.id) {\n @if (shouldRenderHeader(header, rowIndex)) {\n @let meta = getColumnMeta(header.column);\n @let ariaSort = getHeaderAriaSort(header.column);\n @let headerLabel = getHeaderLabel(header.column);\n @let rowSpan = getHeaderRowSpan(header, rowIndex);\n <th\n scope=\"col\"\n cdkDrag\n [cdkDragDisabled]=\"\n !reorderableColumns() ||\n rowIndex > 0 ||\n header.column.id === SELECT_COLUMN_ID ||\n header.column.id === EXPAND_COLUMN_ID\n \"\n cdkDragLockAxis=\"x\"\n (keydown)=\"handleHeaderKeydown($event, header)\"\n [class]=\"\n 'tedi-table__header-cell' +\n (isHeaderGroup(header)\n ? ' tedi-table__header-cell--group'\n : '') +\n (meta?.align\n ? ' tedi-table__cell--align-' + meta?.align\n : '') +\n (meta?.vAlign\n ? ' tedi-table__cell--valign-' + meta?.vAlign\n : '') +\n (pickedUpColumnId() === header.column.id\n ? ' tedi-table__header-cell--picked-up'\n : '') +\n stickyLeftClass(header.column.id)\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n [attr.rowspan]=\"rowSpan\"\n [attr.aria-sort]=\"ariaSort\"\n [attr.aria-label]=\"headerLabel\"\n [style.width.px]=\"headerCellWidth(header.column)\"\n [style.min-width.px]=\"columnMinWidth(header.column)\"\n [style.max-width.px]=\"columnMaxWidth(header.column)\"\n [style.left.px]=\"stickyLeft(header.column.id)\"\n >\n @if (header.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-all'\"\n [name]=\"resolvedId() + '-select-all'\"\n [attr.aria-label]=\"selectAllLabel()\"\n [checked]=\"isAllPageRowsSelected()\"\n [indeterminate]=\"\n isSomePageRowsSelected() && !isAllPageRowsSelected()\n \"\n (change)=\"handleSelectAll($any($event.target).checked)\"\n />\n }\n } @else if (header.column.id === EXPAND_COLUMN_ID) {\n <!-- empty -->\n } @else if (header.column.id === DRAG_COLUMN_ID) {\n <!-- empty -->\n } @else {\n <span class=\"tedi-table__header-content\">\n @if (\n reorderableColumns() &&\n rowIndex === 0 &&\n !isHeaderGroup(header)\n ) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpColumnId() === header.column.id\n \"\n [id]=\"reorderHandleId(header.column.id)\"\n [attr.aria-label]=\"dragColumnLabel()\"\n [attr.aria-pressed]=\"\n reorderableColumns()\n ? pickedUpColumnId() === header.column.id\n : null\n \"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n }\n <ng-container\n *flexRender=\"\n header.column.columnDef.header;\n props: header.getContext();\n let content\n \"\n >\n @if (shouldRenderSortableHeader(header.column, content)) {\n <button\n tedi-table-header-button\n [icon]=\"sortIcon(header.column)\"\n [selected]=\"!!header.column.getIsSorted()\"\n (click)=\"handleSortToggle(header.column)\"\n >\n {{ content }}\n </button>\n } @else if (isString(content) || isNumber(content)) {\n {{ content }}\n } @else {\n {{ content }}\n }\n </ng-container>\n @if (shouldRenderFilterButton(header.column)) {\n <tedi-popover\n #filterPopover\n class=\"tedi-table__filter-popover\"\n position=\"bottom-end\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-popover-trigger\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"handleFilterTriggerClick(header.column)\"\n ></button>\n <tedi-popover-content>\n <div class=\"tedi-table__filter\">\n <div class=\"tedi-table__filter-body\">\n @if (filterTemplateFor(header.column); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl;\n context: filterContextFor(\n header.column,\n filterPopover\n )\n \"\n />\n }\n </div>\n <div class=\"tedi-table__filter-actions\">\n <button\n tedi-button\n variant=\"secondary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterClear(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterClearLabel() }}\n </button>\n <button\n tedi-button\n variant=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterApply(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterApplyLabel() }}\n </button>\n </div>\n </div>\n </tedi-popover-content>\n </tedi-popover>\n }\n </span>\n }\n </th>\n }\n }\n </tr>\n }\n @if (enableColumnFilters()) {\n <tr\n class=\"tedi-table__row tedi-table__row--filter\"\n [attr.aria-rowindex]=\"\n ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n \"\n >\n @for (column of leafColumns(); track column.id) {\n @let filterId = resolvedId() + \"-filter-\" + column.id;\n <th class=\"tedi-table__header-cell\" scope=\"col\">\n @if (column.getCanFilter()) {\n <tedi-form-field size=\"small\">\n <input\n tedi-text-field\n type=\"text\"\n [id]=\"filterId\"\n [name]=\"filterId\"\n [attr.aria-label]=\"filterLabel(column)\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"getFilterValue(column)\"\n (input)=\"\n handleColumnFilter(column, $any($event.target).value)\n \"\n />\n </tedi-form-field>\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody\n class=\"tedi-table__body\"\n cdkDropList\n [cdkDropListDisabled]=\"!reorderableRows()\"\n (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n >\n @if (rows().length === 0) {\n <tr class=\"tedi-table__row\">\n <td\n class=\"tedi-table__cell tedi-table__cell--placeholder\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n @if (placeholder(); as pl) {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n </div>\n } @else {\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n }\n } @else {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n {{ placeholderLabel() }}\n </div>\n } @else {\n {{ placeholderLabel() }}\n }\n }\n </td>\n </tr>\n } @else {\n @for (row of rows(); track row.id) {\n @let isActiveRow =\n activeRowId() !== undefined && row.id === activeRowId();\n @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n @let subRowId = resolvedId() + \"-sub-\" + row.id;\n @let expandsOnClick = rowExpandsOnClick(row);\n <tr\n cdkDrag\n [cdkDragDisabled]=\"!reorderableRows()\"\n cdkDragLockAxis=\"y\"\n [class]=\"\n 'tedi-table__row' +\n (this.selectedRowHighlight() && row.getIsSelected()\n ? ' tedi-table__row--selected'\n : '') +\n (isActiveRow ? ' tedi-table__row--active' : '') +\n (interactive() || expandsOnClick\n ? ' tedi-table__row--clickable'\n : '') +\n (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n (groupStartRowIds().has(row.id)\n ? ' tedi-table__row--group-start'\n : '') +\n (pickedUpRow() === row.original\n ? ' tedi-table__row--picked-up'\n : '')\n \"\n [attr.role]=\"interactive() ? 'button' : null\"\n [attr.tabindex]=\"interactive() ? 0 : null\"\n [attr.aria-label]=\"rowAriaLabelFor(row)\"\n [attr.aria-rowindex]=\"ariaRowIndex\"\n [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n (click)=\"\n (interactive() || expandsOnClick) && handleRowClick($event, row)\n \"\n (keydown)=\"handleRowKeydown($event, row)\"\n (mouseenter)=\"handleRowMouseEnter(row)\"\n (mouseleave)=\"handleRowMouseLeave()\"\n >\n @for (cell of row.getVisibleCells(); track cell.id) {\n @let cellMeta = getColumnMeta(cell.column);\n @let cellContext = cell.getContext();\n @let resolvedSpan = resolveRowSpan(cell, cellContext);\n @if (resolvedSpan !== 0) {\n <td\n [class]=\"\n 'tedi-table__cell' +\n (cellMeta?.align\n ? ' tedi-table__cell--align-' + cellMeta?.align\n : '') +\n (cellMeta?.vAlign\n ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n : '') +\n stickyLeftClass(cell.column.id)\n \"\n [style.left.px]=\"stickyLeft(cell.column.id)\"\n [attr.rowspan]=\"\n resolvedSpan !== null && resolvedSpan > 1\n ? resolvedSpan\n : null\n \"\n >\n @if (cell.column.id === DRAG_COLUMN_ID) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpRow() === row.original\n \"\n [id]=\"rowReorderHandleId(row.id)\"\n [attr.aria-label]=\"dragRowLabel()\"\n [attr.aria-pressed]=\"\n reorderableRows()\n ? pickedUpRow() === row.original\n : null\n \"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleRowReorderKeydown($event, row)\"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n } @else if (cell.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-' + row.id\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"isRowSelected(row)\"\n [disabled]=\"!row.getCanSelect()\"\n [indeterminate]=\"isRowIndeterminate(row)\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-row'\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"row.getIsSelected()\"\n [disabled]=\"!row.getCanSelect()\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n }\n } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n <span\n class=\"tedi-table__expand-toggle\"\n [class.tedi-table__expand-toggle--icon-only]=\"\n !expandButtonHasLabel()\n \"\n >\n @if (row.getCanExpand()) {\n @let expandOpen = row.getIsExpanded();\n <button\n tedi-collapse-button\n [arrowType]=\"resolvedExpandVariant()\"\n [hideText]=\"!expandButtonHasLabel()\"\n [openText]=\"expandButtonOpenText()\"\n [closeText]=\"expandButtonCloseText()\"\n [open]=\"expandOpen\"\n [id]=\"resolvedId() + '-expand-' + row.id\"\n [ariaControls]=\"subRowId\"\n [ariaLabel]=\"\n expandButtonHasLabel()\n ? undefined\n : expandRowLabel(expandOpen)\n \"\n (openChange)=\"handleExpandToggle(row)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleExpandKeydown($event)\"\n ></button>\n }\n </span>\n } @else {\n <ng-container\n *flexRender=\"\n cell.column.columnDef.cell;\n props: cellContext;\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n }\n </tr>\n @if (renderSubComponent(); as subTpl) {\n @if (row.getCanExpand()) {\n @let isExpanded = row.getIsExpanded();\n <tr\n [class]=\"\n 'tedi-table__row tedi-table__row--sub-component' +\n (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n \"\n >\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\n [attr.role]=\"isExpanded ? 'region' : null\"\n [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n [attr.inert]=\"isExpanded ? null : ''\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n <div class=\"tedi-table__sub-component-wrapper\">\n <div class=\"tedi-table__sub-component-content\">\n <div class=\"tedi-table__sub-component-inner\">\n <ng-container\n *ngTemplateOutlet=\"subTpl; context: { $implicit: row }\"\n />\n </div>\n </div>\n </div>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n\n @if (hasFooter()) {\n <tfoot class=\"tedi-table__foot\">\n @for (group of footerGroups(); track group.id) {\n <tr class=\"tedi-table__row\">\n @for (header of group.headers; track header.id) {\n @let footerMeta = getColumnMeta(header.column);\n <td\n [class]=\"\n 'tedi-table__cell tedi-table__cell--footer' +\n (footerMeta?.align\n ? ' tedi-table__cell--align-' + footerMeta?.align\n : '') +\n (footerMeta?.vAlign\n ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n : '')\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n >\n @if (!header.isPlaceholder) {\n <ng-container\n *flexRender=\"\n header.column.columnDef.footer;\n props: header.getContext();\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n </tr>\n }\n </tfoot>\n }\n </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"bottom.boundaryCount\"\n [siblingCount]=\"bottom.siblingCount\"\n [labels]=\"bottom.labels\"\n [background]=\"bottom.background\"\n [dividerPosition]=\"bottom.dividerPosition\"\n [hideResults]=\"bottom.hideResults\"\n [hidePageSize]=\"bottom.hidePageSize\"\n [hidePager]=\"bottom.hidePager\"\n [hideArrows]=\"bottom.hideArrows\"\n [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n [arrowVariant]=\"bottom.arrowVariant\"\n [showArrowLabels]=\"bottom.showArrowLabels\"\n [previousIcon]=\"bottom.previousIcon\"\n [nextIcon]=\"bottom.nextIcon\"\n [showModalTitle]=\"bottom.showModalTitle\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (bottomResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-center .tedi-table__expand-toggle{justify-content:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small .tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small .tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--fixed-layout .tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}.tedi-table__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"] }]
|
|
12133
|
+
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], verticalBorders: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalBorders", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], stickyFirstColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyFirstColumn", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], fixedLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedLayout", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], activeRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRowId", required: false }] }], selectedRowHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRowHighlight", required: false }] }], rowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHover", required: false }] }], enableRowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableRowSelection", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], enableColumnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableColumnFilters", required: false }] }], renderSubComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderSubComponent", required: false }] }], getRowCanExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowCanExpand", required: false }] }], expandTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandTrigger", required: false }] }], expandButtonVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandButtonVariant", required: false }] }], expandButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandButtonLabel", required: false }] }], getSubRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "getSubRows", required: false }] }], groupRowsBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupRowsBy", required: false }] }], rowGroupDividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowGroupDividers", required: false }] }], controlColumnOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlColumnOrder", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], paginationTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationTop", required: false }] }], manualPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualPagination", required: false }] }], manualSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualSorting", required: false }] }], manualFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualFiltering", required: false }] }], pageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageCount", required: false }] }], rowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowCount", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], defaultState: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultState", required: false }] }], persist: [{ type: i0.Input, args: [{ isSignal: true, alias: "persist", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placeholderRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderRole", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], rowAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowAriaLabel", required: false }] }], reorderableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableRows", required: false }] }], reorderableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableColumns", required: false }] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDrop: [{ type: i0.Output, args: ["rowDrop"] }], customResultsTemplateRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TediPaginationResultsDirective), { ...{ read: TemplateRef }, isSignal: true }] }] } });
|
|
11831
12134
|
|
|
11832
12135
|
class TediTableToolbarComponent {
|
|
11833
12136
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TediTableToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -13435,34 +13738,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
13435
13738
|
|
|
13436
13739
|
class HeaderComponent {
|
|
13437
13740
|
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
|
|
13741
|
+
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
13742
|
}
|
|
13440
13743
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
13441
13744
|
type: Component,
|
|
13442
13745
|
args: [{ selector: "header[tedi-header]", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
13443
13746
|
"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
|
|
13747
|
+
}, 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
13748
|
}] });
|
|
13446
13749
|
|
|
13447
13750
|
class HeaderActionsComponent {
|
|
13448
13751
|
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
|
|
13752
|
+
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
13753
|
}
|
|
13451
13754
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderActionsComponent, decorators: [{
|
|
13452
13755
|
type: Component,
|
|
13453
13756
|
args: [{ selector: "tedi-header-actions", standalone: true, template: "<ng-content />", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
13454
13757
|
"class": "tedi-header-actions"
|
|
13455
|
-
}, styles: [".tedi-header-actions{display:flex;align-items:center;height:100
|
|
13758
|
+
}, 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"] }]
|
|
13759
|
+
}] });
|
|
13760
|
+
|
|
13761
|
+
/**
|
|
13762
|
+
* Mobile-only secondary row rendered below the main header bar.
|
|
13763
|
+
*
|
|
13764
|
+
* Typical use: a compact search bar or mobile-specific navigation that only
|
|
13765
|
+
* appears below the `md` breakpoint. Above `md` the component is hidden via
|
|
13766
|
+
* CSS, so consumers can include it unconditionally — desktop users won't see it.
|
|
13767
|
+
*
|
|
13768
|
+
* @example
|
|
13769
|
+
* <header tedi-header>
|
|
13770
|
+
* <!-- main content -->
|
|
13771
|
+
* <tedi-header-bottom>
|
|
13772
|
+
* <tedi-header-search mobileVariant="inline">
|
|
13773
|
+
* <tedi-search inputId="search" placeholder="Search..." />
|
|
13774
|
+
* </tedi-header-search>
|
|
13775
|
+
* </tedi-header-bottom>
|
|
13776
|
+
* </header>
|
|
13777
|
+
*/
|
|
13778
|
+
class HeaderBottomComponent {
|
|
13779
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderBottomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13780
|
+
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 });
|
|
13781
|
+
}
|
|
13782
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderBottomComponent, decorators: [{
|
|
13783
|
+
type: Component,
|
|
13784
|
+
args: [{ selector: "tedi-header-bottom", standalone: true, template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
13785
|
+
"class": "tedi-header-bottom",
|
|
13786
|
+
}, 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
13787
|
}] });
|
|
13457
13788
|
|
|
13458
13789
|
class HeaderContentComponent {
|
|
13790
|
+
/**
|
|
13791
|
+
* Controls the horizontal alignment of the projected content (`justify-content`).
|
|
13792
|
+
* Useful when the center area mixes nav links with another component (e.g. a
|
|
13793
|
+
* `<tedi-header-search>`) and you want to push them apart or align them to one edge.
|
|
13794
|
+
* @default "center"
|
|
13795
|
+
*/
|
|
13796
|
+
alignment = input("center", ...(ngDevMode ? [{ debugName: "alignment" }] : []));
|
|
13797
|
+
classes = computed(() => `tedi-header-content tedi-header-content--${this.alignment()}`, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
13459
13798
|
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: "
|
|
13799
|
+
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
13800
|
}
|
|
13462
13801
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderContentComponent, decorators: [{
|
|
13463
13802
|
type: Component,
|
|
13464
|
-
args: [{ selector:
|
|
13465
|
-
|
|
13803
|
+
args: [{ selector: "tedi-header-content", standalone: true, template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
13804
|
+
"[class]": "classes()",
|
|
13805
|
+
}, 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"] }]
|
|
13806
|
+
}], propDecorators: { alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }] } });
|
|
13466
13807
|
|
|
13467
13808
|
class HeaderLanguageComponent {
|
|
13468
13809
|
/**
|
|
@@ -13484,7 +13825,7 @@ class HeaderLanguageComponent {
|
|
|
13484
13825
|
this.popover()?.hidePopover();
|
|
13485
13826
|
}
|
|
13486
13827
|
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
|
|
13828
|
+
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
13829
|
}
|
|
13489
13830
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderLanguageComponent, decorators: [{
|
|
13490
13831
|
type: Component,
|
|
@@ -13498,43 +13839,266 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
13498
13839
|
TediTranslationPipe,
|
|
13499
13840
|
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
13500
13841
|
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
|
|
13842
|
+
}, 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
13843
|
}], 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
13844
|
|
|
13845
|
+
/**
|
|
13846
|
+
* Compact icon + label button used inside the mobile header row
|
|
13847
|
+
* (`<tedi-header-bottom>` or a mobile-specific section of
|
|
13848
|
+
* `<tedi-header-actions>`).
|
|
13849
|
+
*
|
|
13850
|
+
* Renders as an `<a>` when `href` is provided and `disabled` is false,
|
|
13851
|
+
* otherwise as a `<button>` — mirroring the React `HeaderMobileButton`.
|
|
13852
|
+
*
|
|
13853
|
+
* @example
|
|
13854
|
+
* <tedi-header-mobile-button icon="menu" label="Menu" />
|
|
13855
|
+
* <tedi-header-mobile-button icon="search" label="Search" href="/search" />
|
|
13856
|
+
* <tedi-header-mobile-button icon="notifications" label="Alerts" [selected]="true" />
|
|
13857
|
+
*/
|
|
13858
|
+
class HeaderMobileButtonComponent {
|
|
13859
|
+
/** Material icon name displayed inside the button. */
|
|
13860
|
+
icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
13861
|
+
/** Label text displayed below the icon. */
|
|
13862
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
13863
|
+
/**
|
|
13864
|
+
* If provided (and not disabled), the button renders as an `<a>`
|
|
13865
|
+
* navigating to this URL. Otherwise renders as a `<button>`.
|
|
13866
|
+
*/
|
|
13867
|
+
href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
|
|
13868
|
+
/** Whether the button is in a selected state. */
|
|
13869
|
+
selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
|
|
13870
|
+
/** Whether the button is disabled. */
|
|
13871
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
13872
|
+
/**
|
|
13873
|
+
* Accessible name override forwarded to the inner `<button>`/`<a>`.
|
|
13874
|
+
* Useful when the visible label needs to be augmented for screen readers
|
|
13875
|
+
* (e.g. when the button only renders an icon).
|
|
13876
|
+
*/
|
|
13877
|
+
ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
13878
|
+
/**
|
|
13879
|
+
* Forwarded to the inner `<button>` as `aria-haspopup`. Set to `'dialog'`
|
|
13880
|
+
* when the button opens a modal dialog, `'menu'` for menus, etc.
|
|
13881
|
+
*
|
|
13882
|
+
* Only applied when the component renders as a `<button>` (i.e. when
|
|
13883
|
+
* `href` is not set). A real navigation link with popup-trigger semantics
|
|
13884
|
+
* is confusing to assistive tech — if a popup is involved, omit `href`
|
|
13885
|
+
* so the component renders as a button.
|
|
13886
|
+
*/
|
|
13887
|
+
ariaHasPopup = input(...(ngDevMode ? [undefined, { debugName: "ariaHasPopup" }] : []));
|
|
13888
|
+
/**
|
|
13889
|
+
* Forwarded to the inner `<button>` as `aria-expanded`. Pair with
|
|
13890
|
+
* `ariaHasPopup` when this button toggles a dialog/menu open.
|
|
13891
|
+
*
|
|
13892
|
+
* Only applied when the component renders as a `<button>` (i.e. when
|
|
13893
|
+
* `href` is not set).
|
|
13894
|
+
*/
|
|
13895
|
+
ariaExpanded = input(...(ngDevMode ? [undefined, { debugName: "ariaExpanded" }] : []));
|
|
13896
|
+
// Render as `<a>` only when href is set AND not disabled — mirrors React's
|
|
13897
|
+
// `if (disabled || !href) { <Button> } else { <Link> }`.
|
|
13898
|
+
renderAsLink = computed(() => !!this.href() && !this.disabled(), ...(ngDevMode ? [{ debugName: "renderAsLink" }] : []));
|
|
13899
|
+
classes = computed(() => {
|
|
13900
|
+
const list = ["tedi-header-mobile-button"];
|
|
13901
|
+
if (this.selected()) {
|
|
13902
|
+
list.push("tedi-header-mobile-button--selected");
|
|
13903
|
+
}
|
|
13904
|
+
if (this.disabled()) {
|
|
13905
|
+
list.push("tedi-header-mobile-button--disabled");
|
|
13906
|
+
}
|
|
13907
|
+
return list.join(" ");
|
|
13908
|
+
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
13909
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderMobileButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13910
|
+
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 });
|
|
13911
|
+
}
|
|
13912
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderMobileButtonComponent, decorators: [{
|
|
13913
|
+
type: Component,
|
|
13914
|
+
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"] }]
|
|
13915
|
+
}], 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 }] }] } });
|
|
13916
|
+
|
|
13504
13917
|
class HeaderLoginComponent {
|
|
13505
13918
|
breakpointService = inject(BreakpointService);
|
|
13506
13919
|
translationService = inject(TediTranslationService);
|
|
13507
|
-
isMobile = this.breakpointService.isBelowBreakpoint("
|
|
13508
|
-
|
|
13509
|
-
|
|
13510
|
-
|
|
13920
|
+
isMobile = this.breakpointService.isBelowBreakpoint("md");
|
|
13921
|
+
/**
|
|
13922
|
+
* Visual size of the login button.
|
|
13923
|
+
* - `'small'` renders a compact icon-and-caption button (the
|
|
13924
|
+
* `<tedi-header-mobile-button>` variant).
|
|
13925
|
+
* - `'default'` renders a primary button or anchor with text only.
|
|
13926
|
+
*
|
|
13927
|
+
* When left unset, the size is chosen automatically based on the viewport:
|
|
13928
|
+
* `'small'` below the `md` breakpoint, `'default'` from `md` up. Pass an
|
|
13929
|
+
* explicit value to force a variant regardless of viewport.
|
|
13930
|
+
*/
|
|
13931
|
+
size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
|
|
13932
|
+
/**
|
|
13933
|
+
* Custom label text for the login button. When provided, used as-is — not
|
|
13934
|
+
* translated. When omitted or empty, falls back to the `header.login.mobile`
|
|
13935
|
+
* translation key for the compact variant and `header.login` for the full
|
|
13936
|
+
* variant.
|
|
13937
|
+
*/
|
|
13938
|
+
label = input("", ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
13939
|
+
/**
|
|
13940
|
+
* If provided, the login button renders as an `<a>` navigating to this URL.
|
|
13941
|
+
* Otherwise renders as a `<button>`.
|
|
13942
|
+
*/
|
|
13943
|
+
href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
|
|
13944
|
+
xs = input(...(ngDevMode ? [undefined, { debugName: "xs" }] : []));
|
|
13945
|
+
sm = input(...(ngDevMode ? [undefined, { debugName: "sm" }] : []));
|
|
13946
|
+
md = input(...(ngDevMode ? [undefined, { debugName: "md" }] : []));
|
|
13947
|
+
lg = input(...(ngDevMode ? [undefined, { debugName: "lg" }] : []));
|
|
13948
|
+
xl = input(...(ngDevMode ? [undefined, { debugName: "xl" }] : []));
|
|
13949
|
+
xxl = input(...(ngDevMode ? [undefined, { debugName: "xxl" }] : []));
|
|
13950
|
+
breakpointInputs = computed(() => this.breakpointService.getBreakpointInputs({
|
|
13951
|
+
size: this.size(),
|
|
13952
|
+
label: this.label(),
|
|
13953
|
+
xs: this.xs(),
|
|
13954
|
+
sm: this.sm(),
|
|
13955
|
+
md: this.md(),
|
|
13956
|
+
lg: this.lg(),
|
|
13957
|
+
xl: this.xl(),
|
|
13958
|
+
xxl: this.xxl(),
|
|
13959
|
+
}), ...(ngDevMode ? [{ debugName: "breakpointInputs" }] : []));
|
|
13960
|
+
isSmall = computed(() => {
|
|
13961
|
+
const size = this.breakpointInputs().size ?? (this.isMobile() ? "small" : "default");
|
|
13962
|
+
return size === "small";
|
|
13963
|
+
}, ...(ngDevMode ? [{ debugName: "isSmall" }] : []));
|
|
13964
|
+
resolvedLabel = computed(() => {
|
|
13965
|
+
const { label } = this.breakpointInputs();
|
|
13966
|
+
if (label) {
|
|
13967
|
+
return label;
|
|
13968
|
+
}
|
|
13969
|
+
return this.translationService.translate(this.isSmall() ? "header.login.mobile" : "header.login");
|
|
13970
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : []));
|
|
13511
13971
|
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: "
|
|
13972
|
+
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
13973
|
}
|
|
13514
13974
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderLoginComponent, decorators: [{
|
|
13515
13975
|
type: Component,
|
|
13516
|
-
args: [{ selector:
|
|
13976
|
+
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"] }]
|
|
13977
|
+
}], 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 }] }] } });
|
|
13978
|
+
|
|
13979
|
+
/**
|
|
13980
|
+
* Marks a projected child of `<tedi-header-logo>` as the dark-theme variant.
|
|
13981
|
+
* `HeaderLogoComponent` detects it via `contentChild` and swaps to the dark
|
|
13982
|
+
* slot when the active theme is `dark`.
|
|
13983
|
+
*/
|
|
13984
|
+
class HeaderLogoDarkDirective {
|
|
13985
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderLogoDarkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
13986
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.24", type: HeaderLogoDarkDirective, isStandalone: true, selector: "[tedi-header-logo-dark]", ngImport: i0 });
|
|
13987
|
+
}
|
|
13988
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderLogoDarkDirective, decorators: [{
|
|
13989
|
+
type: Directive,
|
|
13990
|
+
args: [{
|
|
13991
|
+
selector: "[tedi-header-logo-dark]",
|
|
13992
|
+
standalone: true,
|
|
13993
|
+
}]
|
|
13517
13994
|
}] });
|
|
13518
13995
|
|
|
13519
|
-
class
|
|
13520
|
-
|
|
13521
|
-
|
|
13996
|
+
class HeaderLogoComponent {
|
|
13997
|
+
/**
|
|
13998
|
+
* Optional link URL. When set, the logo is wrapped in an anchor element.
|
|
13999
|
+
*/
|
|
14000
|
+
href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
|
|
14001
|
+
/**
|
|
14002
|
+
* Controls visibility of the logo. Useful for conditionally hiding the logo
|
|
14003
|
+
* based on application state, feature flags, or custom media queries that
|
|
14004
|
+
* fall between standard breakpoints (e.g. 360px). For responsive hiding at
|
|
14005
|
+
* standard breakpoints, prefer wrapping `<tedi-header-logo>` with `*hideAt`
|
|
14006
|
+
* or `*showAt`.
|
|
14007
|
+
* @default true
|
|
14008
|
+
*/
|
|
14009
|
+
showLogo = input(true, ...(ngDevMode ? [{ debugName: "showLogo" }] : []));
|
|
14010
|
+
darkSlot = contentChild(HeaderLogoDarkDirective, ...(ngDevMode ? [{ debugName: "darkSlot" }] : []));
|
|
14011
|
+
themeService = inject(ThemeService);
|
|
14012
|
+
useDark = computed(() => this.themeService.theme() === "dark" && !!this.darkSlot(), ...(ngDevMode ? [{ debugName: "useDark" }] : []));
|
|
13522
14013
|
classes = computed(() => {
|
|
13523
|
-
const
|
|
13524
|
-
if (this.
|
|
13525
|
-
|
|
13526
|
-
|
|
13527
|
-
|
|
14014
|
+
const list = ["tedi-header-logo"];
|
|
14015
|
+
if (this.useDark())
|
|
14016
|
+
list.push("tedi-header-logo--dark");
|
|
14017
|
+
if (!this.showLogo())
|
|
14018
|
+
list.push("tedi-header-logo--hidden");
|
|
14019
|
+
return list.join(" ");
|
|
13528
14020
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
14021
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14022
|
+
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 });
|
|
14023
|
+
}
|
|
14024
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderLogoComponent, decorators: [{
|
|
14025
|
+
type: Component,
|
|
14026
|
+
args: [{ selector: "tedi-header-logo", standalone: true, imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
14027
|
+
"[class]": "classes()",
|
|
14028
|
+
}, 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"] }]
|
|
14029
|
+
}], 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 }] }] } });
|
|
14030
|
+
|
|
14031
|
+
class HeaderLogoutComponent {
|
|
14032
|
+
translationService = inject(TediTranslationService);
|
|
14033
|
+
breakpointService = inject(BreakpointService);
|
|
14034
|
+
isMobile = this.breakpointService.isBelowBreakpoint("md");
|
|
14035
|
+
/**
|
|
14036
|
+
* Visual size of the logout button.
|
|
14037
|
+
* - `'small'` renders a compact icon-and-caption button (the
|
|
14038
|
+
* `<tedi-header-mobile-button>` variant).
|
|
14039
|
+
* - `'default'` renders a full-width link with inline icon and text.
|
|
14040
|
+
*
|
|
14041
|
+
* When left unset (the default), the size is chosen automatically based on
|
|
14042
|
+
* the viewport: `'small'` below the `md` breakpoint, `'default'` from `md`
|
|
14043
|
+
* up. Pass an explicit value to force a variant regardless of viewport —
|
|
14044
|
+
* useful inside tight containers (sidebar panel, dropdown) where the
|
|
14045
|
+
* desktop layout has no room.
|
|
14046
|
+
*/
|
|
14047
|
+
size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
|
|
14048
|
+
/**
|
|
14049
|
+
* Custom label text for the logout button. When provided, used as-is — not
|
|
14050
|
+
* translated. When omitted or empty, falls back to the `header.logout.mobile`
|
|
14051
|
+
* translation key for the compact variant and `header.logout` for the full
|
|
14052
|
+
* variant.
|
|
14053
|
+
*/
|
|
14054
|
+
label = input("", ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
14055
|
+
/**
|
|
14056
|
+
* If provided, the logout button renders as an `<a>` navigating to this URL.
|
|
14057
|
+
* Otherwise renders as a `<button>`.
|
|
14058
|
+
*/
|
|
14059
|
+
href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
|
|
14060
|
+
xs = input(...(ngDevMode ? [undefined, { debugName: "xs" }] : []));
|
|
14061
|
+
sm = input(...(ngDevMode ? [undefined, { debugName: "sm" }] : []));
|
|
14062
|
+
md = input(...(ngDevMode ? [undefined, { debugName: "md" }] : []));
|
|
14063
|
+
lg = input(...(ngDevMode ? [undefined, { debugName: "lg" }] : []));
|
|
14064
|
+
xl = input(...(ngDevMode ? [undefined, { debugName: "xl" }] : []));
|
|
14065
|
+
xxl = input(...(ngDevMode ? [undefined, { debugName: "xxl" }] : []));
|
|
14066
|
+
breakpointInputs = computed(() => this.breakpointService.getBreakpointInputs({
|
|
14067
|
+
size: this.size(),
|
|
14068
|
+
label: this.label(),
|
|
14069
|
+
xs: this.xs(),
|
|
14070
|
+
sm: this.sm(),
|
|
14071
|
+
md: this.md(),
|
|
14072
|
+
lg: this.lg(),
|
|
14073
|
+
xl: this.xl(),
|
|
14074
|
+
xxl: this.xxl(),
|
|
14075
|
+
}), ...(ngDevMode ? [{ debugName: "breakpointInputs" }] : []));
|
|
14076
|
+
isSmall = computed(() => {
|
|
14077
|
+
const size = this.breakpointInputs().size ??
|
|
14078
|
+
(this.isMobile() ? "small" : "default");
|
|
14079
|
+
return size === "small";
|
|
14080
|
+
}, ...(ngDevMode ? [{ debugName: "isSmall" }] : []));
|
|
14081
|
+
resolvedLabel = computed(() => {
|
|
14082
|
+
const { label } = this.breakpointInputs();
|
|
14083
|
+
if (label) {
|
|
14084
|
+
return label;
|
|
14085
|
+
}
|
|
14086
|
+
return this.translationService.translate(this.isSmall() ? "header.logout.mobile" : "header.logout");
|
|
14087
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : []));
|
|
13529
14088
|
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: "
|
|
14089
|
+
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
14090
|
}
|
|
13532
14091
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderLogoutComponent, decorators: [{
|
|
13533
14092
|
type: Component,
|
|
13534
|
-
args: [{ selector:
|
|
13535
|
-
|
|
13536
|
-
|
|
13537
|
-
|
|
14093
|
+
args: [{ selector: "tedi-header-logout", standalone: true, imports: [
|
|
14094
|
+
IconComponent,
|
|
14095
|
+
TextComponent,
|
|
14096
|
+
LinkComponent,
|
|
14097
|
+
HeaderMobileButtonComponent,
|
|
14098
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
14099
|
+
class: "tedi-header-logout",
|
|
14100
|
+
}, 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"] }]
|
|
14101
|
+
}], 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
14102
|
|
|
13539
14103
|
class ShowAtDirective {
|
|
13540
14104
|
showAt = input.required(...(ngDevMode ? [{ debugName: "showAt" }] : []));
|
|
@@ -13617,58 +14181,134 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
13617
14181
|
}], ctorParameters: () => [], propDecorators: { hideAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideAt", required: true }] }] } });
|
|
13618
14182
|
|
|
13619
14183
|
class HeaderProfileComponent {
|
|
13620
|
-
/**
|
|
13621
|
-
|
|
13622
|
-
|
|
13623
|
-
|
|
14184
|
+
/**
|
|
14185
|
+
* Custom label text for the profile button. Falls back to the `header.profile`
|
|
14186
|
+
* translation key on desktop, or `header.profile.mobile` on mobile.
|
|
14187
|
+
*/
|
|
14188
|
+
label = input("", ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
14189
|
+
/**
|
|
14190
|
+
* Whether to display a text label next to the profile icon on non-mobile
|
|
14191
|
+
* viewports. When `false` the desktop trigger renders as an icon-only button
|
|
14192
|
+
* and the label (custom or translated) is used as the `aria-label` only.
|
|
14193
|
+
* When `true` the label is visible and a chevron is shown next to it.
|
|
14194
|
+
*
|
|
14195
|
+
* Has no effect on the mobile/small variant — the mobile button always
|
|
14196
|
+
* shows its label.
|
|
14197
|
+
* @default false
|
|
14198
|
+
*/
|
|
14199
|
+
showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : []));
|
|
14200
|
+
/**
|
|
14201
|
+
* Defines the breakpoint from which the profile menu is displayed as a popover.
|
|
14202
|
+
* Below this breakpoint, it is rendered as a modal.
|
|
14203
|
+
*
|
|
14204
|
+
* @default 'lg'
|
|
14205
|
+
*/
|
|
14206
|
+
showPopover = input("lg", ...(ngDevMode ? [{ debugName: "showPopover" }] : []));
|
|
14207
|
+
/**
|
|
14208
|
+
* Removes default item styles from the mobile modal content. When `true`,
|
|
14209
|
+
* projected children render without the padding, border, or background that
|
|
14210
|
+
* `<tedi-header-profile>` normally applies to each direct child of the
|
|
14211
|
+
* modal. Use when the content requires custom item styling.
|
|
14212
|
+
*
|
|
14213
|
+
* Only affects the mobile/modal branch. The desktop popover uses
|
|
14214
|
+
* `<tedi-popover-content>`'s own styling and is unaffected.
|
|
14215
|
+
*
|
|
14216
|
+
* @default false
|
|
14217
|
+
*/
|
|
14218
|
+
noStyle = input(false, ...(ngDevMode ? [{ debugName: "noStyle" }] : []));
|
|
14219
|
+
/**
|
|
14220
|
+
* Visual size of the profile button.
|
|
14221
|
+
* - `'small'` renders a compact icon-and-caption button (the
|
|
14222
|
+
* `<tedi-header-mobile-button>` variant).
|
|
14223
|
+
* - `'default'` renders a button with the user's name + icon.
|
|
14224
|
+
*
|
|
14225
|
+
* When left unset, the size is chosen automatically based on the viewport:
|
|
14226
|
+
* `'small'` below the `md` breakpoint, `'default'` from `md` up. Pass an
|
|
14227
|
+
* explicit value to force a variant regardless of viewport.
|
|
14228
|
+
*/
|
|
14229
|
+
size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
|
|
14230
|
+
xs = input(...(ngDevMode ? [undefined, { debugName: "xs" }] : []));
|
|
14231
|
+
sm = input(...(ngDevMode ? [undefined, { debugName: "sm" }] : []));
|
|
14232
|
+
md = input(...(ngDevMode ? [undefined, { debugName: "md" }] : []));
|
|
14233
|
+
lg = input(...(ngDevMode ? [undefined, { debugName: "lg" }] : []));
|
|
14234
|
+
xl = input(...(ngDevMode ? [undefined, { debugName: "xl" }] : []));
|
|
14235
|
+
xxl = input(...(ngDevMode ? [undefined, { debugName: "xxl" }] : []));
|
|
13624
14236
|
breakpointService = inject(BreakpointService);
|
|
13625
14237
|
translationService = inject(TediTranslationService);
|
|
13626
14238
|
document = inject(DOCUMENT);
|
|
13627
14239
|
host = inject(ElementRef);
|
|
13628
14240
|
renderer = inject(Renderer2);
|
|
13629
|
-
|
|
14241
|
+
destroyRef = inject(DestroyRef);
|
|
14242
|
+
isMobile = computed(() => this.breakpointService.isBelowBreakpoint("md")(), ...(ngDevMode ? [{ debugName: "isMobile" }] : []));
|
|
14243
|
+
isSmall = computed(() => {
|
|
14244
|
+
const size = this.size() ?? (this.isMobile() ? "small" : "default");
|
|
14245
|
+
return size === "small";
|
|
14246
|
+
}, ...(ngDevMode ? [{ debugName: "isSmall" }] : []));
|
|
14247
|
+
breakpointInputs = computed(() => {
|
|
14248
|
+
return this.breakpointService.getBreakpointInputs({
|
|
14249
|
+
label: this.label(),
|
|
14250
|
+
showPopover: this.showPopover(),
|
|
14251
|
+
xs: this.xs(),
|
|
14252
|
+
sm: this.sm(),
|
|
14253
|
+
md: this.md(),
|
|
14254
|
+
lg: this.lg(),
|
|
14255
|
+
xl: this.xl(),
|
|
14256
|
+
xxl: this.xxl(),
|
|
14257
|
+
});
|
|
14258
|
+
}, ...(ngDevMode ? [{ debugName: "breakpointInputs" }] : []));
|
|
14259
|
+
resolvedLabel = computed(() => {
|
|
14260
|
+
const { label } = this.breakpointInputs();
|
|
14261
|
+
if (label) {
|
|
14262
|
+
return label;
|
|
14263
|
+
}
|
|
14264
|
+
return this.translationService.translate(this.isMobile() ? "header.profile.mobile" : "header.profile");
|
|
14265
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : []));
|
|
13630
14266
|
constructor() {
|
|
13631
|
-
effect(() => {
|
|
14267
|
+
effect((onCleanup) => {
|
|
13632
14268
|
if (this.modalOpen()) {
|
|
13633
14269
|
this.renderer.setStyle(this.document.body, "overflow", "hidden");
|
|
13634
14270
|
}
|
|
13635
14271
|
else {
|
|
13636
14272
|
this.renderer.removeStyle(this.document.body, "overflow");
|
|
13637
14273
|
}
|
|
14274
|
+
onCleanup(() => {
|
|
14275
|
+
this.renderer.removeStyle(this.document.body, "overflow");
|
|
14276
|
+
});
|
|
13638
14277
|
});
|
|
13639
14278
|
}
|
|
13640
14279
|
modalOpen = signal(false, ...(ngDevMode ? [{ debugName: "modalOpen" }] : []));
|
|
14280
|
+
/**
|
|
14281
|
+
* Tracks which `HeaderRoleComponent` instance currently has its
|
|
14282
|
+
* accordion open. When a role opens, it writes its own reference here;
|
|
14283
|
+
* other roles watch this signal and close themselves when it changes.
|
|
14284
|
+
* @internal
|
|
14285
|
+
*/
|
|
14286
|
+
activeRole = signal(null, ...(ngDevMode ? [{ debugName: "activeRole" }] : []));
|
|
13641
14287
|
buttonVariant = computed(() => {
|
|
13642
|
-
if (this.
|
|
14288
|
+
if (this.isSmall() || !this.showLabel()) {
|
|
13643
14289
|
return "neutral";
|
|
13644
14290
|
}
|
|
13645
14291
|
return "secondary";
|
|
13646
14292
|
}, ...(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
14293
|
ngAfterContentInit() {
|
|
13654
14294
|
const element = this.host.nativeElement;
|
|
13655
|
-
this.
|
|
14295
|
+
const cleanup = this.renderer.listen("document", "click", (event) => {
|
|
13656
14296
|
const target = event.target;
|
|
13657
14297
|
const clickedInside = element.contains(target);
|
|
13658
14298
|
if (this.modalOpen() && !clickedInside) {
|
|
13659
14299
|
this.modalOpen.set(false);
|
|
13660
14300
|
}
|
|
13661
|
-
})
|
|
14301
|
+
});
|
|
14302
|
+
this.destroyRef.onDestroy(cleanup);
|
|
13662
14303
|
}
|
|
13663
14304
|
handleModalOpen() {
|
|
13664
|
-
const
|
|
13665
|
-
if (!(
|
|
13666
|
-
this.breakpointService.isAboveBreakpoint(dropdownBreakpoint)())) {
|
|
14305
|
+
const { showPopover } = this.breakpointInputs();
|
|
14306
|
+
if (!this.breakpointService.isAboveBreakpoint(showPopover)()) {
|
|
13667
14307
|
this.modalOpen.update((prev) => !prev);
|
|
13668
14308
|
}
|
|
13669
14309
|
}
|
|
13670
14310
|
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: {
|
|
14311
|
+
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
14312
|
}
|
|
13673
14313
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderProfileComponent, decorators: [{
|
|
13674
14314
|
type: Component,
|
|
@@ -13681,33 +14321,219 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
13681
14321
|
ShowAtDirective,
|
|
13682
14322
|
HideAtDirective,
|
|
13683
14323
|
NgTemplateOutlet,
|
|
13684
|
-
|
|
13685
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "
|
|
13686
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
14324
|
+
HeaderMobileButtonComponent,
|
|
14325
|
+
], 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"] }]
|
|
14326
|
+
}], 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 }] }] } });
|
|
14327
|
+
|
|
14328
|
+
/**
|
|
14329
|
+
* Marker directive applied to a projected child of `<tedi-header-role>` to mark it
|
|
14330
|
+
* as the title content (e.g. a `<tedi-tag>`). The directive itself adds no DOM or
|
|
14331
|
+
* behavior — it only exists so `HeaderRoleComponent` can detect, via `contentChild`,
|
|
14332
|
+
* whether a consumer has projected title content. When projected, the title slot
|
|
14333
|
+
* replaces the bold `role` string fallback.
|
|
14334
|
+
*
|
|
14335
|
+
* @example
|
|
14336
|
+
* <tedi-header-role [representatives]="..." [currentRepresentative]="...">
|
|
14337
|
+
* <tedi-tag tedi-header-role-title>Esindatav</tedi-tag>
|
|
14338
|
+
* </tedi-header-role>
|
|
14339
|
+
*/
|
|
14340
|
+
class HeaderRoleTitleDirective {
|
|
14341
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderRoleTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
14342
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.24", type: HeaderRoleTitleDirective, isStandalone: true, selector: "[tedi-header-role-title]", ngImport: i0 });
|
|
14343
|
+
}
|
|
14344
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderRoleTitleDirective, decorators: [{
|
|
14345
|
+
type: Directive,
|
|
14346
|
+
args: [{
|
|
14347
|
+
selector: "[tedi-header-role-title]",
|
|
14348
|
+
standalone: true,
|
|
14349
|
+
}]
|
|
14350
|
+
}] });
|
|
13687
14351
|
|
|
14352
|
+
/**
|
|
14353
|
+
* Structural marker for custom content projected into the role selection
|
|
14354
|
+
* popover (desktop) or accordion (tablet/mobile).
|
|
14355
|
+
*
|
|
14356
|
+
* When present, replaces the default representative list entirely.
|
|
14357
|
+
*
|
|
14358
|
+
* Usage:
|
|
14359
|
+
* ```html
|
|
14360
|
+
* <tedi-header-role ...>
|
|
14361
|
+
* <ng-template tedi-header-role-content>
|
|
14362
|
+
* <div>Custom content here</div>
|
|
14363
|
+
* </ng-template>
|
|
14364
|
+
* </tedi-header-role>
|
|
14365
|
+
* ```
|
|
14366
|
+
*/
|
|
14367
|
+
class HeaderRoleContentDirective {
|
|
14368
|
+
templateRef = inject(TemplateRef);
|
|
14369
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderRoleContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
14370
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.24", type: HeaderRoleContentDirective, isStandalone: true, selector: "[tedi-header-role-content]", ngImport: i0 });
|
|
14371
|
+
}
|
|
14372
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderRoleContentDirective, decorators: [{
|
|
14373
|
+
type: Directive,
|
|
14374
|
+
args: [{
|
|
14375
|
+
selector: "[tedi-header-role-content]",
|
|
14376
|
+
standalone: true,
|
|
14377
|
+
}]
|
|
14378
|
+
}] });
|
|
14379
|
+
/**
|
|
14380
|
+
* Structural marker for custom "no results" content shown when the search
|
|
14381
|
+
* filter produces an empty representative list.
|
|
14382
|
+
*
|
|
14383
|
+
* When absent, the component falls back to a default translated string.
|
|
14384
|
+
*
|
|
14385
|
+
* Usage:
|
|
14386
|
+
* ```html
|
|
14387
|
+
* <tedi-header-role ...>
|
|
14388
|
+
* <ng-template tedi-header-role-no-results>
|
|
14389
|
+
* <tedi-empty-state description="No matches found" />
|
|
14390
|
+
* </ng-template>
|
|
14391
|
+
* </tedi-header-role>
|
|
14392
|
+
* ```
|
|
14393
|
+
*/
|
|
14394
|
+
class HeaderRoleNoResultsDirective {
|
|
14395
|
+
templateRef = inject(TemplateRef);
|
|
14396
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderRoleNoResultsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
14397
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.24", type: HeaderRoleNoResultsDirective, isStandalone: true, selector: "[tedi-header-role-no-results]", ngImport: i0 });
|
|
14398
|
+
}
|
|
14399
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderRoleNoResultsDirective, decorators: [{
|
|
14400
|
+
type: Directive,
|
|
14401
|
+
args: [{
|
|
14402
|
+
selector: "[tedi-header-role-no-results]",
|
|
14403
|
+
standalone: true,
|
|
14404
|
+
}]
|
|
14405
|
+
}] });
|
|
14406
|
+
let nextHeaderRoleInputId = 0;
|
|
13688
14407
|
class HeaderRoleComponent {
|
|
13689
14408
|
/**
|
|
13690
|
-
*
|
|
14409
|
+
* Label text. Rendered as bold text in the title position when no title content is
|
|
14410
|
+
* projected via `[tedi-header-role-title]`. Projected content takes precedence and
|
|
14411
|
+
* replaces this string.
|
|
13691
14412
|
*/
|
|
13692
|
-
|
|
14413
|
+
label = input("", ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
13693
14414
|
/**
|
|
13694
14415
|
* Description text
|
|
13695
14416
|
*/
|
|
13696
14417
|
description = input("", ...(ngDevMode ? [{ debugName: "description" }] : []));
|
|
13697
|
-
/**
|
|
14418
|
+
/**
|
|
14419
|
+
* Whether the consumer projected title content (e.g. `<tedi-tag tedi-header-role-title>`)
|
|
14420
|
+
* via the `[tedi-header-role-title]` slot. Used by the template to know whether the
|
|
14421
|
+
* title position has content even when `label` is empty.
|
|
14422
|
+
*/
|
|
14423
|
+
titleContent = contentChild(HeaderRoleTitleDirective, ...(ngDevMode ? [{ debugName: "titleContent" }] : []));
|
|
14424
|
+
hasTitle = computed(() => !!this.titleContent(), ...(ngDevMode ? [{ debugName: "hasTitle" }] : []));
|
|
14425
|
+
/**
|
|
14426
|
+
* Projected custom content that replaces the default representative list.
|
|
14427
|
+
*/
|
|
14428
|
+
customContent = contentChild(HeaderRoleContentDirective, ...(ngDevMode ? [{ debugName: "customContent" }] : []));
|
|
14429
|
+
hasCustomContent = computed(() => !!this.customContent(), ...(ngDevMode ? [{ debugName: "hasCustomContent" }] : []));
|
|
14430
|
+
customContentTemplate = computed(() => this.customContent()?.templateRef ?? null, ...(ngDevMode ? [{ debugName: "customContentTemplate" }] : []));
|
|
14431
|
+
noResultsContent = contentChild(HeaderRoleNoResultsDirective, ...(ngDevMode ? [{ debugName: "noResultsContent" }] : []));
|
|
14432
|
+
hasNoResultsContent = computed(() => !!this.noResultsContent(), ...(ngDevMode ? [{ debugName: "hasNoResultsContent" }] : []));
|
|
14433
|
+
noResultsTemplate = computed(() => this.noResultsContent()?.templateRef ?? null, ...(ngDevMode ? [{ debugName: "noResultsTemplate" }] : []));
|
|
14434
|
+
/**
|
|
14435
|
+
* Whether to display the search input above the representative list.
|
|
14436
|
+
* @default false
|
|
14437
|
+
*/
|
|
14438
|
+
showSearch = input(false, ...(ngDevMode ? [{ debugName: "showSearch" }] : []));
|
|
14439
|
+
/**
|
|
14440
|
+
* Whether the search input shows a clear button.
|
|
13698
14441
|
* @default false
|
|
13699
14442
|
*/
|
|
13700
|
-
|
|
14443
|
+
searchClearable = input(false, ...(ngDevMode ? [{ debugName: "searchClearable" }] : []));
|
|
14444
|
+
/**
|
|
14445
|
+
* Whether to clear the search input when a representative is selected.
|
|
14446
|
+
* @default true
|
|
14447
|
+
*/
|
|
14448
|
+
clearSearchOnSelect = input(true, ...(ngDevMode ? [{ debugName: "clearSearchOnSelect" }] : []));
|
|
14449
|
+
/**
|
|
14450
|
+
* Whether the role represents an organization.
|
|
14451
|
+
* Affects the search input label.
|
|
14452
|
+
*/
|
|
14453
|
+
isOrganization = input(false, ...(ngDevMode ? [{ debugName: "isOrganization" }] : []));
|
|
14454
|
+
/**
|
|
14455
|
+
* Label for the search input when selecting a representative.
|
|
14456
|
+
* Falls back to i18n labels when not provided.
|
|
14457
|
+
*/
|
|
14458
|
+
searchLabel = input(undefined, ...(ngDevMode ? [{ debugName: "searchLabel" }] : []));
|
|
14459
|
+
/**
|
|
14460
|
+
* Label for the search input when selecting an organization representative.
|
|
14461
|
+
* Overrides both the default and `searchLabel` when `isOrganization` is true.
|
|
14462
|
+
*/
|
|
14463
|
+
organizationSearchLabel = input(undefined, ...(ngDevMode ? [{ debugName: "organizationSearchLabel" }] : []));
|
|
14464
|
+
/**
|
|
14465
|
+
* Whether to show the role selection toggle and dropdown.
|
|
14466
|
+
* When not set, defaults to showing the selection when there are multiple representatives.
|
|
14467
|
+
*/
|
|
14468
|
+
showRoleSwitch = input(undefined, ...(ngDevMode ? [{ debugName: "showRoleSwitch" }] : []));
|
|
13701
14469
|
/** List of representatives */
|
|
13702
14470
|
representatives = input.required(...(ngDevMode ? [{ debugName: "representatives" }] : []));
|
|
13703
14471
|
/** Current representative */
|
|
13704
14472
|
currentRepresentative = model.required(...(ngDevMode ? [{ debugName: "currentRepresentative" }] : []));
|
|
14473
|
+
/**
|
|
14474
|
+
* Emits when the role selection (mobile collapse on tablet/mobile, popover on
|
|
14475
|
+
* desktop) opens or closes.
|
|
14476
|
+
*/
|
|
14477
|
+
roleSelectionToggle = output();
|
|
13705
14478
|
mobileOpen = signal(false, ...(ngDevMode ? [{ debugName: "mobileOpen" }] : []));
|
|
13706
14479
|
inputValue = signal("", ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
|
|
14480
|
+
inputId = `tedi-header-role-input-${nextHeaderRoleInputId++}`;
|
|
14481
|
+
breakpointService = inject(BreakpointService);
|
|
14482
|
+
isTabletView = computed(() => this.breakpointService.isBelowBreakpoint("lg")(), ...(ngDevMode ? [{ debugName: "isTabletView" }] : []));
|
|
14483
|
+
hasRoleSelection = computed(() => this.showRoleSwitch() ?? this.representatives().length > 1, ...(ngDevMode ? [{ debugName: "hasRoleSelection" }] : []));
|
|
14484
|
+
popover = viewChild(PopoverComponent, ...(ngDevMode ? [{ debugName: "popover" }] : []));
|
|
14485
|
+
searchInput = viewChild("searchInput", ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
|
|
14486
|
+
previousPopoverOpen;
|
|
14487
|
+
parentProfile = inject(HeaderProfileComponent, {
|
|
14488
|
+
optional: true,
|
|
14489
|
+
});
|
|
14490
|
+
constructor() {
|
|
14491
|
+
// `setTimeout` (not `queueMicrotask` / `afterNextRender`) is deliberate:
|
|
14492
|
+
// PopoverComponent's `showPopover()` queues its own
|
|
14493
|
+
// `setTimeout(() => container.focus(...))` to focus the floating-UI
|
|
14494
|
+
// overlay container (popover.component.ts:144). Queuing our input focus
|
|
14495
|
+
// via `setTimeout` puts it AFTER the popover's task in the macrotask
|
|
14496
|
+
// queue, so we focus the search input last and the popover doesn't steal
|
|
14497
|
+
// focus back. Microtask-/render-tier alternatives fire BEFORE the
|
|
14498
|
+
// popover's setTimeout and cause focus loss.
|
|
14499
|
+
effect(() => {
|
|
14500
|
+
if (this.popover()?.isOpen() && this.showSearch()) {
|
|
14501
|
+
setTimeout(() => this.searchInput()?.nativeElement.focus());
|
|
14502
|
+
}
|
|
14503
|
+
});
|
|
14504
|
+
effect(() => {
|
|
14505
|
+
const popover = this.popover();
|
|
14506
|
+
if (!popover)
|
|
14507
|
+
return;
|
|
14508
|
+
const isOpen = popover.isOpen();
|
|
14509
|
+
if (this.previousPopoverOpen !== undefined &&
|
|
14510
|
+
this.previousPopoverOpen !== isOpen) {
|
|
14511
|
+
this.roleSelectionToggle.emit(isOpen);
|
|
14512
|
+
}
|
|
14513
|
+
this.previousPopoverOpen = isOpen;
|
|
14514
|
+
});
|
|
14515
|
+
if (this.parentProfile) {
|
|
14516
|
+
effect(() => {
|
|
14517
|
+
if (!this.parentProfile.modalOpen()) {
|
|
14518
|
+
this.mobileOpen.set(false);
|
|
14519
|
+
this.inputValue.set("");
|
|
14520
|
+
}
|
|
14521
|
+
});
|
|
14522
|
+
effect(() => {
|
|
14523
|
+
const active = this.parentProfile.activeRole();
|
|
14524
|
+
const isOpen = this.mobileOpen();
|
|
14525
|
+
this.closeIfOtherRoleActive(active, isOpen);
|
|
14526
|
+
});
|
|
14527
|
+
}
|
|
14528
|
+
}
|
|
13707
14529
|
translationService = inject(TediTranslationService);
|
|
13708
14530
|
switchRoleText = this.translationService.track("header.role-switch");
|
|
13709
14531
|
closeText = this.translationService.track("close");
|
|
13710
|
-
|
|
14532
|
+
defaultSearchText = this.translationService.track("header.role-search");
|
|
14533
|
+
defaultOrgSearchText = this.translationService.track("header.role-search.organization");
|
|
14534
|
+
searchText = computed(() => this.isOrganization()
|
|
14535
|
+
? (this.organizationSearchLabel() ?? this.defaultOrgSearchText())
|
|
14536
|
+
: (this.searchLabel() ?? this.defaultSearchText()), ...(ngDevMode ? [{ debugName: "searchText" }] : []));
|
|
13711
14537
|
noResultsText = this.translationService.track("header.role-no-representatives");
|
|
13712
14538
|
collapseText = computed(() => this.mobileOpen() ? this.closeText() : this.switchRoleText(), ...(ngDevMode ? [{ debugName: "collapseText" }] : []));
|
|
13713
14539
|
filteredRepresentatives = computed(() => {
|
|
@@ -13724,18 +14550,40 @@ class HeaderRoleComponent {
|
|
|
13724
14550
|
return nameMatches || descriptionMatches;
|
|
13725
14551
|
});
|
|
13726
14552
|
}, ...(ngDevMode ? [{ debugName: "filteredRepresentatives" }] : []));
|
|
14553
|
+
closeIfOtherRoleActive(active, isOpen) {
|
|
14554
|
+
if (active !== null && active !== this && isOpen) {
|
|
14555
|
+
this.mobileOpen.set(false);
|
|
14556
|
+
this.inputValue.set("");
|
|
14557
|
+
}
|
|
14558
|
+
}
|
|
13727
14559
|
handleMobileOpen() {
|
|
13728
14560
|
this.mobileOpen.update((prev) => !prev);
|
|
14561
|
+
this.roleSelectionToggle.emit(this.mobileOpen());
|
|
14562
|
+
if (this.mobileOpen() && this.parentProfile) {
|
|
14563
|
+
this.parentProfile.activeRole.set(this);
|
|
14564
|
+
}
|
|
13729
14565
|
}
|
|
13730
14566
|
handleSelectRepresentative(r) {
|
|
13731
14567
|
this.currentRepresentative.set(r);
|
|
14568
|
+
if (this.clearSearchOnSelect()) {
|
|
14569
|
+
this.inputValue.set("");
|
|
14570
|
+
}
|
|
14571
|
+
this.popover()?.hidePopover();
|
|
13732
14572
|
}
|
|
13733
14573
|
handleInputChange(event) {
|
|
13734
14574
|
const value = event.target.value;
|
|
13735
14575
|
this.inputValue.set(value);
|
|
13736
14576
|
}
|
|
14577
|
+
trackById = (_, r) => r.id;
|
|
14578
|
+
resolveIcon(icon) {
|
|
14579
|
+
if (!icon)
|
|
14580
|
+
return null;
|
|
14581
|
+
if (typeof icon === "string")
|
|
14582
|
+
return { name: icon, size: 24 };
|
|
14583
|
+
return { name: icon.name, size: icon.size ?? 24 };
|
|
14584
|
+
}
|
|
13737
14585
|
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 });
|
|
14586
|
+
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
14587
|
}
|
|
13740
14588
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderRoleComponent, decorators: [{
|
|
13741
14589
|
type: Component,
|
|
@@ -13751,10 +14599,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
13751
14599
|
TextComponent,
|
|
13752
14600
|
ShowAtDirective,
|
|
13753
14601
|
HideAtDirective,
|
|
14602
|
+
SeparatorComponent,
|
|
13754
14603
|
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
13755
14604
|
class: "tedi-header-role",
|
|
13756
|
-
}, template: "<ng-container *hideAt=\"'lg'\">\n <div
|
|
13757
|
-
}], propDecorators: {
|
|
14605
|
+
}, 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"] }]
|
|
14606
|
+
}], 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 }] }] } });
|
|
14607
|
+
|
|
14608
|
+
class HeaderSearchComponent {
|
|
14609
|
+
/**
|
|
14610
|
+
* Behavior on mobile viewports (below the `md` breakpoint).
|
|
14611
|
+
* - `'modal'` shows a toggle button that opens a fullscreen native dialog containing the projected content.
|
|
14612
|
+
* - `'inline'` renders the projected content inline at all breakpoints (no toggle, no dialog).
|
|
14613
|
+
* @default "modal"
|
|
14614
|
+
*/
|
|
14615
|
+
mobileVariant = input("modal", ...(ngDevMode ? [{ debugName: "mobileVariant" }] : []));
|
|
14616
|
+
/**
|
|
14617
|
+
* Mobile-specific labels for the toggle button and the modal title.
|
|
14618
|
+
* When omitted, both fall back to the `header.search` translation key.
|
|
14619
|
+
*/
|
|
14620
|
+
mobileLabels = input({}, ...(ngDevMode ? [{ debugName: "mobileLabels" }] : []));
|
|
14621
|
+
/**
|
|
14622
|
+
* Disables the mobile toggle button. Has no effect on desktop or in the `inline` variant.
|
|
14623
|
+
* @default false
|
|
14624
|
+
*/
|
|
14625
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
14626
|
+
translationService = inject(TediTranslationService);
|
|
14627
|
+
isMobile = inject(BreakpointService).isBelowBreakpoint("md");
|
|
14628
|
+
modalOpen = signal(false, ...(ngDevMode ? [{ debugName: "modalOpen" }] : []));
|
|
14629
|
+
dialogEl = viewChild("dialog", ...(ngDevMode ? [{ debugName: "dialogEl" }] : []));
|
|
14630
|
+
buttonLabel = computed(() => this.mobileLabels()?.button ??
|
|
14631
|
+
this.translationService.translate("header.search"), ...(ngDevMode ? [{ debugName: "buttonLabel" }] : []));
|
|
14632
|
+
modalTitle = computed(() => this.mobileLabels()?.modalTitle ??
|
|
14633
|
+
this.translationService.translate("header.search"), ...(ngDevMode ? [{ debugName: "modalTitle" }] : []));
|
|
14634
|
+
closeLabel = computed(() => this.translationService.translate("close"), ...(ngDevMode ? [{ debugName: "closeLabel" }] : []));
|
|
14635
|
+
constructor() {
|
|
14636
|
+
effect(() => {
|
|
14637
|
+
const dialog = this.dialogEl()?.nativeElement;
|
|
14638
|
+
if (!dialog)
|
|
14639
|
+
return;
|
|
14640
|
+
if (this.modalOpen() && !dialog.open) {
|
|
14641
|
+
dialog.showModal();
|
|
14642
|
+
}
|
|
14643
|
+
else if (!this.modalOpen() && dialog.open) {
|
|
14644
|
+
dialog.close();
|
|
14645
|
+
}
|
|
14646
|
+
});
|
|
14647
|
+
effect(() => {
|
|
14648
|
+
const dialogRendered = this.isMobile() && this.mobileVariant() === "modal";
|
|
14649
|
+
if (!dialogRendered && this.modalOpen()) {
|
|
14650
|
+
this.modalOpen.set(false);
|
|
14651
|
+
}
|
|
14652
|
+
});
|
|
14653
|
+
}
|
|
14654
|
+
open() {
|
|
14655
|
+
if (this.disabled())
|
|
14656
|
+
return;
|
|
14657
|
+
this.modalOpen.set(true);
|
|
14658
|
+
}
|
|
14659
|
+
close() {
|
|
14660
|
+
this.modalOpen.set(false);
|
|
14661
|
+
}
|
|
14662
|
+
onDialogClose() {
|
|
14663
|
+
this.modalOpen.set(false);
|
|
14664
|
+
}
|
|
14665
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14666
|
+
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 });
|
|
14667
|
+
}
|
|
14668
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderSearchComponent, decorators: [{
|
|
14669
|
+
type: Component,
|
|
14670
|
+
args: [{ selector: "tedi-header-search", standalone: true, imports: [
|
|
14671
|
+
NgTemplateOutlet,
|
|
14672
|
+
IconComponent,
|
|
14673
|
+
TextComponent,
|
|
14674
|
+
HeaderMobileButtonComponent,
|
|
14675
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
14676
|
+
class: "tedi-header-search",
|
|
14677
|
+
}, 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"] }]
|
|
14678
|
+
}], 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
14679
|
|
|
13759
14680
|
class SideNavService {
|
|
13760
14681
|
breakpointService = inject(BreakpointService);
|
|
@@ -14141,14 +15062,14 @@ class SideNavToggleComponent {
|
|
|
14141
15062
|
return classList.join(" ");
|
|
14142
15063
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
14143
15064
|
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
|
|
15065
|
+
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
15066
|
}
|
|
14146
15067
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SideNavToggleComponent, decorators: [{
|
|
14147
15068
|
type: Component,
|
|
14148
15069
|
args: [{ selector: "button[tedi-sidenav-toggle]", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [IconComponent], host: {
|
|
14149
15070
|
"[class]": "classes()",
|
|
14150
15071
|
"[attr.aria-label]": "ariaLabel()",
|
|
14151
|
-
}, template: "<tedi-icon\n [name]=\"sidenavService.isMobileOpen() ? 'close' : 'menu'\"\n
|
|
15072
|
+
}, 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
15073
|
}], propDecorators: { onClick: [{
|
|
14153
15074
|
type: HostListener,
|
|
14154
15075
|
args: ["click"]
|
|
@@ -14474,5 +15395,5 @@ function provideTedi(config = {}) {
|
|
|
14474
15395
|
* Generated bundle index. Do not edit.
|
|
14475
15396
|
*/
|
|
14476
15397
|
|
|
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 };
|
|
15398
|
+
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, computeGroupSpans, createTablePersistence, generateUUID, getCardBorderPlacementColor, getPaddingCssVariables, getPlacementFromPositionChange, groupRowSpan, injectTediTableContext, provideTedi, resolveCardBorderRadius, toConnectedPositions, usePagination };
|
|
14478
15399
|
//# sourceMappingURL=tedi-design-system-angular-tedi.mjs.map
|