@design-system-rte/angular 0.16.0 → 0.17.0

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.
Files changed (20) hide show
  1. package/esm2022/lib/components/breadcrumbs/breadcrumb-item/breadcrumb-item.component.mjs +1 -1
  2. package/esm2022/lib/components/card/card.component.mjs +40 -0
  3. package/esm2022/lib/components/divider/divider.component.mjs +3 -3
  4. package/esm2022/lib/components/side-nav/base-side-nav/base-side-nav.component.mjs +63 -0
  5. package/esm2022/lib/components/side-nav/nav-item/nav-item.component.mjs +58 -0
  6. package/esm2022/lib/components/side-nav/nav-menu/nav-menu.component.mjs +90 -0
  7. package/esm2022/lib/components/side-nav/side-nav.component.mjs +96 -0
  8. package/esm2022/lib/components/tooltip/tooltip.component.mjs +3 -3
  9. package/esm2022/lib/components/tooltip/tooltip.directive.mjs +11 -8
  10. package/esm2022/public-api.mjs +3 -1
  11. package/fesm2022/design-system-rte-angular.mjs +323 -12
  12. package/fesm2022/design-system-rte-angular.mjs.map +1 -1
  13. package/lib/components/card/card.component.d.ts +19 -0
  14. package/lib/components/side-nav/base-side-nav/base-side-nav.component.d.ts +26 -0
  15. package/lib/components/side-nav/nav-item/nav-item.component.d.ts +28 -0
  16. package/lib/components/side-nav/nav-menu/nav-menu.component.d.ts +42 -0
  17. package/lib/components/side-nav/side-nav.component.d.ts +33 -0
  18. package/lib/components/tooltip/tooltip.directive.d.ts +4 -3
  19. package/package.json +2 -2
  20. package/public-api.d.ts +2 -0
package/fesm2022/design-system-rte-angular.mjs CHANGED
@@ -7,7 +7,8 @@ import { DomSanitizer } from '@angular/platform-browser';
7
7
  import { HttpClient } from '@angular/common/http';
8
8
  import { isValidIconName as isValidIconName$1 } from '@design-system-rte/core/components/icon/icon-utils';
9
9
  import { labelSize } from '@design-system-rte/core/components/radio-button/radio-button.constants';
10
- import { TOOLTIP_GAP_ARROW, TOOLTIP_GAP } from '@design-system-rte/core/components/tooltip/tooltip.constants';
10
+ import { TOOLTIP_GAP, TOOLTIP_FADE_OUT_DURATION } from '@design-system-rte/core/components/tooltip/tooltip.constants';
11
+ import { getTooltipGap } from '@design-system-rte/core/components/tooltip/tooltip.utils';
11
12
  import { getAutoPlacement, getCoordinates, getAutoPlacementDropdown, getAutoAlignment } from '@design-system-rte/core/components/utils/auto-placement';
12
13
  import { FOCUSABLE_ELEMENTS_QUERY } from '@design-system-rte/core/constants/dom/dom.constants';
13
14
  import { splitButtonLeftIconSize, splitButtonRightIconSize } from '@design-system-rte/core/components/split-button/split-button.constants';
@@ -24,8 +25,11 @@ import { switchHeight, switchWidth } from '@design-system-rte/core/components/sw
24
25
  import { isValidSegmentedControlOptions, focusNextSegmentElement, focusPreviousSegmentElement, focusPreviousNotSegmentElement, focusNextNotSegmentElement, getSegmentPosition } from '@design-system-rte/core/components/segmented-control/segmented-control-utils';
25
26
  import { BREADCRUMBS_DEFAULT_ARIA_LABEL } from '@design-system-rte/core/components/breadcrumbs/breadcrumbs.constants';
26
27
  import { shouldTruncateBreadcrumbs, getBreadcrumbsTruncatedItems } from '@design-system-rte/core/components/breadcrumbs/breadcrumbs.utils';
28
+ import { cardSize } from '@design-system-rte/core/components/card/card.constats';
27
29
  import { POPOVER_GAP_ARROW, POPOVER_GAP } from '@design-system-rte/core/components/popover/popover.constants';
28
30
  import { IconSize } from '@design-system-rte/core/components/icon/icon.constants';
31
+ import { sideNavCollapsedSize, sideNavPanelSize, dividerAppearanceBySideNavAppearance } from '@design-system-rte/core/components/side-nav/side-nav.constants';
32
+ import { getNavItemLabelIconSize } from '@design-system-rte/core/components/side-nav/nav-item/nav-item.utils';
29
33
 
30
34
  class ButtonComponent {
31
35
  constructor() {
@@ -657,11 +661,11 @@ class TooltipComponent {
657
661
  this.arrow = input(true);
658
662
  }
659
663
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
660
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: TooltipComponent, isStandalone: true, selector: "rte-tooltip", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"tooltip {{ position() }} {{ alignment() }}\"\n [ngClass]=\"{ arrow: arrow() }\"\n>\n <span role=\"tooltip\" class=\"tooltip-label\"> {{ label() }} </span>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{position:absolute;max-width:160px;max-height:40px;transition:opacity .15s ease-out}:host:not(:hover){transition:opacity .1s ease-in}.tooltip{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-primary-inverse);position:absolute;text-align:center;z-index:1;max-width:160px;max-height:40px;width:fit-content;padding-block:4px;padding-inline:16px;border-radius:4px;background:var(--background-inverse)}.tooltip.top,.tooltip.bottom{transform:translate(-50%)}.tooltip.left,.tooltip.right{transform:translateY(-50%)}.tooltip.top{bottom:0}.tooltip.top:after{top:100%;left:50%;margin-left:-5px;border-color:var(--background-inverse) transparent transparent transparent}.tooltip.top.start:after{left:25%}.tooltip.top.end:after{left:75%}.tooltip.bottom:after{bottom:100%;left:50%;margin-left:-5px;border-color:transparent transparent var(--background-inverse) transparent}.tooltip.bottom.start:after{left:25%}.tooltip.bottom.end:after{left:75%}.tooltip.left{right:0}.tooltip.left:after{top:50%;left:100%;margin-top:-5px;border-color:transparent transparent transparent var(--background-inverse)}.tooltip.left.start:after{top:25%}.tooltip.left.end:after{top:75%}.tooltip.right:after{top:50%;right:100%;margin-top:-5px;border-color:transparent var(--background-inverse) transparent transparent}.tooltip.right.start:after{top:25%}.tooltip.right.end:after{top:75%}.tooltip.arrow:after{content:\"\";position:absolute;border-width:5px;border-style:solid}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
664
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: TooltipComponent, isStandalone: true, selector: "rte-tooltip", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"tooltip {{ position() }} {{ alignment() }}\"\n [ngClass]=\"{ arrow: arrow() }\"\n>\n <span role=\"tooltip\" class=\"tooltip-label\"> {{ label() }} </span>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{position:absolute;transition:opacity .15s ease-out}:host:not(:hover){transition:opacity .1s ease-in}.tooltip{color:var(--content-primary-inverse);text-align:center;z-index:1;max-width:160px;max-height:40px;padding-block:4px;padding-inline:16px;border-radius:4px;background:var(--background-inverse)}.tooltip-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;width:fit-content}.tooltip.top,.tooltip.bottom{transform:translate(-50%)}.tooltip.left,.tooltip.right{transform:translateY(-50%)}.tooltip.top{bottom:0}.tooltip.top:after{top:100%;left:50%;margin-left:-5px;border-color:var(--background-inverse) transparent transparent transparent}.tooltip.top.start:after{left:25%}.tooltip.top.end:after{left:75%}.tooltip.bottom:after{bottom:100%;left:50%;margin-left:-5px;border-color:transparent transparent var(--background-inverse) transparent}.tooltip.bottom.start:after{left:25%}.tooltip.bottom.end:after{left:75%}.tooltip.left{right:0}.tooltip.left:after{top:50%;left:100%;margin-top:-5px;border-color:transparent transparent transparent var(--background-inverse)}.tooltip.left.start:after{top:25%}.tooltip.left.end:after{top:75%}.tooltip.right:after{top:50%;right:100%;margin-top:-5px;border-color:transparent var(--background-inverse) transparent transparent}.tooltip.right.start:after{top:25%}.tooltip.right.end:after{top:75%}.tooltip.arrow:after{content:\"\";position:absolute;border-width:5px;border-style:solid}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
661
665
  }
662
666
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipComponent, decorators: [{
663
667
  type: Component,
664
- args: [{ selector: "rte-tooltip", imports: [CommonModule], standalone: true, template: "<div\n class=\"tooltip {{ position() }} {{ alignment() }}\"\n [ngClass]=\"{ arrow: arrow() }\"\n>\n <span role=\"tooltip\" class=\"tooltip-label\"> {{ label() }} </span>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{position:absolute;max-width:160px;max-height:40px;transition:opacity .15s ease-out}:host:not(:hover){transition:opacity .1s ease-in}.tooltip{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-primary-inverse);position:absolute;text-align:center;z-index:1;max-width:160px;max-height:40px;width:fit-content;padding-block:4px;padding-inline:16px;border-radius:4px;background:var(--background-inverse)}.tooltip.top,.tooltip.bottom{transform:translate(-50%)}.tooltip.left,.tooltip.right{transform:translateY(-50%)}.tooltip.top{bottom:0}.tooltip.top:after{top:100%;left:50%;margin-left:-5px;border-color:var(--background-inverse) transparent transparent transparent}.tooltip.top.start:after{left:25%}.tooltip.top.end:after{left:75%}.tooltip.bottom:after{bottom:100%;left:50%;margin-left:-5px;border-color:transparent transparent var(--background-inverse) transparent}.tooltip.bottom.start:after{left:25%}.tooltip.bottom.end:after{left:75%}.tooltip.left{right:0}.tooltip.left:after{top:50%;left:100%;margin-top:-5px;border-color:transparent transparent transparent var(--background-inverse)}.tooltip.left.start:after{top:25%}.tooltip.left.end:after{top:75%}.tooltip.right:after{top:50%;right:100%;margin-top:-5px;border-color:transparent var(--background-inverse) transparent transparent}.tooltip.right.start:after{top:25%}.tooltip.right.end:after{top:75%}.tooltip.arrow:after{content:\"\";position:absolute;border-width:5px;border-style:solid}\n"] }]
668
+ args: [{ selector: "rte-tooltip", imports: [CommonModule], standalone: true, template: "<div\n class=\"tooltip {{ position() }} {{ alignment() }}\"\n [ngClass]=\"{ arrow: arrow() }\"\n>\n <span role=\"tooltip\" class=\"tooltip-label\"> {{ label() }} </span>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{position:absolute;transition:opacity .15s ease-out}:host:not(:hover){transition:opacity .1s ease-in}.tooltip{color:var(--content-primary-inverse);text-align:center;z-index:1;max-width:160px;max-height:40px;padding-block:4px;padding-inline:16px;border-radius:4px;background:var(--background-inverse)}.tooltip-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;width:fit-content}.tooltip.top,.tooltip.bottom{transform:translate(-50%)}.tooltip.left,.tooltip.right{transform:translateY(-50%)}.tooltip.top{bottom:0}.tooltip.top:after{top:100%;left:50%;margin-left:-5px;border-color:var(--background-inverse) transparent transparent transparent}.tooltip.top.start:after{left:25%}.tooltip.top.end:after{left:75%}.tooltip.bottom:after{bottom:100%;left:50%;margin-left:-5px;border-color:transparent transparent var(--background-inverse) transparent}.tooltip.bottom.start:after{left:25%}.tooltip.bottom.end:after{left:75%}.tooltip.left{right:0}.tooltip.left:after{top:50%;left:100%;margin-top:-5px;border-color:transparent transparent transparent var(--background-inverse)}.tooltip.left.start:after{top:25%}.tooltip.left.end:after{top:75%}.tooltip.right:after{top:50%;right:100%;margin-top:-5px;border-color:transparent var(--background-inverse) transparent transparent}.tooltip.right.start:after{top:25%}.tooltip.right.end:after{top:75%}.tooltip.arrow:after{content:\"\";position:absolute;border-width:5px;border-style:solid}\n"] }]
665
669
  }] });
