@siemens/element-ng 48.10.0 → 49.0.0-rc.2

package/fesm2022/siemens-element-ng-landing-page.mjs

@@ -55,27 +55,27 @@ class SiLandingPageComponent {
     /**
      * Heading of the application.
      */
-    heading = input.required();
+    heading = input.required(...(ngDevMode ? [{ debugName: "heading" }] : []));
     /**
      * Secondary heading of the application.
      */
-    subheading = input();
+    subheading = input(...(ngDevMode ? [undefined, { debugName: "subheading" }] : []));
     /**
      * Short description of the application.
      */
-    subtitle = input.required();
+    subtitle = input.required(...(ngDevMode ? [{ debugName: "subtitle" }] : []));
     /**
      * List of links (e.g. Corporate information)
      *
      * @defaultValue []
      */
-    links = input([]);
+    links = input([], ...(ngDevMode ? [{ debugName: "links" }] : []));
     /**
      * URL to custom background image
      *
      * @defaultValue './assets/images/landing-page-steel.webp'
      */
-    backgroundImageUrl = input('./assets/images/landing-page-steel.webp');
+    backgroundImageUrl = input('./assets/images/landing-page-steel.webp', ...(ngDevMode ? [{ debugName: "backgroundImageUrl" }] : []));
     /**
      * URL to custom brand image.
      *
@@ -85,7 +85,7 @@ class SiLandingPageComponent {
      * <si-landing-page style="--landing-page-logo: url('https://example.com'); --landing-page-logo-width: 100px; --landing-page-logo-height: 100px" />
      * ```
      */
-    logoUrl = input();
+    logoUrl = input(...(ngDevMode ? [undefined, { debugName: "logoUrl" }] : []));
     /**
      * Input of si-language-switcher: Key for translation.
      * If your languages are already translated, you may display them without any
@@ -93,50 +93,50 @@ class SiLandingPageComponent {
      *
      * @defaultValue 'LANGUAGE'
      */
-    translationKey = input('LANGUAGE');
+    translationKey = input('LANGUAGE', ...(ngDevMode ? [{ debugName: "translationKey" }] : []));
     /**
      * Input of si-language-switcher: List of all available languages in this
      * application.
      *
      * @defaultValue []
      */
-    availableLanguages = input([]);
+    availableLanguages = input([], ...(ngDevMode ? [{ debugName: "availableLanguages" }] : []));
     /**
      *
      * Config to enable/disable general alerts on landing page
      */
-    announcement = input();
+    announcement = input(...(ngDevMode ? [undefined, { debugName: "announcement" }] : []));
     /**
      *
      * Config to enable/disable login related error/alerts
      */
-    loginAlert = input();
+    loginAlert = input(...(ngDevMode ? [undefined, { debugName: "loginAlert" }] : []));
     /**
      * Warning text for Live Data. Can be shown, if there is no legal artifact which needs immediate user attention.
      */
-    liveDataWarning = input();
+    liveDataWarning = input(...(ngDevMode ? [undefined, { debugName: "liveDataWarning" }] : []));
     /**
      * Text for some legal artifacts (e.g. Terms of Use) that needs more attention before the login.
      */
-    implicitLegalAcknowledge = input();
+    implicitLegalAcknowledge = input(...(ngDevMode ? [undefined, { debugName: "implicitLegalAcknowledge" }] : []));
     /**
      * Version of the application.
      */
-    version = input();
+    version = input(...(ngDevMode ? [undefined, { debugName: "version" }] : []));
     /**
      * Copyright information to be displayed. Alternatively, you can use the {@link SI_COPYRIGHT_DETAILS} global inject.
      */
-    copyrightDetails = input();
+    copyrightDetails = input(...(ngDevMode ? [undefined, { debugName: "copyrightDetails" }] : []));
     /**
      * Option to display the landing page content in full height.
      *
      * @defaultValue false
      */
-    isFullHeightSection = signal(false);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiLandingPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiLandingPageComponent, isStandalone: true, selector: "si-landing-page", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, subheading: { classPropertyName: "subheading", publicName: "subheading", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: true, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, backgroundImageUrl: { classPropertyName: "backgroundImageUrl", publicName: "backgroundImageUrl", isSignal: true, isRequired: false, transformFunction: null }, logoUrl: { classPropertyName: "logoUrl", publicName: "logoUrl", isSignal: true, isRequired: false, transformFunction: null }, translationKey: { classPropertyName: "translationKey", publicName: "translationKey", isSignal: true, isRequired: false, transformFunction: null }, availableLanguages: { classPropertyName: "availableLanguages", publicName: "availableLanguages", isSignal: true, isRequired: false, transformFunction: null }, announcement: { classPropertyName: "announcement", publicName: "announcement", isSignal: true, isRequired: false, transformFunction: null }, loginAlert: { classPropertyName: "loginAlert", publicName: "loginAlert", isSignal: true, isRequired: false, transformFunction: null }, liveDataWarning: { classPropertyName: "liveDataWarning", publicName: "liveDataWarning", isSignal: true, isRequired: false, transformFunction: null }, implicitLegalAcknowledge: { classPropertyName: "implicitLegalAcknowledge", publicName: "implicitLegalAcknowledge", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null }, copyrightDetails: { classPropertyName: "copyrightDetails", publicName: "copyrightDetails", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let announcement = this.announcement();\n@let availableLanguages = this.availableLanguages();\n@let loginAlert = this.loginAlert();\n@let implicitLegalAcknowledge = this.implicitLegalAcknowledge();\n@let liveDataWarning = this.liveDataWarning();\n@let isFullHeightSection = this.isFullHeightSection();\n\n@if (announcement) {\n  <si-inline-notification\n    class=\"rounded-0\"\n    [severity]=\"announcement.severity\"\n    [heading]=\"announcement.heading\"\n    [message]=\"announcement.message\"\n    [action]=\"announcement.action\"\n    [translationParams]=\"announcement.translationParams\"\n  />\n}\n<div class=\"landing-page\">\n  <div\n    class=\"landing-page-background d-none d-md-block\"\n    [style.background-image]=\"'url(' + backgroundImageUrl() + ')'\"\n  >\n  </div>\n  <div class=\"landing-page-content\">\n    <div class=\"landing-page-content-inner\">\n      @if (!isFullHeightSection) {\n        <div class=\"d-flex justify-content-between align-items-center pb-9\">\n          @if (!logoUrl()) {\n            <span role=\"img\" class=\"landing-page-logo\"></span>\n          } @else {\n            <img\n              class=\"landing-page-logo landing-page-custom-logo\"\n              [src]=\"logoUrl()\"\n              [alt]=\"heading() + '\\'s Background'\"\n            />\n          }\n          @if (availableLanguages.length > 1) {\n            <div class=\"landing-page-language-switcher\">\n              <si-language-switcher\n                [translationKey]=\"translationKey()\"\n                [availableLanguages]=\"availableLanguages\"\n              />\n            </div>\n          }\n        </div>\n      }\n      <div class=\"landing-page-main\">\n        @if (!isFullHeightSection) {\n          @if (subheading()) {\n            <div class=\"si-h2\">{{ subheading() | translate }}</div>\n          }\n          <h1 class=\"si-h1-bold my-2\">{{ heading() | translate }}</h1>\n          <div class=\"position-relative\">\n            <h2 class=\"mt-10 si-h2\" [class.invisible]=\"loginAlert\">{{ subtitle() | translate }}</h2>\n            @if (loginAlert) {\n              <si-inline-notification\n                class=\"landing-page-alert w-100\"\n                [severity]=\"loginAlert.severity || 'danger'\"\n                [heading]=\"loginAlert.heading\"\n                [message]=\"loginAlert.message\"\n              />\n            }\n          </div>\n        }\n        <div class=\"landing-page-custom-content\">\n          <ng-content />\n          @if (!isFullHeightSection) {\n            @if (implicitLegalAcknowledge) {\n              @if (typeof implicitLegalAcknowledge === 'string') {\n                <div class=\"text-secondary mt-8\" [innerHTML]=\"implicitLegalAcknowledge\"></div>\n              } @else {\n                <div class=\"text-secondary mt-8\">\n                  <ng-container [ngTemplateOutlet]=\"implicitLegalAcknowledge\" />\n                </div>\n              }\n            }\n            @if (liveDataWarning) {\n              <div class=\"text-secondary mt-8\">\n                <div class=\"si-h5\">{{ liveDataWarning.title | translate }}</div>\n                <div class=\"si-body my-4\">{{ liveDataWarning.content | translate }}</div>\n              </div>\n            }\n          }\n        </div>\n      </div>\n      @if (!isFullHeightSection) {\n        <footer>\n          <div>\n            <div class=\"d-flex justify-content-start flex-row flex-wrap mt-6\">\n              @for (link of links(); track $index) {\n                <span>\n                  <a siLinkDefaultTarget=\"_blank\" class=\"si-body me-6\" [siLink]=\"link\">\n                    {{ link.title | translate }}\n                  </a>\n                </span>\n              }\n            </div>\n            <div class=\"si-caption mt-4 mb-6 text-secondary d-flex flex-wrap\">\n              @if (version()) {\n                <span class=\"me-6\">{{ version() }}</span>\n              }\n              <si-copyright-notice [copyright]=\"copyrightDetails()\" />\n            </div>\n          </div>\n        </footer>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;block-size:100%;padding-block-start:calc(var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px))}.landing-page{display:flex;flex-direction:row-reverse;flex-grow:1}.landing-page-background{background-size:cover;background-position:center;inline-size:60%}.landing-page-content{block-size:100vh;overflow-y:auto;inline-size:40%;background-color:var(--element-base-0);padding-block:32px 32px;padding-inline:96px}.landing-page-content:has(si-explicit-legal-acknowledge,si-change-password){block-size:100%}.landing-page-content-inner{block-size:100%;min-block-size:min-content;display:flex;flex-direction:column;justify-content:space-between}.landing-page-main:has(si-explicit-legal-acknowledge,si-change-password){block-size:100%}.landing-page-logo{block-size:var(--landing-page-logo-height, var(--element-brand-logo-height));inline-size:var(--landing-page-logo-width, var(--element-brand-logo-width));content:var(--landing-page-logo, var(--element-brand-logo))/var(--element-brand-logo-text);box-sizing:content-box}.landing-page-custom-logo{block-size:var(--landing-page-logo-height);inline-size:var(--landing-page-logo-width, 180px);content:none}.landing-page-alert{position:absolute;inset-block-end:-20px}.landing-page-custom-content{margin-block:28px;margin-inline:0}.landing-page-custom-content:has(si-explicit-legal-acknowledge,si-change-password){margin-block:0;block-size:100%}.landing-page-links a{font-size:12px}footer{color:var(--element-text-secondary);overflow:auto}@media (max-width: 1199.98px){.landing-page-background{padding:64px}.landing-page-content{padding-block:32px 32px;padding-inline:64px}}@media (max-width: 991.98px){.landing-page-background{padding:32px}.landing-page-content{padding-block:32px 32px;padding-inline:32px}}@media (max-width: 767.98px){.landing-page{flex-direction:column}.landing-page-custom-logo{transform:scale(.6);transform-origin:top left}.landing-page-content{inline-size:100%;flex-grow:1;padding:32px}}\n"], dependencies: [{ kind: "component", type: SiCopyrightNoticeComponent, selector: "si-copyright-notice", inputs: ["copyright"] }, { kind: "component", type: SiLanguageSwitcherComponent, selector: "si-language-switcher", inputs: ["translationKey", "languageSwitcherLabel", "availableLanguages"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiInlineNotificationComponent, selector: "si-inline-notification", inputs: ["severity", "heading", "message", "action", "translationParams", "embedded"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    isFullHeightSection = signal(false, ...(ngDevMode ? [{ debugName: "isFullHeightSection" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiLandingPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiLandingPageComponent, isStandalone: true, selector: "si-landing-page", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, subheading: { classPropertyName: "subheading", publicName: "subheading", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: true, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, backgroundImageUrl: { classPropertyName: "backgroundImageUrl", publicName: "backgroundImageUrl", isSignal: true, isRequired: false, transformFunction: null }, logoUrl: { classPropertyName: "logoUrl", publicName: "logoUrl", isSignal: true, isRequired: false, transformFunction: null }, translationKey: { classPropertyName: "translationKey", publicName: "translationKey", isSignal: true, isRequired: false, transformFunction: null }, availableLanguages: { classPropertyName: "availableLanguages", publicName: "availableLanguages", isSignal: true, isRequired: false, transformFunction: null }, announcement: { classPropertyName: "announcement", publicName: "announcement", isSignal: true, isRequired: false, transformFunction: null }, loginAlert: { classPropertyName: "loginAlert", publicName: "loginAlert", isSignal: true, isRequired: false, transformFunction: null }, liveDataWarning: { classPropertyName: "liveDataWarning", publicName: "liveDataWarning", isSignal: true, isRequired: false, transformFunction: null }, implicitLegalAcknowledge: { classPropertyName: "implicitLegalAcknowledge", publicName: "implicitLegalAcknowledge", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null }, copyrightDetails: { classPropertyName: "copyrightDetails", publicName: "copyrightDetails", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let announcement = this.announcement();\n@let availableLanguages = this.availableLanguages();\n@let loginAlert = this.loginAlert();\n@let implicitLegalAcknowledge = this.implicitLegalAcknowledge();\n@let liveDataWarning = this.liveDataWarning();\n@let isFullHeightSection = this.isFullHeightSection();\n\n@if (announcement) {\n  <si-inline-notification\n    class=\"rounded-0\"\n    [severity]=\"announcement.severity\"\n    [heading]=\"announcement.heading\"\n    [message]=\"announcement.message\"\n    [action]=\"announcement.action\"\n    [translationParams]=\"announcement.translationParams\"\n  />\n}\n<div class=\"landing-page\">\n  <div\n    class=\"landing-page-background d-none d-md-block\"\n    [style.background-image]=\"'url(' + backgroundImageUrl() + ')'\"\n  >\n  </div>\n  <div class=\"landing-page-content\">\n    <div class=\"landing-page-content-inner\">\n      @if (!isFullHeightSection) {\n        <div class=\"d-flex justify-content-between align-items-center pb-9\">\n          @if (!logoUrl()) {\n            <span role=\"img\" class=\"landing-page-logo\"></span>\n          } @else {\n            <img\n              class=\"landing-page-logo landing-page-custom-logo\"\n              [src]=\"logoUrl()\"\n              [alt]=\"heading() + '\\'s Background'\"\n            />\n          }\n          @if (availableLanguages.length > 1) {\n            <div class=\"landing-page-language-switcher\">\n              <si-language-switcher\n                [translationKey]=\"translationKey()\"\n                [availableLanguages]=\"availableLanguages\"\n              />\n            </div>\n          }\n        </div>\n      }\n      <div class=\"landing-page-main\">\n        @if (!isFullHeightSection) {\n          @if (subheading()) {\n            <div class=\"si-h2\">{{ subheading() | translate }}</div>\n          }\n          <h1 class=\"si-h1-bold my-2\">{{ heading() | translate }}</h1>\n          <div class=\"position-relative\">\n            <h2 class=\"mt-10 si-h2\" [class.invisible]=\"loginAlert\">{{ subtitle() | translate }}</h2>\n            @if (loginAlert) {\n              <si-inline-notification\n                class=\"landing-page-alert w-100\"\n                [severity]=\"loginAlert.severity || 'danger'\"\n                [heading]=\"loginAlert.heading\"\n                [message]=\"loginAlert.message\"\n              />\n            }\n          </div>\n        }\n        <div class=\"landing-page-custom-content\">\n          <ng-content />\n          @if (!isFullHeightSection) {\n            @if (implicitLegalAcknowledge) {\n              @if (typeof implicitLegalAcknowledge === 'string') {\n                <div class=\"text-secondary mt-8\" [innerHTML]=\"implicitLegalAcknowledge\"></div>\n              } @else {\n                <div class=\"text-secondary mt-8\">\n                  <ng-container [ngTemplateOutlet]=\"implicitLegalAcknowledge\" />\n                </div>\n              }\n            }\n            @if (liveDataWarning) {\n              <div class=\"text-secondary mt-8\">\n                <div class=\"si-h5\">{{ liveDataWarning.title | translate }}</div>\n                <div class=\"si-body my-4\">{{ liveDataWarning.content | translate }}</div>\n              </div>\n            }\n          }\n        </div>\n      </div>\n      @if (!isFullHeightSection) {\n        <footer>\n          <div>\n            <div class=\"d-flex justify-content-start flex-row flex-wrap mt-6\">\n              @for (link of links(); track $index) {\n                <span>\n                  <a siLinkDefaultTarget=\"_blank\" class=\"si-body me-6\" [siLink]=\"link\">\n                    {{ link.title | translate }}\n                  </a>\n                </span>\n              }\n            </div>\n            <div class=\"si-caption mt-4 mb-6 text-secondary d-flex flex-wrap\">\n              @if (version()) {\n                <span class=\"me-6\">{{ version() }}</span>\n              }\n              <si-copyright-notice [copyright]=\"copyrightDetails()\" />\n            </div>\n          </div>\n        </footer>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;block-size:100%;padding-block-start:calc(var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px))}.landing-page{display:flex;flex-direction:row-reverse;flex-grow:1}.landing-page-background{background-size:cover;background-position:center;inline-size:60%}.landing-page-content{block-size:100vh;overflow-y:auto;inline-size:40%;background-color:var(--element-base-0);padding-block:32px 32px;padding-inline:96px}.landing-page-content:has(si-explicit-legal-acknowledge,si-change-password){block-size:100%}.landing-page-content-inner{block-size:100%;min-block-size:min-content;display:flex;flex-direction:column;justify-content:space-between}.landing-page-main:has(si-explicit-legal-acknowledge,si-change-password){block-size:100%}.landing-page-logo{block-size:var(--landing-page-logo-height, var(--element-brand-logo-height));inline-size:var(--landing-page-logo-width, var(--element-brand-logo-width));content:var(--landing-page-logo, var(--element-brand-logo))/var(--element-brand-logo-text);box-sizing:content-box}.landing-page-custom-logo{block-size:var(--landing-page-logo-height);inline-size:var(--landing-page-logo-width, 180px);content:none}.landing-page-alert{position:absolute;inset-block-end:-20px}.landing-page-custom-content{margin-block:28px;margin-inline:0}.landing-page-custom-content:has(si-explicit-legal-acknowledge,si-change-password){margin-block:0;block-size:100%}.landing-page-links a{font-size:12px}footer{color:var(--element-text-secondary);overflow:auto}@media(max-width:1199.98px){.landing-page-background{padding:64px}.landing-page-content{padding-block:32px 32px;padding-inline:64px}}@media(max-width:991.98px){.landing-page-background{padding:32px}.landing-page-content{padding-block:32px 32px;padding-inline:32px}}@media(max-width:767.98px){.landing-page{flex-direction:column}.landing-page-custom-logo{transform:scale(.6);transform-origin:top left}.landing-page-content{inline-size:100%;flex-grow:1;padding:32px}}\n"], dependencies: [{ kind: "component", type: SiCopyrightNoticeComponent, selector: "si-copyright-notice", inputs: ["copyright"] }, { kind: "component", type: SiLanguageSwitcherComponent, selector: "si-language-switcher", inputs: ["translationKey", "languageSwitcherLabel", "availableLanguages"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiInlineNotificationComponent, selector: "si-inline-notification", inputs: ["severity", "heading", "message", "action", "translationParams", "embedded"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiLandingPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiLandingPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-landing-page', imports: [
                         SiCopyrightNoticeComponent,
@@ -145,19 +145,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         SiInlineNotificationComponent,
                         SiTranslatePipe,
                         NgTemplateOutlet
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let announcement = this.announcement();\n@let availableLanguages = this.availableLanguages();\n@let loginAlert = this.loginAlert();\n@let implicitLegalAcknowledge = this.implicitLegalAcknowledge();\n@let liveDataWarning = this.liveDataWarning();\n@let isFullHeightSection = this.isFullHeightSection();\n\n@if (announcement) {\n  <si-inline-notification\n    class=\"rounded-0\"\n    [severity]=\"announcement.severity\"\n    [heading]=\"announcement.heading\"\n    [message]=\"announcement.message\"\n    [action]=\"announcement.action\"\n    [translationParams]=\"announcement.translationParams\"\n  />\n}\n<div class=\"landing-page\">\n  <div\n    class=\"landing-page-background d-none d-md-block\"\n    [style.background-image]=\"'url(' + backgroundImageUrl() + ')'\"\n  >\n  </div>\n  <div class=\"landing-page-content\">\n    <div class=\"landing-page-content-inner\">\n      @if (!isFullHeightSection) {\n        <div class=\"d-flex justify-content-between align-items-center pb-9\">\n          @if (!logoUrl()) {\n            <span role=\"img\" class=\"landing-page-logo\"></span>\n          } @else {\n            <img\n              class=\"landing-page-logo landing-page-custom-logo\"\n              [src]=\"logoUrl()\"\n              [alt]=\"heading() + '\\'s Background'\"\n            />\n          }\n          @if (availableLanguages.length > 1) {\n            <div class=\"landing-page-language-switcher\">\n              <si-language-switcher\n                [translationKey]=\"translationKey()\"\n                [availableLanguages]=\"availableLanguages\"\n              />\n            </div>\n          }\n        </div>\n      }\n      <div class=\"landing-page-main\">\n        @if (!isFullHeightSection) {\n          @if (subheading()) {\n            <div class=\"si-h2\">{{ subheading() | translate }}</div>\n          }\n          <h1 class=\"si-h1-bold my-2\">{{ heading() | translate }}</h1>\n          <div class=\"position-relative\">\n            <h2 class=\"mt-10 si-h2\" [class.invisible]=\"loginAlert\">{{ subtitle() | translate }}</h2>\n            @if (loginAlert) {\n              <si-inline-notification\n                class=\"landing-page-alert w-100\"\n                [severity]=\"loginAlert.severity || 'danger'\"\n                [heading]=\"loginAlert.heading\"\n                [message]=\"loginAlert.message\"\n              />\n            }\n          </div>\n        }\n        <div class=\"landing-page-custom-content\">\n          <ng-content />\n          @if (!isFullHeightSection) {\n            @if (implicitLegalAcknowledge) {\n              @if (typeof implicitLegalAcknowledge === 'string') {\n                <div class=\"text-secondary mt-8\" [innerHTML]=\"implicitLegalAcknowledge\"></div>\n              } @else {\n                <div class=\"text-secondary mt-8\">\n                  <ng-container [ngTemplateOutlet]=\"implicitLegalAcknowledge\" />\n                </div>\n              }\n            }\n            @if (liveDataWarning) {\n              <div class=\"text-secondary mt-8\">\n                <div class=\"si-h5\">{{ liveDataWarning.title | translate }}</div>\n                <div class=\"si-body my-4\">{{ liveDataWarning.content | translate }}</div>\n              </div>\n            }\n          }\n        </div>\n      </div>\n      @if (!isFullHeightSection) {\n        <footer>\n          <div>\n            <div class=\"d-flex justify-content-start flex-row flex-wrap mt-6\">\n              @for (link of links(); track $index) {\n                <span>\n                  <a siLinkDefaultTarget=\"_blank\" class=\"si-body me-6\" [siLink]=\"link\">\n                    {{ link.title | translate }}\n                  </a>\n                </span>\n              }\n            </div>\n            <div class=\"si-caption mt-4 mb-6 text-secondary d-flex flex-wrap\">\n              @if (version()) {\n                <span class=\"me-6\">{{ version() }}</span>\n              }\n              <si-copyright-notice [copyright]=\"copyrightDetails()\" />\n            </div>\n          </div>\n        </footer>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;block-size:100%;padding-block-start:calc(var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px))}.landing-page{display:flex;flex-direction:row-reverse;flex-grow:1}.landing-page-background{background-size:cover;background-position:center;inline-size:60%}.landing-page-content{block-size:100vh;overflow-y:auto;inline-size:40%;background-color:var(--element-base-0);padding-block:32px 32px;padding-inline:96px}.landing-page-content:has(si-explicit-legal-acknowledge,si-change-password){block-size:100%}.landing-page-content-inner{block-size:100%;min-block-size:min-content;display:flex;flex-direction:column;justify-content:space-between}.landing-page-main:has(si-explicit-legal-acknowledge,si-change-password){block-size:100%}.landing-page-logo{block-size:var(--landing-page-logo-height, var(--element-brand-logo-height));inline-size:var(--landing-page-logo-width, var(--element-brand-logo-width));content:var(--landing-page-logo, var(--element-brand-logo))/var(--element-brand-logo-text);box-sizing:content-box}.landing-page-custom-logo{block-size:var(--landing-page-logo-height);inline-size:var(--landing-page-logo-width, 180px);content:none}.landing-page-alert{position:absolute;inset-block-end:-20px}.landing-page-custom-content{margin-block:28px;margin-inline:0}.landing-page-custom-content:has(si-explicit-legal-acknowledge,si-change-password){margin-block:0;block-size:100%}.landing-page-links a{font-size:12px}footer{color:var(--element-text-secondary);overflow:auto}@media (max-width: 1199.98px){.landing-page-background{padding:64px}.landing-page-content{padding-block:32px 32px;padding-inline:64px}}@media (max-width: 991.98px){.landing-page-background{padding:32px}.landing-page-content{padding-block:32px 32px;padding-inline:32px}}@media (max-width: 767.98px){.landing-page{flex-direction:column}.landing-page-custom-logo{transform:scale(.6);transform-origin:top left}.landing-page-content{inline-size:100%;flex-grow:1;padding:32px}}\n"] }]
-        }] });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let announcement = this.announcement();\n@let availableLanguages = this.availableLanguages();\n@let loginAlert = this.loginAlert();\n@let implicitLegalAcknowledge = this.implicitLegalAcknowledge();\n@let liveDataWarning = this.liveDataWarning();\n@let isFullHeightSection = this.isFullHeightSection();\n\n@if (announcement) {\n  <si-inline-notification\n    class=\"rounded-0\"\n    [severity]=\"announcement.severity\"\n    [heading]=\"announcement.heading\"\n    [message]=\"announcement.message\"\n    [action]=\"announcement.action\"\n    [translationParams]=\"announcement.translationParams\"\n  />\n}\n<div class=\"landing-page\">\n  <div\n    class=\"landing-page-background d-none d-md-block\"\n    [style.background-image]=\"'url(' + backgroundImageUrl() + ')'\"\n  >\n  </div>\n  <div class=\"landing-page-content\">\n    <div class=\"landing-page-content-inner\">\n      @if (!isFullHeightSection) {\n        <div class=\"d-flex justify-content-between align-items-center pb-9\">\n          @if (!logoUrl()) {\n            <span role=\"img\" class=\"landing-page-logo\"></span>\n          } @else {\n            <img\n              class=\"landing-page-logo landing-page-custom-logo\"\n              [src]=\"logoUrl()\"\n              [alt]=\"heading() + '\\'s Background'\"\n            />\n          }\n          @if (availableLanguages.length > 1) {\n            <div class=\"landing-page-language-switcher\">\n              <si-language-switcher\n                [translationKey]=\"translationKey()\"\n                [availableLanguages]=\"availableLanguages\"\n              />\n            </div>\n          }\n        </div>\n      }\n      <div class=\"landing-page-main\">\n        @if (!isFullHeightSection) {\n          @if (subheading()) {\n            <div class=\"si-h2\">{{ subheading() | translate }}</div>\n          }\n          <h1 class=\"si-h1-bold my-2\">{{ heading() | translate }}</h1>\n          <div class=\"position-relative\">\n            <h2 class=\"mt-10 si-h2\" [class.invisible]=\"loginAlert\">{{ subtitle() | translate }}</h2>\n            @if (loginAlert) {\n              <si-inline-notification\n                class=\"landing-page-alert w-100\"\n                [severity]=\"loginAlert.severity || 'danger'\"\n                [heading]=\"loginAlert.heading\"\n                [message]=\"loginAlert.message\"\n              />\n            }\n          </div>\n        }\n        <div class=\"landing-page-custom-content\">\n          <ng-content />\n          @if (!isFullHeightSection) {\n            @if (implicitLegalAcknowledge) {\n              @if (typeof implicitLegalAcknowledge === 'string') {\n                <div class=\"text-secondary mt-8\" [innerHTML]=\"implicitLegalAcknowledge\"></div>\n              } @else {\n                <div class=\"text-secondary mt-8\">\n                  <ng-container [ngTemplateOutlet]=\"implicitLegalAcknowledge\" />\n                </div>\n              }\n            }\n            @if (liveDataWarning) {\n              <div class=\"text-secondary mt-8\">\n                <div class=\"si-h5\">{{ liveDataWarning.title | translate }}</div>\n                <div class=\"si-body my-4\">{{ liveDataWarning.content | translate }}</div>\n              </div>\n            }\n          }\n        </div>\n      </div>\n      @if (!isFullHeightSection) {\n        <footer>\n          <div>\n            <div class=\"d-flex justify-content-start flex-row flex-wrap mt-6\">\n              @for (link of links(); track $index) {\n                <span>\n                  <a siLinkDefaultTarget=\"_blank\" class=\"si-body me-6\" [siLink]=\"link\">\n                    {{ link.title | translate }}\n                  </a>\n                </span>\n              }\n            </div>\n            <div class=\"si-caption mt-4 mb-6 text-secondary d-flex flex-wrap\">\n              @if (version()) {\n                <span class=\"me-6\">{{ version() }}</span>\n              }\n              <si-copyright-notice [copyright]=\"copyrightDetails()\" />\n            </div>\n          </div>\n        </footer>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;block-size:100%;padding-block-start:calc(var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px))}.landing-page{display:flex;flex-direction:row-reverse;flex-grow:1}.landing-page-background{background-size:cover;background-position:center;inline-size:60%}.landing-page-content{block-size:100vh;overflow-y:auto;inline-size:40%;background-color:var(--element-base-0);padding-block:32px 32px;padding-inline:96px}.landing-page-content:has(si-explicit-legal-acknowledge,si-change-password){block-size:100%}.landing-page-content-inner{block-size:100%;min-block-size:min-content;display:flex;flex-direction:column;justify-content:space-between}.landing-page-main:has(si-explicit-legal-acknowledge,si-change-password){block-size:100%}.landing-page-logo{block-size:var(--landing-page-logo-height, var(--element-brand-logo-height));inline-size:var(--landing-page-logo-width, var(--element-brand-logo-width));content:var(--landing-page-logo, var(--element-brand-logo))/var(--element-brand-logo-text);box-sizing:content-box}.landing-page-custom-logo{block-size:var(--landing-page-logo-height);inline-size:var(--landing-page-logo-width, 180px);content:none}.landing-page-alert{position:absolute;inset-block-end:-20px}.landing-page-custom-content{margin-block:28px;margin-inline:0}.landing-page-custom-content:has(si-explicit-legal-acknowledge,si-change-password){margin-block:0;block-size:100%}.landing-page-links a{font-size:12px}footer{color:var(--element-text-secondary);overflow:auto}@media(max-width:1199.98px){.landing-page-background{padding:64px}.landing-page-content{padding-block:32px 32px;padding-inline:64px}}@media(max-width:991.98px){.landing-page-background{padding:32px}.landing-page-content{padding-block:32px 32px;padding-inline:32px}}@media(max-width:767.98px){.landing-page{flex-direction:column}.landing-page-custom-logo{transform:scale(.6);transform-origin:top left}.landing-page-content{inline-size:100%;flex-grow:1;padding:32px}}\n"] }]
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], subheading: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheading", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: true }] }], links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], backgroundImageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundImageUrl", required: false }] }], logoUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoUrl", required: false }] }], translationKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationKey", required: false }] }], availableLanguages: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableLanguages", required: false }] }], announcement: [{ type: i0.Input, args: [{ isSignal: true, alias: "announcement", required: false }] }], loginAlert: [{ type: i0.Input, args: [{ isSignal: true, alias: "loginAlert", required: false }] }], liveDataWarning: [{ type: i0.Input, args: [{ isSignal: true, alias: "liveDataWarning", required: false }] }], implicitLegalAcknowledge: [{ type: i0.Input, args: [{ isSignal: true, alias: "implicitLegalAcknowledge", required: false }] }], version: [{ type: i0.Input, args: [{ isSignal: true, alias: "version", required: false }] }], copyrightDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyrightDetails", required: false }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
 class SiLandingPageModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiLandingPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SiLandingPageModule, imports: [SiLandingPageComponent], exports: [SiLandingPageComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiLandingPageModule, imports: [SiLandingPageComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiLandingPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiLandingPageModule, imports: [SiLandingPageComponent], exports: [SiLandingPageComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiLandingPageModule, imports: [SiLandingPageComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiLandingPageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiLandingPageModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SiLandingPageComponent],
@@ -198,7 +198,7 @@ class SiLoginBasicComponent {
      * t(() => $localize`:@@SI_LOGIN_BASIC.USERNAME:Username`)
      * ```
      */
-    usernameLabel = input(t(() => $localize `:@@SI_LOGIN_BASIC.USERNAME:Username`));
+    usernameLabel = input(t(() => $localize `:@@SI_LOGIN_BASIC.USERNAME:Username`), ...(ngDevMode ? [{ debugName: "usernameLabel" }] : []));
     /**
      * Label for password input field.
      *
@@ -207,11 +207,11 @@ class SiLoginBasicComponent {
      * t(() => $localize`:@@SI_LOGIN_BASIC.PASSWORD:Password`)
      * ```
      */
-    passwordLabel = input(t(() => $localize `:@@SI_LOGIN_BASIC.PASSWORD:Password`));
+    passwordLabel = input(t(() => $localize `:@@SI_LOGIN_BASIC.PASSWORD:Password`), ...(ngDevMode ? [{ debugName: "passwordLabel" }] : []));
     /**
      * Config for Forgot Password link.
      */
-    forgotPasswordLink = input();
+    forgotPasswordLink = input(...(ngDevMode ? [undefined, { debugName: "forgotPasswordLink" }] : []));
     /**
      * Text for register now.
      *
@@ -220,11 +220,11 @@ class SiLoginBasicComponent {
      * t(() => $localize`:@@SI_LOGIN_BASIC.REGISTER_NOW_INTRO:Don't have an account?`)
      * ```
      */
-    registerNowIntroText = input(t(() => $localize `:@@SI_LOGIN_BASIC.REGISTER_NOW_INTRO:Don't have an account?`));
+    registerNowIntroText = input(t(() => $localize `:@@SI_LOGIN_BASIC.REGISTER_NOW_INTRO:Don't have an account?`), ...(ngDevMode ? [{ debugName: "registerNowIntroText" }] : []));
     /**
      * Config for Register Now link.
      */
-    registerNowLink = input();
+    registerNowLink = input(...(ngDevMode ? [undefined, { debugName: "registerNowLink" }] : []));
     /**
      * Label for login button.
      *
@@ -233,25 +233,25 @@ class SiLoginBasicComponent {
      * t(() => $localize`:@@SI_LOGIN_BASIC.LOGIN:Login`)
      * ```
      */
-    loginButtonLabel = input(t(() => $localize `:@@SI_LOGIN_BASIC.LOGIN:Login`));
+    loginButtonLabel = input(t(() => $localize `:@@SI_LOGIN_BASIC.LOGIN:Login`), ...(ngDevMode ? [{ debugName: "loginButtonLabel" }] : []));
     /**
      * Disables the login button.
      *
      * @defaultValue false
      */
-    disableLogin = input(false);
+    disableLogin = input(false, ...(ngDevMode ? [{ debugName: "disableLogin" }] : []));
     /**
      * Enables the two-step login flow.
      *
      * @defaultValue false
      */
-    twoStep = input(false, { transform: booleanAttribute });
+    twoStep = input(false, { ...(ngDevMode ? { debugName: "twoStep" } : {}), transform: booleanAttribute });
     /**
      * Indicates whether the login button should show a loading state.
      *
      * @defaultValue false
      */
-    loading = input(false);
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     /**
      * Description of back button.
      *
@@ -260,7 +260,7 @@ class SiLoginBasicComponent {
      * t(() => $localize`:@@SI_LOGIN_BASIC.BACK:Back`)
      * ```
      */
-    backButtonLabel = input(t(() => $localize `:@@SI_LOGIN_BASIC.BACK:Back`));
+    backButtonLabel = input(t(() => $localize `:@@SI_LOGIN_BASIC.BACK:Back`), ...(ngDevMode ? [{ debugName: "backButtonLabel" }] : []));
     /**
      * Description of next button.
      *
@@ -269,7 +269,7 @@ class SiLoginBasicComponent {
      * t(() => $localize`:@@SI_LOGIN_BASIC.NEXT:Next`)
      * ```
      */
-    nextButtonLabel = input(t(() => $localize `:@@SI_LOGIN_BASIC.NEXT:Next`));
+    nextButtonLabel = input(t(() => $localize `:@@SI_LOGIN_BASIC.NEXT:Next`), ...(ngDevMode ? [{ debugName: "nextButtonLabel" }] : []));
     /**
      * Emits username when user clicks on next button.
      */
@@ -283,8 +283,8 @@ class SiLoginBasicComponent {
      */
     login = output();
     destroyRef = inject(DestroyRef);
-    secondStepVisible = signal(false);
-    loadingNext = signal(false);
+    secondStepVisible = signal(false, ...(ngDevMode ? [{ debugName: "secondStepVisible" }] : []));
+    loadingNext = signal(false, ...(ngDevMode ? [{ debugName: "loadingNext" }] : []));
     index = SiLoginBasicComponent.idCounter++;
     usernameId = `__si-login-basic-username-${this.index}`;
     passwordId = `__si-login-basic-password-${this.index}`;
@@ -342,10 +342,10 @@ class SiLoginBasicComponent {
             this.secondStepVisible.set(true);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiLoginBasicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiLoginBasicComponent, isStandalone: true, selector: "si-login-basic", inputs: { usernameLabel: { classPropertyName: "usernameLabel", publicName: "usernameLabel", isSignal: true, isRequired: false, transformFunction: null }, passwordLabel: { classPropertyName: "passwordLabel", publicName: "passwordLabel", isSignal: true, isRequired: false, transformFunction: null }, forgotPasswordLink: { classPropertyName: "forgotPasswordLink", publicName: "forgotPasswordLink", isSignal: true, isRequired: false, transformFunction: null }, registerNowIntroText: { classPropertyName: "registerNowIntroText", publicName: "registerNowIntroText", isSignal: true, isRequired: false, transformFunction: null }, registerNowLink: { classPropertyName: "registerNowLink", publicName: "registerNowLink", isSignal: true, isRequired: false, transformFunction: null }, loginButtonLabel: { classPropertyName: "loginButtonLabel", publicName: "loginButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, disableLogin: { classPropertyName: "disableLogin", publicName: "disableLogin", isSignal: true, isRequired: false, transformFunction: null }, twoStep: { classPropertyName: "twoStep", publicName: "twoStep", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, backButtonLabel: { classPropertyName: "backButtonLabel", publicName: "backButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, nextButtonLabel: { classPropertyName: "nextButtonLabel", publicName: "nextButtonLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { usernameValidation: "usernameValidation", valueChanged: "valueChanged", login: "login" }, ngImport: i0, template: "@let forgotPasswordLink = this.forgotPasswordLink();\n@let registerNowLink = this.registerNowLink();\n@let secondStepVisible = this.secondStepVisible();\n\n<form #loginForm [formGroup]=\"loginCredentials\" (ngSubmit)=\"submit()\">\n  <div class=\"my-4\">\n    <label class=\"form-label\" [for]=\"usernameId\">{{ usernameLabel() | translate }}</label>\n    <input type=\"email\" class=\"form-control\" formControlName=\"username\" [id]=\"usernameId\" />\n  </div>\n  <div class=\"login-basic-second-step--container\" [class.active]=\"!twoStep() || secondStepVisible\">\n    <div class=\"login-basic-second-step--content\">\n      <div class=\"mb-4\">\n        <label class=\"form-label\" [for]=\"passwordId\">{{ passwordLabel() | translate }}</label>\n        <si-password-toggle #toggle>\n          <input\n            class=\"form-control\"\n            formControlName=\"password\"\n            [id]=\"passwordId\"\n            [type]=\"toggle.inputType\"\n          />\n        </si-password-toggle>\n      </div>\n      @if (forgotPasswordLink) {\n        <a class=\"si-h5 mb-4\" [siLink]=\"forgotPasswordLink\">{{\n          forgotPasswordLink.title | translate\n        }}</a>\n      }\n      <div class=\"d-flex align-items-center gap-6 mt-8\">\n        @if (twoStep()) {\n          <button type=\"button\" class=\"btn btn-secondary w-100\" (click)=\"goBack()\">\n            {{ backButtonLabel() | translate }}\n          </button>\n        }\n        <si-loading-button\n          type=\"submit\"\n          class=\"w-100\"\n          buttonClass=\"btn btn-primary\"\n          [disabled]=\"disableLogin()\"\n          [loading]=\"loading()\"\n        >\n          {{ loginButtonLabel() | translate }}\n        </si-loading-button>\n      </div>\n    </div>\n  </div>\n  @if (twoStep()) {\n    <div\n      class=\"login-basic-next-button--container\"\n      [attr.aria-hidden]=\"secondStepVisible\"\n      [class.active]=\"!secondStepVisible\"\n    >\n      <si-loading-button\n        class=\"login-basic-next-button w-100\"\n        buttonClass=\"btn btn-primary\"\n        [loading]=\"loadingNext()\"\n        (click)=\"validateUsername()\"\n      >\n        {{ nextButtonLabel() | translate }}\n      </si-loading-button>\n    </div>\n  }\n</form>\n@if (registerNowLink) {\n  <div class=\"si-body mt-8\">\n    {{ registerNowIntroText() | translate }}\n    <a class=\"si-h5 ms-6\" [siLink]=\"registerNowLink\">{{ registerNowLink.title | translate }}</a>\n  </div>\n}\n", styles: [":host{--animation-duration: calc(.25s * var(--element-animations-enabled, 1));--animation-delay: calc(var(--animation-duration) / 2)}.login-basic-second-step--container,.login-basic-next-button--container{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--animation-duration) ease}.login-basic-second-step--container.active,.login-basic-next-button--container.active{grid-template-rows:1fr}.login-basic-second-step--container.active .login-basic-second-step--content,.login-basic-second-step--container.active .login-basic-next-button,.login-basic-next-button--container.active .login-basic-second-step--content,.login-basic-next-button--container.active .login-basic-next-button{visibility:visible;opacity:1;transform:translateY(0)}.login-basic-second-step--container.active .login-basic-next-button,.login-basic-next-button--container.active .login-basic-next-button{margin-block-start:8px}.toggle-content-transition,.login-basic-next-button,.login-basic-second-step--content{min-block-size:0;transition:opacity var(--animation-duration) var(--animation-delay) ease-in,transform var(--animation-duration) var(--animation-delay) ease-out;visibility:hidden;opacity:0}.login-basic-second-step--content{transform:translateY(-6px)}.login-basic-next-button{margin-block-start:0;transform:translateY(6px);transition:margin var(--animation-duration) ease}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiPasswordToggleComponent, selector: "si-password-toggle", inputs: ["showVisibilityIcon", "showLabel", "hideLabel"], outputs: ["typeChange"] }, { kind: "component", type: SiLoadingButtonComponent, selector: "si-loading-button", inputs: ["disabled", "loading", "type", "ariaLabel", "ariaLabelledBy", "buttonClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiLoginBasicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiLoginBasicComponent, isStandalone: true, selector: "si-login-basic", inputs: { usernameLabel: { classPropertyName: "usernameLabel", publicName: "usernameLabel", isSignal: true, isRequired: false, transformFunction: null }, passwordLabel: { classPropertyName: "passwordLabel", publicName: "passwordLabel", isSignal: true, isRequired: false, transformFunction: null }, forgotPasswordLink: { classPropertyName: "forgotPasswordLink", publicName: "forgotPasswordLink", isSignal: true, isRequired: false, transformFunction: null }, registerNowIntroText: { classPropertyName: "registerNowIntroText", publicName: "registerNowIntroText", isSignal: true, isRequired: false, transformFunction: null }, registerNowLink: { classPropertyName: "registerNowLink", publicName: "registerNowLink", isSignal: true, isRequired: false, transformFunction: null }, loginButtonLabel: { classPropertyName: "loginButtonLabel", publicName: "loginButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, disableLogin: { classPropertyName: "disableLogin", publicName: "disableLogin", isSignal: true, isRequired: false, transformFunction: null }, twoStep: { classPropertyName: "twoStep", publicName: "twoStep", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, backButtonLabel: { classPropertyName: "backButtonLabel", publicName: "backButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, nextButtonLabel: { classPropertyName: "nextButtonLabel", publicName: "nextButtonLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { usernameValidation: "usernameValidation", valueChanged: "valueChanged", login: "login" }, ngImport: i0, template: "@let forgotPasswordLink = this.forgotPasswordLink();\n@let registerNowLink = this.registerNowLink();\n@let secondStepVisible = this.secondStepVisible();\n\n<form #loginForm [formGroup]=\"loginCredentials\" (ngSubmit)=\"submit()\">\n  <div class=\"my-4\">\n    <label class=\"form-label\" [for]=\"usernameId\">{{ usernameLabel() | translate }}</label>\n    <input type=\"email\" class=\"form-control\" formControlName=\"username\" [id]=\"usernameId\" />\n  </div>\n  <div class=\"login-basic-second-step--container\" [class.active]=\"!twoStep() || secondStepVisible\">\n    <div class=\"login-basic-second-step--content\">\n      <div class=\"mb-4\">\n        <label class=\"form-label\" [for]=\"passwordId\">{{ passwordLabel() | translate }}</label>\n        <si-password-toggle #toggle>\n          <input\n            class=\"form-control\"\n            formControlName=\"password\"\n            [id]=\"passwordId\"\n            [type]=\"toggle.inputType\"\n          />\n        </si-password-toggle>\n      </div>\n      @if (forgotPasswordLink) {\n        <a class=\"si-h5 mb-4\" [siLink]=\"forgotPasswordLink\">{{\n          forgotPasswordLink.title | translate\n        }}</a>\n      }\n      <div class=\"d-flex align-items-center gap-6 mt-8\">\n        @if (twoStep()) {\n          <button type=\"button\" class=\"btn btn-secondary w-100\" (click)=\"goBack()\">\n            {{ backButtonLabel() | translate }}\n          </button>\n        }\n        <si-loading-button\n          type=\"submit\"\n          class=\"w-100\"\n          buttonClass=\"btn btn-primary\"\n          [disabled]=\"disableLogin()\"\n          [loading]=\"loading()\"\n        >\n          {{ loginButtonLabel() | translate }}\n        </si-loading-button>\n      </div>\n    </div>\n  </div>\n  @if (twoStep()) {\n    <div\n      class=\"login-basic-next-button--container\"\n      [attr.aria-hidden]=\"secondStepVisible\"\n      [class.active]=\"!secondStepVisible\"\n    >\n      <si-loading-button\n        class=\"login-basic-next-button w-100\"\n        buttonClass=\"btn btn-primary\"\n        [loading]=\"loadingNext()\"\n        (click)=\"validateUsername()\"\n      >\n        {{ nextButtonLabel() | translate }}\n      </si-loading-button>\n    </div>\n  }\n</form>\n@if (registerNowLink) {\n  <div class=\"si-body mt-8\">\n    {{ registerNowIntroText() | translate }}\n    <a class=\"si-h5 ms-6\" [siLink]=\"registerNowLink\">{{ registerNowLink.title | translate }}</a>\n  </div>\n}\n", styles: [":host{--animation-duration: calc(.25s * var(--element-animations-enabled, 1));--animation-delay: calc(var(--animation-duration) / 2)}.login-basic-second-step--container,.login-basic-next-button--container{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--animation-duration) ease}.login-basic-second-step--container.active,.login-basic-next-button--container.active{grid-template-rows:1fr}.login-basic-second-step--container.active .login-basic-second-step--content,.login-basic-second-step--container.active .login-basic-next-button,.login-basic-next-button--container.active .login-basic-second-step--content,.login-basic-next-button--container.active .login-basic-next-button{visibility:visible;opacity:1;transform:translateY(0)}.login-basic-second-step--container.active .login-basic-next-button,.login-basic-next-button--container.active .login-basic-next-button{margin-block-start:8px}.toggle-content-transition,.login-basic-next-button,.login-basic-second-step--content{min-block-size:0;transition:opacity var(--animation-duration) var(--animation-delay) ease-in,transform var(--animation-duration) var(--animation-delay) ease-out;visibility:hidden;opacity:0}.login-basic-second-step--content{transform:translateY(-6px)}.login-basic-next-button{margin-block-start:0;transform:translateY(6px);transition:margin var(--animation-duration) ease}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiPasswordToggleComponent, selector: "si-password-toggle", inputs: ["showVisibilityIcon", "showLabel", "hideLabel"], outputs: ["typeChange"] }, { kind: "component", type: SiLoadingButtonComponent, selector: "si-loading-button", inputs: ["disabled", "loading", "type", "ariaLabel", "ariaLabelledBy", "buttonClass"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiLoginBasicComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiLoginBasicComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-login-basic', imports: [
                         ReactiveFormsModule,
@@ -354,7 +354,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         SiPasswordToggleComponent,
                         SiLoadingButtonComponent
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let forgotPasswordLink = this.forgotPasswordLink();\n@let registerNowLink = this.registerNowLink();\n@let secondStepVisible = this.secondStepVisible();\n\n<form #loginForm [formGroup]=\"loginCredentials\" (ngSubmit)=\"submit()\">\n  <div class=\"my-4\">\n    <label class=\"form-label\" [for]=\"usernameId\">{{ usernameLabel() | translate }}</label>\n    <input type=\"email\" class=\"form-control\" formControlName=\"username\" [id]=\"usernameId\" />\n  </div>\n  <div class=\"login-basic-second-step--container\" [class.active]=\"!twoStep() || secondStepVisible\">\n    <div class=\"login-basic-second-step--content\">\n      <div class=\"mb-4\">\n        <label class=\"form-label\" [for]=\"passwordId\">{{ passwordLabel() | translate }}</label>\n        <si-password-toggle #toggle>\n          <input\n            class=\"form-control\"\n            formControlName=\"password\"\n            [id]=\"passwordId\"\n            [type]=\"toggle.inputType\"\n          />\n        </si-password-toggle>\n      </div>\n      @if (forgotPasswordLink) {\n        <a class=\"si-h5 mb-4\" [siLink]=\"forgotPasswordLink\">{{\n          forgotPasswordLink.title | translate\n        }}</a>\n      }\n      <div class=\"d-flex align-items-center gap-6 mt-8\">\n        @if (twoStep()) {\n          <button type=\"button\" class=\"btn btn-secondary w-100\" (click)=\"goBack()\">\n            {{ backButtonLabel() | translate }}\n          </button>\n        }\n        <si-loading-button\n          type=\"submit\"\n          class=\"w-100\"\n          buttonClass=\"btn btn-primary\"\n          [disabled]=\"disableLogin()\"\n          [loading]=\"loading()\"\n        >\n          {{ loginButtonLabel() | translate }}\n        </si-loading-button>\n      </div>\n    </div>\n  </div>\n  @if (twoStep()) {\n    <div\n      class=\"login-basic-next-button--container\"\n      [attr.aria-hidden]=\"secondStepVisible\"\n      [class.active]=\"!secondStepVisible\"\n    >\n      <si-loading-button\n        class=\"login-basic-next-button w-100\"\n        buttonClass=\"btn btn-primary\"\n        [loading]=\"loadingNext()\"\n        (click)=\"validateUsername()\"\n      >\n        {{ nextButtonLabel() | translate }}\n      </si-loading-button>\n    </div>\n  }\n</form>\n@if (registerNowLink) {\n  <div class=\"si-body mt-8\">\n    {{ registerNowIntroText() | translate }}\n    <a class=\"si-h5 ms-6\" [siLink]=\"registerNowLink\">{{ registerNowLink.title | translate }}</a>\n  </div>\n}\n", styles: [":host{--animation-duration: calc(.25s * var(--element-animations-enabled, 1));--animation-delay: calc(var(--animation-duration) / 2)}.login-basic-second-step--container,.login-basic-next-button--container{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--animation-duration) ease}.login-basic-second-step--container.active,.login-basic-next-button--container.active{grid-template-rows:1fr}.login-basic-second-step--container.active .login-basic-second-step--content,.login-basic-second-step--container.active .login-basic-next-button,.login-basic-next-button--container.active .login-basic-second-step--content,.login-basic-next-button--container.active .login-basic-next-button{visibility:visible;opacity:1;transform:translateY(0)}.login-basic-second-step--container.active .login-basic-next-button,.login-basic-next-button--container.active .login-basic-next-button{margin-block-start:8px}.toggle-content-transition,.login-basic-next-button,.login-basic-second-step--content{min-block-size:0;transition:opacity var(--animation-duration) var(--animation-delay) ease-in,transform var(--animation-duration) var(--animation-delay) ease-out;visibility:hidden;opacity:0}.login-basic-second-step--content{transform:translateY(-6px)}.login-basic-next-button{margin-block-start:0;transform:translateY(6px);transition:margin var(--animation-duration) ease}\n"] }]
-        }] });
+        }], propDecorators: { usernameLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "usernameLabel", required: false }] }], passwordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordLabel", required: false }] }], forgotPasswordLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "forgotPasswordLink", required: false }] }], registerNowIntroText: [{ type: i0.Input, args: [{ isSignal: true, alias: "registerNowIntroText", required: false }] }], registerNowLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "registerNowLink", required: false }] }], loginButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loginButtonLabel", required: false }] }], disableLogin: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableLogin", required: false }] }], twoStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "twoStep", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], backButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButtonLabel", required: false }] }], nextButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextButtonLabel", required: false }] }], usernameValidation: [{ type: i0.Output, args: ["usernameValidation"] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }], login: [{ type: i0.Output, args: ["login"] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2025
@@ -384,13 +384,13 @@ class SiLoginSingleSignOnComponent {
      * t(() => $localize`:@@SI_LOGIN_SINGLE-SIGN-ON.LOGIN_SIGN_UP:Login / Sign un`)
      * ```
      */
-    ssoButtonLabel = input(t(() => $localize `:@@SI_LOGIN_SINGLE-SIGN-ON.LOGIN_SIGN_UP:Login / Sign un`));
+    ssoButtonLabel = input(t(() => $localize `:@@SI_LOGIN_SINGLE-SIGN-ON.LOGIN_SIGN_UP:Login / Sign un`), ...(ngDevMode ? [{ debugName: "ssoButtonLabel" }] : []));
     /**
      * Disables the sso button.
      *
      * @defaultValue false
      */
-    disableSso = input(false);
+    disableSso = input(false, ...(ngDevMode ? [{ debugName: "disableSso" }] : []));
     /**
      * Emits username and password on login event.
      */
@@ -398,13 +398,13 @@ class SiLoginSingleSignOnComponent {
     ssoClick() {
         this.ssoEvent.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiLoginSingleSignOnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: SiLoginSingleSignOnComponent, isStandalone: true, selector: "si-login-single-sign-on", inputs: { ssoButtonLabel: { classPropertyName: "ssoButtonLabel", publicName: "ssoButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, disableSso: { classPropertyName: "disableSso", publicName: "disableSso", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ssoEvent: "ssoEvent" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"btn btn-primary mt-4 w-100\"\n  [disabled]=\"disableSso()\"\n  (click)=\"ssoClick()\"\n>\n  {{ ssoButtonLabel() | translate }}\n</button>\n", dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiLoginSingleSignOnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: SiLoginSingleSignOnComponent, isStandalone: true, selector: "si-login-single-sign-on", inputs: { ssoButtonLabel: { classPropertyName: "ssoButtonLabel", publicName: "ssoButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, disableSso: { classPropertyName: "disableSso", publicName: "disableSso", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ssoEvent: "ssoEvent" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"btn btn-primary mt-4 w-100\"\n  [disabled]=\"disableSso()\"\n  (click)=\"ssoClick()\"\n>\n  {{ ssoButtonLabel() | translate }}\n</button>\n", dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiLoginSingleSignOnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiLoginSingleSignOnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-login-single-sign-on', imports: [SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"button\"\n  class=\"btn btn-primary mt-4 w-100\"\n  [disabled]=\"disableSso()\"\n  (click)=\"ssoClick()\"\n>\n  {{ ssoButtonLabel() | translate }}\n</button>\n" }]
-        }] });
+        }], propDecorators: { ssoButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ssoButtonLabel", required: false }] }], disableSso: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSso", required: false }] }], ssoEvent: [{ type: i0.Output, args: ["ssoEvent"] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2025
@@ -440,11 +440,11 @@ class SiExplicitLegalAcknowledgeComponent {
     /**
      * Heading of the agreement.
      */
-    heading = input.required();
+    heading = input.required(...(ngDevMode ? [{ debugName: "heading" }] : []));
     /**
      * Short description of the agreement.
      */
-    subheading = input.required();
+    subheading = input.required(...(ngDevMode ? [{ debugName: "subheading" }] : []));
     /**
      * Label for accept button.
      *
@@ -453,7 +453,7 @@ class SiExplicitLegalAcknowledgeComponent {
      * t(() => $localize`:@@SI_EXPLICIT_LEGAL_ACKNOWLEDGE.ACCEPT:Accept`)
      * ```
      */
-    acceptButtonLabel = input(t(() => $localize `:@@SI_EXPLICIT_LEGAL_ACKNOWLEDGE.ACCEPT:Accept`));
+    acceptButtonLabel = input(t(() => $localize `:@@SI_EXPLICIT_LEGAL_ACKNOWLEDGE.ACCEPT:Accept`), ...(ngDevMode ? [{ debugName: "acceptButtonLabel" }] : []));
     /**
      * Description of back button.
      *
@@ -462,13 +462,13 @@ class SiExplicitLegalAcknowledgeComponent {
      * t(() => $localize`:@@SI_EXPLICIT_LEGAL_ACKNOWLEDGE.BACK:Back`)
      * ```
      */
-    backButtonLabel = input(t(() => $localize `:@@SI_EXPLICIT_LEGAL_ACKNOWLEDGE.BACK:Back`));
+    backButtonLabel = input(t(() => $localize `:@@SI_EXPLICIT_LEGAL_ACKNOWLEDGE.BACK:Back`), ...(ngDevMode ? [{ debugName: "backButtonLabel" }] : []));
     /**
      * Disables the acceptance button.
      *
      * @defaultValue false
      */
-    disableAcceptance = input(false);
+    disableAcceptance = input(false, ...(ngDevMode ? [{ debugName: "disableAcceptance" }] : []));
     /**
      * Emits end user license agreement on acceptance event.
      */
@@ -493,13 +493,13 @@ class SiExplicitLegalAcknowledgeComponent {
     ngOnDestroy() {
         this.landingPage?.isFullHeightSection.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiExplicitLegalAcknowledgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: SiExplicitLegalAcknowledgeComponent, isStandalone: true, selector: "si-explicit-legal-acknowledge", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, subheading: { classPropertyName: "subheading", publicName: "subheading", isSignal: true, isRequired: true, transformFunction: null }, acceptButtonLabel: { classPropertyName: "acceptButtonLabel", publicName: "acceptButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, backButtonLabel: { classPropertyName: "backButtonLabel", publicName: "backButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, disableAcceptance: { classPropertyName: "disableAcceptance", publicName: "disableAcceptance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { accept: "accept", back: "back" }, ngImport: i0, template: "<div class=\"d-flex flex-column py-8 h-100\">\n  <h2 class=\"si-h2 mb-4\">{{ heading() | translate }}</h2>\n  <div class=\"si-body mb-6\">{{ subheading() | translate }}</div>\n\n  <div tabindex=\"0\" class=\"form-control si-body text-secondary flex-grow-1 overflow-auto\">\n    <ng-content />\n  </div>\n  <div class=\"d-flex align-items-center gap-6 mt-6\">\n    <button type=\"button\" class=\"btn btn-secondary w-100\" (click)=\"handleBack()\">\n      {{ backButtonLabel() | translate }}\n    </button>\n    <button\n      type=\"button\"\n      class=\"btn btn-primary w-100\"\n      [disabled]=\"disableAcceptance()\"\n      (click)=\"handleAccept()\"\n    >\n      {{ acceptButtonLabel() | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiExplicitLegalAcknowledgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: SiExplicitLegalAcknowledgeComponent, isStandalone: true, selector: "si-explicit-legal-acknowledge", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, subheading: { classPropertyName: "subheading", publicName: "subheading", isSignal: true, isRequired: true, transformFunction: null }, acceptButtonLabel: { classPropertyName: "acceptButtonLabel", publicName: "acceptButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, backButtonLabel: { classPropertyName: "backButtonLabel", publicName: "backButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, disableAcceptance: { classPropertyName: "disableAcceptance", publicName: "disableAcceptance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { accept: "accept", back: "back" }, ngImport: i0, template: "<div class=\"d-flex flex-column py-8 h-100\">\n  <h2 class=\"si-h2 mb-4\">{{ heading() | translate }}</h2>\n  <div class=\"si-body mb-6\">{{ subheading() | translate }}</div>\n\n  <div tabindex=\"0\" class=\"form-control si-body text-secondary flex-grow-1 overflow-auto\">\n    <ng-content />\n  </div>\n  <div class=\"d-flex align-items-center gap-6 mt-6\">\n    <button type=\"button\" class=\"btn btn-secondary w-100\" (click)=\"handleBack()\">\n      {{ backButtonLabel() | translate }}\n    </button>\n    <button\n      type=\"button\"\n      class=\"btn btn-primary w-100\"\n      [disabled]=\"disableAcceptance()\"\n      (click)=\"handleAccept()\"\n    >\n      {{ acceptButtonLabel() | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiExplicitLegalAcknowledgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiExplicitLegalAcknowledgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-explicit-legal-acknowledge', imports: [SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex flex-column py-8 h-100\">\n  <h2 class=\"si-h2 mb-4\">{{ heading() | translate }}</h2>\n  <div class=\"si-body mb-6\">{{ subheading() | translate }}</div>\n\n  <div tabindex=\"0\" class=\"form-control si-body text-secondary flex-grow-1 overflow-auto\">\n    <ng-content />\n  </div>\n  <div class=\"d-flex align-items-center gap-6 mt-6\">\n    <button type=\"button\" class=\"btn btn-secondary w-100\" (click)=\"handleBack()\">\n      {{ backButtonLabel() | translate }}\n    </button>\n    <button\n      type=\"button\"\n      class=\"btn btn-primary w-100\"\n      [disabled]=\"disableAcceptance()\"\n      (click)=\"handleAccept()\"\n    >\n      {{ acceptButtonLabel() | translate }}\n    </button>\n  </div>\n</div>\n" }]
-        }] });
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], subheading: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheading", required: true }] }], acceptButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptButtonLabel", required: false }] }], backButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButtonLabel", required: false }] }], disableAcceptance: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAcceptance", required: false }] }], accept: [{ type: i0.Output, args: ["accept"] }], back: [{ type: i0.Output, args: ["back"] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2025
@@ -533,7 +533,7 @@ class SiChangePasswordComponent {
      * t(() => $localize`:@@SI_CHANGE_PASSWORD.CHANGE_PASSWORD:Change password`)
      * ```
      */
-    heading = input(t(() => $localize `:@@SI_CHANGE_PASSWORD.CHANGE_PASSWORD:Change password`));
+    heading = input(t(() => $localize `:@@SI_CHANGE_PASSWORD.CHANGE_PASSWORD:Change password`), ...(ngDevMode ? [{ debugName: "heading" }] : []));
     /**
      * Short description of the action to perform.
      *
@@ -542,7 +542,7 @@ class SiChangePasswordComponent {
      * t(() => $localize`:@@SI_CHANGE_PASSWORD.CHANGE_FACTORY_PASSWORD:Factory set password must be changed`)
      * ```
      */
-    subheading = input(t(() => $localize `:@@SI_CHANGE_PASSWORD.CHANGE_FACTORY_PASSWORD:Factory set password must be changed`));
+    subheading = input(t(() => $localize `:@@SI_CHANGE_PASSWORD.CHANGE_FACTORY_PASSWORD:Factory set password must be changed`), ...(ngDevMode ? [{ debugName: "subheading" }] : []));
     /**
      * Label for new password input field.
      *
@@ -551,7 +551,7 @@ class SiChangePasswordComponent {
      * t(() => $localize`:@@SI_CHANGE_PASSWORD.NEW_PASSWORD:New password`)
      * ```
      */
-    newPasswordLabel = input(t(() => $localize `:@@SI_CHANGE_PASSWORD.NEW_PASSWORD:New password`));
+    newPasswordLabel = input(t(() => $localize `:@@SI_CHANGE_PASSWORD.NEW_PASSWORD:New password`), ...(ngDevMode ? [{ debugName: "newPasswordLabel" }] : []));
     /**
      * Label for confirm password input field.
      *
@@ -560,7 +560,7 @@ class SiChangePasswordComponent {
      * t(() => $localize`:@@SI_CHANGE_PASSWORD.CONFIRM_PASSWORD:Confirm password`)
      * ```
      */
-    confirmPasswordLabel = input(t(() => $localize `:@@SI_CHANGE_PASSWORD.CONFIRM_PASSWORD:Confirm password`));
+    confirmPasswordLabel = input(t(() => $localize `:@@SI_CHANGE_PASSWORD.CONFIRM_PASSWORD:Confirm password`), ...(ngDevMode ? [{ debugName: "confirmPasswordLabel" }] : []));
     /**
      * Label for change password button.
      *
@@ -569,7 +569,7 @@ class SiChangePasswordComponent {
      * t(() => $localize`:@@SI_CHANGE_PASSWORD.CHANGE:Change`)
      * ```
      */
-    changeButtonLabel = input(t(() => $localize `:@@SI_CHANGE_PASSWORD.CHANGE:Change`));
+    changeButtonLabel = input(t(() => $localize `:@@SI_CHANGE_PASSWORD.CHANGE:Change`), ...(ngDevMode ? [{ debugName: "changeButtonLabel" }] : []));
     /**
      * Description of back button.
      *
@@ -578,13 +578,13 @@ class SiChangePasswordComponent {
      * t(() => $localize`:@@SI_CHANGE_PASSWORD.BACK:Back`)
      * ```
      */
-    backButtonLabel = input(t(() => $localize `:@@SI_CHANGE_PASSWORD.BACK:Back`));
+    backButtonLabel = input(t(() => $localize `:@@SI_CHANGE_PASSWORD.BACK:Back`), ...(ngDevMode ? [{ debugName: "backButtonLabel" }] : []));
     /**
      * Disables the change password button.
      *
      * @defaultValue false
      */
-    disableChange = input(false);
+    disableChange = input(false, ...(ngDevMode ? [{ debugName: "disableChange" }] : []));
     /**
      * Title of the password policy.
      *
@@ -593,19 +593,19 @@ class SiChangePasswordComponent {
      * t(() => $localize`:@@SI_CHANGE_PASSWORD.PASSWORD_POLICY:Password policy`)
      * ```
      */
-    passwordPolicyTitle = input(t(() => $localize `:@@SI_CHANGE_PASSWORD.PASSWORD_POLICY:Password policy`));
+    passwordPolicyTitle = input(t(() => $localize `:@@SI_CHANGE_PASSWORD.PASSWORD_POLICY:Password policy`), ...(ngDevMode ? [{ debugName: "passwordPolicyTitle" }] : []));
     /**
      * Description of the password policy requirements.
      */
-    passwordPolicyContent = input.required();
+    passwordPolicyContent = input.required(...(ngDevMode ? [{ debugName: "passwordPolicyContent" }] : []));
     /**
      * Description of the password policy requirements.
      */
-    passwordStrength = input.required();
+    passwordStrength = input.required(...(ngDevMode ? [{ debugName: "passwordStrength" }] : []));
     /**
      * Config to enable/disable password related error/alerts.
      */
-    changePasswordAlert = input();
+    changePasswordAlert = input(...(ngDevMode ? [undefined, { debugName: "changePasswordAlert" }] : []));
     /**
      * Emits password on value change.
      */
@@ -666,10 +666,10 @@ class SiChangePasswordComponent {
         this.back.emit();
         this.changePasswordForm.reset();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChangePasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiChangePasswordComponent, isStandalone: true, selector: "si-change-password", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, subheading: { classPropertyName: "subheading", publicName: "subheading", isSignal: true, isRequired: false, transformFunction: null }, newPasswordLabel: { classPropertyName: "newPasswordLabel", publicName: "newPasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmPasswordLabel: { classPropertyName: "confirmPasswordLabel", publicName: "confirmPasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, changeButtonLabel: { classPropertyName: "changeButtonLabel", publicName: "changeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, backButtonLabel: { classPropertyName: "backButtonLabel", publicName: "backButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, disableChange: { classPropertyName: "disableChange", publicName: "disableChange", isSignal: true, isRequired: false, transformFunction: null }, passwordPolicyTitle: { classPropertyName: "passwordPolicyTitle", publicName: "passwordPolicyTitle", isSignal: true, isRequired: false, transformFunction: null }, passwordPolicyContent: { classPropertyName: "passwordPolicyContent", publicName: "passwordPolicyContent", isSignal: true, isRequired: true, transformFunction: null }, passwordStrength: { classPropertyName: "passwordStrength", publicName: "passwordStrength", isSignal: true, isRequired: true, transformFunction: null }, changePasswordAlert: { classPropertyName: "changePasswordAlert", publicName: "changePasswordAlert", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged", changePasswordRequested: "changePasswordRequested", passwordStrengthChanged: "passwordStrengthChanged", back: "back" }, ngImport: i0, template: "@let changePasswordAlert = this.changePasswordAlert();\n@let passwordPolicyContent = this.passwordPolicyContent();\n\n<div class=\"d-flex flex-column justify-content-center py-8 h-100\">\n  <div class=\"position-relative\">\n    <h2 class=\"si-h2\" [class.invisible]=\"changePasswordAlert\">{{ heading() | translate }}</h2>\n    <div class=\"si-body mb-4\" [class.invisible]=\"changePasswordAlert\">{{\n      subheading() | translate\n    }}</div>\n    @if (changePasswordAlert) {\n      <si-inline-notification\n        class=\"position-absolute bottom-0 w-100\"\n        [severity]=\"changePasswordAlert.severity || 'danger'\"\n        [heading]=\"changePasswordAlert.heading\"\n        [message]=\"changePasswordAlert.message\"\n      />\n    }\n  </div>\n  <form [formGroup]=\"changePasswordForm\" (ngSubmit)=\"submit()\">\n    <div class=\"my-4\">\n      <label class=\"form-label\" [for]=\"newPasswordId\">{{ newPasswordLabel() | translate }}</label>\n      <si-password-strength>\n        <input\n          type=\"password\"\n          class=\"form-control\"\n          formControlName=\"newPassword\"\n          [id]=\"newPasswordId\"\n          [siPasswordStrength]=\"passwordStrength()\"\n          (passwordStrengthChanged)=\"handlePasswordStrengthChanged($event)\"\n        />\n      </si-password-strength>\n    </div>\n    <div class=\"mb-4\">\n      <label class=\"form-label\" [for]=\"confirmPasswordId\">{{\n        confirmPasswordLabel() | translate\n      }}</label>\n      <si-password-toggle #toggleConfirmPassword>\n        <input\n          class=\"form-control\"\n          formControlName=\"confirmPassword\"\n          [id]=\"confirmPasswordId\"\n          [type]=\"toggleConfirmPassword.inputType\"\n        />\n      </si-password-toggle>\n    </div>\n    <div class=\"d-flex align-items-center gap-6 mt-6\">\n      <button type=\"button\" class=\"btn btn-secondary w-100 back-button\" (click)=\"handleBackClick()\">\n        {{ backButtonLabel() | translate }}\n      </button>\n      <button type=\"submit\" class=\"btn btn-primary w-100\" [disabled]=\"disableChange()\">\n        {{ changeButtonLabel() | translate }}\n      </button>\n    </div>\n  </form>\n  <div class=\"text-secondary mt-8\">\n    <div class=\"si-h5\">{{ passwordPolicyTitle() | translate }}</div>\n    @if (!passwordPolicyContentTemplate) {\n      <div class=\"my-4\" [innerHTML]=\"passwordPolicyContent\"></div>\n    } @else {\n      <div class=\"my-4\">\n        <ng-container [ngTemplateOutlet]=\"passwordPolicyContentTemplate\" />\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "component", type: SiPasswordToggleComponent, selector: "si-password-toggle", inputs: ["showVisibilityIcon", "showLabel", "hideLabel"], outputs: ["typeChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiInlineNotificationComponent, selector: "si-inline-notification", inputs: ["severity", "heading", "message", "action", "translationParams", "embedded"] }, { kind: "component", type: SiPasswordStrengthComponent, selector: "si-password-strength", inputs: ["showVisibilityIcon"] }, { kind: "directive", type: SiPasswordStrengthDirective, selector: "[siPasswordStrength]", inputs: ["siPasswordStrength"], outputs: ["passwordStrengthChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiChangePasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiChangePasswordComponent, isStandalone: true, selector: "si-change-password", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, subheading: { classPropertyName: "subheading", publicName: "subheading", isSignal: true, isRequired: false, transformFunction: null }, newPasswordLabel: { classPropertyName: "newPasswordLabel", publicName: "newPasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmPasswordLabel: { classPropertyName: "confirmPasswordLabel", publicName: "confirmPasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, changeButtonLabel: { classPropertyName: "changeButtonLabel", publicName: "changeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, backButtonLabel: { classPropertyName: "backButtonLabel", publicName: "backButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, disableChange: { classPropertyName: "disableChange", publicName: "disableChange", isSignal: true, isRequired: false, transformFunction: null }, passwordPolicyTitle: { classPropertyName: "passwordPolicyTitle", publicName: "passwordPolicyTitle", isSignal: true, isRequired: false, transformFunction: null }, passwordPolicyContent: { classPropertyName: "passwordPolicyContent", publicName: "passwordPolicyContent", isSignal: true, isRequired: true, transformFunction: null }, passwordStrength: { classPropertyName: "passwordStrength", publicName: "passwordStrength", isSignal: true, isRequired: true, transformFunction: null }, changePasswordAlert: { classPropertyName: "changePasswordAlert", publicName: "changePasswordAlert", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged", changePasswordRequested: "changePasswordRequested", passwordStrengthChanged: "passwordStrengthChanged", back: "back" }, ngImport: i0, template: "@let changePasswordAlert = this.changePasswordAlert();\n@let passwordPolicyContent = this.passwordPolicyContent();\n\n<div class=\"d-flex flex-column justify-content-center py-8 h-100\">\n  <div class=\"position-relative\">\n    <h2 class=\"si-h2\" [class.invisible]=\"changePasswordAlert\">{{ heading() | translate }}</h2>\n    <div class=\"si-body mb-4\" [class.invisible]=\"changePasswordAlert\">{{\n      subheading() | translate\n    }}</div>\n    @if (changePasswordAlert) {\n      <si-inline-notification\n        class=\"position-absolute bottom-0 w-100\"\n        [severity]=\"changePasswordAlert.severity || 'danger'\"\n        [heading]=\"changePasswordAlert.heading\"\n        [message]=\"changePasswordAlert.message\"\n      />\n    }\n  </div>\n  <form [formGroup]=\"changePasswordForm\" (ngSubmit)=\"submit()\">\n    <div class=\"my-4\">\n      <label class=\"form-label\" [for]=\"newPasswordId\">{{ newPasswordLabel() | translate }}</label>\n      <si-password-strength>\n        <input\n          type=\"password\"\n          class=\"form-control\"\n          formControlName=\"newPassword\"\n          [id]=\"newPasswordId\"\n          [siPasswordStrength]=\"passwordStrength()\"\n          (passwordStrengthChanged)=\"handlePasswordStrengthChanged($event)\"\n        />\n      </si-password-strength>\n    </div>\n    <div class=\"mb-4\">\n      <label class=\"form-label\" [for]=\"confirmPasswordId\">{{\n        confirmPasswordLabel() | translate\n      }}</label>\n      <si-password-toggle #toggleConfirmPassword>\n        <input\n          class=\"form-control\"\n          formControlName=\"confirmPassword\"\n          [id]=\"confirmPasswordId\"\n          [type]=\"toggleConfirmPassword.inputType\"\n        />\n      </si-password-toggle>\n    </div>\n    <div class=\"d-flex align-items-center gap-6 mt-6\">\n      <button type=\"button\" class=\"btn btn-secondary w-100 back-button\" (click)=\"handleBackClick()\">\n        {{ backButtonLabel() | translate }}\n      </button>\n      <button type=\"submit\" class=\"btn btn-primary w-100\" [disabled]=\"disableChange()\">\n        {{ changeButtonLabel() | translate }}\n      </button>\n    </div>\n  </form>\n  <div class=\"text-secondary mt-8\">\n    <div class=\"si-h5\">{{ passwordPolicyTitle() | translate }}</div>\n    @if (!passwordPolicyContentTemplate) {\n      <div class=\"my-4\" [innerHTML]=\"passwordPolicyContent\"></div>\n    } @else {\n      <div class=\"my-4\">\n        <ng-container [ngTemplateOutlet]=\"passwordPolicyContentTemplate\" />\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SiPasswordToggleComponent, selector: "si-password-toggle", inputs: ["showVisibilityIcon", "showLabel", "hideLabel"], outputs: ["typeChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiInlineNotificationComponent, selector: "si-inline-notification", inputs: ["severity", "heading", "message", "action", "translationParams", "embedded"] }, { kind: "component", type: SiPasswordStrengthComponent, selector: "si-password-strength", inputs: ["showVisibilityIcon"] }, { kind: "directive", type: SiPasswordStrengthDirective, selector: "[siPasswordStrength]", inputs: ["siPasswordStrength"], outputs: ["passwordStrengthChanged"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChangePasswordComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiChangePasswordComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-change-password', imports: [
                         ReactiveFormsModule,
@@ -680,7 +680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         SiPasswordStrengthComponent,
                         SiPasswordStrengthDirective
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let changePasswordAlert = this.changePasswordAlert();\n@let passwordPolicyContent = this.passwordPolicyContent();\n\n<div class=\"d-flex flex-column justify-content-center py-8 h-100\">\n  <div class=\"position-relative\">\n    <h2 class=\"si-h2\" [class.invisible]=\"changePasswordAlert\">{{ heading() | translate }}</h2>\n    <div class=\"si-body mb-4\" [class.invisible]=\"changePasswordAlert\">{{\n      subheading() | translate\n    }}</div>\n    @if (changePasswordAlert) {\n      <si-inline-notification\n        class=\"position-absolute bottom-0 w-100\"\n        [severity]=\"changePasswordAlert.severity || 'danger'\"\n        [heading]=\"changePasswordAlert.heading\"\n        [message]=\"changePasswordAlert.message\"\n      />\n    }\n  </div>\n  <form [formGroup]=\"changePasswordForm\" (ngSubmit)=\"submit()\">\n    <div class=\"my-4\">\n      <label class=\"form-label\" [for]=\"newPasswordId\">{{ newPasswordLabel() | translate }}</label>\n      <si-password-strength>\n        <input\n          type=\"password\"\n          class=\"form-control\"\n          formControlName=\"newPassword\"\n          [id]=\"newPasswordId\"\n          [siPasswordStrength]=\"passwordStrength()\"\n          (passwordStrengthChanged)=\"handlePasswordStrengthChanged($event)\"\n        />\n      </si-password-strength>\n    </div>\n    <div class=\"mb-4\">\n      <label class=\"form-label\" [for]=\"confirmPasswordId\">{{\n        confirmPasswordLabel() | translate\n      }}</label>\n      <si-password-toggle #toggleConfirmPassword>\n        <input\n          class=\"form-control\"\n          formControlName=\"confirmPassword\"\n          [id]=\"confirmPasswordId\"\n          [type]=\"toggleConfirmPassword.inputType\"\n        />\n      </si-password-toggle>\n    </div>\n    <div class=\"d-flex align-items-center gap-6 mt-6\">\n      <button type=\"button\" class=\"btn btn-secondary w-100 back-button\" (click)=\"handleBackClick()\">\n        {{ backButtonLabel() | translate }}\n      </button>\n      <button type=\"submit\" class=\"btn btn-primary w-100\" [disabled]=\"disableChange()\">\n        {{ changeButtonLabel() | translate }}\n      </button>\n    </div>\n  </form>\n  <div class=\"text-secondary mt-8\">\n    <div class=\"si-h5\">{{ passwordPolicyTitle() | translate }}</div>\n    @if (!passwordPolicyContentTemplate) {\n      <div class=\"my-4\" [innerHTML]=\"passwordPolicyContent\"></div>\n    } @else {\n      <div class=\"my-4\">\n        <ng-container [ngTemplateOutlet]=\"passwordPolicyContentTemplate\" />\n      </div>\n    }\n  </div>\n</div>\n" }]
-        }] });
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], subheading: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheading", required: false }] }], newPasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "newPasswordLabel", required: false }] }], confirmPasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmPasswordLabel", required: false }] }], changeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "changeButtonLabel", required: false }] }], backButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButtonLabel", required: false }] }], disableChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableChange", required: false }] }], passwordPolicyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordPolicyTitle", required: false }] }], passwordPolicyContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordPolicyContent", required: true }] }], passwordStrength: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordStrength", required: true }] }], changePasswordAlert: [{ type: i0.Input, args: [{ isSignal: true, alias: "changePasswordAlert", required: false }] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }], changePasswordRequested: [{ type: i0.Output, args: ["changePasswordRequested"] }], passwordStrengthChanged: [{ type: i0.Output, args: ["passwordStrengthChanged"] }], back: [{ type: i0.Output, args: ["back"] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2025