@siemens/element-ng 47.2.0 → 47.4.0

package/photo-upload/si-photo-upload.component.d.ts

@@ -0,0 +1,298 @@
+import { ElementRef, OnChanges, OnDestroy, SimpleChanges, TemplateRef } from '@angular/core';
+import { SafeResourceUrl } from '@angular/platform-browser';
+import { ModalRef } from '@siemens/element-ng/modal';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
+import { ImageCroppedEvent, ImageCropperComponent } from 'ngx-image-cropper';
+import * as i0 from "@angular/core";
+import * as i1 from "@siemens/element-ng/avatar";
+/**
+ * A component used to upload, edit, and delete a user's photo. The user can upload
+ * a photo either via file browser or a URL to the photo. You can set the source
+ * photo with the `sourcePhoto` Data URL input or the `sourcePhotoUrl` URL input.
+ * If you already have a cropped image you can set it with the `croppedPhoto` input.
+ * Cropping changes are emitted via the `croppedPhotoChange` output.
+ */
+export declare class SiPhotoUploadComponent implements OnChanges, OnDestroy {
+    private static idCounter;
+    /**
+     * Indicate that changing or uploads are disabled.
+     *
+     * @defaultValue false
+     */
+    readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Optionally disable image cropping.
+     *
+     * @defaultValue false
+     */
+    readonly disabledCropping: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Accepted image formats for the file selection dialog.
+     *
+     * @defaultValue '.png, .jpg, .jpeg'
+     *
+     * @see
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#attr-accept
+     */
+    readonly acceptedUploadFormats: import("@angular/core").InputSignal<string>;
+    /**
+     * Maximum allowed file size of the uploaded file in kilobytes.
+     *
+     * @defaultValue 2048
+     */
+    readonly maxFileSize: import("@angular/core").InputSignal<number>;
+    /**
+     * If the uploaded file is of an unsupported type, this
+     * error message will be displayed to the user.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_PHOTO_UPLOAD.ERROR_FILE_TYPE:The image file is not valid. Please upload a PNG or JP(E)G.`
+     * ```
+     */
+    readonly uploadErrorWrongType: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * If the uploaded file exceeds the allowed upload size, this
+     * error message will be displayed to the user.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_PHOTO_UPLOAD.ERROR_FILE_SIZE_EXCEEDED:The actual file size {{mb}} MB exceeds the {{maxSizeMb}} MB limit.`
+     * ```
+     */
+    readonly uploadErrorTooBig: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * Alternative text for the photo.
+     *
+     * @defaultValue ''
+     */
+    readonly photoAltText: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * Alternative text for the photo´s placeholder.
+     * The value will be used to calculate the background color when `autoColor` is true.
+     *
+     * @defaultValue ''
+     */
+    readonly placeholderAltText: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * Text for the button changing the photo.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_PHOTO_UPLOAD.CHANGE_PHOTO:Change`
+     * ```
+     */
+    readonly changePhotoText: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * Cropper frame aria label.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_PHOTO_UPLOAD.CROPPER_FRAME_LABEL:Crop photo`
+     * ```
+     */
+    readonly cropperFrameAriaLabel: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * Text for the button uploading a photo.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_PHOTO_UPLOAD.UPLOAD_PHOTO:Upload photo`
+     * ```
+     */
+    readonly uploadPhotoText: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * Text for the button removing the photo.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_PHOTO_UPLOAD.REMOVE:Remove`
+     * ```
+     */
+    readonly removePhotoText: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * Text for the button cancelling the editing process.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_PHOTO_UPLOAD.CANCEL:Cancel`
+     * ```
+     */
+    readonly cancelEditText: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * Text for the button applying the edited photo.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_PHOTO_UPLOAD.APPLY_PHOTO:Apply`
+     * ```
+     */
+    readonly applyEditText: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * Text displayed as header of the editing modal.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_PHOTO_UPLOAD.MODAL_TITLE:Avatar photo`
+     * ```
+     */
+    readonly modalHeader: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * Text displayed as description of the editing modal.
+     */
+    readonly modalDescription: import("@angular/core").InputSignal<TranslatableString | undefined>;
+    /**
+     * Output format of the edited image.
+     *
+     * @defaultValue 'jpeg'
+     */
+    readonly cropperImageFormat: import("@angular/core").InputSignal<"png" | "jpeg">;
+    /**
+     * The width / height ratio (e.g. 1 / 1 for a square, 4 / 3, 16 / 9 ...).
+     *
+     * @defaultValue 1
+     */
+    readonly cropperAspectRatio: import("@angular/core").InputSignal<number>;
+    /**
+     * Whether to keep the width and height of the cropped image equal according
+     * to the aspectRatio.
+     *
+     * @defaultValue true
+     */
+    readonly cropperMaintainAspectRatio: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * When set to true, padding will be added around the image to make it fit to
+     * the aspect ratio. Be aware that this transformation will cause the loaded
+     * image to be a png file with an increased base64 string payload.
+     *
+     * @defaultValue false
+     */
+    readonly cropperContainWithinAspectRatio: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The cropper´s width cannot be made smaller than this number of pixels
+     * (relative to original image´s size). (0 = disabled).
+     *
+     * @defaultValue 50
+     */
+    readonly cropperMinWidth: import("@angular/core").InputSignal<number>;
+    /**
+     * The cropper´s height cannot be made smaller than this number of pixels
+     * (relative to original image´s size). Will be ignored if
+     * `cropperMaintainAspectRatio` is set. (0 = disabled).
+     *
+     * @defaultValue 50
+     */
+    readonly cropperMinHeight: import("@angular/core").InputSignal<number>;
+    /**
+     * The cropper´s width cannot be made bigger than this number of pixels.
+     * Default is 0 (disabled).
+     *
+     * @defaultValue 0
+     */
+    readonly cropperMaxWidth: import("@angular/core").InputSignal<number>;
+    /**
+     * The cropper´s height cannot be made bigger than this number of pixels.
+     * Default is 0 (disabled).
+     *
+     * @defaultValue 0
+     */
+    readonly cropperMaxHeight: import("@angular/core").InputSignal<number>;
+    /**
+     * Set this to true for a round cropper. Resulting image will still
+     * be square, but visually clipped with a border-radius: 50% on the
+     * resulting image to show it as round.
+     *
+     * @defaultValue true
+     */
+    readonly roundImage: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The input photo to be used for cropping. A string in [Data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) format
+     * with base64 encoding.
+     */
+    readonly sourcePhoto: import("@angular/core").ModelSignal<string | undefined>;
+    /**
+     * URL to a photo to be used for cropping.
+     */
+    readonly sourcePhotoUrl: import("@angular/core").InputSignal<string | undefined>;
+    /**
+     * The photo to be displayed and edited (when not readonly).
+     */
+    readonly croppedPhoto: import("@angular/core").ModelSignal<string | undefined>;
+    protected readonly editPhotoTemplate: import("@angular/core").Signal<TemplateRef<any>>;
+    protected readonly fileInput: import("@angular/core").Signal<ElementRef<any>>;
+    protected readonly imageCropper: import("@angular/core").Signal<ImageCropperComponent | undefined>;
+    protected readonly titleId: string;
+    /**
+     * The trusted photo url string which is used to display the photo.
+     */
+    protected readonly sanitizedPhotoUrl: import("@angular/core").WritableSignal<SafeResourceUrl | undefined>;
+    /**
+     * The appropriate error message displayed to the user. Might be
+     * `uploadErrorWrongType` or `uploadErrorTooBig`.
+     */
+    protected readonly uploadErrorMessage: import("@angular/core").WritableSignal<string | undefined>;
+    protected readonly editButtonText: import("@angular/core").Signal<TranslatableString>;
+    protected readonly currentFileSizeKilobytes: import("@angular/core").WritableSignal<number>;
+    protected readonly currentFileSizeMegabytes: import("@angular/core").WritableSignal<number>;
+    protected readonly maxSizeMb: import("@angular/core").Signal<number>;
+    /**
+     * The photo instance to be used in the image cropper. We need a different
+     * reference than `sourcePhoto` to support the cancel after uploading
+     * a new photo. While `sourcePhoto` is A and image cropper uploads B,
+     * we should not replace `sourcePhoto` A until user presses apply.
+     */
+    protected readonly imageCropperPhoto: import("@angular/core").WritableSignal<string | undefined>;
+    protected readonly icons: Record<"elementCancel" | "elementCircleFilled" | "elementStateExclamationMark", string>;
+    /**
+     * Reference to the modal displaying the photo to edit.
+     */
+    protected modalRef?: ModalRef;
+    /**
+     * The last cropped event of the image cropper component.
+     * Will be set on every mouse drag of the user. It contains
+     * the cropped image and the position. When user completes
+     * the cropping, the data from the last event is used.
+     */
+    private imageCroppedEvent?;
+    /**
+     * Applied cropper position necessary to restore the cropper position when the use press the Change button.
+     */
+    private cropperPosition?;
+    private readonly sanitizer;
+    private readonly modalService;
+    private readonly autoBackgroundColorDirective;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    /**
+     * Opens a modal dialog with the cropping component.
+     */
+    protected showCroppingDialog(): void;
+    protected fileUpload(event: Event): void;
+    private updateCroppedPhoto;
+    protected removePhoto(): void;
+    /**
+     * Invoked when user cropped the photo and pressed apply button.
+     * Updates the current photo by the selected cropped photo and
+     * closes the modal dialog.
+     */
+    protected imageCropperApplied(): void;
+    protected imageCropperCanceled(): void;
+    /**
+     * Callback from the image cropper on every mouse drag invoking a cropping.
+     *
+     * @param event - Event containing the cropped image and the image cropped position.
+     *
+     */
+    protected cropperImageCropped(event: ImageCroppedEvent): void;
+    /**
+     * Lifecycle hook from the image cropper component. Informs
+     * us when initialized and ready.
+     */
+    protected cropperReady(): void;
+    private resetFileInputValue;
+    private resetErrorMessage;
+    private setPhoto;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiPhotoUploadComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiPhotoUploadComponent, "si-photo-upload", never, { "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabledCropping": { "alias": "disabledCropping"; "required": false; "isSignal": true; }; "acceptedUploadFormats": { "alias": "acceptedUploadFormats"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "uploadErrorWrongType": { "alias": "uploadErrorWrongType"; "required": false; "isSignal": true; }; "uploadErrorTooBig": { "alias": "uploadErrorTooBig"; "required": false; "isSignal": true; }; "photoAltText": { "alias": "photoAltText"; "required": false; "isSignal": true; }; "placeholderAltText": { "alias": "placeholderAltText"; "required": false; "isSignal": true; }; "changePhotoText": { "alias": "changePhotoText"; "required": false; "isSignal": true; }; "cropperFrameAriaLabel": { "alias": "cropperFrameAriaLabel"; "required": false; "isSignal": true; }; "uploadPhotoText": { "alias": "uploadPhotoText"; "required": false; "isSignal": true; }; "removePhotoText": { "alias": "removePhotoText"; "required": false; "isSignal": true; }; "cancelEditText": { "alias": "cancelEditText"; "required": false; "isSignal": true; }; "applyEditText": { "alias": "applyEditText"; "required": false; "isSignal": true; }; "modalHeader": { "alias": "modalHeader"; "required": false; "isSignal": true; }; "modalDescription": { "alias": "modalDescription"; "required": false; "isSignal": true; }; "cropperImageFormat": { "alias": "cropperImageFormat"; "required": false; "isSignal": true; }; "cropperAspectRatio": { "alias": "cropperAspectRatio"; "required": false; "isSignal": true; }; "cropperMaintainAspectRatio": { "alias": "cropperMaintainAspectRatio"; "required": false; "isSignal": true; }; "cropperContainWithinAspectRatio": { "alias": "cropperContainWithinAspectRatio"; "required": false; "isSignal": true; }; "cropperMinWidth": { "alias": "cropperMinWidth"; "required": false; "isSignal": true; }; "cropperMinHeight": { "alias": "cropperMinHeight"; "required": false; "isSignal": true; }; "cropperMaxWidth": { "alias": "cropperMaxWidth"; "required": false; "isSignal": true; }; "cropperMaxHeight": { "alias": "cropperMaxHeight"; "required": false; "isSignal": true; }; "roundImage": { "alias": "roundImage"; "required": false; "isSignal": true; }; "sourcePhoto": { "alias": "sourcePhoto"; "required": false; "isSignal": true; }; "sourcePhotoUrl": { "alias": "sourcePhotoUrl"; "required": false; "isSignal": true; }; "croppedPhoto": { "alias": "croppedPhoto"; "required": false; "isSignal": true; }; }, { "sourcePhoto": "sourcePhotoChange"; "croppedPhoto": "croppedPhotoChange"; }, never, never, true, [{ directive: typeof i1.SiAvatarBackgroundColorDirective; inputs: { "color": "color"; "autoColor": "autoColor"; }; outputs: {}; }]>;
+}

package/pills-input/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+export * from './si-pills-input.component';
+export * from './si-pills-input.module';
+export * from './si-pills-input-csv.directive';
+export * from './si-pills-input-email.directive';
+export * from './si-pills-input-value-handler';

package/pills-input/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/siemens-element-ng-pills-input.mjs"
+}

