@siemens/element-ng 48.4.0 → 48.5.0

package/fesm2022/siemens-element-ng-loading-spinner.mjs

@@ -39,7 +39,7 @@ class SiLoadingSpinnerComponent {
      */
     ariaLabel = input(t(() => $localize `:@@SI_LOADING_SPINNER.LABEL:Loading`));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: SiLoadingSpinnerComponent, isStandalone: true, selector: "si-loading-spinner", inputs: { isBlockingSpinner: { classPropertyName: "isBlockingSpinner", publicName: "isBlockingSpinner", isSignal: true, isRequired: false, transformFunction: null }, isSpinnerOverlay: { classPropertyName: "isSpinnerOverlay", publicName: "isSpinnerOverlay", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "@fadeAnimation": "this.fadeAnimation" } }, ngImport: i0, template: "<div\n  class=\"loading\"\n  aria-atomic=\"true\"\n  aria-live=\"assertive\"\n  [class.blocking-spinner]=\"isBlockingSpinner()\"\n  [class.spinner-overlay]=\"isSpinnerOverlay()\"\n>\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n    <title>{{ ariaLabel() | translate }}</title>\n    <g>\n      <path d=\"M256,156a16,16,0,0,1-16-16V80a16,16,0,0,1,32,0v60A16,16,0,0,1,256,156Z\" />\n      <path\n        d=\"M314.78,175.1a16,16,0,0,1-3.54-22.35l35.27-48.54A16,16,0,1,1,372.39,123l-35.26,48.54A16,16,0,0,1,314.78,175.1Z\"\n      />\n      <path\n        d=\"M351.11,225.1a16,16,0,0,1,10.27-20.16l57.06-18.54a16,16,0,1,1,9.89,30.43l-57.06,18.54A16,16,0,0,1,351.11,225.1Z\"\n      />\n      <path\n        d=\"M351.11,286.9a16,16,0,0,1,20.16-10.27l57.06,18.54a16,16,0,1,1-9.89,30.43l-57.06-18.54A16,16,0,0,1,351.11,286.9Z\"\n      />\n      <path\n        d=\"M314.78,336.9a16,16,0,0,1,22.35,3.54L372.39,389a16,16,0,1,1-25.88,18.81l-35.27-48.54A16,16,0,0,1,314.78,336.9Z\"\n      />\n      <path d=\"M256,356a16,16,0,0,1,16,16v60a16,16,0,0,1-32,0V372A16,16,0,0,1,256,356Z\" />\n      <path\n        d=\"M197.22,336.9a16,16,0,0,1,3.54,22.35l-35.27,48.54A16,16,0,1,1,139.61,389l35.26-48.54A16,16,0,0,1,197.22,336.9Z\"\n      />\n      <path\n        d=\"M160.89,286.9a16,16,0,0,1-10.27,20.16L93.56,325.6a16,16,0,0,1-9.89-30.43l57.06-18.54A16,16,0,0,1,160.89,286.9Z\"\n      />\n      <path\n        d=\"M160.89,225.1a16,16,0,0,1-20.16,10.27L83.67,216.83a16,16,0,1,1,9.89-30.43l57.06,18.54A16,16,0,0,1,160.89,225.1Z\"\n      />\n      <path\n        d=\"M197.22,175.1a16,16,0,0,1-22.35-3.54L139.61,123a16,16,0,1,1,25.88-18.81l35.27,48.54A16,16,0,0,1,197.22,175.1Z\"\n      />\n    </g>\n  </svg>\n</div>\n", styles: ["@keyframes spinner-fade{0%{opacity:1}to{opacity:.05}}.loading{display:block;text-align:center}.blocking-spinner{background:var(--element-base-translucent-1)}.spinner-overlay{position:absolute;inset:0;z-index:1090;display:flex;justify-content:center;align-items:center}svg{inline-size:var(--loading-spinner-size, 64px);block-size:var(--loading-spinner-size, 64px)}path{fill:var(--loading-spinner-color, var(--element-ui-2));animation:spinner-fade calc(1s * var(--element-animations-enabled, 1)) infinite linear}path:nth-child(1){animation-delay:0s;opacity:1}path:nth-child(2){animation-delay:.1s;opacity:.9}path:nth-child(3){animation-delay:.2s;opacity:.8}path:nth-child(4){animation-delay:.3s;opacity:.7}path:nth-child(5){animation-delay:.4s;opacity:.6}path:nth-child(6){animation-delay:.5s;opacity:.5}path:nth-child(7){animation-delay:.6s;opacity:.4}path:nth-child(8){animation-delay:.7s;opacity:.3}path:nth-child(9){animation-delay:.8s;opacity:.2}path:nth-child(10){animation-delay:.9s;opacity:.1}\n"], dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: SiLoadingSpinnerComponent, isStandalone: true, selector: "si-loading-spinner", inputs: { isBlockingSpinner: { classPropertyName: "isBlockingSpinner", publicName: "isBlockingSpinner", isSignal: true, isRequired: false, transformFunction: null }, isSpinnerOverlay: { classPropertyName: "isSpinnerOverlay", publicName: "isSpinnerOverlay", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "@fadeAnimation": "this.fadeAnimation" } }, ngImport: i0, template: "<div\n  class=\"loading\"\n  aria-atomic=\"true\"\n  aria-live=\"assertive\"\n  [class.blocking-spinner]=\"isBlockingSpinner()\"\n  [class.spinner-overlay]=\"isSpinnerOverlay()\"\n>\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n    <title>{{ ariaLabel() | translate }}</title>\n    <g>\n      <path d=\"M256,156a16,16,0,0,1-16-16V80a16,16,0,0,1,32,0v60A16,16,0,0,1,256,156Z\" />\n      <path\n        d=\"M314.78,175.1a16,16,0,0,1-3.54-22.35l35.27-48.54A16,16,0,1,1,372.39,123l-35.26,48.54A16,16,0,0,1,314.78,175.1Z\"\n      />\n      <path\n        d=\"M351.11,225.1a16,16,0,0,1,10.27-20.16l57.06-18.54a16,16,0,1,1,9.89,30.43l-57.06,18.54A16,16,0,0,1,351.11,225.1Z\"\n      />\n      <path\n        d=\"M351.11,286.9a16,16,0,0,1,20.16-10.27l57.06,18.54a16,16,0,1,1-9.89,30.43l-57.06-18.54A16,16,0,0,1,351.11,286.9Z\"\n      />\n      <path\n        d=\"M314.78,336.9a16,16,0,0,1,22.35,3.54L372.39,389a16,16,0,1,1-25.88,18.81l-35.27-48.54A16,16,0,0,1,314.78,336.9Z\"\n      />\n      <path d=\"M256,356a16,16,0,0,1,16,16v60a16,16,0,0,1-32,0V372A16,16,0,0,1,256,356Z\" />\n      <path\n        d=\"M197.22,336.9a16,16,0,0,1,3.54,22.35l-35.27,48.54A16,16,0,1,1,139.61,389l35.26-48.54A16,16,0,0,1,197.22,336.9Z\"\n      />\n      <path\n        d=\"M160.89,286.9a16,16,0,0,1-10.27,20.16L93.56,325.6a16,16,0,0,1-9.89-30.43l57.06-18.54A16,16,0,0,1,160.89,286.9Z\"\n      />\n      <path\n        d=\"M160.89,225.1a16,16,0,0,1-20.16,10.27L83.67,216.83a16,16,0,1,1,9.89-30.43l57.06,18.54A16,16,0,0,1,160.89,225.1Z\"\n      />\n      <path\n        d=\"M197.22,175.1a16,16,0,0,1-22.35-3.54L139.61,123a16,16,0,1,1,25.88-18.81l35.27,48.54A16,16,0,0,1,197.22,175.1Z\"\n      />\n    </g>\n  </svg>\n</div>\n", styles: ["@keyframes spinner-fade{0%{opacity:1}to{opacity:.05}}.loading{display:block;text-align:center}.blocking-spinner{background:var(--element-base-translucent-1)}.spinner-overlay{position:absolute;inset:0;z-index:1090;display:flex;justify-content:center;align-items:center}svg{inline-size:var(--loading-spinner-size, 64px);block-size:var(--loading-spinner-size, 64px)}path{--spinner-speed: calc(.2s - .1s * var(--element-animations-enabled, 1));fill:var(--loading-spinner-color, var(--element-ui-2));animation:spinner-fade calc(2s - 1s * var(--element-animations-enabled, 1)) infinite linear}path:nth-child(1){animation-delay:calc(0 * var(--spinner-speed));opacity:1}path:nth-child(2){animation-delay:calc(1 * var(--spinner-speed));opacity:.9}path:nth-child(3){animation-delay:calc(2 * var(--spinner-speed));opacity:.8}path:nth-child(4){animation-delay:calc(3 * var(--spinner-speed));opacity:.7}path:nth-child(5){animation-delay:calc(4 * var(--spinner-speed));opacity:.6}path:nth-child(6){animation-delay:calc(5 * var(--spinner-speed));opacity:.5}path:nth-child(7){animation-delay:calc(6 * var(--spinner-speed));opacity:.4}path:nth-child(8){animation-delay:calc(7 * var(--spinner-speed));opacity:.3}path:nth-child(9){animation-delay:calc(8 * var(--spinner-speed));opacity:.2}path:nth-child(10){animation-delay:calc(9 * var(--spinner-speed));opacity:.1}\n"], dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }], animations: [
             trigger('fadeAnimation', [
                 transition(':enter', [style({ opacity: 0 }), animate('200ms ease-in')]),
                 transition(':leave', animate('200ms ease-out', style({ opacity: 0 })))
@@ -53,7 +53,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                             transition(':enter', [style({ opacity: 0 }), animate('200ms ease-in')]),
                             transition(':leave', animate('200ms ease-out', style({ opacity: 0 })))
                         ])
-                    ], template: "<div\n  class=\"loading\"\n  aria-atomic=\"true\"\n  aria-live=\"assertive\"\n  [class.blocking-spinner]=\"isBlockingSpinner()\"\n  [class.spinner-overlay]=\"isSpinnerOverlay()\"\n>\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n    <title>{{ ariaLabel() | translate }}</title>\n    <g>\n      <path d=\"M256,156a16,16,0,0,1-16-16V80a16,16,0,0,1,32,0v60A16,16,0,0,1,256,156Z\" />\n      <path\n        d=\"M314.78,175.1a16,16,0,0,1-3.54-22.35l35.27-48.54A16,16,0,1,1,372.39,123l-35.26,48.54A16,16,0,0,1,314.78,175.1Z\"\n      />\n      <path\n        d=\"M351.11,225.1a16,16,0,0,1,10.27-20.16l57.06-18.54a16,16,0,1,1,9.89,30.43l-57.06,18.54A16,16,0,0,1,351.11,225.1Z\"\n      />\n      <path\n        d=\"M351.11,286.9a16,16,0,0,1,20.16-10.27l57.06,18.54a16,16,0,1,1-9.89,30.43l-57.06-18.54A16,16,0,0,1,351.11,286.9Z\"\n      />\n      <path\n        d=\"M314.78,336.9a16,16,0,0,1,22.35,3.54L372.39,389a16,16,0,1,1-25.88,18.81l-35.27-48.54A16,16,0,0,1,314.78,336.9Z\"\n      />\n      <path d=\"M256,356a16,16,0,0,1,16,16v60a16,16,0,0,1-32,0V372A16,16,0,0,1,256,356Z\" />\n      <path\n        d=\"M197.22,336.9a16,16,0,0,1,3.54,22.35l-35.27,48.54A16,16,0,1,1,139.61,389l35.26-48.54A16,16,0,0,1,197.22,336.9Z\"\n      />\n      <path\n        d=\"M160.89,286.9a16,16,0,0,1-10.27,20.16L93.56,325.6a16,16,0,0,1-9.89-30.43l57.06-18.54A16,16,0,0,1,160.89,286.9Z\"\n      />\n      <path\n        d=\"M160.89,225.1a16,16,0,0,1-20.16,10.27L83.67,216.83a16,16,0,1,1,9.89-30.43l57.06,18.54A16,16,0,0,1,160.89,225.1Z\"\n      />\n      <path\n        d=\"M197.22,175.1a16,16,0,0,1-22.35-3.54L139.61,123a16,16,0,1,1,25.88-18.81l35.27,48.54A16,16,0,0,1,197.22,175.1Z\"\n      />\n    </g>\n  </svg>\n</div>\n", styles: ["@keyframes spinner-fade{0%{opacity:1}to{opacity:.05}}.loading{display:block;text-align:center}.blocking-spinner{background:var(--element-base-translucent-1)}.spinner-overlay{position:absolute;inset:0;z-index:1090;display:flex;justify-content:center;align-items:center}svg{inline-size:var(--loading-spinner-size, 64px);block-size:var(--loading-spinner-size, 64px)}path{fill:var(--loading-spinner-color, var(--element-ui-2));animation:spinner-fade calc(1s * var(--element-animations-enabled, 1)) infinite linear}path:nth-child(1){animation-delay:0s;opacity:1}path:nth-child(2){animation-delay:.1s;opacity:.9}path:nth-child(3){animation-delay:.2s;opacity:.8}path:nth-child(4){animation-delay:.3s;opacity:.7}path:nth-child(5){animation-delay:.4s;opacity:.6}path:nth-child(6){animation-delay:.5s;opacity:.5}path:nth-child(7){animation-delay:.6s;opacity:.4}path:nth-child(8){animation-delay:.7s;opacity:.3}path:nth-child(9){animation-delay:.8s;opacity:.2}path:nth-child(10){animation-delay:.9s;opacity:.1}\n"] }]
+                    ], template: "<div\n  class=\"loading\"\n  aria-atomic=\"true\"\n  aria-live=\"assertive\"\n  [class.blocking-spinner]=\"isBlockingSpinner()\"\n  [class.spinner-overlay]=\"isSpinnerOverlay()\"\n>\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n    <title>{{ ariaLabel() | translate }}</title>\n    <g>\n      <path d=\"M256,156a16,16,0,0,1-16-16V80a16,16,0,0,1,32,0v60A16,16,0,0,1,256,156Z\" />\n      <path\n        d=\"M314.78,175.1a16,16,0,0,1-3.54-22.35l35.27-48.54A16,16,0,1,1,372.39,123l-35.26,48.54A16,16,0,0,1,314.78,175.1Z\"\n      />\n      <path\n        d=\"M351.11,225.1a16,16,0,0,1,10.27-20.16l57.06-18.54a16,16,0,1,1,9.89,30.43l-57.06,18.54A16,16,0,0,1,351.11,225.1Z\"\n      />\n      <path\n        d=\"M351.11,286.9a16,16,0,0,1,20.16-10.27l57.06,18.54a16,16,0,1,1-9.89,30.43l-57.06-18.54A16,16,0,0,1,351.11,286.9Z\"\n      />\n      <path\n        d=\"M314.78,336.9a16,16,0,0,1,22.35,3.54L372.39,389a16,16,0,1,1-25.88,18.81l-35.27-48.54A16,16,0,0,1,314.78,336.9Z\"\n      />\n      <path d=\"M256,356a16,16,0,0,1,16,16v60a16,16,0,0,1-32,0V372A16,16,0,0,1,256,356Z\" />\n      <path\n        d=\"M197.22,336.9a16,16,0,0,1,3.54,22.35l-35.27,48.54A16,16,0,1,1,139.61,389l35.26-48.54A16,16,0,0,1,197.22,336.9Z\"\n      />\n      <path\n        d=\"M160.89,286.9a16,16,0,0,1-10.27,20.16L93.56,325.6a16,16,0,0,1-9.89-30.43l57.06-18.54A16,16,0,0,1,160.89,286.9Z\"\n      />\n      <path\n        d=\"M160.89,225.1a16,16,0,0,1-20.16,10.27L83.67,216.83a16,16,0,1,1,9.89-30.43l57.06,18.54A16,16,0,0,1,160.89,225.1Z\"\n      />\n      <path\n        d=\"M197.22,175.1a16,16,0,0,1-22.35-3.54L139.61,123a16,16,0,1,1,25.88-18.81l35.27,48.54A16,16,0,0,1,197.22,175.1Z\"\n      />\n    </g>\n  </svg>\n</div>\n", styles: ["@keyframes spinner-fade{0%{opacity:1}to{opacity:.05}}.loading{display:block;text-align:center}.blocking-spinner{background:var(--element-base-translucent-1)}.spinner-overlay{position:absolute;inset:0;z-index:1090;display:flex;justify-content:center;align-items:center}svg{inline-size:var(--loading-spinner-size, 64px);block-size:var(--loading-spinner-size, 64px)}path{--spinner-speed: calc(.2s - .1s * var(--element-animations-enabled, 1));fill:var(--loading-spinner-color, var(--element-ui-2));animation:spinner-fade calc(2s - 1s * var(--element-animations-enabled, 1)) infinite linear}path:nth-child(1){animation-delay:calc(0 * var(--spinner-speed));opacity:1}path:nth-child(2){animation-delay:calc(1 * var(--spinner-speed));opacity:.9}path:nth-child(3){animation-delay:calc(2 * var(--spinner-speed));opacity:.8}path:nth-child(4){animation-delay:calc(3 * var(--spinner-speed));opacity:.7}path:nth-child(5){animation-delay:calc(4 * var(--spinner-speed));opacity:.6}path:nth-child(6){animation-delay:calc(5 * var(--spinner-speed));opacity:.5}path:nth-child(7){animation-delay:calc(6 * var(--spinner-speed));opacity:.4}path:nth-child(8){animation-delay:calc(7 * var(--spinner-speed));opacity:.3}path:nth-child(9){animation-delay:calc(8 * var(--spinner-speed));opacity:.2}path:nth-child(10){animation-delay:calc(9 * var(--spinner-speed));opacity:.1}\n"] }]
         }], propDecorators: { fadeAnimation: [{
                 type: HostBinding,
                 args: ['@fadeAnimation']

package/fesm2022/siemens-element-ng-loading-spinner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-loading-spinner.mjs","sources":["../../../../projects/element-ng/loading-spinner/si-loading-spinner.component.ts","../../../../projects/element-ng/loading-spinner/si-loading-spinner.component.html","../../../../projects/element-ng/loading-spinner/si-loading-button.component.ts","../../../../projects/element-ng/loading-spinner/si-loading-button.component.html","../../../../projects/element-ng/loading-spinner/si-loading-spinner.directive.ts","../../../../projects/element-ng/loading-spinner/si-loading-spinner.service.ts","../../../../projects/element-ng/loading-spinner/si-loading-spinner.module.ts","../../../../projects/element-ng/loading-spinner/index.ts","../../../../projects/element-ng/loading-spinner/siemens-element-ng-loading-spinner.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { animate, style, transition, trigger } from '@angular/animations';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  HostBinding,\n  inject,\n  InjectionToken,\n  input\n} from '@angular/core';\nimport { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';\n\nexport const LOADING_SPINNER_BLOCKING = new InjectionToken<boolean>('isBlockingSpinner');\nexport const LOADING_SPINNER_OVERLAY = new InjectionToken<boolean>('isSpinnerOverlay');\n\n@Component({\n  selector: 'si-loading-spinner',\n  imports: [SiTranslatePipe],\n  templateUrl: './si-loading-spinner.component.html',\n  styleUrl: './si-loading-spinner.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  animations: [\n    trigger('fadeAnimation', [\n      transition(':enter', [style({ opacity: 0 }), animate('200ms ease-in')]),\n      transition(':leave', animate('200ms ease-out', style({ opacity: 0 })))\n    ])\n  ]\n})\nexport class SiLoadingSpinnerComponent {\n  @HostBinding('@fadeAnimation') protected fadeAnimation = '';\n  /**\n   * @defaultValue\n   * ```\n   * inject(LOADING_SPINNER_BLOCKING, { optional: true })\n   * ```\n   */\n  readonly isBlockingSpinner = input(inject(LOADING_SPINNER_BLOCKING, { optional: true }));\n  /**\n   * @defaultValue\n   * ```\n   * inject(LOADING_SPINNER_OVERLAY, { optional: true })\n   * ```\n   */\n  readonly isSpinnerOverlay = input(inject(LOADING_SPINNER_OVERLAY, { optional: true }));\n  /**\n   * Needed for a11y\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_LOADING_SPINNER.LABEL:Loading`)\n   * ```\n   */\n  readonly ariaLabel = input(t(() => $localize`:@@SI_LOADING_SPINNER.LABEL:Loading`));\n}\n","<div\n  class=\"loading\"\n  aria-atomic=\"true\"\n  aria-live=\"assertive\"\n  [class.blocking-spinner]=\"isBlockingSpinner()\"\n  [class.spinner-overlay]=\"isSpinnerOverlay()\"\n>\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n    <title>{{ ariaLabel() | translate }}</title>\n    <g>\n      <path d=\"M256,156a16,16,0,0,1-16-16V80a16,16,0,0,1,32,0v60A16,16,0,0,1,256,156Z\" />\n      <path\n        d=\"M314.78,175.1a16,16,0,0,1-3.54-22.35l35.27-48.54A16,16,0,1,1,372.39,123l-35.26,48.54A16,16,0,0,1,314.78,175.1Z\"\n      />\n      <path\n        d=\"M351.11,225.1a16,16,0,0,1,10.27-20.16l57.06-18.54a16,16,0,1,1,9.89,30.43l-57.06,18.54A16,16,0,0,1,351.11,225.1Z\"\n      />\n      <path\n        d=\"M351.11,286.9a16,16,0,0,1,20.16-10.27l57.06,18.54a16,16,0,1,1-9.89,30.43l-57.06-18.54A16,16,0,0,1,351.11,286.9Z\"\n      />\n      <path\n        d=\"M314.78,336.9a16,16,0,0,1,22.35,3.54L372.39,389a16,16,0,1,1-25.88,18.81l-35.27-48.54A16,16,0,0,1,314.78,336.9Z\"\n      />\n      <path d=\"M256,356a16,16,0,0,1,16,16v60a16,16,0,0,1-32,0V372A16,16,0,0,1,256,356Z\" />\n      <path\n        d=\"M197.22,336.9a16,16,0,0,1,3.54,22.35l-35.27,48.54A16,16,0,1,1,139.61,389l35.26-48.54A16,16,0,0,1,197.22,336.9Z\"\n      />\n      <path\n        d=\"M160.89,286.9a16,16,0,0,1-10.27,20.16L93.56,325.6a16,16,0,0,1-9.89-30.43l57.06-18.54A16,16,0,0,1,160.89,286.9Z\"\n      />\n      <path\n        d=\"M160.89,225.1a16,16,0,0,1-20.16,10.27L83.67,216.83a16,16,0,1,1,9.89-30.43l57.06,18.54A16,16,0,0,1,160.89,225.1Z\"\n      />\n      <path\n        d=\"M197.22,175.1a16,16,0,0,1-22.35-3.54L139.61,123a16,16,0,1,1,25.88-18.81l35.27,48.54A16,16,0,0,1,197.22,175.1Z\"\n      />\n    </g>\n  </svg>\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgClass } from '@angular/common';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\nimport { SiLoadingSpinnerComponent } from './si-loading-spinner.component';\n\n@Component({\n  selector: 'si-loading-button',\n  imports: [SiLoadingSpinnerComponent, NgClass, SiTranslatePipe],\n  templateUrl: './si-loading-button.component.html',\n  styleUrl: './si-loading-button.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.pe-none]': 'disabled()'\n  }\n})\nexport class SiLoadingButtonComponent {\n  /**\n   * Whether the button is disabled.\n   * @defaultValue false\n   */\n  readonly disabled = input(false, { transform: booleanAttribute });\n  /**\n   * Whether the loading state should be displayed.\n   * @defaultValue false\n   */\n  readonly loading = input(false, { transform: booleanAttribute });\n  /**\n   * Type of the button.\n   * @defaultValue 'button'\n   **/\n  readonly type = input<'button' | 'submit' | 'reset'>('button');\n  /** aria-label for the button */\n  readonly ariaLabel = input<TranslatableString>();\n  /** aria-labelledby for the button */\n  readonly ariaLabelledBy = input<string>();\n  /**\n   * CSS class for the button.\n   * @defaultValue ''\n   */\n  readonly buttonClass = input('');\n\n  protected handleClick(event: Event): void {\n    if (this.disabled() || this.loading()) {\n      event.stopPropagation();\n    }\n  }\n}\n","<button\n  [type]=\"type()\"\n  [ngClass]=\"buttonClass()\"\n  [class.loading]=\"loading()\"\n  [class.disabled]=\"loading()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-disabled]=\"disabled() || loading()\"\n  [attr.aria-label]=\"ariaLabel() | translate\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [attr.tabindex]=\"loading() ? '-1' : null\"\n  (click)=\"handleClick($event)\"\n>\n  <div class=\"button-wrapper\">\n    <ng-content />\n  </div>\n</button>\n@if (loading()) {\n  <div class=\"spinner-wrapper\" (click)=\"$event.stopPropagation()\">\n    <si-loading-spinner />\n  </div>\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { ComponentPortal, DomPortalOutlet } from '@angular/cdk/portal';\nimport {\n  booleanAttribute,\n  computed,\n  Directive,\n  ElementRef,\n  inject,\n  Injector,\n  input,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  ViewContainerRef\n} from '@angular/core';\nimport { BehaviorSubject, combineLatest, merge, Subscription, timer } from 'rxjs';\nimport { filter, map, switchMap, takeUntil } from 'rxjs/operators';\n\nimport {\n  LOADING_SPINNER_BLOCKING,\n  LOADING_SPINNER_OVERLAY,\n  SiLoadingSpinnerComponent\n} from './si-loading-spinner.component';\n@Directive({\n  selector: '[siLoading]',\n  host: {\n    class: 'position-relative'\n  }\n})\nexport class SiLoadingSpinnerDirective implements OnInit, OnChanges, OnDestroy {\n  /**\n   * Displays the loading spinner when the value is either true or non-zero.\n   */\n  readonly siLoading = input.required<boolean | number>();\n\n  /**\n   * Displays semi-transparent backdrop for the spinner, default is false.\n   *\n   * @defaultValue false\n   */\n  readonly blocking = input(false, { transform: booleanAttribute });\n\n  /**\n   * Specifies if the spinner should be displayed after a delay, default is true.\n   *\n   * @defaultValue true\n   */\n  readonly initialDelay = input(true, { transform: booleanAttribute });\n\n  private el = inject(ElementRef);\n  private readonly viewRef = inject(ViewContainerRef);\n\n  private sub?: Subscription;\n  private progressSubject = new BehaviorSubject(false);\n  private off$ = this.progressSubject.pipe(filter(val => !val));\n  private on$ = this.progressSubject.pipe(filter(val => val));\n  private readonly initialWaitTime = computed(() => (this.initialDelay() ? 500 : 0));\n  private minSpinTime = 500;\n  private portalOutlet?: DomPortalOutlet;\n  private readonly compPortal = new ComponentPortal(\n    SiLoadingSpinnerComponent,\n    this.viewRef,\n    Injector.create({\n      providers: [\n        { provide: LOADING_SPINNER_BLOCKING, useFactory: () => this.blocking() },\n        {\n          provide: LOADING_SPINNER_OVERLAY,\n          useValue: true\n        }\n      ]\n    })\n  );\n\n  // this makes sure the spinner only displays with a delay of 500ms and stays for 500ms so\n  // that it doesn't flicker\n  protected readonly spinner$ = this.on$.pipe(\n    switchMap(() =>\n      merge(\n        timer(this.initialWaitTime()).pipe(\n          map(() => true),\n          takeUntil(this.off$)\n        ),\n        combineLatest([this.off$, timer(this.initialWaitTime() + this.minSpinTime)]).pipe(\n          map(() => false)\n        )\n      )\n    )\n  );\n\n  private createPortal(): void {\n    this.portalOutlet ??= new DomPortalOutlet(this.el.nativeElement);\n    this.compPortal.attach(this.portalOutlet);\n  }\n\n  ngOnInit(): void {\n    this.sub = this.spinner$.subscribe(val => {\n      if (val) {\n        if (!this.compPortal.isAttached) {\n          this.createPortal();\n        }\n      } else if (this.compPortal.isAttached) {\n        this.compPortal.detach();\n      }\n    });\n  }\n\n  ngOnChanges(): void {\n    const newState = !!this.siLoading();\n    if (newState !== this.progressSubject.value) {\n      this.progressSubject.next(newState);\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.sub?.unsubscribe();\n    if (this.compPortal.isAttached) {\n      this.compPortal.detach();\n    }\n    this.portalOutlet?.dispose();\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Injectable } from '@angular/core';\nimport { BehaviorSubject } from 'rxjs';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class SiLoadingService {\n  /**\n   * Counts the number of loads active, is `0` when all loading is finished (or hasn't started).\n   */\n  readonly counter: BehaviorSubject<number> = new BehaviorSubject<number>(0);\n\n  /**\n   * Start the loading.\n   */\n  startLoad(): void {\n    this.counter.next(this.counter.value + 1);\n  }\n\n  /**\n   * Stop the loading.\n   */\n  stopLoad(): void {\n    if (this.counter.value > 0) {\n      this.counter.next(this.counter.value - 1);\n    }\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiLoadingSpinnerComponent } from './si-loading-spinner.component';\nimport { SiLoadingSpinnerDirective } from './si-loading-spinner.directive';\n\n@NgModule({\n  imports: [SiLoadingSpinnerComponent, SiLoadingSpinnerDirective],\n  exports: [SiLoadingSpinnerComponent, SiLoadingSpinnerDirective]\n})\nexport class SiLoadingSpinnerModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-loading-button.component';\nexport * from './si-loading-spinner.component';\nexport * from './si-loading-spinner.directive';\nexport * from './si-loading-spinner.service';\nexport * from './si-loading-spinner.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"siemens-element-ng-loading-spinner.mjs","sources":["../../../../projects/element-ng/loading-spinner/si-loading-spinner.component.ts","../../../../projects/element-ng/loading-spinner/si-loading-spinner.component.html","../../../../projects/element-ng/loading-spinner/si-loading-button.component.ts","../../../../projects/element-ng/loading-spinner/si-loading-button.component.html","../../../../projects/element-ng/loading-spinner/si-loading-spinner.directive.ts","../../../../projects/element-ng/loading-spinner/si-loading-spinner.service.ts","../../../../projects/element-ng/loading-spinner/si-loading-spinner.module.ts","../../../../projects/element-ng/loading-spinner/index.ts","../../../../projects/element-ng/loading-spinner/siemens-element-ng-loading-spinner.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { animate, style, transition, trigger } from '@angular/animations';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  HostBinding,\n  inject,\n  InjectionToken,\n  input\n} from '@angular/core';\nimport { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';\n\nexport const LOADING_SPINNER_BLOCKING = new InjectionToken<boolean>('isBlockingSpinner');\nexport const LOADING_SPINNER_OVERLAY = new InjectionToken<boolean>('isSpinnerOverlay');\n\n@Component({\n  selector: 'si-loading-spinner',\n  imports: [SiTranslatePipe],\n  templateUrl: './si-loading-spinner.component.html',\n  styleUrl: './si-loading-spinner.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  animations: [\n    trigger('fadeAnimation', [\n      transition(':enter', [style({ opacity: 0 }), animate('200ms ease-in')]),\n      transition(':leave', animate('200ms ease-out', style({ opacity: 0 })))\n    ])\n  ]\n})\nexport class SiLoadingSpinnerComponent {\n  @HostBinding('@fadeAnimation') protected fadeAnimation = '';\n  /**\n   * @defaultValue\n   * ```\n   * inject(LOADING_SPINNER_BLOCKING, { optional: true })\n   * ```\n   */\n  readonly isBlockingSpinner = input(inject(LOADING_SPINNER_BLOCKING, { optional: true }));\n  /**\n   * @defaultValue\n   * ```\n   * inject(LOADING_SPINNER_OVERLAY, { optional: true })\n   * ```\n   */\n  readonly isSpinnerOverlay = input(inject(LOADING_SPINNER_OVERLAY, { optional: true }));\n  /**\n   * Needed for a11y\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_LOADING_SPINNER.LABEL:Loading`)\n   * ```\n   */\n  readonly ariaLabel = input(t(() => $localize`:@@SI_LOADING_SPINNER.LABEL:Loading`));\n}\n","<div\n  class=\"loading\"\n  aria-atomic=\"true\"\n  aria-live=\"assertive\"\n  [class.blocking-spinner]=\"isBlockingSpinner()\"\n  [class.spinner-overlay]=\"isSpinnerOverlay()\"\n>\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n    <title>{{ ariaLabel() | translate }}</title>\n    <g>\n      <path d=\"M256,156a16,16,0,0,1-16-16V80a16,16,0,0,1,32,0v60A16,16,0,0,1,256,156Z\" />\n      <path\n        d=\"M314.78,175.1a16,16,0,0,1-3.54-22.35l35.27-48.54A16,16,0,1,1,372.39,123l-35.26,48.54A16,16,0,0,1,314.78,175.1Z\"\n      />\n      <path\n        d=\"M351.11,225.1a16,16,0,0,1,10.27-20.16l57.06-18.54a16,16,0,1,1,9.89,30.43l-57.06,18.54A16,16,0,0,1,351.11,225.1Z\"\n      />\n      <path\n        d=\"M351.11,286.9a16,16,0,0,1,20.16-10.27l57.06,18.54a16,16,0,1,1-9.89,30.43l-57.06-18.54A16,16,0,0,1,351.11,286.9Z\"\n      />\n      <path\n        d=\"M314.78,336.9a16,16,0,0,1,22.35,3.54L372.39,389a16,16,0,1,1-25.88,18.81l-35.27-48.54A16,16,0,0,1,314.78,336.9Z\"\n      />\n      <path d=\"M256,356a16,16,0,0,1,16,16v60a16,16,0,0,1-32,0V372A16,16,0,0,1,256,356Z\" />\n      <path\n        d=\"M197.22,336.9a16,16,0,0,1,3.54,22.35l-35.27,48.54A16,16,0,1,1,139.61,389l35.26-48.54A16,16,0,0,1,197.22,336.9Z\"\n      />\n      <path\n        d=\"M160.89,286.9a16,16,0,0,1-10.27,20.16L93.56,325.6a16,16,0,0,1-9.89-30.43l57.06-18.54A16,16,0,0,1,160.89,286.9Z\"\n      />\n      <path\n        d=\"M160.89,225.1a16,16,0,0,1-20.16,10.27L83.67,216.83a16,16,0,1,1,9.89-30.43l57.06,18.54A16,16,0,0,1,160.89,225.1Z\"\n      />\n      <path\n        d=\"M197.22,175.1a16,16,0,0,1-22.35-3.54L139.61,123a16,16,0,1,1,25.88-18.81l35.27,48.54A16,16,0,0,1,197.22,175.1Z\"\n      />\n    </g>\n  </svg>\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgClass } from '@angular/common';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\nimport { SiLoadingSpinnerComponent } from './si-loading-spinner.component';\n\n@Component({\n  selector: 'si-loading-button',\n  imports: [SiLoadingSpinnerComponent, NgClass, SiTranslatePipe],\n  templateUrl: './si-loading-button.component.html',\n  styleUrl: './si-loading-button.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.pe-none]': 'disabled()'\n  }\n})\nexport class SiLoadingButtonComponent {\n  /**\n   * Whether the button is disabled.\n   * @defaultValue false\n   */\n  readonly disabled = input(false, { transform: booleanAttribute });\n  /**\n   * Whether the loading state should be displayed.\n   * @defaultValue false\n   */\n  readonly loading = input(false, { transform: booleanAttribute });\n  /**\n   * Type of the button.\n   * @defaultValue 'button'\n   **/\n  readonly type = input<'button' | 'submit' | 'reset'>('button');\n  /** aria-label for the button */\n  readonly ariaLabel = input<TranslatableString>();\n  /** aria-labelledby for the button */\n  readonly ariaLabelledBy = input<string>();\n  /**\n   * CSS class for the button.\n   * @defaultValue ''\n   */\n  readonly buttonClass = input('');\n\n  protected handleClick(event: Event): void {\n    if (this.disabled() || this.loading()) {\n      event.stopPropagation();\n    }\n  }\n}\n","<button\n  [type]=\"type()\"\n  [ngClass]=\"buttonClass()\"\n  [class.loading]=\"loading()\"\n  [class.disabled]=\"loading()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-disabled]=\"disabled() || loading()\"\n  [attr.aria-label]=\"ariaLabel() | translate\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [attr.tabindex]=\"loading() ? '-1' : null\"\n  (click)=\"handleClick($event)\"\n>\n  <div class=\"button-wrapper\">\n    <ng-content />\n  </div>\n</button>\n@if (loading()) {\n  <div class=\"spinner-wrapper\" (click)=\"$event.stopPropagation()\">\n    <si-loading-spinner />\n  </div>\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { ComponentPortal, DomPortalOutlet } from '@angular/cdk/portal';\nimport {\n  booleanAttribute,\n  computed,\n  Directive,\n  ElementRef,\n  inject,\n  Injector,\n  input,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  ViewContainerRef\n} from '@angular/core';\nimport { BehaviorSubject, combineLatest, merge, Subscription, timer } from 'rxjs';\nimport { filter, map, switchMap, takeUntil } from 'rxjs/operators';\n\nimport {\n  LOADING_SPINNER_BLOCKING,\n  LOADING_SPINNER_OVERLAY,\n  SiLoadingSpinnerComponent\n} from './si-loading-spinner.component';\n@Directive({\n  selector: '[siLoading]',\n  host: {\n    class: 'position-relative'\n  }\n})\nexport class SiLoadingSpinnerDirective implements OnInit, OnChanges, OnDestroy {\n  /**\n   * Displays the loading spinner when the value is either true or non-zero.\n   */\n  readonly siLoading = input.required<boolean | number>();\n\n  /**\n   * Displays semi-transparent backdrop for the spinner, default is false.\n   *\n   * @defaultValue false\n   */\n  readonly blocking = input(false, { transform: booleanAttribute });\n\n  /**\n   * Specifies if the spinner should be displayed after a delay, default is true.\n   *\n   * @defaultValue true\n   */\n  readonly initialDelay = input(true, { transform: booleanAttribute });\n\n  private el = inject(ElementRef);\n  private readonly viewRef = inject(ViewContainerRef);\n\n  private sub?: Subscription;\n  private progressSubject = new BehaviorSubject(false);\n  private off$ = this.progressSubject.pipe(filter(val => !val));\n  private on$ = this.progressSubject.pipe(filter(val => val));\n  private readonly initialWaitTime = computed(() => (this.initialDelay() ? 500 : 0));\n  private minSpinTime = 500;\n  private portalOutlet?: DomPortalOutlet;\n  private readonly compPortal = new ComponentPortal(\n    SiLoadingSpinnerComponent,\n    this.viewRef,\n    Injector.create({\n      providers: [\n        { provide: LOADING_SPINNER_BLOCKING, useFactory: () => this.blocking() },\n        {\n          provide: LOADING_SPINNER_OVERLAY,\n          useValue: true\n        }\n      ]\n    })\n  );\n\n  // this makes sure the spinner only displays with a delay of 500ms and stays for 500ms so\n  // that it doesn't flicker\n  protected readonly spinner$ = this.on$.pipe(\n    switchMap(() =>\n      merge(\n        timer(this.initialWaitTime()).pipe(\n          map(() => true),\n          takeUntil(this.off$)\n        ),\n        combineLatest([this.off$, timer(this.initialWaitTime() + this.minSpinTime)]).pipe(\n          map(() => false)\n        )\n      )\n    )\n  );\n\n  private createPortal(): void {\n    this.portalOutlet ??= new DomPortalOutlet(this.el.nativeElement);\n    this.compPortal.attach(this.portalOutlet);\n  }\n\n  ngOnInit(): void {\n    this.sub = this.spinner$.subscribe(val => {\n      if (val) {\n        if (!this.compPortal.isAttached) {\n          this.createPortal();\n        }\n      } else if (this.compPortal.isAttached) {\n        this.compPortal.detach();\n      }\n    });\n  }\n\n  ngOnChanges(): void {\n    const newState = !!this.siLoading();\n    if (newState !== this.progressSubject.value) {\n      this.progressSubject.next(newState);\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.sub?.unsubscribe();\n    if (this.compPortal.isAttached) {\n      this.compPortal.detach();\n    }\n    this.portalOutlet?.dispose();\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Injectable } from '@angular/core';\nimport { BehaviorSubject } from 'rxjs';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class SiLoadingService {\n  /**\n   * Counts the number of loads active, is `0` when all loading is finished (or hasn't started).\n   */\n  readonly counter: BehaviorSubject<number> = new BehaviorSubject<number>(0);\n\n  /**\n   * Start the loading.\n   */\n  startLoad(): void {\n    this.counter.next(this.counter.value + 1);\n  }\n\n  /**\n   * Stop the loading.\n   */\n  stopLoad(): void {\n    if (this.counter.value > 0) {\n      this.counter.next(this.counter.value - 1);\n    }\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiLoadingSpinnerComponent } from './si-loading-spinner.component';\nimport { SiLoadingSpinnerDirective } from './si-loading-spinner.directive';\n\n@NgModule({\n  imports: [SiLoadingSpinnerComponent, SiLoadingSpinnerDirective],\n  exports: [SiLoadingSpinnerComponent, SiLoadingSpinnerDirective]\n})\nexport class SiLoadingSpinnerModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-loading-button.component';\nexport * from './si-loading-spinner.component';\nexport * from './si-loading-spinner.directive';\nexport * from './si-loading-spinner.service';\nexport * from './si-loading-spinner.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/siemens-element-ng-navbar-vertical.mjs

