@design-system-rte/angular 1.2.0 → 1.2.1-rc3

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.
@@ -10,7 +10,7 @@ import { labelSize } from '@design-system-rte/core/components/radio-button/radio
10
10
  import { TOOLTIP_GAP, TOOLTIP_FADE_OUT_DURATION } from '@design-system-rte/core/components/tooltip/tooltip.constants';
11
11
  import { getTooltipGap } from '@design-system-rte/core/components/tooltip/tooltip.utils';
12
12
  import { getAutoPlacement, getCoordinates, getAutoPlacementDropdown, getAutoAlignment } from '@design-system-rte/core/components/utils/auto-placement';
13
- import { FOCUSABLE_ELEMENTS_QUERY } from '@design-system-rte/core/constants/dom/dom.constants';
13
+ import { FOCUSABLE_ELEMENTS_QUERY, FOCUSABLE_BUTTONS_QUERY } from '@design-system-rte/core/constants/dom/dom.constants';
14
14
  import { getShowIcon, getShowText, getDisplayCount, getBadgeIconSize, getShowBadge, shouldDisplayBadge } from '@design-system-rte/core/components/badge/badge.utils';
15
15
  import { splitButtonLeftIconSize, splitButtonRightIconSize } from '@design-system-rte/core/components/split-button/split-button.constants';
16
16
  import { SPACE_KEY, ENTER_KEY, ARROW_DOWN_KEY, ARROW_UP_KEY, ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ESCAPE_KEY, TAB_KEY, BACKSPACE_KEY, DELETE_KEY } from '@design-system-rte/core/constants/keyboard/keyboard.constants';
@@ -20,6 +20,7 @@ import { waitForNextFrame } from '@design-system-rte/core/common/animation';
20
20
  import { DROPDOWN_ANIMATION_DURATION } from '@design-system-rte/core/components/dropdown/dropdown.constants';
21
21
  import { DropdownManager } from '@design-system-rte/core/components/dropdown/DropdownManager';
22
22
  import { ButtonIconSize } from '@design-system-rte/core/components/button/common/common-button.constants';
23
+ import { loaderSize } from '@design-system-rte/core/components/loader/loader.constants';
23
24
  import { CHIP_TYPE_TO_ARIA_ROLE_MAP } from '@design-system-rte/core/components/chip/chip.constants';
24
25
  import { NG_VALUE_ACCESSOR } from '@angular/forms';
25
26
  import { REQUIREMENT_INDICATOR_VALUE } from '@design-system-rte/core/components/required-indicator/required-indicator.constant';
@@ -1367,6 +1368,13 @@ class DropdownDirective {
1367
1368
  this.dropdownMenuRef = null;
1368
1369
  this.removeClickOutsideListener();
1369
1370
  dropdownStateSubscription.unsubscribe();
1371
+ const buttonTrigger = this.trigger()?.elementRef.nativeElement.querySelectorAll(FOCUSABLE_BUTTONS_QUERY)[0];
1372
+ if (buttonTrigger) {
1373
+ buttonTrigger.focus();
1374
+ }
1375
+ else {
1376
+ this.trigger()?.elementRef.nativeElement.focus();
1377
+ }
1370
1378
  }
1371
1379
  }
1372
1380
  });
@@ -1627,6 +1635,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
1627
1635
  args: [{ selector: "rte-icon-button-toggle", imports: [CommonModule, IconButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<rte-icon-button\n [size]=\"size()\"\n [name]=\"name()\"\n [compactSpacing]=\"compactSpacing()\"\n [disabled]=\"disabled()\"\n [ariaLabel]=\"ariaLabel()\"\n [ariaLabelledBy]=\"ariaLabelledBy()\"\n [type]=\"type()\"\n [variant]=\"variant()\"\n [appearance]=\"isSelected() ? 'filled' : 'outlined'\"\n (clickEvent)=\"onClick($event)\"\n/>\n" }]
1628
1636
  }] });
1629
1637
 
