@siemens/element-ng 49.16.0 → 51.0.0-rc.10

package/fesm2022/siemens-element-ng-main-detail-container.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-main-detail-container.mjs","sources":["../../../../projects/element-ng/main-detail-container/si-main-detail-container.component.ts","../../../../projects/element-ng/main-detail-container/si-main-detail-container.component.html","../../../../projects/element-ng/main-detail-container/si-main-detail-container.module.ts","../../../../projects/element-ng/main-detail-container/index.ts","../../../../projects/element-ng/main-detail-container/siemens-element-ng-main-detail-container.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  computed,\n  DestroyRef,\n  ElementRef,\n  inject,\n  input,\n  model,\n  OnChanges,\n  OnInit,\n  output,\n  signal,\n  SimpleChanges\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { elementBack } from '@siemens/element-icons';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport {\n  BOOTSTRAP_BREAKPOINTS,\n  ElementDimensions,\n  ResizeObserverService\n} from '@siemens/element-ng/resize-observer';\nimport { SiSplitComponent, SiSplitPartComponent } from '@siemens/element-ng/split';\nimport { SiTranslatePipe, t, TranslatableString } from '@siemens/element-translate-ng/translate';\nimport { timer } from 'rxjs';\n\n@Component({\n  selector: 'si-main-detail-container',\n  imports: [\n    NgTemplateOutlet,\n    SiSplitComponent,\n    SiSplitPartComponent,\n    SiTranslatePipe,\n    SiIconComponent\n  ],\n  templateUrl: './si-main-detail-container.component.html',\n  styleUrl: './si-main-detail-container.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'si-layout-inner',\n    '[class.animate]': 'animate()',\n    '[style.opacity]': 'opacity()'\n  }\n})\nexport class SiMainDetailContainerComponent implements OnInit, OnChanges {\n  protected readonly icons = addIcons({ elementBack });\n\n  private readonly animationDuration = 500;\n  private readonly elementRef = inject(ElementRef);\n  private readonly resizeObserver = inject(ResizeObserverService);\n  private readonly changeDetectorRef = inject(ChangeDetectorRef);\n  private readonly destroyRef = inject(DestroyRef);\n\n  /**\n   * A numeric value defining the minimum width in px, which the container needs\n   * to be displayed in its large layout. Whenever smaller than\n   * this threshold, the small layout will be used. Default is\n   * value is BOOTSTRAP_BREAKPOINTS.mdMinimum.\n   *\n   * @defaultValue BOOTSTRAP_BREAKPOINTS.mdMinimum\n   */\n  readonly largeLayoutBreakpoint = input(BOOTSTRAP_BREAKPOINTS.mdMinimum);\n\n  /**\n   * Whether the main-detail layout component has a large size or not,\n   * `true` if the container´s width matches or exceeds the `largeLayoutBreakpoint`.\n   */\n  hasLargeSize!: boolean;\n\n  /**\n   * Emits whether the components size is large enough to display\n   * main and details views next to each other or not.\n   */\n  readonly hasLargeSizeChange = output<boolean>();\n\n  /**\n   * Whether the details are currently active or not, mostly relevant in the\n   * responsive scenario when the viewport only shows either the main or the detail.\n   *\n   * @defaultValue false\n   */\n  readonly detailsActive = model(false);\n\n  /**\n   * The heading of the main-detail layout component, usually a page heading.\n   *\n   * @defaultValue ''\n   */\n  readonly heading = input<TranslatableString>('');\n\n  /**\n   * Whether the heading should be truncated (single line) or not.\n   * Default value is `false`.\n   *\n   * @defaultValue false\n   */\n  readonly truncateHeading = input(false, { transform: booleanAttribute });\n\n  /**\n   * The heading of the detail area.\n   *\n   * @defaultValue ''\n   */\n  readonly detailsHeading = input<TranslatableString>('');\n\n  /**\n   * Whether the main and detail parts should be resizable by a splitter or not.\n   * This is only supported in the 'large' scenario (when `hasLargeSize` is `true`).\n   * Default value is `false`.\n   *\n   * @defaultValue false\n   */\n  readonly resizableParts = input(false, { transform: booleanAttribute });\n\n  /**\n   * You can hide the back button in the mobile view by setting true. Required\n   * in add, edit workflows on mobile sizes. During add or edit, the back button\n   * should be hidden. Default value is `false`.\n   *\n   * @defaultValue false\n   */\n  readonly hideBackButton = input(false, { transform: booleanAttribute });\n\n  /**\n   * Details back button text. Required for a11y.\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_MAIN_DETAIL_CONTAINER.BACK:Back`)\n   * ```\n   */\n  readonly detailsBackButtonText = input(t(() => $localize`:@@SI_MAIN_DETAIL_CONTAINER.BACK:Back`));\n\n  /**\n   * CSS class(es) applied to the outermost container. Per default, Bootstrap classes\n   * to handle responsive paddings are applied: `px-6 pt-6 px-md-9`.\n   *\n   * @defaultValue 'px-6 pt-6 px-md-9'\n   */\n  readonly containerClass = input('px-6 pt-6 px-md-9');\n\n  /**\n   * CSS class(es) applied to the main container. In combination with `containerClass`,\n   * this allows for settings individual padding and margin values on the individual containers.\n   *\n   * @defaultValue 'pb-6'\n   */\n  readonly mainContainerClass = input('pb-6');\n\n  /**\n   * CSS class(es) applied to the detail container. In combination with `containerClass`,\n   * this allows for settings individual padding and margin values on the individual containers.\n   *\n   * @defaultValue 'pb-6'\n   */\n  readonly detailContainerClass = input('pb-6');\n\n  /**\n   * The percentage width of the main container from the overall component width.\n   * Can be a number or `'default'`, which is 32% when {@link resizableParts} is active, otherwise 50%.\n   *\n   * @defaultValue 'default'\n   */\n  readonly mainContainerWidth = model<number | 'default'>('default');\n  /**\n   * Sets the minimal width of the main container in pixel.\n   *\n   * @defaultValue 300\n   */\n  readonly minMainSize = input(300);\n  /**\n   * Sets the minimal width of the detail container in pixel.\n   *\n   * @defaultValue 300\n   */\n  readonly minDetailSize = input(300);\n  /**\n   * An optional stateId to uniquely identify a component instance.\n   * Required for persistence of ui state.\n   */\n  readonly stateId = input<string>();\n\n  /**\n   * The attribute is set to true when the detail area is not visible to ensure that the user\n   * can't tab to details area when it is hidden.\n   */\n  protected preventFocusDetails = false;\n\n  private readonly actualMainContainerWidth = computed(() => {\n    const mainContainerWidth = this.mainContainerWidth();\n    return mainContainerWidth === 'default'\n      ? this.resizableParts()\n        ? 32\n        : 50\n      : mainContainerWidth;\n  });\n\n  protected splitSizes: [number, number] = [\n    this.actualMainContainerWidth(),\n    100 - this.actualMainContainerWidth()\n  ];\n  // The max size to limit the main container in the static flex layout (if less than 50%), otherwise not set.\n  protected maxMainSize: string = this.getMaxSize(0);\n  // The max size to limit the detail container in the static flex layout (if less than 50%), otherwise not set.\n  protected maxDetailSize: string = this.getMaxSize(1);\n\n  protected readonly mainStateId = computed(() => {\n    const stateId = this.stateId();\n    return stateId ? `${stateId}-main` : undefined;\n  });\n\n  protected readonly detailStateId = computed(() => {\n    const stateId = this.stateId();\n    return stateId ? `${stateId}-detail` : undefined;\n  });\n\n  protected readonly animate = signal(false);\n\n  protected readonly opacity = signal('0');\n\n  ngOnChanges(changes: SimpleChanges<this>): void {\n    if (changes.detailsActive) {\n      this.updateDetailsFocusable();\n      this.doAnimation(changes.detailsActive.currentValue);\n    }\n    if (changes.mainContainerWidth || changes.resizableParts) {\n      this.splitSizes = [this.actualMainContainerWidth(), 100 - this.actualMainContainerWidth()];\n      this.maxMainSize = this.getMaxSize(0);\n      this.maxDetailSize = this.getMaxSize(1);\n    }\n  }\n\n  ngOnInit(): void {\n    this.resizeObserver\n      .observe(this.elementRef.nativeElement, 100, true)\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(dimensions => this.determineLayout(dimensions));\n  }\n\n  protected onSplitSizesChange(sizes: number[]): void {\n    this.mainContainerWidth.set(sizes[0]);\n  }\n\n  protected detailsBackClicked(): void {\n    this.detailsActive.set(false);\n    this.doAnimation(false);\n  }\n\n  /**\n   * Get the max size to limit in the static flex layout (if less than 50%), otherwise not set\n   */\n  private getMaxSize(part: 0 | 1): string {\n    return this.resizableParts() ||\n      this.mainContainerWidth() === 'default' ||\n      !this.hasLargeSize ||\n      this.splitSizes[part] > 50\n      ? ''\n      : this.splitSizes[part] + '%';\n  }\n\n  private determineLayout(dimensions: ElementDimensions): void {\n    const newHasLargeSize = dimensions.width >= this.largeLayoutBreakpoint();\n    if (this.hasLargeSize !== newHasLargeSize) {\n      this.hasLargeSize = newHasLargeSize;\n      this.maxMainSize = this.getMaxSize(0);\n      this.maxDetailSize = this.getMaxSize(1);\n      this.updateDetailsFocusable();\n      this.hasLargeSizeChange.emit(this.hasLargeSize);\n      this.changeDetectorRef.markForCheck();\n    }\n    if (this.opacity() === '0') {\n      this.opacity.set('');\n    }\n  }\n\n  private doAnimation(detailsActive: boolean): void {\n    this.animate.set(true);\n    timer(this.animationDuration)\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => this.animate.set(false));\n    this.detailsActive.set(detailsActive);\n  }\n\n  private updateDetailsFocusable(): void {\n    this.preventFocusDetails = !this.hasLargeSize && !this.detailsActive();\n  }\n}\n","@if (resizableParts() && hasLargeSize) {\n  <div class=\"main-detail-layout d-flex flex-column\" [class]=\"containerClass()\">\n    <ng-container *ngTemplateOutlet=\"headingTemplate\" />\n    <si-split\n      class=\"w-100 flex-grow-1\"\n      orientation=\"horizontal\"\n      [stateId]=\"stateId()\"\n      [sizes]=\"splitSizes\"\n      (sizesChange)=\"onSplitSizesChange($event)\"\n    >\n      <si-split-part\n        scale=\"none\"\n        [showCollapseButton]=\"false\"\n        [showHeader]=\"false\"\n        [minSize]=\"minMainSize()\"\n        [stateId]=\"mainStateId()\"\n      >\n        <ng-container *ngTemplateOutlet=\"mainTemplate\" />\n      </si-split-part>\n      <si-split-part\n        scale=\"auto\"\n        [showCollapseButton]=\"false\"\n        [showHeader]=\"false\"\n        [minSize]=\"minDetailSize()\"\n        [stateId]=\"detailStateId()\"\n      >\n        <ng-container *ngTemplateOutlet=\"detailTemplate\" />\n      </si-split-part>\n    </si-split>\n  </div>\n} @else {\n  <div\n    class=\"main-detail-layout d-flex flex-column\"\n    [class]=\"containerClass()\"\n    [class.large-size]=\"hasLargeSize\"\n  >\n    <ng-container *ngTemplateOutlet=\"headingTemplate\" />\n    <div\n      class=\"main-detail-container d-flex flex-grow-1\"\n      [class.details-active]=\"detailsActive() && !hasLargeSize\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          mainTemplate;\n          context: { customClass: hasLargeSize ? 'col-3 ps-0 pe-4' : 'col-6 px-0' }\n        \"\n      />\n      <ng-container\n        *ngTemplateOutlet=\"\n          detailTemplate;\n          context: { customClass: hasLargeSize ? 'col-9 ps-4 pe-0' : 'col-6 px-0' }\n        \"\n      />\n    </div>\n  </div>\n}\n\n<!-- Templates -->\n<ng-template #headingTemplate>\n  @if (heading()) {\n    <div class=\"si-layout-header\">\n      <h2 class=\"si-layout-title si-layout-top-element\" [class.text-truncate]=\"truncateHeading()\">{{\n        heading() | translate\n      }}</h2>\n    </div>\n  }\n</ng-template>\n\n<ng-template #mainTemplate let-customClass=\"customClass\">\n  <div\n    class=\"main-container d-flex flex-column\"\n    [class]=\"[mainContainerClass(), customClass ? customClass : '']\"\n    [style.max-inline-size]=\"maxMainSize\"\n  >\n    <div class=\"main-search-actions d-flex align-items-center\">\n      <ng-content select=\"[slot=mainSearch]\" />\n      <ng-content select=\"[slot=mainActions]\" />\n    </div>\n    <div class=\"main-data-container d-flex\">\n      <ng-content select=\"[slot=mainData]\" />\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #detailTemplate let-customClass=\"customClass\">\n  <div\n    class=\"detail-container d-flex flex-column\"\n    [class]=\"[detailContainerClass(), customClass ? customClass : '']\"\n    [style.max-inline-size]=\"maxDetailSize\"\n    [attr.inert]=\"preventFocusDetails ? '' : null\"\n  >\n    <div class=\"detail-heading-actions d-flex align-items-center\">\n      @if (!this.hasLargeSize && !this.hideBackButton()) {\n        <button type=\"button\" class=\"btn btn-circle btn-secondary\" (click)=\"detailsBackClicked()\">\n          <si-icon [icon]=\"icons.elementBack\" />\n          <span class=\"visually-hidden\">{{ detailsBackButtonText() | translate }}</span>\n        </button>\n      }\n      @if (detailsHeading()) {\n        <span class=\"detail-heading si-h4 me-auto ms-6 my-auto text-truncate\">{{\n          detailsHeading() | translate\n        }}</span>\n      }\n      <ng-content select=\"[slot=detailActions]\" />\n    </div>\n    <ng-content select=\"[slot=details]\" />\n  </div>\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiMainDetailContainerComponent } from './si-main-detail-container.component';\n\n@NgModule({\n  imports: [SiMainDetailContainerComponent],\n  exports: [SiMainDetailContainerComponent]\n})\nexport class SiMainDetailContainerModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-main-detail-container.component';\nexport * from './si-main-detail-container.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"siemens-element-ng-main-detail-container.mjs","sources":["../../../../projects/element-ng/main-detail-container/si-main-detail-container.component.ts","../../../../projects/element-ng/main-detail-container/si-main-detail-container.component.html","../../../../projects/element-ng/main-detail-container/si-main-detail-container.module.ts","../../../../projects/element-ng/main-detail-container/index.ts","../../../../projects/element-ng/main-detail-container/siemens-element-ng-main-detail-container.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectorRef,\n  Component,\n  computed,\n  DestroyRef,\n  ElementRef,\n  inject,\n  input,\n  model,\n  OnChanges,\n  OnInit,\n  output,\n  signal,\n  SimpleChanges,\n  viewChild\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { elementBack } from '@siemens/element-icons';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport {\n  BOOTSTRAP_BREAKPOINTS,\n  ElementDimensions,\n  ResizeObserverService\n} from '@siemens/element-ng/resize-observer';\nimport { SiSplitComponent, SiSplitPartComponent, SplitUnit } from '@siemens/element-ng/split';\nimport { SiTranslatePipe, t, TranslatableString } from '@siemens/element-translate-ng/translate';\nimport { timer } from 'rxjs';\n\n@Component({\n  selector: 'si-main-detail-container',\n  imports: [\n    NgTemplateOutlet,\n    SiSplitComponent,\n    SiSplitPartComponent,\n    SiTranslatePipe,\n    SiIconComponent\n  ],\n  templateUrl: './si-main-detail-container.component.html',\n  styleUrl: './si-main-detail-container.component.scss',\n  host: {\n    class: 'si-layout-inner',\n    '[class.animate]': 'animate()',\n    '[style.opacity]': 'opacity()'\n  }\n})\nexport class SiMainDetailContainerComponent implements OnInit, OnChanges {\n  protected readonly icons = addIcons({ elementBack });\n\n  private readonly animationDuration = 500;\n  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly resizeObserver = inject(ResizeObserverService);\n  private readonly changeDetectorRef = inject(ChangeDetectorRef);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly splitElement = viewChild('splitElement', { read: ElementRef });\n  private readonly mainSplitPart = viewChild('mainSplitPart', { read: SiSplitPartComponent });\n\n  /**\n   * A numeric value defining the minimum width in px, which the container needs\n   * to be displayed in its large layout. Whenever smaller than\n   * this threshold, the small layout will be used. Default is\n   * value is BOOTSTRAP_BREAKPOINTS.mdMinimum.\n   *\n   * @defaultValue BOOTSTRAP_BREAKPOINTS.mdMinimum\n   */\n  readonly largeLayoutBreakpoint = input(BOOTSTRAP_BREAKPOINTS.mdMinimum);\n\n  /**\n   * Whether the main-detail layout component has a large size or not,\n   * `true` if the container´s width matches or exceeds the `largeLayoutBreakpoint`.\n   */\n  hasLargeSize!: boolean;\n\n  /**\n   * Emits whether the components size is large enough to display\n   * main and details views next to each other or not.\n   */\n  readonly hasLargeSizeChange = output<boolean>();\n\n  /**\n   * Whether the details are currently active or not, mostly relevant in the\n   * responsive scenario when the viewport only shows either the main or the detail.\n   *\n   * @defaultValue false\n   */\n  readonly detailsActive = model(false);\n\n  /**\n   * The heading of the main-detail layout component, usually a page heading.\n   *\n   * @defaultValue ''\n   */\n  readonly heading = input<TranslatableString>('');\n\n  /**\n   * Whether the heading should be truncated (single line) or not.\n   * Default value is `false`.\n   *\n   * @defaultValue false\n   */\n  readonly truncateHeading = input(false, { transform: booleanAttribute });\n\n  /**\n   * The heading of the detail area.\n   *\n   * @defaultValue ''\n   */\n  readonly detailsHeading = input<TranslatableString>('');\n\n  /**\n   * Whether the main and detail parts should be resizable by a splitter or not.\n   * This is only supported in the 'large' scenario (when `hasLargeSize` is `true`).\n   * Default value is `false`.\n   *\n   * @defaultValue false\n   */\n  readonly resizableParts = input(false, { transform: booleanAttribute });\n\n  /**\n   * You can hide the back button in the mobile view by setting true. Required\n   * in add, edit workflows on mobile sizes. During add or edit, the back button\n   * should be hidden. Default value is `false`.\n   *\n   * @defaultValue false\n   */\n  readonly hideBackButton = input(false, { transform: booleanAttribute });\n\n  /**\n   * Details back button text. Required for a11y.\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_MAIN_DETAIL_CONTAINER.BACK:Back`)\n   * ```\n   */\n  readonly detailsBackButtonText = input(t(() => $localize`:@@SI_MAIN_DETAIL_CONTAINER.BACK:Back`));\n\n  /**\n   * CSS class(es) applied to the outermost container. Per default, Bootstrap classes\n   * to handle responsive paddings are applied: `px-6 pt-6 px-md-9`.\n   *\n   * @defaultValue 'px-6 pt-6 px-md-9'\n   */\n  readonly containerClass = input('px-6 pt-6 px-md-9');\n\n  /**\n   * CSS class(es) applied to the main container. In combination with `containerClass`,\n   * this allows for settings individual padding and margin values on the individual containers.\n   *\n   * @defaultValue 'pb-6'\n   */\n  readonly mainContainerClass = input('pb-6');\n\n  /**\n   * CSS class(es) applied to the detail container. In combination with `containerClass`,\n   * this allows for settings individual padding and margin values on the individual containers.\n   *\n   * @defaultValue 'pb-6'\n   */\n  readonly detailContainerClass = input('pb-6');\n\n  /**\n   * Unit used for the main split part when {@link resizableParts} is enabled.\n   *\n   * @defaultValue 'px'\n   */\n  readonly mainContainerWidthUnit = input<SplitUnit>('px');\n\n  /**\n   * The size of the main container. When {@link resizableParts} is enabled,\n   * the value is interpreted using {@link mainContainerWidthUnit} and updates as the splitter is moved.\n   * With `mainContainerWidthUnit=\"fr\"`, numeric values must be from `0` to `100` (inclusive).\n   * The main and detail fractional weights are the value and `100 - value`;\n   * out-of-range values fall back to `32` and `68`.\n   * In the static layout, numeric values represent a percentage from `0` to `100`\n   * (inclusive); out-of-range values leave both containers without max-size constraints.\n   * Pixel widths are not limited to the `0` to `100` range.\n   *\n   * With `'default'`, resizable pixel layouts use {@link minMainSize}, resizable fractional\n   * layouts use main and detail weights of `32` and `68`, and static layouts use `50%`.\n   *\n   * @defaultValue 'default'\n   */\n  readonly mainContainerWidth = model<number | 'default'>('default');\n  /**\n   * Sets the minimal width of the main container in pixel.\n   *\n   * @defaultValue 300\n   */\n  readonly minMainSize = input(300);\n  /**\n   * Sets the minimal width of the detail container in pixel.\n   *\n   * @defaultValue 300\n   */\n  readonly minDetailSize = input(300);\n  /**\n   * An optional stateId to uniquely identify a component instance.\n   * Required for persistence of ui state.\n   */\n  readonly stateId = input<string>();\n\n  /**\n   * The attribute is set to true when the detail area is not visible to ensure that the user\n   * can't tab to details area when it is hidden.\n   */\n  protected preventFocusDetails = false;\n\n  private readonly actualMainContainerWidth = computed(() => {\n    const mainContainerWidth = this.mainContainerWidth();\n    if (mainContainerWidth !== 'default') {\n      return mainContainerWidth;\n    }\n\n    if (!this.resizableParts()) {\n      return 50;\n    }\n\n    return this.mainContainerWidthUnit() === 'px' ? this.minMainSize() : 32;\n  });\n\n  protected splitSizes: [number, number] = this.getSplitSizes();\n  // The max size to limit the main container in the static flex layout (if less than 50%), otherwise not set.\n  protected maxMainSize: string = this.getMaxSize(0);\n  // The max size to limit the detail container in the static flex layout (if less than 50%), otherwise not set.\n  protected maxDetailSize: string = this.getMaxSize(1);\n\n  protected readonly mainStateId = computed(() => {\n    const stateId = this.stateId();\n    return stateId ? `${stateId}-main` : undefined;\n  });\n\n  protected readonly detailStateId = computed(() => {\n    const stateId = this.stateId();\n    return stateId ? `${stateId}-detail` : undefined;\n  });\n\n  protected readonly animate = signal(false);\n\n  protected readonly opacity = signal('0');\n\n  ngOnChanges(changes: SimpleChanges<this>): void {\n    if (changes.detailsActive) {\n      this.updateDetailsFocusable();\n      this.doAnimation(changes.detailsActive.currentValue);\n    }\n    if (\n      changes.mainContainerWidth ||\n      changes.resizableParts ||\n      changes.mainContainerWidthUnit ||\n      changes.minMainSize\n    ) {\n      this.splitSizes = this.getSplitSizes();\n      this.maxMainSize = this.getMaxSize(0);\n      this.maxDetailSize = this.getMaxSize(1);\n    }\n  }\n\n  ngOnInit(): void {\n    this.resizeObserver\n      .observe(this.elementRef.nativeElement, 100, true)\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(dimensions => this.determineLayout(dimensions));\n  }\n\n  protected onSplitSizesChange(sizes: number[]): void {\n    if (this.mainContainerWidthUnit() === 'px') {\n      this.mainContainerWidth.set(this.getMainSizePx(sizes[0]));\n    } else {\n      this.mainContainerWidth.set(sizes[0]);\n    }\n  }\n\n  protected detailsBackClicked(): void {\n    this.detailsActive.set(false);\n    this.doAnimation(false);\n  }\n\n  /**\n   * Get the max size to limit in the static flex layout (if less than 50%), otherwise not set\n   */\n  private getMaxSize(part: 0 | 1): string {\n    const mainContainerWidth = this.mainContainerWidth();\n    if (\n      this.resizableParts() ||\n      mainContainerWidth === 'default' ||\n      !this.hasLargeSize ||\n      mainContainerWidth < 0 ||\n      mainContainerWidth > 100\n    ) {\n      return '';\n    }\n\n    const size = part === 0 ? mainContainerWidth : 100 - mainContainerWidth;\n    return size > 50 ? '' : size + '%';\n  }\n\n  private getSplitSizes(): [number, number] {\n    const mainSize = this.actualMainContainerWidth();\n    if (!this.resizableParts()) {\n      return mainSize >= 0 && mainSize <= 100 ? [mainSize, 100 - mainSize] : [50, 50];\n    }\n\n    if (this.mainContainerWidthUnit() === 'fr') {\n      return mainSize >= 0 && mainSize <= 100 ? [mainSize, 100 - mainSize] : [32, 68];\n    }\n\n    // The main size is in pixels; the detail part fills the remaining space with 1fr.\n    return [mainSize, 1];\n  }\n\n  private getMainSizePx(fallbackPercentage: number): number {\n    const mainPartSize = this.mainSplitPart()?.expandedSize();\n    if (mainPartSize !== undefined) {\n      return Math.round(mainPartSize);\n    }\n\n    const splitWidth = this.splitElement()?.nativeElement.getBoundingClientRect().width;\n    return splitWidth ? Math.round((splitWidth * fallbackPercentage) / 100) : this.minMainSize();\n  }\n\n  private determineLayout(dimensions: ElementDimensions): void {\n    const newHasLargeSize = dimensions.width >= this.largeLayoutBreakpoint();\n    if (this.hasLargeSize !== newHasLargeSize) {\n      this.hasLargeSize = newHasLargeSize;\n      this.maxMainSize = this.getMaxSize(0);\n      this.maxDetailSize = this.getMaxSize(1);\n      this.updateDetailsFocusable();\n      this.hasLargeSizeChange.emit(this.hasLargeSize);\n      this.changeDetectorRef.markForCheck();\n    }\n    if (this.opacity() === '0') {\n      this.opacity.set('');\n    }\n  }\n\n  private doAnimation(detailsActive: boolean): void {\n    this.animate.set(true);\n    timer(this.animationDuration)\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => this.animate.set(false));\n    this.detailsActive.set(detailsActive);\n  }\n\n  private updateDetailsFocusable(): void {\n    this.preventFocusDetails = !this.hasLargeSize && !this.detailsActive();\n  }\n}\n","@if (resizableParts() && hasLargeSize) {\n  <div class=\"main-detail-layout d-flex flex-column\" [class]=\"containerClass()\">\n    <ng-container *ngTemplateOutlet=\"headingTemplate\" />\n    <si-split\n      #splitElement\n      class=\"w-100 flex-grow-1\"\n      orientation=\"horizontal\"\n      [stateId]=\"stateId()\"\n      (sizesChange)=\"onSplitSizesChange($event)\"\n    >\n      <si-split-part\n        #mainSplitPart\n        [unit]=\"mainContainerWidthUnit()\"\n        [size]=\"splitSizes[0]\"\n        [showHeader]=\"false\"\n        [minSize]=\"minMainSize()\"\n        [stateId]=\"mainStateId()\"\n      >\n        <ng-container *ngTemplateOutlet=\"mainTemplate\" />\n      </si-split-part>\n      <si-split-part\n        unit=\"fr\"\n        [size]=\"splitSizes[1]\"\n        [showHeader]=\"false\"\n        [minSize]=\"minDetailSize()\"\n        [stateId]=\"detailStateId()\"\n      >\n        <ng-container *ngTemplateOutlet=\"detailTemplate\" />\n      </si-split-part>\n    </si-split>\n  </div>\n} @else {\n  <div\n    class=\"main-detail-layout d-flex flex-column\"\n    [class]=\"containerClass()\"\n    [class.large-size]=\"hasLargeSize\"\n  >\n    <ng-container *ngTemplateOutlet=\"headingTemplate\" />\n    <div\n      class=\"main-detail-container d-flex flex-grow-1\"\n      [class.details-active]=\"detailsActive() && !hasLargeSize\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          mainTemplate;\n          context: { customClass: hasLargeSize ? 'col-3 ps-0 pe-4' : 'col-6 px-0' }\n        \"\n      />\n      <ng-container\n        *ngTemplateOutlet=\"\n          detailTemplate;\n          context: { customClass: hasLargeSize ? 'col-9 ps-4 pe-0' : 'col-6 px-0' }\n        \"\n      />\n    </div>\n  </div>\n}\n\n<!-- Templates -->\n<ng-template #headingTemplate>\n  @if (heading()) {\n    <div class=\"si-layout-header\">\n      <h2 class=\"si-layout-title si-layout-top-element\" [class.text-truncate]=\"truncateHeading()\">{{\n        heading() | translate\n      }}</h2>\n    </div>\n  }\n</ng-template>\n\n<ng-template #mainTemplate let-customClass=\"customClass\">\n  <div\n    class=\"main-container d-flex flex-column\"\n    [class]=\"[mainContainerClass(), customClass ? customClass : '']\"\n    [style.max-inline-size]=\"maxMainSize\"\n  >\n    <div class=\"main-search-actions d-flex align-items-center\">\n      <ng-content select=\"[slot=mainSearch]\" />\n      <ng-content select=\"[slot=mainActions]\" />\n    </div>\n    <div class=\"main-data-container d-flex\">\n      <ng-content select=\"[slot=mainData]\" />\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #detailTemplate let-customClass=\"customClass\">\n  <div\n    class=\"detail-container d-flex flex-column\"\n    [class]=\"[detailContainerClass(), customClass ? customClass : '']\"\n    [style.max-inline-size]=\"maxDetailSize\"\n    [attr.inert]=\"preventFocusDetails ? '' : null\"\n  >\n    <div class=\"detail-heading-actions d-flex align-items-center\">\n      @if (!this.hasLargeSize && !this.hideBackButton()) {\n        <button type=\"button\" class=\"btn btn-circle btn-secondary\" (click)=\"detailsBackClicked()\">\n          <si-icon [icon]=\"icons.elementBack\" />\n          <span class=\"visually-hidden\">{{ detailsBackButtonText() | translate }}</span>\n        </button>\n      }\n      @if (detailsHeading()) {\n        <span class=\"detail-heading si-h4 me-auto ms-6 my-auto text-truncate\">{{\n          detailsHeading() | translate\n        }}</span>\n      }\n      <ng-content select=\"[slot=detailActions]\" />\n    </div>\n    <ng-content select=\"[slot=details]\" />\n  </div>\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiMainDetailContainerComponent } from './si-main-detail-container.component';\n\n@NgModule({\n  imports: [SiMainDetailContainerComponent],\n  exports: [SiMainDetailContainerComponent]\n})\nexport class SiMainDetailContainerModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-main-detail-container.component';\nexport * from './si-main-detail-container.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,401 @@
+import * as i0 from '@angular/core';
+import { assertInInjectionContext, computed, input, output, Component, signal } from '@angular/core';
+import { injectIsDarkTheme } from '@siemens/element-ng/theme';
+import { siMapStyle } from '@siemens/map-styles/common';
+import { ClusterPointDirective, GeoJSONSourceComponent, MarkersForClustersComponent } from '@maplibre/ngx-maplibre-gl';
+import { t, SiTranslatePipe, injectSiTranslateService } from '@siemens/element-translate-ng/translate';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { map } from 'rxjs';
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Creates a signal that returns a {@link StyleSpecification} for MapLibre GL based on the current
+ * Element theme. The signal automatically updates when the theme switches between light and dark.
+ *
+ * @remarks
+ * **Must be called in an Angular injection context** (e.g. inside a constructor, field initializer,
+ * or a function called from one). Calling this function outside of an injection context will throw
+ * an `assertInInjectionContext` error.
+ *
+ * @experimental
+ *
+ * @param key - The MapTiler API key used to fetch tiles, glyphs, and sprites
+ * @returns A signal that provides the current {@link StyleSpecification} based on the active theme
+ * @throws When called outside of an Angular injection context
+ */
+const injectSiMapStyle = (key) => {
+    assertInInjectionContext(injectSiMapStyle);
+    const isDark = injectIsDarkTheme();
+    return computed(() => {
+        return siMapStyle(key, isDark());
+    });
+};
+
+const MARKER_STATUS_COLORS = {
+    info: 'var(--si-sys-background-information)',
+    success: 'var(--si-sys-background-success)',
+    warning: 'var(--si-sys-background-warning)',
+    danger: 'var(--si-sys-background-danger)',
+    caution: 'var(--si-sys-background-caution)',
+    critical: 'var(--si-sys-background-critical)',
+    default: 'var(--si-sys-background-accent)',
+    unknown: 'var(--si-sys-background-neutral)'
+};
+// Keep the four-color status palette stable for numeric group IDs.
+const GROUP_STATUS_COLORS = [
+    MARKER_STATUS_COLORS.info,
+    MARKER_STATUS_COLORS.success,
+    MARKER_STATUS_COLORS.warning,
+    MARKER_STATUS_COLORS.danger
+];
+const ELEMENT_COLORS = [
+    'var(--si-sys-data-sequential-red-2)',
+    'var(--si-sys-data-sequential-orange-4)',
+    'var(--si-sys-background-caution)',
+    'var(--si-sys-data-sequential-green-2)',
+    'var(--si-sys-background-information)',
+    'var(--si-sys-data-categorial-1)',
+    'var(--si-sys-data-categorial-17)'
+];
+const UNGROUPED_COLOR = 'var(--si-sys-background-accent)';
+const SEPARATOR_COLOR = 'var(--si-sys-background-1)';
+const CHART_FRAGMENTS = 20;
+const SEPARATOR_DEGREES = 2;
+/** @internal */
+const createClusterConfiguration = (groupColors, groupProperty, statusProperty) => {
+    const group = ['to-number', ['get', groupProperty], 0];
+    let buckets;
+    if (typeof groupColors === 'string') {
+        const colors = groupColors === 'status' ? GROUP_STATUS_COLORS : ELEMENT_COLORS;
+        buckets = colors.map((color, index) => ({
+            color,
+            mapExpression: [
+                'case',
+                ['all', ['>', group, 0], ['==', ['%', ['-', group, 1], colors.length], index]],
+                1,
+                0
+            ],
+            property: `si_group_${index}`
+        }));
+    }
+    else {
+        buckets = Object.entries(groupColors)
+            .map(([groupId, color]) => ({ color, groupId: Number(groupId) }))
+            .filter(bucket => Number.isInteger(bucket.groupId) && bucket.groupId > 0)
+            .sort((a, b) => a.groupId - b.groupId)
+            .map(bucket => ({
+            color: bucket.color,
+            mapExpression: ['case', ['==', group, bucket.groupId], 1, 0],
+            property: `si_group_${bucket.groupId}`
+        }));
+    }
+    if (statusProperty !== undefined) {
+        for (const [status, color] of Object.entries(MARKER_STATUS_COLORS)) {
+            buckets.push({
+                color,
+                mapExpression: [
+                    'case',
+                    ['all', ['==', group, 0], ['==', ['get', statusProperty], status]],
+                    1,
+                    0
+                ],
+                property: `si_status_${status}`
+            });
+        }
+    }
+    return {
+        clusterProperties: Object.fromEntries(buckets.map(bucket => [bucket.property, ['+', bucket.mapExpression]])),
+        segments: buckets.map(({ color, property }) => ({ color, property }))
+    };
+};
+/** @internal */
+const createClusterGradient = (feature, configuredSegments) => {
+    const count = getNumberProperty(feature, 'point_count');
+    const segments = configuredSegments
+        .map(segment => ({
+        color: segment.color,
+        count: getNumberProperty(feature, segment.property)
+    }))
+        .filter(segment => segment.count > 0);
+    const groupedCount = segments.reduce((sum, segment) => sum + segment.count, 0);
+    if (groupedCount < count) {
+        segments.push({ color: UNGROUPED_COLOR, count: count - groupedCount });
+    }
+    if (!segments.length) {
+        return UNGROUPED_COLOR;
+    }
+    const fragmentSize = count / CHART_FRAGMENTS;
+    const weightedSegments = segments.map(segment => ({
+        ...segment,
+        weight: Math.max(1, segment.count / fragmentSize)
+    }));
+    const totalWeight = weightedSegments.reduce((sum, segment) => sum + segment.weight, 0);
+    const separator = weightedSegments.length > 1 ? Math.min(SEPARATOR_DEGREES, 180 / totalWeight) : 0;
+    let position = 0;
+    const stops = [];
+    for (const segment of weightedSegments) {
+        const start = position;
+        position += (segment.weight / totalWeight) * 360;
+        if (separator) {
+            stops.push(`${SEPARATOR_COLOR} ${start}deg ${start + separator / 2}deg`, `${segment.color} ${start + separator / 2}deg ${position - separator / 2}deg`, `${SEPARATOR_COLOR} ${position - separator / 2}deg ${position}deg`);
+        }
+        else {
+            stops.push(`${segment.color} ${start}deg ${position}deg`);
+        }
+    }
+    return `conic-gradient(from -90deg, ${stops.join(', ')})`;
+};
+const getNumberProperty = (feature, property) => {
+    const value = feature.properties?.[property];
+    return typeof value === 'number' ? value : Number(value) || 0;
+};
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Renders an interactive marker for a MapLibre cluster.
+ *
+ * The marker displays the total number of clustered points and visualizes their group distribution
+ * as colored segments. It is created internally by `SiClusterSourceComponent`.
+ *
+ * @internal
+ */
+class SiClusterMarkerComponent {
+    /** Cluster feature represented by this marker. */
+    feature = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "feature" }] : /* istanbul ignore next */ []));
+    /** Colored segments that represent the grouped points in the cluster. */
+    segments = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "segments" }] : /* istanbul ignore next */ []));
+    /** Emits when the marker is activated. */
+    markerClick = output();
+    count = computed(() => Number(this.feature().properties?.point_count) || 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    countLabel = computed(() => (this.count() > 99 ? '99+' : `${this.count()}`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "countLabel" }] : /* istanbul ignore next */ []));
+    clusterLabel = t(() => $localize `:@@SI_MAP_CLUSTER.LABEL:Cluster with {{count}} locations`);
+    gradient = computed(() => createClusterGradient(this.feature(), this.segments()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gradient" }] : /* istanbul ignore next */ []));
+    onClick(event) {
+        event.stopPropagation();
+        this.markerClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiClusterMarkerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: SiClusterMarkerComponent, isStandalone: true, selector: "si-cluster-marker", inputs: { feature: { classPropertyName: "feature", publicName: "feature", isSignal: true, isRequired: true, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { markerClick: "markerClick" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"cluster-marker\"\n  [attr.aria-label]=\"clusterLabel | translate: { count: count() }\"\n  [style.--si-cluster-gradient]=\"gradient()\"\n  (click)=\"onClick($event)\"\n>\n  <span class=\"cluster-count\" aria-hidden=\"true\">{{ countLabel() }}</span>\n</button>\n", styles: [":host{display:block}.cluster-marker{position:relative;display:flex;inline-size:46px;block-size:46px;align-items:center;justify-content:center;padding:0;border:3px solid var(--si-sys-background-1);border-radius:50%;background:var(--si-cluster-gradient);color:var(--si-sys-text-primary);cursor:pointer}.cluster-marker:before{position:absolute;inset:20%;border-radius:50%;background:var(--si-sys-background-1);content:\"\"}.cluster-marker:focus-visible{outline:var(--element-button-focus-width) solid var(--si-sys-effects-focus);outline-offset:var(--element-button-focus-overlay-width)}.cluster-count{position:relative;font-family:SiemensSans Pro VF,SiemensSans Pro,helvetica,arial,sans-serif;font-size:13px;font-weight:700;line-height:1}\n"], dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiClusterMarkerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-cluster-marker', imports: [SiTranslatePipe], template: "<button\n  type=\"button\"\n  class=\"cluster-marker\"\n  [attr.aria-label]=\"clusterLabel | translate: { count: count() }\"\n  [style.--si-cluster-gradient]=\"gradient()\"\n  (click)=\"onClick($event)\"\n>\n  <span class=\"cluster-count\" aria-hidden=\"true\">{{ countLabel() }}</span>\n</button>\n", styles: [":host{display:block}.cluster-marker{position:relative;display:flex;inline-size:46px;block-size:46px;align-items:center;justify-content:center;padding:0;border:3px solid var(--si-sys-background-1);border-radius:50%;background:var(--si-cluster-gradient);color:var(--si-sys-text-primary);cursor:pointer}.cluster-marker:before{position:absolute;inset:20%;border-radius:50%;background:var(--si-sys-background-1);content:\"\"}.cluster-marker:focus-visible{outline:var(--element-button-focus-width) solid var(--si-sys-effects-focus);outline-offset:var(--element-button-focus-overlay-width)}.cluster-count{position:relative;font-family:SiemensSans Pro VF,SiemensSans Pro,helvetica,arial,sans-serif;font-size:13px;font-weight:700;line-height:1}\n"] }]
+        }], propDecorators: { feature: [{ type: i0.Input, args: [{ isSignal: true, alias: "feature", required: true }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], markerClick: [{ type: i0.Output, args: ["markerClick"] }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+const EMPTY_DATA = {
+    type: 'FeatureCollection',
+    features: []
+};
+/**
+ * Adds a clustered GeoJSON source to a MapLibre map and renders interactive cluster markers.
+ *
+ * Cluster markers display the number of contained points and their distribution by group. Status
+ * segments can be enabled for ungrouped points by providing `statusProperty`. Render individual,
+ * unclustered points separately with `mgl-markers-for-clusters` using the same source ID.
+ * Positive numeric groups always take precedence over status segments. Status segments apply only
+ * when the normalized group value is zero; points without a matching group or status use the
+ * ungrouped color.
+ *
+ * @example Basic usage
+ * ```html
+ * <mgl-map [mapStyle]="mapStyle()">
+ *   <si-cluster-source
+ *     sourceId="locations"
+ *     statusProperty="status"
+ *     [data]="locations"
+ *     (clusterClick)="onClusterClick($event)"
+ *   />
+ *
+ *   <mgl-markers-for-clusters source="locations">
+ *     <ng-template let-feature mglPoint>
+ *       <si-status-marker
+ *         [status]="feature.properties?.status"
+ *       />
+ *     </ng-template>
+ *   </mgl-markers-for-clusters>
+ * </mgl-map>
+ * ```
+ *
+ * @experimental
+ */
+class SiClusterSourceComponent {
+    /** ID used to register the generated GeoJSON source in MapLibre. */
+    sourceId = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourceId" }] : /* istanbul ignore next */ []));
+    /**
+     * Point feature collection to cluster.
+     * @defaultValue EMPTY_DATA
+     */
+    data = input(EMPTY_DATA, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    /**
+     * Feature property containing the positive numeric group ID.
+     * @defaultValue 'group'
+     */
+    groupProperty = input('group', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupProperty" }] : /* istanbul ignore next */ []));
+    /**
+     * Built-in palette or exact colors indexed by group ID. The built-in `'status'` palette contains
+     * four colors for numeric groups and is separate from status-based bucketing.
+     * @defaultValue 'status'
+     */
+    groupColors = input('status', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupColors" }] : /* istanbul ignore next */ []));
+    /**
+     * Top-level feature property containing a {@link MarkerStatus} value. Status bucketing is
+     * disabled by default and only applies when the normalized group value is zero. Missing or
+     * unsupported status values, and groups that do not match a configured bucket, use the ungrouped
+     * color. Built-in colors match `SiStatusMarkerComponent`, with `default` using accent and
+     * `unknown` using neutral.
+     * @defaultValue undefined
+     * @see https://maplibre.org/maplibre-style-spec/sources/#clusterproperties
+     */
+    statusProperty = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "statusProperty" }] : /* istanbul ignore next */ []));
+    /**
+     * Cluster radius in pixels.
+     * @defaultValue 50
+     */
+    clusterRadius = input(50, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clusterRadius" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum zoom at which points are clustered.
+     * @defaultValue undefined
+     */
+    clusterMaxZoom = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clusterMaxZoom" }] : /* istanbul ignore next */ []));
+    /**
+     * Minimum number of points required to form a cluster.
+     * @defaultValue 2
+     */
+    clusterMinPoints = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clusterMinPoints" }] : /* istanbul ignore next */ []));
+    /** Emits when a cluster marker is activated. */
+    clusterClick = output();
+    clusterConfiguration = computed(() => createClusterConfiguration(this.groupColors(), this.groupProperty(), this.statusProperty()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clusterConfiguration" }] : /* istanbul ignore next */ []));
+    /** Stores selection for the projected cluster-popover integration. */
+    selectedCluster = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedCluster" }] : /* istanbul ignore next */ []));
+    async selectCluster(feature) {
+        this.clusterClick.emit(feature);
+        this.selectedCluster.set({ ...feature, geometry: feature.geometry });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiClusterSourceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: SiClusterSourceComponent, isStandalone: true, selector: "si-cluster-source", inputs: { sourceId: { classPropertyName: "sourceId", publicName: "sourceId", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, groupProperty: { classPropertyName: "groupProperty", publicName: "groupProperty", isSignal: true, isRequired: false, transformFunction: null }, groupColors: { classPropertyName: "groupColors", publicName: "groupColors", isSignal: true, isRequired: false, transformFunction: null }, statusProperty: { classPropertyName: "statusProperty", publicName: "statusProperty", isSignal: true, isRequired: false, transformFunction: null }, clusterRadius: { classPropertyName: "clusterRadius", publicName: "clusterRadius", isSignal: true, isRequired: false, transformFunction: null }, clusterMaxZoom: { classPropertyName: "clusterMaxZoom", publicName: "clusterMaxZoom", isSignal: true, isRequired: false, transformFunction: null }, clusterMinPoints: { classPropertyName: "clusterMinPoints", publicName: "clusterMinPoints", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clusterClick: "clusterClick" }, ngImport: i0, template: "<mgl-geojson-source\n  #source\n  [id]=\"sourceId()\"\n  [data]=\"data()\"\n  [cluster]=\"true\"\n  [clusterRadius]=\"clusterRadius()\"\n  [clusterMaxZoom]=\"clusterMaxZoom()\"\n  [clusterMinPoints]=\"clusterMinPoints()\"\n  [clusterProperties]=\"clusterConfiguration().clusterProperties\"\n/>\n\n<mgl-markers-for-clusters [source]=\"sourceId()\">\n  <ng-template let-feature mglClusterPoint>\n    <si-cluster-marker\n      [feature]=\"feature\"\n      [segments]=\"clusterConfiguration().segments\"\n      (markerClick)=\"selectCluster(feature)\"\n    />\n  </ng-template>\n</mgl-markers-for-clusters>\n\n<ng-content select=\"si-cluster-popover,[siClusterPopoverOutlet]\" />\n", dependencies: [{ kind: "directive", type: ClusterPointDirective, selector: "ng-template[mglClusterPoint]" }, { kind: "component", type: GeoJSONSourceComponent, selector: "mgl-geojson-source", inputs: ["data", "maxzoom", "attribution", "buffer", "tolerance", "cluster", "clusterRadius", "clusterMaxZoom", "clusterMinPoints", "clusterProperties", "lineMetrics", "generateId", "promoteId", "filter"] }, { kind: "component", type: MarkersForClustersComponent, selector: "mgl-markers-for-clusters", inputs: ["source"] }, { kind: "component", type: SiClusterMarkerComponent, selector: "si-cluster-marker", inputs: ["feature", "segments"], outputs: ["markerClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiClusterSourceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-cluster-source', imports: [
+                        ClusterPointDirective,
+                        GeoJSONSourceComponent,
+                        MarkersForClustersComponent,
+                        SiClusterMarkerComponent
+                    ], template: "<mgl-geojson-source\n  #source\n  [id]=\"sourceId()\"\n  [data]=\"data()\"\n  [cluster]=\"true\"\n  [clusterRadius]=\"clusterRadius()\"\n  [clusterMaxZoom]=\"clusterMaxZoom()\"\n  [clusterMinPoints]=\"clusterMinPoints()\"\n  [clusterProperties]=\"clusterConfiguration().clusterProperties\"\n/>\n\n<mgl-markers-for-clusters [source]=\"sourceId()\">\n  <ng-template let-feature mglClusterPoint>\n    <si-cluster-marker\n      [feature]=\"feature\"\n      [segments]=\"clusterConfiguration().segments\"\n      (markerClick)=\"selectCluster(feature)\"\n    />\n  </ng-template>\n</mgl-markers-for-clusters>\n\n<ng-content select=\"si-cluster-popover,[siClusterPopoverOutlet]\" />\n" }]
+        }], propDecorators: { sourceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceId", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], groupProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupProperty", required: false }] }], groupColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupColors", required: false }] }], statusProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusProperty", required: false }] }], clusterRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "clusterRadius", required: false }] }], clusterMaxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "clusterMaxZoom", required: false }] }], clusterMinPoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "clusterMinPoints", required: false }] }], clusterClick: [{ type: i0.Output, args: ["clusterClick"] }] } });
+
+const createDefaultLocale = () => ({
+    'AttributionControl.ToggleAttribution': t(() => $localize `:@@SI_MAP.TOGGLE_ATTRIBUTION:Toggle attribution`),
+    'AttributionControl.MapFeedback': t(() => $localize `:@@SI_MAP.MAP_FEEDBACK:Map feedback`),
+    'FullscreenControl.Enter': t(() => $localize `:@@SI_MAP.FULLSCREEN_ENTER:Enter full screen`),
+    'FullscreenControl.Exit': t(() => $localize `:@@SI_MAP.FULLSCREEN_EXIT:Exit full screen`),
+    'GeolocateControl.FindMyLocation': t(() => $localize `:@@SI_MAP.FIND_MY_LOCATION:Find my location`),
+    'GeolocateControl.LocationNotAvailable': t(() => $localize `:@@SI_MAP.LOCATION_NOT_AVAILABLE:Location not available`),
+    'LogoControl.Title': t(() => $localize `:@@SI_MAP.LOGO_TITLE:MapLibre logo`),
+    'Map.Title': t(() => $localize `:@@SI_MAP.MAP_TITLE:Map`),
+    'Marker.Title': t(() => $localize `:@@SI_MAP.MARKER_TITLE:Map marker`),
+    'NavigationControl.ResetBearing': t(() => $localize `:@@SI_MAP.RESET_BEARING:Reset bearing to north`),
+    'NavigationControl.ZoomIn': t(() => $localize `:@@SI_MAP.ZOOM_IN:Zoom in`),
+    'NavigationControl.ZoomOut': t(() => $localize `:@@SI_MAP.ZOOM_OUT:Zoom out`),
+    'Popup.Close': t(() => $localize `:@@SI_MAP.POPUP_CLOSE:Close popup`),
+    'ScaleControl.Feet': t(() => $localize `:@@SI_MAP.SCALE_FEET:ft`),
+    'ScaleControl.Meters': t(() => $localize `:@@SI_MAP.SCALE_METERS:m`),
+    'ScaleControl.Kilometers': t(() => $localize `:@@SI_MAP.SCALE_KILOMETERS:km`),
+    'ScaleControl.Miles': t(() => $localize `:@@SI_MAP.SCALE_MILES:mi`),
+    'ScaleControl.NauticalMiles': t(() => $localize `:@@SI_MAP.SCALE_NAUTICAL_MILES:nm`),
+    'GlobeControl.Enable': t(() => $localize `:@@SI_MAP.GLOBE_ENABLE:Enable globe`),
+    'GlobeControl.Disable': t(() => $localize `:@@SI_MAP.GLOBE_DISABLE:Disable globe`),
+    'TerrainControl.Enable': t(() => $localize `:@@SI_MAP.TERRAIN_ENABLE:Enable terrain`),
+    'TerrainControl.Disable': t(() => $localize `:@@SI_MAP.TERRAIN_DISABLE:Disable terrain`),
+    'CooperativeGesturesHandler.WindowsHelpText': t(() => $localize `:@@SI_MAP.WINDOWS_HELP:Use Ctrl + scroll to zoom the map`),
+    'CooperativeGesturesHandler.MacHelpText': t(() => $localize `:@@SI_MAP.MAC_HELP:Use ⌘ + scroll to zoom the map`),
+    'CooperativeGesturesHandler.MobileHelpText': t(() => $localize `:@@SI_MAP.MOBILE_HELP:Use two fingers to move the map`)
+});
+/**
+ * Provides translated MapLibre locale strings as an Angular signal. The record uses MapLibre's
+ * original locale keys, such as `AttributionControl.ToggleAttribution`, and updates when the
+ * active Element language changes.
+ *
+ * @example
+ * ```ts
+ * @Component({ ... })
+ * export class MapComponent {
+ *   protected readonly mapTranslations = injectSiMapTranslations();
+ * }
+ * ```
+ *
+ * ```html
+ * <mgl-map [locale]="mapTranslations()" />
+ * ```
+ *
+ * @returns A signal containing a MapLibre locale record, for example
+ * `{ 'AttributionControl.ToggleAttribution': 'Toggle attribution' }`.
+ */
+const injectSiMapTranslations = () => {
+    const translateService = injectSiTranslateService();
+    const initialValue = createDefaultLocale();
+    return toSignal(translateService
+        .translateAsync(Object.values(initialValue))
+        .pipe(map(translations => Object.fromEntries(Object.entries(initialValue).map(([key, value]) => [key, translations[value]])))), {
+        initialValue
+    });
+};
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+class SiStatusMarkerComponent {
+    /**
+     * The status of the marker.
+     * @defaultValue 'default'
+     */
+    status = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiStatusMarkerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiStatusMarkerComponent, isStandalone: true, selector: "si-status-marker", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-status": "status() ?? \"default\"" }, classAttribute: "si-status-marker" }, ngImport: i0, template: "<svg viewBox=\"0 0 512 512\" aria-hidden=\"true\" focusable=\"false\">\n  @switch (status()) {\n    @case ('unknown') {\n      <path\n        class=\"icon\"\n        d=\"m256,64c-69.37,0-125.8,56.43-125.8,125.8,0,1.44.04,2.95.12,4.62.46,12.87,2.86,25.46,7.1,37.44,24.76,81.02,105.75,183.3,109.19,187.62,2.28,2.86,5.73,4.52,9.39,4.52s7.11-1.67,9.39-4.52c3.44-4.32,84.44-106.59,109.2-187.62,4.25-11.99,6.64-24.57,7.1-37.41.08-1.51.12-3.07.12-4.64,0-69.37-56.44-125.8-125.81-125.8Zm0,213.81c-48.59,0-87.99-39.4-87.99-88.01s39.4-87.99,87.99-87.99,88.01,39.41,88.01,87.99-39.39,88.01-88.01,88.01Z\"\n      />\n      <path\n        class=\"middle\"\n        d=\"m255.99,277.81c-48.59,0-87.99-39.4-87.99-88.01s39.4-87.99,87.99-87.99,88.01,39.41,88.01,87.99-39.39,88.01-88.01,88.01Z\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m256.04,207.64h0c-5.25,0-9.5-4.25-9.5-9.5v-9.95c0-3.59,1.8-7,4.87-8.86.59-.36,1.07-.56,1.58-.73,5.75-1.99,17.59-8.4,17.59-15.59,0-6.46-4.07-12.24-10.16-14.38-7.91-2.78-16.6,1.39-19.38,9.29-1.74,4.95-7.16,7.55-12.11,5.81-4.95-1.74-7.55-7.17-5.81-12.11,6.26-17.79,25.82-27.17,43.61-20.91,13.69,4.82,22.87,17.8,22.85,32.31,0,16.73-14.98,26.5-24.04,30.88v4.23c0,5.25-4.25,9.5-9.5,9.5h0Z\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m256.09,247h-.18c-7.02,0-12.72-5.73-12.72-12.81,0-7.08,5.69-12.81,12.72-12.81h.18c7.02,0,12.72,5.73,12.72,12.81,0,7.08-5.69,12.81-12.72,12.81Z\"\n      />\n    }\n    @case ('success') {\n      <path\n        class=\"icon\"\n        d=\"m256,64c-69.37,0-125.8,56.43-125.8,125.8,0,1.44.04,2.95.12,4.62.46,12.87,2.86,25.46,7.1,37.44,24.76,81.02,105.75,183.3,109.19,187.62,2.28,2.86,5.73,4.52,9.39,4.52s7.11-1.67,9.39-4.52c3.44-4.32,84.44-106.59,109.2-187.62,4.25-11.99,6.64-24.57,7.1-37.41.08-1.51.12-3.07.12-4.64,0-69.37-56.44-125.8-125.81-125.8Zm0,213.81c-48.59,0-87.99-39.4-87.99-88.01s39.4-87.99,87.99-87.99,88.01,39.41,88.01,87.99-39.39,88.01-88.01,88.01Z\"\n      />\n      <path\n        class=\"middle\"\n        d=\"m255.99,277.81c-48.59,0-87.99-39.4-87.99-88.01s39.4-87.99,87.99-87.99,88.01,39.41,88.01,87.99-39.39,88.01-88.01,88.01Z\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m241.55,225.45c-2.47,0-4.93-.94-6.82-2.82l-24.09-24.09c-3.77-3.77-3.77-9.86,0-13.63,3.77-3.77,9.87-3.77,13.63,0l17.28,17.28,46.19-46.19c3.77-3.77,9.87-3.77,13.63,0,3.77,3.77,3.77,9.86,0,13.63l-53.01,53.01c-1.88,1.88-4.35,2.82-6.82,2.82h.02Z\"\n      />\n    }\n    @case ('info') {\n      <path\n        class=\"icon\"\n        d=\"m256,64c-69.37,0-125.8,56.43-125.8,125.8,0,1.44.04,2.95.12,4.62.46,12.87,2.86,25.46,7.1,37.44,24.76,81.02,105.75,183.3,109.19,187.62,2.28,2.86,5.73,4.52,9.39,4.52s7.11-1.67,9.39-4.52c3.44-4.32,84.44-106.59,109.2-187.62,4.25-11.99,6.64-24.57,7.1-37.41.08-1.51.12-3.07.12-4.64,0-69.37-56.44-125.8-125.81-125.8Z\"\n      />\n      <rect\n        class=\"middle\"\n        x=\"177.74\"\n        y=\"110.96\"\n        width=\"156.52\"\n        height=\"156.52\"\n        rx=\"11.74\"\n        ry=\"11.74\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m255.91,134.43h.18c7.02,0,12.72,5.73,12.72,12.81s-5.69,12.81-12.72,12.81h-.18c-7.02,0-12.72-5.73-12.72-12.81s5.69-12.81,12.72-12.81Z\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m256,179.94c5.31,0,9.61,4.3,9.61,9.61v44.84c0,5.31-4.3,9.61-9.61,9.61s-9.61-4.3-9.61-9.61v-44.84c0-5.31,4.3-9.61,9.61-9.61Z\"\n      />\n    }\n    @case ('warning') {\n      <path\n        class=\"icon\"\n        d=\"m256,64c-69.37,0-125.8,56.43-125.8,125.8,0,1.44.04,2.95.12,4.62.46,12.87,2.86,25.46,7.1,37.44,24.76,81.02,105.75,183.3,109.19,187.62,2.28,2.86,5.73,4.52,9.39,4.52s7.11-1.67,9.39-4.52c3.44-4.32,84.44-106.59,109.2-187.62,4.25-11.99,6.64-24.57,7.1-37.41.08-1.51.12-3.07.12-4.64,0-69.37-56.44-125.8-125.81-125.8Z\"\n      />\n      <path\n        class=\"middle\"\n        d=\"m243.78,104.22l-76.92,134.35c-5.38,9.39,1.4,21.09,12.22,21.09h153.85c10.82,0,17.6-11.7,12.22-21.09l-76.92-134.35c-5.41-9.45-19.04-9.45-24.45,0Z\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m256.09,244.09h-.18c-7.02,0-12.72-5.73-12.72-12.81s5.69-12.81,12.72-12.81h.18c7.02,0,12.72,5.73,12.72,12.81s-5.69,12.81-12.72,12.81Z\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m256,198.59c-5.31,0-9.61-4.3-9.61-9.61v-44.84c0-5.31,4.3-9.61,9.61-9.61s9.61,4.3,9.61,9.61v44.84c0,5.31-4.3,9.61-9.61,9.61Z\"\n      />\n    }\n    @case ('danger') {\n      <path\n        class=\"icon\"\n        d=\"m256,64c-69.05,0-125.21,56.17-125.21,125.21,0,1.43.04,2.94.12,4.6.46,12.81,2.85,25.34,7.07,37.27,24.64,80.64,105.26,184.13,108.68,188.43,2.27,2.85,5.7,4.5,9.35,4.5s7.08-1.66,9.35-4.5c3.42-4.3,84.05-107.77,108.69-188.43,4.23-11.93,6.61-24.46,7.07-37.24.08-1.5.12-3.06.12-4.62,0-69.05-56.18-125.21-125.22-125.21h0Z\"\n      />\n      <path\n        class=\"middle\"\n        d=\"m255.99,277.81c-48.59,0-87.99-39.4-87.99-88.01s39.4-87.99,87.99-87.99,88.01,39.41,88.01,87.99-39.39,88.01-88.01,88.01Z\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m256.09,244.09h-.18c-7.02,0-12.72-5.73-12.72-12.81s5.69-12.81,12.72-12.81h.18c7.02,0,12.72,5.73,12.72,12.81s-5.69,12.81-12.72,12.81Z\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m256,198.59c-5.31,0-9.61-4.3-9.61-9.61v-44.84c0-5.31,4.3-9.61,9.61-9.61s9.61,4.3,9.61,9.61v44.84c0,5.31-4.3,9.61-9.61,9.61Z\"\n      />\n    }\n    @case ('caution') {\n      <path\n        class=\"icon\"\n        d=\"m256,64c-69.37,0-125.8,56.43-125.8,125.8,0,1.44.04,2.95.12,4.62.46,12.87,2.86,25.46,7.1,37.44,24.76,81.02,105.75,183.3,109.19,187.62,2.28,2.86,5.73,4.52,9.39,4.52s7.11-1.67,9.39-4.52c3.44-4.32,84.44-106.59,109.2-187.62,4.25-11.99,6.64-24.57,7.1-37.41.08-1.51.12-3.07.12-4.64,0-69.37-56.44-125.8-125.81-125.8Z\"\n      />\n      <rect\n        class=\"middle\"\n        x=\"190.26\"\n        y=\"123.48\"\n        width=\"131.47\"\n        height=\"131.47\"\n        rx=\"11.74\"\n        ry=\"11.74\"\n        transform=\"translate(208.78 -125.6) rotate(45)\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m256.09,244h-.18c-7.02,0-12.72-5.73-12.72-12.81,0-7.08,5.69-12.81,12.72-12.81h.18c7.02,0,12.72,5.73,12.72,12.81,0,7.08-5.69,12.81-12.72,12.81Z\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m256,198.5c-5.31,0-9.61-4.3-9.61-9.61v-44.84c0-5.31,4.3-9.61,9.61-9.61,5.31,0,9.61,4.3,9.61,9.61v44.84c0,5.31-4.3,9.61-9.61,9.61Z\"\n      />\n    }\n    @case ('critical') {\n      <path\n        class=\"icon\"\n        d=\"m256,64c-69.37,0-125.8,56.43-125.8,125.8,0,1.44.04,2.95.12,4.62.46,12.87,2.86,25.46,7.1,37.44,24.76,81.02,105.75,183.3,109.19,187.62,2.28,2.86,5.73,4.52,9.39,4.52s7.11-1.67,9.39-4.52c3.44-4.32,84.44-106.59,109.2-187.62,4.25-11.99,6.64-24.57,7.1-37.41.08-1.51.12-3.07.12-4.64,0-69.37-56.44-125.8-125.81-125.8Z\"\n      />\n      <path\n        class=\"middle\"\n        d=\"m285.78,105.57h-59.57c-3.11,0-6.1,1.24-8.3,3.44l-42.12,42.12c-2.2,2.2-3.44,5.19-3.44,8.3v59.57c0,3.11,1.24,6.1,3.44,8.3l42.12,42.12c2.2,2.2,5.19,3.44,8.3,3.44h59.57c3.11,0,6.1-1.24,8.3-3.44l42.12-42.12c2.2-2.2,3.44-5.19,3.44-8.3v-59.57c0-3.11-1.24-6.1-3.44-8.3l-42.12-42.12c-2.2-2.2-5.19-3.44-8.3-3.44Z\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m256.09,244h-.18c-7.02,0-12.72-5.73-12.72-12.81,0-7.08,5.69-12.81,12.72-12.81h.18c7.02,0,12.72,5.73,12.72,12.81,0,7.08-5.69,12.81-12.72,12.81Z\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m256,198.5c-5.31,0-9.61-4.3-9.61-9.61v-44.84c0-5.31,4.3-9.61,9.61-9.61s9.61,4.3,9.61,9.61v44.84c0,5.31-4.3,9.61-9.61,9.61Z\"\n      />\n    }\n    @default {\n      <path\n        class=\"icon\"\n        d=\"m256,64c-69.37,0-125.8,56.43-125.8,125.8,0,1.44.04,2.95.12,4.62.46,12.87,2.86,25.46,7.1,37.44,24.76,81.02,105.75,183.3,109.19,187.62,2.28,2.86,5.73,4.52,9.39,4.52s7.11-1.67,9.39-4.52c3.44-4.32,84.44-106.59,109.2-187.62,4.25-11.99,6.64-24.57,7.1-37.41.08-1.51.12-3.07.12-4.64,0-69.37-56.44-125.8-125.81-125.8Z\"\n      />\n      <path\n        class=\"middle\"\n        d=\"m255.99,277.81c-48.59,0-87.99-39.4-87.99-88.01s39.4-87.99,87.99-87.99,88.01,39.41,88.01,87.99-39.39,88.01-88.01,88.01Z\"\n      />\n    }\n  }\n</svg>\n", styles: [":host{display:block;inline-size:42px;block-size:42px;color:var(--element-ui-3);cursor:pointer}:host[data-status=default]{color:var(--si-sys-background-accent)}:host[data-status=success]{color:var(--element-status-success)}:host[data-status=info]{color:var(--element-status-information)}:host[data-status=warning]{color:var(--element-status-warning)}:host[data-status=danger]{color:var(--element-status-danger)}:host[data-status=caution]{color:var(--element-status-caution)}:host[data-status=critical]{color:var(--element-status-critical)}:host svg{display:block;inline-size:100%;block-size:100%}:host .icon{fill:currentColor}:host .middle{fill:var(--element-base-1)}:host .symbol{fill:var(--element-text-primary)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiStatusMarkerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-status-marker', host: {
+                        class: 'si-status-marker',
+                        '[attr.data-status]': 'status() ?? "default"'
+                    }, template: "<svg viewBox=\"0 0 512 512\" aria-hidden=\"true\" focusable=\"false\">\n  @switch (status()) {\n    @case ('unknown') {\n      <path\n        class=\"icon\"\n        d=\"m256,64c-69.37,0-125.8,56.43-125.8,125.8,0,1.44.04,2.95.12,4.62.46,12.87,2.86,25.46,7.1,37.44,24.76,81.02,105.75,183.3,109.19,187.62,2.28,2.86,5.73,4.52,9.39,4.52s7.11-1.67,9.39-4.52c3.44-4.32,84.44-106.59,109.2-187.62,4.25-11.99,6.64-24.57,7.1-37.41.08-1.51.12-3.07.12-4.64,0-69.37-56.44-125.8-125.81-125.8Zm0,213.81c-48.59,0-87.99-39.4-87.99-88.01s39.4-87.99,87.99-87.99,88.01,39.41,88.01,87.99-39.39,88.01-88.01,88.01Z\"\n      />\n      <path\n        class=\"middle\"\n        d=\"m255.99,277.81c-48.59,0-87.99-39.4-87.99-88.01s39.4-87.99,87.99-87.99,88.01,39.41,88.01,87.99-39.39,88.01-88.01,88.01Z\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m256.04,207.64h0c-5.25,0-9.5-4.25-9.5-9.5v-9.95c0-3.59,1.8-7,4.87-8.86.59-.36,1.07-.56,1.58-.73,5.75-1.99,17.59-8.4,17.59-15.59,0-6.46-4.07-12.24-10.16-14.38-7.91-2.78-16.6,1.39-19.38,9.29-1.74,4.95-7.16,7.55-12.11,5.81-4.95-1.74-7.55-7.17-5.81-12.11,6.26-17.79,25.82-27.17,43.61-20.91,13.69,4.82,22.87,17.8,22.85,32.31,0,16.73-14.98,26.5-24.04,30.88v4.23c0,5.25-4.25,9.5-9.5,9.5h0Z\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m256.09,247h-.18c-7.02,0-12.72-5.73-12.72-12.81,0-7.08,5.69-12.81,12.72-12.81h.18c7.02,0,12.72,5.73,12.72,12.81,0,7.08-5.69,12.81-12.72,12.81Z\"\n      />\n    }\n    @case ('success') {\n      <path\n        class=\"icon\"\n        d=\"m256,64c-69.37,0-125.8,56.43-125.8,125.8,0,1.44.04,2.95.12,4.62.46,12.87,2.86,25.46,7.1,37.44,24.76,81.02,105.75,183.3,109.19,187.62,2.28,2.86,5.73,4.52,9.39,4.52s7.11-1.67,9.39-4.52c3.44-4.32,84.44-106.59,109.2-187.62,4.25-11.99,6.64-24.57,7.1-37.41.08-1.51.12-3.07.12-4.64,0-69.37-56.44-125.8-125.81-125.8Zm0,213.81c-48.59,0-87.99-39.4-87.99-88.01s39.4-87.99,87.99-87.99,88.01,39.41,88.01,87.99-39.39,88.01-88.01,88.01Z\"\n      />\n      <path\n        class=\"middle\"\n        d=\"m255.99,277.81c-48.59,0-87.99-39.4-87.99-88.01s39.4-87.99,87.99-87.99,88.01,39.41,88.01,87.99-39.39,88.01-88.01,88.01Z\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m241.55,225.45c-2.47,0-4.93-.94-6.82-2.82l-24.09-24.09c-3.77-3.77-3.77-9.86,0-13.63,3.77-3.77,9.87-3.77,13.63,0l17.28,17.28,46.19-46.19c3.77-3.77,9.87-3.77,13.63,0,3.77,3.77,3.77,9.86,0,13.63l-53.01,53.01c-1.88,1.88-4.35,2.82-6.82,2.82h.02Z\"\n      />\n    }\n    @case ('info') {\n      <path\n        class=\"icon\"\n        d=\"m256,64c-69.37,0-125.8,56.43-125.8,125.8,0,1.44.04,2.95.12,4.62.46,12.87,2.86,25.46,7.1,37.44,24.76,81.02,105.75,183.3,109.19,187.62,2.28,2.86,5.73,4.52,9.39,4.52s7.11-1.67,9.39-4.52c3.44-4.32,84.44-106.59,109.2-187.62,4.25-11.99,6.64-24.57,7.1-37.41.08-1.51.12-3.07.12-4.64,0-69.37-56.44-125.8-125.81-125.8Z\"\n      />\n      <rect\n        class=\"middle\"\n        x=\"177.74\"\n        y=\"110.96\"\n        width=\"156.52\"\n        height=\"156.52\"\n        rx=\"11.74\"\n        ry=\"11.74\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m255.91,134.43h.18c7.02,0,12.72,5.73,12.72,12.81s-5.69,12.81-12.72,12.81h-.18c-7.02,0-12.72-5.73-12.72-12.81s5.69-12.81,12.72-12.81Z\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m256,179.94c5.31,0,9.61,4.3,9.61,9.61v44.84c0,5.31-4.3,9.61-9.61,9.61s-9.61-4.3-9.61-9.61v-44.84c0-5.31,4.3-9.61,9.61-9.61Z\"\n      />\n    }\n    @case ('warning') {\n      <path\n        class=\"icon\"\n        d=\"m256,64c-69.37,0-125.8,56.43-125.8,125.8,0,1.44.04,2.95.12,4.62.46,12.87,2.86,25.46,7.1,37.44,24.76,81.02,105.75,183.3,109.19,187.62,2.28,2.86,5.73,4.52,9.39,4.52s7.11-1.67,9.39-4.52c3.44-4.32,84.44-106.59,109.2-187.62,4.25-11.99,6.64-24.57,7.1-37.41.08-1.51.12-3.07.12-4.64,0-69.37-56.44-125.8-125.81-125.8Z\"\n      />\n      <path\n        class=\"middle\"\n        d=\"m243.78,104.22l-76.92,134.35c-5.38,9.39,1.4,21.09,12.22,21.09h153.85c10.82,0,17.6-11.7,12.22-21.09l-76.92-134.35c-5.41-9.45-19.04-9.45-24.45,0Z\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m256.09,244.09h-.18c-7.02,0-12.72-5.73-12.72-12.81s5.69-12.81,12.72-12.81h.18c7.02,0,12.72,5.73,12.72,12.81s-5.69,12.81-12.72,12.81Z\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m256,198.59c-5.31,0-9.61-4.3-9.61-9.61v-44.84c0-5.31,4.3-9.61,9.61-9.61s9.61,4.3,9.61,9.61v44.84c0,5.31-4.3,9.61-9.61,9.61Z\"\n      />\n    }\n    @case ('danger') {\n      <path\n        class=\"icon\"\n        d=\"m256,64c-69.05,0-125.21,56.17-125.21,125.21,0,1.43.04,2.94.12,4.6.46,12.81,2.85,25.34,7.07,37.27,24.64,80.64,105.26,184.13,108.68,188.43,2.27,2.85,5.7,4.5,9.35,4.5s7.08-1.66,9.35-4.5c3.42-4.3,84.05-107.77,108.69-188.43,4.23-11.93,6.61-24.46,7.07-37.24.08-1.5.12-3.06.12-4.62,0-69.05-56.18-125.21-125.22-125.21h0Z\"\n      />\n      <path\n        class=\"middle\"\n        d=\"m255.99,277.81c-48.59,0-87.99-39.4-87.99-88.01s39.4-87.99,87.99-87.99,88.01,39.41,88.01,87.99-39.39,88.01-88.01,88.01Z\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m256.09,244.09h-.18c-7.02,0-12.72-5.73-12.72-12.81s5.69-12.81,12.72-12.81h.18c7.02,0,12.72,5.73,12.72,12.81s-5.69,12.81-12.72,12.81Z\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m256,198.59c-5.31,0-9.61-4.3-9.61-9.61v-44.84c0-5.31,4.3-9.61,9.61-9.61s9.61,4.3,9.61,9.61v44.84c0,5.31-4.3,9.61-9.61,9.61Z\"\n      />\n    }\n    @case ('caution') {\n      <path\n        class=\"icon\"\n        d=\"m256,64c-69.37,0-125.8,56.43-125.8,125.8,0,1.44.04,2.95.12,4.62.46,12.87,2.86,25.46,7.1,37.44,24.76,81.02,105.75,183.3,109.19,187.62,2.28,2.86,5.73,4.52,9.39,4.52s7.11-1.67,9.39-4.52c3.44-4.32,84.44-106.59,109.2-187.62,4.25-11.99,6.64-24.57,7.1-37.41.08-1.51.12-3.07.12-4.64,0-69.37-56.44-125.8-125.81-125.8Z\"\n      />\n      <rect\n        class=\"middle\"\n        x=\"190.26\"\n        y=\"123.48\"\n        width=\"131.47\"\n        height=\"131.47\"\n        rx=\"11.74\"\n        ry=\"11.74\"\n        transform=\"translate(208.78 -125.6) rotate(45)\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m256.09,244h-.18c-7.02,0-12.72-5.73-12.72-12.81,0-7.08,5.69-12.81,12.72-12.81h.18c7.02,0,12.72,5.73,12.72,12.81,0,7.08-5.69,12.81-12.72,12.81Z\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m256,198.5c-5.31,0-9.61-4.3-9.61-9.61v-44.84c0-5.31,4.3-9.61,9.61-9.61,5.31,0,9.61,4.3,9.61,9.61v44.84c0,5.31-4.3,9.61-9.61,9.61Z\"\n      />\n    }\n    @case ('critical') {\n      <path\n        class=\"icon\"\n        d=\"m256,64c-69.37,0-125.8,56.43-125.8,125.8,0,1.44.04,2.95.12,4.62.46,12.87,2.86,25.46,7.1,37.44,24.76,81.02,105.75,183.3,109.19,187.62,2.28,2.86,5.73,4.52,9.39,4.52s7.11-1.67,9.39-4.52c3.44-4.32,84.44-106.59,109.2-187.62,4.25-11.99,6.64-24.57,7.1-37.41.08-1.51.12-3.07.12-4.64,0-69.37-56.44-125.8-125.81-125.8Z\"\n      />\n      <path\n        class=\"middle\"\n        d=\"m285.78,105.57h-59.57c-3.11,0-6.1,1.24-8.3,3.44l-42.12,42.12c-2.2,2.2-3.44,5.19-3.44,8.3v59.57c0,3.11,1.24,6.1,3.44,8.3l42.12,42.12c2.2,2.2,5.19,3.44,8.3,3.44h59.57c3.11,0,6.1-1.24,8.3-3.44l42.12-42.12c2.2-2.2,3.44-5.19,3.44-8.3v-59.57c0-3.11-1.24-6.1-3.44-8.3l-42.12-42.12c-2.2-2.2-5.19-3.44-8.3-3.44Z\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m256.09,244h-.18c-7.02,0-12.72-5.73-12.72-12.81,0-7.08,5.69-12.81,12.72-12.81h.18c7.02,0,12.72,5.73,12.72,12.81,0,7.08-5.69,12.81-12.72,12.81Z\"\n      />\n      <path\n        class=\"symbol\"\n        d=\"m256,198.5c-5.31,0-9.61-4.3-9.61-9.61v-44.84c0-5.31,4.3-9.61,9.61-9.61s9.61,4.3,9.61,9.61v44.84c0,5.31-4.3,9.61-9.61,9.61Z\"\n      />\n    }\n    @default {\n      <path\n        class=\"icon\"\n        d=\"m256,64c-69.37,0-125.8,56.43-125.8,125.8,0,1.44.04,2.95.12,4.62.46,12.87,2.86,25.46,7.1,37.44,24.76,81.02,105.75,183.3,109.19,187.62,2.28,2.86,5.73,4.52,9.39,4.52s7.11-1.67,9.39-4.52c3.44-4.32,84.44-106.59,109.2-187.62,4.25-11.99,6.64-24.57,7.1-37.41.08-1.51.12-3.07.12-4.64,0-69.37-56.44-125.8-125.81-125.8Z\"\n      />\n      <path\n        class=\"middle\"\n        d=\"m255.99,277.81c-48.59,0-87.99-39.4-87.99-88.01s39.4-87.99,87.99-87.99,88.01,39.41,88.01,87.99-39.39,88.01-88.01,88.01Z\"\n      />\n    }\n  }\n</svg>\n", styles: [":host{display:block;inline-size:42px;block-size:42px;color:var(--element-ui-3);cursor:pointer}:host[data-status=default]{color:var(--si-sys-background-accent)}:host[data-status=success]{color:var(--element-status-success)}:host[data-status=info]{color:var(--element-status-information)}:host[data-status=warning]{color:var(--element-status-warning)}:host[data-status=danger]{color:var(--element-status-danger)}:host[data-status=caution]{color:var(--element-status-caution)}:host[data-status=critical]{color:var(--element-status-critical)}:host svg{display:block;inline-size:100%;block-size:100%}:host .icon{fill:currentColor}:host .middle{fill:var(--element-base-1)}:host .symbol{fill:var(--element-text-primary)}\n"] }]
+        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiClusterSourceComponent, SiStatusMarkerComponent, injectSiMapStyle, injectSiMapTranslations };
+//# sourceMappingURL=siemens-element-ng-maplibre.mjs.map