666
670
 
667
671
  class TooltipDirective {
@@ -683,11 +687,11 @@ class TooltipDirective {
683
687
  this.rteTooltipAlignment = input("center");
684
688
  this.rteTooltipArrow = input(true);
685
689
  this.rteTooltipShouldFocusTrigger = input(true);
690
+ this.rteTooltipGap = input(TOOLTIP_GAP);
686
691
  this.tooltipRef = null;
687
692
  this.elementRef = inject(ElementRef);
688
693
  this.viewContainerRef = inject(ViewContainerRef);
689
694
  this.renderer = inject(Renderer2);
690
- this.cdr = inject(ChangeDetectorRef);
691
695
  this.overlayService = inject(OverlayService);
692
696
  this.hostElement = this.elementRef.nativeElement;
693
697
  }
@@ -722,8 +726,9 @@ class TooltipDirective {
722
726
  assignDirectiveToComponent() {
723
727
  if (this.tooltipRef) {
724
728
  const tooltipElement = this.tooltipRef.location.nativeElement;
729
+ const gap = getTooltipGap(this.rteTooltipArrow(), this.rteTooltipGap());
725
730
  const position = this.rteTooltipPosition() === "auto"
726
- ? getAutoPlacement(this.hostElement, tooltipElement, "top", this.rteTooltipArrow() ? TOOLTIP_GAP_ARROW : TOOLTIP_GAP, true)
731
+ ? getAutoPlacement(this.hostElement, tooltipElement, "top", gap, true)
727
732
  : this.rteTooltipPosition();
728
733
  this.tooltipRef.setInput("label", this.rteTooltip());
729
734
  this.tooltipRef.setInput("position", position);
@@ -734,7 +739,8 @@ class TooltipDirective {
734
739
  positionTooltip() {
735
740
  if (this.tooltipRef) {
736
741
  const tooltipElement = this.tooltipRef.location.nativeElement;
737
- const positions = getCoordinates(this.tooltipRef.instance.position(), this.hostElement, tooltipElement, this.rteTooltipArrow() ? TOOLTIP_GAP_ARROW : TOOLTIP_GAP);
742
+ const gap = getTooltipGap(this.rteTooltipArrow(), this.rteTooltipGap());
743
+ const positions = getCoordinates(this.tooltipRef.instance.position(), this.hostElement, tooltipElement, gap);
738
744
  this.renderer.setStyle(this.hostElement, "position", "relative");
739
745
  this.renderer.setStyle(tooltipElement, "top", `${positions.top}px`);
740
746
  this.renderer.setStyle(tooltipElement, "left", `${positions.left}px`);
@@ -750,11 +756,11 @@ class TooltipDirective {
750
756
  this.tooltipRef = null;
751
757
  this.overlayService.destroy();
752
758
  }
753
- }, 200);
759
+ }, TOOLTIP_FADE_OUT_DURATION);
754
760
  }
755
761
  }
756
762
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
757
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: TooltipDirective, isStandalone: true, selector: "[rteTooltip]", inputs: { rteTooltip: { classPropertyName: "rteTooltip", publicName: "rteTooltip", isSignal: true, isRequired: true, transformFunction: null }, rteTooltipPosition: { classPropertyName: "rteTooltipPosition", publicName: "rteTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, rteTooltipAlignment: { classPropertyName: "rteTooltipAlignment", publicName: "rteTooltipAlignment", isSignal: true, isRequired: false, transformFunction: null }, rteTooltipArrow: { classPropertyName: "rteTooltipArrow", publicName: "rteTooltipArrow", isSignal: true, isRequired: false, transformFunction: null }, rteTooltipShouldFocusTrigger: { classPropertyName: "rteTooltipShouldFocusTrigger", publicName: "rteTooltipShouldFocusTrigger", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()" } }, ngImport: i0 }); }
763
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: TooltipDirective, isStandalone: true, selector: "[rteTooltip]", inputs: { rteTooltip: { classPropertyName: "rteTooltip", publicName: "rteTooltip", isSignal: true, isRequired: true, transformFunction: null }, rteTooltipPosition: { classPropertyName: "rteTooltipPosition", publicName: "rteTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, rteTooltipAlignment: { classPropertyName: "rteTooltipAlignment", publicName: "rteTooltipAlignment", isSignal: true, isRequired: false, transformFunction: null }, rteTooltipArrow: { classPropertyName: "rteTooltipArrow", publicName: "rteTooltipArrow", isSignal: true, isRequired: false, transformFunction: null }, rteTooltipShouldFocusTrigger: { classPropertyName: "rteTooltipShouldFocusTrigger", publicName: "rteTooltipShouldFocusTrigger", isSignal: true, isRequired: false, transformFunction: null }, rteTooltipGap: { classPropertyName: "rteTooltipGap", publicName: "rteTooltipGap", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()" } }, ngImport: i0 }); }
758
764
  }