@@ -6,6 +6,7 @@ import { Component, InjectionToken, input, model, signal, inject, ViewContainerR
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { RouterLinkActive, ActivatedRoute, RouterLink } from '@angular/router';
 import { SI_UI_STATE_SERVICE } from '@siemens/element-ng/common';
+import { addIcons, elementDown2, SiIconComponent, elementSearch, elementDoubleRight, elementDoubleLeft } from '@siemens/element-ng/icon';
 import { BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
 import { SiSearchBarComponent } from '@siemens/element-ng/search-bar';
 import { SiSkipLinkTargetDirective } from '@siemens/element-ng/skip-links';
@@ -162,6 +163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiNavbarVerticalItemComponent {
+    icons = addIcons({ elementDown2 });
     item = input.required({
         alias: 'si-navbar-vertical-item'
     });
@@ -215,16 +217,16 @@ class SiNavbarVerticalItemComponent {
         /* eslint-disable-enable @typescript-eslint/prefer-nullish-coalescing */
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarVerticalItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiNavbarVerticalItemComponent, isStandalone: true, selector: "a[si-navbar-vertical-item], button[si-navbar-vertical-item]", inputs: { item: { classPropertyName: "item", publicName: "si-navbar-vertical-item", isSignal: true, isRequired: true, transformFunction: null }, activeOverride: { classPropertyName: "activeOverride", publicName: "activeOverride", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "triggered()" }, properties: { "class.dropdown-item": "this.parent?.group?.flyout()", "class.navbar-vertical-item": "!this.parent?.group?.flyout()", "class.active": "active" }, classAttribute: "focus-inside" }, ngImport: i0, template: "@if (item().icon) {\n  <i class=\"icon me-n2\" aria-hidden=\"true\" [ngClass]=\"[item().icon]\"></i>\n}\n@if (item().icon && formattedBadge()) {\n  <div class=\"w-100 h-100 position-absolute\">\n    <span class=\"badge-text\">{{ formattedBadge() }}</span>\n  </div>\n}\n<div\n  class=\"item-title text-truncate si-h5\"\n  [class.visually-hidden]=\"!this.parent && this.navbar.collapsed()\"\n>\n  <ng-content />\n</div>\n@if (formattedBadge()) {\n  <span class=\"badge\" [ngClass]=\"'bg-' + item().badgeColor\">\n    {{ formattedBadge() }}\n  </span>\n}\n@if (group) {\n  <span aria-hidden=\"true\" class=\"dropdown-caret element-down-2 me-0 text-body\"></span>\n}\n", styles: [":host(.navbar-vertical-item){display:flex;align-items:center;position:relative;color:var(--element-text-primary);background:none;border:0;font-size:.875rem;padding-block:8px;padding-inline:0 12px;min-inline-size:0;min-block-size:40px;inline-size:100%;border-radius:0}:host(.navbar-vertical-item) .item-title{margin-inline-start:12px}:host(.navbar-vertical-item) .icon{margin-inline-start:12px}:host(.navbar-vertical-item) .icon+.item-title{margin-inline-start:12px}:host(.navbar-vertical-item).active{color:var(--element-text-active);background:var(--element-base-1-selected)}:host(.navbar-vertical-item).active:after{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;inline-size:4px;background:var(--element-ui-0)}:host(.navbar-vertical-item):hover{text-decoration:none;background:var(--element-base-1-hover)}:host-context(.nav-scroll > .navbar-vertical-item)+:host(.navbar-vertical-item),:host-context(.nav-scroll > si-navbar-vertical-group)+:host(.navbar-vertical-item),:host-context(.nav-scroll > si-navbar-flyout-anchor)+:host(.navbar-vertical-item){margin-block-start:8px}:host-context(.nav-text-only si-navbar-vertical-group) .item-title{margin-inline-start:0}:host-context(si-navbar-vertical-group) :host(.navbar-vertical-item){padding-inline-start:32px}:host-context(si-navbar-vertical-group) :host(.navbar-vertical-item) .item-title{font-weight:400}:host(.dropdown-item) .item-title{font-weight:400}:host-context(.nav-collapsed) :is(.badge,.dropdown-caret){display:none}:host-context(si-navbar-vertical:not(.nav-collapsed)) .badge-text{display:none}:host-context(.link-with-items)>:host(button){padding-inline:12px}:host-context(.link-with-items)>:host(button) .item-title,:host-context(.link-with-items)>:host(button) .icon{display:none}:host-context(.link-with-items)>:host(button) .dropdown-caret{padding-inline:0}:host-context(.link-with-items)>:host(button):after{display:none}:host-context(.nav-collapsed .link-with-items)>:host(button){padding-inline:0}:host-context(.nav-collapsed .link-with-items)>:host(button):after{display:block}:host-context(.nav-collapsed .link-with-items)>:host(button) .icon{display:block}:host-context(.nav-collapsed .link-with-items)>:host(a){display:none}.badge{margin-inline:auto 0}.badge-text{position:absolute;inset-block-start:4px;inset-inline-end:6px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiNavbarVerticalItemComponent, isStandalone: true, selector: "a[si-navbar-vertical-item], button[si-navbar-vertical-item]", inputs: { item: { classPropertyName: "item", publicName: "si-navbar-vertical-item", isSignal: true, isRequired: true, transformFunction: null }, activeOverride: { classPropertyName: "activeOverride", publicName: "activeOverride", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "triggered()" }, properties: { "class.dropdown-item": "this.parent?.group?.flyout()", "class.navbar-vertical-item": "!this.parent?.group?.flyout()", "class.active": "active" }, classAttribute: "focus-inside" }, ngImport: i0, template: "@if (item().icon) {\n  <i class=\"icon me-n2\" aria-hidden=\"true\" [ngClass]=\"[item().icon]\"></i>\n}\n@if (item().icon && formattedBadge()) {\n  <div class=\"w-100 h-100 position-absolute\">\n    <span class=\"badge-text\">{{ formattedBadge() }}</span>\n  </div>\n}\n<div\n  class=\"item-title text-truncate si-h5\"\n  [class.visually-hidden]=\"!this.parent && this.navbar.collapsed()\"\n>\n  <ng-content />\n</div>\n@if (formattedBadge()) {\n  <span class=\"badge\" [ngClass]=\"'bg-' + item().badgeColor\">\n    {{ formattedBadge() }}\n  </span>\n}\n@if (group) {\n  <si-icon aria-hidden=\"true\" class=\"dropdown-caret me-0 text-body\" [icon]=\"icons.elementDown2\" />\n}\n", styles: [":host(.navbar-vertical-item){display:flex;align-items:center;position:relative;color:var(--element-text-primary);background:none;border:0;font-size:.875rem;padding-block:8px;padding-inline:0 12px;min-inline-size:0;min-block-size:40px;inline-size:100%;border-radius:0}:host(.navbar-vertical-item) .item-title{margin-inline-start:12px}:host(.navbar-vertical-item) .icon{margin-inline-start:12px}:host(.navbar-vertical-item) .icon+.item-title{margin-inline-start:12px}:host(.navbar-vertical-item).active{color:var(--element-text-active);background:var(--element-base-1-selected)}:host(.navbar-vertical-item).active:after{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;inline-size:4px;background:var(--element-ui-0)}:host(.navbar-vertical-item):hover{text-decoration:none;background:var(--element-base-1-hover)}:host-context(.nav-scroll > .navbar-vertical-item)+:host(.navbar-vertical-item),:host-context(.nav-scroll > si-navbar-vertical-group)+:host(.navbar-vertical-item),:host-context(.nav-scroll > si-navbar-flyout-anchor)+:host(.navbar-vertical-item){margin-block-start:8px}:host-context(.nav-text-only si-navbar-vertical-group) .item-title{margin-inline-start:0}:host-context(si-navbar-vertical-group) :host(.navbar-vertical-item){padding-inline-start:32px}:host-context(si-navbar-vertical-group) :host(.navbar-vertical-item) .item-title{font-weight:400}:host(.dropdown-item) .item-title{font-weight:400}:host-context(.nav-collapsed) :is(.badge,.dropdown-caret){display:none}:host-context(si-navbar-vertical:not(.nav-collapsed)) .badge-text{display:none}:host-context(.link-with-items)>:host(button){padding-inline:12px}:host-context(.link-with-items)>:host(button) .item-title,:host-context(.link-with-items)>:host(button) .icon{display:none}:host-context(.link-with-items)>:host(button) .dropdown-caret{padding-inline:0}:host-context(.link-with-items)>:host(button):after{display:none}:host-context(.nav-collapsed .link-with-items)>:host(button){padding-inline:0}:host-context(.nav-collapsed .link-with-items)>:host(button):after{display:block}:host-context(.nav-collapsed .link-with-items)>:host(button) .icon{display:block}:host-context(.nav-collapsed .link-with-items)>:host(a){display:none}.badge{margin-inline:auto 0}.badge-text{position:absolute;inset-block-start:4px;inset-inline-end:6px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarVerticalItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'a[si-navbar-vertical-item], button[si-navbar-vertical-item]', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'a[si-navbar-vertical-item], button[si-navbar-vertical-item]', imports: [NgClass, SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'focus-inside',
                         '[class.dropdown-item]': 'this.parent?.group?.flyout()',
                         '[class.navbar-vertical-item]': '!this.parent?.group?.flyout()',
                         '[class.active]': 'active'
-                    }, template: "@if (item().icon) {\n  <i class=\"icon me-n2\" aria-hidden=\"true\" [ngClass]=\"[item().icon]\"></i>\n}\n@if (item().icon && formattedBadge()) {\n  <div class=\"w-100 h-100 position-absolute\">\n    <span class=\"badge-text\">{{ formattedBadge() }}</span>\n  </div>\n}\n<div\n  class=\"item-title text-truncate si-h5\"\n  [class.visually-hidden]=\"!this.parent && this.navbar.collapsed()\"\n>\n  <ng-content />\n</div>\n@if (formattedBadge()) {\n  <span class=\"badge\" [ngClass]=\"'bg-' + item().badgeColor\">\n    {{ formattedBadge() }}\n  </span>\n}\n@if (group) {\n  <span aria-hidden=\"true\" class=\"dropdown-caret element-down-2 me-0 text-body\"></span>\n}\n", styles: [":host(.navbar-vertical-item){display:flex;align-items:center;position:relative;color:var(--element-text-primary);background:none;border:0;font-size:.875rem;padding-block:8px;padding-inline:0 12px;min-inline-size:0;min-block-size:40px;inline-size:100%;border-radius:0}:host(.navbar-vertical-item) .item-title{margin-inline-start:12px}:host(.navbar-vertical-item) .icon{margin-inline-start:12px}:host(.navbar-vertical-item) .icon+.item-title{margin-inline-start:12px}:host(.navbar-vertical-item).active{color:var(--element-text-active);background:var(--element-base-1-selected)}:host(.navbar-vertical-item).active:after{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;inline-size:4px;background:var(--element-ui-0)}:host(.navbar-vertical-item):hover{text-decoration:none;background:var(--element-base-1-hover)}:host-context(.nav-scroll > .navbar-vertical-item)+:host(.navbar-vertical-item),:host-context(.nav-scroll > si-navbar-vertical-group)+:host(.navbar-vertical-item),:host-context(.nav-scroll > si-navbar-flyout-anchor)+:host(.navbar-vertical-item){margin-block-start:8px}:host-context(.nav-text-only si-navbar-vertical-group) .item-title{margin-inline-start:0}:host-context(si-navbar-vertical-group) :host(.navbar-vertical-item){padding-inline-start:32px}:host-context(si-navbar-vertical-group) :host(.navbar-vertical-item) .item-title{font-weight:400}:host(.dropdown-item) .item-title{font-weight:400}:host-context(.nav-collapsed) :is(.badge,.dropdown-caret){display:none}:host-context(si-navbar-vertical:not(.nav-collapsed)) .badge-text{display:none}:host-context(.link-with-items)>:host(button){padding-inline:12px}:host-context(.link-with-items)>:host(button) .item-title,:host-context(.link-with-items)>:host(button) .icon{display:none}:host-context(.link-with-items)>:host(button) .dropdown-caret{padding-inline:0}:host-context(.link-with-items)>:host(button):after{display:none}:host-context(.nav-collapsed .link-with-items)>:host(button){padding-inline:0}:host-context(.nav-collapsed .link-with-items)>:host(button):after{display:block}:host-context(.nav-collapsed .link-with-items)>:host(button) .icon{display:block}:host-context(.nav-collapsed .link-with-items)>:host(a){display:none}.badge{margin-inline:auto 0}.badge-text{position:absolute;inset-block-start:4px;inset-inline-end:6px}\n"] }]
+                    }, template: "@if (item().icon) {\n  <i class=\"icon me-n2\" aria-hidden=\"true\" [ngClass]=\"[item().icon]\"></i>\n}\n@if (item().icon && formattedBadge()) {\n  <div class=\"w-100 h-100 position-absolute\">\n    <span class=\"badge-text\">{{ formattedBadge() }}</span>\n  </div>\n}\n<div\n  class=\"item-title text-truncate si-h5\"\n  [class.visually-hidden]=\"!this.parent && this.navbar.collapsed()\"\n>\n  <ng-content />\n</div>\n@if (formattedBadge()) {\n  <span class=\"badge\" [ngClass]=\"'bg-' + item().badgeColor\">\n    {{ formattedBadge() }}\n  </span>\n}\n@if (group) {\n  <si-icon aria-hidden=\"true\" class=\"dropdown-caret me-0 text-body\" [icon]=\"icons.elementDown2\" />\n}\n", styles: [":host(.navbar-vertical-item){display:flex;align-items:center;position:relative;color:var(--element-text-primary);background:none;border:0;font-size:.875rem;padding-block:8px;padding-inline:0 12px;min-inline-size:0;min-block-size:40px;inline-size:100%;border-radius:0}:host(.navbar-vertical-item) .item-title{margin-inline-start:12px}:host(.navbar-vertical-item) .icon{margin-inline-start:12px}:host(.navbar-vertical-item) .icon+.item-title{margin-inline-start:12px}:host(.navbar-vertical-item).active{color:var(--element-text-active);background:var(--element-base-1-selected)}:host(.navbar-vertical-item).active:after{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;inline-size:4px;background:var(--element-ui-0)}:host(.navbar-vertical-item):hover{text-decoration:none;background:var(--element-base-1-hover)}:host-context(.nav-scroll > .navbar-vertical-item)+:host(.navbar-vertical-item),:host-context(.nav-scroll > si-navbar-vertical-group)+:host(.navbar-vertical-item),:host-context(.nav-scroll > si-navbar-flyout-anchor)+:host(.navbar-vertical-item){margin-block-start:8px}:host-context(.nav-text-only si-navbar-vertical-group) .item-title{margin-inline-start:0}:host-context(si-navbar-vertical-group) :host(.navbar-vertical-item){padding-inline-start:32px}:host-context(si-navbar-vertical-group) :host(.navbar-vertical-item) .item-title{font-weight:400}:host(.dropdown-item) .item-title{font-weight:400}:host-context(.nav-collapsed) :is(.badge,.dropdown-caret){display:none}:host-context(si-navbar-vertical:not(.nav-collapsed)) .badge-text{display:none}:host-context(.link-with-items)>:host(button){padding-inline:12px}:host-context(.link-with-items)>:host(button) .item-title,:host-context(.link-with-items)>:host(button) .icon{display:none}:host-context(.link-with-items)>:host(button) .dropdown-caret{padding-inline:0}:host-context(.link-with-items)>:host(button):after{display:none}:host-context(.nav-collapsed .link-with-items)>:host(button){padding-inline:0}:host-context(.nav-collapsed .link-with-items)>:host(button):after{display:block}:host-context(.nav-collapsed .link-with-items)>:host(button) .icon{display:block}:host-context(.nav-collapsed .link-with-items)>:host(a){display:none}.badge{margin-inline:auto 0}.badge-text{position:absolute;inset-block-start:4px;inset-inline-end:6px}\n"] }]
         }], propDecorators: { triggered: [{
                 type: HostListener,
                 args: ['click']
@@ -431,6 +433,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             args: [{ selector: '[siNavbarVerticalItemGuard]' }]
         }] });
 class SiNavbarVerticalComponent {
+    icons = addIcons({ elementDoubleLeft, elementDoubleRight, elementSearch });
     /**
      * Whether the navbar-vertical is collapsed.
      *
@@ -650,7 +653,7 @@ class SiNavbarVerticalComponent {
         return !('type' in item && item.type !== 'check' && item.type !== 'radio');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarVerticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiNavbarVerticalComponent, isStandalone: true, selector: "si-navbar-vertical", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, textOnly: { classPropertyName: "textOnly", publicName: "textOnly", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, navbarExpandButtonText: { classPropertyName: "navbarExpandButtonText", publicName: "navbarExpandButtonText", isSignal: true, isRequired: false, transformFunction: null }, navbarCollapseButtonText: { classPropertyName: "navbarCollapseButtonText", publicName: "navbarCollapseButtonText", isSignal: true, isRequired: false, transformFunction: null }, stateId: { classPropertyName: "stateId", publicName: "stateId", isSignal: true, isRequired: false, transformFunction: null }, skipLinkNavigationLabel: { classPropertyName: "skipLinkNavigationLabel", publicName: "skipLinkNavigationLabel", isSignal: true, isRequired: false, transformFunction: null }, skipLinkMainContentLabel: { classPropertyName: "skipLinkMainContentLabel", publicName: "skipLinkMainContentLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", items: "itemsChange", searchEvent: "searchEvent" }, host: { properties: { "class.nav-collapsed": "collapsed()", "class.nav-text-only": "textOnly()", "class.visible": "visible()", "class.ready": "this.ready" }, classAttribute: "si-layout-inner" }, providers: [{ provide: SI_NAVBAR_VERTICAL, useExisting: SiNavbarVerticalComponent }], viewQueries: [{ propertyName: "searchBar", first: true, predicate: SiSearchBarComponent, descendants: true, isSignal: true }, { propertyName: "navbarItems", predicate: SiNavbarVerticalItemComponent, descendants: true, isSignal: true }, { propertyName: "navbarItemsLegacy", predicate: SiNavbarVerticalItemLegacyComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (visible()) {\n  @if (smallScreen() && !collapsed()) {\n    <div\n      class=\"modal-backdrop\"\n      [@backdrop]=\"smallScreen() && !collapsed() ? 'show' : 'hide'\"\n      (click)=\"toggleCollapse()\"\n    ></div>\n  }\n  <nav\n    tabindex=\"-1\"\n    class=\"bg-base-1 focus-sub-inside\"\n    [siSkipLinkTarget]=\"skipLinkNavigationLabel()\"\n    [@collapse]=\"collapsed() ? 'collapsed' : 'expanded'\"\n    [class.text-only]=\"textOnly()\"\n  >\n    <div class=\"collapse-toggle ms-auto\">\n      <div class=\"mobile-drawer focus-inside navbar-vertical-no-collapse\">\n        <button\n          type=\"button\"\n          class=\"btn btn-circle btn-sm btn-ghost flip-rtl\"\n          [class.element-double-left]=\"!collapsed()\"\n          [class.element-double-right]=\"collapsed()\"\n          [attr.aria-label]=\"\n            (collapsed() ? navbarExpandButtonText() : navbarCollapseButtonText()) | translate\n          \"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapse()\"\n        >\n        </button>\n      </div>\n    </div>\n    @if (searchable()) {\n      <div class=\"nav-search\">\n        <si-search-bar\n          class=\"mx-4\"\n          colorVariant=\"base-0\"\n          prohibitedCharacters=\"*?\"\n          [placeholder]=\"searchPlaceholder() | translate\"\n          [debounceTime]=\"searchInputDelay\"\n          [showIcon]=\"true\"\n          (searchChange)=\"doSearch($event)\"\n        />\n        <button\n          type=\"button\"\n          class=\"btn-search bg-base-0 p-2 mx-4 mobile navbar-vertical-no-collapse text-secondary\"\n          [attr.aria-label]=\"searchPlaceholder() | translate\"\n          (click)=\"expandForSearch()\"\n        >\n          <i class=\"icon element-search\"></i>\n        </button>\n      </div>\n    }\n    <div class=\"nav-scroll\">\n      @for (item of items(); track $index) {\n        @if (isLegacyStyle(item)) {\n          <si-navbar-vertical-item-legacy\n            [item]=\"item\"\n            [navbarExpandButtonText]=\"navbarExpandButtonText() | translate\"\n            [navbarCollapseButtonText]=\"navbarCollapseButtonText() | translate\"\n            [expanded]=\"\n              (item.id ? uiStateExpandedItems()[item.id] : undefined) ?? item.expanded ?? false\n            \"\n          />\n        } @else {\n          <ng-container *ngTemplateOutlet=\"navbarItems; context: { item }\" />\n        }\n      }\n    </div>\n  </nav>\n}\n<main\n  class=\"si-layout-inner focus-none\"\n  tabindex=\"-1\"\n  [siSkipLinkTarget]=\"skipLinkMainContentLabel()\"\n>\n  <ng-content />\n</main>\n\n<ng-template #navbarItems let-item=\"item\" siNavbarVerticalItemGuard>\n  @switch (item.type) {\n    @case ('group') {\n      <button\n        type=\"button\"\n        [si-navbar-vertical-item]=\"item\"\n        [stateId]=\"item.id\"\n        [siNavbarVerticalGroupTriggerFor]=\"group\"\n        [groupData]=\"{ group: item }\"\n        [expanded]=\"\n          (item.id ? uiStateExpandedItems()[item.id] : undefined) ?? item.expanded ?? false\n        \"\n      >\n        {{ item.label | translate }}\n      </button>\n    }\n    @case ('action') {\n      <button type=\"button\" [si-navbar-vertical-item]=\"item\" [activeOverride]=\"item.active\">\n        {{ item.label | translate }}\n      </button>\n    }\n    @case ('router-link') {\n      <a\n        routerLinkActive\n        [routerLinkActiveOptions]=\"item.activeMatchOptions ?? { exact: false }\"\n        [si-navbar-vertical-item]=\"item\"\n        [routerLink]=\"item.routerLink\"\n        [queryParams]=\"item.extras?.queryParams\"\n        [queryParamsHandling]=\"item.extras?.queryParamsHandling\"\n        [fragment]=\"item.extras?.fragment\"\n        [state]=\"item.extras?.state\"\n        [relativeTo]=\"item.extras?.relativeTo ?? this.activatedRoute\"\n        [preserveFragment]=\"item.extras?.preserveFragment\"\n        [skipLocationChange]=\"item.extras?.skipLocationChange\"\n        [replaceUrl]=\"item.extras?.replaceUrl\"\n      >\n        {{ item.label | translate }}\n      </a>\n    }\n    @case ('link') {\n      <a [si-navbar-vertical-item]=\"item\" [href]=\"item.href\" [target]=\"item.target\">\n        {{ item.label | translate }}\n      </a>\n    }\n    @case ('divider') {\n      <si-navbar-vertical-divider />\n    }\n    @case ('header') {\n      <si-navbar-vertical-header>\n        {{ item.label | translate }}\n      </si-navbar-vertical-header>\n    }\n  }\n</ng-template>\n\n<ng-template #group let-group=\"group\" siNavbarVerticalItemGuard>\n  <si-navbar-vertical-group routerLinkActive>\n    @for (item of group.children; track $index) {\n      <!-- a copy from above, but we have to nest the items to make routerLink active work -->\n      @switch (item.type) {\n        @case ('router-link') {\n          <a\n            routerLinkActive\n            [routerLinkActiveOptions]=\"item.activeMatchOptions ?? { exact: false }\"\n            [si-navbar-vertical-item]=\"item\"\n            [routerLink]=\"item.routerLink\"\n            [queryParams]=\"item.extras?.queryParams\"\n            [queryParamsHandling]=\"item.extras?.queryParamsHandling\"\n            [fragment]=\"item.extras?.fragment\"\n            [state]=\"item.extras?.state\"\n            [relativeTo]=\"item.extras?.relativeTo ?? this.activatedRoute\"\n            [preserveFragment]=\"item.extras?.preserveFragment\"\n            [skipLocationChange]=\"item.extras?.skipLocationChange\"\n            [replaceUrl]=\"item.extras?.replaceUrl\"\n          >\n            {{ item.label | translate }}\n          </a>\n        }\n        @case ('action') {\n          <button type=\"button\" [si-navbar-vertical-item]=\"item\" [activeOverride]=\"item.active\">\n            {{ item.label | translate }}\n          </button>\n        }\n        @case ('link') {\n          <a [si-navbar-vertical-item]=\"item\" [href]=\"item.href\" [target]=\"item.target\">\n            {{ item.label | translate }}\n          </a>\n        }\n      }\n    }\n  </si-navbar-vertical-group>\n</ng-template>\n", styles: [":host{display:block;transition:padding-inline-start calc(.5s * var(--element-animations-enabled, 1));--si-layout-header-first-element-offset: 40px}:host.ready:not(.visible){padding-inline-start:0!important}nav{display:flex;flex-direction:column;position:fixed;z-index:1031;inset-block-start:calc(48px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-block-end:0;inset-inline-start:0;inline-size:0}:host(.nav-collapsed) nav{z-index:1030}.nav-scroll{overflow-x:hidden;min-block-size:0;flex:1 0 0;overflow-y:auto;margin-block-start:8px}:host(.nav-collapsed) .nav-scroll{display:none}.mobile-drawer{display:block;text-align:end;border:0;inline-size:48px;color:var(--element-text-primary);padding-block:4px;padding-inline:8px;margin-block-start:8px;border-start-end-radius:var(--element-radius-2);border-end-end-radius:var(--element-radius-2)}.nav-search{display:flex;align-items:center;block-size:40px;margin-block-start:8px;overflow-x:hidden}:host(.nav-collapsed) .nav-search{display:none}si-search-bar{inline-size:100%}.btn-search{display:none;border:0;border-radius:var(--element-radius-2)}:host.nav-collapsed .mobile-drawer{border:0;color:var(--element-text-primary);background:var(--element-base-1);text-align:end;box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}:host.nav-collapsed si-search-bar{display:none}.modal-backdrop{z-index:1031;opacity:0}@media (min-width: 576px){:host:not(.nav-text-only),:host:not(.nav-collapsed){--si-layout-header-first-element-offset: 0}:host:not(.nav-text-only){padding-inline-start:48px}:host:not(.nav-text-only) .mobile-drawer{background:transparent;box-shadow:none}:host:not(.nav-text-only).nav-collapsed .nav-scroll{display:block}:host:not(.nav-text-only).nav-collapsed .nav-search{display:flex}.btn-search{display:none}:host.nav-collapsed .btn-search{display:block}:host:not(.nav-text-only) nav{inline-size:48px}}@media (min-width: 992px){:host:not(.nav-collapsed){padding-inline-start:240px}}\n"], dependencies: [{ kind: "component", type: SiNavbarVerticalItemLegacyComponent, selector: "si-navbar-vertical-item-legacy", inputs: ["item", "navbarExpandButtonText", "navbarCollapseButtonText", "expanded"], outputs: ["expandedChange"] }, { kind: "component", type: SiSearchBarComponent, selector: "si-search-bar", inputs: ["debounceTime", "prohibitedCharacters", "placeholder", "showIcon", "tabbable", "value", "readonly", "colorVariant", "disabled", "clearButtonAriaLabel"], outputs: ["searchChange"] }, { kind: "directive", type: SiSkipLinkTargetDirective, selector: "[siSkipLinkTarget]", inputs: ["siSkipLinkTarget"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "component", type: SiNavbarVerticalItemComponent, selector: "a[si-navbar-vertical-item], button[si-navbar-vertical-item]", inputs: ["si-navbar-vertical-item", "activeOverride"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: SiNavbarVerticalItemGuardDirective, selector: "[siNavbarVerticalItemGuard]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiNavbarVerticalGroupComponent, selector: "si-navbar-vertical-group" }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: SiNavbarVerticalGroupTriggerDirective, selector: "button[siNavbarVerticalGroupTriggerFor]", inputs: ["siNavbarVerticalGroupTriggerFor", "groupData", "stateId", "expanded"], outputs: ["expandedChange"] }, { kind: "component", type: SiNavbarVerticalDividerComponent, selector: "si-navbar-vertical-divider" }, { kind: "component", type: SiNavbarVerticalHeaderComponent, selector: "si-navbar-vertical-header" }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiNavbarVerticalComponent, isStandalone: true, selector: "si-navbar-vertical", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, textOnly: { classPropertyName: "textOnly", publicName: "textOnly", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, navbarExpandButtonText: { classPropertyName: "navbarExpandButtonText", publicName: "navbarExpandButtonText", isSignal: true, isRequired: false, transformFunction: null }, navbarCollapseButtonText: { classPropertyName: "navbarCollapseButtonText", publicName: "navbarCollapseButtonText", isSignal: true, isRequired: false, transformFunction: null }, stateId: { classPropertyName: "stateId", publicName: "stateId", isSignal: true, isRequired: false, transformFunction: null }, skipLinkNavigationLabel: { classPropertyName: "skipLinkNavigationLabel", publicName: "skipLinkNavigationLabel", isSignal: true, isRequired: false, transformFunction: null }, skipLinkMainContentLabel: { classPropertyName: "skipLinkMainContentLabel", publicName: "skipLinkMainContentLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", items: "itemsChange", searchEvent: "searchEvent" }, host: { properties: { "class.nav-collapsed": "collapsed()", "class.nav-text-only": "textOnly()", "class.visible": "visible()", "class.ready": "this.ready" }, classAttribute: "si-layout-inner" }, providers: [{ provide: SI_NAVBAR_VERTICAL, useExisting: SiNavbarVerticalComponent }], viewQueries: [{ propertyName: "searchBar", first: true, predicate: SiSearchBarComponent, descendants: true, isSignal: true }, { propertyName: "navbarItems", predicate: SiNavbarVerticalItemComponent, descendants: true, isSignal: true }, { propertyName: "navbarItemsLegacy", predicate: SiNavbarVerticalItemLegacyComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (visible()) {\n  @if (smallScreen() && !collapsed()) {\n    <div\n      class=\"modal-backdrop\"\n      [@backdrop]=\"smallScreen() && !collapsed() ? 'show' : 'hide'\"\n      (click)=\"toggleCollapse()\"\n    ></div>\n  }\n  <nav\n    tabindex=\"-1\"\n    class=\"bg-base-1 focus-sub-inside\"\n    [siSkipLinkTarget]=\"skipLinkNavigationLabel()\"\n    [@collapse]=\"collapsed() ? 'collapsed' : 'expanded'\"\n    [class.text-only]=\"textOnly()\"\n  >\n    <div class=\"collapse-toggle ms-auto\">\n      <div class=\"mobile-drawer focus-inside navbar-vertical-no-collapse\">\n        <button\n          type=\"button\"\n          class=\"btn btn-circle btn-sm btn-ghost\"\n          [attr.aria-label]=\"\n            (collapsed() ? navbarExpandButtonText() : navbarCollapseButtonText()) | translate\n          \"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapse()\"\n        >\n          <si-icon\n            class=\"flip-rtl\"\n            [icon]=\"collapsed() ? icons.elementDoubleRight : icons.elementDoubleLeft\"\n          />\n        </button>\n      </div>\n    </div>\n    @if (searchable()) {\n      <div class=\"nav-search\">\n        <si-search-bar\n          class=\"mx-4\"\n          colorVariant=\"base-0\"\n          prohibitedCharacters=\"*?\"\n          [placeholder]=\"searchPlaceholder() | translate\"\n          [debounceTime]=\"searchInputDelay\"\n          [showIcon]=\"true\"\n          (searchChange)=\"doSearch($event)\"\n        />\n        <button\n          type=\"button\"\n          class=\"btn-search bg-base-0 p-2 mx-4 mobile navbar-vertical-no-collapse text-secondary\"\n          [attr.aria-label]=\"searchPlaceholder() | translate\"\n          (click)=\"expandForSearch()\"\n        >\n          <si-icon class=\"icon\" [icon]=\"icons.elementSearch\" />\n        </button>\n      </div>\n    }\n    <div class=\"nav-scroll\">\n      @for (item of items(); track $index) {\n        @if (isLegacyStyle(item)) {\n          <si-navbar-vertical-item-legacy\n            [item]=\"item\"\n            [navbarExpandButtonText]=\"navbarExpandButtonText() | translate\"\n            [navbarCollapseButtonText]=\"navbarCollapseButtonText() | translate\"\n            [expanded]=\"\n              (item.id ? uiStateExpandedItems()[item.id] : undefined) ?? item.expanded ?? false\n            \"\n          />\n        } @else {\n          <ng-container *ngTemplateOutlet=\"navbarItems; context: { item }\" />\n        }\n      }\n    </div>\n  </nav>\n}\n<main\n  class=\"si-layout-inner focus-none\"\n  tabindex=\"-1\"\n  [siSkipLinkTarget]=\"skipLinkMainContentLabel()\"\n>\n  <ng-content />\n</main>\n\n<ng-template #navbarItems let-item=\"item\" siNavbarVerticalItemGuard>\n  @switch (item.type) {\n    @case ('group') {\n      <button\n        type=\"button\"\n        [si-navbar-vertical-item]=\"item\"\n        [stateId]=\"item.id\"\n        [siNavbarVerticalGroupTriggerFor]=\"group\"\n        [groupData]=\"{ group: item }\"\n        [expanded]=\"\n          (item.id ? uiStateExpandedItems()[item.id] : undefined) ?? item.expanded ?? false\n        \"\n      >\n        {{ item.label | translate }}\n      </button>\n    }\n    @case ('action') {\n      <button type=\"button\" [si-navbar-vertical-item]=\"item\" [activeOverride]=\"item.active\">\n        {{ item.label | translate }}\n      </button>\n    }\n    @case ('router-link') {\n      <a\n        routerLinkActive\n        [routerLinkActiveOptions]=\"item.activeMatchOptions ?? { exact: false }\"\n        [si-navbar-vertical-item]=\"item\"\n        [routerLink]=\"item.routerLink\"\n        [queryParams]=\"item.extras?.queryParams\"\n        [queryParamsHandling]=\"item.extras?.queryParamsHandling\"\n        [fragment]=\"item.extras?.fragment\"\n        [state]=\"item.extras?.state\"\n        [relativeTo]=\"item.extras?.relativeTo ?? this.activatedRoute\"\n        [preserveFragment]=\"item.extras?.preserveFragment\"\n        [skipLocationChange]=\"item.extras?.skipLocationChange\"\n        [replaceUrl]=\"item.extras?.replaceUrl\"\n      >\n        {{ item.label | translate }}\n      </a>\n    }\n    @case ('link') {\n      <a [si-navbar-vertical-item]=\"item\" [href]=\"item.href\" [target]=\"item.target\">\n        {{ item.label | translate }}\n      </a>\n    }\n    @case ('divider') {\n      <si-navbar-vertical-divider />\n    }\n    @case ('header') {\n      <si-navbar-vertical-header>\n        {{ item.label | translate }}\n      </si-navbar-vertical-header>\n    }\n  }\n</ng-template>\n\n<ng-template #group let-group=\"group\" siNavbarVerticalItemGuard>\n  <si-navbar-vertical-group routerLinkActive>\n    @for (item of group.children; track $index) {\n      <!-- a copy from above, but we have to nest the items to make routerLink active work -->\n      @switch (item.type) {\n        @case ('router-link') {\n          <a\n            routerLinkActive\n            [routerLinkActiveOptions]=\"item.activeMatchOptions ?? { exact: false }\"\n            [si-navbar-vertical-item]=\"item\"\n            [routerLink]=\"item.routerLink\"\n            [queryParams]=\"item.extras?.queryParams\"\n            [queryParamsHandling]=\"item.extras?.queryParamsHandling\"\n            [fragment]=\"item.extras?.fragment\"\n            [state]=\"item.extras?.state\"\n            [relativeTo]=\"item.extras?.relativeTo ?? this.activatedRoute\"\n            [preserveFragment]=\"item.extras?.preserveFragment\"\n            [skipLocationChange]=\"item.extras?.skipLocationChange\"\n            [replaceUrl]=\"item.extras?.replaceUrl\"\n          >\n            {{ item.label | translate }}\n          </a>\n        }\n        @case ('action') {\n          <button type=\"button\" [si-navbar-vertical-item]=\"item\" [activeOverride]=\"item.active\">\n            {{ item.label | translate }}\n          </button>\n        }\n        @case ('link') {\n          <a [si-navbar-vertical-item]=\"item\" [href]=\"item.href\" [target]=\"item.target\">\n            {{ item.label | translate }}\n          </a>\n        }\n      }\n    }\n  </si-navbar-vertical-group>\n</ng-template>\n", styles: [":host{display:block;transition:padding-inline-start calc(.5s * var(--element-animations-enabled, 1));--si-layout-header-first-element-offset: 40px}:host.ready:not(.visible){padding-inline-start:0!important}nav{display:flex;flex-direction:column;position:fixed;z-index:1031;inset-block-start:calc(48px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-block-end:0;inset-inline-start:0;inline-size:0}:host(.nav-collapsed) nav{z-index:1030}.nav-scroll{overflow-x:hidden;min-block-size:0;flex:1 0 0;overflow-y:auto;margin-block-start:8px}:host(.nav-collapsed) .nav-scroll{display:none}.mobile-drawer{display:block;text-align:end;border:0;inline-size:48px;color:var(--element-text-primary);padding-block:4px;padding-inline:8px;margin-block-start:8px;border-start-end-radius:var(--element-radius-2);border-end-end-radius:var(--element-radius-2)}.nav-search{display:flex;align-items:center;block-size:40px;margin-block-start:8px;overflow-x:hidden}:host(.nav-collapsed) .nav-search{display:none}si-search-bar{inline-size:100%}.btn-search{display:none;border:0;border-radius:var(--element-radius-2)}:host.nav-collapsed .mobile-drawer{border:0;color:var(--element-text-primary);background:var(--element-base-1);text-align:end;box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}:host.nav-collapsed si-search-bar{display:none}.modal-backdrop{z-index:1031;opacity:0}@media (min-width: 576px){:host:not(.nav-text-only),:host:not(.nav-collapsed){--si-layout-header-first-element-offset: 0}:host:not(.nav-text-only){padding-inline-start:48px}:host:not(.nav-text-only) .mobile-drawer{background:transparent;box-shadow:none}:host:not(.nav-text-only).nav-collapsed .nav-scroll{display:block}:host:not(.nav-text-only).nav-collapsed .nav-search{display:flex}.btn-search{display:none}:host.nav-collapsed .btn-search{display:block}:host:not(.nav-text-only) nav{inline-size:48px}}@media (min-width: 992px){:host:not(.nav-collapsed){padding-inline-start:240px}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiNavbarVerticalDividerComponent, selector: "si-navbar-vertical-divider" }, { kind: "component", type: SiNavbarVerticalGroupComponent, selector: "si-navbar-vertical-group" }, { kind: "directive", type: SiNavbarVerticalGroupTriggerDirective, selector: "button[siNavbarVerticalGroupTriggerFor]", inputs: ["siNavbarVerticalGroupTriggerFor", "groupData", "stateId", "expanded"], outputs: ["expandedChange"] }, { kind: "component", type: SiNavbarVerticalHeaderComponent, selector: "si-navbar-vertical-header" }, { kind: "component", type: SiNavbarVerticalItemComponent, selector: "a[si-navbar-vertical-item], button[si-navbar-vertical-item]", inputs: ["si-navbar-vertical-item", "activeOverride"] }, { kind: "directive", type: SiNavbarVerticalItemGuardDirective, selector: "[siNavbarVerticalItemGuard]" }, { kind: "component", type: SiNavbarVerticalItemLegacyComponent, selector: "si-navbar-vertical-item-legacy", inputs: ["item", "navbarExpandButtonText", "navbarCollapseButtonText", "expanded"], outputs: ["expandedChange"] }, { kind: "component", type: SiSearchBarComponent, selector: "si-search-bar", inputs: ["debounceTime", "prohibitedCharacters", "placeholder", "showIcon", "tabbable", "value", "readonly", "colorVariant", "disabled", "clearButtonAriaLabel"], outputs: ["searchChange"] }, { kind: "directive", type: SiSkipLinkTargetDirective, selector: "[siSkipLinkTarget]", inputs: ["siSkipLinkTarget"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], animations: [
             trigger('collapse', [
                 state('expanded', style({ 'inline-size': '240px' })),
                 state('collapsed', style({ 'inline-size': '*' })),
@@ -697,19 +700,20 @@ class SiNavbarVerticalComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarVerticalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-navbar-vertical', imports: [
-                        SiNavbarVerticalItemLegacyComponent,
-                        SiSearchBarComponent,
-                        SiSkipLinkTargetDirective,
-                        SiTranslatePipe,
-                        SiNavbarVerticalItemComponent,
-                        RouterLink,
-                        SiNavbarVerticalItemGuardDirective,
                         NgTemplateOutlet,
-                        SiNavbarVerticalGroupComponent,
+                        RouterLink,
                         RouterLinkActive,
-                        SiNavbarVerticalGroupTriggerDirective,
+                        SiIconComponent,
                         SiNavbarVerticalDividerComponent,
-                        SiNavbarVerticalHeaderComponent
+                        SiNavbarVerticalGroupComponent,
+                        SiNavbarVerticalGroupTriggerDirective,
+                        SiNavbarVerticalHeaderComponent,
+                        SiNavbarVerticalItemComponent,
+                        SiNavbarVerticalItemGuardDirective,
+                        SiNavbarVerticalItemLegacyComponent,
+                        SiSearchBarComponent,
+                        SiSkipLinkTargetDirective,
+                        SiTranslatePipe
                     ], providers: [{ provide: SI_NAVBAR_VERTICAL, useExisting: SiNavbarVerticalComponent }], host: {
                         class: 'si-layout-inner',
                         '[class.nav-collapsed]': 'collapsed()',
@@ -757,7 +761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                             state('hide', style({ 'opacity': '0' })),
                             transition('* <=> *', [animate('0.15s linear')])
                         ])
-                    ], template: "@if (visible()) {\n  @if (smallScreen() && !collapsed()) {\n    <div\n      class=\"modal-backdrop\"\n      [@backdrop]=\"smallScreen() && !collapsed() ? 'show' : 'hide'\"\n      (click)=\"toggleCollapse()\"\n    ></div>\n  }\n  <nav\n    tabindex=\"-1\"\n    class=\"bg-base-1 focus-sub-inside\"\n    [siSkipLinkTarget]=\"skipLinkNavigationLabel()\"\n    [@collapse]=\"collapsed() ? 'collapsed' : 'expanded'\"\n    [class.text-only]=\"textOnly()\"\n  >\n    <div class=\"collapse-toggle ms-auto\">\n      <div class=\"mobile-drawer focus-inside navbar-vertical-no-collapse\">\n        <button\n          type=\"button\"\n          class=\"btn btn-circle btn-sm btn-ghost flip-rtl\"\n          [class.element-double-left]=\"!collapsed()\"\n          [class.element-double-right]=\"collapsed()\"\n          [attr.aria-label]=\"\n            (collapsed() ? navbarExpandButtonText() : navbarCollapseButtonText()) | translate\n          \"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapse()\"\n        >\n        </button>\n      </div>\n    </div>\n    @if (searchable()) {\n      <div class=\"nav-search\">\n        <si-search-bar\n          class=\"mx-4\"\n          colorVariant=\"base-0\"\n          prohibitedCharacters=\"*?\"\n          [placeholder]=\"searchPlaceholder() | translate\"\n          [debounceTime]=\"searchInputDelay\"\n          [showIcon]=\"true\"\n          (searchChange)=\"doSearch($event)\"\n        />\n        <button\n          type=\"button\"\n          class=\"btn-search bg-base-0 p-2 mx-4 mobile navbar-vertical-no-collapse text-secondary\"\n          [attr.aria-label]=\"searchPlaceholder() | translate\"\n          (click)=\"expandForSearch()\"\n        >\n          <i class=\"icon element-search\"></i>\n        </button>\n      </div>\n    }\n    <div class=\"nav-scroll\">\n      @for (item of items(); track $index) {\n        @if (isLegacyStyle(item)) {\n          <si-navbar-vertical-item-legacy\n            [item]=\"item\"\n            [navbarExpandButtonText]=\"navbarExpandButtonText() | translate\"\n            [navbarCollapseButtonText]=\"navbarCollapseButtonText() | translate\"\n            [expanded]=\"\n              (item.id ? uiStateExpandedItems()[item.id] : undefined) ?? item.expanded ?? false\n            \"\n          />\n        } @else {\n          <ng-container *ngTemplateOutlet=\"navbarItems; context: { item }\" />\n        }\n      }\n    </div>\n  </nav>\n}\n<main\n  class=\"si-layout-inner focus-none\"\n  tabindex=\"-1\"\n  [siSkipLinkTarget]=\"skipLinkMainContentLabel()\"\n>\n  <ng-content />\n</main>\n\n<ng-template #navbarItems let-item=\"item\" siNavbarVerticalItemGuard>\n  @switch (item.type) {\n    @case ('group') {\n      <button\n        type=\"button\"\n        [si-navbar-vertical-item]=\"item\"\n        [stateId]=\"item.id\"\n        [siNavbarVerticalGroupTriggerFor]=\"group\"\n        [groupData]=\"{ group: item }\"\n        [expanded]=\"\n          (item.id ? uiStateExpandedItems()[item.id] : undefined) ?? item.expanded ?? false\n        \"\n      >\n        {{ item.label | translate }}\n      </button>\n    }\n    @case ('action') {\n      <button type=\"button\" [si-navbar-vertical-item]=\"item\" [activeOverride]=\"item.active\">\n        {{ item.label | translate }}\n      </button>\n    }\n    @case ('router-link') {\n      <a\n        routerLinkActive\n        [routerLinkActiveOptions]=\"item.activeMatchOptions ?? { exact: false }\"\n        [si-navbar-vertical-item]=\"item\"\n        [routerLink]=\"item.routerLink\"\n        [queryParams]=\"item.extras?.queryParams\"\n        [queryParamsHandling]=\"item.extras?.queryParamsHandling\"\n        [fragment]=\"item.extras?.fragment\"\n        [state]=\"item.extras?.state\"\n        [relativeTo]=\"item.extras?.relativeTo ?? this.activatedRoute\"\n        [preserveFragment]=\"item.extras?.preserveFragment\"\n        [skipLocationChange]=\"item.extras?.skipLocationChange\"\n        [replaceUrl]=\"item.extras?.replaceUrl\"\n      >\n        {{ item.label | translate }}\n      </a>\n    }\n    @case ('link') {\n      <a [si-navbar-vertical-item]=\"item\" [href]=\"item.href\" [target]=\"item.target\">\n        {{ item.label | translate }}\n      </a>\n    }\n    @case ('divider') {\n      <si-navbar-vertical-divider />\n    }\n    @case ('header') {\n      <si-navbar-vertical-header>\n        {{ item.label | translate }}\n      </si-navbar-vertical-header>\n    }\n  }\n</ng-template>\n\n<ng-template #group let-group=\"group\" siNavbarVerticalItemGuard>\n  <si-navbar-vertical-group routerLinkActive>\n    @for (item of group.children; track $index) {\n      <!-- a copy from above, but we have to nest the items to make routerLink active work -->\n      @switch (item.type) {\n        @case ('router-link') {\n          <a\n            routerLinkActive\n            [routerLinkActiveOptions]=\"item.activeMatchOptions ?? { exact: false }\"\n            [si-navbar-vertical-item]=\"item\"\n            [routerLink]=\"item.routerLink\"\n            [queryParams]=\"item.extras?.queryParams\"\n            [queryParamsHandling]=\"item.extras?.queryParamsHandling\"\n            [fragment]=\"item.extras?.fragment\"\n            [state]=\"item.extras?.state\"\n            [relativeTo]=\"item.extras?.relativeTo ?? this.activatedRoute\"\n            [preserveFragment]=\"item.extras?.preserveFragment\"\n            [skipLocationChange]=\"item.extras?.skipLocationChange\"\n            [replaceUrl]=\"item.extras?.replaceUrl\"\n          >\n            {{ item.label | translate }}\n          </a>\n        }\n        @case ('action') {\n          <button type=\"button\" [si-navbar-vertical-item]=\"item\" [activeOverride]=\"item.active\">\n            {{ item.label | translate }}\n          </button>\n        }\n        @case ('link') {\n          <a [si-navbar-vertical-item]=\"item\" [href]=\"item.href\" [target]=\"item.target\">\n            {{ item.label | translate }}\n          </a>\n        }\n      }\n    }\n  </si-navbar-vertical-group>\n</ng-template>\n", styles: [":host{display:block;transition:padding-inline-start calc(.5s * var(--element-animations-enabled, 1));--si-layout-header-first-element-offset: 40px}:host.ready:not(.visible){padding-inline-start:0!important}nav{display:flex;flex-direction:column;position:fixed;z-index:1031;inset-block-start:calc(48px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-block-end:0;inset-inline-start:0;inline-size:0}:host(.nav-collapsed) nav{z-index:1030}.nav-scroll{overflow-x:hidden;min-block-size:0;flex:1 0 0;overflow-y:auto;margin-block-start:8px}:host(.nav-collapsed) .nav-scroll{display:none}.mobile-drawer{display:block;text-align:end;border:0;inline-size:48px;color:var(--element-text-primary);padding-block:4px;padding-inline:8px;margin-block-start:8px;border-start-end-radius:var(--element-radius-2);border-end-end-radius:var(--element-radius-2)}.nav-search{display:flex;align-items:center;block-size:40px;margin-block-start:8px;overflow-x:hidden}:host(.nav-collapsed) .nav-search{display:none}si-search-bar{inline-size:100%}.btn-search{display:none;border:0;border-radius:var(--element-radius-2)}:host.nav-collapsed .mobile-drawer{border:0;color:var(--element-text-primary);background:var(--element-base-1);text-align:end;box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}:host.nav-collapsed si-search-bar{display:none}.modal-backdrop{z-index:1031;opacity:0}@media (min-width: 576px){:host:not(.nav-text-only),:host:not(.nav-collapsed){--si-layout-header-first-element-offset: 0}:host:not(.nav-text-only){padding-inline-start:48px}:host:not(.nav-text-only) .mobile-drawer{background:transparent;box-shadow:none}:host:not(.nav-text-only).nav-collapsed .nav-scroll{display:block}:host:not(.nav-text-only).nav-collapsed .nav-search{display:flex}.btn-search{display:none}:host.nav-collapsed .btn-search{display:block}:host:not(.nav-text-only) nav{inline-size:48px}}@media (min-width: 992px){:host:not(.nav-collapsed){padding-inline-start:240px}}\n"] }]
+                    ], template: "@if (visible()) {\n  @if (smallScreen() && !collapsed()) {\n    <div\n      class=\"modal-backdrop\"\n      [@backdrop]=\"smallScreen() && !collapsed() ? 'show' : 'hide'\"\n      (click)=\"toggleCollapse()\"\n    ></div>\n  }\n  <nav\n    tabindex=\"-1\"\n    class=\"bg-base-1 focus-sub-inside\"\n    [siSkipLinkTarget]=\"skipLinkNavigationLabel()\"\n    [@collapse]=\"collapsed() ? 'collapsed' : 'expanded'\"\n    [class.text-only]=\"textOnly()\"\n  >\n    <div class=\"collapse-toggle ms-auto\">\n      <div class=\"mobile-drawer focus-inside navbar-vertical-no-collapse\">\n        <button\n          type=\"button\"\n          class=\"btn btn-circle btn-sm btn-ghost\"\n          [attr.aria-label]=\"\n            (collapsed() ? navbarExpandButtonText() : navbarCollapseButtonText()) | translate\n          \"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapse()\"\n        >\n          <si-icon\n            class=\"flip-rtl\"\n            [icon]=\"collapsed() ? icons.elementDoubleRight : icons.elementDoubleLeft\"\n          />\n        </button>\n      </div>\n    </div>\n    @if (searchable()) {\n      <div class=\"nav-search\">\n        <si-search-bar\n          class=\"mx-4\"\n          colorVariant=\"base-0\"\n          prohibitedCharacters=\"*?\"\n          [placeholder]=\"searchPlaceholder() | translate\"\n          [debounceTime]=\"searchInputDelay\"\n          [showIcon]=\"true\"\n          (searchChange)=\"doSearch($event)\"\n        />\n        <button\n          type=\"button\"\n          class=\"btn-search bg-base-0 p-2 mx-4 mobile navbar-vertical-no-collapse text-secondary\"\n          [attr.aria-label]=\"searchPlaceholder() | translate\"\n          (click)=\"expandForSearch()\"\n        >\n          <si-icon class=\"icon\" [icon]=\"icons.elementSearch\" />\n        </button>\n      </div>\n    }\n    <div class=\"nav-scroll\">\n      @for (item of items(); track $index) {\n        @if (isLegacyStyle(item)) {\n          <si-navbar-vertical-item-legacy\n            [item]=\"item\"\n            [navbarExpandButtonText]=\"navbarExpandButtonText() | translate\"\n            [navbarCollapseButtonText]=\"navbarCollapseButtonText() | translate\"\n            [expanded]=\"\n              (item.id ? uiStateExpandedItems()[item.id] : undefined) ?? item.expanded ?? false\n            \"\n          />\n        } @else {\n          <ng-container *ngTemplateOutlet=\"navbarItems; context: { item }\" />\n        }\n      }\n    </div>\n  </nav>\n}\n<main\n  class=\"si-layout-inner focus-none\"\n  tabindex=\"-1\"\n  [siSkipLinkTarget]=\"skipLinkMainContentLabel()\"\n>\n  <ng-content />\n</main>\n\n<ng-template #navbarItems let-item=\"item\" siNavbarVerticalItemGuard>\n  @switch (item.type) {\n    @case ('group') {\n      <button\n        type=\"button\"\n        [si-navbar-vertical-item]=\"item\"\n        [stateId]=\"item.id\"\n        [siNavbarVerticalGroupTriggerFor]=\"group\"\n        [groupData]=\"{ group: item }\"\n        [expanded]=\"\n          (item.id ? uiStateExpandedItems()[item.id] : undefined) ?? item.expanded ?? false\n        \"\n      >\n        {{ item.label | translate }}\n      </button>\n    }\n    @case ('action') {\n      <button type=\"button\" [si-navbar-vertical-item]=\"item\" [activeOverride]=\"item.active\">\n        {{ item.label | translate }}\n      </button>\n    }\n    @case ('router-link') {\n      <a\n        routerLinkActive\n        [routerLinkActiveOptions]=\"item.activeMatchOptions ?? { exact: false }\"\n        [si-navbar-vertical-item]=\"item\"\n        [routerLink]=\"item.routerLink\"\n        [queryParams]=\"item.extras?.queryParams\"\n        [queryParamsHandling]=\"item.extras?.queryParamsHandling\"\n        [fragment]=\"item.extras?.fragment\"\n        [state]=\"item.extras?.state\"\n        [relativeTo]=\"item.extras?.relativeTo ?? this.activatedRoute\"\n        [preserveFragment]=\"item.extras?.preserveFragment\"\n        [skipLocationChange]=\"item.extras?.skipLocationChange\"\n        [replaceUrl]=\"item.extras?.replaceUrl\"\n      >\n        {{ item.label | translate }}\n      </a>\n    }\n    @case ('link') {\n      <a [si-navbar-vertical-item]=\"item\" [href]=\"item.href\" [target]=\"item.target\">\n        {{ item.label | translate }}\n      </a>\n    }\n    @case ('divider') {\n      <si-navbar-vertical-divider />\n    }\n    @case ('header') {\n      <si-navbar-vertical-header>\n        {{ item.label | translate }}\n      </si-navbar-vertical-header>\n    }\n  }\n</ng-template>\n\n<ng-template #group let-group=\"group\" siNavbarVerticalItemGuard>\n  <si-navbar-vertical-group routerLinkActive>\n    @for (item of group.children; track $index) {\n      <!-- a copy from above, but we have to nest the items to make routerLink active work -->\n      @switch (item.type) {\n        @case ('router-link') {\n          <a\n            routerLinkActive\n            [routerLinkActiveOptions]=\"item.activeMatchOptions ?? { exact: false }\"\n            [si-navbar-vertical-item]=\"item\"\n            [routerLink]=\"item.routerLink\"\n            [queryParams]=\"item.extras?.queryParams\"\n            [queryParamsHandling]=\"item.extras?.queryParamsHandling\"\n            [fragment]=\"item.extras?.fragment\"\n            [state]=\"item.extras?.state\"\n            [relativeTo]=\"item.extras?.relativeTo ?? this.activatedRoute\"\n            [preserveFragment]=\"item.extras?.preserveFragment\"\n            [skipLocationChange]=\"item.extras?.skipLocationChange\"\n            [replaceUrl]=\"item.extras?.replaceUrl\"\n          >\n            {{ item.label | translate }}\n          </a>\n        }\n        @case ('action') {\n          <button type=\"button\" [si-navbar-vertical-item]=\"item\" [activeOverride]=\"item.active\">\n            {{ item.label | translate }}\n          </button>\n        }\n        @case ('link') {\n          <a [si-navbar-vertical-item]=\"item\" [href]=\"item.href\" [target]=\"item.target\">\n            {{ item.label | translate }}\n          </a>\n        }\n      }\n    }\n  </si-navbar-vertical-group>\n</ng-template>\n", styles: [":host{display:block;transition:padding-inline-start calc(.5s * var(--element-animations-enabled, 1));--si-layout-header-first-element-offset: 40px}:host.ready:not(.visible){padding-inline-start:0!important}nav{display:flex;flex-direction:column;position:fixed;z-index:1031;inset-block-start:calc(48px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-block-end:0;inset-inline-start:0;inline-size:0}:host(.nav-collapsed) nav{z-index:1030}.nav-scroll{overflow-x:hidden;min-block-size:0;flex:1 0 0;overflow-y:auto;margin-block-start:8px}:host(.nav-collapsed) .nav-scroll{display:none}.mobile-drawer{display:block;text-align:end;border:0;inline-size:48px;color:var(--element-text-primary);padding-block:4px;padding-inline:8px;margin-block-start:8px;border-start-end-radius:var(--element-radius-2);border-end-end-radius:var(--element-radius-2)}.nav-search{display:flex;align-items:center;block-size:40px;margin-block-start:8px;overflow-x:hidden}:host(.nav-collapsed) .nav-search{display:none}si-search-bar{inline-size:100%}.btn-search{display:none;border:0;border-radius:var(--element-radius-2)}:host.nav-collapsed .mobile-drawer{border:0;color:var(--element-text-primary);background:var(--element-base-1);text-align:end;box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}:host.nav-collapsed si-search-bar{display:none}.modal-backdrop{z-index:1031;opacity:0}@media (min-width: 576px){:host:not(.nav-text-only),:host:not(.nav-collapsed){--si-layout-header-first-element-offset: 0}:host:not(.nav-text-only){padding-inline-start:48px}:host:not(.nav-text-only) .mobile-drawer{background:transparent;box-shadow:none}:host:not(.nav-text-only).nav-collapsed .nav-scroll{display:block}:host:not(.nav-text-only).nav-collapsed .nav-search{display:flex}.btn-search{display:none}:host.nav-collapsed .btn-search{display:block}:host:not(.nav-text-only) nav{inline-size:48px}}@media (min-width: 992px){:host:not(.nav-collapsed){padding-inline-start:240px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { ready: [{
                 type: HostBinding,
                 args: ['class.ready']