1638
+ class LoaderComponent {
1639
+ constructor() {
1640
+ this.appearance = input("brand");
1641
+ this.size = input("medium");
1642
+ this.showLabel = input(true);
1643
+ this.label = input("");
1644
+ this.labelPosition = input("right");
1645
+ this.sizeOfLoader = computed(() => loaderSize[this.size() || "medium"]);
1646
+ }
1647
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1648
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LoaderComponent, isStandalone: true, selector: "rte-loader", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"rte-loader appearance--{{ appearance() }} labelPosition--{{ labelPosition() }}\">\n @if (appearance() === \"brand\") {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"svgLoader\"\n viewBox=\"0 0 48 48\"\n fill=\"none\"\n [style.width]=\"sizeOfLoader()\"\n [style.height]=\"sizeOfLoader()\"\n >\n <g clip-path=\"url(#paint0_angular_4434_67_clip_path)\" data-figma-skip-parse=\"true\">\n <g transform=\"matrix(0.0240793 7.6297e-08 -7.62968e-08 0.0240017 24.0001 24.0003)\">\n <foreignObject x=\"-999.939\" y=\"-999.939\" width=\"1999.88\" height=\"1999.88\"\n ><div\n xmlns=\"http://www.w3.org/1999/xhtml\"\n style=\"\n background: conic-gradient(from 90deg, rgba(41, 100, 160, 0) 0deg, rgba(41, 100, 160, 1) 360deg);\n height: 100%;\n width: 100%;\n opacity: 1;\n \"\n ></div\n ></foreignObject>\n </g>\n </g>\n <path\n d=\"M23.9269 0.000388189C30.296 -0.0295367 36.417 2.4654 40.9454 6.93691C44.9866 10.9275 47.4648 16.2012 47.9796 21.809C48.0828 22.9328 47.1647 23.8555 46.0363 23.8627C44.9079 23.8698 43.998 22.958 43.8751 21.8363C43.3798 17.3109 41.3426 13.0674 38.0714 9.8373C34.3129 6.12602 29.2327 4.05571 23.9464 4.08047C18.66 4.10534 13.5995 6.22361 9.87609 9.97011C6.1527 13.7167 4.07043 18.7851 4.08703 24.0629C4.10364 29.3406 6.21709 34.3964 9.96399 38.1195C13.7109 41.8427 18.7849 43.9286 24.0714 43.9203C29.3579 43.912 34.4251 41.8095 38.1603 38.0746C41.4109 34.8241 43.422 30.5687 43.8888 26.0404C44.0045 24.918 44.9079 24.0006 46.0363 24.0004C47.1648 24.0004 48.0893 24.917 47.9933 26.0414C47.5138 31.6525 45.068 36.9416 41.0519 40.9574C36.5518 45.4572 30.4473 47.9903 24.0782 48.0004C17.709 48.0104 11.5955 45.4969 7.08117 41.0111C2.56686 36.5254 0.0201276 30.4343 0.000118312 24.0756C-0.0198507 17.7169 2.48874 11.61 6.97473 7.09609C11.4607 2.58224 17.5578 0.0303524 23.9269 0.000388189Z\"\n data-figma-gradient-fill='{\"type\":\"GRADIENT_ANGULAR\",\"stops\":[{\"color\":{\"r\":0.16078431904315948,\"g\":0.39215686917304993,\"b\":0.62745100259780884,\"a\":0.0},\"position\":0.0},{\"color\":{\"r\":0.16078431904315948,\"g\":0.39215686917304993,\"b\":0.62745100259780884,\"a\":1.0},\"position\":1.0}],\"stopsVar\":[{\"color\":{\"r\":0.16078431904315948,\"g\":0.39215686917304993,\"b\":0.62745100259780884,\"a\":0.0},\"position\":0.0},{\"color\":{\"r\":0.16078431904315948,\"g\":0.39215686917304993,\"b\":0.62745100259780884,\"a\":1.0},\"position\":1.0}],\"transform\":{\"m00\":48.158504486083984,\"m01\":-0.00015259353676810861,\"m02\":-0.079098686575889587,\"m10\":0.00015259397332556546,\"m11\":48.003398895263672,\"m12\":-0.0015066617634147406},\"opacity\":1.0,\"blendMode\":\"NORMAL\",\"visible\":true}'\n />\n <defs>\n <clipPath id=\"paint0_angular_4434_67_clip_path\">\n <path\n d=\"M23.9269 0.000388189C30.296 -0.0295367 36.417 2.4654 40.9454 6.93691C44.9866 10.9275 47.4648 16.2012 47.9796 21.809C48.0828 22.9328 47.1647 23.8555 46.0363 23.8627C44.9079 23.8698 43.998 22.958 43.8751 21.8363C43.3798 17.3109 41.3426 13.0674 38.0714 9.8373C34.3129 6.12602 29.2327 4.05571 23.9464 4.08047C18.66 4.10534 13.5995 6.22361 9.87609 9.97011C6.1527 13.7167 4.07043 18.7851 4.08703 24.0629C4.10364 29.3406 6.21709 34.3964 9.96399 38.1195C13.7109 41.8427 18.7849 43.9286 24.0714 43.9203C29.3579 43.912 34.4251 41.8095 38.1603 38.0746C41.4109 34.8241 43.422 30.5687 43.8888 26.0404C44.0045 24.918 44.9079 24.0006 46.0363 24.0004C47.1648 24.0004 48.0893 24.917 47.9933 26.0414C47.5138 31.6525 45.068 36.9416 41.0519 40.9574C36.5518 45.4572 30.4473 47.9903 24.0782 48.0004C17.709 48.0104 11.5955 45.4969 7.08117 41.0111C2.56686 36.5254 0.0201276 30.4343 0.000118312 24.0756C-0.0198507 17.7169 2.48874 11.61 6.97473 7.09609C11.4607 2.58224 17.5578 0.0303524 23.9269 0.000388189Z\"\n />\n </clipPath>\n </defs>\n </svg>\n } @else {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"svgLoader\"\n viewBox=\"0 0 48 48\"\n fill=\"none\"\n [style.width]=\"sizeOfLoader()\"\n [style.height]=\"sizeOfLoader()\"\n >\n <g clip-path=\"url(#paint0_angular_4434_1033_clip_path)\" data-figma-skip-parse=\"true\">\n <g transform=\"matrix(0.0240793 7.6297e-08 -7.62968e-08 0.0240017 24.0001 24.0003)\">\n <foreignObject x=\"-999.939\" y=\"-999.939\" width=\"1999.88\" height=\"1999.88\"\n ><div\n xmlns=\"http://www.w3.org/1999/xhtml\"\n style=\"\n background: conic-gradient(from 90deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 1) 360deg);\n height: 100%;\n width: 100%;\n opacity: 1;\n \"\n ></div\n ></foreignObject>\n </g>\n </g>\n <path\n d=\"M23.9269 0.000388189C30.296 -0.0295367 36.417 2.4654 40.9454 6.93691C44.9866 10.9275 47.4648 16.2012 47.9796 21.809C48.0828 22.9328 47.1647 23.8555 46.0363 23.8627C44.9079 23.8698 43.998 22.958 43.8751 21.8363C43.3798 17.3109 41.3426 13.0674 38.0714 9.8373C34.3129 6.12602 29.2327 4.05571 23.9464 4.08047C18.66 4.10534 13.5995 6.22361 9.87609 9.97011C6.1527 13.7167 4.07043 18.7851 4.08703 24.0629C4.10364 29.3406 6.21709 34.3964 9.96399 38.1195C13.7109 41.8427 18.7849 43.9286 24.0714 43.9203C29.3579 43.912 34.4251 41.8095 38.1603 38.0746C41.4109 34.8241 43.422 30.5687 43.8888 26.0404C44.0045 24.918 44.9079 24.0006 46.0363 24.0004C47.1648 24.0004 48.0893 24.917 47.9933 26.0414C47.5138 31.6525 45.068 36.9416 41.0519 40.9574C36.5518 45.4572 30.4473 47.9903 24.0782 48.0004C17.709 48.0104 11.5955 45.4969 7.08117 41.0111C2.56686 36.5254 0.0201276 30.4343 0.000118312 24.0756C-0.0198507 17.7169 2.48874 11.61 6.97473 7.09609C11.4607 2.58224 17.5578 0.0303524 23.9269 0.000388189Z\"\n data-figma-gradient-fill='{\"type\":\"GRADIENT_ANGULAR\",\"stops\":[{\"color\":{\"r\":1.0,\"g\":1.0,\"b\":1.0,\"a\":0.0},\"position\":0.0},{\"color\":{\"r\":1.0,\"g\":1.0,\"b\":1.0,\"a\":1.0},\"position\":1.0}],\"stopsVar\":[{\"color\":{\"r\":1.0,\"g\":1.0,\"b\":1.0,\"a\":0.0},\"position\":0.0},{\"color\":{\"r\":1.0,\"g\":1.0,\"b\":1.0,\"a\":1.0},\"position\":1.0}],\"transform\":{\"m00\":48.158504486083984,\"m01\":-0.00015259353676810861,\"m02\":-0.079098686575889587,\"m10\":0.00015259397332556546,\"m11\":48.003398895263672,\"m12\":-0.0015066617634147406},\"opacity\":1.0,\"blendMode\":\"NORMAL\",\"visible\":true}'\n />\n <defs>\n <clipPath id=\"paint0_angular_4434_1033_clip_path\">\n <path\n d=\"M23.9269 0.000388189C30.296 -0.0295367 36.417 2.4654 40.9454 6.93691C44.9866 10.9275 47.4648 16.2012 47.9796 21.809C48.0828 22.9328 47.1647 23.8555 46.0363 23.8627C44.9079 23.8698 43.998 22.958 43.8751 21.8363C43.3798 17.3109 41.3426 13.0674 38.0714 9.8373C34.3129 6.12602 29.2327 4.05571 23.9464 4.08047C18.66 4.10534 13.5995 6.22361 9.87609 9.97011C6.1527 13.7167 4.07043 18.7851 4.08703 24.0629C4.10364 29.3406 6.21709 34.3964 9.96399 38.1195C13.7109 41.8427 18.7849 43.9286 24.0714 43.9203C29.3579 43.912 34.4251 41.8095 38.1603 38.0746C41.4109 34.8241 43.422 30.5687 43.8888 26.0404C44.0045 24.918 44.9079 24.0006 46.0363 24.0004C47.1648 24.0004 48.0893 24.917 47.9933 26.0414C47.5138 31.6525 45.068 36.9416 41.0519 40.9574C36.5518 45.4572 30.4473 47.9903 24.0782 48.0004C17.709 48.0104 11.5955 45.4969 7.08117 41.0111C2.56686 36.5254 0.0201276 30.4343 0.000118312 24.0756C-0.0198507 17.7169 2.48874 11.61 6.97473 7.09609C11.4607 2.58224 17.5578 0.0303524 23.9269 0.000388189Z\"\n />\n </clipPath>\n </defs>\n </svg>\n }\n @if (showLabel()) {\n <span class=\"loaderLabel appearance--{{ appearance() }} size--{{ size() }}\" role=\"status\" aria-live=\"polite\">{{\n label()\n }}</span>\n }\n</div>\n", styles: [".rte-loader{width:fit-content;height:auto;display:flex;flex-direction:row;align-items:center;padding:4px;gap:8px;animation:fade-in .15s linear}.rte-loader.labelPosition--under{flex-direction:column;padding:0;gap:8px}.rte-loader .svgLoader{animation:spin 2s infinite linear}.rte-loader .loaderLabel{color:var(--content-brand-default);word-wrap:break-word}.rte-loader .loaderLabel.appearance--reverse{color:var(--content-primary-inverse)}.rte-loader .loaderLabel.size--small{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}.rte-loader .loaderLabel.size--medium{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}.rte-loader .loaderLabel.size--large{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}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1649
+ }
1650
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoaderComponent, decorators: [{
1651
+ type: Component,
1652
+ args: [{ selector: "rte-loader", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rte-loader appearance--{{ appearance() }} labelPosition--{{ labelPosition() }}\">\n @if (appearance() === \"brand\") {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"svgLoader\"\n viewBox=\"0 0 48 48\"\n fill=\"none\"\n [style.width]=\"sizeOfLoader()\"\n [style.height]=\"sizeOfLoader()\"\n >\n <g clip-path=\"url(#paint0_angular_4434_67_clip_path)\" data-figma-skip-parse=\"true\">\n <g transform=\"matrix(0.0240793 7.6297e-08 -7.62968e-08 0.0240017 24.0001 24.0003)\">\n <foreignObject x=\"-999.939\" y=\"-999.939\" width=\"1999.88\" height=\"1999.88\"\n ><div\n xmlns=\"http://www.w3.org/1999/xhtml\"\n style=\"\n background: conic-gradient(from 90deg, rgba(41, 100, 160, 0) 0deg, rgba(41, 100, 160, 1) 360deg);\n height: 100%;\n width: 100%;\n opacity: 1;\n \"\n ></div\n ></foreignObject>\n </g>\n </g>\n <path\n d=\"M23.9269 0.000388189C30.296 -0.0295367 36.417 2.4654 40.9454 6.93691C44.9866 10.9275 47.4648 16.2012 47.9796 21.809C48.0828 22.9328 47.1647 23.8555 46.0363 23.8627C44.9079 23.8698 43.998 22.958 43.8751 21.8363C43.3798 17.3109 41.3426 13.0674 38.0714 9.8373C34.3129 6.12602 29.2327 4.05571 23.9464 4.08047C18.66 4.10534 13.5995 6.22361 9.87609 9.97011C6.1527 13.7167 4.07043 18.7851 4.08703 24.0629C4.10364 29.3406 6.21709 34.3964 9.96399 38.1195C13.7109 41.8427 18.7849 43.9286 24.0714 43.9203C29.3579 43.912 34.4251 41.8095 38.1603 38.0746C41.4109 34.8241 43.422 30.5687 43.8888 26.0404C44.0045 24.918 44.9079 24.0006 46.0363 24.0004C47.1648 24.0004 48.0893 24.917 47.9933 26.0414C47.5138 31.6525 45.068 36.9416 41.0519 40.9574C36.5518 45.4572 30.4473 47.9903 24.0782 48.0004C17.709 48.0104 11.5955 45.4969 7.08117 41.0111C2.56686 36.5254 0.0201276 30.4343 0.000118312 24.0756C-0.0198507 17.7169 2.48874 11.61 6.97473 7.09609C11.4607 2.58224 17.5578 0.0303524 23.9269 0.000388189Z\"\n data-figma-gradient-fill='{\"type\":\"GRADIENT_ANGULAR\",\"stops\":[{\"color\":{\"r\":0.16078431904315948,\"g\":0.39215686917304993,\"b\":0.62745100259780884,\"a\":0.0},\"position\":0.0},{\"color\":{\"r\":0.16078431904315948,\"g\":0.39215686917304993,\"b\":0.62745100259780884,\"a\":1.0},\"position\":1.0}],\"stopsVar\":[{\"color\":{\"r\":0.16078431904315948,\"g\":0.39215686917304993,\"b\":0.62745100259780884,\"a\":0.0},\"position\":0.0},{\"color\":{\"r\":0.16078431904315948,\"g\":0.39215686917304993,\"b\":0.62745100259780884,\"a\":1.0},\"position\":1.0}],\"transform\":{\"m00\":48.158504486083984,\"m01\":-0.00015259353676810861,\"m02\":-0.079098686575889587,\"m10\":0.00015259397332556546,\"m11\":48.003398895263672,\"m12\":-0.0015066617634147406},\"opacity\":1.0,\"blendMode\":\"NORMAL\",\"visible\":true}'\n />\n <defs>\n <clipPath id=\"paint0_angular_4434_67_clip_path\">\n <path\n d=\"M23.9269 0.000388189C30.296 -0.0295367 36.417 2.4654 40.9454 6.93691C44.9866 10.9275 47.4648 16.2012 47.9796 21.809C48.0828 22.9328 47.1647 23.8555 46.0363 23.8627C44.9079 23.8698 43.998 22.958 43.8751 21.8363C43.3798 17.3109 41.3426 13.0674 38.0714 9.8373C34.3129 6.12602 29.2327 4.05571 23.9464 4.08047C18.66 4.10534 13.5995 6.22361 9.87609 9.97011C6.1527 13.7167 4.07043 18.7851 4.08703 24.0629C4.10364 29.3406 6.21709 34.3964 9.96399 38.1195C13.7109 41.8427 18.7849 43.9286 24.0714 43.9203C29.3579 43.912 34.4251 41.8095 38.1603 38.0746C41.4109 34.8241 43.422 30.5687 43.8888 26.0404C44.0045 24.918 44.9079 24.0006 46.0363 24.0004C47.1648 24.0004 48.0893 24.917 47.9933 26.0414C47.5138 31.6525 45.068 36.9416 41.0519 40.9574C36.5518 45.4572 30.4473 47.9903 24.0782 48.0004C17.709 48.0104 11.5955 45.4969 7.08117 41.0111C2.56686 36.5254 0.0201276 30.4343 0.000118312 24.0756C-0.0198507 17.7169 2.48874 11.61 6.97473 7.09609C11.4607 2.58224 17.5578 0.0303524 23.9269 0.000388189Z\"\n />\n </clipPath>\n </defs>\n </svg>\n } @else {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"svgLoader\"\n viewBox=\"0 0 48 48\"\n fill=\"none\"\n [style.width]=\"sizeOfLoader()\"\n [style.height]=\"sizeOfLoader()\"\n >\n <g clip-path=\"url(#paint0_angular_4434_1033_clip_path)\" data-figma-skip-parse=\"true\">\n <g transform=\"matrix(0.0240793 7.6297e-08 -7.62968e-08 0.0240017 24.0001 24.0003)\">\n <foreignObject x=\"-999.939\" y=\"-999.939\" width=\"1999.88\" height=\"1999.88\"\n ><div\n xmlns=\"http://www.w3.org/1999/xhtml\"\n style=\"\n background: conic-gradient(from 90deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 1) 360deg);\n height: 100%;\n width: 100%;\n opacity: 1;\n \"\n ></div\n ></foreignObject>\n </g>\n </g>\n <path\n d=\"M23.9269 0.000388189C30.296 -0.0295367 36.417 2.4654 40.9454 6.93691C44.9866 10.9275 47.4648 16.2012 47.9796 21.809C48.0828 22.9328 47.1647 23.8555 46.0363 23.8627C44.9079 23.8698 43.998 22.958 43.8751 21.8363C43.3798 17.3109 41.3426 13.0674 38.0714 9.8373C34.3129 6.12602 29.2327 4.05571 23.9464 4.08047C18.66 4.10534 13.5995 6.22361 9.87609 9.97011C6.1527 13.7167 4.07043 18.7851 4.08703 24.0629C4.10364 29.3406 6.21709 34.3964 9.96399 38.1195C13.7109 41.8427 18.7849 43.9286 24.0714 43.9203C29.3579 43.912 34.4251 41.8095 38.1603 38.0746C41.4109 34.8241 43.422 30.5687 43.8888 26.0404C44.0045 24.918 44.9079 24.0006 46.0363 24.0004C47.1648 24.0004 48.0893 24.917 47.9933 26.0414C47.5138 31.6525 45.068 36.9416 41.0519 40.9574C36.5518 45.4572 30.4473 47.9903 24.0782 48.0004C17.709 48.0104 11.5955 45.4969 7.08117 41.0111C2.56686 36.5254 0.0201276 30.4343 0.000118312 24.0756C-0.0198507 17.7169 2.48874 11.61 6.97473 7.09609C11.4607 2.58224 17.5578 0.0303524 23.9269 0.000388189Z\"\n data-figma-gradient-fill='{\"type\":\"GRADIENT_ANGULAR\",\"stops\":[{\"color\":{\"r\":1.0,\"g\":1.0,\"b\":1.0,\"a\":0.0},\"position\":0.0},{\"color\":{\"r\":1.0,\"g\":1.0,\"b\":1.0,\"a\":1.0},\"position\":1.0}],\"stopsVar\":[{\"color\":{\"r\":1.0,\"g\":1.0,\"b\":1.0,\"a\":0.0},\"position\":0.0},{\"color\":{\"r\":1.0,\"g\":1.0,\"b\":1.0,\"a\":1.0},\"position\":1.0}],\"transform\":{\"m00\":48.158504486083984,\"m01\":-0.00015259353676810861,\"m02\":-0.079098686575889587,\"m10\":0.00015259397332556546,\"m11\":48.003398895263672,\"m12\":-0.0015066617634147406},\"opacity\":1.0,\"blendMode\":\"NORMAL\",\"visible\":true}'\n />\n <defs>\n <clipPath id=\"paint0_angular_4434_1033_clip_path\">\n <path\n d=\"M23.9269 0.000388189C30.296 -0.0295367 36.417 2.4654 40.9454 6.93691C44.9866 10.9275 47.4648 16.2012 47.9796 21.809C48.0828 22.9328 47.1647 23.8555 46.0363 23.8627C44.9079 23.8698 43.998 22.958 43.8751 21.8363C43.3798 17.3109 41.3426 13.0674 38.0714 9.8373C34.3129 6.12602 29.2327 4.05571 23.9464 4.08047C18.66 4.10534 13.5995 6.22361 9.87609 9.97011C6.1527 13.7167 4.07043 18.7851 4.08703 24.0629C4.10364 29.3406 6.21709 34.3964 9.96399 38.1195C13.7109 41.8427 18.7849 43.9286 24.0714 43.9203C29.3579 43.912 34.4251 41.8095 38.1603 38.0746C41.4109 34.8241 43.422 30.5687 43.8888 26.0404C44.0045 24.918 44.9079 24.0006 46.0363 24.0004C47.1648 24.0004 48.0893 24.917 47.9933 26.0414C47.5138 31.6525 45.068 36.9416 41.0519 40.9574C36.5518 45.4572 30.4473 47.9903 24.0782 48.0004C17.709 48.0104 11.5955 45.4969 7.08117 41.0111C2.56686 36.5254 0.0201276 30.4343 0.000118312 24.0756C-0.0198507 17.7169 2.48874 11.61 6.97473 7.09609C11.4607 2.58224 17.5578 0.0303524 23.9269 0.000388189Z\"\n />\n </clipPath>\n </defs>\n </svg>\n }\n @if (showLabel()) {\n <span class=\"loaderLabel appearance--{{ appearance() }} size--{{ size() }}\" role=\"status\" aria-live=\"polite\">{{\n label()\n }}</span>\n }\n</div>\n", styles: [".rte-loader{width:fit-content;height:auto;display:flex;flex-direction:row;align-items:center;padding:4px;gap:8px;animation:fade-in .15s linear}.rte-loader.labelPosition--under{flex-direction:column;padding:0;gap:8px}.rte-loader .svgLoader{animation:spin 2s infinite linear}.rte-loader .loaderLabel{color:var(--content-brand-default);word-wrap:break-word}.rte-loader .loaderLabel.appearance--reverse{color:var(--content-primary-inverse)}.rte-loader .loaderLabel.size--small{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}.rte-loader .loaderLabel.size--medium{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}.rte-loader .loaderLabel.size--large{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}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
1653
+ }] });
1654
+
1630
1655
  class BaseTextInputComponent {
1631
1656
  constructor() {
1632
1657
  this.id = input();
@@ -2820,11 +2845,11 @@ class NavItemComponent {
2820
2845
  this.focused.set(false);
2821
2846
  }
2822
2847
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2823
- 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 >\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 >\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 >\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 >\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", styles: [".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 }); }
2848
+ 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 @if (link()) {\n <a\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]=\"true\"\n [href]=\"link()!\"\n [attr.aria-label]=\"label()\"\n >\n <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n </a>\n } @else {\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 >\n <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n </div>\n }\n} @else {\n @if (link()) {\n <a\n class=\"nav-item-container {{ appearance() }}\"\n [id]=\"id()\"\n [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n [attr.role]=\"role()\"\n [href]=\"link()!\"\n >\n <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n </a>\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 >\n <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n </div>\n }\n}\n\n<ng-template #contentTemplate>\n <span\n class=\"nav-item\"\n [attr.tabindex]=\"link() ? undefined : tabIndex()\"\n [attr.aria-label]=\"label()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\"\n >\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</ng-template>\n", styles: [".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:link,.nav-item-container:visited,.nav-item-container:link:hover,.nav-item-container:visited:hover{text-decoration:none;color:inherit}.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)}.nav-item-container:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:0}\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 }); }
2824
2849
  }
2825
2850
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NavItemComponent, decorators: [{
2826
2851
  type: Component,
2827
- 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 >\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 >\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 >\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 >\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", styles: [".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"] }]
2852
+ args: [{ selector: "rte-nav-item", imports: [CommonModule, IconComponent, BadgeComponent, TooltipDirective], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (collapsed() && label()) {\n @if (link()) {\n <a\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]=\"true\"\n [href]=\"link()!\"\n [attr.aria-label]=\"label()\"\n >\n <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n </a>\n } @else {\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 >\n <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n </div>\n }\n} @else {\n @if (link()) {\n <a\n class=\"nav-item-container {{ appearance() }}\"\n [id]=\"id()\"\n [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n [attr.role]=\"role()\"\n [href]=\"link()!\"\n >\n <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n </a>\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 >\n <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n </div>\n }\n}\n\n<ng-template #contentTemplate>\n <span\n class=\"nav-item\"\n [attr.tabindex]=\"link() ? undefined : tabIndex()\"\n [attr.aria-label]=\"label()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\"\n >\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</ng-template>\n", styles: [".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:link,.nav-item-container:visited,.nav-item-container:link:hover,.nav-item-container:visited:hover{text-decoration:none;color:inherit}.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)}.nav-item-container:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:0}\n"] }]
2828
2853
  }] });
