@siemens/element-ng 51.2.0 → 51.3.0

package/fesm2022/siemens-element-ng-popover.mjs

@@ -2,7 +2,7 @@ import { Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
 import { input, viewChild, signal, computed, TemplateRef, inject, Injector, ElementRef, DOCUMENT, ChangeDetectionStrategy, Component, output, Directive } from '@angular/core';
-import { calculateOverlayArrowPosition, defaultConnectedOverlayScrollStrategy, getOverlay, getPositionStrategy } from '@siemens/element-ng/common';
+import { calculateOverlayArrowPosition, defaultConnectedOverlayScrollStrategy, positions, isRTL } from '@siemens/element-ng/common';
 import { Subject, takeUntil } from 'rxjs';
 import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
 import { NgTemplateOutlet } from '@angular/common';
@@ -101,7 +101,7 @@ class SiPopoverDirective {
     siPopover = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "siPopover" }] : /* istanbul ignore next */ []));
     /**
-     * The placement of the popover. One of 'top', 'start', end', 'bottom'
+     * The placement of the popover. One of 'top', 'start', 'end', 'bottom'
      *
      * @defaultValue 'auto'
      */
@@ -204,7 +204,18 @@ class SiPopoverDirective {
         }
     }
     createOverlay() {
-        const overlayRef = getOverlay(this.elementRef, this.overlay, false, this.placementInternal(), false, true, this.scrollStrategy());
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.elementRef)
+            .withPush(false)
+            .withGrowAfterOpen(true)
+            .withFlexibleDimensions(false)
+            .withPositions(positions[this.placementInternal()]);
+        const overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.scrollStrategy(),
+            direction: isRTL() ? 'rtl' : 'ltr'
+        });
         overlayRef
             .detachments()
             .pipe(takeUntil(this.destroyer))
@@ -223,8 +234,8 @@ class SiPopoverDirective {
                 this.hide();
             }
         });
-        getPositionStrategy(overlayRef)
-            ?.positionChanges.pipe(takeUntil(this.destroyer))
+        positionStrategy.positionChanges
+            .pipe(takeUntil(this.destroyer))
             .subscribe(change => this.popoverRef?.instance.updateArrow(change, this.elementRef));
         return overlayRef;
     }

