@siemens/element-ng 51.4.0 → 51.6.0

package/fesm2022/siemens-element-ng-empty-state.mjs

@@ -24,11 +24,11 @@ class SiEmptyStateComponent {
     content = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "content" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiEmptyStateComponent, isStandalone: true, selector: "si-empty-state", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"list-group-item-empty\">\n  <si-icon class=\"state-icon\" [icon]=\"icon()\" />\n  <span class=\"si-h3 my-6 text-center\">{{ heading() | translate }}</span>\n  @if (content()) {\n    <p class=\"text-pre-wrap text-center mb-6\">{{ content() | translate }}</p>\n  }\n  <ng-content />\n</div>\n", styles: [".list-group-item-empty{min-block-size:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-inline:var(--si-sys-sizing-spacing-x-80);padding-block:var(--si-sys-sizing-spacing-y-90)}.state-icon{color:var(--si-sys-color-text-secondary);font-size:4rem}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiEmptyStateComponent, isStandalone: true, selector: "si-empty-state", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"empty-state-container\">\n  <si-icon class=\"state-icon\" [icon]=\"icon()\" />\n  <span class=\"si-h3 my-6 text-center\">{{ heading() | translate }}</span>\n  @if (content()) {\n    <p class=\"text-pre-wrap text-center mb-6\">{{ content() | translate }}</p>\n  }\n  <ng-content />\n</div>\n", styles: [".empty-state-container{min-block-size:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-inline:var(--si-sys-sizing-spacing-x-80);padding-block:var(--si-sys-sizing-spacing-y-90)}.state-icon{color:var(--si-sys-color-text-secondary);font-size:4rem}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiEmptyStateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-empty-state', imports: [SiIconComponent, SiTranslatePipe], template: "<div class=\"list-group-item-empty\">\n  <si-icon class=\"state-icon\" [icon]=\"icon()\" />\n  <span class=\"si-h3 my-6 text-center\">{{ heading() | translate }}</span>\n  @if (content()) {\n    <p class=\"text-pre-wrap text-center mb-6\">{{ content() | translate }}</p>\n  }\n  <ng-content />\n</div>\n", styles: [".list-group-item-empty{min-block-size:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-inline:var(--si-sys-sizing-spacing-x-80);padding-block:var(--si-sys-sizing-spacing-y-90)}.state-icon{color:var(--si-sys-color-text-secondary);font-size:4rem}\n"] }]
+            args: [{ selector: 'si-empty-state', imports: [SiIconComponent, SiTranslatePipe], template: "<div class=\"empty-state-container\">\n  <si-icon class=\"state-icon\" [icon]=\"icon()\" />\n  <span class=\"si-h3 my-6 text-center\">{{ heading() | translate }}</span>\n  @if (content()) {\n    <p class=\"text-pre-wrap text-center mb-6\">{{ content() | translate }}</p>\n  }\n  <ng-content />\n</div>\n", styles: [".empty-state-container{min-block-size:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-inline:var(--si-sys-sizing-spacing-x-80);padding-block:var(--si-sys-sizing-spacing-y-90)}.state-icon{color:var(--si-sys-color-text-secondary);font-size:4rem}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }] } });
 
 /**

package/fesm2022/siemens-element-ng-empty-state.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-empty-state.mjs","sources":["../../../../projects/element-ng/empty-state/si-empty-state.component.ts","../../../../projects/element-ng/empty-state/si-empty-state.component.html","../../../../projects/element-ng/empty-state/si-empty-state.module.ts","../../../../projects/element-ng/empty-state/index.ts","../../../../projects/element-ng/empty-state/siemens-element-ng-empty-state.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Component, input } from '@angular/core';\nimport { SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-empty-state',\n  imports: [SiIconComponent, SiTranslatePipe],\n  templateUrl: './si-empty-state.component.html',\n  styleUrl: './si-empty-state.component.scss'\n})\nexport class SiEmptyStateComponent {\n  /**\n   * CSS class name of the desired icon.\n   */\n  readonly icon = input.required<string>();\n\n  /**\n   * Heading of empty state content.\n   */\n  readonly heading = input.required<TranslatableString>();\n\n  /**\n   * Description of empty state content.\n   */\n  readonly content = input<TranslatableString>();\n}\n","<div class=\"list-group-item-empty\">\n  <si-icon class=\"state-icon\" [icon]=\"icon()\" />\n  <span class=\"si-h3 my-6 text-center\">{{ heading() | translate }}</span>\n  @if (content()) {\n    <p class=\"text-pre-wrap text-center mb-6\">{{ content() | translate }}</p>\n  }\n  <ng-content />\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiEmptyStateComponent } from './si-empty-state.component';\n\n@NgModule({\n  imports: [SiEmptyStateComponent],\n  exports: [SiEmptyStateComponent]\n})\nexport class SiEmptyStateModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-empty-state.component';\nexport * from './si-empty-state.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAAA;;;AAGG;MAWU,qBAAqB,CAAA;AAChC;;AAEG;IACM,IAAI,GAAG,KAAK,CAAC,QAAQ;6EAAU;AAExC;;AAEG;IACM,OAAO,GAAG,KAAK,CAAC,QAAQ;gFAAsB;AAEvD;;AAEG;AACM,IAAA,OAAO,GAAG,KAAK;2FAAsB;uGAdnC,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECdlC,iTAQA,EAAA,MAAA,EAAA,CAAA,iSAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDEY,eAAe,iEAAE,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,CAAA;;2FAI/B,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBANjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,OAAA,EACjB,CAAC,eAAe,EAAE,eAAe,CAAC,EAAA,QAAA,EAAA,iTAAA,EAAA,MAAA,EAAA,CAAA,iSAAA,CAAA,EAAA;;;AEV7C;;;AAGG;MASU,kBAAkB,CAAA;uGAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;wGAAlB,kBAAkB,EAAA,OAAA,EAAA,CAHnB,qBAAqB,CAAA,EAAA,OAAA,EAAA,CACrB,qBAAqB,CAAA,EAAA,CAAA;AAEpB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,YAHnB,qBAAqB,CAAA,EAAA,CAAA;;2FAGpB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAJ9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,qBAAqB,CAAC;oBAChC,OAAO,EAAE,CAAC,qBAAqB;AAChC,iBAAA;;;ACXD;;;AAGG;;ACHH;;AAEG;;"}
+{"version":3,"file":"siemens-element-ng-empty-state.mjs","sources":["../../../../projects/element-ng/empty-state/si-empty-state.component.ts","../../../../projects/element-ng/empty-state/si-empty-state.component.html","../../../../projects/element-ng/empty-state/si-empty-state.module.ts","../../../../projects/element-ng/empty-state/index.ts","../../../../projects/element-ng/empty-state/siemens-element-ng-empty-state.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Component, input } from '@angular/core';\nimport { SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-empty-state',\n  imports: [SiIconComponent, SiTranslatePipe],\n  templateUrl: './si-empty-state.component.html',\n  styleUrl: './si-empty-state.component.scss'\n})\nexport class SiEmptyStateComponent {\n  /**\n   * CSS class name of the desired icon.\n   */\n  readonly icon = input.required<string>();\n\n  /**\n   * Heading of empty state content.\n   */\n  readonly heading = input.required<TranslatableString>();\n\n  /**\n   * Description of empty state content.\n   */\n  readonly content = input<TranslatableString>();\n}\n","<div class=\"empty-state-container\">\n  <si-icon class=\"state-icon\" [icon]=\"icon()\" />\n  <span class=\"si-h3 my-6 text-center\">{{ heading() | translate }}</span>\n  @if (content()) {\n    <p class=\"text-pre-wrap text-center mb-6\">{{ content() | translate }}</p>\n  }\n  <ng-content />\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiEmptyStateComponent } from './si-empty-state.component';\n\n@NgModule({\n  imports: [SiEmptyStateComponent],\n  exports: [SiEmptyStateComponent]\n})\nexport class SiEmptyStateModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-empty-state.component';\nexport * from './si-empty-state.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAAA;;;AAGG;MAWU,qBAAqB,CAAA;AAChC;;AAEG;IACM,IAAI,GAAG,KAAK,CAAC,QAAQ;6EAAU;AAExC;;AAEG;IACM,OAAO,GAAG,KAAK,CAAC,QAAQ;gFAAsB;AAEvD;;AAEG;AACM,IAAA,OAAO,GAAG,KAAK;2FAAsB;uGAdnC,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECdlC,iTAQA,EAAA,MAAA,EAAA,CAAA,iSAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDEY,eAAe,iEAAE,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,CAAA;;2FAI/B,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBANjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,OAAA,EACjB,CAAC,eAAe,EAAE,eAAe,CAAC,EAAA,QAAA,EAAA,iTAAA,EAAA,MAAA,EAAA,CAAA,iSAAA,CAAA,EAAA;;;AEV7C;;;AAGG;MASU,kBAAkB,CAAA;uGAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;wGAAlB,kBAAkB,EAAA,OAAA,EAAA,CAHnB,qBAAqB,CAAA,EAAA,OAAA,EAAA,CACrB,qBAAqB,CAAA,EAAA,CAAA;AAEpB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,YAHnB,qBAAqB,CAAA,EAAA,CAAA;;2FAGpB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAJ9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,qBAAqB,CAAC;oBAChC,OAAO,EAAE,CAAC,qBAAqB;AAChC,iBAAA;;;ACXD;;;AAGG;;ACHH;;AAEG;;"}

package/fesm2022/siemens-element-ng-filtered-search.mjs

@@ -1,6 +1,6 @@
 import { formatDate, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, model, output, viewChild, inject, Injector, afterNextRender, computed, Component, signal, Directive, LOCALE_ID, DestroyRef, untracked, booleanAttribute, ElementRef, viewChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { input, model, output, viewChild, inject, Injector, computed, afterNextRender, Component, signal, Directive, LOCALE_ID, DestroyRef, untracked, booleanAttribute, ElementRef, viewChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { elementCancel, elementSearch } from '@siemens/element-icons';
 import { defaultConnectedOverlayScrollStrategyFactory, isRTL } from '@siemens/element-ng/common';
@@ -128,7 +128,7 @@ class SiFilteredSearchInputComponent {
     /** Public method to focus the input element */
     focus() {
         this.inputElement().nativeElement.focus();
-        afterNextRender(() => this.typeahead().updateOverlayPosition(), { injector: this.injector });
+        this.updateOverlayPositionAfterRender();
     }
     typeaheadCreateOption = computed(() => this.freeTextCriterion() && !this.maxCriteriaReached() && this.allowFreeText()
         ? this.searchForFreeTextLabel()
@@ -149,6 +149,7 @@ class SiFilteredSearchInputComponent {
         }
         const tokens = inputElement.value.split(';');
         let consumedTokenCount = 0;
+        let createdCriterion = false;
         for (const [index, token] of tokens.entries()) {
             const isLastToken = index === tokens.length - 1;
             const criterionMatch = token.match(SiFilteredSearchInputComponent.criterionRegex);
@@ -168,10 +169,14 @@ class SiFilteredSearchInputComponent {
             if (!accepted) {
                 break;
             }
+            createdCriterion = true;
             consumedTokenCount++;
         }
         inputElement.value = tokens.slice(consumedTokenCount).join(';');
         this.searchValue.set(inputElement.value);
+        if (createdCriterion) {
+            this.updateOverlayPositionAfterRender();
+        }
     }
     freeTextBlurHandler() {
         queueMicrotask(() => {
@@ -195,6 +200,14 @@ class SiFilteredSearchInputComponent {
             this.searchValue.set('');
         }
     }
+    updateOverlayPositionAfterRender() {
+        afterNextRender(() => {
+            if (this.inputElement().nativeElement.matches(':focus')) {
+                this.inputElement().nativeElement.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            }
+            this.typeahead().updateOverlayPosition();
+        }, { injector: this.injector });
+    }
     requestCriterionByName(criterionMatch, editOnCreation) {
         let accepted = false;
         this.createCriterionByName.emit({
@@ -452,12 +465,13 @@ class SiFilteredSearchOptionValueBase extends SiFilteredSearchValueBase {
         if (initialValue.value?.length) {
             // Emit normalization after initialization, not during change detection.
             this.options()
-                .pipe(take(1), observeOn(asapScheduler), takeUntilDestroyed(this.destroyRef))
-                .subscribe(options => {
+                .pipe(take(1), map(options => this.criterionValue() === initialValue
+                ? this.processTypeaheadOptions(options)
+                : undefined), observeOn(asapScheduler), takeUntilDestroyed(this.destroyRef))
+                .subscribe(value => {
                 if (this.criterionValue() !== initialValue) {
                     return;
                 }
-                const value = this.processTypeaheadOptions(options);
                 if (value !== undefined) {
                     this.criterionValue.set({ ...initialValue, value });
                 }