2829
2854
 
2830
2855
  function getNavTabIndex(parentMenuOpen) {
@@ -3740,5 +3765,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
3740
3765
  * Generated bundle index. Do not edit.
3741
3766
  */
3742
3767
 
3743
- export { BadgeDirective, BannerComponent, BreadcrumbsComponent, ButtonComponent, CardComponent, CheckboxComponent, CheckboxGroupComponent, ChipComponent, ColDirective, DividerComponent, GridDirective, IconButtonComponent, IconButtonToggleComponent, IconComponent, LinkComponent, ModalDirective, ModalModule, ModalTriggerDirective, PopoverDirective, RadioButtonComponent, RadioButtonGroupComponent, SearchbarComponent, SegmentedControlComponent, SelectComponent, SideNavComponent, SplitButtonComponent, SwitchComponent, TabComponent, TagComponent, TextInputComponent, TextareaComponent, ToastComponent, ToastService, TooltipDirective };
3768
+ export { BadgeDirective, BannerComponent, BreadcrumbsComponent, ButtonComponent, CardComponent, CheckboxComponent, CheckboxGroupComponent, ChipComponent, ColDirective, DividerComponent, GridDirective, IconButtonComponent, IconButtonToggleComponent, IconComponent, LinkComponent, LoaderComponent, ModalDirective, ModalModule, ModalTriggerDirective, PopoverDirective, RadioButtonComponent, RadioButtonGroupComponent, SearchbarComponent, SegmentedControlComponent, SelectComponent, SideNavComponent, SplitButtonComponent, SwitchComponent, TabComponent, TagComponent, TextInputComponent, TextareaComponent, ToastComponent, ToastService, TooltipDirective };
3744
3769
  //# sourceMappingURL=design-system-rte-angular.mjs.map