759
765
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipDirective, decorators: [{
760
766
  type: Directive,
@@ -785,11 +791,11 @@ class DividerComponent {
785
791
  this.isHorizontal = computed(() => this.orientation() === "horizontal");
786
792
  }
787
793
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
788
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DividerComponent, isStandalone: true, selector: "rte-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, endPoint: { classPropertyName: "endPoint", publicName: "endPoint", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isHorizontal()) {\n <hr class=\"horizontal {{thickness()}} {{appearance()}} {{endPoint()}}\" />\n} @else {\n <div class=\"vertical {{thickness()}} {{appearance()}} {{endPoint()}}\" role=\"separator\"></div>\n}", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.horizontal{border:none;padding:0;margin:0;width:100%}.horizontal.round{border-radius:999px}.horizontal.light{border-top:1px solid var(--border-divider)}.horizontal.medium{border-top:2px solid var(--border-divider)}.horizontal.bold{border-top:4px solid var(--border-divider)}.horizontal.inverse{border-top-color:var(--border-inverse)}.horizontal.brand{border-top-color:var(--border-brand-default)}.vertical{height:100%;background-color:var(--border-divider);margin:0;padding:0}.vertical.round{border-radius:999px}.vertical.light{width:1px}.vertical.medium{width:2px}.vertical.bold{width:4px}.vertical.inverse{background-color:var(--border-inverse)}.vertical.brand{background-color:var(--border-brand-default)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
794
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DividerComponent, isStandalone: true, selector: "rte-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, endPoint: { classPropertyName: "endPoint", publicName: "endPoint", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isHorizontal()) {\n <hr class=\"horizontal {{thickness()}} {{appearance()}} {{endPoint()}}\" />\n} @else {\n <div class=\"vertical {{thickness()}} {{appearance()}} {{endPoint()}}\" role=\"separator\"></div>\n}", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{display:contents}.horizontal{border:none;padding:0;margin:0;width:100%}.horizontal.round{border-radius:999px}.horizontal.light{border-top:1px solid var(--border-divider)}.horizontal.medium{border-top:2px solid var(--border-divider)}.horizontal.bold{border-top:4px solid var(--border-divider)}.horizontal.inverse{border-top-color:var(--border-inverse)}.horizontal.brand{border-top-color:var(--border-brand-default)}.horizontal.brand-navigation{border-top-color:var(--border-brand-navigation-divider)}.vertical{height:100%;background-color:var(--border-divider);margin:0;padding:0}.vertical.round{border-radius:999px}.vertical.light{width:1px}.vertical.medium{width:2px}.vertical.bold{width:4px}.vertical.inverse{background-color:var(--border-inverse)}.vertical.brand{background-color:var(--border-brand-default)}.vertical.brand-navigation{background-color:var(--border-brand-navigation-divider)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
789
795
  }
790
796
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DividerComponent, decorators: [{
791
797
  type: Component,
792
- args: [{ selector: "rte-divider", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isHorizontal()) {\n <hr class=\"horizontal {{thickness()}} {{appearance()}} {{endPoint()}}\" />\n} @else {\n <div class=\"vertical {{thickness()}} {{appearance()}} {{endPoint()}}\" role=\"separator\"></div>\n}", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.horizontal{border:none;padding:0;margin:0;width:100%}.horizontal.round{border-radius:999px}.horizontal.light{border-top:1px solid var(--border-divider)}.horizontal.medium{border-top:2px solid var(--border-divider)}.horizontal.bold{border-top:4px solid var(--border-divider)}.horizontal.inverse{border-top-color:var(--border-inverse)}.horizontal.brand{border-top-color:var(--border-brand-default)}.vertical{height:100%;background-color:var(--border-divider);margin:0;padding:0}.vertical.round{border-radius:999px}.vertical.light{width:1px}.vertical.medium{width:2px}.vertical.bold{width:4px}.vertical.inverse{background-color:var(--border-inverse)}.vertical.brand{background-color:var(--border-brand-default)}\n"] }]
798
+ args: [{ selector: "rte-divider", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isHorizontal()) {\n <hr class=\"horizontal {{thickness()}} {{appearance()}} {{endPoint()}}\" />\n} @else {\n <div class=\"vertical {{thickness()}} {{appearance()}} {{endPoint()}}\" role=\"separator\"></div>\n}", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{display:contents}.horizontal{border:none;padding:0;margin:0;width:100%}.horizontal.round{border-radius:999px}.horizontal.light{border-top:1px solid var(--border-divider)}.horizontal.medium{border-top:2px solid var(--border-divider)}.horizontal.bold{border-top:4px solid var(--border-divider)}.horizontal.inverse{border-top-color:var(--border-inverse)}.horizontal.brand{border-top-color:var(--border-brand-default)}.horizontal.brand-navigation{border-top-color:var(--border-brand-navigation-divider)}.vertical{height:100%;background-color:var(--border-divider);margin:0;padding:0}.vertical.round{border-radius:999px}.vertical.light{width:1px}.vertical.medium{width:2px}.vertical.bold{width:4px}.vertical.inverse{background-color:var(--border-inverse)}.vertical.brand{background-color:var(--border-brand-default)}.vertical.brand-navigation{background-color:var(--border-brand-navigation-divider)}\n"] }]
793
799
  }] });
794
800
 
795
801
  class DropdownItemComponent {
@@ -1798,7 +1804,7 @@ class BreadcrumbItemComponent {
1798
1804
  this.initialScrollWidth.set(el.scrollWidth);
1799
1805
  }
1800
1806
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1801
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: BreadcrumbItemComponent, isStandalone: true, selector: "rte-breadcrumb-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbItemMaxWidth: { classPropertyName: "breadcrumbItemMaxWidth", publicName: "breadcrumbItemMaxWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"rte-breadcrumb-item\">\n @if (isLast()) {\n @if (isEllipsisActive()) {\n <div\n [rteTooltip]=\"item()!.label\"\n [rteTooltipPosition]=\"'bottom'\"\n [style]=\"tooltipTriggerStyle()\"\n >\n <a\n role=\"link\"\n aria-current=\"page\"\n tabindex=\"-1\"\n [attr.aria-label]=\"item()!.label\"\n [style]=\"linkStyle()\"\n >\n {{ item()!.label }}\n </a>\n </div>\n } @else {\n <a\n role=\"link\"\n aria-current=\"page\"\n tabindex=\"0\"\n [attr.aria-label]=\"item()!.label\"\n [style]=\"linkStyle()\"\n >\n {{ item()!.label }}\n </a>\n }\n } @else {\n @if (isEllipsisActive()) {\n <div\n [rteTooltip]=\"item()!.label\"\n [rteTooltipPosition]=\"'bottom'\"\n [style]=\"tooltipTriggerStyle()\"\n [style.overflow]=\"'unset'\"\n [rteTooltipShouldFocusTrigger]=\"false\"\n >\n <rte-link\n [href]=\"item()!.link\"\n [label]=\"item()!.label\"\n [subtle]=\"true\"\n [maxWidth]=\"breadcrumbItemMaxWidth()\"\n />\n </div>\n } @else {\n <rte-link\n [href]=\"item()!.link\"\n [label]=\"item()!.label\"\n [subtle]=\"true\"\n [maxWidth]=\"breadcrumbItemMaxWidth()\"\n />\n }\n }\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-breadcrumb-item{display:inline-flex;align-items:center;opacity:0;animation:fadeIn .15s forwards;font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.rte-breadcrumb-item rte-link ::ng-deep a,.rte-breadcrumb-item rte-link ::ng-deep a.subtle{color:var(--content-tertiary)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-breadcrumb-item a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-breadcrumb-item:last-child{cursor:default;color:var(--content-primary)}.rte-breadcrumb-item :focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}@keyframes fadeIn{to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LinkComponent, selector: "rte-link", inputs: ["label", "href", "subtle", "externalLink", "reverse", "maxWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rteTooltip]", inputs: ["rteTooltip", "rteTooltipPosition", "rteTooltipAlignment", "rteTooltipArrow", "rteTooltipShouldFocusTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1807
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: BreadcrumbItemComponent, isStandalone: true, selector: "rte-breadcrumb-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbItemMaxWidth: { classPropertyName: "breadcrumbItemMaxWidth", publicName: "breadcrumbItemMaxWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"rte-breadcrumb-item\">\n @if (isLast()) {\n @if (isEllipsisActive()) {\n <div\n [rteTooltip]=\"item()!.label\"\n [rteTooltipPosition]=\"'bottom'\"\n [style]=\"tooltipTriggerStyle()\"\n >\n <a\n role=\"link\"\n aria-current=\"page\"\n tabindex=\"-1\"\n [attr.aria-label]=\"item()!.label\"\n [style]=\"linkStyle()\"\n >\n {{ item()!.label }}\n </a>\n </div>\n } @else {\n <a\n role=\"link\"\n aria-current=\"page\"\n tabindex=\"0\"\n [attr.aria-label]=\"item()!.label\"\n [style]=\"linkStyle()\"\n >\n {{ item()!.label }}\n </a>\n }\n } @else {\n @if (isEllipsisActive()) {\n <div\n [rteTooltip]=\"item()!.label\"\n [rteTooltipPosition]=\"'bottom'\"\n [style]=\"tooltipTriggerStyle()\"\n [style.overflow]=\"'unset'\"\n [rteTooltipShouldFocusTrigger]=\"false\"\n >\n <rte-link\n [href]=\"item()!.link\"\n [label]=\"item()!.label\"\n [subtle]=\"true\"\n [maxWidth]=\"breadcrumbItemMaxWidth()\"\n />\n </div>\n } @else {\n <rte-link\n [href]=\"item()!.link\"\n [label]=\"item()!.label\"\n [subtle]=\"true\"\n [maxWidth]=\"breadcrumbItemMaxWidth()\"\n />\n }\n }\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-breadcrumb-item{display:inline-flex;align-items:center;opacity:0;animation:fadeIn .15s forwards;font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.rte-breadcrumb-item rte-link ::ng-deep a,.rte-breadcrumb-item rte-link ::ng-deep a.subtle{color:var(--content-tertiary)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-breadcrumb-item a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-breadcrumb-item:last-child{cursor:default;color:var(--content-primary)}.rte-breadcrumb-item :focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}@keyframes fadeIn{to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LinkComponent, selector: "rte-link", inputs: ["label", "href", "subtle", "externalLink", "reverse", "maxWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rteTooltip]", inputs: ["rteTooltip", "rteTooltipPosition", "rteTooltipAlignment", "rteTooltipArrow", "rteTooltipShouldFocusTrigger", "rteTooltipGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1802
1808
  }
1803
1809
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbItemComponent, decorators: [{
1804
1810
  type: Component,
@@ -1883,6 +1889,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
1883
1889
  args: [{ selector: "rte-banner", imports: [CommonModule, IconComponent, IconButtonComponent, ButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n *ngIf=\"rendering()\"\n class=\"rte-banner-container {{ type() }} {{ position() }}\"\n [ngClass]=\"{ open: visible(), close: !visible() }\"\n [attr.role]=\"type() === 'default' ? 'status' : 'alert'\"\n>\n <div class=\"rte-banner\">\n <div *ngIf=\"showIcon()\" class=\"rte-banner-icon\">\n <rte-icon [name]=\"type() === 'default' ? 'info' : 'error'\" [size]=\"32\" />\n </div>\n <div class=\"rte-banner-content\">\n <span *ngIf=\"title()\" class=\"rte-banner-title\">{{ title() }}</span>\n <div *ngIf=\"message()\" class=\"rte-banner-message\">\n <span>{{ message() }}</span>\n <button *ngIf=\"actionLabel()\"\n rteButton\n rteButtonVariant=\"neutral\"\n rteButtonSize=\"s\"\n [attr.aria-label]=\"actionLabel()!\"\n (click)=\"clickAction()\"\n >{{ actionLabel() }}</button>\n </div>\n </div>\n <div *ngIf=\"closable()\" class=\"rte-banner-close-icon\">\n <rte-icon-button\n name=\"close\"\n variant=\"neutral\"\n ariaLabel=\"close banner\"\n (click)=\"closeBanner()\"\n />\n </div>\n </div>\n</section>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-banner-container{display:flex;box-sizing:border-box;width:100%;min-width:320px;padding:24px;flex-direction:column;justify-content:center;align-items:center;gap:0px;border-radius:0;background:var(--background-info-default);color:var(--content-info-default);top:0;left:0;transition:opacity .2s ease,transform .2s ease;z-index:10}.rte-banner-container.alert{background:var(--background-danger-default);color:var(--content-danger-default)}.rte-banner-container.overlay{position:fixed}.rte-banner-container.open{opacity:1;transform:translateY(0)}.rte-banner-container.close{opacity:0;transform:translateY(-10px)}.rte-banner-container .rte-banner{display:flex;padding:16px;align-items:flex-start;gap:16px;align-self:stretch;border-radius:var(--radius-S, 4px);opacity:var(--100, 1);box-shadow:0 8px 16px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-4) 0%,var(--elevation-surface-shadow-4) 100%);background-color:var(--background-default, #FFF)}.rte-banner-container .rte-banner .rte-banner-icon{display:flex;padding:0 0 0 16px;justify-content:center;align-items:center;gap:var(--positive-spacing_0, 0);align-self:stretch}.rte-banner-container .rte-banner .banner-close-icon{color:var(--content-secondary)}.rte-banner-container .rte-banner .rte-banner-content{display:flex;padding:0 16px;flex-direction:column;align-items:flex-start;gap:8px;flex:1 0 0;border-radius:0;opacity:100%}.rte-banner-container .rte-banner .rte-banner-content .rte-banner-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px}.rte-banner-container .rte-banner .rte-banner-content .rte-banner-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;color:var(--content-secondary);display:flex;align-items:center;gap:24px;padding:8px 0;justify-content:space-between;width:100%}.rte-banner-container .rte-banner .rte-banner-content .rte-banner-message .rte-banner-action-button{width:max-content}.rte-banner-container .rte-banner .rte-banner-close-icon{color:var(--content-secondary)}\n"] }]
1884
1890
  }] });
1885
1891
 
1892
+ class CardComponent {
1893
+ constructor() {
1894
+ this.size = input("m");
1895
+ this.cardType = input("default");
1896
+ this.clickable = input(false);
1897
+ this.disabled = input(false);
1898
+ this.ariaLabel = input(undefined);
1899
+ this.ariaLabelledby = input(undefined);
1900
+ this.ariaRole = input(undefined);
1901
+ this.cardClicked = output();
1902
+ this.cardWidth = computed(() => `${cardSize[this.size()]}px`);
1903
+ this.tabIndex = computed(() => (this.clickable() ? 0 : -1));
1904
+ }
1905
+ onClick() {
1906
+ if (!this.disabled() && this.clickable()) {
1907
+ this.cardClicked.emit();
1908
+ }
1909
+ }
1910
+ onKeyDown(event) {
1911
+ if (!this.disabled() && this.clickable()) {
1912
+ if ([ENTER_KEY, SPACE_KEY].includes(event.key)) {
1913
+ event.preventDefault();
1914
+ this.cardClicked.emit();
1915
+ }
1916
+ }
1917
+ }
1918
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1919
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: CardComponent, isStandalone: true, selector: "rte-card", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, cardType: { classPropertyName: "cardType", publicName: "cardType", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", 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 }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaRole: { classPropertyName: "ariaRole", publicName: "ariaRole", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<div\n class=\"card card-{{cardType()}}\"\n [style.width]=\"cardWidth()\"\n [attr.disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n [attr.aria-role]=\"ariaRole()\"\n [ngClass]=\"{'clickable': clickable()}\"\n [tabIndex]=\"tabIndex()\"\n (click)=\"onClick()\"\n (keydown)=\"onKeyDown($event)\"\n>\n <ng-content/>\n</div>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.card{display:flex;flex-direction:column;justify-content:center;align-items:center;align-self:stretch;border-radius:4px;box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);transition:background-color .3s,box-shadow .3s}.card:active{box-shadow:0 1px 2px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-1) 0%,var(--elevation-surface-shadow-1) 100%)}.card:hover{box-shadow:0 4px 8px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-3) 0%,var(--elevation-surface-shadow-3) 100%)}.card[disabled=true]{background:var(--background-disabled);opacity:30%;box-shadow:none;pointer-events:none}.card[disabled=true].card-outlined{border:1px solid var(--border-disabled)}.card.card-outlined{flex-shrink:0;border:1px solid var(--border-tertiary);box-shadow:none}.card.card-outlined:active{border-color:var(--border-secondary)}.card.clickable{cursor:pointer}.card:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1920
+ }
1921
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, decorators: [{
1922
+ type: Component,
1923
+ args: [{ selector: "rte-card", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"card card-{{cardType()}}\"\n [style.width]=\"cardWidth()\"\n [attr.disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n [attr.aria-role]=\"ariaRole()\"\n [ngClass]=\"{'clickable': clickable()}\"\n [tabIndex]=\"tabIndex()\"\n (click)=\"onClick()\"\n (keydown)=\"onKeyDown($event)\"\n>\n <ng-content/>\n</div>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.card{display:flex;flex-direction:column;justify-content:center;align-items:center;align-self:stretch;border-radius:4px;box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);transition:background-color .3s,box-shadow .3s}.card:active{box-shadow:0 1px 2px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-1) 0%,var(--elevation-surface-shadow-1) 100%)}.card:hover{box-shadow:0 4px 8px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-3) 0%,var(--elevation-surface-shadow-3) 100%)}.card[disabled=true]{background:var(--background-disabled);opacity:30%;box-shadow:none;pointer-events:none}.card[disabled=true].card-outlined{border:1px solid var(--border-disabled)}.card.card-outlined{flex-shrink:0;border:1px solid var(--border-tertiary);box-shadow:none}.card.card-outlined:active{border-color:var(--border-secondary)}.card.clickable{cursor:pointer}.card:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}\n"] }]
1924
+ }] });
1925
+
1886
1926
  class FocusTrapService {
1887
1927
  constructor() {
1888
1928
  this.activeTrapElement = null;
@@ -2316,9 +2356,280 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
2316
2356
  }]
2317
2357
  }] });
2318
2358
 