package/fesm2022/siemens-element-ng-popover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-popover.mjs","sources":["../../../../projects/element-ng/popover/si-popover.component.ts","../../../../projects/element-ng/popover/si-popover.component.html","../../../../projects/element-ng/popover/si-popover.directive.ts","../../../../projects/element-ng/popover/si-popover-title.directive.ts","../../../../projects/element-ng/popover/si-popover-body.directive.ts","../../../../projects/element-ng/popover/index.ts","../../../../projects/element-ng/popover/siemens-element-ng-popover.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { ConfigurableFocusTrap, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';\nimport { ConnectedOverlayPositionChange } from '@angular/cdk/overlay';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  Component,\n  ElementRef,\n  inject,\n  Injector,\n  input,\n  OnDestroy,\n  OnInit,\n  signal,\n  TemplateRef,\n  viewChild,\n  DOCUMENT,\n  computed,\n  ChangeDetectionStrategy\n} from '@angular/core';\nimport { calculateOverlayArrowPosition, OverlayArrowPosition } from '@siemens/element-ng/common';\nimport { SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\n\nimport { SiPopoverDirective } from './si-popover.directive';\n\n@Component({\n  selector: 'si-popover',\n  imports: [NgTemplateOutlet, SiIconComponent, SiTranslatePipe],\n  templateUrl: './si-popover.component.html',\n  changeDetection: ChangeDetectionStrategy.Eager,\n  host: {\n    '[id]': 'this.popoverDirective().popoverId'\n  }\n})\nexport class PopoverComponent implements OnInit, OnDestroy {\n  /** The directive that supplies and controls the popover content. */\n  readonly popoverDirective = input.required<SiPopoverDirective>();\n  readonly popoverWrapper = viewChild.required<ElementRef>('popoverWrapper');\n\n  /** @internal */\n  labelledBy: string | undefined;\n  /** @internal */\n  describedBy: string | undefined;\n  protected readonly positionClass = signal('');\n  protected readonly arrowPos = signal<OverlayArrowPosition | undefined>(undefined);\n  protected readonly description = computed(() => {\n    const description = this.popoverDirective().siPopover();\n    return !(description instanceof TemplateRef) ? description : undefined;\n  });\n  protected popoverTemplate: TemplateRef<any> | null = null;\n  protected injector = inject(Injector);\n\n  private elementRef = inject(ElementRef);\n  private focusTrapFactory = inject(ConfigurableFocusTrapFactory);\n  private focusTrap?: ConfigurableFocusTrap;\n  private readonly previouslyActiveElement = inject(DOCUMENT).activeElement;\n\n  ngOnInit(): void {\n    const popoverDirective = this.popoverDirective();\n    const popover = popoverDirective.siPopover();\n    if (popover instanceof TemplateRef) {\n      this.popoverTemplate = popover;\n    }\n    this.labelledBy = `__popover-title_${popoverDirective.popoverCounter}`;\n    this.describedBy = `__popover-body_${popoverDirective.popoverCounter}`;\n\n    this.applyFocus();\n  }\n\n  ngOnDestroy(): void {\n    this.focusTrap?.destroy();\n    if (\n      this.previouslyActiveElement &&\n      'focus' in this.previouslyActiveElement &&\n      typeof this.previouslyActiveElement.focus === 'function'\n    ) {\n      this.previouslyActiveElement.focus();\n    }\n  }\n\n  /** @internal */\n  updateArrow(change: ConnectedOverlayPositionChange, anchor?: ElementRef): void {\n    const positionClass = `popover-${change.connectionPair.overlayX}-${change.connectionPair.overlayY}`;\n    // need two updates as class changes affect the position\n    this.positionClass.set(positionClass);\n    const arrowPos = calculateOverlayArrowPosition(change, this.elementRef, anchor);\n    this.arrowPos.set(arrowPos);\n  }\n\n  hide(): void {\n    this.popoverDirective().hide();\n  }\n\n  private applyFocus(): void {\n    // Using setTimeout ensures that SR first read `expanded` before we move the focus.\n    setTimeout(async () => {\n      const popoverWrapperEl = this.popoverWrapper().nativeElement;\n      this.focusTrap = this.focusTrapFactory.create(this.popoverWrapper().nativeElement);\n      const moved = await this.focusTrap.focusFirstTabbableElementWhenReady();\n      if (!moved) {\n        popoverWrapperEl.tabIndex = 0;\n        popoverWrapperEl.focus();\n      }\n    });\n  }\n}\n","@let popover = popoverDirective();\n<div\n  #popoverWrapper\n  role=\"dialog\"\n  [class]=\"[\n    'popover',\n    'position-relative',\n    'focus-inside',\n    positionClass(),\n    popover.containerClass()\n  ]\"\n  [attr.aria-labelledby]=\"labelledBy\"\n  [attr.aria-describedby]=\"describedBy\"\n  (keydown.escape)=\"hide()\"\n>\n  <div\n    class=\"popover-arrow\"\n    [style.left.px]=\"arrowPos()?.left\"\n    [style.right.px]=\"arrowPos()?.right\"\n  ></div>\n  @if (popover.title()) {\n    <div class=\"popover-header\">\n      @let iconValue = popover.icon();\n      @if (iconValue) {\n        <si-icon class=\"icon me-1\" [icon]=\"iconValue\" />\n      }\n      <span class=\"si-h5\" [id]=\"labelledBy\">{{ popover.title() | translate }}</span>\n    </div>\n  }\n  @if (!popoverTemplate) {\n    <div class=\"popover-body\">\n      <div class=\"si-body\" [id]=\"describedBy\">{{ description() | translate }}</div>\n    </div>\n  } @else {\n    <!-- If title is already provided, we wrap the template with the `popover-body` class\n    since the template may not be in the popover body directive. Also used by SiHelpButtonComponent -->\n    @if (popover.title()) {\n      <div class=\"popover-body\">\n        <ng-template\n          [ngTemplateOutlet]=\"popoverTemplate\"\n          [ngTemplateOutletContext]=\"popover.context()\"\n          [ngTemplateOutletInjector]=\"injector\"\n        />\n      </div>\n    } @else {\n      <ng-template\n        [ngTemplateOutlet]=\"popoverTemplate\"\n        [ngTemplateOutletContext]=\"popover.context()\"\n        [ngTemplateOutletInjector]=\"injector\"\n      />\n    }\n  }\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport {\n  ComponentRef,\n  computed,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  OnDestroy,\n  output,\n  signal,\n  TemplateRef\n} from '@angular/core';\nimport {\n  defaultConnectedOverlayScrollStrategy,\n  getOverlay,\n  getPositionStrategy,\n  positions\n} from '@siemens/element-ng/common';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate-types';\nimport { Subject, takeUntil } from 'rxjs';\n\nimport { PopoverComponent } from './si-popover.component';\n\n@Directive({\n  selector: '[siPopover]',\n  host: {\n    '[attr.aria-expanded]': 'isOpen()',\n    '[attr.aria-controls]': 'popoverId',\n    '(click)': 'onClick()'\n  },\n  exportAs: 'si-popover'\n})\nexport class SiPopoverDirective implements OnDestroy {\n  private static idCounter = 0;\n\n  /**\n   * The popover text to be displayed\n   */\n  readonly siPopover = input<TranslatableString | TemplateRef<unknown>>();\n\n  /**\n   * The placement of the popover. One of 'top', 'start', end', 'bottom'\n   *\n   * @defaultValue 'auto'\n   */\n  readonly placement = input<keyof typeof positions>('auto', { alias: 'siPopoverPlacement' });\n\n  readonly placementInternal = computed(() => {\n    if (\n      this.placement() !== 'top' &&\n      this.placement() !== 'bottom' &&\n      this.placement() !== 'start' &&\n      this.placement() !== 'end'\n    ) {\n      return 'auto';\n    } else {\n      return this.placement();\n    }\n  });\n\n  /**\n   * The title to be displayed on top for the popover\n   *\n   * @defaultValue undefined\n   */\n  readonly title = input<TranslatableString>(undefined, { alias: 'siPopoverTitle' });\n\n  /**\n   * The class that will be applied to container of the popover\n   *\n   * @defaultValue ''\n   */\n  readonly containerClass = input('', { alias: 'siPopoverContainerClass' });\n\n  /**\n   * The icon to be displayed besides popover title\n   *\n   * @defaultValue undefined\n   */\n  readonly icon = input<string>(undefined, { alias: 'siPopoverIcon' });\n\n  /**\n   * The context for the attached template\n   *\n   * @defaultValue undefined\n   */\n  readonly context = input<unknown>(undefined, { alias: 'siPopoverContext' });\n\n  /**\n   * CDK scroll strategy used for the popover overlay.\n   *\n   * @defaultValue defaultConnectedOverlayScrollStrategy()\n   */\n  readonly scrollStrategy = input(defaultConnectedOverlayScrollStrategy(), {\n    alias: 'siPopoverScrollStrategy'\n  });\n\n  /**\n   * Emits `true` when the popover is shown, `false` when the popover is hidden.\n   */\n  readonly visibilityChange = output<boolean>({ alias: 'siPopoverVisibilityChange' });\n\n  /** @internal */\n  readonly popoverCounter = SiPopoverDirective.idCounter++;\n  /** @internal */\n  readonly popoverId = `__popover_${this.popoverCounter}`;\n\n  /** @internal */\n  protected readonly isOpen = signal<boolean>(false);\n\n  private overlayref?: OverlayRef;\n  private popoverRef?: ComponentRef<PopoverComponent>;\n  private overlay = inject(Overlay);\n  private elementRef = inject(ElementRef);\n  private destroyer = new Subject<void>();\n\n  ngOnDestroy(): void {\n    this.overlayref?.dispose();\n    this.destroyer.next();\n    this.destroyer.complete();\n  }\n\n  /**\n   * Displays popover and emits 'shown' event.\n   */\n  show(): void {\n    if (this.overlayref?.hasAttached()) {\n      return;\n    }\n\n    this.overlayref ??= this.createOverlay();\n\n    const popoverPortal = new ComponentPortal(PopoverComponent);\n    this.popoverRef = this.overlayref.attach(popoverPortal);\n\n    this.popoverRef.setInput('popoverDirective', this);\n\n    this.isOpen.set(true);\n    this.visibilityChange.emit(true);\n  }\n\n  /**\n   * Hides the popover and emits 'hidden' event.\n   */\n  hide(): void {\n    this.overlayref?.detach();\n  }\n\n  /**\n   * Updates the position of the popover based on the position strategy.\n   */\n  updatePosition(): void {\n    this.overlayref?.updatePosition();\n  }\n\n  protected onClick(): void {\n    if (this.overlayref?.hasAttached()) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  private createOverlay(): OverlayRef {\n    const overlayRef = getOverlay(\n      this.elementRef,\n      this.overlay,\n      false,\n      this.placementInternal(),\n      false,\n      true,\n      this.scrollStrategy()\n    );\n    overlayRef\n      .detachments()\n      .pipe(takeUntil(this.destroyer))\n      .subscribe(() => {\n        this.popoverRef = undefined;\n        if (this.isOpen()) {\n          this.isOpen.set(false);\n          this.visibilityChange.emit(false);\n        }\n      });\n    overlayRef\n      .outsidePointerEvents()\n      .pipe(takeUntil(this.destroyer))\n      .subscribe(({ target }) => {\n        if (target !== this.elementRef.nativeElement) {\n          this.hide();\n        }\n      });\n    getPositionStrategy(overlayRef)\n      ?.positionChanges.pipe(takeUntil(this.destroyer))\n      .subscribe(change => this.popoverRef?.instance.updateArrow(change, this.elementRef));\n    return overlayRef;\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Directive, inject } from '@angular/core';\n\nimport { PopoverComponent } from './si-popover.component';\n\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: 'si-popover-title',\n  host: {\n    '[id]': 'this.popover.labelledBy',\n    'class': 'popover-header'\n  }\n})\nexport class SiPopoverTitleDirective {\n  readonly popover = inject(PopoverComponent);\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Directive, inject } from '@angular/core';\n\nimport { PopoverComponent } from './si-popover.component';\n\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: 'si-popover-body',\n  host: {\n    '[id]': 'this.popover.describedBy',\n    'class': 'popover-body d-block'\n  }\n})\nexport class SiPopoverBodyDirective {\n  readonly popover = inject(PopoverComponent);\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-popover.directive';\nexport * from './si-popover-title.directive';\nexport * from './si-popover-body.directive';\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-popover.mjs","sources":["../../../../projects/element-ng/popover/si-popover.component.ts","../../../../projects/element-ng/popover/si-popover.component.html","../../../../projects/element-ng/popover/si-popover.directive.ts","../../../../projects/element-ng/popover/si-popover-title.directive.ts","../../../../projects/element-ng/popover/si-popover-body.directive.ts","../../../../projects/element-ng/popover/index.ts","../../../../projects/element-ng/popover/siemens-element-ng-popover.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { ConfigurableFocusTrap, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';\nimport { ConnectedOverlayPositionChange } from '@angular/cdk/overlay';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  Component,\n  ElementRef,\n  inject,\n  Injector,\n  input,\n  OnDestroy,\n  OnInit,\n  signal,\n  TemplateRef,\n  viewChild,\n  DOCUMENT,\n  computed,\n  ChangeDetectionStrategy\n} from '@angular/core';\nimport { calculateOverlayArrowPosition, OverlayArrowPosition } from '@siemens/element-ng/common';\nimport { SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\n\nimport { SiPopoverDirective } from './si-popover.directive';\n\n@Component({\n  selector: 'si-popover',\n  imports: [NgTemplateOutlet, SiIconComponent, SiTranslatePipe],\n  templateUrl: './si-popover.component.html',\n  changeDetection: ChangeDetectionStrategy.Eager,\n  host: {\n    '[id]': 'this.popoverDirective().popoverId'\n  }\n})\nexport class PopoverComponent implements OnInit, OnDestroy {\n  /** The directive that supplies and controls the popover content. */\n  readonly popoverDirective = input.required<SiPopoverDirective>();\n  readonly popoverWrapper = viewChild.required<ElementRef>('popoverWrapper');\n\n  /** @internal */\n  labelledBy: string | undefined;\n  /** @internal */\n  describedBy: string | undefined;\n  protected readonly positionClass = signal('');\n  protected readonly arrowPos = signal<OverlayArrowPosition | undefined>(undefined);\n  protected readonly description = computed(() => {\n    const description = this.popoverDirective().siPopover();\n    return !(description instanceof TemplateRef) ? description : undefined;\n  });\n  protected popoverTemplate: TemplateRef<any> | null = null;\n  protected injector = inject(Injector);\n\n  private elementRef = inject(ElementRef);\n  private focusTrapFactory = inject(ConfigurableFocusTrapFactory);\n  private focusTrap?: ConfigurableFocusTrap;\n  private readonly previouslyActiveElement = inject(DOCUMENT).activeElement;\n\n  ngOnInit(): void {\n    const popoverDirective = this.popoverDirective();\n    const popover = popoverDirective.siPopover();\n    if (popover instanceof TemplateRef) {\n      this.popoverTemplate = popover;\n    }\n    this.labelledBy = `__popover-title_${popoverDirective.popoverCounter}`;\n    this.describedBy = `__popover-body_${popoverDirective.popoverCounter}`;\n\n    this.applyFocus();\n  }\n\n  ngOnDestroy(): void {\n    this.focusTrap?.destroy();\n    if (\n      this.previouslyActiveElement &&\n      'focus' in this.previouslyActiveElement &&\n      typeof this.previouslyActiveElement.focus === 'function'\n    ) {\n      this.previouslyActiveElement.focus();\n    }\n  }\n\n  /** @internal */\n  updateArrow(change: ConnectedOverlayPositionChange, anchor?: ElementRef): void {\n    const positionClass = `popover-${change.connectionPair.overlayX}-${change.connectionPair.overlayY}`;\n    // need two updates as class changes affect the position\n    this.positionClass.set(positionClass);\n    const arrowPos = calculateOverlayArrowPosition(change, this.elementRef, anchor);\n    this.arrowPos.set(arrowPos);\n  }\n\n  hide(): void {\n    this.popoverDirective().hide();\n  }\n\n  private applyFocus(): void {\n    // Using setTimeout ensures that SR first read `expanded` before we move the focus.\n    setTimeout(async () => {\n      const popoverWrapperEl = this.popoverWrapper().nativeElement;\n      this.focusTrap = this.focusTrapFactory.create(this.popoverWrapper().nativeElement);\n      const moved = await this.focusTrap.focusFirstTabbableElementWhenReady();\n      if (!moved) {\n        popoverWrapperEl.tabIndex = 0;\n        popoverWrapperEl.focus();\n      }\n    });\n  }\n}\n","@let popover = popoverDirective();\n<div\n  #popoverWrapper\n  role=\"dialog\"\n  [class]=\"[\n    'popover',\n    'position-relative',\n    'focus-inside',\n    positionClass(),\n    popover.containerClass()\n  ]\"\n  [attr.aria-labelledby]=\"labelledBy\"\n  [attr.aria-describedby]=\"describedBy\"\n  (keydown.escape)=\"hide()\"\n>\n  <div\n    class=\"popover-arrow\"\n    [style.left.px]=\"arrowPos()?.left\"\n    [style.right.px]=\"arrowPos()?.right\"\n  ></div>\n  @if (popover.title()) {\n    <div class=\"popover-header\">\n      @let iconValue = popover.icon();\n      @if (iconValue) {\n        <si-icon class=\"icon me-1\" [icon]=\"iconValue\" />\n      }\n      <span class=\"si-h5\" [id]=\"labelledBy\">{{ popover.title() | translate }}</span>\n    </div>\n  }\n  @if (!popoverTemplate) {\n    <div class=\"popover-body\">\n      <div class=\"si-body\" [id]=\"describedBy\">{{ description() | translate }}</div>\n    </div>\n  } @else {\n    <!-- If title is already provided, we wrap the template with the `popover-body` class\n    since the template may not be in the popover body directive. Also used by SiHelpButtonComponent -->\n    @if (popover.title()) {\n      <div class=\"popover-body\">\n        <ng-template\n          [ngTemplateOutlet]=\"popoverTemplate\"\n          [ngTemplateOutletContext]=\"popover.context()\"\n          [ngTemplateOutletInjector]=\"injector\"\n        />\n      </div>\n    } @else {\n      <ng-template\n        [ngTemplateOutlet]=\"popoverTemplate\"\n        [ngTemplateOutletContext]=\"popover.context()\"\n        [ngTemplateOutletInjector]=\"injector\"\n      />\n    }\n  }\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport {\n  ComponentRef,\n  computed,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  OnDestroy,\n  output,\n  signal,\n  TemplateRef\n} from '@angular/core';\nimport {\n  defaultConnectedOverlayScrollStrategy,\n  isRTL,\n  positions\n} from '@siemens/element-ng/common';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate-types';\nimport { Subject, takeUntil } from 'rxjs';\n\nimport { PopoverComponent } from './si-popover.component';\n\n@Directive({\n  selector: '[siPopover]',\n  host: {\n    '[attr.aria-expanded]': 'isOpen()',\n    '[attr.aria-controls]': 'popoverId',\n    '(click)': 'onClick()'\n  },\n  exportAs: 'si-popover'\n})\nexport class SiPopoverDirective implements OnDestroy {\n  private static idCounter = 0;\n\n  /**\n   * The popover text to be displayed\n   */\n  readonly siPopover = input<TranslatableString | TemplateRef<unknown>>();\n\n  /**\n   * The placement of the popover. One of 'top', 'start', 'end', 'bottom'\n   *\n   * @defaultValue 'auto'\n   */\n  readonly placement = input<keyof typeof positions>('auto', { alias: 'siPopoverPlacement' });\n\n  readonly placementInternal = computed(() => {\n    if (\n      this.placement() !== 'top' &&\n      this.placement() !== 'bottom' &&\n      this.placement() !== 'start' &&\n      this.placement() !== 'end'\n    ) {\n      return 'auto';\n    } else {\n      return this.placement();\n    }\n  });\n\n  /**\n   * The title to be displayed on top for the popover\n   *\n   * @defaultValue undefined\n   */\n  readonly title = input<TranslatableString>(undefined, { alias: 'siPopoverTitle' });\n\n  /**\n   * The class that will be applied to container of the popover\n   *\n   * @defaultValue ''\n   */\n  readonly containerClass = input('', { alias: 'siPopoverContainerClass' });\n\n  /**\n   * The icon to be displayed besides popover title\n   *\n   * @defaultValue undefined\n   */\n  readonly icon = input<string>(undefined, { alias: 'siPopoverIcon' });\n\n  /**\n   * The context for the attached template\n   *\n   * @defaultValue undefined\n   */\n  readonly context = input<unknown>(undefined, { alias: 'siPopoverContext' });\n\n  /**\n   * CDK scroll strategy used for the popover overlay.\n   *\n   * @defaultValue defaultConnectedOverlayScrollStrategy()\n   */\n  readonly scrollStrategy = input(defaultConnectedOverlayScrollStrategy(), {\n    alias: 'siPopoverScrollStrategy'\n  });\n\n  /**\n   * Emits `true` when the popover is shown, `false` when the popover is hidden.\n   */\n  readonly visibilityChange = output<boolean>({ alias: 'siPopoverVisibilityChange' });\n\n  /** @internal */\n  readonly popoverCounter = SiPopoverDirective.idCounter++;\n  /** @internal */\n  readonly popoverId = `__popover_${this.popoverCounter}`;\n\n  /** @internal */\n  protected readonly isOpen = signal<boolean>(false);\n\n  private overlayref?: OverlayRef;\n  private popoverRef?: ComponentRef<PopoverComponent>;\n  private overlay = inject(Overlay);\n  private elementRef = inject(ElementRef);\n  private destroyer = new Subject<void>();\n\n  ngOnDestroy(): void {\n    this.overlayref?.dispose();\n    this.destroyer.next();\n    this.destroyer.complete();\n  }\n\n  /**\n   * Displays popover and emits 'shown' event.\n   */\n  show(): void {\n    if (this.overlayref?.hasAttached()) {\n      return;\n    }\n\n    this.overlayref ??= this.createOverlay();\n\n    const popoverPortal = new ComponentPortal(PopoverComponent);\n    this.popoverRef = this.overlayref.attach(popoverPortal);\n\n    this.popoverRef.setInput('popoverDirective', this);\n\n    this.isOpen.set(true);\n    this.visibilityChange.emit(true);\n  }\n\n  /**\n   * Hides the popover and emits 'hidden' event.\n   */\n  hide(): void {\n    this.overlayref?.detach();\n  }\n\n  /**\n   * Updates the position of the popover based on the position strategy.\n   */\n  updatePosition(): void {\n    this.overlayref?.updatePosition();\n  }\n\n  protected onClick(): void {\n    if (this.overlayref?.hasAttached()) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  private createOverlay(): OverlayRef {\n    const positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(this.elementRef)\n      .withPush(false)\n      .withGrowAfterOpen(true)\n      .withFlexibleDimensions(false)\n      .withPositions(positions[this.placementInternal()]);\n    const overlayRef = this.overlay.create({\n      positionStrategy,\n      scrollStrategy: this.scrollStrategy(),\n      direction: isRTL() ? 'rtl' : 'ltr'\n    });\n    overlayRef\n      .detachments()\n      .pipe(takeUntil(this.destroyer))\n      .subscribe(() => {\n        this.popoverRef = undefined;\n        if (this.isOpen()) {\n          this.isOpen.set(false);\n          this.visibilityChange.emit(false);\n        }\n      });\n    overlayRef\n      .outsidePointerEvents()\n      .pipe(takeUntil(this.destroyer))\n      .subscribe(({ target }) => {\n        if (target !== this.elementRef.nativeElement) {\n          this.hide();\n        }\n      });\n    positionStrategy.positionChanges\n      .pipe(takeUntil(this.destroyer))\n      .subscribe(change => this.popoverRef?.instance.updateArrow(change, this.elementRef));\n    return overlayRef;\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Directive, inject } from '@angular/core';\n\nimport { PopoverComponent } from './si-popover.component';\n\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: 'si-popover-title',\n  host: {\n    '[id]': 'this.popover.labelledBy',\n    'class': 'popover-header'\n  }\n})\nexport class SiPopoverTitleDirective {\n  readonly popover = inject(PopoverComponent);\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Directive, inject } from '@angular/core';\n\nimport { PopoverComponent } from './si-popover.component';\n\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: 'si-popover-body',\n  host: {\n    '[id]': 'this.popover.describedBy',\n    'class': 'popover-body d-block'\n  }\n})\nexport class SiPopoverBodyDirective {\n  readonly popover = inject(PopoverComponent);\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-popover.directive';\nexport * from './si-popover-title.directive';\nexport * from './si-popover-body.directive';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;AAAA;;;AAGG;MAkCU,gBAAgB,CAAA;;IAElB,gBAAgB,GAAG,KAAK,CAAC,QAAQ;yFAAsB;AACvD,IAAA,cAAc,GAAG,SAAS,CAAC,QAAQ,CAAa,gBAAgB;uFAAC;;AAG1E,IAAA,UAAU;;AAEV,IAAA,WAAW;IACQ,aAAa,GAAG,MAAM,CAAC,EAAE;sFAAC;IAC1B,QAAQ,GAAG,MAAM,CAAmC,SAAS;iFAAC;AAC9D,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;QAC7C,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,SAAS,EAAE;AACvD,QAAA,OAAO,EAAE,WAAW,YAAY,WAAW,CAAC,GAAG,WAAW,GAAG,SAAS;IACxE,CAAC;oFAAC;IACQ,eAAe,GAA4B,IAAI;AAC/C,IAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;AAE7B,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAC/B,IAAA,gBAAgB,GAAG,MAAM,CAAC,4BAA4B,CAAC;AACvD,IAAA,SAAS;AACA,IAAA,uBAAuB,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,aAAa;IAEzE,QAAQ,GAAA;AACN,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,EAAE;AAChD,QAAA,MAAM,OAAO,GAAG,gBAAgB,CAAC,SAAS,EAAE;AAC5C,QAAA,IAAI,OAAO,YAAY,WAAW,EAAE;AAClC,YAAA,IAAI,CAAC,eAAe,GAAG,OAAO;QAChC;QACA,IAAI,CAAC,UAAU,GAAG,CAAA,gBAAA,EAAmB,gBAAgB,CAAC,cAAc,EAAE;QACtE,IAAI,CAAC,WAAW,GAAG,CAAA,eAAA,EAAkB,gBAAgB,CAAC,cAAc,EAAE;QAEtE,IAAI,CAAC,UAAU,EAAE;IACnB;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE;QACzB,IACE,IAAI,CAAC,uBAAuB;YAC5B,OAAO,IAAI,IAAI,CAAC,uBAAuB;YACvC,OAAO,IAAI,CAAC,uBAAuB,CAAC,KAAK,KAAK,UAAU,EACxD;AACA,YAAA,IAAI,CAAC,uBAAuB,CAAC,KAAK,EAAE;QACtC;IACF;;IAGA,WAAW,CAAC,MAAsC,EAAE,MAAmB,EAAA;AACrE,QAAA,MAAM,aAAa,GAAG,CAAA,QAAA,EAAW,MAAM,CAAC,cAAc,CAAC,QAAQ,CAAA,CAAA,EAAI,MAAM,CAAC,cAAc,CAAC,QAAQ,EAAE;;AAEnG,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,aAAa,CAAC;AACrC,QAAA,MAAM,QAAQ,GAAG,6BAA6B,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC;AAC/E,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC;IAC7B;IAEA,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,gBAAgB,EAAE,CAAC,IAAI,EAAE;IAChC;IAEQ,UAAU,GAAA;;QAEhB,UAAU,CAAC,YAAW;YACpB,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,aAAa;AAC5D,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,aAAa,CAAC;YAClF,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,kCAAkC,EAAE;YACvE,IAAI,CAAC,KAAK,EAAE;AACV,gBAAA,gBAAgB,CAAC,QAAQ,GAAG,CAAC;gBAC7B,gBAAgB,CAAC,KAAK,EAAE;YAC1B;AACF,QAAA,CAAC,CAAC;IACJ;uGAtEW,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,ibCrC7B,ymDAqDA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDvBY,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,eAAe,iEAAE,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,KAAA,EAAA,CAAA;;2FAOjD,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAT5B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAAA,OAAA,EACb,CAAC,gBAAgB,EAAE,eAAe,EAAE,eAAe,CAAC,EAAA,eAAA,EAE5C,uBAAuB,CAAC,KAAK,EAAA,IAAA,EACxC;AACJ,wBAAA,MAAM,EAAE;AACT,qBAAA,EAAA,QAAA,EAAA,ymDAAA,EAAA;2LAKwD,gBAAgB,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AExC3E;;;AAGG;MAkCU,kBAAkB,CAAA;AACrB,IAAA,OAAO,SAAS,GAAG,CAAC;AAE5B;;AAEG;AACM,IAAA,SAAS,GAAG,KAAK;6FAA6C;AAEvE;;;;AAIG;IACM,SAAS,GAAG,KAAK,CAAyB,MAAM,iFAAI,KAAK,EAAE,oBAAoB,EAAA,CAAG;AAElF,IAAA,iBAAiB,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,IACE,IAAI,CAAC,SAAS,EAAE,KAAK,KAAK;AAC1B,YAAA,IAAI,CAAC,SAAS,EAAE,KAAK,QAAQ;AAC7B,YAAA,IAAI,CAAC,SAAS,EAAE,KAAK,OAAO;AAC5B,YAAA,IAAI,CAAC,SAAS,EAAE,KAAK,KAAK,EAC1B;AACA,YAAA,OAAO,MAAM;QACf;aAAO;AACL,YAAA,OAAO,IAAI,CAAC,SAAS,EAAE;QACzB;IACF,CAAC;0FAAC;AAEF;;;;AAIG;IACM,KAAK,GAAG,KAAK,CAAqB,SAAS,6EAAI,KAAK,EAAE,gBAAgB,EAAA,CAAG;AAElF;;;;AAIG;IACM,cAAc,GAAG,KAAK,CAAC,EAAE,sFAAI,KAAK,EAAE,yBAAyB,EAAA,CAAG;AAEzE;;;;AAIG;IACM,IAAI,GAAG,KAAK,CAAS,SAAS,4EAAI,KAAK,EAAE,eAAe,EAAA,CAAG;AAEpE;;;;AAIG;IACM,OAAO,GAAG,KAAK,CAAU,SAAS,+EAAI,KAAK,EAAE,kBAAkB,EAAA,CAAG;AAE3E;;;;AAIG;IACM,cAAc,GAAG,KAAK,CAAC,qCAAqC,EAAE,sFACrE,KAAK,EAAE,yBAAyB,EAAA,CAChC;AAEF;;AAEG;IACM,gBAAgB,GAAG,MAAM,CAAU,EAAE,KAAK,EAAE,2BAA2B,EAAE,CAAC;;AAG1E,IAAA,cAAc,GAAG,kBAAkB,CAAC,SAAS,EAAE;;AAE/C,IAAA,SAAS,GAAG,CAAA,UAAA,EAAa,IAAI,CAAC,cAAc,EAAE;;IAGpC,MAAM,GAAG,MAAM,CAAU,KAAK;+EAAC;AAE1C,IAAA,UAAU;AACV,IAAA,UAAU;AACV,IAAA,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;AACzB,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAC/B,IAAA,SAAS,GAAG,IAAI,OAAO,EAAQ;IAEvC,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE;AAC1B,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;AACrB,QAAA,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE;IAC3B;AAEA;;AAEG;IACH,IAAI,GAAA;AACF,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,WAAW,EAAE,EAAE;YAClC;QACF;AAEA,QAAA,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,aAAa,EAAE;AAExC,QAAA,MAAM,aAAa,GAAG,IAAI,eAAe,CAAC,gBAAgB,CAAC;QAC3D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,aAAa,CAAC;QAEvD,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,kBAAkB,EAAE,IAAI,CAAC;AAElD,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;AACrB,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC;IAClC;AAEA;;AAEG;IACH,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,UAAU,EAAE,MAAM,EAAE;IAC3B;AAEA;;AAEG;IACH,cAAc,GAAA;AACZ,QAAA,IAAI,CAAC,UAAU,EAAE,cAAc,EAAE;IACnC;IAEU,OAAO,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,WAAW,EAAE,EAAE;YAClC,IAAI,CAAC,IAAI,EAAE;QACb;aAAO;YACL,IAAI,CAAC,IAAI,EAAE;QACb;IACF;IAEQ,aAAa,GAAA;AACnB,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC;AAC3B,aAAA,QAAQ;AACR,aAAA,mBAAmB,CAAC,IAAI,CAAC,UAAU;aACnC,QAAQ,CAAC,KAAK;aACd,iBAAiB,CAAC,IAAI;aACtB,sBAAsB,CAAC,KAAK;aAC5B,aAAa,CAAC,SAAS,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;AACrD,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;YACrC,gBAAgB;AAChB,YAAA,cAAc,EAAE,IAAI,CAAC,cAAc,EAAE;YACrC,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,GAAG;AAC9B,SAAA,CAAC;QACF;AACG,aAAA,WAAW;AACX,aAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;aAC9B,SAAS,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,UAAU,GAAG,SAAS;AAC3B,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE;AACjB,gBAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;AACtB,gBAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC;YACnC;AACF,QAAA,CAAC,CAAC;QACJ;AACG,aAAA,oBAAoB;AACpB,aAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;AAC9B,aAAA,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,KAAI;YACxB,IAAI,MAAM,KAAK,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE;gBAC5C,IAAI,CAAC,IAAI,EAAE;YACb;AACF,QAAA,CAAC,CAAC;AACJ,QAAA,gBAAgB,CAAC;AACd,aAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;aAC9B,SAAS,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AACtF,QAAA,OAAO,UAAU;IACnB;uGAtKW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,yBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,yBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,gBAAA,EAAA,2BAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,UAAA,EAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAlB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAT9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;AACvB,oBAAA,IAAI,EAAE;AACJ,wBAAA,sBAAsB,EAAE,UAAU;AAClC,wBAAA,sBAAsB,EAAE,WAAW;AACnC,wBAAA,SAAS,EAAE;AACZ,qBAAA;AACD,oBAAA,QAAQ,EAAE;AACX,iBAAA;;;ACpCD;;;AAGG;MAaU,uBAAuB,CAAA;AACzB,IAAA,OAAO,GAAG,MAAM,CAAC,gBAAgB,CAAC;uGADhC,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,IAAA,EAAA,yBAAA,EAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAvB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBARnC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;;AAET,oBAAA,QAAQ,EAAE,kBAAkB;AAC5B,oBAAA,IAAI,EAAE;AACJ,wBAAA,MAAM,EAAE,yBAAyB;AACjC,wBAAA,OAAO,EAAE;AACV;AACF,iBAAA;;;ACfD;;;AAGG;MAaU,sBAAsB,CAAA;AACxB,IAAA,OAAO,GAAG,MAAM,CAAC,gBAAgB,CAAC;uGADhC,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,IAAA,EAAA,0BAAA,EAAA,EAAA,cAAA,EAAA,sBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAtB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBARlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;;AAET,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,IAAI,EAAE;AACJ,wBAAA,MAAM,EAAE,0BAA0B;AAClC,wBAAA,OAAO,EAAE;AACV;AACF,iBAAA;;;ACfD;;;AAGG;;ACHH;;AAEG;;"}

package/fesm2022/siemens-element-ng-tree-view.mjs

@@ -4,7 +4,7 @@ import { CdkMenuTrigger, CdkContextMenuTrigger } from '@angular/cdk/menu';
 import { NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { correctKeyRTL } from '@siemens/element-ng/common';
-import { SiIconComponent } from '@siemens/element-ng/icon';
+import { SiIconComponent, addIcons } from '@siemens/element-ng/icon';
 import { SiLoadingSpinnerComponent } from '@siemens/element-ng/loading-spinner';
 import { SiMenuFactoryComponent } from '@siemens/element-ng/menu';
 import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
@@ -13,6 +13,7 @@ import { takeUntil, take, withLatestFrom, map } from 'rxjs/operators';
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import * as i1 from '@angular/cdk/scrolling';
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
+import { elementCollapseAll, elementExpandAll } from '@siemens/element-icons';
 import { ResizeObserverService } from '@siemens/element-ng/resize-observer';
 
 /**
@@ -853,7 +854,7 @@ class SiTreeViewItemComponent {
             !this.treeViewComponent.flatTree());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTreeViewItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiTreeViewItemComponent, isStandalone: true, selector: "si-tree-view-item", host: { attributes: { "role": "treeitem" }, listeners: { "contextmenu": "onContextMenu($event)", "keydown": "onKeydown($event)" }, properties: { "attr.tabindex": "treeItemContext.record.currentIndex === treeViewComponent.activeIndex ? 0 : -1", "class.focus-none": "true", "class.si-tree-ellipsis": "treeViewComponent.horizontalScrolling()", "class.si-tree-view-top-level-item": "!treeViewComponent.compactMode() && (treeViewComponent.flatTree() || (treeItem.level ?? 0) < 1)", "attr.aria-haspopup": "isContextMenuButtonVisible()", "attr.aria-level": "this.ariaLevel", "attr.aria-setsize": "this.ariaSetsize", "attr.aria-posinset": "this.ariaPosinset", "attr.aria-selected": "this.ariaSelected", "attr.aria-checked": "this.ariaChecked", "attr.aria-expanded": "this.ariaExpanded" } }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: CdkMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "@if (!isGroupedItem) {\n  <div\n    #contextMenuTrigger=\"cdkContextMenuTriggerFor\"\n    class=\"si-tree-view-li si-tree-view-li-item focus-direct-sub-inside\"\n    [class.si-tree-view-item-context-menu-visible]=\"\n      !!(contextMenuTrigger.isOpen() || menuTrigger()?.isOpen())\n    \"\n    [class.si-tree-view-item-active]=\"treeItem.active\"\n    [class.si-tree-view-item-selected]=\"enableSelection() && treeItem.selected\"\n    [class.si-tree-view-item-not-selectable]=\"!treeItem.selectable\"\n    [style.padding-inline-start]=\"biggerPaddingStart\"\n    [cdkContextMenuTriggerFor]=\"contextMenu\"\n    [cdkContextMenuDisabled]=\"!isContextMenuButtonVisible() || !treeItem.selectable\"\n    (cdkContextMenuOpened)=\"onToggleContextMenuOpen()\"\n    (cdkContextMenuClosed)=\"onToggleContextMenuClose()\"\n  >\n    <div class=\"si-tree-view-item\" (mousedown)=\"onMouseDownTreeItem($event)\">\n      @if (showFolderStateStart && treeItem.state !== 'leaf') {\n        <ng-container\n          [ngTemplateOutlet]=\"toggleTemplate\"\n          [ngTemplateOutletContext]=\"{\n            biggerPaddingStart: negativeBiggerPaddingStart,\n            paddingStart: paddingStart,\n            toggleIcon: 'si-tree-view-item-dropdown-caret'\n          }\"\n        />\n      }\n      <ng-container [ngTemplateOutlet]=\"checkboxOrOption\" />\n\n      <div\n        class=\"si-tree-view-item-main d-flex flex-grow-1 align-self-stretch grab-area\"\n        (click)=\"onItemClicked($event)\"\n      >\n        @if (showIcon()) {\n          <div class=\"si-tree-stretch-center\">\n            <si-icon class=\"si-tree-view-item-icon\" [icon]=\"treeItem.icon!\" />\n          </div>\n        }\n        <div\n          class=\"si-tree-view-item-object-data d-flex flex-column justify-content-center overflow-hidden\"\n        >\n          @if (!templates().length) {\n            <ng-content select=\":not(si-tree-view-item):not([dragPreview])\"\n              ><div class=\"text-truncate\" [class.si-h5]=\"enableSelection() && treeItem.selected\">{{\n                treeItem.label | translate\n              }}</div></ng-content\n            >\n          } @else {\n            <div>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  renderMatchingTemplate(treeItem);\n                  context: { $implicit: treeItem }\n                \"\n              />\n            </div>\n          }\n          @if (enableDataField1() && treeItem.dataField1) {\n            <p class=\"si-tree-view-item-object-data-field-1 text-truncate\">{{\n              treeItem.dataField1 | translate\n            }}</p>\n          }\n          @if (enableDataField2() && treeItem.dataField2) {\n            <p class=\"si-tree-view-item-object-data-field-2 text-truncate\">{{\n              treeItem.dataField2 | translate\n            }}</p>\n          }\n        </div>\n        @if (treeItem.badge) {\n          <span class=\"badge flex-shrink-0\" [class]=\"`bg-${treeItem.badgeColor || 'default'}`\">{{\n            treeItem.badge\n          }}</span>\n        }\n      </div>\n      <div\n        class=\"si-tree-view-item-end-icons d-flex ms-2 align-items-center\"\n        [class.si-tree-view-item-end-icons-sticky]=\"stickyEndItems()\"\n      >\n        @if (showStateIndicator() && getStateIndicatorColor()) {\n          <div\n            class=\"si-tree-view-state-indicator\"\n            [style.background-color]=\"getStateIndicatorColor()\"\n            [class.si-tree-view-state-indicator-endmost]=\"\n              !enableContextMenuButton() && !showFolderStateEnd\n            \"\n          ></div>\n        }\n        @if (isContextMenuButtonVisible()) {\n          <div class=\"si-tree-stretch-center si-tree-context-menu-btn\">\n            <div\n              #menuTrigger=\"cdkMenuTriggerFor\"\n              tabindex=\"-1\"\n              aria-hidden=\"true\"\n              [cdkMenuTriggerFor]=\"contextMenu\"\n              (cdkMenuOpened)=\"onToggleContextMenuOpen()\"\n              (cdkMenuClosed)=\"onToggleContextMenuClose()\"\n            >\n              <i\n                aria-hidden=\"true\"\n                class=\"si-tree-view-item-icon si-tree-view-menu-btn\"\n                [class]=\"icons().itemMenu\"\n              ></i>\n            </div>\n          </div>\n        }\n        @if (showFolderStateEnd) {\n          <ng-container\n            [ngTemplateOutlet]=\"treeItem.state === 'leaf' ? spacerTemplate : toggleTemplate\"\n            [ngTemplateOutletContext]=\"{\n              toggleIcon: 'si-tree-view-item-icon',\n              positionEnd: true\n            }\"\n          />\n        }\n      </div>\n    </div>\n  </div>\n} @else {\n  <div class=\"si-tree-view-li focus-direct-sub-inside\">\n    <div class=\"si-tree-view-item-group\">\n      @if (showFolderStateStart) {\n        <ng-container\n          [ngTemplateOutlet]=\"toggleTemplate\"\n          [ngTemplateOutletContext]=\"{\n            toggleIcon: 'si-tree-view-item-icon'\n          }\"\n        />\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"checkboxOrOption\"\n        [ngTemplateOutletContext]=\"{ classNames: 'form-check mb-2' }\"\n      />\n\n      <p class=\"mb-0\">{{ treeItem.label | translate }}</p>\n      @if (showFolderStateEnd) {\n        <ng-container\n          [ngTemplateOutlet]=\"toggleTemplate\"\n          [ngTemplateOutletContext]=\"{\n            toggleIcon: 'si-tree-view-item-icon'\n          }\"\n        />\n      }\n    </div>\n  </div>\n}\n\n<ng-template #contextMenu>\n  <si-menu-factory class=\"me-5\" [items]=\"contextMenuItems()!\" [actionParam]=\"treeItem\" />\n</ng-template>\n\n<ng-template #checkboxOrOption let-classNames=\"classNames\">\n  @if (showCheckOrOptionBox) {\n    <a class=\"input-box\" tabindex=\"-1\" [class]=\"classNames\">\n      <input\n        class=\"form-check-input\"\n        tabindex=\"-1\"\n        [type]=\"getInputType()\"\n        [indeterminate]=\"this.treeItem.checked === 'indeterminate' ? true : null\"\n        [checked]=\"this.treeItem.checked === 'checked'\"\n        [disabled]=\"!treeItem.selectable\"\n        [attr.aria-label]=\"treeItem.label | translate\"\n        (click)=\"onBoxClicked()\"\n      />\n    </a>\n  }\n</ng-template>\n\n<ng-template\n  #toggleTemplate\n  let-biggerPaddingStart=\"biggerPaddingStart\"\n  let-paddingStart=\"paddingStart\"\n  let-toggleIcon=\"toggleIcon\"\n  let-positionEnd=\"positionEnd\"\n>\n  @let folderStateClass = getItemFolderStateClass();\n  <a\n    class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n    tabindex=\"-1\"\n    [class.si-tree-view-item-toggle-end]=\"positionEnd\"\n    [class.disabled]=\"!folderStateClass\"\n    [style.margin-inline-start]=\"biggerPaddingStart\"\n    [style.padding-inline-start]=\"paddingStart\"\n    (click)=\"onItemFolderClicked()\"\n  >\n    @if (isExpanding) {\n      <si-loading-spinner />\n    } @else {\n      <i aria-hidden=\"true\" [class]=\"`${toggleIcon} ${folderStateClass}`\"></i>\n    }\n  </a>\n</ng-template>\n\n<ng-template #spacerTemplate let-positionEnd=\"positionEnd\">\n  <div\n    class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n    [class.si-tree-view-item-toggle-end]=\"positionEnd\"\n  >\n    <i aria-hidden=\"true\" class=\"si-tree-view-item-icon si-tree-view-item-icon-spacer\"></i>\n  </div>\n</ng-template>\n", styles: [":host{--si-tree-view-background: var(--si-sys-color-background-1);--si-tree-view-border-color: var(--si-sys-color-border-4);--si-tree-view-icon-size: var(--si-sys-sizing-icon-md);--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--si-sys-color-background-hover);--si-tree-view-item-select-color: var(--si-sys-color-background-active);--si-tree-view-item-line-height: var(--si-sys-typography-line-height-body);--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--si-sys-color-text-secondary)}:host-context(.tree-sm){--si-tree-view-item-min-height: 32px;--si-tree-view-padding-base-vertical: 0px}:host-context(.tree-xs){--si-tree-view-item-min-height: 24px;--si-tree-view-padding-base-vertical: 0px}:host-context(.cdk-drop-list[cdkDropListHasAnchor]) :host.cdk-drag-placeholder{block-size:auto!important;margin-inline:0;margin-block:revert!important;min-block-size:revert;position:static;z-index:auto}:host-context(.cdk-drop-list[cdkDropListHasAnchor]) :host.cdk-drag-placeholder:after{content:none!important}:host-context(.cdk-drop-list[cdkDropListHasAnchor]) :host.cdk-drag-placeholder>*{display:revert}:host{display:block}:host.cdk-drag-placeholder{block-size:0;margin-inline:8px;margin-block:0!important;opacity:1!important;min-block-size:0!important;position:relative;z-index:999}:host.cdk-drag-placeholder:after{position:absolute;inline-size:100%;block-size:2px;content:\"\";background-color:var(--si-sys-color-effects-focus)!important}:host.cdk-drag-placeholder>*{display:none}:host.cdk-drag:not(.cdk-drag-placeholder){transform:none!important}:host.cdk-drop-list-dragging *:hover,:host.cdk-drop-list-dragging .si-tree-view-item-end-icons,:host.cdk-drop-list-dragging .si-tree-view-item-context-menu-visible,:host .cdk-drop-list-dragging *:hover,:host .cdk-drop-list-dragging .si-tree-view-item-end-icons,:host .cdk-drop-list-dragging .si-tree-view-item-context-menu-visible{background-color:transparent!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item{padding-inline-start:8px!important;padding-inline-end:12px!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item .si-tree-view-item-toggle{padding-inline-start:12px!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item .badge{margin-inline-end:0}:host.cdk-drag-preview .si-tree-view-item-end-icons,:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item{background-color:var(--si-sys-color-background-3)!important}.si-tree-view-li.si-tree-view-li-item{position:relative}.si-tree-view-li.si-tree-view-li-item:hover,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-context-menu-visible,.si-tree-view-li.si-tree-view-li-item:hover .si-tree-view-item-end-icons,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-context-menu-visible .si-tree-view-item-end-icons{background-color:var(--si-tree-view-item-hover-color)}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected .si-tree-view-item-end-icons{background-color:var(--si-tree-view-item-select-color)}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable:hover,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-end-icons{background-color:unset}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item:hover{cursor:default;background-color:unset}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-dropdown-caret{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-context-menu-btn>div[role=button]{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-toggle-end{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-toggle-end .si-tree-view-item-icon{color:var(--si-sys-color-text-primary)}.si-tree-view-li.si-tree-view-li-item .si-tree-view-item-end-icons{background-color:var(--si-tree-view-background)}.si-tree-view-item-group,.si-tree-view-item{display:flex;align-items:center}.si-tree-stretch-center{align-self:stretch;display:flex;align-items:center;justify-content:center;margin:0;text-decoration:none}.si-tree-view-item-toggle.disabled .si-tree-view-item-icon{inline-size:var(--si-sys-sizing-spacing-x-80)}.si-tree-stretch-center+.si-tree-view-item-toggle-end .si-tree-view-item-icon{margin-inline-start:calc(var(--si-sys-sizing-spacing-x-20) * -1)}.si-tree-view-item-icon{padding-inline-end:var(--si-sys-sizing-spacing-x-20)}.si-tree-view-item-icon.si-tree-view-item-icon-spacer{box-sizing:content-box;inline-size:var(--si-tree-view-icon-size)}.si-tree-view-item-object-data,.si-tree-view-item-icon{margin-block:0;margin-inline:calc(var(--si-tree-view-padding-base-horizontal) / 4)}.si-tree-view-item{justify-content:space-between;min-block-size:var(--si-tree-view-item-min-height);padding-inline:var(--si-tree-view-padding-base-horizontal) calc(var(--si-tree-view-padding-base-horizontal) / 4)}.si-tree-view-item:hover{cursor:pointer}:host-context(.si-tree-view-flat) .si-tree-view-item{padding-inline-start:calc(var(--si-tree-view-padding-base-horizontal) / 2)}.si-tree-view-state-indicator{margin-block:0;margin-inline:calc(var(--si-tree-view-padding-base-horizontal) * .75);min-inline-size:.375rem;block-size:.375rem;border-radius:50%}.si-tree-view-state-indicator.si-tree-view-state-indicator-endmost{margin-inline-end:calc(var(--si-tree-view-padding-base-horizontal) * 1.75)}.si-tree-view-item-group{padding-block:calc(2 * var(--si-tree-view-padding-base-vertical));padding-inline:calc(var(--si-tree-view-padding-base-horizontal) / 2);cursor:default}.si-tree-view-item-group .si-tree-view-item-dropdown-caret:hover,.si-tree-view-item-group .si-tree-view-item-icon:hover{cursor:pointer}.si-tree-view-item-dropdown-caret,.si-tree-view-item-dropdown-caret:hover,.si-tree-view-item-icon,.si-tree-view-item-icon:hover{color:var(--si-sys-color-text-primary);text-decoration:none;font-size:var(--si-tree-view-icon-size)}.si-tree-view-item-main{overflow-x:hidden}.si-tree-view-item-main>.badge{margin-block:auto}.si-tree-view-item-object-data>.si-tree-view-item-object-data-field-1{color:var(--si-tree-view-item-object-data-field-1-color)}:host.si-tree-ellipsis .si-tree-view-item-object-data{overflow-x:hidden}.si-tree-view-item-object-data>*{white-space:nowrap;margin-block:0;line-height:var(--si-tree-view-item-line-height)}:host.si-tree-ellipsis .si-tree-view-item-object-data>*{overflow:hidden;text-overflow:ellipsis}.si-tree-view-menu-btn{pointer-events:none}.si-tree-view-item-end-icons{block-size:calc(var(--si-tree-view-item-min-height) - 2 * (var(--element-button-focus-width) + var(--element-button-focus-overlay-width)))}.si-tree-view-item-end-icons.si-tree-view-item-end-icons-sticky{position:sticky;inset-inline-end:0}.input-box{margin-inline:var(--si-sys-sizing-spacing-x-10) var(--si-sys-sizing-spacing-x-50)}.form-check-input{display:block}si-loading-spinner{--loading-spinner-size: var(--si-tree-view-icon-size)}\n"], dependencies: [{ kind: "directive", type: CdkContextMenuTrigger, selector: "[cdkContextMenuTriggerFor]", inputs: ["cdkContextMenuTriggerFor", "cdkContextMenuPosition", "cdkContextMenuTriggerData", "cdkContextMenuTriggerTransformOriginOn", "cdkContextMenuDisabled"], outputs: ["cdkContextMenuOpened", "cdkContextMenuClosed"], exportAs: ["cdkContextMenuTriggerFor"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiLoadingSpinnerComponent, selector: "si-loading-spinner", inputs: ["isBlockingSpinner", "isSpinnerOverlay", "ariaLabel"] }, { kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiTreeViewItemComponent, isStandalone: true, selector: "si-tree-view-item", host: { attributes: { "role": "treeitem" }, listeners: { "contextmenu": "onContextMenu($event)", "keydown": "onKeydown($event)" }, properties: { "attr.tabindex": "treeItemContext.record.currentIndex === treeViewComponent.activeIndex ? 0 : -1", "class.focus-none": "true", "class.si-tree-ellipsis": "treeViewComponent.horizontalScrolling()", "class.si-tree-view-top-level-item": "!treeViewComponent.compactMode() && (treeViewComponent.flatTree() || (treeItem.level ?? 0) < 1)", "attr.aria-haspopup": "isContextMenuButtonVisible()", "attr.aria-level": "this.ariaLevel", "attr.aria-setsize": "this.ariaSetsize", "attr.aria-posinset": "this.ariaPosinset", "attr.aria-selected": "this.ariaSelected", "attr.aria-checked": "this.ariaChecked", "attr.aria-expanded": "this.ariaExpanded" }, classAttribute: "drop-line-placeholder" }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: CdkMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "@if (!isGroupedItem) {\n  <div\n    #contextMenuTrigger=\"cdkContextMenuTriggerFor\"\n    class=\"si-tree-view-li si-tree-view-li-item focus-direct-sub-inside\"\n    [class.si-tree-view-item-context-menu-visible]=\"\n      !!(contextMenuTrigger.isOpen() || menuTrigger()?.isOpen())\n    \"\n    [class.si-tree-view-item-active]=\"treeItem.active\"\n    [class.si-tree-view-item-selected]=\"enableSelection() && treeItem.selected\"\n    [class.si-tree-view-item-not-selectable]=\"!treeItem.selectable\"\n    [style.padding-inline-start]=\"biggerPaddingStart\"\n    [cdkContextMenuTriggerFor]=\"contextMenu\"\n    [cdkContextMenuDisabled]=\"!isContextMenuButtonVisible() || !treeItem.selectable\"\n    (cdkContextMenuOpened)=\"onToggleContextMenuOpen()\"\n    (cdkContextMenuClosed)=\"onToggleContextMenuClose()\"\n  >\n    <div class=\"si-tree-view-item\" (mousedown)=\"onMouseDownTreeItem($event)\">\n      @if (showFolderStateStart && treeItem.state !== 'leaf') {\n        <ng-container\n          [ngTemplateOutlet]=\"toggleTemplate\"\n          [ngTemplateOutletContext]=\"{\n            biggerPaddingStart: negativeBiggerPaddingStart,\n            paddingStart: paddingStart,\n            toggleIcon: 'si-tree-view-item-dropdown-caret'\n          }\"\n        />\n      }\n      <ng-container [ngTemplateOutlet]=\"checkboxOrOption\" />\n\n      <div\n        class=\"si-tree-view-item-main d-flex flex-grow-1 align-self-stretch grab-area\"\n        (click)=\"onItemClicked($event)\"\n      >\n        @if (showIcon()) {\n          <div class=\"si-tree-stretch-center\">\n            <si-icon class=\"si-tree-view-item-icon\" [icon]=\"treeItem.icon!\" />\n          </div>\n        }\n        <div\n          class=\"si-tree-view-item-object-data d-flex flex-column justify-content-center overflow-hidden\"\n        >\n          @if (!templates().length) {\n            <ng-content select=\":not(si-tree-view-item):not([dragPreview])\"\n              ><div class=\"text-truncate\" [class.si-h5]=\"enableSelection() && treeItem.selected\">{{\n                treeItem.label | translate\n              }}</div></ng-content\n            >\n          } @else {\n            <div>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  renderMatchingTemplate(treeItem);\n                  context: { $implicit: treeItem }\n                \"\n              />\n            </div>\n          }\n          @if (enableDataField1() && treeItem.dataField1) {\n            <p class=\"si-tree-view-item-object-data-field-1 text-truncate\">{{\n              treeItem.dataField1 | translate\n            }}</p>\n          }\n          @if (enableDataField2() && treeItem.dataField2) {\n            <p class=\"si-tree-view-item-object-data-field-2 text-truncate\">{{\n              treeItem.dataField2 | translate\n            }}</p>\n          }\n        </div>\n        @if (treeItem.badge) {\n          <span class=\"badge flex-shrink-0\" [class]=\"`bg-${treeItem.badgeColor || 'default'}`\">{{\n            treeItem.badge\n          }}</span>\n        }\n      </div>\n      <div\n        class=\"si-tree-view-item-end-icons d-flex ms-2 align-items-center\"\n        [class.si-tree-view-item-end-icons-sticky]=\"stickyEndItems()\"\n      >\n        @if (showStateIndicator() && getStateIndicatorColor()) {\n          <div\n            class=\"si-tree-view-state-indicator\"\n            [style.background-color]=\"getStateIndicatorColor()\"\n            [class.si-tree-view-state-indicator-endmost]=\"\n              !enableContextMenuButton() && !showFolderStateEnd\n            \"\n          ></div>\n        }\n        @if (isContextMenuButtonVisible()) {\n          <div class=\"si-tree-stretch-center si-tree-context-menu-btn\">\n            <div\n              #menuTrigger=\"cdkMenuTriggerFor\"\n              tabindex=\"-1\"\n              aria-hidden=\"true\"\n              [cdkMenuTriggerFor]=\"contextMenu\"\n              (cdkMenuOpened)=\"onToggleContextMenuOpen()\"\n              (cdkMenuClosed)=\"onToggleContextMenuClose()\"\n            >\n              <i\n                aria-hidden=\"true\"\n                class=\"si-tree-view-item-icon si-tree-view-menu-btn\"\n                [class]=\"icons().itemMenu\"\n              ></i>\n            </div>\n          </div>\n        }\n        @if (showFolderStateEnd) {\n          <ng-container\n            [ngTemplateOutlet]=\"treeItem.state === 'leaf' ? spacerTemplate : toggleTemplate\"\n            [ngTemplateOutletContext]=\"{\n              toggleIcon: 'si-tree-view-item-icon',\n              positionEnd: true\n            }\"\n          />\n        }\n      </div>\n    </div>\n  </div>\n} @else {\n  <div class=\"si-tree-view-li focus-direct-sub-inside\">\n    <div class=\"si-tree-view-item-group\">\n      @if (showFolderStateStart) {\n        <ng-container\n          [ngTemplateOutlet]=\"toggleTemplate\"\n          [ngTemplateOutletContext]=\"{\n            toggleIcon: 'si-tree-view-item-icon'\n          }\"\n        />\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"checkboxOrOption\"\n        [ngTemplateOutletContext]=\"{ classNames: 'form-check mb-2' }\"\n      />\n\n      <p class=\"mb-0\">{{ treeItem.label | translate }}</p>\n      @if (showFolderStateEnd) {\n        <ng-container\n          [ngTemplateOutlet]=\"toggleTemplate\"\n          [ngTemplateOutletContext]=\"{\n            toggleIcon: 'si-tree-view-item-icon'\n          }\"\n        />\n      }\n    </div>\n  </div>\n}\n\n<ng-template #contextMenu>\n  <si-menu-factory class=\"me-5\" [items]=\"contextMenuItems()!\" [actionParam]=\"treeItem\" />\n</ng-template>\n\n<ng-template #checkboxOrOption let-classNames=\"classNames\">\n  @if (showCheckOrOptionBox) {\n    <a class=\"input-box\" tabindex=\"-1\" [class]=\"classNames\">\n      <input\n        class=\"form-check-input\"\n        tabindex=\"-1\"\n        [type]=\"getInputType()\"\n        [indeterminate]=\"this.treeItem.checked === 'indeterminate' ? true : null\"\n        [checked]=\"this.treeItem.checked === 'checked'\"\n        [disabled]=\"!treeItem.selectable\"\n        [attr.aria-label]=\"treeItem.label | translate\"\n        (click)=\"onBoxClicked()\"\n      />\n    </a>\n  }\n</ng-template>\n\n<ng-template\n  #toggleTemplate\n  let-biggerPaddingStart=\"biggerPaddingStart\"\n  let-paddingStart=\"paddingStart\"\n  let-toggleIcon=\"toggleIcon\"\n  let-positionEnd=\"positionEnd\"\n>\n  @let folderStateClass = getItemFolderStateClass();\n  <a\n    class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n    tabindex=\"-1\"\n    [class.si-tree-view-item-toggle-end]=\"positionEnd\"\n    [class.disabled]=\"!folderStateClass\"\n    [style.margin-inline-start]=\"biggerPaddingStart\"\n    [style.padding-inline-start]=\"paddingStart\"\n    (click)=\"onItemFolderClicked()\"\n  >\n    @if (isExpanding) {\n      <si-loading-spinner />\n    } @else {\n      <i aria-hidden=\"true\" [class]=\"`${toggleIcon} ${folderStateClass}`\"></i>\n    }\n  </a>\n</ng-template>\n\n<ng-template #spacerTemplate let-positionEnd=\"positionEnd\">\n  <div\n    class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n    [class.si-tree-view-item-toggle-end]=\"positionEnd\"\n  >\n    <i aria-hidden=\"true\" class=\"si-tree-view-item-icon si-tree-view-item-icon-spacer\"></i>\n  </div>\n</ng-template>\n", styles: [":host{--si-tree-view-background: var(--si-sys-color-background-1);--si-tree-view-border-color: var(--si-sys-color-border-4);--si-tree-view-icon-size: var(--si-sys-sizing-icon-md);--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--si-sys-color-background-hover);--si-tree-view-item-select-color: var(--si-sys-color-background-active);--si-tree-view-item-line-height: var(--si-sys-typography-line-height-body);--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--si-sys-color-text-secondary)}:host-context(.tree-sm){--si-tree-view-item-min-height: 32px;--si-tree-view-padding-base-vertical: 0px}:host-context(.tree-xs){--si-tree-view-item-min-height: 24px;--si-tree-view-padding-base-vertical: 0px}:host{display:block}:host.cdk-drag:not(.cdk-drag-placeholder){transform:none!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item{padding-inline-start:8px!important;padding-inline-end:12px!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item .si-tree-view-item-toggle{padding-inline-start:12px!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item .badge{margin-inline-end:0}:host.cdk-drag-preview .si-tree-view-item-end-icons,:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item{background-color:var(--si-sys-color-background-3)!important}:host-context(.cdk-drop-list-dragging) *:hover,:host-context(.cdk-drop-list-dragging) .si-tree-view-item-end-icons,:host-context(.cdk-drop-list-dragging) .si-tree-view-item-context-menu-visible,:host .cdk-drop-list-dragging *:hover,:host .cdk-drop-list-dragging .si-tree-view-item-end-icons,:host .cdk-drop-list-dragging .si-tree-view-item-context-menu-visible{background-color:transparent!important}.si-tree-view-li.si-tree-view-li-item{position:relative}.si-tree-view-li.si-tree-view-li-item:hover,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-context-menu-visible,.si-tree-view-li.si-tree-view-li-item:hover .si-tree-view-item-end-icons,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-context-menu-visible .si-tree-view-item-end-icons{background-color:var(--si-tree-view-item-hover-color)}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected .si-tree-view-item-end-icons{background-color:var(--si-tree-view-item-select-color)}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable:hover,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-end-icons{background-color:unset}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item:hover{cursor:default;background-color:unset}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-dropdown-caret{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-context-menu-btn>div[role=button]{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-toggle-end{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-toggle-end .si-tree-view-item-icon{color:var(--si-sys-color-text-primary)}.si-tree-view-li.si-tree-view-li-item .si-tree-view-item-end-icons{background-color:var(--si-tree-view-background)}.si-tree-view-item-group,.si-tree-view-item{display:flex;align-items:center}.si-tree-stretch-center{align-self:stretch;display:flex;align-items:center;justify-content:center;margin:0;text-decoration:none}.si-tree-view-item-toggle.disabled .si-tree-view-item-icon{inline-size:var(--si-sys-sizing-spacing-x-80)}.si-tree-stretch-center+.si-tree-view-item-toggle-end .si-tree-view-item-icon{margin-inline-start:calc(var(--si-sys-sizing-spacing-x-20) * -1)}.si-tree-view-item-icon{padding-inline-end:var(--si-sys-sizing-spacing-x-20)}.si-tree-view-item-icon.si-tree-view-item-icon-spacer{box-sizing:content-box;inline-size:var(--si-tree-view-icon-size)}.si-tree-view-item-object-data,.si-tree-view-item-icon{margin-block:0;margin-inline:calc(var(--si-tree-view-padding-base-horizontal) / 4)}.si-tree-view-item{justify-content:space-between;min-block-size:var(--si-tree-view-item-min-height);padding-inline:var(--si-tree-view-padding-base-horizontal) calc(var(--si-tree-view-padding-base-horizontal) / 4)}.si-tree-view-item:hover{cursor:pointer}:host-context(.si-tree-view-flat) .si-tree-view-item{padding-inline-start:calc(var(--si-tree-view-padding-base-horizontal) / 2)}.si-tree-view-state-indicator{margin-block:0;margin-inline:calc(var(--si-tree-view-padding-base-horizontal) * .75);min-inline-size:.375rem;block-size:.375rem;border-radius:50%}.si-tree-view-state-indicator.si-tree-view-state-indicator-endmost{margin-inline-end:calc(var(--si-tree-view-padding-base-horizontal) * 1.75)}.si-tree-view-item-group{padding-block:calc(2 * var(--si-tree-view-padding-base-vertical));padding-inline:calc(var(--si-tree-view-padding-base-horizontal) / 2);cursor:default}.si-tree-view-item-group .si-tree-view-item-dropdown-caret:hover,.si-tree-view-item-group .si-tree-view-item-icon:hover{cursor:pointer}.si-tree-view-item-dropdown-caret,.si-tree-view-item-dropdown-caret:hover,.si-tree-view-item-icon,.si-tree-view-item-icon:hover{color:var(--si-sys-color-text-primary);text-decoration:none;font-size:var(--si-tree-view-icon-size)}.si-tree-view-item-main{overflow-x:hidden}.si-tree-view-item-main>.badge{margin-block:auto}.si-tree-view-item-object-data>.si-tree-view-item-object-data-field-1{color:var(--si-tree-view-item-object-data-field-1-color)}:host.si-tree-ellipsis .si-tree-view-item-object-data{overflow-x:hidden}.si-tree-view-item-object-data>*{white-space:nowrap;margin-block:0;line-height:var(--si-tree-view-item-line-height)}:host.si-tree-ellipsis .si-tree-view-item-object-data>*{overflow:hidden;text-overflow:ellipsis}.si-tree-view-menu-btn{pointer-events:none}.si-tree-view-item-end-icons{block-size:calc(var(--si-tree-view-item-min-height) - 2 * (var(--element-button-focus-width) + var(--element-button-focus-overlay-width)))}.si-tree-view-item-end-icons.si-tree-view-item-end-icons-sticky{position:sticky;inset-inline-end:0}.input-box{margin-inline:var(--si-sys-sizing-spacing-x-10) var(--si-sys-sizing-spacing-x-50)}.form-check-input{display:block}si-loading-spinner{--loading-spinner-size: var(--si-tree-view-icon-size)}\n"], dependencies: [{ kind: "directive", type: CdkContextMenuTrigger, selector: "[cdkContextMenuTriggerFor]", inputs: ["cdkContextMenuTriggerFor", "cdkContextMenuPosition", "cdkContextMenuTriggerData", "cdkContextMenuTriggerTransformOriginOn", "cdkContextMenuDisabled"], outputs: ["cdkContextMenuOpened", "cdkContextMenuClosed"], exportAs: ["cdkContextMenuTriggerFor"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiLoadingSpinnerComponent, selector: "si-loading-spinner", inputs: ["isBlockingSpinner", "isSpinnerOverlay", "ariaLabel"] }, { kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTreeViewItemComponent, decorators: [{
             type: Component,
@@ -866,6 +867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         SiMenuFactoryComponent,
                         SiTranslatePipe
                     ], changeDetection: ChangeDetectionStrategy.Eager, host: {
+                        class: 'drop-line-placeholder',
                         role: 'treeitem',
                         '[attr.tabindex]': 'treeItemContext.record.currentIndex === treeViewComponent.activeIndex ? 0 : -1',
                         '[class.focus-none]': 'true',
@@ -874,7 +876,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         '[attr.aria-haspopup]': 'isContextMenuButtonVisible()',
                         '(contextmenu)': 'onContextMenu($event)',
                         '(keydown)': 'onKeydown($event)'
-                    }, template: "@if (!isGroupedItem) {\n  <div\n    #contextMenuTrigger=\"cdkContextMenuTriggerFor\"\n    class=\"si-tree-view-li si-tree-view-li-item focus-direct-sub-inside\"\n    [class.si-tree-view-item-context-menu-visible]=\"\n      !!(contextMenuTrigger.isOpen() || menuTrigger()?.isOpen())\n    \"\n    [class.si-tree-view-item-active]=\"treeItem.active\"\n    [class.si-tree-view-item-selected]=\"enableSelection() && treeItem.selected\"\n    [class.si-tree-view-item-not-selectable]=\"!treeItem.selectable\"\n    [style.padding-inline-start]=\"biggerPaddingStart\"\n    [cdkContextMenuTriggerFor]=\"contextMenu\"\n    [cdkContextMenuDisabled]=\"!isContextMenuButtonVisible() || !treeItem.selectable\"\n    (cdkContextMenuOpened)=\"onToggleContextMenuOpen()\"\n    (cdkContextMenuClosed)=\"onToggleContextMenuClose()\"\n  >\n    <div class=\"si-tree-view-item\" (mousedown)=\"onMouseDownTreeItem($event)\">\n      @if (showFolderStateStart && treeItem.state !== 'leaf') {\n        <ng-container\n          [ngTemplateOutlet]=\"toggleTemplate\"\n          [ngTemplateOutletContext]=\"{\n            biggerPaddingStart: negativeBiggerPaddingStart,\n            paddingStart: paddingStart,\n            toggleIcon: 'si-tree-view-item-dropdown-caret'\n          }\"\n        />\n      }\n      <ng-container [ngTemplateOutlet]=\"checkboxOrOption\" />\n\n      <div\n        class=\"si-tree-view-item-main d-flex flex-grow-1 align-self-stretch grab-area\"\n        (click)=\"onItemClicked($event)\"\n      >\n        @if (showIcon()) {\n          <div class=\"si-tree-stretch-center\">\n            <si-icon class=\"si-tree-view-item-icon\" [icon]=\"treeItem.icon!\" />\n          </div>\n        }\n        <div\n          class=\"si-tree-view-item-object-data d-flex flex-column justify-content-center overflow-hidden\"\n        >\n          @if (!templates().length) {\n            <ng-content select=\":not(si-tree-view-item):not([dragPreview])\"\n              ><div class=\"text-truncate\" [class.si-h5]=\"enableSelection() && treeItem.selected\">{{\n                treeItem.label | translate\n              }}</div></ng-content\n            >\n          } @else {\n            <div>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  renderMatchingTemplate(treeItem);\n                  context: { $implicit: treeItem }\n                \"\n              />\n            </div>\n          }\n          @if (enableDataField1() && treeItem.dataField1) {\n            <p class=\"si-tree-view-item-object-data-field-1 text-truncate\">{{\n              treeItem.dataField1 | translate\n            }}</p>\n          }\n          @if (enableDataField2() && treeItem.dataField2) {\n            <p class=\"si-tree-view-item-object-data-field-2 text-truncate\">{{\n              treeItem.dataField2 | translate\n            }}</p>\n          }\n        </div>\n        @if (treeItem.badge) {\n          <span class=\"badge flex-shrink-0\" [class]=\"`bg-${treeItem.badgeColor || 'default'}`\">{{\n            treeItem.badge\n          }}</span>\n        }\n      </div>\n      <div\n        class=\"si-tree-view-item-end-icons d-flex ms-2 align-items-center\"\n        [class.si-tree-view-item-end-icons-sticky]=\"stickyEndItems()\"\n      >\n        @if (showStateIndicator() && getStateIndicatorColor()) {\n          <div\n            class=\"si-tree-view-state-indicator\"\n            [style.background-color]=\"getStateIndicatorColor()\"\n            [class.si-tree-view-state-indicator-endmost]=\"\n              !enableContextMenuButton() && !showFolderStateEnd\n            \"\n          ></div>\n        }\n        @if (isContextMenuButtonVisible()) {\n          <div class=\"si-tree-stretch-center si-tree-context-menu-btn\">\n            <div\n              #menuTrigger=\"cdkMenuTriggerFor\"\n              tabindex=\"-1\"\n              aria-hidden=\"true\"\n              [cdkMenuTriggerFor]=\"contextMenu\"\n              (cdkMenuOpened)=\"onToggleContextMenuOpen()\"\n              (cdkMenuClosed)=\"onToggleContextMenuClose()\"\n            >\n              <i\n                aria-hidden=\"true\"\n                class=\"si-tree-view-item-icon si-tree-view-menu-btn\"\n                [class]=\"icons().itemMenu\"\n              ></i>\n            </div>\n          </div>\n        }\n        @if (showFolderStateEnd) {\n          <ng-container\n            [ngTemplateOutlet]=\"treeItem.state === 'leaf' ? spacerTemplate : toggleTemplate\"\n            [ngTemplateOutletContext]=\"{\n              toggleIcon: 'si-tree-view-item-icon',\n              positionEnd: true\n            }\"\n          />\n        }\n      </div>\n    </div>\n  </div>\n} @else {\n  <div class=\"si-tree-view-li focus-direct-sub-inside\">\n    <div class=\"si-tree-view-item-group\">\n      @if (showFolderStateStart) {\n        <ng-container\n          [ngTemplateOutlet]=\"toggleTemplate\"\n          [ngTemplateOutletContext]=\"{\n            toggleIcon: 'si-tree-view-item-icon'\n          }\"\n        />\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"checkboxOrOption\"\n        [ngTemplateOutletContext]=\"{ classNames: 'form-check mb-2' }\"\n      />\n\n      <p class=\"mb-0\">{{ treeItem.label | translate }}</p>\n      @if (showFolderStateEnd) {\n        <ng-container\n          [ngTemplateOutlet]=\"toggleTemplate\"\n          [ngTemplateOutletContext]=\"{\n            toggleIcon: 'si-tree-view-item-icon'\n          }\"\n        />\n      }\n    </div>\n  </div>\n}\n\n<ng-template #contextMenu>\n  <si-menu-factory class=\"me-5\" [items]=\"contextMenuItems()!\" [actionParam]=\"treeItem\" />\n</ng-template>\n\n<ng-template #checkboxOrOption let-classNames=\"classNames\">\n  @if (showCheckOrOptionBox) {\n    <a class=\"input-box\" tabindex=\"-1\" [class]=\"classNames\">\n      <input\n        class=\"form-check-input\"\n        tabindex=\"-1\"\n        [type]=\"getInputType()\"\n        [indeterminate]=\"this.treeItem.checked === 'indeterminate' ? true : null\"\n        [checked]=\"this.treeItem.checked === 'checked'\"\n        [disabled]=\"!treeItem.selectable\"\n        [attr.aria-label]=\"treeItem.label | translate\"\n        (click)=\"onBoxClicked()\"\n      />\n    </a>\n  }\n</ng-template>\n\n<ng-template\n  #toggleTemplate\n  let-biggerPaddingStart=\"biggerPaddingStart\"\n  let-paddingStart=\"paddingStart\"\n  let-toggleIcon=\"toggleIcon\"\n  let-positionEnd=\"positionEnd\"\n>\n  @let folderStateClass = getItemFolderStateClass();\n  <a\n    class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n    tabindex=\"-1\"\n    [class.si-tree-view-item-toggle-end]=\"positionEnd\"\n    [class.disabled]=\"!folderStateClass\"\n    [style.margin-inline-start]=\"biggerPaddingStart\"\n    [style.padding-inline-start]=\"paddingStart\"\n    (click)=\"onItemFolderClicked()\"\n  >\n    @if (isExpanding) {\n      <si-loading-spinner />\n    } @else {\n      <i aria-hidden=\"true\" [class]=\"`${toggleIcon} ${folderStateClass}`\"></i>\n    }\n  </a>\n</ng-template>\n\n<ng-template #spacerTemplate let-positionEnd=\"positionEnd\">\n  <div\n    class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n    [class.si-tree-view-item-toggle-end]=\"positionEnd\"\n  >\n    <i aria-hidden=\"true\" class=\"si-tree-view-item-icon si-tree-view-item-icon-spacer\"></i>\n  </div>\n</ng-template>\n", styles: [":host{--si-tree-view-background: var(--si-sys-color-background-1);--si-tree-view-border-color: var(--si-sys-color-border-4);--si-tree-view-icon-size: var(--si-sys-sizing-icon-md);--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--si-sys-color-background-hover);--si-tree-view-item-select-color: var(--si-sys-color-background-active);--si-tree-view-item-line-height: var(--si-sys-typography-line-height-body);--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--si-sys-color-text-secondary)}:host-context(.tree-sm){--si-tree-view-item-min-height: 32px;--si-tree-view-padding-base-vertical: 0px}:host-context(.tree-xs){--si-tree-view-item-min-height: 24px;--si-tree-view-padding-base-vertical: 0px}:host-context(.cdk-drop-list[cdkDropListHasAnchor]) :host.cdk-drag-placeholder{block-size:auto!important;margin-inline:0;margin-block:revert!important;min-block-size:revert;position:static;z-index:auto}:host-context(.cdk-drop-list[cdkDropListHasAnchor]) :host.cdk-drag-placeholder:after{content:none!important}:host-context(.cdk-drop-list[cdkDropListHasAnchor]) :host.cdk-drag-placeholder>*{display:revert}:host{display:block}:host.cdk-drag-placeholder{block-size:0;margin-inline:8px;margin-block:0!important;opacity:1!important;min-block-size:0!important;position:relative;z-index:999}:host.cdk-drag-placeholder:after{position:absolute;inline-size:100%;block-size:2px;content:\"\";background-color:var(--si-sys-color-effects-focus)!important}:host.cdk-drag-placeholder>*{display:none}:host.cdk-drag:not(.cdk-drag-placeholder){transform:none!important}:host.cdk-drop-list-dragging *:hover,:host.cdk-drop-list-dragging .si-tree-view-item-end-icons,:host.cdk-drop-list-dragging .si-tree-view-item-context-menu-visible,:host .cdk-drop-list-dragging *:hover,:host .cdk-drop-list-dragging .si-tree-view-item-end-icons,:host .cdk-drop-list-dragging .si-tree-view-item-context-menu-visible{background-color:transparent!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item{padding-inline-start:8px!important;padding-inline-end:12px!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item .si-tree-view-item-toggle{padding-inline-start:12px!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item .badge{margin-inline-end:0}:host.cdk-drag-preview .si-tree-view-item-end-icons,:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item{background-color:var(--si-sys-color-background-3)!important}.si-tree-view-li.si-tree-view-li-item{position:relative}.si-tree-view-li.si-tree-view-li-item:hover,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-context-menu-visible,.si-tree-view-li.si-tree-view-li-item:hover .si-tree-view-item-end-icons,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-context-menu-visible .si-tree-view-item-end-icons{background-color:var(--si-tree-view-item-hover-color)}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected .si-tree-view-item-end-icons{background-color:var(--si-tree-view-item-select-color)}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable:hover,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-end-icons{background-color:unset}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item:hover{cursor:default;background-color:unset}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-dropdown-caret{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-context-menu-btn>div[role=button]{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-toggle-end{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-toggle-end .si-tree-view-item-icon{color:var(--si-sys-color-text-primary)}.si-tree-view-li.si-tree-view-li-item .si-tree-view-item-end-icons{background-color:var(--si-tree-view-background)}.si-tree-view-item-group,.si-tree-view-item{display:flex;align-items:center}.si-tree-stretch-center{align-self:stretch;display:flex;align-items:center;justify-content:center;margin:0;text-decoration:none}.si-tree-view-item-toggle.disabled .si-tree-view-item-icon{inline-size:var(--si-sys-sizing-spacing-x-80)}.si-tree-stretch-center+.si-tree-view-item-toggle-end .si-tree-view-item-icon{margin-inline-start:calc(var(--si-sys-sizing-spacing-x-20) * -1)}.si-tree-view-item-icon{padding-inline-end:var(--si-sys-sizing-spacing-x-20)}.si-tree-view-item-icon.si-tree-view-item-icon-spacer{box-sizing:content-box;inline-size:var(--si-tree-view-icon-size)}.si-tree-view-item-object-data,.si-tree-view-item-icon{margin-block:0;margin-inline:calc(var(--si-tree-view-padding-base-horizontal) / 4)}.si-tree-view-item{justify-content:space-between;min-block-size:var(--si-tree-view-item-min-height);padding-inline:var(--si-tree-view-padding-base-horizontal) calc(var(--si-tree-view-padding-base-horizontal) / 4)}.si-tree-view-item:hover{cursor:pointer}:host-context(.si-tree-view-flat) .si-tree-view-item{padding-inline-start:calc(var(--si-tree-view-padding-base-horizontal) / 2)}.si-tree-view-state-indicator{margin-block:0;margin-inline:calc(var(--si-tree-view-padding-base-horizontal) * .75);min-inline-size:.375rem;block-size:.375rem;border-radius:50%}.si-tree-view-state-indicator.si-tree-view-state-indicator-endmost{margin-inline-end:calc(var(--si-tree-view-padding-base-horizontal) * 1.75)}.si-tree-view-item-group{padding-block:calc(2 * var(--si-tree-view-padding-base-vertical));padding-inline:calc(var(--si-tree-view-padding-base-horizontal) / 2);cursor:default}.si-tree-view-item-group .si-tree-view-item-dropdown-caret:hover,.si-tree-view-item-group .si-tree-view-item-icon:hover{cursor:pointer}.si-tree-view-item-dropdown-caret,.si-tree-view-item-dropdown-caret:hover,.si-tree-view-item-icon,.si-tree-view-item-icon:hover{color:var(--si-sys-color-text-primary);text-decoration:none;font-size:var(--si-tree-view-icon-size)}.si-tree-view-item-main{overflow-x:hidden}.si-tree-view-item-main>.badge{margin-block:auto}.si-tree-view-item-object-data>.si-tree-view-item-object-data-field-1{color:var(--si-tree-view-item-object-data-field-1-color)}:host.si-tree-ellipsis .si-tree-view-item-object-data{overflow-x:hidden}.si-tree-view-item-object-data>*{white-space:nowrap;margin-block:0;line-height:var(--si-tree-view-item-line-height)}:host.si-tree-ellipsis .si-tree-view-item-object-data>*{overflow:hidden;text-overflow:ellipsis}.si-tree-view-menu-btn{pointer-events:none}.si-tree-view-item-end-icons{block-size:calc(var(--si-tree-view-item-min-height) - 2 * (var(--element-button-focus-width) + var(--element-button-focus-overlay-width)))}.si-tree-view-item-end-icons.si-tree-view-item-end-icons-sticky{position:sticky;inset-inline-end:0}.input-box{margin-inline:var(--si-sys-sizing-spacing-x-10) var(--si-sys-sizing-spacing-x-50)}.form-check-input{display:block}si-loading-spinner{--loading-spinner-size: var(--si-tree-view-icon-size)}\n"] }]
+                    }, template: "@if (!isGroupedItem) {\n  <div\n    #contextMenuTrigger=\"cdkContextMenuTriggerFor\"\n    class=\"si-tree-view-li si-tree-view-li-item focus-direct-sub-inside\"\n    [class.si-tree-view-item-context-menu-visible]=\"\n      !!(contextMenuTrigger.isOpen() || menuTrigger()?.isOpen())\n    \"\n    [class.si-tree-view-item-active]=\"treeItem.active\"\n    [class.si-tree-view-item-selected]=\"enableSelection() && treeItem.selected\"\n    [class.si-tree-view-item-not-selectable]=\"!treeItem.selectable\"\n    [style.padding-inline-start]=\"biggerPaddingStart\"\n    [cdkContextMenuTriggerFor]=\"contextMenu\"\n    [cdkContextMenuDisabled]=\"!isContextMenuButtonVisible() || !treeItem.selectable\"\n    (cdkContextMenuOpened)=\"onToggleContextMenuOpen()\"\n    (cdkContextMenuClosed)=\"onToggleContextMenuClose()\"\n  >\n    <div class=\"si-tree-view-item\" (mousedown)=\"onMouseDownTreeItem($event)\">\n      @if (showFolderStateStart && treeItem.state !== 'leaf') {\n        <ng-container\n          [ngTemplateOutlet]=\"toggleTemplate\"\n          [ngTemplateOutletContext]=\"{\n            biggerPaddingStart: negativeBiggerPaddingStart,\n            paddingStart: paddingStart,\n            toggleIcon: 'si-tree-view-item-dropdown-caret'\n          }\"\n        />\n      }\n      <ng-container [ngTemplateOutlet]=\"checkboxOrOption\" />\n\n      <div\n        class=\"si-tree-view-item-main d-flex flex-grow-1 align-self-stretch grab-area\"\n        (click)=\"onItemClicked($event)\"\n      >\n        @if (showIcon()) {\n          <div class=\"si-tree-stretch-center\">\n            <si-icon class=\"si-tree-view-item-icon\" [icon]=\"treeItem.icon!\" />\n          </div>\n        }\n        <div\n          class=\"si-tree-view-item-object-data d-flex flex-column justify-content-center overflow-hidden\"\n        >\n          @if (!templates().length) {\n            <ng-content select=\":not(si-tree-view-item):not([dragPreview])\"\n              ><div class=\"text-truncate\" [class.si-h5]=\"enableSelection() && treeItem.selected\">{{\n                treeItem.label | translate\n              }}</div></ng-content\n            >\n          } @else {\n            <div>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  renderMatchingTemplate(treeItem);\n                  context: { $implicit: treeItem }\n                \"\n              />\n            </div>\n          }\n          @if (enableDataField1() && treeItem.dataField1) {\n            <p class=\"si-tree-view-item-object-data-field-1 text-truncate\">{{\n              treeItem.dataField1 | translate\n            }}</p>\n          }\n          @if (enableDataField2() && treeItem.dataField2) {\n            <p class=\"si-tree-view-item-object-data-field-2 text-truncate\">{{\n              treeItem.dataField2 | translate\n            }}</p>\n          }\n        </div>\n        @if (treeItem.badge) {\n          <span class=\"badge flex-shrink-0\" [class]=\"`bg-${treeItem.badgeColor || 'default'}`\">{{\n            treeItem.badge\n          }}</span>\n        }\n      </div>\n      <div\n        class=\"si-tree-view-item-end-icons d-flex ms-2 align-items-center\"\n        [class.si-tree-view-item-end-icons-sticky]=\"stickyEndItems()\"\n      >\n        @if (showStateIndicator() && getStateIndicatorColor()) {\n          <div\n            class=\"si-tree-view-state-indicator\"\n            [style.background-color]=\"getStateIndicatorColor()\"\n            [class.si-tree-view-state-indicator-endmost]=\"\n              !enableContextMenuButton() && !showFolderStateEnd\n            \"\n          ></div>\n        }\n        @if (isContextMenuButtonVisible()) {\n          <div class=\"si-tree-stretch-center si-tree-context-menu-btn\">\n            <div\n              #menuTrigger=\"cdkMenuTriggerFor\"\n              tabindex=\"-1\"\n              aria-hidden=\"true\"\n              [cdkMenuTriggerFor]=\"contextMenu\"\n              (cdkMenuOpened)=\"onToggleContextMenuOpen()\"\n              (cdkMenuClosed)=\"onToggleContextMenuClose()\"\n            >\n              <i\n                aria-hidden=\"true\"\n                class=\"si-tree-view-item-icon si-tree-view-menu-btn\"\n                [class]=\"icons().itemMenu\"\n              ></i>\n            </div>\n          </div>\n        }\n        @if (showFolderStateEnd) {\n          <ng-container\n            [ngTemplateOutlet]=\"treeItem.state === 'leaf' ? spacerTemplate : toggleTemplate\"\n            [ngTemplateOutletContext]=\"{\n              toggleIcon: 'si-tree-view-item-icon',\n              positionEnd: true\n            }\"\n          />\n        }\n      </div>\n    </div>\n  </div>\n} @else {\n  <div class=\"si-tree-view-li focus-direct-sub-inside\">\n    <div class=\"si-tree-view-item-group\">\n      @if (showFolderStateStart) {\n        <ng-container\n          [ngTemplateOutlet]=\"toggleTemplate\"\n          [ngTemplateOutletContext]=\"{\n            toggleIcon: 'si-tree-view-item-icon'\n          }\"\n        />\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"checkboxOrOption\"\n        [ngTemplateOutletContext]=\"{ classNames: 'form-check mb-2' }\"\n      />\n\n      <p class=\"mb-0\">{{ treeItem.label | translate }}</p>\n      @if (showFolderStateEnd) {\n        <ng-container\n          [ngTemplateOutlet]=\"toggleTemplate\"\n          [ngTemplateOutletContext]=\"{\n            toggleIcon: 'si-tree-view-item-icon'\n          }\"\n        />\n      }\n    </div>\n  </div>\n}\n\n<ng-template #contextMenu>\n  <si-menu-factory class=\"me-5\" [items]=\"contextMenuItems()!\" [actionParam]=\"treeItem\" />\n</ng-template>\n\n<ng-template #checkboxOrOption let-classNames=\"classNames\">\n  @if (showCheckOrOptionBox) {\n    <a class=\"input-box\" tabindex=\"-1\" [class]=\"classNames\">\n      <input\n        class=\"form-check-input\"\n        tabindex=\"-1\"\n        [type]=\"getInputType()\"\n        [indeterminate]=\"this.treeItem.checked === 'indeterminate' ? true : null\"\n        [checked]=\"this.treeItem.checked === 'checked'\"\n        [disabled]=\"!treeItem.selectable\"\n        [attr.aria-label]=\"treeItem.label | translate\"\n        (click)=\"onBoxClicked()\"\n      />\n    </a>\n  }\n</ng-template>\n\n<ng-template\n  #toggleTemplate\n  let-biggerPaddingStart=\"biggerPaddingStart\"\n  let-paddingStart=\"paddingStart\"\n  let-toggleIcon=\"toggleIcon\"\n  let-positionEnd=\"positionEnd\"\n>\n  @let folderStateClass = getItemFolderStateClass();\n  <a\n    class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n    tabindex=\"-1\"\n    [class.si-tree-view-item-toggle-end]=\"positionEnd\"\n    [class.disabled]=\"!folderStateClass\"\n    [style.margin-inline-start]=\"biggerPaddingStart\"\n    [style.padding-inline-start]=\"paddingStart\"\n    (click)=\"onItemFolderClicked()\"\n  >\n    @if (isExpanding) {\n      <si-loading-spinner />\n    } @else {\n      <i aria-hidden=\"true\" [class]=\"`${toggleIcon} ${folderStateClass}`\"></i>\n    }\n  </a>\n</ng-template>\n\n<ng-template #spacerTemplate let-positionEnd=\"positionEnd\">\n  <div\n    class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n    [class.si-tree-view-item-toggle-end]=\"positionEnd\"\n  >\n    <i aria-hidden=\"true\" class=\"si-tree-view-item-icon si-tree-view-item-icon-spacer\"></i>\n  </div>\n</ng-template>\n", styles: [":host{--si-tree-view-background: var(--si-sys-color-background-1);--si-tree-view-border-color: var(--si-sys-color-border-4);--si-tree-view-icon-size: var(--si-sys-sizing-icon-md);--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--si-sys-color-background-hover);--si-tree-view-item-select-color: var(--si-sys-color-background-active);--si-tree-view-item-line-height: var(--si-sys-typography-line-height-body);--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--si-sys-color-text-secondary)}:host-context(.tree-sm){--si-tree-view-item-min-height: 32px;--si-tree-view-padding-base-vertical: 0px}:host-context(.tree-xs){--si-tree-view-item-min-height: 24px;--si-tree-view-padding-base-vertical: 0px}:host{display:block}:host.cdk-drag:not(.cdk-drag-placeholder){transform:none!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item{padding-inline-start:8px!important;padding-inline-end:12px!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item .si-tree-view-item-toggle{padding-inline-start:12px!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item .badge{margin-inline-end:0}:host.cdk-drag-preview .si-tree-view-item-end-icons,:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item{background-color:var(--si-sys-color-background-3)!important}:host-context(.cdk-drop-list-dragging) *:hover,:host-context(.cdk-drop-list-dragging) .si-tree-view-item-end-icons,:host-context(.cdk-drop-list-dragging) .si-tree-view-item-context-menu-visible,:host .cdk-drop-list-dragging *:hover,:host .cdk-drop-list-dragging .si-tree-view-item-end-icons,:host .cdk-drop-list-dragging .si-tree-view-item-context-menu-visible{background-color:transparent!important}.si-tree-view-li.si-tree-view-li-item{position:relative}.si-tree-view-li.si-tree-view-li-item:hover,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-context-menu-visible,.si-tree-view-li.si-tree-view-li-item:hover .si-tree-view-item-end-icons,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-context-menu-visible .si-tree-view-item-end-icons{background-color:var(--si-tree-view-item-hover-color)}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected .si-tree-view-item-end-icons{background-color:var(--si-tree-view-item-select-color)}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable:hover,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-end-icons{background-color:unset}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item:hover{cursor:default;background-color:unset}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-dropdown-caret{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-context-menu-btn>div[role=button]{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-toggle-end{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-toggle-end .si-tree-view-item-icon{color:var(--si-sys-color-text-primary)}.si-tree-view-li.si-tree-view-li-item .si-tree-view-item-end-icons{background-color:var(--si-tree-view-background)}.si-tree-view-item-group,.si-tree-view-item{display:flex;align-items:center}.si-tree-stretch-center{align-self:stretch;display:flex;align-items:center;justify-content:center;margin:0;text-decoration:none}.si-tree-view-item-toggle.disabled .si-tree-view-item-icon{inline-size:var(--si-sys-sizing-spacing-x-80)}.si-tree-stretch-center+.si-tree-view-item-toggle-end .si-tree-view-item-icon{margin-inline-start:calc(var(--si-sys-sizing-spacing-x-20) * -1)}.si-tree-view-item-icon{padding-inline-end:var(--si-sys-sizing-spacing-x-20)}.si-tree-view-item-icon.si-tree-view-item-icon-spacer{box-sizing:content-box;inline-size:var(--si-tree-view-icon-size)}.si-tree-view-item-object-data,.si-tree-view-item-icon{margin-block:0;margin-inline:calc(var(--si-tree-view-padding-base-horizontal) / 4)}.si-tree-view-item{justify-content:space-between;min-block-size:var(--si-tree-view-item-min-height);padding-inline:var(--si-tree-view-padding-base-horizontal) calc(var(--si-tree-view-padding-base-horizontal) / 4)}.si-tree-view-item:hover{cursor:pointer}:host-context(.si-tree-view-flat) .si-tree-view-item{padding-inline-start:calc(var(--si-tree-view-padding-base-horizontal) / 2)}.si-tree-view-state-indicator{margin-block:0;margin-inline:calc(var(--si-tree-view-padding-base-horizontal) * .75);min-inline-size:.375rem;block-size:.375rem;border-radius:50%}.si-tree-view-state-indicator.si-tree-view-state-indicator-endmost{margin-inline-end:calc(var(--si-tree-view-padding-base-horizontal) * 1.75)}.si-tree-view-item-group{padding-block:calc(2 * var(--si-tree-view-padding-base-vertical));padding-inline:calc(var(--si-tree-view-padding-base-horizontal) / 2);cursor:default}.si-tree-view-item-group .si-tree-view-item-dropdown-caret:hover,.si-tree-view-item-group .si-tree-view-item-icon:hover{cursor:pointer}.si-tree-view-item-dropdown-caret,.si-tree-view-item-dropdown-caret:hover,.si-tree-view-item-icon,.si-tree-view-item-icon:hover{color:var(--si-sys-color-text-primary);text-decoration:none;font-size:var(--si-tree-view-icon-size)}.si-tree-view-item-main{overflow-x:hidden}.si-tree-view-item-main>.badge{margin-block:auto}.si-tree-view-item-object-data>.si-tree-view-item-object-data-field-1{color:var(--si-tree-view-item-object-data-field-1-color)}:host.si-tree-ellipsis .si-tree-view-item-object-data{overflow-x:hidden}.si-tree-view-item-object-data>*{white-space:nowrap;margin-block:0;line-height:var(--si-tree-view-item-line-height)}:host.si-tree-ellipsis .si-tree-view-item-object-data>*{overflow:hidden;text-overflow:ellipsis}.si-tree-view-menu-btn{pointer-events:none}.si-tree-view-item-end-icons{block-size:calc(var(--si-tree-view-item-min-height) - 2 * (var(--element-button-focus-width) + var(--element-button-focus-overlay-width)))}.si-tree-view-item-end-icons.si-tree-view-item-end-icons-sticky{position:sticky;inset-inline-end:0}.input-box{margin-inline:var(--si-sys-sizing-spacing-x-10) var(--si-sys-sizing-spacing-x-50)}.form-check-input{display:block}si-loading-spinner{--loading-spinner-size: var(--si-tree-view-icon-size)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { menuTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkMenuTrigger), { isSignal: true }] }], ariaLevel: [{
                 type: HostBinding,
                 args: ['attr.aria-level']
@@ -1690,10 +1692,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-/*
- * WARNING: Parts of this component are made to be used in conjunction with Bootstrap.
- * Bootstrap is not included with this package and has to be installed separately.
- */
 const rootDefaults = {
     label: 'root',
     level: ROOT_LEVEL,
@@ -1983,6 +1981,7 @@ class SiTreeViewComponent {
     virtualRoot = { ...rootDefaults };
     _items = signal(this.items(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+    svgIcons = addIcons({ elementExpandAll, elementCollapseAll });
     updateTreeItemDefaults(item) {
         item.showCheckbox ??= this.enableCheckbox();
         item.showOptionbox ??= this.enableOptionbox();
@@ -2815,11 +2814,17 @@ class SiTreeViewComponent {
             SiTreeViewService,
             SiTreeViewVirtualizationService,
             { provide: SI_TREE_VIEW, useExisting: SiTreeViewComponent }
-        ], queries: [{ propertyName: "templates", predicate: SiTreeViewItemTemplateDirective, isSignal: true }, { propertyName: "treeItemContentTemplate", first: true, predicate: SiTreeViewItemDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "nextItems", predicate: SiTreeViewItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "children", predicate: SiTreeViewItemComponent, descendants: true, isSignal: true }, { propertyName: "treeViewInnerElement", first: true, predicate: ["treeViewInner"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (!flatTree() && expandCollapseAll()) {\n  <div class=\"si-tree-view-expand-collapse-container p-4\">\n    <button\n      class=\"btn btn-icon btn-tertiary element-expand-all\"\n      type=\"button\"\n      [title]=\"expandAllTooltip() | translate\"\n      [attr.aria-label]=\"expandAllTooltip() | translate\"\n      (click)=\"expandAll()\"\n    >\n    </button>\n    <button\n      class=\"btn btn-icon btn-tertiary ms-4 element-collapse-all\"\n      type=\"button\"\n      [title]=\"collapseAllTooltip() | translate\"\n      [attr.aria-label]=\"collapseAllTooltip() | translate\"\n      (click)=\"collapseAll()\"\n    >\n    </button>\n  </div>\n}\n@if (flatTree()) {\n  <div class=\"si-tree-view-header\">\n    <span\n      class=\"si-tree-view-header-btn si-tree-view-header-root\"\n      tabindex=\"0\"\n      [class]=\"computedIcons().headerHome\"\n      [class.disabled]=\"headerShowsRoot\"\n      (click)=\"onFlatTreeNavigateHome()\"\n      (keydown.enter)=\"onFlatTreeNavigateHome()\"\n    ></span>\n    @if (lastBreadCrumbItem) {\n      <span\n        class=\"si-tree-view-header-btn\"\n        tabindex=\"0\"\n        [class]=\"computedIcons().headerArrow\"\n        [class.disabled]=\"headerShowsRoot\"\n        (click)=\"onFlatTreeNavigateUp()\"\n        (keydown.enter)=\"onFlatTreeNavigateUp()\"\n      ></span>\n      <span class=\"text-center text-truncate\">{{ lastBreadCrumbItem.label | translate }}</span>\n    }\n  </div>\n}\n<div\n  #treeViewInner\n  cdkScrollable\n  class=\"si-tree-view focus-inside\"\n  role=\"tree\"\n  [attr.aria-multiselectable]=\"!singleSelectMode()\"\n  [attr.aria-label]=\"ariaLabel() ? (ariaLabel() | translate) : undefined\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [class.si-tree-horizontal-scroll]=\"horizontalScrolling()\"\n  [class.si-tree-view-flat]=\"flatTree()\"\n  [class.si-tree-expand-collapse]=\"!flatTree() && expandCollapseAll()\"\n>\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightBefore\"></div>\n  }\n  @if (itemsVirtualized) {\n    <div class=\"si-tree-view-root-ul\">\n      <ng-content select=\"[cdkDropList], [siTreeViewItem]\" />\n      @if (!treeItemContentTemplate()) {\n        <si-tree-view-item *siTreeViewItem=\"let index = index; let treeItem = treeItem\" />\n      }\n    </div>\n  }\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightAfter\"></div>\n  }\n</div>\n", styles: [":host{--si-tree-view-background: var(--si-sys-color-background-1);--si-tree-view-border-color: var(--si-sys-color-border-4);--si-tree-view-icon-size: var(--si-sys-sizing-icon-md);--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--si-sys-color-background-hover);--si-tree-view-item-select-color: var(--si-sys-color-background-active);--si-tree-view-item-line-height: var(--si-sys-typography-line-height-body);--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--si-sys-color-text-secondary)}:host-context(.tree-sm){--si-tree-view-item-min-height: 32px;--si-tree-view-padding-base-vertical: 0px}:host-context(.tree-xs){--si-tree-view-item-min-height: 24px;--si-tree-view-padding-base-vertical: 0px}:host{display:flex;flex-direction:column;background-color:var(--si-tree-view-background)}.si-tree-view-header{padding:calc(var(--si-tree-view-padding-base-horizontal) / 2);border-block-end:1px solid var(--si-tree-view-border-color)}.si-tree-view-header>*{align-self:center}.si-tree-view-header-btn{cursor:pointer;margin-inline-end:calc(var(--si-tree-view-padding-base-horizontal) / 2);font-size:var(--si-tree-view-icon-size)}.si-tree-view-header-root{margin-inline-end:0}.si-tree-view{overflow:auto;flex:1 0 0;min-block-size:0}.si-tree-view.si-tree-horizontal-scroll{display:flex;flex-wrap:wrap;align-content:flex-start}.si-tree-view-root-ul{list-style:none;padding:0;margin:0;flex:1 1 auto}::ng-deep .si-tree-view-top-level-item{margin-block-start:var(--si-sys-sizing-spacing-y-40)}.si-tree-expand-collapse ::ng-deep .si-tree-view-top-level-item:first-child{margin-block-start:0}@supports (-webkit-touch-callout: none){.si-tree-horizontal-scroll{transform:translateZ(0)}}\n"], dependencies: [{ kind: "component", type: SiTreeViewItemComponent, selector: "si-tree-view-item" }, { kind: "ngmodule", type: CdkScrollableModule }, { kind: "directive", type: i1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: SiTreeViewItemDirective, selector: "[siTreeViewItem]" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+        ], queries: [{ propertyName: "templates", predicate: SiTreeViewItemTemplateDirective, isSignal: true }, { propertyName: "treeItemContentTemplate", first: true, predicate: SiTreeViewItemDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "nextItems", predicate: SiTreeViewItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "children", predicate: SiTreeViewItemComponent, descendants: true, isSignal: true }, { propertyName: "treeViewInnerElement", first: true, predicate: ["treeViewInner"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (!flatTree() && expandCollapseAll()) {\n  <div class=\"si-tree-view-expand-collapse-container p-4\">\n    <button\n      class=\"btn btn-icon btn-tertiary\"\n      type=\"button\"\n      [title]=\"expandAllTooltip() | translate\"\n      [attr.aria-label]=\"expandAllTooltip() | translate\"\n      (click)=\"expandAll()\"\n    >\n      <si-icon [icon]=\"svgIcons.elementExpandAll\" />\n    </button>\n    <button\n      class=\"btn btn-icon btn-tertiary ms-4\"\n      type=\"button\"\n      [title]=\"collapseAllTooltip() | translate\"\n      [attr.aria-label]=\"collapseAllTooltip() | translate\"\n      (click)=\"collapseAll()\"\n    >\n      <si-icon [icon]=\"svgIcons.elementCollapseAll\" />\n    </button>\n  </div>\n}\n@if (flatTree()) {\n  <div class=\"si-tree-view-header\">\n    <span\n      class=\"si-tree-view-header-btn si-tree-view-header-root\"\n      tabindex=\"0\"\n      [class]=\"computedIcons().headerHome\"\n      [class.disabled]=\"headerShowsRoot\"\n      (click)=\"onFlatTreeNavigateHome()\"\n      (keydown.enter)=\"onFlatTreeNavigateHome()\"\n    ></span>\n    @if (lastBreadCrumbItem) {\n      <span\n        class=\"si-tree-view-header-btn\"\n        tabindex=\"0\"\n        [class]=\"computedIcons().headerArrow\"\n        [class.disabled]=\"headerShowsRoot\"\n        (click)=\"onFlatTreeNavigateUp()\"\n        (keydown.enter)=\"onFlatTreeNavigateUp()\"\n      ></span>\n      <span class=\"text-center text-truncate\">{{ lastBreadCrumbItem.label | translate }}</span>\n    }\n  </div>\n}\n<div\n  #treeViewInner\n  cdkScrollable\n  class=\"si-tree-view focus-inside\"\n  role=\"tree\"\n  [attr.aria-multiselectable]=\"!singleSelectMode()\"\n  [attr.aria-label]=\"ariaLabel() ? (ariaLabel() | translate) : undefined\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [class.si-tree-horizontal-scroll]=\"horizontalScrolling()\"\n  [class.si-tree-view-flat]=\"flatTree()\"\n  [class.si-tree-expand-collapse]=\"!flatTree() && expandCollapseAll()\"\n>\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightBefore\"></div>\n  }\n  @if (itemsVirtualized) {\n    <div class=\"si-tree-view-root-ul\">\n      <ng-content select=\"[cdkDropList], [siTreeViewItem]\" />\n      @if (!treeItemContentTemplate()) {\n        <si-tree-view-item *siTreeViewItem=\"let index = index; let treeItem = treeItem\" />\n      }\n    </div>\n  }\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightAfter\"></div>\n  }\n</div>\n", styles: [":host{--si-tree-view-background: var(--si-sys-color-background-1);--si-tree-view-border-color: var(--si-sys-color-border-4);--si-tree-view-icon-size: var(--si-sys-sizing-icon-md);--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--si-sys-color-background-hover);--si-tree-view-item-select-color: var(--si-sys-color-background-active);--si-tree-view-item-line-height: var(--si-sys-typography-line-height-body);--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--si-sys-color-text-secondary)}:host-context(.tree-sm){--si-tree-view-item-min-height: 32px;--si-tree-view-padding-base-vertical: 0px}:host-context(.tree-xs){--si-tree-view-item-min-height: 24px;--si-tree-view-padding-base-vertical: 0px}:host{display:flex;flex-direction:column;background-color:var(--si-tree-view-background)}.si-tree-view-header{padding:calc(var(--si-tree-view-padding-base-horizontal) / 2);border-block-end:1px solid var(--si-tree-view-border-color)}.si-tree-view-header>*{align-self:center}.si-tree-view-header-btn{cursor:pointer;margin-inline-end:calc(var(--si-tree-view-padding-base-horizontal) / 2);font-size:var(--si-tree-view-icon-size)}.si-tree-view-header-root{margin-inline-end:0}.si-tree-view{overflow:auto;flex:1 0 0;min-block-size:0}.si-tree-view.si-tree-horizontal-scroll{display:flex;flex-wrap:wrap;align-content:flex-start}.si-tree-view-root-ul{list-style:none;padding:0;margin:0;flex:1 1 auto}::ng-deep .si-tree-view-top-level-item{margin-block-start:var(--si-sys-sizing-spacing-y-40)}.si-tree-expand-collapse ::ng-deep .si-tree-view-top-level-item:first-child{margin-block-start:0}@supports (-webkit-touch-callout: none){.si-tree-horizontal-scroll{transform:translateZ(0)}}\n"], dependencies: [{ kind: "component", type: SiTreeViewItemComponent, selector: "si-tree-view-item" }, { kind: "ngmodule", type: CdkScrollableModule }, { kind: "directive", type: i1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: SiTreeViewItemDirective, selector: "[siTreeViewItem]" }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTreeViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-tree-view', imports: [SiTranslatePipe, SiTreeViewItemComponent, CdkScrollableModule, SiTreeViewItemDirective], providers: [
+            args: [{ selector: 'si-tree-view', imports: [
+                        SiTranslatePipe,
+                        SiTreeViewItemComponent,
+                        CdkScrollableModule,
+                        SiTreeViewItemDirective,
+                        SiIconComponent
+                    ], providers: [
                         SiTreeViewConverterService,
                         SiTreeViewItemHeightService,
                         SiTreeViewService,
@@ -2831,7 +2836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         '(document:keyup.meta)': 'onKeyUpMeta()',
                         '(document:mouseleave)': 'onMouseLeave()',
                         '(keydown)': 'handleKeydown($event)'
-                    }, template: "@if (!flatTree() && expandCollapseAll()) {\n  <div class=\"si-tree-view-expand-collapse-container p-4\">\n    <button\n      class=\"btn btn-icon btn-tertiary element-expand-all\"\n      type=\"button\"\n      [title]=\"expandAllTooltip() | translate\"\n      [attr.aria-label]=\"expandAllTooltip() | translate\"\n      (click)=\"expandAll()\"\n    >\n    </button>\n    <button\n      class=\"btn btn-icon btn-tertiary ms-4 element-collapse-all\"\n      type=\"button\"\n      [title]=\"collapseAllTooltip() | translate\"\n      [attr.aria-label]=\"collapseAllTooltip() | translate\"\n      (click)=\"collapseAll()\"\n    >\n    </button>\n  </div>\n}\n@if (flatTree()) {\n  <div class=\"si-tree-view-header\">\n    <span\n      class=\"si-tree-view-header-btn si-tree-view-header-root\"\n      tabindex=\"0\"\n      [class]=\"computedIcons().headerHome\"\n      [class.disabled]=\"headerShowsRoot\"\n      (click)=\"onFlatTreeNavigateHome()\"\n      (keydown.enter)=\"onFlatTreeNavigateHome()\"\n    ></span>\n    @if (lastBreadCrumbItem) {\n      <span\n        class=\"si-tree-view-header-btn\"\n        tabindex=\"0\"\n        [class]=\"computedIcons().headerArrow\"\n        [class.disabled]=\"headerShowsRoot\"\n        (click)=\"onFlatTreeNavigateUp()\"\n        (keydown.enter)=\"onFlatTreeNavigateUp()\"\n      ></span>\n      <span class=\"text-center text-truncate\">{{ lastBreadCrumbItem.label | translate }}</span>\n    }\n  </div>\n}\n<div\n  #treeViewInner\n  cdkScrollable\n  class=\"si-tree-view focus-inside\"\n  role=\"tree\"\n  [attr.aria-multiselectable]=\"!singleSelectMode()\"\n  [attr.aria-label]=\"ariaLabel() ? (ariaLabel() | translate) : undefined\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [class.si-tree-horizontal-scroll]=\"horizontalScrolling()\"\n  [class.si-tree-view-flat]=\"flatTree()\"\n  [class.si-tree-expand-collapse]=\"!flatTree() && expandCollapseAll()\"\n>\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightBefore\"></div>\n  }\n  @if (itemsVirtualized) {\n    <div class=\"si-tree-view-root-ul\">\n      <ng-content select=\"[cdkDropList], [siTreeViewItem]\" />\n      @if (!treeItemContentTemplate()) {\n        <si-tree-view-item *siTreeViewItem=\"let index = index; let treeItem = treeItem\" />\n      }\n    </div>\n  }\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightAfter\"></div>\n  }\n</div>\n", styles: [":host{--si-tree-view-background: var(--si-sys-color-background-1);--si-tree-view-border-color: var(--si-sys-color-border-4);--si-tree-view-icon-size: var(--si-sys-sizing-icon-md);--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--si-sys-color-background-hover);--si-tree-view-item-select-color: var(--si-sys-color-background-active);--si-tree-view-item-line-height: var(--si-sys-typography-line-height-body);--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--si-sys-color-text-secondary)}:host-context(.tree-sm){--si-tree-view-item-min-height: 32px;--si-tree-view-padding-base-vertical: 0px}:host-context(.tree-xs){--si-tree-view-item-min-height: 24px;--si-tree-view-padding-base-vertical: 0px}:host{display:flex;flex-direction:column;background-color:var(--si-tree-view-background)}.si-tree-view-header{padding:calc(var(--si-tree-view-padding-base-horizontal) / 2);border-block-end:1px solid var(--si-tree-view-border-color)}.si-tree-view-header>*{align-self:center}.si-tree-view-header-btn{cursor:pointer;margin-inline-end:calc(var(--si-tree-view-padding-base-horizontal) / 2);font-size:var(--si-tree-view-icon-size)}.si-tree-view-header-root{margin-inline-end:0}.si-tree-view{overflow:auto;flex:1 0 0;min-block-size:0}.si-tree-view.si-tree-horizontal-scroll{display:flex;flex-wrap:wrap;align-content:flex-start}.si-tree-view-root-ul{list-style:none;padding:0;margin:0;flex:1 1 auto}::ng-deep .si-tree-view-top-level-item{margin-block-start:var(--si-sys-sizing-spacing-y-40)}.si-tree-expand-collapse ::ng-deep .si-tree-view-top-level-item:first-child{margin-block-start:0}@supports (-webkit-touch-callout: none){.si-tree-horizontal-scroll{transform:translateZ(0)}}\n"] }]
+                    }, template: "@if (!flatTree() && expandCollapseAll()) {\n  <div class=\"si-tree-view-expand-collapse-container p-4\">\n    <button\n      class=\"btn btn-icon btn-tertiary\"\n      type=\"button\"\n      [title]=\"expandAllTooltip() | translate\"\n      [attr.aria-label]=\"expandAllTooltip() | translate\"\n      (click)=\"expandAll()\"\n    >\n      <si-icon [icon]=\"svgIcons.elementExpandAll\" />\n    </button>\n    <button\n      class=\"btn btn-icon btn-tertiary ms-4\"\n      type=\"button\"\n      [title]=\"collapseAllTooltip() | translate\"\n      [attr.aria-label]=\"collapseAllTooltip() | translate\"\n      (click)=\"collapseAll()\"\n    >\n      <si-icon [icon]=\"svgIcons.elementCollapseAll\" />\n    </button>\n  </div>\n}\n@if (flatTree()) {\n  <div class=\"si-tree-view-header\">\n    <span\n      class=\"si-tree-view-header-btn si-tree-view-header-root\"\n      tabindex=\"0\"\n      [class]=\"computedIcons().headerHome\"\n      [class.disabled]=\"headerShowsRoot\"\n      (click)=\"onFlatTreeNavigateHome()\"\n      (keydown.enter)=\"onFlatTreeNavigateHome()\"\n    ></span>\n    @if (lastBreadCrumbItem) {\n      <span\n        class=\"si-tree-view-header-btn\"\n        tabindex=\"0\"\n        [class]=\"computedIcons().headerArrow\"\n        [class.disabled]=\"headerShowsRoot\"\n        (click)=\"onFlatTreeNavigateUp()\"\n        (keydown.enter)=\"onFlatTreeNavigateUp()\"\n      ></span>\n      <span class=\"text-center text-truncate\">{{ lastBreadCrumbItem.label | translate }}</span>\n    }\n  </div>\n}\n<div\n  #treeViewInner\n  cdkScrollable\n  class=\"si-tree-view focus-inside\"\n  role=\"tree\"\n  [attr.aria-multiselectable]=\"!singleSelectMode()\"\n  [attr.aria-label]=\"ariaLabel() ? (ariaLabel() | translate) : undefined\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [class.si-tree-horizontal-scroll]=\"horizontalScrolling()\"\n  [class.si-tree-view-flat]=\"flatTree()\"\n  [class.si-tree-expand-collapse]=\"!flatTree() && expandCollapseAll()\"\n>\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightBefore\"></div>\n  }\n  @if (itemsVirtualized) {\n    <div class=\"si-tree-view-root-ul\">\n      <ng-content select=\"[cdkDropList], [siTreeViewItem]\" />\n      @if (!treeItemContentTemplate()) {\n        <si-tree-view-item *siTreeViewItem=\"let index = index; let treeItem = treeItem\" />\n      }\n    </div>\n  }\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightAfter\"></div>\n  }\n</div>\n", styles: [":host{--si-tree-view-background: var(--si-sys-color-background-1);--si-tree-view-border-color: var(--si-sys-color-border-4);--si-tree-view-icon-size: var(--si-sys-sizing-icon-md);--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--si-sys-color-background-hover);--si-tree-view-item-select-color: var(--si-sys-color-background-active);--si-tree-view-item-line-height: var(--si-sys-typography-line-height-body);--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--si-sys-color-text-secondary)}:host-context(.tree-sm){--si-tree-view-item-min-height: 32px;--si-tree-view-padding-base-vertical: 0px}:host-context(.tree-xs){--si-tree-view-item-min-height: 24px;--si-tree-view-padding-base-vertical: 0px}:host{display:flex;flex-direction:column;background-color:var(--si-tree-view-background)}.si-tree-view-header{padding:calc(var(--si-tree-view-padding-base-horizontal) / 2);border-block-end:1px solid var(--si-tree-view-border-color)}.si-tree-view-header>*{align-self:center}.si-tree-view-header-btn{cursor:pointer;margin-inline-end:calc(var(--si-tree-view-padding-base-horizontal) / 2);font-size:var(--si-tree-view-icon-size)}.si-tree-view-header-root{margin-inline-end:0}.si-tree-view{overflow:auto;flex:1 0 0;min-block-size:0}.si-tree-view.si-tree-horizontal-scroll{display:flex;flex-wrap:wrap;align-content:flex-start}.si-tree-view-root-ul{list-style:none;padding:0;margin:0;flex:1 1 auto}::ng-deep .si-tree-view-top-level-item{margin-block-start:var(--si-sys-sizing-spacing-y-40)}.si-tree-expand-collapse ::ng-deep .si-tree-view-top-level-item:first-child{margin-block-start:0}@supports (-webkit-touch-callout: none){.si-tree-horizontal-scroll{transform:translateZ(0)}}\n"] }]
         }], propDecorators: { contextMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenuItems", required: false }] }], childrenIndentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenIndentation", required: false }] }], horizontalScrolling: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalScrolling", required: false }] }], compactMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactMode", required: false }] }], expandCollapseAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandCollapseAll", required: false }] }], expandAllTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandAllTooltip", required: false }] }], collapseAllTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseAllTooltip", required: false }] }], icons: [{ type: i0.Input, args: [{ isSignal: true, alias: "icons", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pagesVirtualized: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagesVirtualized", required: false }] }], folderStateStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "folderStateStart", required: false }] }], isVirtualized: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVirtualized", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], selectedItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItem", required: false }] }], singleSelectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleSelectMode", required: false }] }], enableDataField1: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDataField1", required: false }] }], enableDataField2: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDataField2", required: false }] }], enableStateIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableStateIndicator", required: false }] }], enableIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableIcon", required: false }] }], enableContextMenuButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableContextMenuButton", required: false }] }], enableSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSelection", required: false }] }], deleteChildrenOnCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteChildrenOnCollapse", required: false }] }], flatTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "flatTree", required: false }] }], groupedList: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupedList", required: false }] }], enableCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCheckbox", required: false }] }], enableOptionbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableOptionbox", required: false }] }], expandOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandOnClick", required: false }] }], inheritChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "inheritChecked", required: false }] }], noActionsString: [{ type: i0.Input, args: [{ isSignal: true, alias: "noActionsString", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], itemsVirtualizedChanged: [{ type: i0.Output, args: ["itemsVirtualizedChanged"] }], treeItemFolderClicked: [{ type: i0.Output, args: ["treeItemFolderClicked"] }], treeItemFolderStateChanged: [{ type: i0.Output, args: ["treeItemFolderStateChanged"] }], treeItemClicked: [{ type: i0.Output, args: ["treeItemClicked"] }], treeItemCheckboxClicked: [{ type: i0.Output, args: ["treeItemCheckboxClicked"] }], loadChildren: [{ type: i0.Output, args: ["loadChildren"] }], treeItemsSelected: [{ type: i0.Output, args: ["treeItemsSelected"] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SiTreeViewItemTemplateDirective), { isSignal: true }] }], children: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SiTreeViewItemComponent), { isSignal: true }] }], treeItemContentTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SiTreeViewItemDirective), { ...{
                             read: TemplateRef
                         }, isSignal: true }] }], nextItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SiTreeViewItemComponent), { ...{ descendants: true }, isSignal: true }] }], treeViewInnerElement: [{ type: i0.ViewChild, args: ['treeViewInner', { isSignal: true }] }] } });