package/pills-input/si-input-pill.component.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class SiInputPillComponent {
+    readonly deletePill: import("@angular/core").OutputEmitterRef<void>;
+    /** @defaultValue false */
+    readonly hideClose: import("@angular/core").InputSignal<boolean>;
+    protected readonly icons: Record<"elementCancel", string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiInputPillComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiInputPillComponent, "si-input-pill", never, { "hideClose": { "alias": "hideClose"; "required": false; "isSignal": true; }; }, { "deletePill": "deletePill"; }, never, ["*"], true, never>;
+}

package/pills-input/si-pills-input-csv.directive.d.ts

@@ -0,0 +1,8 @@
+import { SiPillsInputPatternBase } from './si-pills-input-pattern-base';
+import * as i0 from "@angular/core";
+export declare class SiPillsInputCsvDirective extends SiPillsInputPatternBase {
+    /** @defaultValue undefined */
+    readonly validationRegex: import("@angular/core").InputSignal<RegExp | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiPillsInputCsvDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SiPillsInputCsvDirective, "[siPillsInputCsv]", never, { "validationRegex": { "alias": "pillsInputCsvItemRegex"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/pills-input/si-pills-input-email.directive.d.ts

@@ -0,0 +1,10 @@
+import { SiPillsInputPatternBase } from './si-pills-input-pattern-base';
+import * as i0 from "@angular/core";
+export declare class SiPillsInputEmailDirective extends SiPillsInputPatternBase {
+    /**
+     * @defaultValue signal(EMAIL_REGEX).asReadonly()
+     */
+    readonly validationRegex: import("@angular/core").Signal<RegExp>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiPillsInputEmailDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SiPillsInputEmailDirective, "[siPillsInputEmail]", never, {}, {}, never, never, true, never>;
+}

package/pills-input/si-pills-input-pattern-base.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { Signal } from '@angular/core';
+import { SiPillsInputValueHandlerTrigger, SiPillsInputValueParseResult } from './si-pills-input-value-handler';
+export declare const SEPARATOR_REGEX: RegExp;
+export declare abstract class SiPillsInputPatternBase {
+    /**
+     * Regex to split the input value into segments.
+     *
+     * @defaultValue SEPARATOR_REGEX
+     */
+    readonly separatorRegex: import("@angular/core").WritableSignal<RegExp>;
+    /** Regex to validate an input string item. */
+    readonly validationRegex?: Signal<RegExp | undefined>;
+    /** @internal */
+    handle(value: string, trigger: SiPillsInputValueHandlerTrigger): SiPillsInputValueParseResult | undefined;
+}

package/pills-input/si-pills-input-value-handler.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+export interface SiPillsInputValueParseResult {
+    newValue: string;
+    newPills: string[];
+}
+export type SiPillsInputValueHandlerTrigger = 'input' | 'keydown.enter' | 'blur';
+export declare abstract class SiPillsInputValueHandlerDirective {
+    /** @internal */
+    abstract handle(value: string, trigger: SiPillsInputValueHandlerTrigger): SiPillsInputValueParseResult | undefined;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiPillsInputValueHandlerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SiPillsInputValueHandlerDirective, never, never, {}, {}, never, never, true, never>;
+}

package/pills-input/si-pills-input.component.d.ts

@@ -0,0 +1,87 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { OnInit } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { SiFormItemControl } from '@siemens/element-ng/form';
+import * as i0 from "@angular/core";
+export declare class SiPillsInputComponent implements OnInit, ControlValueAccessor, SiFormItemControl {
+    private static idCounter;
+    /**
+     * The identifier of the pills-input. Will be generated if not provided.
+     *
+     * @defaultValue
+     * ```
+     * `__si-pills-input-${SiPillsInputComponent.idCounter++}`
+     * ```
+     */
+    readonly id: import("@angular/core").InputSignal<string>;
+    /**
+     * The aria-label for the inner input where users enter new items.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_PILLS_INPUT.INPUT_ELEMENT_ARIA_LABEL:Create item`
+     * ```
+     */
+    readonly inputElementAriaLabel: import("@angular/core").InputSignal<import("@siemens/element-translate-ng/translate").TranslatableString>;
+    /**
+     * Whether the pills-input is disabled.
+     *
+     * @defaultValue false
+     */
+    readonly disabledInput: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether the pills-input is readonly
+     *
+     * @defaultValue false
+     */
+    readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** The placeholder to be shown if no value is currently present. */
+    readonly placeholder: import("@angular/core").InputSignal<string | undefined>;
+    /**
+     * @defaultValue
+     * ```
+     * `${this.id()}-label`
+     * ```
+     */
+    readonly labelledby: import("@angular/core").InputSignal<string>;
+    /** @internal */
+    readonly errormessageId: string;
+    protected inputValue: string;
+    protected onTouched: () => void;
+    protected onChange: (val: any) => void;
+    protected readonly pills: import("@angular/core").WritableSignal<string[]>;
+    protected readonly activePillIndex: import("@angular/core").WritableSignal<number | undefined>;
+    protected readonly inputId: import("@angular/core").Signal<string>;
+    protected readonly disabled: import("@angular/core").Signal<boolean>;
+    protected readonly activeDescendant: import("@angular/core").Signal<string | null>;
+    protected readonly tabindex: import("@angular/core").Signal<0 | -1 | undefined>;
+    private readonly inputElement;
+    private readonly disabledNgControl;
+    private siPillsInputValueHandlerDirective;
+    private readonly cdRef;
+    private readonly elementRef;
+    ngOnInit(): void;
+    protected input(): void;
+    protected click(): void;
+    protected blur(): void;
+    protected keydownEnter(event: Event): void;
+    protected keydownBackspace(event: Event): void;
+    protected remove(index: number, focus?: boolean): void;
+    private rebuildValue;
+    protected arrowLeft(): void;
+    protected arrowRight(): void;
+    protected delete(): void;
+    /** @internal */
+    registerOnChange(fn: any): void;
+    /** @internal */
+    registerOnTouched(fn: () => void): void;
+    /** @internal */
+    setDisabledState(isDisabled: boolean): void;
+    /** @internal */
+    writeValue(value?: string[] | null): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiPillsInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiPillsInputComponent, "si-pills-input", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "inputElementAriaLabel": { "alias": "inputElementAriaLabel"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "labelledby": { "alias": "labelledby"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/pills-input/si-pills-input.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./si-pills-input.component";
+import * as i2 from "./si-pills-input-csv.directive";
+import * as i3 from "./si-pills-input-email.directive";
+export declare class SiPillsInputModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiPillsInputModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SiPillsInputModule, never, [typeof i1.SiPillsInputComponent, typeof i2.SiPillsInputCsvDirective, typeof i3.SiPillsInputEmailDirective], [typeof i1.SiPillsInputComponent, typeof i2.SiPillsInputCsvDirective, typeof i3.SiPillsInputEmailDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SiPillsInputModule>;
+}

package/popover/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+export * from './si-popover.directive';
+export * from './si-popover.module';

package/popover/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/siemens-element-ng-popover.mjs"
+}

package/popover/si-popover.component.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { ConnectedOverlayPositionChange } from '@angular/cdk/overlay';
+import { ElementRef, OnInit, TemplateRef } from '@angular/core';
+import { OverlayArrowPosition } from '@siemens/element-ng/common';
+import * as i0 from "@angular/core";
+export declare class PopoverComponent implements OnInit {
+    readonly popover: import("@angular/core").InputSignal<string | TemplateRef<any> | undefined>;
+    /** @defaultValue '' */
+    readonly popoverTitle: import("@angular/core").InputSignal<string>;
+    /** @defaultValue '' */
+    readonly containerClass: import("@angular/core").InputSignal<string>;
+    readonly icon: import("@angular/core").InputSignal<string | undefined>;
+    readonly popoverContext: import("@angular/core").InputSignal<unknown>;
+    protected readonly positionClass: import("@angular/core").WritableSignal<string>;
+    protected readonly arrowPos: import("@angular/core").WritableSignal<OverlayArrowPosition | undefined>;
+    protected popoverTemplate: TemplateRef<any> | null;
+    private elementRef;
+    ngOnInit(): void;
+    /** @internal */
+    updateArrow(change: ConnectedOverlayPositionChange, anchor?: ElementRef): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PopoverComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PopoverComponent, "si-popover", never, { "popover": { "alias": "popover"; "required": false; "isSignal": true; }; "popoverTitle": { "alias": "popoverTitle"; "required": false; "isSignal": true; }; "containerClass": { "alias": "containerClass"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "popoverContext": { "alias": "popoverContext"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/popover/si-popover.directive.d.ts

@@ -0,0 +1,89 @@
+import { OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SiPopoverDirective implements OnInit, OnDestroy {
+    /**
+     * The popover text to be displayed
+     */
+    readonly siPopover: import("@angular/core").InputSignal<string | TemplateRef<any> | undefined>;
+    /**
+     * The placement of the popover. One of 'top', 'start', end', 'bottom'
+     *
+     * @defaultValue 'auto'
+     */
+    readonly placement: import("@angular/core").InputSignal<"auto" | "start" | "end" | "top" | "bottom">;
+    readonly placementInternal: import("@angular/core").Signal<"auto" | "start" | "end" | "top" | "bottom">;
+    /**
+     * The trigger event(s) on which the popover shall be displayed.
+     * Applications can pass multiple triggers separated by space.
+     * Supported events are 'click', 'hover' and 'focus'.
+     *
+     * **Limitations:**
+     * Safari browsers do not raise a 'focus' event on host element click and 'focus'
+     * on tab key has to be enabled in the advanced browser settings.
+     *
+     * @defaultValue 'click'
+     */
+    readonly triggers: import("@angular/core").InputSignal<string>;
+    /**
+     * The title to be displayed on top for the popover
+     *
+     * @defaultValue ''
+     */
+    readonly popoverTitle: import("@angular/core").InputSignal<string>;
+    /**
+     * The class that will be applied to container of the popover
+     *
+     * @defaultValue ''
+     */
+    readonly containerClass: import("@angular/core").InputSignal<string>;
+    /**
+     * The flag determines whether to close popover on clicking outside
+     *
+     * @defaultValue true
+     */
+    readonly outsideClick: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The icon to be displayed besides popover title
+     */
+    readonly icon: import("@angular/core").InputSignal<string | undefined>;
+    /**
+     * Specify whether or not the popover is currently shown
+     *
+     * @defaultValue false
+     */
+    readonly isOpen: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * The context for the attached template
+     */
+    readonly popoverContext: import("@angular/core").InputSignal<unknown>;
+    /**
+     * Emits an event when the popover is shown
+     */
+    readonly shown: import("@angular/core").OutputEmitterRef<void>;
+    /**
+     * Emits an event when the popover is hidden
+     */
+    readonly hidden: import("@angular/core").OutputEmitterRef<void>;
+    private overlayref?;
+    private overlay;
+    private elementRef;
+    private destroyer;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Displays popover and emits 'shown' event.
+     */
+    show(): void;
+    /**
+     * Hides the popover and emits 'hidden' event.
+     */
+    hide(): void;
+    /**
+     * Updates the position of the popover based on the position strategy.
+     */
+    updatePosition(): void;
+    protected onTrigger(trigger: string): void;
+    protected focusOut(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiPopoverDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SiPopoverDirective, "[siPopover]", ["si-popover"], { "siPopover": { "alias": "siPopover"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "triggers": { "alias": "triggers"; "required": false; "isSignal": true; }; "popoverTitle": { "alias": "popoverTitle"; "required": false; "isSignal": true; }; "containerClass": { "alias": "containerClass"; "required": false; "isSignal": true; }; "outsideClick": { "alias": "outsideClick"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "popoverContext": { "alias": "popoverContext"; "required": false; "isSignal": true; }; }, { "shown": "shown"; "hidden": "hidden"; }, never, never, true, never>;
+}

package/popover/si-popover.module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./si-popover.directive";
+export declare class SiPopoverModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiPopoverModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SiPopoverModule, never, [typeof i1.SiPopoverDirective], [typeof i1.SiPopoverDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SiPopoverModule>;
+}

package/popover-next/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+export * from './si-popover-next.directive';
+export * from './si-popover-title.directive';
+export * from './si-popover-description.directive';

package/popover-next/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/siemens-element-ng-popover-next.mjs"
+}

package/popover-next/si-popover-description.directive.d.ts

@@ -0,0 +1,7 @@
+import { PopoverComponent } from './si-popover.component';
+import * as i0 from "@angular/core";
+export declare class SiPopoverDescriptionDirective {
+    readonly popover: PopoverComponent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiPopoverDescriptionDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SiPopoverDescriptionDirective, "si-popover-description", never, {}, {}, never, never, true, never>;
+}