@siemens/element-ng 51.3.0 → 51.4.0

package/fesm2022/siemens-element-ng-markdown-extensions-katex.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-markdown-extensions-katex.mjs","sources":["../../../../projects/element-ng/markdown/extensions/katex/si-markdown-katex.component.ts","../../../../projects/element-ng/markdown/extensions/katex/si-markdown-katex.extension.ts","../../../../projects/element-ng/markdown/extensions/katex/index.ts","../../../../projects/element-ng/markdown/extensions/katex/siemens-element-ng-markdown-extensions-katex.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport {\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  ViewEncapsulation\n} from '@angular/core';\nimport { type SiMarkdownExtensionComponent } from '@siemens/element-ng/markdown';\nimport { type KatexOptions, render } from 'katex';\nimport { Literal, type Node, type Parent } from 'mdast';\n\n@Component({\n  selector: 'si-markdown-katex',\n  template: '',\n  styleUrl: 'si-markdown-katex.component.scss',\n  // this is necessary for the styles to work correctly\n  // eslint-disable-next-line @angular-eslint/use-component-view-encapsulation\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'katex-container',\n    '[attr.data-line]': 'node().position?.start?.line',\n    '[class.d-block]': 'displayMode()'\n  }\n})\nexport class SiMarkdownKatexComponent implements SiMarkdownExtensionComponent {\n  private readonly elementRef = inject(ElementRef);\n\n  readonly node = input.required<Node>();\n  readonly parent = input.required<Parent>();\n  readonly options = input<KatexOptions>();\n\n  protected readonly displayMode = computed(() => this.node().type === 'math');\n  private readonly expr = computed(() => (this.node() as Literal).value);\n\n  constructor() {\n    effect(() => this.render());\n  }\n\n  private render(): void {\n    const expr = this.expr();\n    const options = this.options() ?? {};\n    render(expr, this.elementRef.nativeElement, {\n      ...options,\n      displayMode: this.displayMode(),\n      throwOnError: false\n    });\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { type SiMarkdownExtension } from '@siemens/element-ng/markdown';\n/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { type KatexOptions } from 'katex';\nimport remarkMath, { type Options } from 'remark-math';\n\nimport { SiMarkdownKatexComponent } from './si-markdown-katex.component';\n\n/**\n * An extension to render LaTeX math expressions using KaTeX. Uses `remark-math` to parse\n * the expressions inside the markdown document.\n * @param parseOptions - options passed to `remark-math`\n * @param katexOptions - options passed to `katex`\n * @returns extension for `SiMarkdownOption.installExtension()`\n */\nexport const siMarkdownMathKaTeX = (\n  parseOptions?: Options,\n  katexOptions?: KatexOptions\n): SiMarkdownExtension => {\n  katexOptions ??= {\n    output: 'html'\n  };\n\n  return {\n    plugins: [{ plugin: remarkMath, options: parseOptions }],\n    types: [\n      { type: 'math', component: SiMarkdownKatexComponent, options: katexOptions },\n      { type: 'inlineMath', component: SiMarkdownKatexComponent, options: katexOptions }\n    ]\n  };\n};\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-markdown-katex.extension';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAAA;;;AAGG;MA2BU,wBAAwB,CAAA;AAClB,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;IAEvC,IAAI,GAAG,KAAK,CAAC,QAAQ;6EAAQ;IAC7B,MAAM,GAAG,KAAK,CAAC,QAAQ;+EAAU;AACjC,IAAA,OAAO,GAAG,KAAK;2FAAgB;AAErB,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,KAAK,MAAM;oFAAC;IAC3D,IAAI,GAAG,QAAQ,CAAC,MAAO,IAAI,CAAC,IAAI,EAAc,CAAC,KAAK;6EAAC;AAEtE,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC;IAC7B;IAEQ,MAAM,GAAA;AACZ,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;QACxB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE;QACpC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE;AAC1C,YAAA,GAAG,OAAO;AACV,YAAA,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE;AAC/B,YAAA,YAAY,EAAE;AACf,SAAA,CAAC;IACJ;uGAtBW,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAxB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,slBAXzB,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,yqj5CAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAWD,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAbpC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,YACnB,EAAE,EAAA,aAAA,EAIG,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,iBAAiB;AACxB,wBAAA,kBAAkB,EAAE,8BAA8B;AAClD,wBAAA,iBAAiB,EAAE;AACpB,qBAAA,EAAA,MAAA,EAAA,CAAA,yqj5CAAA,CAAA,EAAA;;;ACdH;;;;;;AAMG;MACU,mBAAmB,GAAG,CACjC,YAAsB,EACtB,YAA2B,KACJ;AACvB,IAAA,YAAY,KAAK;AACf,QAAA,MAAM,EAAE;KACT;IAED,OAAO;QACL,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;AACxD,QAAA,KAAK,EAAE;YACL,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,wBAAwB,EAAE,OAAO,EAAE,YAAY,EAAE;YAC5E,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,wBAAwB,EAAE,OAAO,EAAE,YAAY;AACjF;KACF;AACH;;ACpCA;;;AAGG;;ACHH;;AAEG;;"}
+{"version":3,"file":"siemens-element-ng-markdown-extensions-katex.mjs","sources":["../../../../projects/element-ng/markdown/extensions/katex/si-markdown-katex.component.ts","../../../../projects/element-ng/markdown/extensions/katex/si-markdown-katex.extension.ts","../../../../projects/element-ng/markdown/extensions/katex/index.ts","../../../../projects/element-ng/markdown/extensions/katex/siemens-element-ng-markdown-extensions-katex.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport {\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  ViewEncapsulation\n} from '@angular/core';\nimport { type SiMarkdownExtensionComponent } from '@siemens/element-ng/markdown';\nimport { type KatexOptions, render } from 'katex';\nimport { Literal, type Node, type Parent } from 'mdast';\n\n@Component({\n  selector: 'si-markdown-katex',\n  template: '',\n  styleUrl: 'si-markdown-katex.component.scss',\n  // this is necessary for the styles to work correctly\n  // eslint-disable-next-line @angular-eslint/use-component-view-encapsulation\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'katex-container',\n    '[attr.data-line]': 'node().position?.start?.line',\n    '[class.d-block]': 'displayMode()'\n  }\n})\nexport class SiMarkdownKatexComponent implements SiMarkdownExtensionComponent {\n  private readonly elementRef = inject(ElementRef);\n\n  readonly node = input.required<Node>();\n  readonly parent = input.required<Parent>();\n  readonly options = input<KatexOptions>();\n\n  protected readonly displayMode = computed(() => this.node().type === 'math');\n  private readonly expr = computed(() => (this.node() as Literal).value);\n\n  constructor() {\n    effect(() => this.render());\n  }\n\n  private render(): void {\n    const expr = this.expr();\n    const options = this.options() ?? {};\n    render(expr, this.elementRef.nativeElement, {\n      ...options,\n      displayMode: this.displayMode(),\n      throwOnError: false\n    });\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { type SiMarkdownExtension } from '@siemens/element-ng/markdown';\n/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { type KatexOptions } from 'katex';\nimport remarkMath, { type Options } from 'remark-math';\n\nimport { SiMarkdownKatexComponent } from './si-markdown-katex.component';\n\n/**\n * An extension to render LaTeX math expressions using KaTeX. Uses `remark-math` to parse\n * the expressions inside the markdown document.\n * @param parseOptions - options passed to `remark-math`\n * @param katexOptions - options passed to `katex`\n * @returns extension for `SiMarkdownOption.installExtension()`\n */\nexport const siMarkdownMathKaTeX = (\n  parseOptions?: Options,\n  katexOptions?: KatexOptions\n): SiMarkdownExtension => {\n  katexOptions ??= {\n    output: 'html'\n  };\n\n  return {\n    plugins: [{ plugin: remarkMath, options: parseOptions }],\n    types: [\n      { type: 'math', component: SiMarkdownKatexComponent, options: katexOptions },\n      { type: 'inlineMath', component: SiMarkdownKatexComponent, options: katexOptions }\n    ]\n  };\n};\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-markdown-katex.extension';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAAA;;;AAGG;MA2BU,wBAAwB,CAAA;AAClB,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;IAEvC,IAAI,GAAG,KAAK,CAAC,QAAQ;6EAAQ;IAC7B,MAAM,GAAG,KAAK,CAAC,QAAQ;+EAAU;AACjC,IAAA,OAAO,GAAG,KAAK;2FAAgB;AAErB,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,KAAK,MAAM;oFAAC;IAC3D,IAAI,GAAG,QAAQ,CAAC,MAAO,IAAI,CAAC,IAAI,EAAc,CAAC,KAAK;6EAAC;AAEtE,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC;IAC7B;IAEQ,MAAM,GAAA;AACZ,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;QACxB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE;QACpC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE;AAC1C,YAAA,GAAG,OAAO;AACV,YAAA,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE;AAC/B,YAAA,YAAY,EAAE;AACf,SAAA,CAAC;IACJ;uGAtBW,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAxB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,slBAXzB,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,8qj5CAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAWD,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAbpC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,YACnB,EAAE,EAAA,aAAA,EAIG,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,iBAAiB;AACxB,wBAAA,kBAAkB,EAAE,8BAA8B;AAClD,wBAAA,iBAAiB,EAAE;AACpB,qBAAA,EAAA,MAAA,EAAA,CAAA,8qj5CAAA,CAAA,EAAA;;;ACdH;;;;;;AAMG;MACU,mBAAmB,GAAG,CACjC,YAAsB,EACtB,YAA2B,KACJ;AACvB,IAAA,YAAY,KAAK;AACf,QAAA,MAAM,EAAE;KACT;IAED,OAAO;QACL,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;AACxD,QAAA,KAAK,EAAE;YACL,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,wBAAwB,EAAE,OAAO,EAAE,YAAY,EAAE;YAC5E,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,wBAAwB,EAAE,OAAO,EAAE,YAAY;AACjF;KACF;AACH;;ACpCA;;;AAGG;;ACHH;;AAEG;;"}

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

@@ -37,6 +37,7 @@ class PopoverComponent {
     elementRef = inject(ElementRef);
     focusTrapFactory = inject(ConfigurableFocusTrapFactory);
     focusTrap;
+    focusTimeoutId;
     previouslyActiveElement = inject(DOCUMENT).activeElement;
     ngOnInit() {
         const popoverDirective = this.popoverDirective();
@@ -49,6 +50,7 @@ class PopoverComponent {
         this.applyFocus();
     }
     ngOnDestroy() {
+        clearTimeout(this.focusTimeoutId);
         this.focusTrap?.destroy();
         if (this.previouslyActiveElement &&
             'focus' in this.previouslyActiveElement &&
@@ -69,7 +71,7 @@ class PopoverComponent {
     }
     applyFocus() {
         // Using setTimeout ensures that SR first read `expanded` before we move the focus.
-        setTimeout(async () => {
+        this.focusTimeoutId = setTimeout(async () => {
             const popoverWrapperEl = this.popoverWrapper().nativeElement;
             this.focusTrap = this.focusTrapFactory.create(this.popoverWrapper().nativeElement);
             const moved = await this.focusTrap.focusFirstTabbableElementWhenReady();

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  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":"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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 focusTimeoutId?: ReturnType<typeof setTimeout>;\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    clearTimeout(this.focusTimeoutId);\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    this.focusTimeoutId = 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":"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"}

package/fesm2022/siemens-element-ng-shadow-root.mjs

@@ -1,6 +1,7 @@
 import { OverlayContainer, Overlay } from '@angular/cdk/overlay';
 import * as i0 from '@angular/core';
 import { inject, ElementRef, DOCUMENT, DestroyRef, Directive } from '@angular/core';
+import { SI_THEME_DOM_TARGET, SiThemeService } from '@siemens/element-ng/theme';
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -36,10 +37,12 @@ class SiShadowRootDirective extends OverlayContainer {
     elementRef = inject(ElementRef);
     document = inject(DOCUMENT);
     destroyRef = inject(DestroyRef);
+    themeTarget = inject(SI_THEME_DOM_TARGET);
     // eslint-disable-next-line @typescript-eslint/naming-convention
     _createContainer() {
         const sourceShadow = this.elementRef.nativeElement.shadowRoot;
         const root = this.document.createElement('element-overlay-root');
+        const unregisterThemeTarget = this.themeTarget.registerElement?.(root);
         this.document.body.append(root);
         const shadow = root.attachShadow({ mode: 'open' });
         const shadowElement = this.document.createElement('div');
@@ -68,6 +71,7 @@ class SiShadowRootDirective extends OverlayContainer {
         observer.observe(sourceShadow, { childList: true });
         this.destroyRef.onDestroy(() => {
             observer.disconnect();
+            unregisterThemeTarget?.();
             root.remove();
         });
         this._containerElement = shadowElement;
@@ -83,6 +87,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }]
         }] });
 
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+const createShadowRootThemeTarget = () => {
+    const element = inject(ElementRef).nativeElement;
+    const elements = new Set([element]);
+    const getShadowRoot = () => {
+        if (!element.shadowRoot) {
+            throw new Error('createShadowRootThemeTarget requires a component with Shadow DOM encapsulation.');
+        }
+        return element.shadowRoot;
+    };
+    return {
+        element,
+        rootSelector: ':host',
+        forEachElement: callback => elements.forEach(callback),
+        registerElement: registeredElement => {
+            elements.add(registeredElement);
+            registeredElement.classList.toggle('app--dark', element.classList.contains('app--dark'));
+            element.classList.forEach(className => {
+                if (className.startsWith('theme-')) {
+                    registeredElement.classList.add(className);
+                }
+            });
+            registeredElement.style.colorScheme = element.style.colorScheme;
+            return () => elements.delete(registeredElement);
+        },
+        getStyleElement: id => getShadowRoot().getElementById(id),
+        appendStyleElement: style => getShadowRoot().append(style),
+        updateColorScheme: colorScheme => elements.forEach(themeElement => themeElement.style.setProperty('color-scheme', colorScheme))
+    };
+};
+/**
+ * Provides the shadow root specific theme service with a dedicated theme target
+ * for components using Shadow DOM encapsulation.
+ * Use this when the component defines and loads the Element theme in its own shadow root instead
+ * of reusing the theme defined on `:root`.
+ */
+const provideShadowRootThemeTarget = () => {
+    return [
+        SiThemeService,
+        {
+            provide: SI_THEME_DOM_TARGET,
+            useFactory: createShadowRootThemeTarget
+        }
+    ];
+};
+
 /**
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
@@ -92,5 +145,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SiShadowRootDirective };
+export { SiShadowRootDirective, provideShadowRootThemeTarget };
 //# sourceMappingURL=siemens-element-ng-shadow-root.mjs.map

package/fesm2022/siemens-element-ng-shadow-root.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-shadow-root.mjs","sources":["../../../../projects/element-ng/shadow-root/si-shadow-root.directive.ts","../../../../projects/element-ng/shadow-root/index.ts","../../../../projects/element-ng/shadow-root/siemens-element-ng-shadow-root.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Overlay, OverlayContainer } from '@angular/cdk/overlay';\nimport { Directive, ElementRef, inject, DOCUMENT, DestroyRef } from '@angular/core';\n\n/**\n * This directive is intended to be used in applications that do NOT load element styles in the root HTML element.\n * So typically module federation, single SPA apps or apps that bootstrap element manually in a shadow root.\n *\n * This directive will ensure that overlays created within this shadow root will have the correct styles applied.\n * It does this by creating a new shadow root in the document body\n * and copying the styles from this shadow root to new one.\n *\n * With that approach, we can ensure that overlay can span the entire screen without being limited to the current shadow root.\n *\n * To use this directive, add it to the component / element which creates the shadow root which holds the element styles.\n *\n * @example\n * ```ts\n * @Component({\n *   selector: 'app-root',\n *   encapsulation: ViewEncapsulation.ShadowDom,\n *   hostDirectives: [SiShadowRootDirective],\n *   stylesUrls: ['element-styles.scss'],\n *   template: `<si-element-component />`\n * })\n * export class AppComponent { }\n *\n * ```\n *\n */\n@Directive({\n  selector: '[siShadowRoot]',\n  providers: [{ provide: OverlayContainer, useExisting: SiShadowRootDirective }, Overlay]\n})\nexport class SiShadowRootDirective extends OverlayContainer {\n  private elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private document = inject(DOCUMENT);\n  private destroyRef = inject(DestroyRef);\n\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  protected override _createContainer(): void {\n    const sourceShadow = this.elementRef.nativeElement.shadowRoot!;\n    const root = this.document.createElement('element-overlay-root');\n    this.document.body.append(root);\n    const shadow = root.attachShadow({ mode: 'open' });\n    const shadowElement = this.document.createElement('div');\n    shadowElement.classList.add('cdk-overlay-container');\n    shadow.append(shadowElement);\n\n    const styleCopies = new Map<CSSStyleSheet, Node>();\n    const syncStyleElements = (): void => {\n      const sourceStyleSheets = new Set(sourceShadow.styleSheets);\n\n      styleCopies.forEach((copy, source) => {\n        if (!sourceStyleSheets.has(source)) {\n          copy.parentNode?.removeChild(copy);\n          styleCopies.delete(source);\n        }\n      });\n\n      sourceStyleSheets.forEach(source => {\n        let copy = styleCopies.get(source);\n        if (!copy) {\n          copy = source.ownerNode!.cloneNode(true);\n          styleCopies.set(source, copy);\n        }\n        shadow.insertBefore(copy, shadowElement);\n      });\n    };\n\n    syncStyleElements();\n    const observer = new MutationObserver(syncStyleElements);\n    observer.observe(sourceShadow, { childList: true });\n    this.destroyRef.onDestroy(() => {\n      observer.disconnect();\n      root.remove();\n    });\n\n    this._containerElement = shadowElement;\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-shadow-root.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-shadow-root.mjs","sources":["../../../../projects/element-ng/shadow-root/si-shadow-root.directive.ts","../../../../projects/element-ng/shadow-root/si-shadow-root-theme-target.ts","../../../../projects/element-ng/shadow-root/index.ts","../../../../projects/element-ng/shadow-root/siemens-element-ng-shadow-root.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Overlay, OverlayContainer } from '@angular/cdk/overlay';\nimport { Directive, ElementRef, inject, DOCUMENT, DestroyRef } from '@angular/core';\nimport { SI_THEME_DOM_TARGET } from '@siemens/element-ng/theme';\n\n/**\n * This directive is intended to be used in applications that do NOT load element styles in the root HTML element.\n * So typically module federation, single SPA apps or apps that bootstrap element manually in a shadow root.\n *\n * This directive will ensure that overlays created within this shadow root will have the correct styles applied.\n * It does this by creating a new shadow root in the document body\n * and copying the styles from this shadow root to new one.\n *\n * With that approach, we can ensure that overlay can span the entire screen without being limited to the current shadow root.\n *\n * To use this directive, add it to the component / element which creates the shadow root which holds the element styles.\n *\n * @example\n * ```ts\n * @Component({\n *   selector: 'app-root',\n *   encapsulation: ViewEncapsulation.ShadowDom,\n *   hostDirectives: [SiShadowRootDirective],\n *   stylesUrls: ['element-styles.scss'],\n *   template: `<si-element-component />`\n * })\n * export class AppComponent { }\n *\n * ```\n *\n */\n@Directive({\n  selector: '[siShadowRoot]',\n  providers: [{ provide: OverlayContainer, useExisting: SiShadowRootDirective }, Overlay]\n})\nexport class SiShadowRootDirective extends OverlayContainer {\n  private elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private document = inject(DOCUMENT);\n  private destroyRef = inject(DestroyRef);\n  private themeTarget = inject(SI_THEME_DOM_TARGET);\n\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  protected override _createContainer(): void {\n    const sourceShadow = this.elementRef.nativeElement.shadowRoot!;\n    const root = this.document.createElement('element-overlay-root');\n    const unregisterThemeTarget = this.themeTarget.registerElement?.(root);\n    this.document.body.append(root);\n    const shadow = root.attachShadow({ mode: 'open' });\n    const shadowElement = this.document.createElement('div');\n    shadowElement.classList.add('cdk-overlay-container');\n    shadow.append(shadowElement);\n\n    const styleCopies = new Map<CSSStyleSheet, Node>();\n    const syncStyleElements = (): void => {\n      const sourceStyleSheets = new Set(sourceShadow.styleSheets);\n\n      styleCopies.forEach((copy, source) => {\n        if (!sourceStyleSheets.has(source)) {\n          copy.parentNode?.removeChild(copy);\n          styleCopies.delete(source);\n        }\n      });\n\n      sourceStyleSheets.forEach(source => {\n        let copy = styleCopies.get(source);\n        if (!copy) {\n          copy = source.ownerNode!.cloneNode(true);\n          styleCopies.set(source, copy);\n        }\n        shadow.insertBefore(copy, shadowElement);\n      });\n    };\n\n    syncStyleElements();\n    const observer = new MutationObserver(syncStyleElements);\n    observer.observe(sourceShadow, { childList: true });\n    this.destroyRef.onDestroy(() => {\n      observer.disconnect();\n      unregisterThemeTarget?.();\n      root.remove();\n    });\n\n    this._containerElement = shadowElement;\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { ElementRef, inject, Provider } from '@angular/core';\nimport { SI_THEME_DOM_TARGET, SiThemeDomTarget, SiThemeService } from '@siemens/element-ng/theme';\n\nconst createShadowRootThemeTarget = (): SiThemeDomTarget => {\n  const element = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  const elements = new Set([element]);\n  const getShadowRoot = (): ShadowRoot => {\n    if (!element.shadowRoot) {\n      throw new Error(\n        'createShadowRootThemeTarget requires a component with Shadow DOM encapsulation.'\n      );\n    }\n    return element.shadowRoot;\n  };\n\n  return {\n    element,\n    rootSelector: ':host',\n    forEachElement: callback => elements.forEach(callback),\n    registerElement: registeredElement => {\n      elements.add(registeredElement);\n      registeredElement.classList.toggle('app--dark', element.classList.contains('app--dark'));\n      element.classList.forEach(className => {\n        if (className.startsWith('theme-')) {\n          registeredElement.classList.add(className);\n        }\n      });\n      registeredElement.style.colorScheme = element.style.colorScheme;\n      return () => elements.delete(registeredElement);\n    },\n    getStyleElement: id => getShadowRoot().getElementById(id) as HTMLStyleElement | null,\n    appendStyleElement: style => getShadowRoot().append(style),\n    updateColorScheme: colorScheme =>\n      elements.forEach(themeElement => themeElement.style.setProperty('color-scheme', colorScheme))\n  };\n};\n\n/**\n * Provides the shadow root specific theme service with a dedicated theme target\n * for components using Shadow DOM encapsulation.\n * Use this when the component defines and loads the Element theme in its own shadow root instead\n * of reusing the theme defined on `:root`.\n */\nexport const provideShadowRootThemeTarget = (): Provider => {\n  return [\n    SiThemeService,\n    {\n      provide: SI_THEME_DOM_TARGET,\n      useFactory: createShadowRootThemeTarget\n    }\n  ];\n};\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-shadow-root.directive';\nexport * from './si-shadow-root-theme-target';\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-theme.mjs

@@ -1,8 +1,8 @@
 import { of, ReplaySubject, throwError, fromEvent, map as map$1 } from 'rxjs';
-import { isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, signal, inject, PLATFORM_ID, DOCUMENT, Injectable } from '@angular/core';
+import { InjectionToken, inject, DOCUMENT, EventEmitter, signal, PLATFORM_ID, Injectable } from '@angular/core';
 import { Meta } from '@angular/platform-browser';
+import { isPlatformBrowser } from '@angular/common';
 import { take, tap, map, switchMap } from 'rxjs/operators';
 import { toSignal } from '@angular/core/rxjs-interop';
 
@@ -109,6 +109,30 @@ class SiDefaultThemeStore extends SiThemeStore {
     }
 }
 
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Theme DOM target. The default implementation targets the current document.
+ */
+const SI_THEME_DOM_TARGET = new InjectionToken('SI_THEME_DOM_TARGET', {
+    providedIn: 'root',
+    factory: () => {
+        const document = inject(DOCUMENT);
+        const meta = inject(Meta);
+        return {
+            element: document.documentElement,
+            rootSelector: ':root',
+            eventTarget: document.defaultView ?? undefined,
+            forEachElement: callback => callback(document.documentElement),
+            getStyleElement: id => document.getElementById(id),
+            appendStyleElement: style => document.body.append(style),
+            updateColorScheme: colorScheme => meta.updateTag({ name: 'color-scheme', content: colorScheme })
+        };
+    }
+});
+
 const ELEMENT_THEME_NAME = 'element';
 const elementTheme = {
     name: 'element',
@@ -409,9 +433,12 @@ class SiThemeService {
     isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
     previewTheme;
     themeStore = inject(SiThemeStore, { optional: true }) ?? new SiDefaultThemeStore(this.isBrowser);
-    meta = inject(Meta);
     document = inject(DOCUMENT);
+    themeTarget = inject(SI_THEME_DOM_TARGET);
     constructor() {
+        this._resolvedColorScheme = this.themeTarget.element.classList.contains('app--dark')
+            ? 'dark'
+            : 'light';
         this.resolvedColorScheme$.subscribe(scheme => (this._resolvedColorScheme = scheme));
         this.themeNames$.subscribe(names => (this._themeNames = names));
         if (this.isBrowser) {
@@ -585,7 +612,7 @@ class SiThemeService {
         return result;
     }
     /**
-     * Apply `light` or `dark` theme to the document.
+     * Apply `light` or `dark` theme to the configured theme target.
      */
     applyThemeType(type) {
         if (type === this._resolvedColorScheme || !this.darkMediaQuery || !this.mediaQueryListener) {
@@ -604,7 +631,7 @@ class SiThemeService {
         }
     }
     /**
-     * Applies the given theme to the document. If no theme is given, the active theme is applied.
+     * Applies the given theme to the configured theme target. If no theme is given, the active theme is applied.
      */
     applyTheme(theme, type, overwrite) {
         if (theme) {
@@ -628,7 +655,7 @@ class SiThemeService {
         }
         this.previewTheme.schemes[type][name] = value;
         this.createThemeCSS(this.previewTheme);
-        this.document.documentElement.classList.add('theme-__preview');
+        this.themeTarget.forEachElement(element => element.classList.add('theme-__preview'));
         this.dispatchThemeSwitchEvent();
     }
     /**
@@ -667,34 +694,42 @@ class SiThemeService {
         this.themeChange.emit(theme);
     }
     activateTheme(theme) {
-        const classList = this.document.documentElement.classList;
-        classList.forEach(c => {
-            if (c.startsWith('theme-')) {
-                classList.remove(c);
+        this.themeTarget.forEachElement(element => {
+            const classList = element.classList;
+            classList.forEach(className => {
+                if (className.startsWith('theme-')) {
+                    classList.remove(className);
+                }
+            });
+            if (theme) {
+                classList.add(`theme-${theme.name}`);
             }
         });
-        if (theme) {
-            classList.add(`theme-${theme.name}`);
-        }
     }
     hasThemeCSS(theme) {
         const id = `__theme-${theme.name}`;
-        return !!this.document.getElementById(id);
+        return !!this.themeTarget.getStyleElement(id);
     }
     createThemeCSS(theme) {
         let css = '';
-        const themeSelector = `:root.theme-${theme.name}`;
+        const themeSelector = this.createThemeSelector(theme.name);
         if (theme.schemes.light) {
             css = this.createThemeVariantCSS(css, themeSelector, theme.schemes.light);
         }
         if (theme.schemes.dark) {
-            css = this.createThemeVariantCSS(css, themeSelector + '.app--dark', theme.schemes.dark);
+            css = this.createThemeVariantCSS(css, this.createThemeSelector(theme.name, true), theme.schemes.dark);
         }
         this.removeThemeCSS(theme.name);
         const cssElement = this.document.createElement('style');
         cssElement.id = `__theme-${theme.name}`;
         cssElement.textContent = css;
-        this.document.body.appendChild(cssElement);
+        this.themeTarget.appendStyleElement(cssElement);
+    }
+    createThemeSelector(name, dark = false) {
+        const classes = `.theme-${name}${dark ? '.app--dark' : ''}`;
+        return this.themeTarget.rootSelector === ':host'
+            ? `:host(${classes})`
+            : `${this.themeTarget.rootSelector}${classes}`;
     }
     createThemeVariantCSS(css, selector, scheme) {
         css += `${selector} {\n`;
@@ -706,16 +741,16 @@ class SiThemeService {
     }
     removeThemeCSS(name) {
         const id = `__theme-${name}`;
-        this.document.getElementById(id)?.remove();
-        this.document.documentElement.classList.remove(`theme-${name}`);
+        this.themeTarget.getStyleElement(id)?.remove();
+        this.themeTarget.forEachElement(element => element.classList.remove(`theme-${name}`));
     }
     toggleDark(dark) {
         if (!this.isBrowser) {
             return;
         }
-        this.document.documentElement.classList.toggle('app--dark', dark);
+        this.themeTarget.forEachElement(element => element.classList.toggle('app--dark', dark));
         const colorScheme = dark ? 'dark' : 'light';
-        this.meta.updateTag({ name: 'color-scheme', content: colorScheme });
+        this.themeTarget.updateColorScheme(colorScheme);
         this.resolvedColorSchemeSub.next(colorScheme);
         this.dispatchThemeSwitchEvent();
     }
@@ -761,8 +796,9 @@ const injectIsDarkTheme = () => {
     if (!isPlatformBrowser(inject(PLATFORM_ID))) {
         return signal(false);
     }
+    const targetDom = inject(SI_THEME_DOM_TARGET);
     return toSignal(fromEvent(window, 'theme-switch').pipe(map$1(e => e.detail.dark)), {
-        initialValue: document.documentElement.classList.contains('app--dark')
+        initialValue: targetDom.element.classList.contains('app--dark')
     });
 };
 
@@ -775,5 +811,5 @@ const injectIsDarkTheme = () => {
  * Generated bundle index. Do not edit.
  */
 
-export { ELEMENT_THEME_NAME, SI_THEME_LOCAL_STORAGE_KEY, SiDefaultThemeStore, SiThemeService, SiThemeStore, elementTheme, injectIsDarkTheme };
+export { ELEMENT_THEME_NAME, SI_THEME_DOM_TARGET, SI_THEME_LOCAL_STORAGE_KEY, SiDefaultThemeStore, SiThemeService, SiThemeStore, elementTheme, injectIsDarkTheme };
 //# sourceMappingURL=siemens-element-ng-theme.mjs.map