2359
+ class BaseSideNavComponent {
2360
+ constructor() {
2361
+ this.cdr = inject(ChangeDetectorRef);
2362
+ this.elementRef = inject((ElementRef));
2363
+ this.contentRef = viewChild("contentRef");
2364
+ this.collapsedSize = sideNavCollapsedSize;
2365
+ this.panelSize = sideNavPanelSize;
2366
+ this.size = input("m");
2367
+ this.appearance = input("brand");
2368
+ this.collapsed = input(false);
2369
+ this.showHeader = input(true);
2370
+ this.showFooter = input(true);
2371
+ this.minWidth = computed(() => {
2372
+ return this.collapsed() ? `${this.collapsedSize}px` : `${this.panelSize[this.size()]}px`;
2373
+ });
2374
+ }
2375
+ ngAfterViewInit() {
2376
+ this.setupResizeObserver();
2377
+ }
2378
+ ngOnDestroy() {
2379
+ this.cleanupResizeObserver();
2380
+ }
2381
+ setupResizeObserver() {
2382
+ const containerEl = this.elementRef.nativeElement;
2383
+ const contentEl = this.contentRef()?.nativeElement;
2384
+ if (!containerEl || !contentEl) {
2385
+ return;
2386
+ }
2387
+ const setHeightVar = () => {
2388
+ const height = contentEl.offsetHeight;
2389
+ containerEl.style.setProperty("--content-height", `${height}px`);
2390
+ };
2391
+ this.resizeHandler = setHeightVar;
2392
+ setHeightVar();
2393
+ this.resizeObserver = new ResizeObserver(() => {
2394
+ setHeightVar();
2395
+ });
2396
+ this.resizeObserver.observe(contentEl);
2397
+ window.addEventListener("resize", setHeightVar);
2398
+ }
2399
+ cleanupResizeObserver() {
2400
+ if (this.resizeObserver) {
2401
+ this.resizeObserver.disconnect();
2402
+ this.resizeObserver = undefined;
2403
+ }
2404
+ if (this.resizeHandler) {
2405
+ window.removeEventListener("resize", this.resizeHandler);
2406
+ this.resizeHandler = undefined;
2407
+ }
2408
+ }
2409
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BaseSideNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2410
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: BaseSideNavComponent, isStandalone: true, selector: "rte-base-side-nav", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"side-nav-container\">\n <nav class=\"side-nav\" [ngClass]=\"{'collapsed': collapsed(), 'appearance': appearance()}\" [style.min-width]=\"minWidth()\">\n @if (showHeader()) {\n <div class=\"side-nav-header\">\n <ng-content select=\"[side-nav-header]\"></ng-content>\n </div>\n }\n\n <div class=\"side-nav-body\">\n <ng-content select=\"[side-nav-body]\"></ng-content>\n </div>\n\n @if (showFooter()) {\n <div class=\"side-nav-footer\">\n <ng-content select=\"[side-nav-footer]\"></ng-content>\n </div>\n }\n </nav>\n <div #contentRef class=\"side-nav-content\">\n <ng-content select=\"[side-nav-content]\"></ng-content>\n </div>\n</div>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.side-nav-container{height:auto;padding:0;position:relative;display:flex;align-items:stretch;flex:1}.side-nav-content{flex:1 1 auto;min-width:0;overflow-y:auto}.side-nav{background-color:var(--background-brand-navigation-default);flex:0 0 auto;align-self:stretch;display:flex;flex-direction:column;gap:0px;box-sizing:border-box;border-radius:0;transition:min-width .3s;color:var(--content-brand-navigation-default);max-height:var(--content-height)}.side-nav.neutral{background-color:var(--background-neutral-navigation-default);color:var(--content-secondary)}.side-nav-header{align-items:center;justify-content:space-between;width:100%;box-sizing:border-box}.side-nav-body{width:100%;box-sizing:border-box;flex:1;overflow-y:auto;min-height:0}.side-nav-footer{align-items:center;justify-content:space-between;box-sizing:border-box;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2411
+ }
2412
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BaseSideNavComponent, decorators: [{
2413
+ type: Component,
2414
+ args: [{ selector: "rte-base-side-nav", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"side-nav-container\">\n <nav class=\"side-nav\" [ngClass]=\"{'collapsed': collapsed(), 'appearance': appearance()}\" [style.min-width]=\"minWidth()\">\n @if (showHeader()) {\n <div class=\"side-nav-header\">\n <ng-content select=\"[side-nav-header]\"></ng-content>\n </div>\n }\n\n <div class=\"side-nav-body\">\n <ng-content select=\"[side-nav-body]\"></ng-content>\n </div>\n\n @if (showFooter()) {\n <div class=\"side-nav-footer\">\n <ng-content select=\"[side-nav-footer]\"></ng-content>\n </div>\n }\n </nav>\n <div #contentRef class=\"side-nav-content\">\n <ng-content select=\"[side-nav-content]\"></ng-content>\n </div>\n</div>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.side-nav-container{height:auto;padding:0;position:relative;display:flex;align-items:stretch;flex:1}.side-nav-content{flex:1 1 auto;min-width:0;overflow-y:auto}.side-nav{background-color:var(--background-brand-navigation-default);flex:0 0 auto;align-self:stretch;display:flex;flex-direction:column;gap:0px;box-sizing:border-box;border-radius:0;transition:min-width .3s;color:var(--content-brand-navigation-default);max-height:var(--content-height)}.side-nav.neutral{background-color:var(--background-neutral-navigation-default);color:var(--content-secondary)}.side-nav-header{align-items:center;justify-content:space-between;width:100%;box-sizing:border-box}.side-nav-body{width:100%;box-sizing:border-box;flex:1;overflow-y:auto;min-height:0}.side-nav-footer{align-items:center;justify-content:space-between;box-sizing:border-box;width:100%}\n"] }]
2415
+ }] });
2416
+
2417
+ function getNavTabIndex$1(parentMenuOpen) {
2418
+ return parentMenuOpen === false ? -1 : 0;
2419
+ }
2420
+ class NavItemComponent {
2421
+ constructor() {
2422
+ this.id = input();
2423
+ this.icon = input();
2424
+ this.showIcon = input(true);
2425
+ this.label = input.required();
2426
+ this.collapsed = input(false);
2427
+ this.link = input();
2428
+ this.appearance = input("brand");
2429
+ this.active = input(false);
2430
+ this.badge = input();
2431
+ this.isNested = input(false);
2432
+ this.parentMenuOpen = input();
2433
+ this.role = input();
2434
+ this.showDivider = input(false);
2435
+ this.focused = signal(false);
2436
+ this.tabIndex = computed(() => getNavTabIndex$1(this.parentMenuOpen()));
2437
+ this.itemClick = output();
2438
+ this.iconSize = computed(() => {
2439
+ return getNavItemLabelIconSize(this.isNested(), this.collapsed());
2440
+ });
2441
+ }
2442
+ handleClick(event) {
2443
+ event.stopPropagation();
2444
+ this.itemClick.emit(this.id() || this.label());
2445
+ }
2446
+ handleKeyDown(event) {
2447
+ if ([SPACE_KEY, ENTER_KEY].includes(event.key)) {
2448
+ event.preventDefault();
2449
+ this.itemClick.emit(this.id() || this.label());
2450
+ }
2451
+ }
2452
+ handleFocus() {
2453
+ this.focused.set(true);
2454
+ }
2455
+ handleBlur() {
2456
+ this.focused.set(false);
2457
+ }
2458
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2459
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NavItemComponent, isStandalone: true, selector: "rte-nav-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, isNested: { classPropertyName: "isNested", publicName: "isNested", isSignal: true, isRequired: false, transformFunction: null }, parentMenuOpen: { classPropertyName: "parentMenuOpen", publicName: "parentMenuOpen", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "@if (collapsed() && label()) {\n <div\n class=\"nav-item-container {{appearance()}}\"\n rteTooltip\n rteTooltipPosition=\"right\"\n rteTooltipAlignment=\"center\"\n [id]=\"id()\"\n [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n [attr.role]=\"role()\"\n [rteTooltip]=\"label()\"\n [rteTooltipArrow]=\"false\"\n [rteTooltipGap]=\"12\"\n [rteTooltipShouldFocusTrigger]=\"false\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n </div>\n} @else {\n <div\n class=\"nav-item-container {{appearance()}}\"\n [id]=\"id()\"\n [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n [attr.role]=\"role()\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n </div>\n}\n\n<ng-template #contentTemplate>\n @if (link()) {\n <a\n class=\"nav-item\"\n [href]=\"link()!\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.aria-label]=\"label()\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\">\n <div class=\"nav-item-left\">\n @if (showIcon() && icon()) {\n <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n }\n @if (!collapsed()) {\n <span>{{ label() }}</span>\n }\n </div>\n <div class=\"nav-item-right\">\n @if (badge()) {\n <rte-badge\n [badgeType]=\"badge()!.badgeType || 'brand'\"\n [badgeSize]=\"badge()!.size || 'm'\"\n [badgeContent]=\"badge()!.content || 'number'\"\n [count]=\"badge()!.count\"\n [icon]=\"badge()!.icon || 'notification'\"\n [simpleBadge]=\"true\"\n />\n }\n </div>\n </a>\n } @else {\n <span\n class=\"nav-item\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.aria-label]=\"label()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\">\n <div class=\"nav-item-left\">\n @if (showIcon() && icon()) {\n <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n }\n @if (!collapsed()) {\n <span>{{ label() }}</span>\n }\n </div>\n <div class=\"nav-item-right\">\n @if (badge()) {\n <rte-badge\n [badgeType]=\"badge()!.badgeType || 'brand'\"\n [badgeSize]=\"badge()!.size || 'm'\"\n [badgeContent]=\"badge()!.content || 'number'\"\n [count]=\"badge()!.count\"\n [icon]=\"badge()!.icon || 'notification'\"\n [simpleBadge]=\"true\"\n />\n }\n </div>\n </span>\n }\n</ng-template>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.nav-item-container{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;width:100%;display:flex;justify-content:flex-start;gap:8px;padding:8px 6px;border-radius:4px;cursor:pointer;transition:background-color .3s ease;align-items:center;box-sizing:border-box;border-left:2px solid transparent;color:var(--content-brand-navigation-default)}.nav-item-container.neutral{color:var(--content-secondary)}.nav-item-container.neutral:hover{background:var(--background-neutral-navigation-hover);color:var(--content-primary)}.nav-item-container.neutral.active{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%);color:var(--content-brand-pressed)}.nav-item-container.neutral.nested{border-radius:0 4px 4px 0;border-left:1px solid var(--border-divider)}.nav-item-container.neutral.nested.active{border-left:1px solid var(--border-brand-navigation-active)}.nav-item-container:hover{background:var(--background-brand-navigation-hover);color:var(--content-brand-navigation-hover)}.nav-item-container.active{background:var(--background-brand-navigation-pressed);border-left:2px solid var(--border-brand-navigation-divider);color:var(--content-primary-inverse)}.nav-item-container:active.focused{outline:none}.nav-item-container .nav-item{display:flex;padding:0;align-items:center;gap:8px;flex:1 0 0;-webkit-user-select:none;user-select:none;outline:none;justify-content:space-between}.nav-item-container .nav-item:link,.nav-item-container .nav-item:visited,.nav-item-container .nav-item:link:hover,.nav-item-container .nav-item:visited:hover{text-decoration:none;color:inherit}.nav-item-container .nav-item .nav-item-left{display:flex;align-items:center;gap:8px}.nav-item-container .nav-item .nav-item-right{display:flex;align-items:center;gap:4px}.nav-item-container.focused{outline:1px solid var(--border-brand-focused);outline-offset:0}.nav-item-container.collapsed{padding:8px 12px;justify-content:center;border-left:none}.nav-item-container.collapsed .nav-item{justify-content:center;gap:0}.nav-item-container.nested{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;border-radius:0 4px 4px 0;border-left:1px solid var(--border-brand-navigation-divider);padding:4px 8px}.nav-item-container.nested.active{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge"] }, { kind: "directive", type: TooltipDirective, selector: "[rteTooltip]", inputs: ["rteTooltip", "rteTooltipPosition", "rteTooltipAlignment", "rteTooltipArrow", "rteTooltipShouldFocusTrigger", "rteTooltipGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2460
+ }
2461
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NavItemComponent, decorators: [{
2462
+ type: Component,
2463
+ args: [{ selector: "rte-nav-item", imports: [CommonModule, IconComponent, BadgeComponent, TooltipDirective], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (collapsed() && label()) {\n <div\n class=\"nav-item-container {{appearance()}}\"\n rteTooltip\n rteTooltipPosition=\"right\"\n rteTooltipAlignment=\"center\"\n [id]=\"id()\"\n [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n [attr.role]=\"role()\"\n [rteTooltip]=\"label()\"\n [rteTooltipArrow]=\"false\"\n [rteTooltipGap]=\"12\"\n [rteTooltipShouldFocusTrigger]=\"false\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n </div>\n} @else {\n <div\n class=\"nav-item-container {{appearance()}}\"\n [id]=\"id()\"\n [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n [attr.role]=\"role()\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n </div>\n}\n\n<ng-template #contentTemplate>\n @if (link()) {\n <a\n class=\"nav-item\"\n [href]=\"link()!\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.aria-label]=\"label()\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\">\n <div class=\"nav-item-left\">\n @if (showIcon() && icon()) {\n <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n }\n @if (!collapsed()) {\n <span>{{ label() }}</span>\n }\n </div>\n <div class=\"nav-item-right\">\n @if (badge()) {\n <rte-badge\n [badgeType]=\"badge()!.badgeType || 'brand'\"\n [badgeSize]=\"badge()!.size || 'm'\"\n [badgeContent]=\"badge()!.content || 'number'\"\n [count]=\"badge()!.count\"\n [icon]=\"badge()!.icon || 'notification'\"\n [simpleBadge]=\"true\"\n />\n }\n </div>\n </a>\n } @else {\n <span\n class=\"nav-item\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.aria-label]=\"label()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\">\n <div class=\"nav-item-left\">\n @if (showIcon() && icon()) {\n <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n }\n @if (!collapsed()) {\n <span>{{ label() }}</span>\n }\n </div>\n <div class=\"nav-item-right\">\n @if (badge()) {\n <rte-badge\n [badgeType]=\"badge()!.badgeType || 'brand'\"\n [badgeSize]=\"badge()!.size || 'm'\"\n [badgeContent]=\"badge()!.content || 'number'\"\n [count]=\"badge()!.count\"\n [icon]=\"badge()!.icon || 'notification'\"\n [simpleBadge]=\"true\"\n />\n }\n </div>\n </span>\n }\n</ng-template>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.nav-item-container{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;width:100%;display:flex;justify-content:flex-start;gap:8px;padding:8px 6px;border-radius:4px;cursor:pointer;transition:background-color .3s ease;align-items:center;box-sizing:border-box;border-left:2px solid transparent;color:var(--content-brand-navigation-default)}.nav-item-container.neutral{color:var(--content-secondary)}.nav-item-container.neutral:hover{background:var(--background-neutral-navigation-hover);color:var(--content-primary)}.nav-item-container.neutral.active{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%);color:var(--content-brand-pressed)}.nav-item-container.neutral.nested{border-radius:0 4px 4px 0;border-left:1px solid var(--border-divider)}.nav-item-container.neutral.nested.active{border-left:1px solid var(--border-brand-navigation-active)}.nav-item-container:hover{background:var(--background-brand-navigation-hover);color:var(--content-brand-navigation-hover)}.nav-item-container.active{background:var(--background-brand-navigation-pressed);border-left:2px solid var(--border-brand-navigation-divider);color:var(--content-primary-inverse)}.nav-item-container:active.focused{outline:none}.nav-item-container .nav-item{display:flex;padding:0;align-items:center;gap:8px;flex:1 0 0;-webkit-user-select:none;user-select:none;outline:none;justify-content:space-between}.nav-item-container .nav-item:link,.nav-item-container .nav-item:visited,.nav-item-container .nav-item:link:hover,.nav-item-container .nav-item:visited:hover{text-decoration:none;color:inherit}.nav-item-container .nav-item .nav-item-left{display:flex;align-items:center;gap:8px}.nav-item-container .nav-item .nav-item-right{display:flex;align-items:center;gap:4px}.nav-item-container.focused{outline:1px solid var(--border-brand-focused);outline-offset:0}.nav-item-container.collapsed{padding:8px 12px;justify-content:center;border-left:none}.nav-item-container.collapsed .nav-item{justify-content:center;gap:0}.nav-item-container.nested{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;border-radius:0 4px 4px 0;border-left:1px solid var(--border-brand-navigation-divider);padding:4px 8px}.nav-item-container.nested.active{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key)}\n"] }]
2464
+ }] });
2465
+
2466
+ function getNavTabIndex(parentMenuOpen) {
2467
+ return parentMenuOpen === false ? -1 : 0;
2468
+ }
2469
+ class NavMenuComponent {
2470
+ constructor() {
2471
+ this.id = input();
2472
+ this.icon = input();
2473
+ this.showIcon = input(true);
2474
+ this.label = input.required();
2475
+ this.collapsed = input(false);
2476
+ this.link = input();
2477
+ this.items = input.required();
2478
+ this.open = input(false);
2479
+ this.showMenuIcon = input(true);
2480
+ this.isNested = input(false);
2481
+ this.parentMenuOpen = input();
2482
+ this.appearance = input("brand");
2483
+ this.badge = input();
2484
+ this.showDivider = input(false);
2485
+ this.itemClick = output();
2486
+ this.openChange = output();
2487
+ this.hasNestedItems = computed(() => !!this.items().length);
2488
+ this.shouldShowMenu = computed(() => !this.collapsed() && this.hasNestedItems());
2489
+ this.tabIndex = computed(() => getNavTabIndex(this.parentMenuOpen()));
2490
+ this.dividerAppearance = computed(() => dividerAppearanceBySideNavAppearance[this.appearance()]);
2491
+ this.iconSize = computed(() => {
2492
+ return getNavItemLabelIconSize(this.isNested(), this.collapsed());
2493
+ });
2494
+ effect(() => {
2495
+ if (this.parentMenuOpen() === false && this.open()) {
2496
+ this.closeMenu();
2497
+ }
2498
+ }, { allowSignalWrites: true });
2499
+ }
2500
+ toggleMenu() {
2501
+ this.openChange.emit({ id: this.id() || this.label(), open: !this.open() });
2502
+ }
2503
+ handleEscape() {
2504
+ if (this.open()) {
2505
+ this.closeMenu();
2506
+ }
2507
+ }
2508
+ handleKeyDown(event) {
2509
+ if ([SPACE_KEY, ENTER_KEY].includes(event.key)) {
2510
+ event.preventDefault();
2511
+ this.toggleMenu();
2512
+ }
2513
+ if (event.key === ESCAPE_KEY) {
2514
+ event.preventDefault();
2515
+ this.handleEscape();
2516
+ }
2517
+ }
2518
+ hasNestedItemsForItem(item) {
2519
+ return !!item.items?.length;
2520
+ }
2521
+ handleMenuOpenChange(event) {
2522
+ const targetMenu = this.items().find((item) => item.id === event.id);
2523
+ if (targetMenu) {
2524
+ targetMenu.open = event.open;
2525
+ }
2526
+ }
2527
+ handleMenuClick(itemId) {
2528
+ const item = this.items().find((i) => i.id === itemId || i.label === itemId);
2529
+ if (item?.onClick) {
2530
+ item.onClick();
2531
+ }
2532
+ }
2533
+ closeMenu() {
2534
+ this.openChange.emit({ id: this.id() || this.label(), open: false });
2535
+ }
2536
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NavMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2537
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NavMenuComponent, isStandalone: true, selector: "rte-nav-menu", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showMenuIcon: { classPropertyName: "showMenuIcon", publicName: "showMenuIcon", isSignal: true, isRequired: false, transformFunction: null }, isNested: { classPropertyName: "isNested", publicName: "isNested", isSignal: true, isRequired: false, transformFunction: null }, parentMenuOpen: { classPropertyName: "parentMenuOpen", publicName: "parentMenuOpen", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", openChange: "openChange" }, ngImport: i0, template: "@if (collapsed() && label()) {\n <li\n class=\"nav-menu-container {{appearance()}}\"\n rteTooltip\n rteTooltipPosition=\"right\"\n rteTooltipAlignment=\"center\"\n [rteTooltipGap]=\"12\"\n [ngClass]=\"{ collapsed: collapsed(), open: open(), nested: isNested() }\"\n [rteTooltip]=\"label()\"\n [rteTooltipArrow]=\"false\"\n [rteTooltipShouldFocusTrigger]=\"false\">\n <ng-container [ngTemplateOutlet]=\"menuContentTemplate\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"nestedMenuTemplate\"></ng-container>\n </li>\n} @else {\n <li\n class=\"nav-menu-container {{appearance()}}\"\n [ngClass]=\"{ collapsed: collapsed(), open: open(), nested: isNested() }\">\n <ng-container [ngTemplateOutlet]=\"menuContentTemplate\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"nestedMenuTemplate\"></ng-container>\n </li>\n}\n\n<ng-template #menuContentTemplate>\n @if (link()) {\n <a\n class=\"nav-menu\"\n [href]=\"link()!\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.aria-label]=\"label()\"\n (click)=\"toggleMenu()\">\n <div class=\"menu-content-left\">\n @if (showIcon() && icon()) {\n <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n }\n @if (!collapsed()) {\n <span>{{ label() }}</span>\n }\n </div>\n <div class=\"menu-content-right\">\n @if (badge()) {\n <rte-badge\n [badgeType]=\"badge()!.badgeType || 'brand'\"\n [badgeSize]=\"badge()!.size || 'm'\"\n [badgeContent]=\"badge()!.content || 'number'\"\n [count]=\"badge()!.count\"\n [icon]=\"badge()!.icon || 'notification'\"\n [simpleBadge]=\"true\"\n />\n }\n @if (shouldShowMenu() && showMenuIcon()) {\n <rte-icon name=\"arrow-chevron-right\" class=\"menu-icon\" [ngClass]=\"{ 'menu-icon-open': open() }\" />\n }\n </div>\n </a>\n } @else {\n <span\n class=\"nav-menu\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.aria-label]=\"label()\"\n (click)=\"toggleMenu()\"\n (keydown)=\"handleKeyDown($event)\">\n <div class=\"menu-content-left\">\n @if (showIcon() && icon()) {\n <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n }\n @if (!collapsed()) {\n <span>{{ label() }}</span>\n }\n </div>\n <div class=\"menu-content-right\">\n @if (badge()) {\n <rte-badge\n [badgeType]=\"badge()!.badgeType || 'brand'\"\n [badgeSize]=\"badge()!.size || 'm'\"\n [badgeContent]=\"badge()!.content || 'number'\"\n [count]=\"badge()!.count\"\n [icon]=\"badge()!.icon || 'notification'\"\n [simpleBadge]=\"true\"\n />\n }\n @if (shouldShowMenu() && showMenuIcon()) {\n <rte-icon name=\"arrow-chevron-right\" class=\"menu-icon\" [ngClass]=\"{ 'menu-icon-open': open() }\" />\n }\n </div>\n </span>\n }\n</ng-template>\n\n<ng-template #nestedMenuTemplate>\n @if (shouldShowMenu()) {\n <ul class=\"nested-menu\" [ngClass]=\"{ 'nested-menu-open': open() }\">\n @if (open()) {\n @for (item of items(); track item.id || item.label) {\n @if (hasNestedItemsForItem(item)) {\n <rte-nav-menu\n [id]=\"item.id\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n [showIcon]=\"item.showIcon ?? true\"\n [collapsed]=\"collapsed()\"\n [link]=\"item.link\"\n [items]=\"item.items || []\"\n [showMenuIcon]=\"showMenuIcon()\"\n [isNested]=\"true\"\n [open]=\"item.open\"\n [parentMenuOpen]=\"open()\"\n [appearance]=\"appearance()\"\n [showDivider]=\"item.showDivider!\"\n [badge]=\"item.badge\"\n (itemClick)=\"handleMenuClick($event)\"\n (openChange)=\"handleMenuOpenChange($event)\"\n />\n } @else {\n <li>\n <rte-nav-item\n [id]=\"item.id\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n [showIcon]=\"item.showIcon ?? true\"\n [collapsed]=\"collapsed()\"\n [link]=\"item.link\"\n [isNested]=\"true\"\n [parentMenuOpen]=\"open()\"\n [appearance]=\"appearance()\"\n [showDivider]=\"item.showDivider!\"\n [badge]=\"item.badge\"\n (itemClick)=\"itemClick.emit($event)\" />\n </li>\n @if (item.showDivider) {\n <rte-divider [appearance]=\"dividerAppearance()\" />\n }\n }\n }\n }\n </ul>\n }\n</ng-template>\n\n@if (showDivider()) {\n <rte-divider [appearance]=\"dividerAppearance()\" />\n}\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{display:contents}.nav-menu-container{width:100%;display:flex;flex-direction:column;justify-content:flex-start;border-radius:4px;transition:background-color .3s;box-sizing:border-box}.nav-menu-container.neutral .nav-menu{color:var(--content-secondary)}.nav-menu-container.neutral .nav-menu:hover{background:var(--background-neutral-navigation-hover);color:var(--content-primary)}.nav-menu-container.neutral .nav-menu.focused{outline:none}.nav-menu-container.neutral.nested .nav-menu{border-radius:0 4px 4px 0;border-left:1px solid var(--border-divider)}.nav-menu-container .nav-menu{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;display:flex;padding:8px 6px;align-items:center;gap:8px;flex:1 0 0;-webkit-user-select:none;user-select:none;justify-content:space-between;width:100%;box-sizing:border-box;cursor:pointer;border-left:2px solid transparent;color:var(--content-brand-navigation-default)}.nav-menu-container .nav-menu .menu-content-left{display:flex;align-items:center;gap:8px}.nav-menu-container .nav-menu .menu-content-right{display:flex;align-items:center;gap:4px}.nav-menu-container .nav-menu:hover{border-radius:4px;background:var(--background-brand-navigation-hover);color:var(--content-brand-navigation-hover)}.nav-menu-container .nav-menu:link,.nav-menu-container .nav-menu:link:hover{text-decoration:none;color:inherit}.nav-menu-container .nav-menu:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:0;border-radius:4px}.nav-menu-container.collapsed .nav-menu{padding:8px 12px;justify-content:center;gap:0;border-left:none}.nav-menu-container.nested .nav-menu{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;border-radius:0 4px 4px 0;border-left:1px solid var(--border-brand-navigation-divider);padding:4px 8px}.nav-menu-container .menu-icon{flex-shrink:0;transition:transform .2s;margin-left:auto}.nav-menu-container .menu-icon-open{transform:rotate(90deg)}.nav-menu-container .nested-menu{list-style:none;margin:0;max-height:0;overflow:hidden;transition:max-height .3s,padding .3s;padding:0 0 0 16px;gap:0}.nav-menu-container .nested-menu.nested-menu-open{max-height:1000px;padding-top:4px;padding-bottom:4px}.nav-menu-container .icon{flex-shrink:0}\n"], dependencies: [{ kind: "component", type: NavMenuComponent, selector: "rte-nav-menu", inputs: ["id", "icon", "showIcon", "label", "collapsed", "link", "items", "open", "showMenuIcon", "isNested", "parentMenuOpen", "appearance", "badge", "showDivider"], outputs: ["itemClick", "openChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge"] }, { kind: "component", type: DividerComponent, selector: "rte-divider", inputs: ["orientation", "thickness", "appearance", "endPoint"] }, { kind: "component", type: NavItemComponent, selector: "rte-nav-item", inputs: ["id", "icon", "showIcon", "label", "collapsed", "link", "appearance", "active", "badge", "isNested", "parentMenuOpen", "role", "showDivider"], outputs: ["itemClick"] }, { kind: "directive", type: TooltipDirective, selector: "[rteTooltip]", inputs: ["rteTooltip", "rteTooltipPosition", "rteTooltipAlignment", "rteTooltipArrow", "rteTooltipShouldFocusTrigger", "rteTooltipGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2538
+ }
2539
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NavMenuComponent, decorators: [{
2540
+ type: Component,
2541
+ args: [{ selector: "rte-nav-menu", imports: [CommonModule, IconComponent, BadgeComponent, DividerComponent, NavItemComponent, TooltipDirective], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (collapsed() && label()) {\n <li\n class=\"nav-menu-container {{appearance()}}\"\n rteTooltip\n rteTooltipPosition=\"right\"\n rteTooltipAlignment=\"center\"\n [rteTooltipGap]=\"12\"\n [ngClass]=\"{ collapsed: collapsed(), open: open(), nested: isNested() }\"\n [rteTooltip]=\"label()\"\n [rteTooltipArrow]=\"false\"\n [rteTooltipShouldFocusTrigger]=\"false\">\n <ng-container [ngTemplateOutlet]=\"menuContentTemplate\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"nestedMenuTemplate\"></ng-container>\n </li>\n} @else {\n <li\n class=\"nav-menu-container {{appearance()}}\"\n [ngClass]=\"{ collapsed: collapsed(), open: open(), nested: isNested() }\">\n <ng-container [ngTemplateOutlet]=\"menuContentTemplate\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"nestedMenuTemplate\"></ng-container>\n </li>\n}\n\n<ng-template #menuContentTemplate>\n @if (link()) {\n <a\n class=\"nav-menu\"\n [href]=\"link()!\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.aria-label]=\"label()\"\n (click)=\"toggleMenu()\">\n <div class=\"menu-content-left\">\n @if (showIcon() && icon()) {\n <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n }\n @if (!collapsed()) {\n <span>{{ label() }}</span>\n }\n </div>\n <div class=\"menu-content-right\">\n @if (badge()) {\n <rte-badge\n [badgeType]=\"badge()!.badgeType || 'brand'\"\n [badgeSize]=\"badge()!.size || 'm'\"\n [badgeContent]=\"badge()!.content || 'number'\"\n [count]=\"badge()!.count\"\n [icon]=\"badge()!.icon || 'notification'\"\n [simpleBadge]=\"true\"\n />\n }\n @if (shouldShowMenu() && showMenuIcon()) {\n <rte-icon name=\"arrow-chevron-right\" class=\"menu-icon\" [ngClass]=\"{ 'menu-icon-open': open() }\" />\n }\n </div>\n </a>\n } @else {\n <span\n class=\"nav-menu\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.aria-label]=\"label()\"\n (click)=\"toggleMenu()\"\n (keydown)=\"handleKeyDown($event)\">\n <div class=\"menu-content-left\">\n @if (showIcon() && icon()) {\n <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n }\n @if (!collapsed()) {\n <span>{{ label() }}</span>\n }\n </div>\n <div class=\"menu-content-right\">\n @if (badge()) {\n <rte-badge\n [badgeType]=\"badge()!.badgeType || 'brand'\"\n [badgeSize]=\"badge()!.size || 'm'\"\n [badgeContent]=\"badge()!.content || 'number'\"\n [count]=\"badge()!.count\"\n [icon]=\"badge()!.icon || 'notification'\"\n [simpleBadge]=\"true\"\n />\n }\n @if (shouldShowMenu() && showMenuIcon()) {\n <rte-icon name=\"arrow-chevron-right\" class=\"menu-icon\" [ngClass]=\"{ 'menu-icon-open': open() }\" />\n }\n </div>\n </span>\n }\n</ng-template>\n\n<ng-template #nestedMenuTemplate>\n @if (shouldShowMenu()) {\n <ul class=\"nested-menu\" [ngClass]=\"{ 'nested-menu-open': open() }\">\n @if (open()) {\n @for (item of items(); track item.id || item.label) {\n @if (hasNestedItemsForItem(item)) {\n <rte-nav-menu\n [id]=\"item.id\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n [showIcon]=\"item.showIcon ?? true\"\n [collapsed]=\"collapsed()\"\n [link]=\"item.link\"\n [items]=\"item.items || []\"\n [showMenuIcon]=\"showMenuIcon()\"\n [isNested]=\"true\"\n [open]=\"item.open\"\n [parentMenuOpen]=\"open()\"\n [appearance]=\"appearance()\"\n [showDivider]=\"item.showDivider!\"\n [badge]=\"item.badge\"\n (itemClick)=\"handleMenuClick($event)\"\n (openChange)=\"handleMenuOpenChange($event)\"\n />\n } @else {\n <li>\n <rte-nav-item\n [id]=\"item.id\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n [showIcon]=\"item.showIcon ?? true\"\n [collapsed]=\"collapsed()\"\n [link]=\"item.link\"\n [isNested]=\"true\"\n [parentMenuOpen]=\"open()\"\n [appearance]=\"appearance()\"\n [showDivider]=\"item.showDivider!\"\n [badge]=\"item.badge\"\n (itemClick)=\"itemClick.emit($event)\" />\n </li>\n @if (item.showDivider) {\n <rte-divider [appearance]=\"dividerAppearance()\" />\n }\n }\n }\n }\n </ul>\n }\n</ng-template>\n\n@if (showDivider()) {\n <rte-divider [appearance]=\"dividerAppearance()\" />\n}\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{display:contents}.nav-menu-container{width:100%;display:flex;flex-direction:column;justify-content:flex-start;border-radius:4px;transition:background-color .3s;box-sizing:border-box}.nav-menu-container.neutral .nav-menu{color:var(--content-secondary)}.nav-menu-container.neutral .nav-menu:hover{background:var(--background-neutral-navigation-hover);color:var(--content-primary)}.nav-menu-container.neutral .nav-menu.focused{outline:none}.nav-menu-container.neutral.nested .nav-menu{border-radius:0 4px 4px 0;border-left:1px solid var(--border-divider)}.nav-menu-container .nav-menu{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;display:flex;padding:8px 6px;align-items:center;gap:8px;flex:1 0 0;-webkit-user-select:none;user-select:none;justify-content:space-between;width:100%;box-sizing:border-box;cursor:pointer;border-left:2px solid transparent;color:var(--content-brand-navigation-default)}.nav-menu-container .nav-menu .menu-content-left{display:flex;align-items:center;gap:8px}.nav-menu-container .nav-menu .menu-content-right{display:flex;align-items:center;gap:4px}.nav-menu-container .nav-menu:hover{border-radius:4px;background:var(--background-brand-navigation-hover);color:var(--content-brand-navigation-hover)}.nav-menu-container .nav-menu:link,.nav-menu-container .nav-menu:link:hover{text-decoration:none;color:inherit}.nav-menu-container .nav-menu:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:0;border-radius:4px}.nav-menu-container.collapsed .nav-menu{padding:8px 12px;justify-content:center;gap:0;border-left:none}.nav-menu-container.nested .nav-menu{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;border-radius:0 4px 4px 0;border-left:1px solid var(--border-brand-navigation-divider);padding:4px 8px}.nav-menu-container .menu-icon{flex-shrink:0;transition:transform .2s;margin-left:auto}.nav-menu-container .menu-icon-open{transform:rotate(90deg)}.nav-menu-container .nested-menu{list-style:none;margin:0;max-height:0;overflow:hidden;transition:max-height .3s,padding .3s;padding:0 0 0 16px;gap:0}.nav-menu-container .nested-menu.nested-menu-open{max-height:1000px;padding-top:4px;padding-bottom:4px}.nav-menu-container .icon{flex-shrink:0}\n"] }]
2542
+ }], ctorParameters: () => [] });
2543
+
2544
+ const TRANSITION_DURATION = 300;
2545
+ class SideNavComponent {
2546
+ constructor() {
2547
+ this.size = input("m");
2548
+ this.collapsible = input(false);
2549
+ this.headerConfig = input();
2550
+ this.items = input([]);
2551
+ this.footerItems = input();
2552
+ this.collapsed = input(false);
2553
+ this.appearance = input("brand");
2554
+ this.isCollapsed = signal(false);
2555
+ this.shouldShowTitle = signal(true);
2556
+ this.itemClicked = output();
2557
+ this.titleTimeoutId = null;
2558
+ this.collapseIcon = computed(() => {
2559
+ return this.isCollapsed() ? "arrow-double-right" : "arrow-double-left";
2560
+ });
2561
+ this.dividerAppearance = computed(() => {
2562
+ return dividerAppearanceBySideNavAppearance[this.appearance()];
2563
+ });
2564
+ effect(() => {
2565
+ this.isCollapsed.set(this.collapsed());
2566
+ }, { allowSignalWrites: true });
2567
+ effect(() => {
2568
+ if (this.titleTimeoutId) {
2569
+ clearTimeout(this.titleTimeoutId);
2570
+ this.titleTimeoutId = null;
2571
+ }
2572
+ if (this.isCollapsed()) {
2573
+ this.shouldShowTitle.set(false);
2574
+ }
2575
+ else {
2576
+ this.titleTimeoutId = setTimeout(() => {
2577
+ this.shouldShowTitle.set(true);
2578
+ this.titleTimeoutId = null;
2579
+ }, TRANSITION_DURATION);
2580
+ }
2581
+ }, { allowSignalWrites: true });
2582
+ }
2583
+ handleHeaderKeyDown(event) {
2584
+ if ([SPACE_KEY, ENTER_KEY].includes(event.key)) {
2585
+ event.preventDefault();
2586
+ const config = this.headerConfig();
2587
+ if (config?.onClick) {
2588
+ config.onClick();
2589
+ }
2590
+ }
2591
+ }
2592
+ handleHeaderClick() {
2593
+ const config = this.headerConfig();
2594
+ if (config?.onClick) {
2595
+ config.onClick();
2596
+ }
2597
+ }
2598
+ hasNestedItems(item) {
2599
+ return !!item.items?.length;
2600
+ }
2601
+ handleItemClick(itemId) {
2602
+ this.itemClicked.emit(itemId);
2603
+ }
2604
+ handleFooterItemClick(itemId) {
2605
+ this.itemClicked.emit(itemId);
2606
+ }
2607
+ handleMenuOpenChange(event) {
2608
+ const targetMenu = this.items().find((item) => item.id === event.id);
2609
+ if (targetMenu) {
2610
+ targetMenu.open = event.open;
2611
+ }
2612
+ }
2613
+ handleFooterMenuOpenChange(event) {
2614
+ const targetMenu = this.footerItems()?.find((item) => item.id === event.id);
2615
+ if (targetMenu) {
2616
+ targetMenu.open = event.open;
2617
+ }
2618
+ }
2619
+ handleCollapseClick() {
2620
+ this.isCollapsed.set(!this.isCollapsed());
2621
+ }
2622
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SideNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2623
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SideNavComponent, isStandalone: true, selector: "rte-side-nav", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, headerConfig: { classPropertyName: "headerConfig", publicName: "headerConfig", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, footerItems: { classPropertyName: "footerItems", publicName: "footerItems", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClicked: "itemClicked" }, ngImport: i0, template: "<rte-base-side-nav\n [size]=\"size()\"\n [collapsed]=\"isCollapsed()\"\n [appearance]=\"appearance()\">\n <div side-nav-header>\n <div class=\"side-nav-header-container\">\n <div class=\"side-nav-header {{appearance()}}\" [ngClass]=\"{ collapsed: isCollapsed() }\">\n @if (headerConfig()?.link) {\n <a\n class=\"side-nav-header-title-container\"\n [href]=\"headerConfig()!.link!\"\n [attr.aria-label]=\"headerConfig()?.ariaLabel\"\n (click)=\"handleHeaderClick()\">\n <div class=\"side-nav-header-title\">\n <div class=\"side-nav-header-identifier\">{{ headerConfig()?.identifier }}</div>\n @if (!isCollapsed()) {\n <h1 [ngClass]=\"{ 'hidden': !shouldShowTitle() }\">{{ headerConfig()?.title }}</h1>\n }\n </div>\n </a>\n } @else if (headerConfig()?.onClick) {\n <div\n class=\"side-nav-header-title-container\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"headerConfig()?.ariaLabel\"\n (click)=\"handleHeaderClick()\"\n (keydown)=\"handleHeaderKeyDown($event)\">\n <div class=\"side-nav-header-title\">\n <div class=\"side-nav-header-identifier\">{{ headerConfig()?.identifier }}</div>\n @if (!isCollapsed()) {\n <h1 [ngClass]=\"{ 'hidden': !shouldShowTitle() }\">{{ headerConfig()?.title }}</h1>\n }\n </div>\n </div>\n } @else {\n <div class=\"side-nav-header-title-container\">\n <div class=\"side-nav-header-title\">\n <div class=\"side-nav-header-identifier\">{{ headerConfig()?.identifier }}</div>\n @if (!isCollapsed()) {\n <h1 [ngClass]=\"{ 'hidden': !shouldShowTitle() }\">{{ headerConfig()?.title }}</h1>\n }\n </div>\n </div>\n }\n <div class=\"side-nav-header-version\" [ngClass]=\"{ 'hidden': !shouldShowTitle() }\">\n <span>{{ headerConfig()?.version }}</span>\n </div>\n </div>\n <rte-divider [appearance]=\"dividerAppearance()\"/>\n </div>\n </div>\n <div side-nav-body>\n <div class=\"side-nav-body\">\n <ul>\n @for (item of items(); track item.label) {\n @if (hasNestedItems(item)) {\n <rte-nav-menu\n [id]=\"item.id\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n [showIcon]=\"item.showIcon ?? true\"\n [collapsed]=\"isCollapsed()\"\n [link]=\"item.link\"\n [open]=\"item.open\"\n [items]=\"item.items || []\"\n [appearance]=\"appearance()\"\n [badge]=\"item.badge\"\n [showDivider]=\"item.showDivider!\"\n (openChange)=\"handleMenuOpenChange($event)\"\n />\n } @else {\n <li>\n <rte-nav-item\n [id]=\"item.id\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n [showIcon]=\"item.showIcon ?? true\"\n [collapsed]=\"isCollapsed()\"\n [link]=\"item.link\"\n [appearance]=\"appearance()\"\n [active]=\"item.active ?? false\"\n [badge]=\"item.badge\"\n (itemClick)=\"handleItemClick(item.id || item.label)\"></rte-nav-item>\n </li>\n @if (item.showDivider) {\n <rte-divider [appearance]=\"dividerAppearance()\" />\n }\n }\n }\n </ul>\n </div>\n </div>\n @if (footerItems()?.length || collapsible()) {\n <div side-nav-footer>\n <div class=\"side-nav-footer-container\">\n @if (footerItems()?.length) {\n <div class=\"side-nav-footer-items\">\n <ul>\n @for (item of footerItems()!; track item.id || item.label) {\n @if (hasNestedItems(item)) {\n <rte-nav-menu\n [id]=\"item.id\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n [showIcon]=\"item.showIcon ?? true\"\n [collapsed]=\"isCollapsed()\"\n [link]=\"item.link\"\n [open]=\"item.open\"\n [items]=\"item.items || []\"\n [appearance]=\"appearance()\"\n [badge]=\"item.badge\"\n [showDivider]=\"item.showDivider!\"\n (openChange)=\"handleFooterMenuOpenChange($event)\"\n />\n } @else {\n <li>\n <rte-nav-item\n [id]=\"item.id\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n [showIcon]=\"item.showIcon ?? true\"\n [collapsed]=\"isCollapsed()\"\n [link]=\"item.link\"\n [appearance]=\"appearance()\"\n [active]=\"item.active ?? false\"\n [badge]=\"item.badge\"\n (itemClick)=\"handleFooterItemClick(item.id || item.label)\"></rte-nav-item>\n </li>\n @if (item.showDivider) {\n <rte-divider [appearance]=\"dividerAppearance()\" />\n }\n }\n }\n </ul>\n </div>\n }\n <rte-divider [appearance]=\"dividerAppearance()\"/>\n @if (collapsible()) {\n <div class=\"side-nav-footer\">\n <div class=\"collapsible-section\">\n <ul>\n <li>\n <rte-nav-item\n [label]=\"isCollapsed() ? 'Ouvrir le menu' : 'R\u00E9duire le menu'\"\n [icon]=\"collapseIcon()\"\n [collapsed]=\"isCollapsed()\"\n [appearance]=\"appearance()\"\n (itemClick)=\"handleCollapseClick()\"\n />\n </li>\n </ul>\n </div>\n </div>\n }\n </div>\n </div>\n }\n <div side-nav-content>\n <ng-content select=\"[content]\"></ng-content>\n </div>\n</rte-base-side-nav>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.side-nav-header-container{display:flex;padding:4px;flex-direction:column;justify-content:center;align-items:flex-start;flex-shrink:0;align-self:stretch;height:120px;min-height:120px;max-height:120px}.side-nav-header-container.collapsed{align-items:center;justify-content:center;padding:4px}.side-nav-header{display:flex;position:relative;padding:20px 8px;flex-direction:column;align-items:flex-start;gap:4px;flex:1 0 0;align-self:stretch;height:120px;transition:opacity .3s}.side-nav-header.collapsed{padding:8px;justify-content:center;align-items:center;flex:1 0 0;align-self:stretch}.side-nav-header.collapsed .side-nav-header-title-container{padding:8px;justify-content:center;align-items:center;flex-grow:0;gap:0;align-self:auto}.side-nav-header.collapsed .side-nav-header-title-container .side-nav-header-title{gap:0}.side-nav-header.neutral .side-nav-header-title-container[href]:hover,.side-nav-header.neutral .side-nav-header-title-container[role=button]:hover{background:var(--background-neutral-navigation-hover);box-shadow:0 1px 2px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient)}.side-nav-header .side-nav-header-title-container{display:flex;padding:0 8px;align-items:center;gap:8px;flex:1 0 0;align-self:stretch;text-decoration:none;color:inherit}.side-nav-header .side-nav-header-title-container[href],.side-nav-header .side-nav-header-title-container[role=button]{cursor:pointer}.side-nav-header .side-nav-header-title-container[href]:hover,.side-nav-header .side-nav-header-title-container[role=button]:hover{border-radius:4px;opacity:100%;background:var(--background-brand-navigation-hover)}.side-nav-header .side-nav-header-title-container .side-nav-header-title{display:flex;align-items:center;gap:8px}.side-nav-header .side-nav-header-title-container .side-nav-header-title .side-nav-header-identifier{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1 0 0;align-self:stretch;color:var(--content-brand-navigation-default);text-align:center;-webkit-user-select:none;user-select:none;border-radius:4px;background:var(--background-brand-navigation-pressed);min-width:24px;height:24px}.side-nav-header .side-nav-header-title-container .side-nav-header-title h1{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;-webkit-user-select:none;user-select:none;align-self:stretch;margin:0;transition:opacity .3s}.side-nav-header .side-nav-header-title-container .side-nav-header-title h1.hidden{opacity:0;max-height:0;padding:0;margin:0}.side-nav-header .side-nav-header-version{display:flex;position:absolute;bottom:4px;right:8px;flex-direction:column;justify-content:flex-end;align-items:flex-end;gap:0px;align-self:stretch;font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:10px;line-height:14px;letter-spacing:0px;transition:opacity .3s,max-height .3s;max-height:50px;overflow:hidden;opacity:1}.side-nav-header .side-nav-header-version.hidden{opacity:0;max-height:0;padding:0;margin:0}.side-nav-body{display:flex;padding:16px 8px;flex-direction:column;align-items:flex-start;gap:8px;flex:1 0 0;overflow-x:hidden;overflow-y:auto;width:100%;box-sizing:border-box}.side-nav-body ul{list-style:none;padding:0;margin:0;width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:8px}.side-nav-footer-container{padding:8px}.side-nav-footer-container .side-nav-footer{display:flex;flex-direction:column;align-items:center;justify-content:space-between;box-sizing:border-box;width:100%;margin-top:4px}.side-nav-footer-items{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;box-sizing:border-box;margin-bottom:8px}.side-nav-footer-items ul{list-style:none;padding:0;margin:0;width:100%;box-sizing:border-box}.collapsible-section{display:flex;padding:4px 0;flex-direction:column;align-items:flex-start;align-self:stretch}.collapsible-section ul{list-style:none;padding:0;margin:0;width:100%;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BaseSideNavComponent, selector: "rte-base-side-nav", inputs: ["size", "appearance", "collapsed", "showHeader", "showFooter"] }, { kind: "component", type: DividerComponent, selector: "rte-divider", inputs: ["orientation", "thickness", "appearance", "endPoint"] }, { kind: "component", type: NavItemComponent, selector: "rte-nav-item", inputs: ["id", "icon", "showIcon", "label", "collapsed", "link", "appearance", "active", "badge", "isNested", "parentMenuOpen", "role", "showDivider"], outputs: ["itemClick"] }, { kind: "component", type: NavMenuComponent, selector: "rte-nav-menu", inputs: ["id", "icon", "showIcon", "label", "collapsed", "link", "items", "open", "showMenuIcon", "isNested", "parentMenuOpen", "appearance", "badge", "showDivider"], outputs: ["itemClick", "openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2624
+ }
2625
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SideNavComponent, decorators: [{
2626
+ type: Component,
2627
+ args: [{ selector: "rte-side-nav", imports: [CommonModule, BaseSideNavComponent, DividerComponent, NavItemComponent, NavMenuComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<rte-base-side-nav\n [size]=\"size()\"\n [collapsed]=\"isCollapsed()\"\n [appearance]=\"appearance()\">\n <div side-nav-header>\n <div class=\"side-nav-header-container\">\n <div class=\"side-nav-header {{appearance()}}\" [ngClass]=\"{ collapsed: isCollapsed() }\">\n @if (headerConfig()?.link) {\n <a\n class=\"side-nav-header-title-container\"\n [href]=\"headerConfig()!.link!\"\n [attr.aria-label]=\"headerConfig()?.ariaLabel\"\n (click)=\"handleHeaderClick()\">\n <div class=\"side-nav-header-title\">\n <div class=\"side-nav-header-identifier\">{{ headerConfig()?.identifier }}</div>\n @if (!isCollapsed()) {\n <h1 [ngClass]=\"{ 'hidden': !shouldShowTitle() }\">{{ headerConfig()?.title }}</h1>\n }\n </div>\n </a>\n } @else if (headerConfig()?.onClick) {\n <div\n class=\"side-nav-header-title-container\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"headerConfig()?.ariaLabel\"\n (click)=\"handleHeaderClick()\"\n (keydown)=\"handleHeaderKeyDown($event)\">\n <div class=\"side-nav-header-title\">\n <div class=\"side-nav-header-identifier\">{{ headerConfig()?.identifier }}</div>\n @if (!isCollapsed()) {\n <h1 [ngClass]=\"{ 'hidden': !shouldShowTitle() }\">{{ headerConfig()?.title }}</h1>\n }\n </div>\n </div>\n } @else {\n <div class=\"side-nav-header-title-container\">\n <div class=\"side-nav-header-title\">\n <div class=\"side-nav-header-identifier\">{{ headerConfig()?.identifier }}</div>\n @if (!isCollapsed()) {\n <h1 [ngClass]=\"{ 'hidden': !shouldShowTitle() }\">{{ headerConfig()?.title }}</h1>\n }\n </div>\n </div>\n }\n <div class=\"side-nav-header-version\" [ngClass]=\"{ 'hidden': !shouldShowTitle() }\">\n <span>{{ headerConfig()?.version }}</span>\n </div>\n </div>\n <rte-divider [appearance]=\"dividerAppearance()\"/>\n </div>\n </div>\n <div side-nav-body>\n <div class=\"side-nav-body\">\n <ul>\n @for (item of items(); track item.label) {\n @if (hasNestedItems(item)) {\n <rte-nav-menu\n [id]=\"item.id\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n [showIcon]=\"item.showIcon ?? true\"\n [collapsed]=\"isCollapsed()\"\n [link]=\"item.link\"\n [open]=\"item.open\"\n [items]=\"item.items || []\"\n [appearance]=\"appearance()\"\n [badge]=\"item.badge\"\n [showDivider]=\"item.showDivider!\"\n (openChange)=\"handleMenuOpenChange($event)\"\n />\n } @else {\n <li>\n <rte-nav-item\n [id]=\"item.id\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n [showIcon]=\"item.showIcon ?? true\"\n [collapsed]=\"isCollapsed()\"\n [link]=\"item.link\"\n [appearance]=\"appearance()\"\n [active]=\"item.active ?? false\"\n [badge]=\"item.badge\"\n (itemClick)=\"handleItemClick(item.id || item.label)\"></rte-nav-item>\n </li>\n @if (item.showDivider) {\n <rte-divider [appearance]=\"dividerAppearance()\" />\n }\n }\n }\n </ul>\n </div>\n </div>\n @if (footerItems()?.length || collapsible()) {\n <div side-nav-footer>\n <div class=\"side-nav-footer-container\">\n @if (footerItems()?.length) {\n <div class=\"side-nav-footer-items\">\n <ul>\n @for (item of footerItems()!; track item.id || item.label) {\n @if (hasNestedItems(item)) {\n <rte-nav-menu\n [id]=\"item.id\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n [showIcon]=\"item.showIcon ?? true\"\n [collapsed]=\"isCollapsed()\"\n [link]=\"item.link\"\n [open]=\"item.open\"\n [items]=\"item.items || []\"\n [appearance]=\"appearance()\"\n [badge]=\"item.badge\"\n [showDivider]=\"item.showDivider!\"\n (openChange)=\"handleFooterMenuOpenChange($event)\"\n />\n } @else {\n <li>\n <rte-nav-item\n [id]=\"item.id\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n [showIcon]=\"item.showIcon ?? true\"\n [collapsed]=\"isCollapsed()\"\n [link]=\"item.link\"\n [appearance]=\"appearance()\"\n [active]=\"item.active ?? false\"\n [badge]=\"item.badge\"\n (itemClick)=\"handleFooterItemClick(item.id || item.label)\"></rte-nav-item>\n </li>\n @if (item.showDivider) {\n <rte-divider [appearance]=\"dividerAppearance()\" />\n }\n }\n }\n </ul>\n </div>\n }\n <rte-divider [appearance]=\"dividerAppearance()\"/>\n @if (collapsible()) {\n <div class=\"side-nav-footer\">\n <div class=\"collapsible-section\">\n <ul>\n <li>\n <rte-nav-item\n [label]=\"isCollapsed() ? 'Ouvrir le menu' : 'R\u00E9duire le menu'\"\n [icon]=\"collapseIcon()\"\n [collapsed]=\"isCollapsed()\"\n [appearance]=\"appearance()\"\n (itemClick)=\"handleCollapseClick()\"\n />\n </li>\n </ul>\n </div>\n </div>\n }\n </div>\n </div>\n }\n <div side-nav-content>\n <ng-content select=\"[content]\"></ng-content>\n </div>\n</rte-base-side-nav>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.side-nav-header-container{display:flex;padding:4px;flex-direction:column;justify-content:center;align-items:flex-start;flex-shrink:0;align-self:stretch;height:120px;min-height:120px;max-height:120px}.side-nav-header-container.collapsed{align-items:center;justify-content:center;padding:4px}.side-nav-header{display:flex;position:relative;padding:20px 8px;flex-direction:column;align-items:flex-start;gap:4px;flex:1 0 0;align-self:stretch;height:120px;transition:opacity .3s}.side-nav-header.collapsed{padding:8px;justify-content:center;align-items:center;flex:1 0 0;align-self:stretch}.side-nav-header.collapsed .side-nav-header-title-container{padding:8px;justify-content:center;align-items:center;flex-grow:0;gap:0;align-self:auto}.side-nav-header.collapsed .side-nav-header-title-container .side-nav-header-title{gap:0}.side-nav-header.neutral .side-nav-header-title-container[href]:hover,.side-nav-header.neutral .side-nav-header-title-container[role=button]:hover{background:var(--background-neutral-navigation-hover);box-shadow:0 1px 2px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient)}.side-nav-header .side-nav-header-title-container{display:flex;padding:0 8px;align-items:center;gap:8px;flex:1 0 0;align-self:stretch;text-decoration:none;color:inherit}.side-nav-header .side-nav-header-title-container[href],.side-nav-header .side-nav-header-title-container[role=button]{cursor:pointer}.side-nav-header .side-nav-header-title-container[href]:hover,.side-nav-header .side-nav-header-title-container[role=button]:hover{border-radius:4px;opacity:100%;background:var(--background-brand-navigation-hover)}.side-nav-header .side-nav-header-title-container .side-nav-header-title{display:flex;align-items:center;gap:8px}.side-nav-header .side-nav-header-title-container .side-nav-header-title .side-nav-header-identifier{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1 0 0;align-self:stretch;color:var(--content-brand-navigation-default);text-align:center;-webkit-user-select:none;user-select:none;border-radius:4px;background:var(--background-brand-navigation-pressed);min-width:24px;height:24px}.side-nav-header .side-nav-header-title-container .side-nav-header-title h1{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;-webkit-user-select:none;user-select:none;align-self:stretch;margin:0;transition:opacity .3s}.side-nav-header .side-nav-header-title-container .side-nav-header-title h1.hidden{opacity:0;max-height:0;padding:0;margin:0}.side-nav-header .side-nav-header-version{display:flex;position:absolute;bottom:4px;right:8px;flex-direction:column;justify-content:flex-end;align-items:flex-end;gap:0px;align-self:stretch;font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:10px;line-height:14px;letter-spacing:0px;transition:opacity .3s,max-height .3s;max-height:50px;overflow:hidden;opacity:1}.side-nav-header .side-nav-header-version.hidden{opacity:0;max-height:0;padding:0;margin:0}.side-nav-body{display:flex;padding:16px 8px;flex-direction:column;align-items:flex-start;gap:8px;flex:1 0 0;overflow-x:hidden;overflow-y:auto;width:100%;box-sizing:border-box}.side-nav-body ul{list-style:none;padding:0;margin:0;width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:8px}.side-nav-footer-container{padding:8px}.side-nav-footer-container .side-nav-footer{display:flex;flex-direction:column;align-items:center;justify-content:space-between;box-sizing:border-box;width:100%;margin-top:4px}.side-nav-footer-items{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;box-sizing:border-box;margin-bottom:8px}.side-nav-footer-items ul{list-style:none;padding:0;margin:0;width:100%;box-sizing:border-box}.collapsible-section{display:flex;padding:4px 0;flex-direction:column;align-items:flex-start;align-self:stretch}.collapsible-section ul{list-style:none;padding:0;margin:0;width:100%;box-sizing:border-box}\n"] }]
2628
+ }], ctorParameters: () => [] });
2629
+
2319
2630
  /**
2320
2631
  * Generated bundle index. Do not edit.
2321
2632
  */
2322
2633
 
2323
- export { BadgeDirective, BannerComponent, BreadcrumbsComponent, ButtonComponent, CheckboxComponent, CheckboxGroupComponent, ChipComponent, ColDirective, DividerComponent, GridDirective, IconButtonComponent, IconButtonToggleComponent, IconComponent, LinkComponent, ModalDirective, ModalModule, ModalTriggerDirective, PopoverDirective, RadioButtonComponent, RadioButtonGroupComponent, SegmentedControlComponent, SplitButtonComponent, SwitchComponent, TextInputComponent, TextareaComponent, TooltipDirective };
2634
+ export { BadgeDirective, BannerComponent, BreadcrumbsComponent, ButtonComponent, CardComponent, CheckboxComponent, CheckboxGroupComponent, ChipComponent, ColDirective, DividerComponent, GridDirective, IconButtonComponent, IconButtonToggleComponent, IconComponent, LinkComponent, ModalDirective, ModalModule, ModalTriggerDirective, PopoverDirective, RadioButtonComponent, RadioButtonGroupComponent, SegmentedControlComponent, SideNavComponent, SplitButtonComponent, SwitchComponent, TextInputComponent, TextareaComponent, TooltipDirective };
2324
2635
  //# sourceMappingURL=design-system-rte-angular.mjs.map