@siemens/element-ng 47.2.0 → 47.4.0

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

@@ -0,0 +1,63 @@
+import { NgClass } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { SiIconNextComponent } from '@siemens/element-ng/icon';
+import { SiLinkDirective } from '@siemens/element-ng/link';
+import * as i1 from '@siemens/element-translate-ng/translate';
+import { SiTranslateModule } from '@siemens/element-translate-ng/translate';
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * The component displays application info messages. A message uses an icon and a title, optionally a copy text,
+ * instructions and a link. Replace the integrated icon by content projection of another icon or image with the
+ * CSS class `.si-info-image`. Use content projection with the CSS class `si-info-actions` to inject more buttons
+ * and options to interact with the page.
+ */
+class SiInfoPageComponent {
+    /**
+     * The element warning icon.
+     *
+     * @defaultValue 'element-warning-filled'
+     */
+    icon = input('element-warning-filled');
+    /**
+     * Icon color class, see {@link https://element.siemens.io/fundamentals/typography/#color-variants-classes}
+     *
+     * @defaultValue 'status-warning'
+     */
+    iconColor = input('status-warning');
+    /** A short and concise title to explain the error. */
+    titleText = input.required();
+    /** A more detailed explanation of the error, outlining the reasoning for it and how a user can resolve it. */
+    copyText = input();
+    /** A detailed instruction on how a user can resolve the error. */
+    instructions = input();
+    /**
+     * Use the link object if you have one option to follow. A link object
+     * has a title to be displayed and can be configured with an external link,
+     * a router link, or a custom action. If you want to provide multiple options,
+     * add your own content into the component.
+     */
+    link = input();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiInfoPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiInfoPageComponent, isStandalone: true, selector: "si-info-page", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, titleText: { classPropertyName: "titleText", publicName: "titleText", isSignal: true, isRequired: true, transformFunction: null }, copyText: { classPropertyName: "copyText", publicName: "copyText", isSignal: true, isRequired: false, transformFunction: null }, instructions: { classPropertyName: "instructions", publicName: "instructions", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"h-100 d-flex flex-column justify-content-center align-items-center p-6\">\n  <ng-content select=\".si-info-image\">\n    <si-icon-next class=\"icon-size\" [ngClass]=\"iconColor()\" [icon]=\"icon()\" />\n  </ng-content>\n  <h1 class=\"my-9\">{{ titleText() | translate }}</h1>\n  @if (copyText()) {\n    <h2 class=\"mb-9\">{{ copyText() | translate }}</h2>\n  }\n  @if (instructions()) {\n    <p class=\"text-pre-wrap text-center si-body-1 mb-9\">{{ instructions() | translate }}</p>\n  }\n  @if (link()?.title) {\n    <a class=\"btn btn-primary\" [siLink]=\"link()\">{{ link()?.title | translate }}</a>\n  }\n  <ng-content select=\".si-info-actions\" />\n</div>\n", styles: [":host ::ng-deep .icon-size{font-size:96px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiInfoPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-info-page', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, SiLinkDirective, SiIconNextComponent, SiTranslateModule], template: "<div class=\"h-100 d-flex flex-column justify-content-center align-items-center p-6\">\n  <ng-content select=\".si-info-image\">\n    <si-icon-next class=\"icon-size\" [ngClass]=\"iconColor()\" [icon]=\"icon()\" />\n  </ng-content>\n  <h1 class=\"my-9\">{{ titleText() | translate }}</h1>\n  @if (copyText()) {\n    <h2 class=\"mb-9\">{{ copyText() | translate }}</h2>\n  }\n  @if (instructions()) {\n    <p class=\"text-pre-wrap text-center si-body-1 mb-9\">{{ instructions() | translate }}</p>\n  }\n  @if (link()?.title) {\n    <a class=\"btn btn-primary\" [siLink]=\"link()\">{{ link()?.title | translate }}</a>\n  }\n  <ng-content select=\".si-info-actions\" />\n</div>\n", styles: [":host ::ng-deep .icon-size{font-size:96px}\n"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiInfoPageComponent };
+//# sourceMappingURL=siemens-element-ng-info-page.mjs.map

package/fesm2022/siemens-element-ng-info-page.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"siemens-element-ng-info-page.mjs","sources":["../../../../projects/element-ng/info-page/si-info-page.component.ts","../../../../projects/element-ng/info-page/si-info-page.component.html","../../../../projects/element-ng/info-page/index.ts","../../../../projects/element-ng/info-page/siemens-element-ng-info-page.ts"],"sourcesContent":["/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { NgClass } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { SiIconNextComponent } from '@siemens/element-ng/icon';\nimport { Link, SiLinkDirective } from '@siemens/element-ng/link';\nimport { SiTranslateModule, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n/**\n * The component displays application info messages. A message uses an icon and a title, optionally a copy text,\n * instructions and a link. Replace the integrated icon by content projection of another icon or image with the\n * CSS class `.si-info-image`. Use content projection with the CSS class `si-info-actions` to inject more buttons\n * and options to interact with the page.\n */\n@Component({\n  selector: 'si-info-page',\n  templateUrl: './si-info-page.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  styleUrl: './si-info-page.component.scss',\n  imports: [NgClass, SiLinkDirective, SiIconNextComponent, SiTranslateModule]\n})\nexport class SiInfoPageComponent {\n  /**\n   * The element warning icon.\n   *\n   * @defaultValue 'element-warning-filled'\n   */\n  readonly icon = input<string>('element-warning-filled');\n  /**\n   * Icon color class, see {@link https://element.siemens.io/fundamentals/typography/#color-variants-classes}\n   *\n   * @defaultValue 'status-warning'\n   */\n  readonly iconColor = input<string | undefined>('status-warning');\n  /** A short and concise title to explain the error. */\n  readonly titleText = input.required<TranslatableString>();\n  /** A more detailed explanation of the error, outlining the reasoning for it and how a user can resolve it. */\n  readonly copyText = input<TranslatableString>();\n  /** A detailed instruction on how a user can resolve the error. */\n  readonly instructions = input<TranslatableString>();\n  /**\n   * Use the link object if you have one option to follow. A link object\n   * has a title to be displayed and can be configured with an external link,\n   * a router link, or a custom action. If you want to provide multiple options,\n   * add your own content into the component.\n   */\n  readonly link = input<Link>();\n}\n","<div class=\"h-100 d-flex flex-column justify-content-center align-items-center p-6\">\n  <ng-content select=\".si-info-image\">\n    <si-icon-next class=\"icon-size\" [ngClass]=\"iconColor()\" [icon]=\"icon()\" />\n  </ng-content>\n  <h1 class=\"my-9\">{{ titleText() | translate }}</h1>\n  @if (copyText()) {\n    <h2 class=\"mb-9\">{{ copyText() | translate }}</h2>\n  }\n  @if (instructions()) {\n    <p class=\"text-pre-wrap text-center si-body-1 mb-9\">{{ instructions() | translate }}</p>\n  }\n  @if (link()?.title) {\n    <a class=\"btn btn-primary\" [siLink]=\"link()\">{{ link()?.title | translate }}</a>\n  }\n  <ng-content select=\".si-info-actions\" />\n</div>\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-info-page.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/siemens-element-ng-inline-notification.mjs

@@ -1,7 +1,7 @@
 import { NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, input, booleanAttribute, computed, Component, NgModule } from '@angular/core';
-import { STATUS_ICON_CONFIG, SiIconNextComponent } from '@siemens/element-ng/icon';
+import { input, booleanAttribute, Component, NgModule } from '@angular/core';
+import { SiStatusIconComponent } from '@siemens/element-ng/icon';
 import { SiLinkDirective } from '@siemens/element-ng/link';
 import * as i1 from '@siemens/element-translate-ng/translate';
 import { SiTranslateModule } from '@siemens/element-translate-ng/translate';
@@ -11,7 +11,6 @@ import { SiTranslateModule } from '@siemens/element-translate-ng/translate';
  * SPDX-License-Identifier: MIT
  */
 class SiInlineNotificationComponent {
-    statusIcons = inject(STATUS_ICON_CONFIG);
     /**
      * Status of inline notification.
      */
@@ -43,13 +42,12 @@ class SiInlineNotificationComponent {
      * @defaultValue false
      */
     embedded = input(false, { transform: booleanAttribute });
-    icon = computed(() => this.statusIcons[this.severity()] ?? this.statusIcons.info);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiInlineNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiInlineNotificationComponent, isStandalone: true, selector: "si-inline-notification", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: true, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, translationParams: { classPropertyName: "translationParams", publicName: "translationParams", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"alert d-flex align-items-start\"\n  role=\"alert\"\n  aria-atomic=\"true\"\n  aria-live=\"assertive\"\n  [ngClass]=\"'alert-' + severity()\"\n  [hidden]=\"!severity()\"\n>\n  @let iconValue = icon();\n  <span class=\"icon icon-stack me-4 flex-shrink-0\">\n    <si-icon-next [ngClass]=\"iconValue.color\" [icon]=\"iconValue.icon\" />\n    <si-icon-next [ngClass]=\"iconValue.stackedColor\" [icon]=\"iconValue.stacked\" />\n  </span>\n  <div class=\"d-flex flex-grow-1 flex-wrap mt-1\">\n    @if (heading()) {\n      <strong class=\"pe-2\">{{ heading() | translate: translationParams() }}: </strong>\n    }\n    <span>{{ message() | translate: translationParams() }}</span>\n  </div>\n  @if (action() && action()?.title) {\n    <a class=\"alert-link ms-4 flex-shrink-0 mt-1\" [siLink]=\"action()\">\n      {{ action()?.title | translate: translationParams() }}\n    </a>\n  }\n</div>\n", styles: [":host{display:block;overflow:hidden;flex-shrink:0;border-radius:var(--element-button-radius)}.alert :is(div,a){padding-block-start:1px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiInlineNotificationComponent, isStandalone: true, selector: "si-inline-notification", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: true, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, translationParams: { classPropertyName: "translationParams", publicName: "translationParams", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"alert d-flex align-items-start\"\n  role=\"alert\"\n  aria-atomic=\"true\"\n  aria-live=\"assertive\"\n  [ngClass]=\"'alert-' + severity()\"\n  [hidden]=\"!severity()\"\n>\n  <si-status-icon class=\"icon me-4 flex-shrink-0\" [status]=\"severity()\" />\n\n  <div class=\"d-flex flex-grow-1 flex-wrap mt-1\">\n    @if (heading()) {\n      <strong class=\"pe-2\">{{ heading() | translate: translationParams() }}: </strong>\n    }\n    <span>{{ message() | translate: translationParams() }}</span>\n  </div>\n  @if (action() && action()?.title) {\n    <a class=\"alert-link ms-4 flex-shrink-0 mt-1\" [siLink]=\"action()\">\n      {{ action()?.title | translate: translationParams() }}\n    </a>\n  }\n</div>\n", styles: [":host{display:block;overflow:hidden;flex-shrink:0;border-radius:var(--element-button-radius)}.alert :is(div,a){padding-block-start:1px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }, { kind: "component", type: SiStatusIconComponent, selector: "si-status-icon", inputs: ["status"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiInlineNotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-inline-notification', imports: [NgClass, SiLinkDirective, SiIconNextComponent, SiTranslateModule], template: "<div\n  class=\"alert d-flex align-items-start\"\n  role=\"alert\"\n  aria-atomic=\"true\"\n  aria-live=\"assertive\"\n  [ngClass]=\"'alert-' + severity()\"\n  [hidden]=\"!severity()\"\n>\n  @let iconValue = icon();\n  <span class=\"icon icon-stack me-4 flex-shrink-0\">\n    <si-icon-next [ngClass]=\"iconValue.color\" [icon]=\"iconValue.icon\" />\n    <si-icon-next [ngClass]=\"iconValue.stackedColor\" [icon]=\"iconValue.stacked\" />\n  </span>\n  <div class=\"d-flex flex-grow-1 flex-wrap mt-1\">\n    @if (heading()) {\n      <strong class=\"pe-2\">{{ heading() | translate: translationParams() }}: </strong>\n    }\n    <span>{{ message() | translate: translationParams() }}</span>\n  </div>\n  @if (action() && action()?.title) {\n    <a class=\"alert-link ms-4 flex-shrink-0 mt-1\" [siLink]=\"action()\">\n      {{ action()?.title | translate: translationParams() }}\n    </a>\n  }\n</div>\n", styles: [":host{display:block;overflow:hidden;flex-shrink:0;border-radius:var(--element-button-radius)}.alert :is(div,a){padding-block-start:1px}\n"] }]
+            args: [{ selector: 'si-inline-notification', imports: [NgClass, SiLinkDirective, SiTranslateModule, SiStatusIconComponent], template: "<div\n  class=\"alert d-flex align-items-start\"\n  role=\"alert\"\n  aria-atomic=\"true\"\n  aria-live=\"assertive\"\n  [ngClass]=\"'alert-' + severity()\"\n  [hidden]=\"!severity()\"\n>\n  <si-status-icon class=\"icon me-4 flex-shrink-0\" [status]=\"severity()\" />\n\n  <div class=\"d-flex flex-grow-1 flex-wrap mt-1\">\n    @if (heading()) {\n      <strong class=\"pe-2\">{{ heading() | translate: translationParams() }}: </strong>\n    }\n    <span>{{ message() | translate: translationParams() }}</span>\n  </div>\n  @if (action() && action()?.title) {\n    <a class=\"alert-link ms-4 flex-shrink-0 mt-1\" [siLink]=\"action()\">\n      {{ action()?.title | translate: translationParams() }}\n    </a>\n  }\n</div>\n", styles: [":host{display:block;overflow:hidden;flex-shrink:0;border-radius:var(--element-button-radius)}.alert :is(div,a){padding-block-start:1px}\n"] }]
         }] });
 
 /**

package/fesm2022/siemens-element-ng-inline-notification.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-inline-notification.mjs","sources":["../../../../projects/element-ng/inline-notification/si-inline-notification.component.ts","../../../../projects/element-ng/inline-notification/si-inline-notification.component.html","../../../../projects/element-ng/inline-notification/si-inline-notification.module.ts","../../../../projects/element-ng/inline-notification/index.ts","../../../../projects/element-ng/inline-notification/siemens-element-ng-inline-notification.ts"],"sourcesContent":["/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { NgClass } from '@angular/common';\nimport { booleanAttribute, Component, computed, inject, input } from '@angular/core';\nimport { StatusType } from '@siemens/element-ng/common';\nimport { SiIconNextComponent, STATUS_ICON_CONFIG } from '@siemens/element-ng/icon';\nimport { Link, SiLinkDirective } from '@siemens/element-ng/link';\nimport { SiTranslateModule } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-inline-notification',\n  templateUrl: './si-inline-notification.component.html',\n  styleUrl: './si-inline-notification.component.scss',\n  imports: [NgClass, SiLinkDirective, SiIconNextComponent, SiTranslateModule]\n})\nexport class SiInlineNotificationComponent {\n  private readonly statusIcons = inject(STATUS_ICON_CONFIG);\n  /**\n   * Status of inline notification.\n   */\n  readonly severity = input.required<StatusType>();\n\n  /**\n   * Heading of the message.\n   */\n  readonly heading = input<string>();\n\n  /**\n   * Main message of this inline notification.\n   */\n  readonly message = input.required<string>();\n\n  /**\n   * Optional link action for inline notification events.\n   */\n  readonly action = input<Link>();\n\n  /**\n   * Params passed to the translation pipe\n   *\n   * @defaultValue\n   * ```\n   * {}\n   * ```\n   */\n  readonly translationParams = input<{ [key: string]: any } | undefined>({});\n\n  /**\n   * Displays in embedded style, w/o radius and indicator bar\n   *\n   * @defaultValue false\n   */\n  readonly embedded = input(false, { transform: booleanAttribute });\n\n  protected readonly icon = computed(\n    () => this.statusIcons[this.severity()] ?? this.statusIcons.info\n  );\n}\n","<div\n  class=\"alert d-flex align-items-start\"\n  role=\"alert\"\n  aria-atomic=\"true\"\n  aria-live=\"assertive\"\n  [ngClass]=\"'alert-' + severity()\"\n  [hidden]=\"!severity()\"\n>\n  @let iconValue = icon();\n  <span class=\"icon icon-stack me-4 flex-shrink-0\">\n    <si-icon-next [ngClass]=\"iconValue.color\" [icon]=\"iconValue.icon\" />\n    <si-icon-next [ngClass]=\"iconValue.stackedColor\" [icon]=\"iconValue.stacked\" />\n  </span>\n  <div class=\"d-flex flex-grow-1 flex-wrap mt-1\">\n    @if (heading()) {\n      <strong class=\"pe-2\">{{ heading() | translate: translationParams() }}: </strong>\n    }\n    <span>{{ message() | translate: translationParams() }}</span>\n  </div>\n  @if (action() && action()?.title) {\n    <a class=\"alert-link ms-4 flex-shrink-0 mt-1\" [siLink]=\"action()\">\n      {{ action()?.title | translate: translationParams() }}\n    </a>\n  }\n</div>\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiInlineNotificationComponent } from './si-inline-notification.component';\n\n@NgModule({\n  imports: [SiInlineNotificationComponent],\n  exports: [SiInlineNotificationComponent]\n})\nexport class SiInlineNotificationModule {}\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-inline-notification.component';\nexport * from './si-inline-notification.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"siemens-element-ng-inline-notification.mjs","sources":["../../../../projects/element-ng/inline-notification/si-inline-notification.component.ts","../../../../projects/element-ng/inline-notification/si-inline-notification.component.html","../../../../projects/element-ng/inline-notification/si-inline-notification.module.ts","../../../../projects/element-ng/inline-notification/index.ts","../../../../projects/element-ng/inline-notification/siemens-element-ng-inline-notification.ts"],"sourcesContent":["/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { NgClass } from '@angular/common';\nimport { booleanAttribute, Component, input } from '@angular/core';\nimport { StatusType } from '@siemens/element-ng/common';\nimport { SiStatusIconComponent } from '@siemens/element-ng/icon';\nimport { Link, SiLinkDirective } from '@siemens/element-ng/link';\nimport { SiTranslateModule } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-inline-notification',\n  templateUrl: './si-inline-notification.component.html',\n  styleUrl: './si-inline-notification.component.scss',\n  imports: [NgClass, SiLinkDirective, SiTranslateModule, SiStatusIconComponent]\n})\nexport class SiInlineNotificationComponent {\n  /**\n   * Status of inline notification.\n   */\n  readonly severity = input.required<StatusType>();\n\n  /**\n   * Heading of the message.\n   */\n  readonly heading = input<string>();\n\n  /**\n   * Main message of this inline notification.\n   */\n  readonly message = input.required<string>();\n\n  /**\n   * Optional link action for inline notification events.\n   */\n  readonly action = input<Link>();\n\n  /**\n   * Params passed to the translation pipe\n   *\n   * @defaultValue\n   * ```\n   * {}\n   * ```\n   */\n  readonly translationParams = input<{ [key: string]: any } | undefined>({});\n\n  /**\n   * Displays in embedded style, w/o radius and indicator bar\n   *\n   * @defaultValue false\n   */\n  readonly embedded = input(false, { transform: booleanAttribute });\n}\n","<div\n  class=\"alert d-flex align-items-start\"\n  role=\"alert\"\n  aria-atomic=\"true\"\n  aria-live=\"assertive\"\n  [ngClass]=\"'alert-' + severity()\"\n  [hidden]=\"!severity()\"\n>\n  <si-status-icon class=\"icon me-4 flex-shrink-0\" [status]=\"severity()\" />\n\n  <div class=\"d-flex flex-grow-1 flex-wrap mt-1\">\n    @if (heading()) {\n      <strong class=\"pe-2\">{{ heading() | translate: translationParams() }}: </strong>\n    }\n    <span>{{ message() | translate: translationParams() }}</span>\n  </div>\n  @if (action() && action()?.title) {\n    <a class=\"alert-link ms-4 flex-shrink-0 mt-1\" [siLink]=\"action()\">\n      {{ action()?.title | translate: translationParams() }}\n    </a>\n  }\n</div>\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiInlineNotificationComponent } from './si-inline-notification.component';\n\n@NgModule({\n  imports: [SiInlineNotificationComponent],\n  exports: [SiInlineNotificationComponent]\n})\nexport class SiInlineNotificationModule {}\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-inline-notification.component';\nexport * from './si-inline-notification.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/siemens-element-ng-ip-input.mjs

@@ -0,0 +1,451 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Renderer2, input, booleanAttribute, signal, computed, HostListener, Directive } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { SI_FORM_ITEM_CONTROL } from '@siemens/element-ng/form';
+
+const isDigit = (c) => c >= '0' && c <= '9';
+const isHex = (c) => (c >= '0' && c <= '9') || (c >= 'A' && c <= 'F');
+/**
+ * Parse IPv4 input string into IPv4 address section array.
+ */
+const splitIpV4Sections = (options) => {
+    const { input, pos, cidr } = options;
+    const sections = [{ value: '' }];
+    if (!input) {
+        return sections;
+    }
+    let maxDots = 3;
+    for (let i = 0; i < input.length; i++) {
+        const c = input.charAt(i);
+        if (isDigit(c)) {
+            sections.at(-1).value += c;
+        }
+        else if (c === '.' && maxDots > 0) {
+            maxDots--;
+            sections.push({ value: c }, { value: '' });
+        }
+        else if (cidr && c === '/') {
+            sections.push({ value: c }, { value: '', mask: true });
+        }
+        if (pos === i) {
+            sections.at(-1).current = true;
+        }
+    }
+    // Trim empty sections for example the user entered ..
+    let previousDivider = false;
+    for (let i = 0; i < sections.length; i += 2) {
+        const isDivider = sections.at(i)?.value === '' && sections.at(i + 1)?.value === '.';
+        if (previousDivider && isDivider) {
+            sections.splice(i, 2);
+        }
+        previousDivider = isDivider;
+    }
+    // Split values > 255 in multiple sections:
+    // - 256 will be split into 25 and 6
+    // - 255255255 will be split into 255, 255 and 255
+    for (let i = 0; i < sections.length; i++) {
+        const { value, current } = sections[i];
+        if (value.length >= 3 && parseInt(value, 10) > 255) {
+            const append = [];
+            let n = '';
+            for (const c of value) {
+                if (parseInt(n + c, 10) > 255) {
+                    append.push({ value: n }, { value: '.' });
+                    n = c;
+                }
+                else {
+                    n += c;
+                }
+            }
+            if (n.length > 0) {
+                append.push({ value: n });
+            }
+            sections.splice(i, 1, ...append);
+            if (current) {
+                sections[i + append.length - 1].current = true;
+            }
+        }
+    }
+    // Split leading zero sections:
+    // Assume a string starting by 0 e.g. 012 will be split into 0 and 12
+    for (let i = 0; i < sections.length; i++) {
+        const sec = sections[i];
+        if (sec.value.length > 1 && sec.value.startsWith('0')) {
+            sections.splice(i, 1, { value: '0' }, { value: sec.value.substring(1) });
+        }
+    }
+    // Ensure the that the CIDR divider is a slash
+    if (cidr) {
+        const startCidr = 7;
+        if (startCidr < sections.length && sections[startCidr].value === '.') {
+            sections[startCidr].value = '/';
+        }
+        const prefixPos = startCidr + 1;
+        if (prefixPos < sections.length) {
+            const prefixLength = sections[prefixPos].value;
+            if (parseInt(prefixLength, 10) > 32) {
+                sections[prefixPos].value = prefixLength.substring(0, 2);
+            }
+        }
+    }
+    return sections;
+};
+const splitIpV6Sections = (options) => {
+    const { type, input, pos, zeroCompression, cidr } = options;
+    const sections = [{ value: '' }];
+    if (!input) {
+        return sections;
+    }
+    for (let i = 0; i < input.length; i++) {
+        const c = input.charAt(i).toUpperCase();
+        if (isHex(c)) {
+            sections.at(-1).value += c;
+        }
+        else if (c === ':') {
+            if (input.charAt(i - 1) === c) {
+                // Merge :: characters
+                sections.at(-2).value += c;
+            }
+            else {
+                sections.push({ value: c }, { value: '' });
+            }
+        }
+        else if (cidr && c === '/') {
+            sections.push({ value: c }, { value: '', mask: true });
+        }
+        if (pos === i) {
+            sections.at(-1).current = true;
+        }
+    }
+    // Split values > FFFF in multiple sections:
+    // - 1FFFF will be split into 1FFF and F
+    for (let i = 0; i < sections.length; i++) {
+        const { value, current } = sections[i];
+        if (value.length > 4) {
+            const append = [];
+            for (let p = 0; p < value.length; p += 4) {
+                const part = value.substring(p, p + 4);
+                append.push({ value: part });
+                if (part.length === 4) {
+                    append.push({ value: ':' });
+                }
+            }
+            sections.splice(i, 1, ...append);
+            if (current) {
+                sections[i + append.length - 1].current = true;
+            }
+        }
+    }
+    // Drop invalid zero compression indicators '::'
+    const removeEnd = pos === input.length - 1 || type === 'paste';
+    let matches = sections.filter(s => s.value.startsWith('::'));
+    if (matches) {
+        matches = removeEnd ? matches : matches.reverse();
+        if (zeroCompression) {
+            matches.shift();
+        }
+        // Only allow one occurrence of ::
+        for (const drop of matches) {
+            drop.value = drop.value.substring(1);
+        }
+    }
+    // Ensure the that the CIDR divider is a slash
+    if (cidr) {
+        const startCidr = matches.length > 0 ? 13 : 15;
+        if (startCidr < sections.length && sections[startCidr].value === ':') {
+            sections[startCidr].value = '/';
+        }
+        const prefixPos = startCidr + 1;
+        if (prefixPos < sections.length) {
+            const prefixLength = sections[prefixPos].value;
+            if (parseInt(prefixLength, 10) > 128) {
+                sections[prefixPos].value = prefixLength.substring(0, 2);
+            }
+        }
+    }
+    return sections;
+};
+
+const ipv4Regex = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+const ipv4CIDRRegex = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\/([1-9]|1[0-9]|2[0-9]|3[0-2]))$/;
+// Matches 1:2:3:4:5:6:7:8
+const ipV6Regex = /^(([0-9A-Fa-f]{1,4}:){7})([0-9A-Fa-f]{1,4})$/;
+// Matches range from 1:2:3:4:5:6:7:8/1 to 1:2:3:4:5:6:7:8/128
+const ipV6CIDRRegex = /^(([0-9A-Fa-f]{1,4}:){7})([0-9A-Fa-f]{1,4})\/([1-9]|[1-9][0-9]|10[0-9]|11[0-9]|12[0-8])$/;
+// Matches
+// 1:2:3:4:5:6:7:8
+// 1::             (1:0:0:0:0:0:0:0)
+// 1:2:3:4:5:6:7:: (1:2:3:4:5:6:7:0)
+// 1::8            (1:0:0:0:0:0:0:8)
+// 1:2:3:4:5:6::8  (1:2:3:4:5:6:0:8)
+// 1::7:8          (1:0:0:0:0:0:7:8)
+// 1:2:3:4:5::7:8  (1:2:3:4:5:0:7:8)
+// ...
+const ipV6ZeroCompressionRegex = /^(([0-9A-Fa-f]{1,4}:){7})([0-9A-Fa-f]{1,4})|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)$/;
+const ipV6ZeroCompressionCIDRRegex = /^((([0-9A-Fa-f]{1,4}:){7})([0-9A-Fa-f]{1,4})|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:))\/([1-9]|[1-9][0-9]|10[0-9]|11[0-9]|12[0-8])$/;
+/**
+ * Validator factory for a IPV6 address.
+
+ */
+const ipV6Validator = (options) => {
+    return (control) => {
+        const value = control.value;
+        let valid;
+        if (options.cidr && options.zeroCompression) {
+            valid = value === '' || value?.match(ipV6ZeroCompressionCIDRRegex);
+        }
+        else if (options.cidr) {
+            valid = value === '' || value?.match(ipV6CIDRRegex);
+        }
+        else if (options.zeroCompression) {
+            valid =
+                (value === '' || value?.toString().match(ipV6ZeroCompressionRegex)) &&
+                    value?.split('::').length <= 2;
+        }
+        else {
+            valid = value === '' || value?.toString().match(ipV6Regex);
+        }
+        return valid ? null : { ipv6Address: true };
+    };
+};
+/**
+ * Validates a IPV4 address.
+ */
+const ipV4Validator = (control) => {
+    const v = control.value;
+    const valid = v === '' || v?.toString().match(ipv4Regex);
+    return valid ? null : { ipv4Address: true };
+};
+/**
+ * Validates a IPV4 address including CIDR.
+ */
+const ipV4CIDRValidator = (control) => {
+    const v = control.value;
+    const valid = v === '' || v?.toString().match(ipv4CIDRRegex);
+    return valid ? null : { ipv4Address: true };
+};
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+const eventMap = new Map([
+    ['insertText', 'insert'],
+    ['insertFromPaste', 'paste'],
+    ['deleteContentBackward', 'delete']
+]);
+/**
+ * Base directive for ip address input fields.
+ */
+class SiIpInputDirective {
+    static idCounter = 0;
+    elementRef = inject((ElementRef));
+    renderer = inject(Renderer2);
+    inputEl = this.elementRef.nativeElement;
+    /**
+     * @defaultValue
+     * ```
+     * `si-ip-input-${SiIpInputDirective.idCounter++}`
+     * ```
+     */
+    id = input(`si-ip-input-${SiIpInputDirective.idCounter++}`);
+    /**
+     * Enable CIDR (Classless Inter-Domain Routing) notation.
+     * @defaultValue false
+     */
+    cidr = input(false, { transform: booleanAttribute });
+    /**
+     * Whether the ip address input is disabled.
+     * @defaultValue false
+     */
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    disabledInput = input(false, { alias: 'disabled' });
+    disabledNgControl = signal(false);
+    disabled = computed(() => this.disabledInput() || this.disabledNgControl());
+    onTouched = () => { };
+    onChange = () => { };
+    value = '';
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledNgControl.set(isDisabled);
+    }
+    writeValue(value) {
+        this.value = value;
+        this.renderer.setProperty(this.inputEl, 'value', value ?? '');
+    }
+    onInput(e) {
+        const el = e.target;
+        const selStart = el.selectionStart ?? 0;
+        const { inputType, data } = e;
+        const len = data?.length ?? 0;
+        this.maskInput({
+            value: el.value,
+            type: eventMap.get(inputType),
+            change: data,
+            pos: selStart - len,
+            previous: this.value
+        });
+        this.value = el.value;
+        this.onChange(this.value);
+    }
+    blur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiIpInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: SiIpInputDirective, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, cidr: { classPropertyName: "cidr", publicName: "cidr", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "blur": "blur()" }, properties: { "id": "id()", "disabled": "disabled() || null" } }, providers: [
+            {
+                provide: SI_FORM_ITEM_CONTROL,
+                useExisting: SiIpInputDirective
+            }
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiIpInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        {
+                            provide: SI_FORM_ITEM_CONTROL,
+                            useExisting: SiIpInputDirective
+                        }
+                    ],
+                    host: {
+                        '[id]': 'id()',
+                        '[disabled]': 'disabled() || null'
+                    }
+                }]
+        }], propDecorators: { onInput: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }], blur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiIp4InputDirective extends SiIpInputDirective {
+    validate(control) {
+        return this.cidr() ? ipV4CIDRValidator(control) : ipV4Validator(control);
+    }
+    maskInput(e) {
+        const { value, pos, type } = e;
+        const sections = splitIpV4Sections({ type, input: value, pos, cidr: this.cidr() });
+        this.renderer.setProperty(this.inputEl, 'value', sections
+            .splice(0, this.cidr() ? 9 : 7)
+            .map(s => s.value)
+            .join(''));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiIp4InputDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SiIp4InputDirective, isStandalone: true, selector: "input[siIpV4]", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: SiIp4InputDirective,
+                multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: SiIp4InputDirective,
+                multi: true
+            }
+        ], exportAs: ["siIpV4"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiIp4InputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[siIpV4]',
+                    exportAs: 'siIpV4',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: SiIp4InputDirective,
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: SiIp4InputDirective,
+                            multi: true
+                        }
+                    ]
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiIp6InputDirective extends SiIpInputDirective {
+    validatorFn = computed(() => ipV6Validator({ zeroCompression: true, cidr: this.cidr() }));
+    validate(control) {
+        return this.validatorFn()(control);
+    }
+    maskInput(e) {
+        const { value, pos, type } = e;
+        if (!value) {
+            this.renderer.setProperty(this.inputEl, 'value', '');
+            return;
+        }
+        // TODO: Restore cursor position
+        const sections = splitIpV6Sections({
+            type,
+            input: value,
+            pos,
+            zeroCompression: true,
+            cidr: this.cidr()
+        });
+        this.renderer.setProperty(this.inputEl, 'value', sections
+            .splice(0, this.cidr() ? 17 : 15)
+            .map(s => s.value)
+            .join(''));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiIp6InputDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SiIp6InputDirective, isStandalone: true, selector: "input[siIpV6]", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: SiIp6InputDirective,
+                multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: SiIp6InputDirective,
+                multi: true
+            }
+        ], exportAs: ["siIpV6"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiIp6InputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[siIpV6]',
+                    exportAs: 'siIpV6',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: SiIp6InputDirective,
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: SiIp6InputDirective,
+                            multi: true
+                        }
+                    ]
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiIp4InputDirective, SiIp6InputDirective, ipV4CIDRValidator, ipV4Validator, ipV6Validator };
+//# sourceMappingURL=siemens-element-ng-ip-input.mjs.map