npm - @siemens/element-ng - Versions diffs - 49.6.0 → 49.8.0 - Mend

@siemens/element-ng 49.6.0 → 49.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (123) hide show

package/fesm2022/siemens-element-ng-notification-item.mjs CHANGED Viewed

@@ -54,7 +54,7 @@ class SiNotificationItemComponent {
     primaryAction = input(...(ngDevMode ? [undefined, { debugName: "primaryAction" }] : []));
     activatedRoute = inject(ActivatedRoute, { optional: true });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiNotificationItemComponent, isStandalone: true, selector: "si-notification-item", inputs: { timeStamp: { classPropertyName: "timeStamp", publicName: "timeStamp", isSignal: true, isRequired: true, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, unread: { classPropertyName: "unread", publicName: "unread", isSignal: true, isRequired: false, transformFunction: null }, itemLink: { classPropertyName: "itemLink", publicName: "itemLink", isSignal: true, isRequired: false, transformFunction: null }, quickActions: { classPropertyName: "quickActions", publicName: "quickActions", isSignal: true, isRequired: false, transformFunction: null }, primaryAction: { classPropertyName: "primaryAction", publicName: "primaryAction", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"notification-item px-6 py-5\">\n  <div class=\"notification-item-indicator\">\n    <div>\n      @if (unread()) {\n        <span class=\"dot\"></span>\n      }\n      <ng-content select=\"si-avatar,si-circle-status,si-icon,si-status-icon\" />\n    </div>\n  </div>\n\n  <div class=\"notification-item-content\">\n    @let itemLinkValue = itemLink();\n    @if (itemLinkValue) {\n      @switch (itemLinkValue.type) {\n        @case ('link') {\n          <a\n            [href]=\"itemLinkValue.href\"\n            [target]=\"itemLinkValue.target\"\n            [attr.aria-label]=\"heading() + ' link'\"\n          >\n            <ng-container *ngTemplateOutlet=\"content\" />\n          </a>\n        }\n        @case ('router-link') {\n          <a\n            [routerLink]=\"itemLinkValue.routerLink\"\n            [queryParams]=\"itemLinkValue.extras?.queryParams\"\n            [queryParamsHandling]=\"itemLinkValue.extras?.queryParamsHandling\"\n            [fragment]=\"itemLinkValue.extras?.fragment\"\n            [state]=\"itemLinkValue.extras?.state\"\n            [relativeTo]=\"itemLinkValue.extras?.relativeTo ?? activatedRoute\"\n            [preserveFragment]=\"itemLinkValue.extras?.preserveFragment\"\n            [skipLocationChange]=\"itemLinkValue.extras?.skipLocationChange\"\n            [replaceUrl]=\"itemLinkValue.extras?.replaceUrl\"\n            [attr.aria-label]=\"heading() + ' link'\"\n          >\n            <ng-container *ngTemplateOutlet=\"content\" />\n          </a>\n        }\n      }\n    } @else {\n      <ng-container *ngTemplateOutlet=\"content\" />\n    }\n  </div>\n\n  @let primaryActionValue = primaryAction();\n  @if (primaryActionValue) {\n    <div class=\"notification-item-primary-action\">\n      @if (primaryActionValue.type === 'menu') {\n        <ng-container *ngTemplateOutlet=\"menu; context: { $implicit: primaryActionValue }\" />\n      } @else if (primaryActionValue.type === 'action-button') {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary\"\n          (click)=\"primaryActionValue.action(primaryActionValue)\"\n          >{{ primaryActionValue.label | translate }}</button\n        >\n      } @else {\n        <ng-container *ngTemplateOutlet=\"action; context: { $implicit: primaryActionValue }\" />\n      }\n    </div>\n  } @else {\n    <div class=\"notification-item-primary-action\">\n      <ng-content select=\"[action]\" />\n    </div>\n  }\n\n  @let quickActionsValue = quickActions();\n  @if (quickActionsValue) {\n    <div class=\"notification-item-quick-actions\">\n      @for (quickAction of quickActionsValue; track $index) {\n        <ng-container *ngTemplateOutlet=\"action; context: { $implicit: quickAction }\" />\n      }\n    </div>\n  } @else {\n    <div class=\"notification-item-quick-actions\">\n      <ng-content select=\"[quick-actions]\" />\n    </div>\n  }\n</div>\n\n<ng-template #action let-action>\n  @switch (action.type) {\n    @case ('action-circle-button') {\n      <ng-container *ngTemplateOutlet=\"actionButton; context: { $implicit: action }\" />\n    }\n    @case ('action-icon-button') {\n      <ng-container *ngTemplateOutlet=\"actionButton; context: { $implicit: action }\" />\n    }\n    @case ('router-link') {\n      <ng-container *ngTemplateOutlet=\"routerLink; context: { $implicit: action }\" />\n    }\n    @case ('link') {\n      <ng-container *ngTemplateOutlet=\"link; context: { $implicit: action }\" />\n    }\n  }\n</ng-template>\n\n<ng-template #content>\n  <div class=\"d-flex flex-column gap-3 text-body\">\n    <span class=\"si-body text-secondary\">{{ timeStamp() | translate }}</span>\n    <span [class.si-h5-bold]=\"unread()\" [class.si-h5]=\"!unread()\">{{ heading() | translate }}</span>\n    @if (description()) {\n      <span class=\"si-body\">{{ description() | translate }}</span>\n    }\n    <div class=\"si-body\">\n      <ng-content select=\"[description]\" />\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #actionButton let-action>\n  <button\n    type=\"button\"\n    class=\"btn btn-ghost btn-icon\"\n    [attr.aria-label]=\"action.ariaLabel\"\n    (click)=\"action.action(action)\"\n  >\n    <si-icon class=\"icon\" [icon]=\"action.icon\" />\n  </button>\n</ng-template>\n\n<ng-template #routerLink let-action>\n  <a\n    class=\"btn btn-ghost p-2 btn-icon\"\n    [routerLink]=\"action.routerLink\"\n    [queryParams]=\"action.extras?.queryParams\"\n    [queryParamsHandling]=\"action.extras?.queryParamsHandling\"\n    [fragment]=\"action.extras?.fragment\"\n    [state]=\"action.extras?.state\"\n    [relativeTo]=\"action.extras?.relativeTo ?? activatedRoute\"\n    [preserveFragment]=\"action.extras?.preserveFragment\"\n    [skipLocationChange]=\"action.extras?.skipLocationChange\"\n    [replaceUrl]=\"action.extras?.replaceUrl\"\n    [attr.aria-label]=\"action.ariaLabel\"\n  >\n    <si-icon class=\"icon\" [icon]=\"action.icon\" />\n  </a>\n</ng-template>\n\n<ng-template #link let-action>\n  <a\n    class=\"btn btn-ghost p-2 btn-icon\"\n    [href]=\"action.href\"\n    [target]=\"action.target\"\n    [attr.aria-label]=\"action.ariaLabel\"\n  >\n    <si-icon class=\"icon\" [icon]=\"action.icon\" />\n  </a>\n</ng-template>\n\n<ng-template #menu let-action>\n  <button\n    type=\"button\"\n    class=\"btn btn-ghost btn-icon\"\n    [attr.aria-label]=\"heading() + ' dropdown'\"\n    [cdkMenuTriggerFor]=\"actionMenu\"\n  >\n    <si-icon [icon]=\"icons.elementOptionsVertical\" />\n  </button>\n\n  <ng-template #actionMenu>\n    <si-menu-factory [items]=\"action.menuItems\" />\n  </ng-template>\n</ng-template>\n", styles: [":host div:empty{display:none!important}:host div:has(.notification-item-content a):hover{background-color:var(--element-base-1-hover)}:host .notification-item{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}:host .notification-item a{text-decoration:none}:host .notification-item a:focus-visible div{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}:host .notification-item .notification-item-indicator{grid-column:1;grid-row:1}:host .notification-item .notification-item-indicator div{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center}:host .notification-item .notification-item-content{grid-column:2;grid-row:1;flex-grow:1}:host .notification-item .notification-item-primary-action{grid-column:3;grid-row:1/span 2;display:flex;align-items:center;margin-inline-start:8px}:host .notification-item .notification-item-quick-actions{grid-column:2;grid-row:2;display:flex;gap:8px;margin-block-start:8px}:host .dot{display:block;position:absolute;block-size:6px;inline-size:6px;border-radius:50%;background-color:var(--element-ui-1);inset-inline-start:-10px}:host .notification-item-indicator:has(si-avatar){margin-inline-end:16px}:host .notification-item-indicator:has(si-circle-status){margin-inline-end:4px}:host .notification-item-indicator:not(:has(si-avatar,si-circle-status)):has(si-icon){margin-inline-end:8px;margin-block-start:calc(.875rem * 1.1428571429 + 4px)}:host .notification-item-indicator:not(:has(si-avatar,si-circle-status,si-icon)){inline-size:0;margin-block-start:calc(.875rem * 1.1428571429 + 6px)}:host .notification-item-indicator:not(:has(si-avatar,si-circle-status,si-icon)) div{block-size:1rem}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiNotificationItemComponent, isStandalone: true, selector: "si-notification-item", inputs: { timeStamp: { classPropertyName: "timeStamp", publicName: "timeStamp", isSignal: true, isRequired: true, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, unread: { classPropertyName: "unread", publicName: "unread", isSignal: true, isRequired: false, transformFunction: null }, itemLink: { classPropertyName: "itemLink", publicName: "itemLink", isSignal: true, isRequired: false, transformFunction: null }, quickActions: { classPropertyName: "quickActions", publicName: "quickActions", isSignal: true, isRequired: false, transformFunction: null }, primaryAction: { classPropertyName: "primaryAction", publicName: "primaryAction", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"notification-item px-6 py-5\">\n  <div class=\"notification-item-indicator\">\n    <div>\n      @if (unread()) {\n        <span class=\"dot\"></span>\n      }\n      <ng-content select=\"si-avatar,si-circle-status,si-icon,si-status-icon\" />\n    </div>\n  </div>\n\n  <div class=\"notification-item-content\">\n    @let itemLinkValue = itemLink();\n    @if (itemLinkValue) {\n      @switch (itemLinkValue.type) {\n        @case ('link') {\n          <a\n            [href]=\"itemLinkValue.href\"\n            [target]=\"itemLinkValue.target\"\n            [attr.aria-label]=\"heading() + ' link'\"\n          >\n            <ng-container *ngTemplateOutlet=\"content\" />\n          </a>\n        }\n        @case ('router-link') {\n          <a\n            [routerLink]=\"itemLinkValue.routerLink\"\n            [queryParams]=\"itemLinkValue.extras?.queryParams\"\n            [queryParamsHandling]=\"itemLinkValue.extras?.queryParamsHandling\"\n            [fragment]=\"itemLinkValue.extras?.fragment\"\n            [state]=\"itemLinkValue.extras?.state\"\n            [relativeTo]=\"itemLinkValue.extras?.relativeTo ?? activatedRoute\"\n            [preserveFragment]=\"itemLinkValue.extras?.preserveFragment\"\n            [skipLocationChange]=\"itemLinkValue.extras?.skipLocationChange\"\n            [replaceUrl]=\"itemLinkValue.extras?.replaceUrl\"\n            [attr.aria-label]=\"heading() + ' link'\"\n          >\n            <ng-container *ngTemplateOutlet=\"content\" />\n          </a>\n        }\n      }\n    } @else {\n      <ng-container *ngTemplateOutlet=\"content\" />\n    }\n  </div>\n\n  @let primaryActionValue = primaryAction();\n  @if (primaryActionValue) {\n    <div class=\"notification-item-primary-action\">\n      @if (primaryActionValue.type === 'menu') {\n        <ng-container *ngTemplateOutlet=\"menu; context: { $implicit: primaryActionValue }\" />\n      } @else if (primaryActionValue.type === 'action-button') {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary\"\n          (click)=\"primaryActionValue.action(primaryActionValue)\"\n          >{{ primaryActionValue.label | translate }}</button\n        >\n      } @else {\n        <ng-container *ngTemplateOutlet=\"action; context: { $implicit: primaryActionValue }\" />\n      }\n    </div>\n  } @else {\n    <div class=\"notification-item-primary-action\">\n      <ng-content select=\"[action]\" />\n    </div>\n  }\n\n  @let quickActionsValue = quickActions();\n  @if (quickActionsValue) {\n    <div class=\"notification-item-quick-actions\">\n      @for (quickAction of quickActionsValue; track $index) {\n        <ng-container *ngTemplateOutlet=\"action; context: { $implicit: quickAction }\" />\n      }\n    </div>\n  } @else {\n    <div class=\"notification-item-quick-actions\">\n      <ng-content select=\"[quick-actions]\" />\n    </div>\n  }\n</div>\n\n<ng-template #action let-action>\n  @switch (action.type) {\n    @case ('action-circle-button') {\n      <ng-container *ngTemplateOutlet=\"actionButton; context: { $implicit: action }\" />\n    }\n    @case ('action-icon-button') {\n      <ng-container *ngTemplateOutlet=\"actionButton; context: { $implicit: action }\" />\n    }\n    @case ('router-link') {\n      <ng-container *ngTemplateOutlet=\"routerLink; context: { $implicit: action }\" />\n    }\n    @case ('link') {\n      <ng-container *ngTemplateOutlet=\"link; context: { $implicit: action }\" />\n    }\n  }\n</ng-template>\n\n<ng-template #content>\n  <div class=\"d-flex flex-column gap-3 text-body\">\n    <span class=\"si-body text-secondary\">{{ timeStamp() | translate }}</span>\n    <span [class.si-h5-bold]=\"unread()\" [class.si-h5]=\"!unread()\">{{ heading() | translate }}</span>\n    @if (description()) {\n      <span class=\"si-body\">{{ description() | translate }}</span>\n    }\n    <div class=\"si-body\">\n      <ng-content select=\"[description]\" />\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #actionButton let-action>\n  <button\n    type=\"button\"\n    class=\"btn btn-tertiary-ghost btn-icon\"\n    [attr.aria-label]=\"action.ariaLabel\"\n    (click)=\"action.action(action)\"\n  >\n    <si-icon class=\"icon\" [icon]=\"action.icon\" />\n  </button>\n</ng-template>\n\n<ng-template #routerLink let-action>\n  <a\n    class=\"btn btn-tertiary-ghost p-2 btn-icon\"\n    [routerLink]=\"action.routerLink\"\n    [queryParams]=\"action.extras?.queryParams\"\n    [queryParamsHandling]=\"action.extras?.queryParamsHandling\"\n    [fragment]=\"action.extras?.fragment\"\n    [state]=\"action.extras?.state\"\n    [relativeTo]=\"action.extras?.relativeTo ?? activatedRoute\"\n    [preserveFragment]=\"action.extras?.preserveFragment\"\n    [skipLocationChange]=\"action.extras?.skipLocationChange\"\n    [replaceUrl]=\"action.extras?.replaceUrl\"\n    [attr.aria-label]=\"action.ariaLabel\"\n  >\n    <si-icon class=\"icon\" [icon]=\"action.icon\" />\n  </a>\n</ng-template>\n\n<ng-template #link let-action>\n  <a\n    class=\"btn btn-tertiary-ghost p-2 btn-icon\"\n    [href]=\"action.href\"\n    [target]=\"action.target\"\n    [attr.aria-label]=\"action.ariaLabel\"\n  >\n    <si-icon class=\"icon\" [icon]=\"action.icon\" />\n  </a>\n</ng-template>\n\n<ng-template #menu let-action>\n  <button\n    type=\"button\"\n    class=\"btn btn-tertiary-ghost btn-icon\"\n    [attr.aria-label]=\"heading() + ' dropdown'\"\n    [cdkMenuTriggerFor]=\"actionMenu\"\n  >\n    <si-icon [icon]=\"icons.elementOptionsVertical\" />\n  </button>\n\n  <ng-template #actionMenu>\n    <si-menu-factory [items]=\"action.menuItems\" />\n  </ng-template>\n</ng-template>\n", styles: [":host div:empty{display:none!important}:host div:has(.notification-item-content a):hover{background-color:var(--element-base-1-hover)}:host .notification-item{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}:host .notification-item a{text-decoration:none}:host .notification-item a:focus-visible div{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}:host .notification-item .notification-item-indicator{grid-column:1;grid-row:1}:host .notification-item .notification-item-indicator div{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center}:host .notification-item .notification-item-content{grid-column:2;grid-row:1;flex-grow:1}:host .notification-item .notification-item-primary-action{grid-column:3;grid-row:1/span 2;display:flex;align-items:center;margin-inline-start:8px}:host .notification-item .notification-item-quick-actions{grid-column:2;grid-row:2;display:flex;gap:8px;margin-block-start:8px}:host .dot{display:block;position:absolute;block-size:6px;inline-size:6px;border-radius:50%;background-color:var(--element-ui-1);inset-inline-start:-10px}:host .notification-item-indicator:has(si-avatar){margin-inline-end:16px}:host .notification-item-indicator:has(si-circle-status){margin-inline-end:4px}:host .notification-item-indicator:not(:has(si-avatar,si-circle-status)):has(si-icon){margin-inline-end:8px;margin-block-start:calc(.875rem * 1.1428571429 + 4px)}:host .notification-item-indicator:not(:has(si-avatar,si-circle-status,si-icon)){inline-size:0;margin-block-start:calc(.875rem * 1.1428571429 + 6px)}:host .notification-item-indicator:not(:has(si-avatar,si-circle-status,si-icon)) div{block-size:1rem}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNotificationItemComponent, decorators: [{
             type: Component,
@@ -65,7 +65,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiMenuFactoryComponent,
                         CdkMenuTrigger,
                         SiIconComponent
-                    ], template: "<div class=\"notification-item px-6 py-5\">\n  <div class=\"notification-item-indicator\">\n    <div>\n      @if (unread()) {\n        <span class=\"dot\"></span>\n      }\n      <ng-content select=\"si-avatar,si-circle-status,si-icon,si-status-icon\" />\n    </div>\n  </div>\n\n  <div class=\"notification-item-content\">\n    @let itemLinkValue = itemLink();\n    @if (itemLinkValue) {\n      @switch (itemLinkValue.type) {\n        @case ('link') {\n          <a\n            [href]=\"itemLinkValue.href\"\n            [target]=\"itemLinkValue.target\"\n            [attr.aria-label]=\"heading() + ' link'\"\n          >\n            <ng-container *ngTemplateOutlet=\"content\" />\n          </a>\n        }\n        @case ('router-link') {\n          <a\n            [routerLink]=\"itemLinkValue.routerLink\"\n            [queryParams]=\"itemLinkValue.extras?.queryParams\"\n            [queryParamsHandling]=\"itemLinkValue.extras?.queryParamsHandling\"\n            [fragment]=\"itemLinkValue.extras?.fragment\"\n            [state]=\"itemLinkValue.extras?.state\"\n            [relativeTo]=\"itemLinkValue.extras?.relativeTo ?? activatedRoute\"\n            [preserveFragment]=\"itemLinkValue.extras?.preserveFragment\"\n            [skipLocationChange]=\"itemLinkValue.extras?.skipLocationChange\"\n            [replaceUrl]=\"itemLinkValue.extras?.replaceUrl\"\n            [attr.aria-label]=\"heading() + ' link'\"\n          >\n            <ng-container *ngTemplateOutlet=\"content\" />\n          </a>\n        }\n      }\n    } @else {\n      <ng-container *ngTemplateOutlet=\"content\" />\n    }\n  </div>\n\n  @let primaryActionValue = primaryAction();\n  @if (primaryActionValue) {\n    <div class=\"notification-item-primary-action\">\n      @if (primaryActionValue.type === 'menu') {\n        <ng-container *ngTemplateOutlet=\"menu; context: { $implicit: primaryActionValue }\" />\n      } @else if (primaryActionValue.type === 'action-button') {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary\"\n          (click)=\"primaryActionValue.action(primaryActionValue)\"\n          >{{ primaryActionValue.label | translate }}</button\n        >\n      } @else {\n        <ng-container *ngTemplateOutlet=\"action; context: { $implicit: primaryActionValue }\" />\n      }\n    </div>\n  } @else {\n    <div class=\"notification-item-primary-action\">\n      <ng-content select=\"[action]\" />\n    </div>\n  }\n\n  @let quickActionsValue = quickActions();\n  @if (quickActionsValue) {\n    <div class=\"notification-item-quick-actions\">\n      @for (quickAction of quickActionsValue; track $index) {\n        <ng-container *ngTemplateOutlet=\"action; context: { $implicit: quickAction }\" />\n      }\n    </div>\n  } @else {\n    <div class=\"notification-item-quick-actions\">\n      <ng-content select=\"[quick-actions]\" />\n    </div>\n  }\n</div>\n\n<ng-template #action let-action>\n  @switch (action.type) {\n    @case ('action-circle-button') {\n      <ng-container *ngTemplateOutlet=\"actionButton; context: { $implicit: action }\" />\n    }\n    @case ('action-icon-button') {\n      <ng-container *ngTemplateOutlet=\"actionButton; context: { $implicit: action }\" />\n    }\n    @case ('router-link') {\n      <ng-container *ngTemplateOutlet=\"routerLink; context: { $implicit: action }\" />\n    }\n    @case ('link') {\n      <ng-container *ngTemplateOutlet=\"link; context: { $implicit: action }\" />\n    }\n  }\n</ng-template>\n\n<ng-template #content>\n  <div class=\"d-flex flex-column gap-3 text-body\">\n    <span class=\"si-body text-secondary\">{{ timeStamp() | translate }}</span>\n    <span [class.si-h5-bold]=\"unread()\" [class.si-h5]=\"!unread()\">{{ heading() | translate }}</span>\n    @if (description()) {\n      <span class=\"si-body\">{{ description() | translate }}</span>\n    }\n    <div class=\"si-body\">\n      <ng-content select=\"[description]\" />\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #actionButton let-action>\n  <button\n    type=\"button\"\n    class=\"btn btn-ghost btn-icon\"\n    [attr.aria-label]=\"action.ariaLabel\"\n    (click)=\"action.action(action)\"\n  >\n    <si-icon class=\"icon\" [icon]=\"action.icon\" />\n  </button>\n</ng-template>\n\n<ng-template #routerLink let-action>\n  <a\n    class=\"btn btn-ghost p-2 btn-icon\"\n    [routerLink]=\"action.routerLink\"\n    [queryParams]=\"action.extras?.queryParams\"\n    [queryParamsHandling]=\"action.extras?.queryParamsHandling\"\n    [fragment]=\"action.extras?.fragment\"\n    [state]=\"action.extras?.state\"\n    [relativeTo]=\"action.extras?.relativeTo ?? activatedRoute\"\n    [preserveFragment]=\"action.extras?.preserveFragment\"\n    [skipLocationChange]=\"action.extras?.skipLocationChange\"\n    [replaceUrl]=\"action.extras?.replaceUrl\"\n    [attr.aria-label]=\"action.ariaLabel\"\n  >\n    <si-icon class=\"icon\" [icon]=\"action.icon\" />\n  </a>\n</ng-template>\n\n<ng-template #link let-action>\n  <a\n    class=\"btn btn-ghost p-2 btn-icon\"\n    [href]=\"action.href\"\n    [target]=\"action.target\"\n    [attr.aria-label]=\"action.ariaLabel\"\n  >\n    <si-icon class=\"icon\" [icon]=\"action.icon\" />\n  </a>\n</ng-template>\n\n<ng-template #menu let-action>\n  <button\n    type=\"button\"\n    class=\"btn btn-ghost btn-icon\"\n    [attr.aria-label]=\"heading() + ' dropdown'\"\n    [cdkMenuTriggerFor]=\"actionMenu\"\n  >\n    <si-icon [icon]=\"icons.elementOptionsVertical\" />\n  </button>\n\n  <ng-template #actionMenu>\n    <si-menu-factory [items]=\"action.menuItems\" />\n  </ng-template>\n</ng-template>\n", styles: [":host div:empty{display:none!important}:host div:has(.notification-item-content a):hover{background-color:var(--element-base-1-hover)}:host .notification-item{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}:host .notification-item a{text-decoration:none}:host .notification-item a:focus-visible div{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}:host .notification-item .notification-item-indicator{grid-column:1;grid-row:1}:host .notification-item .notification-item-indicator div{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center}:host .notification-item .notification-item-content{grid-column:2;grid-row:1;flex-grow:1}:host .notification-item .notification-item-primary-action{grid-column:3;grid-row:1/span 2;display:flex;align-items:center;margin-inline-start:8px}:host .notification-item .notification-item-quick-actions{grid-column:2;grid-row:2;display:flex;gap:8px;margin-block-start:8px}:host .dot{display:block;position:absolute;block-size:6px;inline-size:6px;border-radius:50%;background-color:var(--element-ui-1);inset-inline-start:-10px}:host .notification-item-indicator:has(si-avatar){margin-inline-end:16px}:host .notification-item-indicator:has(si-circle-status){margin-inline-end:4px}:host .notification-item-indicator:not(:has(si-avatar,si-circle-status)):has(si-icon){margin-inline-end:8px;margin-block-start:calc(.875rem * 1.1428571429 + 4px)}:host .notification-item-indicator:not(:has(si-avatar,si-circle-status,si-icon)){inline-size:0;margin-block-start:calc(.875rem * 1.1428571429 + 6px)}:host .notification-item-indicator:not(:has(si-avatar,si-circle-status,si-icon)) div{block-size:1rem}\n"] }]
+                    ], template: "<div class=\"notification-item px-6 py-5\">\n  <div class=\"notification-item-indicator\">\n    <div>\n      @if (unread()) {\n        <span class=\"dot\"></span>\n      }\n      <ng-content select=\"si-avatar,si-circle-status,si-icon,si-status-icon\" />\n    </div>\n  </div>\n\n  <div class=\"notification-item-content\">\n    @let itemLinkValue = itemLink();\n    @if (itemLinkValue) {\n      @switch (itemLinkValue.type) {\n        @case ('link') {\n          <a\n            [href]=\"itemLinkValue.href\"\n            [target]=\"itemLinkValue.target\"\n            [attr.aria-label]=\"heading() + ' link'\"\n          >\n            <ng-container *ngTemplateOutlet=\"content\" />\n          </a>\n        }\n        @case ('router-link') {\n          <a\n            [routerLink]=\"itemLinkValue.routerLink\"\n            [queryParams]=\"itemLinkValue.extras?.queryParams\"\n            [queryParamsHandling]=\"itemLinkValue.extras?.queryParamsHandling\"\n            [fragment]=\"itemLinkValue.extras?.fragment\"\n            [state]=\"itemLinkValue.extras?.state\"\n            [relativeTo]=\"itemLinkValue.extras?.relativeTo ?? activatedRoute\"\n            [preserveFragment]=\"itemLinkValue.extras?.preserveFragment\"\n            [skipLocationChange]=\"itemLinkValue.extras?.skipLocationChange\"\n            [replaceUrl]=\"itemLinkValue.extras?.replaceUrl\"\n            [attr.aria-label]=\"heading() + ' link'\"\n          >\n            <ng-container *ngTemplateOutlet=\"content\" />\n          </a>\n        }\n      }\n    } @else {\n      <ng-container *ngTemplateOutlet=\"content\" />\n    }\n  </div>\n\n  @let primaryActionValue = primaryAction();\n  @if (primaryActionValue) {\n    <div class=\"notification-item-primary-action\">\n      @if (primaryActionValue.type === 'menu') {\n        <ng-container *ngTemplateOutlet=\"menu; context: { $implicit: primaryActionValue }\" />\n      } @else if (primaryActionValue.type === 'action-button') {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary\"\n          (click)=\"primaryActionValue.action(primaryActionValue)\"\n          >{{ primaryActionValue.label | translate }}</button\n        >\n      } @else {\n        <ng-container *ngTemplateOutlet=\"action; context: { $implicit: primaryActionValue }\" />\n      }\n    </div>\n  } @else {\n    <div class=\"notification-item-primary-action\">\n      <ng-content select=\"[action]\" />\n    </div>\n  }\n\n  @let quickActionsValue = quickActions();\n  @if (quickActionsValue) {\n    <div class=\"notification-item-quick-actions\">\n      @for (quickAction of quickActionsValue; track $index) {\n        <ng-container *ngTemplateOutlet=\"action; context: { $implicit: quickAction }\" />\n      }\n    </div>\n  } @else {\n    <div class=\"notification-item-quick-actions\">\n      <ng-content select=\"[quick-actions]\" />\n    </div>\n  }\n</div>\n\n<ng-template #action let-action>\n  @switch (action.type) {\n    @case ('action-circle-button') {\n      <ng-container *ngTemplateOutlet=\"actionButton; context: { $implicit: action }\" />\n    }\n    @case ('action-icon-button') {\n      <ng-container *ngTemplateOutlet=\"actionButton; context: { $implicit: action }\" />\n    }\n    @case ('router-link') {\n      <ng-container *ngTemplateOutlet=\"routerLink; context: { $implicit: action }\" />\n    }\n    @case ('link') {\n      <ng-container *ngTemplateOutlet=\"link; context: { $implicit: action }\" />\n    }\n  }\n</ng-template>\n\n<ng-template #content>\n  <div class=\"d-flex flex-column gap-3 text-body\">\n    <span class=\"si-body text-secondary\">{{ timeStamp() | translate }}</span>\n    <span [class.si-h5-bold]=\"unread()\" [class.si-h5]=\"!unread()\">{{ heading() | translate }}</span>\n    @if (description()) {\n      <span class=\"si-body\">{{ description() | translate }}</span>\n    }\n    <div class=\"si-body\">\n      <ng-content select=\"[description]\" />\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #actionButton let-action>\n  <button\n    type=\"button\"\n    class=\"btn btn-tertiary-ghost btn-icon\"\n    [attr.aria-label]=\"action.ariaLabel\"\n    (click)=\"action.action(action)\"\n  >\n    <si-icon class=\"icon\" [icon]=\"action.icon\" />\n  </button>\n</ng-template>\n\n<ng-template #routerLink let-action>\n  <a\n    class=\"btn btn-tertiary-ghost p-2 btn-icon\"\n    [routerLink]=\"action.routerLink\"\n    [queryParams]=\"action.extras?.queryParams\"\n    [queryParamsHandling]=\"action.extras?.queryParamsHandling\"\n    [fragment]=\"action.extras?.fragment\"\n    [state]=\"action.extras?.state\"\n    [relativeTo]=\"action.extras?.relativeTo ?? activatedRoute\"\n    [preserveFragment]=\"action.extras?.preserveFragment\"\n    [skipLocationChange]=\"action.extras?.skipLocationChange\"\n    [replaceUrl]=\"action.extras?.replaceUrl\"\n    [attr.aria-label]=\"action.ariaLabel\"\n  >\n    <si-icon class=\"icon\" [icon]=\"action.icon\" />\n  </a>\n</ng-template>\n\n<ng-template #link let-action>\n  <a\n    class=\"btn btn-tertiary-ghost p-2 btn-icon\"\n    [href]=\"action.href\"\n    [target]=\"action.target\"\n    [attr.aria-label]=\"action.ariaLabel\"\n  >\n    <si-icon class=\"icon\" [icon]=\"action.icon\" />\n  </a>\n</ng-template>\n\n<ng-template #menu let-action>\n  <button\n    type=\"button\"\n    class=\"btn btn-tertiary-ghost btn-icon\"\n    [attr.aria-label]=\"heading() + ' dropdown'\"\n    [cdkMenuTriggerFor]=\"actionMenu\"\n  >\n    <si-icon [icon]=\"icons.elementOptionsVertical\" />\n  </button>\n\n  <ng-template #actionMenu>\n    <si-menu-factory [items]=\"action.menuItems\" />\n  </ng-template>\n</ng-template>\n", styles: [":host div:empty{display:none!important}:host div:has(.notification-item-content a):hover{background-color:var(--element-base-1-hover)}:host .notification-item{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}:host .notification-item a{text-decoration:none}:host .notification-item a:focus-visible div{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}:host .notification-item .notification-item-indicator{grid-column:1;grid-row:1}:host .notification-item .notification-item-indicator div{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center}:host .notification-item .notification-item-content{grid-column:2;grid-row:1;flex-grow:1}:host .notification-item .notification-item-primary-action{grid-column:3;grid-row:1/span 2;display:flex;align-items:center;margin-inline-start:8px}:host .notification-item .notification-item-quick-actions{grid-column:2;grid-row:2;display:flex;gap:8px;margin-block-start:8px}:host .dot{display:block;position:absolute;block-size:6px;inline-size:6px;border-radius:50%;background-color:var(--element-ui-1);inset-inline-start:-10px}:host .notification-item-indicator:has(si-avatar){margin-inline-end:16px}:host .notification-item-indicator:has(si-circle-status){margin-inline-end:4px}:host .notification-item-indicator:not(:has(si-avatar,si-circle-status)):has(si-icon){margin-inline-end:8px;margin-block-start:calc(.875rem * 1.1428571429 + 4px)}:host .notification-item-indicator:not(:has(si-avatar,si-circle-status,si-icon)){inline-size:0;margin-block-start:calc(.875rem * 1.1428571429 + 6px)}:host .notification-item-indicator:not(:has(si-avatar,si-circle-status,si-icon)) div{block-size:1rem}\n"] }]
         }], propDecorators: { timeStamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeStamp", required: true }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], unread: [{ type: i0.Input, args: [{ isSignal: true, alias: "unread", required: false }] }], itemLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemLink", required: false }] }], quickActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickActions", required: false }] }], primaryAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryAction", required: false }] }] } });
 /**

package/fesm2022/siemens-element-ng-notification-item.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"siemens-element-ng-notification-item.mjs","sources":["../../../../projects/element-ng/notification-item/si-notification-item.component.ts","../../../../projects/element-ng/notification-item/si-notification-item.component.html","../../../../projects/element-ng/notification-item/index.ts","../../../../projects/element-ng/notification-item/siemens-element-ng-notification-item.ts"],"sourcesContent":["/*\n Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n /\nimport { CdkMenuTrigger } from '@angular/cdk/menu';\nimport { CommonModule } from '@angular/common';\nimport { booleanAttribute, Component, inject, input } from '@angular/core';\nimport { ActivatedRoute, RouterModule, type NavigationExtras } from '@angular/router';\nimport { elementOptionsVertical } from '@siemens/element-icons';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiMenuFactoryComponent, type MenuItem } from '@siemens/element-ng/menu';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n/\n Interface for a router link in a notification item.\n * @param type - The type of the link, always 'router-link'.\n * @param routerLink - The router link to navigate to.\n * @param extras - Optional navigation extras for the router.\n /\nexport interface NotificationItemRouterLink {\n type: 'router-link';\n routerLink: string \| any[];\n extras?: NavigationExtras;\n}\n\n/\n Interface for a standard link in a notification item.\n * @param type - The type of the link, always 'link'.\n * @param href - The URL to navigate to.\n * @param target - Optional target attribute for the link.\n /\nexport interface NotificationItemLink {\n type: 'link';\n href: string;\n target?: string;\n}\n\n/\n Base interface for notification item actions.\n * @param ariaLabel - The ARIA label for accessibility.\n * @param icon - The icon to display for the action.\n /\nexport interface NotificationItemBase {\n ariaLabel: TranslatableString;\n icon: string;\n}\n\n/\n Interface for an action circle button in a notification item.\n * @param type - The type of the action, always 'action-circle-button'.\n * @param customClass - Optional custom CSS class for styling.\n * @param action - The action to perform when the button is clicked.\n * @deprecated Use NotificationItemActionIconButton instead. This will be removed in a future release.\n /\nexport interface NotificationItemActionCircleButton extends NotificationItemBase {\n type: 'action-circle-button';\n customClass?: string;\n action: (source: this) => void;\n}\n\n/\n Interface for an action icon button in a notification item.\n * @param type - The type of the action, always 'action-icon-button'.\n * @param customClass - Optional custom CSS class for styling.\n * @param action - The action to perform when the button is clicked.\n /\nexport interface NotificationItemActionIconButton extends NotificationItemBase {\n type: 'action-icon-button';\n customClass?: string;\n action: (source: this) => void;\n}\n\n/\n Interface for a router link with an icon in a notification item.\n * @param type - The type of the link, always 'router-link'.\n * @param routerLink - The router link to navigate to.\n * @param extras - Optional navigation extras for the router.\n /\nexport interface NotificationItemRouterLinkIcon extends NotificationItemBase {\n type: 'router-link';\n routerLink: string \| any[];\n extras?: NavigationExtras;\n}\n\n/\n Interface for a standard link with an icon in a notification item.\n * @param type - The type of the link, always 'link'.\n * @param href - The URL to navigate to.\n * @param target - Optional target attribute for the link.\n /\nexport interface NotificationItemLinkIcon extends NotificationItemBase {\n type: 'link';\n href: string;\n target?: string;\n}\n\n/\n Interface for an action button in a notification item.\n * @param type - The type of the action, always 'action-button'.\n * @param label - The label to display on the button.\n * @param action - The action to perform when the button is clicked.\n /\nexport interface NotificationItemActionButton {\n type: 'action-button';\n label: TranslatableString;\n action: (source: this) => void;\n}\n\n/\n Interface for a menu in a notification item.\n * @param type - The type of the action, always 'menu'.\n * @param menuItems - The menu items to display in the menu.\n /\nexport interface NotificationItemMenu {\n type: 'menu';\n menuItems: MenuItem[];\n}\n\n/\n Union type for quick actions in a notification item.\n /\nexport type NotificationItemQuickAction =\n \| NotificationItemActionCircleButton\n \| NotificationItemActionIconButton\n \| NotificationItemLinkIcon\n \| NotificationItemRouterLinkIcon;\n\n/\n Union type for primary actions in a notification item.\n /\nexport type NotificationItemPrimaryAction =\n \| NotificationItemActionCircleButton\n \| NotificationItemActionIconButton\n \| NotificationItemLinkIcon\n \| NotificationItemRouterLinkIcon\n \| NotificationItemMenu\n \| NotificationItemActionButton;\n\n/\n This component represents a single notification that can be used within notification\n * centers, popovers, or other containers. It supports various action types including\n * router links, standard links, action buttons, and menus.\n /\n@Component({\n selector: 'si-notification-item',\n imports: [\n SiTranslatePipe,\n RouterModule,\n CommonModule,\n SiMenuFactoryComponent,\n CdkMenuTrigger,\n SiIconComponent\n ],\n templateUrl: './si-notification-item.component.html',\n styleUrl: './si-notification-item.component.scss'\n})\nexport class SiNotificationItemComponent {\n protected readonly icons = addIcons({ elementOptionsVertical });\n\n /\n The timestamp of the notification item.\n /\n readonly timeStamp = input.required<TranslatableString>();\n /\n The heading of the notification item.\n /\n readonly heading = input.required<TranslatableString>();\n /\n Optional translatable description.\n /\n readonly description = input<TranslatableString>();\n /\n Unread messages are emphasized with a bolder font.\n \n @defaultValue false\n /\n readonly unread = input(false, { transform: booleanAttribute });\n /\n Link to the source or relevant information of the notification,\n * which triggers when clicking on the notification item text area.\n /\n readonly itemLink = input<NotificationItemRouterLink \| NotificationItemLink>();\n /\n Actions that are displayed below the text of the notification.\n /\n readonly quickActions = input<NotificationItemQuickAction[]>();\n /\n Action that is displayed on the right side of the notification.\n /\n readonly primaryAction = input<NotificationItemPrimaryAction>();\n\n protected readonly activatedRoute = inject(ActivatedRoute, { optional: true });\n}\n","<div class=\"notification-item px-6 py-5\">\n <div class=\"notification-item-indicator\">\n <div>\n @if (unread()) {\n <span class=\"dot\"></span>\n }\n <ng-content select=\"si-avatar,si-circle-status,si-icon,si-status-icon\" />\n </div>\n </div>\n\n <div class=\"notification-item-content\">\n @let itemLinkValue = itemLink();\n @if (itemLinkValue) {\n @switch (itemLinkValue.type) {\n @case ('link') {\n <a\n [href]=\"itemLinkValue.href\"\n [target]=\"itemLinkValue.target\"\n [attr.aria-label]=\"heading() + ' link'\"\n >\n <ng-container ngTemplateOutlet=\"content\" />\n </a>\n }\n @case ('router-link') {\n <a\n [routerLink]=\"itemLinkValue.routerLink\"\n [queryParams]=\"itemLinkValue.extras?.queryParams\"\n [queryParamsHandling]=\"itemLinkValue.extras?.queryParamsHandling\"\n [fragment]=\"itemLinkValue.extras?.fragment\"\n [state]=\"itemLinkValue.extras?.state\"\n [relativeTo]=\"itemLinkValue.extras?.relativeTo ?? activatedRoute\"\n [preserveFragment]=\"itemLinkValue.extras?.preserveFragment\"\n [skipLocationChange]=\"itemLinkValue.extras?.skipLocationChange\"\n [replaceUrl]=\"itemLinkValue.extras?.replaceUrl\"\n [attr.aria-label]=\"heading() + ' link'\"\n >\n <ng-container ngTemplateOutlet=\"content\" />\n </a>\n }\n }\n } @else {\n <ng-container ngTemplateOutlet=\"content\" />\n }\n </div>\n\n @let primaryActionValue = primaryAction();\n @if (primaryActionValue) {\n <div class=\"notification-item-primary-action\">\n @if (primaryActionValue.type === 'menu') {\n <ng-container ngTemplateOutlet=\"menu; context: { $implicit: primaryActionValue }\" />\n } @else if (primaryActionValue.type === 'action-button') {\n <button\n type=\"button\"\n class=\"btn btn-tertiary\"\n (click)=\"primaryActionValue.action(primaryActionValue)\"\n >{{ primaryActionValue.label \| translate }}</button\n >\n } @else {\n <ng-container ngTemplateOutlet=\"action; context: { $implicit: primaryActionValue }\" />\n }\n </div>\n } @else {\n <div class=\"notification-item-primary-action\">\n <ng-content select=\"[action]\" />\n </div>\n }\n\n @let quickActionsValue = quickActions();\n @if (quickActionsValue) {\n <div class=\"notification-item-quick-actions\">\n @for (quickAction of quickActionsValue; track $index) {\n <ng-container ngTemplateOutlet=\"action; context: { $implicit: quickAction }\" />\n }\n </div>\n } @else {\n <div class=\"notification-item-quick-actions\">\n <ng-content select=\"[quick-actions]\" />\n </div>\n }\n</div>\n\n<ng-template #action let-action>\n @switch (action.type) {\n @case ('action-circle-button') {\n <ng-container ngTemplateOutlet=\"actionButton; context: { $implicit: action }\" />\n }\n @case ('action-icon-button') {\n <ng-container ngTemplateOutlet=\"actionButton; context: { $implicit: action }\" />\n }\n @case ('router-link') {\n <ng-container ngTemplateOutlet=\"routerLink; context: { $implicit: action }\" />\n }\n @case ('link') {\n <ng-container ngTemplateOutlet=\"link; context: { $implicit: action }\" />\n }\n }\n</ng-template>\n\n<ng-template #content>\n <div class=\"d-flex flex-column gap-3 text-body\">\n <span class=\"si-body text-secondary\">{{ timeStamp() \| translate }}</span>\n <span [class.si-h5-bold]=\"unread()\" [class.si-h5]=\"!unread()\">{{ heading() \| translate }}</span>\n @if (description()) {\n <span class=\"si-body\">{{ description() \| translate }}</span>\n }\n <div class=\"si-body\">\n <ng-content select=\"[description]\" />\n </div>\n </div>\n</ng-template>\n\n<ng-template #actionButton let-action>\n <button\n type=\"button\"\n class=\"btn btn-ghost btn-icon\"\n [attr.aria-label]=\"action.ariaLabel\"\n (click)=\"action.action(action)\"\n >\n <si-icon class=\"icon\" [icon]=\"action.icon\" />\n </button>\n</ng-template>\n\n<ng-template #routerLink let-action>\n <a\n class=\"btn btn-ghost p-2 btn-icon\"\n [routerLink]=\"action.routerLink\"\n [queryParams]=\"action.extras?.queryParams\"\n [queryParamsHandling]=\"action.extras?.queryParamsHandling\"\n [fragment]=\"action.extras?.fragment\"\n [state]=\"action.extras?.state\"\n [relativeTo]=\"action.extras?.relativeTo ?? activatedRoute\"\n [preserveFragment]=\"action.extras?.preserveFragment\"\n [skipLocationChange]=\"action.extras?.skipLocationChange\"\n [replaceUrl]=\"action.extras?.replaceUrl\"\n [attr.aria-label]=\"action.ariaLabel\"\n >\n <si-icon class=\"icon\" [icon]=\"action.icon\" />\n </a>\n</ng-template>\n\n<ng-template #link let-action>\n <a\n class=\"btn btn-ghost p-2 btn-icon\"\n [href]=\"action.href\"\n [target]=\"action.target\"\n [attr.aria-label]=\"action.ariaLabel\"\n >\n <si-icon class=\"icon\" [icon]=\"action.icon\" />\n </a>\n</ng-template>\n\n<ng-template #menu let-action>\n <button\n type=\"button\"\n class=\"btn btn-ghost btn-icon\"\n [attr.aria-label]=\"heading() + ' dropdown'\"\n [cdkMenuTriggerFor]=\"actionMenu\"\n >\n <si-icon [icon]=\"icons.elementOptionsVertical\" />\n </button>\n\n <ng-template #actionMenu>\n <si-menu-factory [items]=\"action.menuItems\" />\n </ng-template>\n</ng-template>\n","/\n Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n /\nexport from './si-notification-item.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"siemens-element-ng-notification-item.mjs","sources":["../../../../projects/element-ng/notification-item/si-notification-item.component.ts","../../../../projects/element-ng/notification-item/si-notification-item.component.html","../../../../projects/element-ng/notification-item/index.ts","../../../../projects/element-ng/notification-item/siemens-element-ng-notification-item.ts"],"sourcesContent":["/*\n Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n /\nimport { CdkMenuTrigger } from '@angular/cdk/menu';\nimport { CommonModule } from '@angular/common';\nimport { booleanAttribute, Component, inject, input } from '@angular/core';\nimport { ActivatedRoute, RouterModule, type NavigationExtras } from '@angular/router';\nimport { elementOptionsVertical } from '@siemens/element-icons';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiMenuFactoryComponent, type MenuItem } from '@siemens/element-ng/menu';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n/\n Interface for a router link in a notification item.\n * @param type - The type of the link, always 'router-link'.\n * @param routerLink - The router link to navigate to.\n * @param extras - Optional navigation extras for the router.\n /\nexport interface NotificationItemRouterLink {\n type: 'router-link';\n routerLink: string \| any[];\n extras?: NavigationExtras;\n}\n\n/\n Interface for a standard link in a notification item.\n * @param type - The type of the link, always 'link'.\n * @param href - The URL to navigate to.\n * @param target - Optional target attribute for the link.\n /\nexport interface NotificationItemLink {\n type: 'link';\n href: string;\n target?: string;\n}\n\n/\n Base interface for notification item actions.\n * @param ariaLabel - The ARIA label for accessibility.\n * @param icon - The icon to display for the action.\n /\nexport interface NotificationItemBase {\n ariaLabel: TranslatableString;\n icon: string;\n}\n\n/\n Interface for an action circle button in a notification item.\n * @param type - The type of the action, always 'action-circle-button'.\n * @param customClass - Optional custom CSS class for styling.\n * @param action - The action to perform when the button is clicked.\n * @deprecated Use NotificationItemActionIconButton instead. This will be removed in a future release.\n /\nexport interface NotificationItemActionCircleButton extends NotificationItemBase {\n type: 'action-circle-button';\n customClass?: string;\n action: (source: this) => void;\n}\n\n/\n Interface for an action icon button in a notification item.\n * @param type - The type of the action, always 'action-icon-button'.\n * @param customClass - Optional custom CSS class for styling.\n * @param action - The action to perform when the button is clicked.\n /\nexport interface NotificationItemActionIconButton extends NotificationItemBase {\n type: 'action-icon-button';\n customClass?: string;\n action: (source: this) => void;\n}\n\n/\n Interface for a router link with an icon in a notification item.\n * @param type - The type of the link, always 'router-link'.\n * @param routerLink - The router link to navigate to.\n * @param extras - Optional navigation extras for the router.\n /\nexport interface NotificationItemRouterLinkIcon extends NotificationItemBase {\n type: 'router-link';\n routerLink: string \| any[];\n extras?: NavigationExtras;\n}\n\n/\n Interface for a standard link with an icon in a notification item.\n * @param type - The type of the link, always 'link'.\n * @param href - The URL to navigate to.\n * @param target - Optional target attribute for the link.\n /\nexport interface NotificationItemLinkIcon extends NotificationItemBase {\n type: 'link';\n href: string;\n target?: string;\n}\n\n/\n Interface for an action button in a notification item.\n * @param type - The type of the action, always 'action-button'.\n * @param label - The label to display on the button.\n * @param action - The action to perform when the button is clicked.\n /\nexport interface NotificationItemActionButton {\n type: 'action-button';\n label: TranslatableString;\n action: (source: this) => void;\n}\n\n/\n Interface for a menu in a notification item.\n * @param type - The type of the action, always 'menu'.\n * @param menuItems - The menu items to display in the menu.\n /\nexport interface NotificationItemMenu {\n type: 'menu';\n menuItems: MenuItem[];\n}\n\n/\n Union type for quick actions in a notification item.\n /\nexport type NotificationItemQuickAction =\n \| NotificationItemActionCircleButton\n \| NotificationItemActionIconButton\n \| NotificationItemLinkIcon\n \| NotificationItemRouterLinkIcon;\n\n/\n Union type for primary actions in a notification item.\n /\nexport type NotificationItemPrimaryAction =\n \| NotificationItemActionCircleButton\n \| NotificationItemActionIconButton\n \| NotificationItemLinkIcon\n \| NotificationItemRouterLinkIcon\n \| NotificationItemMenu\n \| NotificationItemActionButton;\n\n/\n This component represents a single notification that can be used within notification\n * centers, popovers, or other containers. It supports various action types including\n * router links, standard links, action buttons, and menus.\n /\n@Component({\n selector: 'si-notification-item',\n imports: [\n SiTranslatePipe,\n RouterModule,\n CommonModule,\n SiMenuFactoryComponent,\n CdkMenuTrigger,\n SiIconComponent\n ],\n templateUrl: './si-notification-item.component.html',\n styleUrl: './si-notification-item.component.scss'\n})\nexport class SiNotificationItemComponent {\n protected readonly icons = addIcons({ elementOptionsVertical });\n\n /\n The timestamp of the notification item.\n /\n readonly timeStamp = input.required<TranslatableString>();\n /\n The heading of the notification item.\n /\n readonly heading = input.required<TranslatableString>();\n /\n Optional translatable description.\n /\n readonly description = input<TranslatableString>();\n /\n Unread messages are emphasized with a bolder font.\n \n @defaultValue false\n /\n readonly unread = input(false, { transform: booleanAttribute });\n /\n Link to the source or relevant information of the notification,\n * which triggers when clicking on the notification item text area.\n /\n readonly itemLink = input<NotificationItemRouterLink \| NotificationItemLink>();\n /\n Actions that are displayed below the text of the notification.\n /\n readonly quickActions = input<NotificationItemQuickAction[]>();\n /\n Action that is displayed on the right side of the notification.\n /\n readonly primaryAction = input<NotificationItemPrimaryAction>();\n\n protected readonly activatedRoute = inject(ActivatedRoute, { optional: true });\n}\n","<div class=\"notification-item px-6 py-5\">\n <div class=\"notification-item-indicator\">\n <div>\n @if (unread()) {\n <span class=\"dot\"></span>\n }\n <ng-content select=\"si-avatar,si-circle-status,si-icon,si-status-icon\" />\n </div>\n </div>\n\n <div class=\"notification-item-content\">\n @let itemLinkValue = itemLink();\n @if (itemLinkValue) {\n @switch (itemLinkValue.type) {\n @case ('link') {\n <a\n [href]=\"itemLinkValue.href\"\n [target]=\"itemLinkValue.target\"\n [attr.aria-label]=\"heading() + ' link'\"\n >\n <ng-container ngTemplateOutlet=\"content\" />\n </a>\n }\n @case ('router-link') {\n <a\n [routerLink]=\"itemLinkValue.routerLink\"\n [queryParams]=\"itemLinkValue.extras?.queryParams\"\n [queryParamsHandling]=\"itemLinkValue.extras?.queryParamsHandling\"\n [fragment]=\"itemLinkValue.extras?.fragment\"\n [state]=\"itemLinkValue.extras?.state\"\n [relativeTo]=\"itemLinkValue.extras?.relativeTo ?? activatedRoute\"\n [preserveFragment]=\"itemLinkValue.extras?.preserveFragment\"\n [skipLocationChange]=\"itemLinkValue.extras?.skipLocationChange\"\n [replaceUrl]=\"itemLinkValue.extras?.replaceUrl\"\n [attr.aria-label]=\"heading() + ' link'\"\n >\n <ng-container ngTemplateOutlet=\"content\" />\n </a>\n }\n }\n } @else {\n <ng-container ngTemplateOutlet=\"content\" />\n }\n </div>\n\n @let primaryActionValue = primaryAction();\n @if (primaryActionValue) {\n <div class=\"notification-item-primary-action\">\n @if (primaryActionValue.type === 'menu') {\n <ng-container ngTemplateOutlet=\"menu; context: { $implicit: primaryActionValue }\" />\n } @else if (primaryActionValue.type === 'action-button') {\n <button\n type=\"button\"\n class=\"btn btn-tertiary\"\n (click)=\"primaryActionValue.action(primaryActionValue)\"\n >{{ primaryActionValue.label \| translate }}</button\n >\n } @else {\n <ng-container ngTemplateOutlet=\"action; context: { $implicit: primaryActionValue }\" />\n }\n </div>\n } @else {\n <div class=\"notification-item-primary-action\">\n <ng-content select=\"[action]\" />\n </div>\n }\n\n @let quickActionsValue = quickActions();\n @if (quickActionsValue) {\n <div class=\"notification-item-quick-actions\">\n @for (quickAction of quickActionsValue; track $index) {\n <ng-container ngTemplateOutlet=\"action; context: { $implicit: quickAction }\" />\n }\n </div>\n } @else {\n <div class=\"notification-item-quick-actions\">\n <ng-content select=\"[quick-actions]\" />\n </div>\n }\n</div>\n\n<ng-template #action let-action>\n @switch (action.type) {\n @case ('action-circle-button') {\n <ng-container ngTemplateOutlet=\"actionButton; context: { $implicit: action }\" />\n }\n @case ('action-icon-button') {\n <ng-container ngTemplateOutlet=\"actionButton; context: { $implicit: action }\" />\n }\n @case ('router-link') {\n <ng-container ngTemplateOutlet=\"routerLink; context: { $implicit: action }\" />\n }\n @case ('link') {\n <ng-container ngTemplateOutlet=\"link; context: { $implicit: action }\" />\n }\n }\n</ng-template>\n\n<ng-template #content>\n <div class=\"d-flex flex-column gap-3 text-body\">\n <span class=\"si-body text-secondary\">{{ timeStamp() \| translate }}</span>\n <span [class.si-h5-bold]=\"unread()\" [class.si-h5]=\"!unread()\">{{ heading() \| translate }}</span>\n @if (description()) {\n <span class=\"si-body\">{{ description() \| translate }}</span>\n }\n <div class=\"si-body\">\n <ng-content select=\"[description]\" />\n </div>\n </div>\n</ng-template>\n\n<ng-template #actionButton let-action>\n <button\n type=\"button\"\n class=\"btn btn-tertiary-ghost btn-icon\"\n [attr.aria-label]=\"action.ariaLabel\"\n (click)=\"action.action(action)\"\n >\n <si-icon class=\"icon\" [icon]=\"action.icon\" />\n </button>\n</ng-template>\n\n<ng-template #routerLink let-action>\n <a\n class=\"btn btn-tertiary-ghost p-2 btn-icon\"\n [routerLink]=\"action.routerLink\"\n [queryParams]=\"action.extras?.queryParams\"\n [queryParamsHandling]=\"action.extras?.queryParamsHandling\"\n [fragment]=\"action.extras?.fragment\"\n [state]=\"action.extras?.state\"\n [relativeTo]=\"action.extras?.relativeTo ?? activatedRoute\"\n [preserveFragment]=\"action.extras?.preserveFragment\"\n [skipLocationChange]=\"action.extras?.skipLocationChange\"\n [replaceUrl]=\"action.extras?.replaceUrl\"\n [attr.aria-label]=\"action.ariaLabel\"\n >\n <si-icon class=\"icon\" [icon]=\"action.icon\" />\n </a>\n</ng-template>\n\n<ng-template #link let-action>\n <a\n class=\"btn btn-tertiary-ghost p-2 btn-icon\"\n [href]=\"action.href\"\n [target]=\"action.target\"\n [attr.aria-label]=\"action.ariaLabel\"\n >\n <si-icon class=\"icon\" [icon]=\"action.icon\" />\n </a>\n</ng-template>\n\n<ng-template #menu let-action>\n <button\n type=\"button\"\n class=\"btn btn-tertiary-ghost btn-icon\"\n [attr.aria-label]=\"heading() + ' dropdown'\"\n [cdkMenuTriggerFor]=\"actionMenu\"\n >\n <si-icon [icon]=\"icons.elementOptionsVertical\" />\n </button>\n\n <ng-template #actionMenu>\n <si-menu-factory [items]=\"action.menuItems\" />\n </ng-template>\n</ng-template>\n","/\n Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n /\nexport from './si-notification-item.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-number-input.mjs CHANGED Viewed

@@ -219,7 +219,7 @@ class SiNumberInputComponent {
                 provide: SI_FORM_ITEM_CONTROL,
                 useExisting: SiNumberInputComponent
             }
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<input\n  #inputElement\n  type=\"number\"\n  class=\"focus-none\"\n  [attr.id]=\"inputId()\"\n  [step]=\"step()\"\n  [readonly]=\"readonly()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-label]=\"ariaLabel() | translate\"\n  [attr.aria-describedby]=\"errormessageId()\"\n  [attr.placeholder]=\"placeholder() | translate\"\n  [attr.min]=\"min()\"\n  [attr.max]=\"max()\"\n  (blur)=\"onTouched()\"\n  (input)=\"modelChanged()\"\n/>\n@if (unit()) {\n  <span class=\"unit ms-2\" [class.text-secondary]=\"!disabled()\" [class.text-disabled]=\"disabled()\">{{\n    unit()\n  }}</span>\n} @else {\n  <!-- To reserve space for feedback icon -->\n  <span class=\"unit\"></span>\n}\n@if (showButtons()) {\n  <button\n    type=\"button\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    class=\"dec btn btn-icon btn-tertiary btn-sm my-n3 ms-2\"\n    [disabled]=\"disabled() || readonly() || !canDec\"\n    (mousedown)=\"autoUpdateStart($event, false)\"\n    (touchstart)=\"autoUpdateStart($event, false)\"\n    (touchend)=\"autoUpdateStop()\"\n    (mouseup)=\"autoUpdateStop()\"\n    (mouseleave)=\"autoUpdateStop()\"\n  >\n    <si-icon [icon]=\"icons.elementMinus\" />\n  </button>\n  <button\n    type=\"button\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    class=\"inc btn btn-icon btn-tertiary btn-sm my-n3 me-n2\"\n    [disabled]=\"disabled() || readonly() || !canInc\"\n    (mousedown)=\"autoUpdateStart($event, true)\"\n    (touchstart)=\"autoUpdateStart($event, true)\"\n    (touchend)=\"autoUpdateStop()\"\n    (mouseup)=\"autoUpdateStop()\"\n    (mouseleave)=\"autoUpdateStop()\"\n  >\n    <si-icon [icon]=\"icons.elementPlus\" />\n  </button>\n}\n", styles: [":host{display:flex;align-items:center;padding-inline-end:7px}:host.show-step-buttons{--si-action-icon-offset: 48px}:host:focus-within{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}input{-moz-appearance:textfield;border:0;margin:0;padding-block:0;background:transparent;color:inherit;text-align:inherit;flex:1 0 0;min-inline-size:0}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.unit{padding-inline-end:var(--si-feedback-icon-offset, 0)}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<input\n  #inputElement\n  type=\"number\"\n  class=\"focus-none\"\n  [attr.id]=\"inputId()\"\n  [step]=\"step()\"\n  [readonly]=\"readonly()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-label]=\"ariaLabel() | translate\"\n  [attr.aria-describedby]=\"errormessageId()\"\n  [attr.placeholder]=\"placeholder() | translate\"\n  [attr.min]=\"min()\"\n  [attr.max]=\"max()\"\n  (blur)=\"onTouched()\"\n  (input)=\"modelChanged()\"\n/>\n@if (unit()) {\n  <span class=\"unit\" [class.text-secondary]=\"!disabled()\" [class.text-disabled]=\"disabled()\">{{\n    unit()\n  }}</span>\n}\n@if (showButtons()) {\n  <div class=\"form-control-actions\">\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      class=\"dec btn btn-icon btn-tertiary btn-sm\"\n      [disabled]=\"disabled() || readonly() || !canDec\"\n      (mousedown)=\"autoUpdateStart($event, false)\"\n      (touchstart)=\"autoUpdateStart($event, false)\"\n      (touchend)=\"autoUpdateStop()\"\n      (mouseup)=\"autoUpdateStop()\"\n      (mouseleave)=\"autoUpdateStop()\"\n    >\n      <si-icon [icon]=\"icons.elementMinus\" />\n    </button>\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      class=\"inc btn btn-icon btn-tertiary btn-sm\"\n      [disabled]=\"disabled() || readonly() || !canInc\"\n      (mousedown)=\"autoUpdateStart($event, true)\"\n      (touchstart)=\"autoUpdateStart($event, true)\"\n      (touchend)=\"autoUpdateStop()\"\n      (mouseup)=\"autoUpdateStop()\"\n      (mouseleave)=\"autoUpdateStop()\"\n    >\n      <si-icon [icon]=\"icons.elementPlus\" />\n    </button>\n  </div>\n}\n", styles: [":host{display:flex;align-items:center}:host:focus-within{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}input{-moz-appearance:textfield;border:0;margin:0;padding-block:0;background:transparent;color:inherit;text-align:inherit;flex:1 0 0;min-inline-size:0}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNumberInputComponent, decorators: [{
             type: Component,
@@ -242,7 +242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         '[class.show-step-buttons]': 'showButtons()',
                         '[class.disabled]': 'disabled()',
                         '[class.readonly]': 'readonly()'
-                    }, template: "<input\n  #inputElement\n  type=\"number\"\n  class=\"focus-none\"\n  [attr.id]=\"inputId()\"\n  [step]=\"step()\"\n  [readonly]=\"readonly()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-label]=\"ariaLabel() | translate\"\n  [attr.aria-describedby]=\"errormessageId()\"\n  [attr.placeholder]=\"placeholder() | translate\"\n  [attr.min]=\"min()\"\n  [attr.max]=\"max()\"\n  (blur)=\"onTouched()\"\n  (input)=\"modelChanged()\"\n/>\n@if (unit()) {\n  <span class=\"unit ms-2\" [class.text-secondary]=\"!disabled()\" [class.text-disabled]=\"disabled()\">{{\n    unit()\n  }}</span>\n} @else {\n  <!-- To reserve space for feedback icon -->\n  <span class=\"unit\"></span>\n}\n@if (showButtons()) {\n  <button\n    type=\"button\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    class=\"dec btn btn-icon btn-tertiary btn-sm my-n3 ms-2\"\n    [disabled]=\"disabled() || readonly() || !canDec\"\n    (mousedown)=\"autoUpdateStart($event, false)\"\n    (touchstart)=\"autoUpdateStart($event, false)\"\n    (touchend)=\"autoUpdateStop()\"\n    (mouseup)=\"autoUpdateStop()\"\n    (mouseleave)=\"autoUpdateStop()\"\n  >\n    <si-icon [icon]=\"icons.elementMinus\" />\n  </button>\n  <button\n    type=\"button\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    class=\"inc btn btn-icon btn-tertiary btn-sm my-n3 me-n2\"\n    [disabled]=\"disabled() || readonly() || !canInc\"\n    (mousedown)=\"autoUpdateStart($event, true)\"\n    (touchstart)=\"autoUpdateStart($event, true)\"\n    (touchend)=\"autoUpdateStop()\"\n    (mouseup)=\"autoUpdateStop()\"\n    (mouseleave)=\"autoUpdateStop()\"\n  >\n    <si-icon [icon]=\"icons.elementPlus\" />\n  </button>\n}\n", styles: [":host{display:flex;align-items:center;padding-inline-end:7px}:host.show-step-buttons{--si-action-icon-offset: 48px}:host:focus-within{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}input{-moz-appearance:textfield;border:0;margin:0;padding-block:0;background:transparent;color:inherit;text-align:inherit;flex:1 0 0;min-inline-size:0}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.unit{padding-inline-end:var(--si-feedback-icon-offset, 0)}\n"] }]
+                    }, template: "<input\n  #inputElement\n  type=\"number\"\n  class=\"focus-none\"\n  [attr.id]=\"inputId()\"\n  [step]=\"step()\"\n  [readonly]=\"readonly()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-label]=\"ariaLabel() | translate\"\n  [attr.aria-describedby]=\"errormessageId()\"\n  [attr.placeholder]=\"placeholder() | translate\"\n  [attr.min]=\"min()\"\n  [attr.max]=\"max()\"\n  (blur)=\"onTouched()\"\n  (input)=\"modelChanged()\"\n/>\n@if (unit()) {\n  <span class=\"unit\" [class.text-secondary]=\"!disabled()\" [class.text-disabled]=\"disabled()\">{{\n    unit()\n  }}</span>\n}\n@if (showButtons()) {\n  <div class=\"form-control-actions\">\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      class=\"dec btn btn-icon btn-tertiary btn-sm\"\n      [disabled]=\"disabled() || readonly() || !canDec\"\n      (mousedown)=\"autoUpdateStart($event, false)\"\n      (touchstart)=\"autoUpdateStart($event, false)\"\n      (touchend)=\"autoUpdateStop()\"\n      (mouseup)=\"autoUpdateStop()\"\n      (mouseleave)=\"autoUpdateStop()\"\n    >\n      <si-icon [icon]=\"icons.elementMinus\" />\n    </button>\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      class=\"inc btn btn-icon btn-tertiary btn-sm\"\n      [disabled]=\"disabled() || readonly() || !canInc\"\n      (mousedown)=\"autoUpdateStart($event, true)\"\n      (touchstart)=\"autoUpdateStart($event, true)\"\n      (touchend)=\"autoUpdateStop()\"\n      (mouseup)=\"autoUpdateStop()\"\n      (mouseleave)=\"autoUpdateStop()\"\n    >\n      <si-icon [icon]=\"icons.elementPlus\" />\n    </button>\n  </div>\n}\n", styles: [":host{display:flex;align-items:center}:host:focus-within{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}input{-moz-appearance:textfield;border:0;margin:0;padding-block:0;background:transparent;color:inherit;text-align:inherit;flex:1 0 0;min-inline-size:0}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
         }], propDecorators: { minInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], maxInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], inputElement: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], errormessageId: [{ type: i0.Input, args: [{ isSignal: true, alias: "errormessageId", required: false }] }] } });
 /**

package/fesm2022/siemens-element-ng-number-input.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"siemens-element-ng-number-input.mjs","sources":["../../../../projects/element-ng/number-input/si-number-input.component.ts","../../../../projects/element-ng/number-input/si-number-input.component.html","../../../../projects/element-ng/number-input/si-number-input.module.ts","../../../../projects/element-ng/number-input/index.ts","../../../../projects/element-ng/number-input/siemens-element-ng-number-input.ts"],"sourcesContent":["/*\n Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n /\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n numberAttribute,\n OnChanges,\n output,\n signal,\n SimpleChanges,\n viewChild\n} from '@angular/core';\nimport {\n AbstractControl,\n ControlValueAccessor,\n NG_VALIDATORS,\n NG_VALUE_ACCESSOR,\n ValidationErrors,\n Validator,\n ValidatorFn,\n Validators\n} from '@angular/forms';\nimport { elementMinus, elementPlus } from '@siemens/element-icons';\nimport { SI_FORM_ITEM_CONTROL, SiFormItemControl } from '@siemens/element-ng/form';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\nimport { Subscription, timer } from 'rxjs';\n\n@Component({\n selector: 'si-number-input',\n imports: [SiIconComponent, SiTranslatePipe],\n templateUrl: './si-number-input.component.html',\n styleUrl: './si-number-input.component.scss',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: SiNumberInputComponent,\n multi: true\n },\n {\n provide: NG_VALIDATORS,\n useExisting: SiNumberInputComponent,\n multi: true\n },\n {\n provide: SI_FORM_ITEM_CONTROL,\n useExisting: SiNumberInputComponent\n }\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class.show-step-buttons]': 'showButtons()',\n '[class.disabled]': 'disabled()',\n '[class.readonly]': 'readonly()'\n }\n})\nexport class SiNumberInputComponent\n implements OnChanges, ControlValueAccessor, Validator, SiFormItemControl\n{\n private static idCounter = 0;\n private static formatValidator: ValidatorFn = control => {\n if (control.value != null && isNaN(control.value)) {\n return { numberFormat: true };\n }\n return null;\n };\n\n /\n The min. value for HTML input\n \n @defaultValue undefined\n /\n readonly minInput = input<number \| undefined, unknown>(undefined, {\n // eslint-disable-next-line @angular-eslint/no-input-rename\n alias: 'min',\n transform: numberAttribute\n });\n /\n The max. value for HTML input\n \n @defaultValue undefined\n /\n readonly maxInput = input<number \| undefined, unknown>(undefined, {\n // eslint-disable-next-line @angular-eslint/no-input-rename\n alias: 'max',\n transform: numberAttribute\n });\n /\n The step size for HTML input\n \n @defaultValue 1\n /\n readonly step = input<number \| 'any'>(1);\n /* The value /\n // eslint-disable-next-line @angular-eslint/prefer-signal-model\n readonly value = input<number>();\n /* Optional unit label /\n readonly unit = input<string>();\n /\n Show increment/decrement buttons?\n \n @defaultValue true\n /\n readonly showButtons = input(true, { transform: booleanAttribute });\n /\n The aria-label passed to the input\n \n @defaultValue undefined\n /\n readonly ariaLabel = input<TranslatableString>(undefined, { alias: 'aria-label' });\n /\n ID that is set on the input, e.g. for `<label for=\"...\">`\n \n @defaultValue\n * ```\n * `__si-number-input-${SiNumberInputComponent.idCounter++}`\n * ```\n /\n readonly inputId = input(`__si-number-input-${SiNumberInputComponent.idCounter++}`);\n\n readonly id = computed(() => this.inputId());\n\n /* @defaultValue false /\n // eslint-disable-next-line @angular-eslint/no-input-rename\n readonly disabledInput = input(false, { alias: 'disabled', transform: booleanAttribute });\n /* @defaultValue false /\n readonly readonly = input(false, { transform: booleanAttribute });\n\n /\n The placeholder for input field.\n /\n readonly placeholder = input<TranslatableString>();\n\n readonly valueChange = output<number \| undefined>();\n\n readonly inputElement = viewChild.required<ElementRef<HTMLInputElement>>('inputElement');\n\n /\n This ID will be bound to the `aria-describedby` attribute of the number-input.\n * Use this to reference the element containing the error message(s) for the number-input.\n * It will be picked by the {@link SiFormItemComponent} if the number-input is used inside a form item.\n \n @defaultValue\n * ```\n * `${this.id()}-errormessage`\n * ```\n /\n readonly errormessageId = input(`${this.id()}-errormessage`);\n\n protected canInc = true;\n protected canDec = true;\n protected readonly disabled = computed(() => this.disabledInput() \|\| this.disabledNgControl());\n private readonly disabledNgControl = signal(false);\n protected onTouched: () => void = () => {};\n protected onChange: (val: any) => void = () => {};\n protected validator: ValidatorFn \| null = SiNumberInputComponent.formatValidator;\n protected onValidatorChanged: () => void = () => {};\n protected readonly min = computed(() => {\n const minVal = this.minInput();\n return minVal === undefined \|\| isNaN(minVal) ? undefined : minVal;\n });\n protected readonly max = computed(() => {\n const maxVal = this.maxInput();\n return maxVal === undefined \|\| isNaN(maxVal) ? undefined : maxVal;\n });\n protected readonly icons = addIcons({ elementMinus, elementPlus });\n private internalValue?: number;\n private autoUpdate$ = timer(400, 80);\n private autoUpdateSubs?: Subscription;\n private changeDetectorRef = inject(ChangeDetectorRef);\n\n ngOnChanges(changes: SimpleChanges<this>): void {\n if (changes.value) {\n this.writeValueToInput(this.value());\n }\n if (changes.minInput \|\| changes.maxInput) {\n const minValue = this.min();\n const maxValue = this.max();\n this.validator = Validators.compose([\n minValue != null ? Validators.min(minValue) : null,\n maxValue != null ? Validators.max(maxValue) : null,\n SiNumberInputComponent.formatValidator\n ])!;\n this.onValidatorChanged();\n }\n this.updateStepButtons();\n }\n\n /* @internal /\n registerOnChange(fn: any): void {\n this.onChange = fn;\n }\n\n /* @internal /\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /* @internal /\n setDisabledState(isDisabled: boolean): void {\n this.disabledNgControl.set(isDisabled);\n }\n\n /* @internal /\n writeValue(value: number \| undefined): void {\n this.writeValueToInput(value);\n this.updateStepButtons();\n this.changeDetectorRef.markForCheck();\n }\n\n /* @internal /\n validate(control: AbstractControl): ValidationErrors \| null {\n return this.validator ? this.validator(control) : null;\n }\n\n /* @internal /\n registerOnValidatorChange?(fn: () => void): void {\n this.onValidatorChanged = fn;\n }\n\n protected modelChanged(): void {\n const value = this.inputElement().nativeElement.value\n ? this.inputElement().nativeElement.valueAsNumber\n : undefined;\n this.internalValue = value;\n this.updateStepButtons();\n this.onChange(value);\n this.valueChange.emit(value);\n }\n\n protected autoUpdateStart(event: Event, isIncrement: boolean): void {\n const mouseButton = (event as MouseEvent).button;\n if (mouseButton) {\n return;\n }\n\n this.onTouched();\n event.preventDefault();\n const trigger = isIncrement ? () => this.increment() : () => this.decrement();\n this.autoUpdateSubs?.unsubscribe();\n this.autoUpdateSubs = this.autoUpdate$.subscribe(trigger);\n trigger();\n }\n\n protected autoUpdateStop(): void {\n this.autoUpdateSubs?.unsubscribe();\n this.autoUpdateSubs = undefined;\n }\n\n private updateStepButtons(): void {\n const stepValue = this.step();\n const step = typeof stepValue === 'number' ? stepValue : 1;\n const max = this.max();\n this.canInc = max == null \|\| this.internalValue == null \|\| this.internalValue + step <= max;\n const min = this.min();\n this.canDec = min == null \|\| this.internalValue == null \|\| this.internalValue - step >= min;\n if (!this.canInc \|\| !this.canDec) {\n this.autoUpdateStop();\n }\n }\n\n private decrement(): void {\n this.inputElement().nativeElement.stepDown();\n this.modelChanged();\n }\n\n private increment(): void {\n this.inputElement().nativeElement.stepUp();\n this.modelChanged();\n }\n\n private writeValueToInput(value: number \| undefined): void {\n this.inputElement().nativeElement.value = value == null ? '' : value.toString();\n this.internalValue = value;\n }\n}\n","<input\n #inputElement\n type=\"number\"\n class=\"focus-none\"\n [attr.id]=\"inputId()\"\n [step]=\"step()\"\n [readonly]=\"readonly()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel() \| translate\"\n [attr.aria-describedby]=\"errormessageId()\"\n [attr.placeholder]=\"placeholder() \| translate\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n (blur)=\"onTouched()\"\n (input)=\"modelChanged()\"\n/>\n@if (unit()) {\n <span class=\"unit ms-2\" [class.text-secondary]=\"!disabled()\" [class.text-disabled]=\"disabled()\">{{\n unit()\n }}</span>\n} @else {\n <!-- To reserve space for feedback icon -->\n <span class=\"unit\"></span>\n}\n@if (showButtons()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n class=\"dec btn btn-icon btn-tertiary btn-sm my-n3 ms-2\"\n [disabled]=\"disabled() \|\| readonly() \|\| !canDec\"\n (mousedown)=\"autoUpdateStart($event, false)\"\n (touchstart)=\"autoUpdateStart($event, false)\"\n (touchend)=\"autoUpdateStop()\"\n (mouseup)=\"autoUpdateStop()\"\n (mouseleave)=\"autoUpdateStop()\"\n >\n <si-icon [icon]=\"icons.elementMinus\" />\n </button>\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n class=\"inc btn btn-icon btn-tertiary btn-sm my-n3 me-n2\"\n [disabled]=\"disabled() \|\| readonly() \|\| !canInc\"\n (mousedown)=\"autoUpdateStart($event, true)\"\n (touchstart)=\"autoUpdateStart($event, true)\"\n (touchend)=\"autoUpdateStop()\"\n (mouseup)=\"autoUpdateStop()\"\n (mouseleave)=\"autoUpdateStop()\"\n >\n <si-icon [icon]=\"icons.elementPlus\" />\n </button>\n}\n","/\n Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n /\nimport { NgModule } from '@angular/core';\n\nimport { SiNumberInputComponent } from './si-number-input.component';\n\n@NgModule({\n imports: [SiNumberInputComponent],\n exports: [SiNumberInputComponent]\n})\nexport class SiNumberInputModule {}\n","/\n Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n /\nexport from './si-number-input.component';\nexport * from './si-number-input.module';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"siemens-element-ng-number-input.mjs","sources":["../../../../projects/element-ng/number-input/si-number-input.component.ts","../../../../projects/element-ng/number-input/si-number-input.component.html","../../../../projects/element-ng/number-input/si-number-input.module.ts","../../../../projects/element-ng/number-input/index.ts","../../../../projects/element-ng/number-input/siemens-element-ng-number-input.ts"],"sourcesContent":["/*\n Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n /\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n numberAttribute,\n OnChanges,\n output,\n signal,\n SimpleChanges,\n viewChild\n} from '@angular/core';\nimport {\n AbstractControl,\n ControlValueAccessor,\n NG_VALIDATORS,\n NG_VALUE_ACCESSOR,\n ValidationErrors,\n Validator,\n ValidatorFn,\n Validators\n} from '@angular/forms';\nimport { elementMinus, elementPlus } from '@siemens/element-icons';\nimport { SI_FORM_ITEM_CONTROL, SiFormItemControl } from '@siemens/element-ng/form';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\nimport { Subscription, timer } from 'rxjs';\n\n@Component({\n selector: 'si-number-input',\n imports: [SiIconComponent, SiTranslatePipe],\n templateUrl: './si-number-input.component.html',\n styleUrl: './si-number-input.component.scss',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: SiNumberInputComponent,\n multi: true\n },\n {\n provide: NG_VALIDATORS,\n useExisting: SiNumberInputComponent,\n multi: true\n },\n {\n provide: SI_FORM_ITEM_CONTROL,\n useExisting: SiNumberInputComponent\n }\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class.show-step-buttons]': 'showButtons()',\n '[class.disabled]': 'disabled()',\n '[class.readonly]': 'readonly()'\n }\n})\nexport class SiNumberInputComponent\n implements OnChanges, ControlValueAccessor, Validator, SiFormItemControl\n{\n private static idCounter = 0;\n private static formatValidator: ValidatorFn = control => {\n if (control.value != null && isNaN(control.value)) {\n return { numberFormat: true };\n }\n return null;\n };\n\n /\n The min. value for HTML input\n \n @defaultValue undefined\n /\n readonly minInput = input<number \| undefined, unknown>(undefined, {\n // eslint-disable-next-line @angular-eslint/no-input-rename\n alias: 'min',\n transform: numberAttribute\n });\n /\n The max. value for HTML input\n \n @defaultValue undefined\n /\n readonly maxInput = input<number \| undefined, unknown>(undefined, {\n // eslint-disable-next-line @angular-eslint/no-input-rename\n alias: 'max',\n transform: numberAttribute\n });\n /\n The step size for HTML input\n \n @defaultValue 1\n /\n readonly step = input<number \| 'any'>(1);\n /* The value /\n // eslint-disable-next-line @angular-eslint/prefer-signal-model\n readonly value = input<number>();\n /* Optional unit label /\n readonly unit = input<string>();\n /\n Show increment/decrement buttons?\n \n @defaultValue true\n /\n readonly showButtons = input(true, { transform: booleanAttribute });\n /\n The aria-label passed to the input\n \n @defaultValue undefined\n /\n readonly ariaLabel = input<TranslatableString>(undefined, { alias: 'aria-label' });\n /\n ID that is set on the input, e.g. for `<label for=\"...\">`\n \n @defaultValue\n * ```\n * `__si-number-input-${SiNumberInputComponent.idCounter++}`\n * ```\n /\n readonly inputId = input(`__si-number-input-${SiNumberInputComponent.idCounter++}`);\n\n readonly id = computed(() => this.inputId());\n\n /* @defaultValue false /\n // eslint-disable-next-line @angular-eslint/no-input-rename\n readonly disabledInput = input(false, { alias: 'disabled', transform: booleanAttribute });\n /* @defaultValue false /\n readonly readonly = input(false, { transform: booleanAttribute });\n\n /\n The placeholder for input field.\n /\n readonly placeholder = input<TranslatableString>();\n\n readonly valueChange = output<number \| undefined>();\n\n readonly inputElement = viewChild.required<ElementRef<HTMLInputElement>>('inputElement');\n\n /\n This ID will be bound to the `aria-describedby` attribute of the number-input.\n * Use this to reference the element containing the error message(s) for the number-input.\n * It will be picked by the {@link SiFormItemComponent} if the number-input is used inside a form item.\n \n @defaultValue\n * ```\n * `${this.id()}-errormessage`\n * ```\n /\n readonly errormessageId = input(`${this.id()}-errormessage`);\n\n protected canInc = true;\n protected canDec = true;\n protected readonly disabled = computed(() => this.disabledInput() \|\| this.disabledNgControl());\n private readonly disabledNgControl = signal(false);\n protected onTouched: () => void = () => {};\n protected onChange: (val: any) => void = () => {};\n protected validator: ValidatorFn \| null = SiNumberInputComponent.formatValidator;\n protected onValidatorChanged: () => void = () => {};\n protected readonly min = computed(() => {\n const minVal = this.minInput();\n return minVal === undefined \|\| isNaN(minVal) ? undefined : minVal;\n });\n protected readonly max = computed(() => {\n const maxVal = this.maxInput();\n return maxVal === undefined \|\| isNaN(maxVal) ? undefined : maxVal;\n });\n protected readonly icons = addIcons({ elementMinus, elementPlus });\n private internalValue?: number;\n private autoUpdate$ = timer(400, 80);\n private autoUpdateSubs?: Subscription;\n private changeDetectorRef = inject(ChangeDetectorRef);\n\n ngOnChanges(changes: SimpleChanges<this>): void {\n if (changes.value) {\n this.writeValueToInput(this.value());\n }\n if (changes.minInput \|\| changes.maxInput) {\n const minValue = this.min();\n const maxValue = this.max();\n this.validator = Validators.compose([\n minValue != null ? Validators.min(minValue) : null,\n maxValue != null ? Validators.max(maxValue) : null,\n SiNumberInputComponent.formatValidator\n ])!;\n this.onValidatorChanged();\n }\n this.updateStepButtons();\n }\n\n /* @internal /\n registerOnChange(fn: any): void {\n this.onChange = fn;\n }\n\n /* @internal /\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /* @internal /\n setDisabledState(isDisabled: boolean): void {\n this.disabledNgControl.set(isDisabled);\n }\n\n /* @internal /\n writeValue(value: number \| undefined): void {\n this.writeValueToInput(value);\n this.updateStepButtons();\n this.changeDetectorRef.markForCheck();\n }\n\n /* @internal /\n validate(control: AbstractControl): ValidationErrors \| null {\n return this.validator ? this.validator(control) : null;\n }\n\n /* @internal /\n registerOnValidatorChange?(fn: () => void): void {\n this.onValidatorChanged = fn;\n }\n\n protected modelChanged(): void {\n const value = this.inputElement().nativeElement.value\n ? this.inputElement().nativeElement.valueAsNumber\n : undefined;\n this.internalValue = value;\n this.updateStepButtons();\n this.onChange(value);\n this.valueChange.emit(value);\n }\n\n protected autoUpdateStart(event: Event, isIncrement: boolean): void {\n const mouseButton = (event as MouseEvent).button;\n if (mouseButton) {\n return;\n }\n\n this.onTouched();\n event.preventDefault();\n const trigger = isIncrement ? () => this.increment() : () => this.decrement();\n this.autoUpdateSubs?.unsubscribe();\n this.autoUpdateSubs = this.autoUpdate$.subscribe(trigger);\n trigger();\n }\n\n protected autoUpdateStop(): void {\n this.autoUpdateSubs?.unsubscribe();\n this.autoUpdateSubs = undefined;\n }\n\n private updateStepButtons(): void {\n const stepValue = this.step();\n const step = typeof stepValue === 'number' ? stepValue : 1;\n const max = this.max();\n this.canInc = max == null \|\| this.internalValue == null \|\| this.internalValue + step <= max;\n const min = this.min();\n this.canDec = min == null \|\| this.internalValue == null \|\| this.internalValue - step >= min;\n if (!this.canInc \|\| !this.canDec) {\n this.autoUpdateStop();\n }\n }\n\n private decrement(): void {\n this.inputElement().nativeElement.stepDown();\n this.modelChanged();\n }\n\n private increment(): void {\n this.inputElement().nativeElement.stepUp();\n this.modelChanged();\n }\n\n private writeValueToInput(value: number \| undefined): void {\n this.inputElement().nativeElement.value = value == null ? '' : value.toString();\n this.internalValue = value;\n }\n}\n","<input\n #inputElement\n type=\"number\"\n class=\"focus-none\"\n [attr.id]=\"inputId()\"\n [step]=\"step()\"\n [readonly]=\"readonly()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel() \| translate\"\n [attr.aria-describedby]=\"errormessageId()\"\n [attr.placeholder]=\"placeholder() \| translate\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n (blur)=\"onTouched()\"\n (input)=\"modelChanged()\"\n/>\n@if (unit()) {\n <span class=\"unit\" [class.text-secondary]=\"!disabled()\" [class.text-disabled]=\"disabled()\">{{\n unit()\n }}</span>\n}\n@if (showButtons()) {\n <div class=\"form-control-actions\">\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n class=\"dec btn btn-icon btn-tertiary btn-sm\"\n [disabled]=\"disabled() \|\| readonly() \|\| !canDec\"\n (mousedown)=\"autoUpdateStart($event, false)\"\n (touchstart)=\"autoUpdateStart($event, false)\"\n (touchend)=\"autoUpdateStop()\"\n (mouseup)=\"autoUpdateStop()\"\n (mouseleave)=\"autoUpdateStop()\"\n >\n <si-icon [icon]=\"icons.elementMinus\" />\n </button>\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n class=\"inc btn btn-icon btn-tertiary btn-sm\"\n [disabled]=\"disabled() \|\| readonly() \|\| !canInc\"\n (mousedown)=\"autoUpdateStart($event, true)\"\n (touchstart)=\"autoUpdateStart($event, true)\"\n (touchend)=\"autoUpdateStop()\"\n (mouseup)=\"autoUpdateStop()\"\n (mouseleave)=\"autoUpdateStop()\"\n >\n <si-icon [icon]=\"icons.elementPlus\" />\n </button>\n </div>\n}\n","/\n Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n /\nimport { NgModule } from '@angular/core';\n\nimport { SiNumberInputComponent } from './si-number-input.component';\n\n@NgModule({\n imports: [SiNumberInputComponent],\n exports: [SiNumberInputComponent]\n})\nexport class SiNumberInputModule {}\n","/\n Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n /\nexport from './si-number-input.component';\nexport * from './si-number-input.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-pagination.mjs CHANGED Viewed

@@ -104,15 +104,18 @@ class SiPaginationComponent {
         this.setPage(event, this.currentPage() + delta);
     }
     setPage(event, page) {
+        if (page === this.currentPage()) {
+            return;
+        }
         event.currentTarget.blur();
         this.currentPage.set(page);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiPaginationComponent, isStandalone: true, selector: "si-pagination", inputs: { totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, totalRowCount: { classPropertyName: "totalRowCount", publicName: "totalRowCount", isSignal: true, isRequired: false, transformFunction: null }, backButtonText: { classPropertyName: "backButtonText", publicName: "backButtonText", isSignal: true, isRequired: false, transformFunction: null }, forwardButtonText: { classPropertyName: "forwardButtonText", publicName: "forwardButtonText", isSignal: true, isRequired: false, transformFunction: null }, navAriaLabel: { classPropertyName: "navAriaLabel", publicName: "navAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange" }, ngImport: i0, template: "<nav role=\"navigation\" [attr.aria-label]=\"navAriaLabel() | translate\">\n  <ul class=\"pagination\">\n    <li class=\"me-5\">\n      <button\n        type=\"button\"\n        class=\"page-item mx-4\"\n        [class.disabled]=\"prevDisabled()\"\n        [disabled]=\"prevDisabled()\"\n        [attr.aria-label]=\"backButtonText() | translate\"\n        (click)=\"direction($event, -1)\"\n      >\n        <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementLeft3\" />\n      </button>\n    </li>\n    @for (page of pageButtons(); track $index) {\n      <li>\n        @if (!page.sep) {\n          <button\n            type=\"button\"\n            class=\"page-item\"\n            [attr.aria-current]=\"page.page === currentPage() ? 'page' : ''\"\n            [class.active]=\"page.page === currentPage()\"\n            [disabled]=\"page.page === currentPage()\"\n            (click)=\"setPage($event, page.page)\"\n          >\n            {{ page.page }}\n          </button>\n        } @else {\n          <span class=\"page-item separator mx-2\">&hellip;</span>\n        }\n      </li>\n    }\n    <li class=\"ms-5\">\n      <button\n        type=\"button\"\n        class=\"page-item mx-4\"\n        [class.disabled]=\"nextDisabled()\"\n        [disabled]=\"nextDisabled()\"\n        [attr.aria-label]=\"forwardButtonText() | translate\"\n        (click)=\"direction($event, 1)\"\n      >\n        <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementRight3\" />\n      </button>\n    </li>\n  </ul>\n</nav>\n", dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiPaginationComponent, isStandalone: true, selector: "si-pagination", inputs: { totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, totalRowCount: { classPropertyName: "totalRowCount", publicName: "totalRowCount", isSignal: true, isRequired: false, transformFunction: null }, backButtonText: { classPropertyName: "backButtonText", publicName: "backButtonText", isSignal: true, isRequired: false, transformFunction: null }, forwardButtonText: { classPropertyName: "forwardButtonText", publicName: "forwardButtonText", isSignal: true, isRequired: false, transformFunction: null }, navAriaLabel: { classPropertyName: "navAriaLabel", publicName: "navAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange" }, ngImport: i0, template: "<nav [attr.aria-label]=\"navAriaLabel() | translate\">\n  <ul class=\"pagination\">\n    <li class=\"me-5\">\n      <button\n        type=\"button\"\n        class=\"page-item mx-4\"\n        [class.disabled]=\"prevDisabled()\"\n        [disabled]=\"prevDisabled()\"\n        [attr.aria-label]=\"backButtonText() | translate\"\n        (click)=\"direction($event, -1)\"\n      >\n        <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementLeft3\" />\n      </button>\n    </li>\n    @for (page of pageButtons(); track $index) {\n      <li>\n        @if (!page.sep) {\n          <button\n            type=\"button\"\n            class=\"page-item\"\n            [attr.aria-current]=\"page.page === currentPage() ? 'page' : ''\"\n            [attr.aria-disabled]=\"page.page === currentPage() ? 'true' : null\"\n            [class.active]=\"page.page === currentPage()\"\n            (click)=\"setPage($event, page.page)\"\n          >\n            {{ page.page }}\n          </button>\n        } @else {\n          <span class=\"page-item separator mx-2\">&hellip;</span>\n        }\n      </li>\n    }\n    <li class=\"ms-5\">\n      <button\n        type=\"button\"\n        class=\"page-item mx-4\"\n        [class.disabled]=\"nextDisabled()\"\n        [disabled]=\"nextDisabled()\"\n        [attr.aria-label]=\"forwardButtonText() | translate\"\n        (click)=\"direction($event, 1)\"\n      >\n        <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementRight3\" />\n      </button>\n    </li>\n  </ul>\n</nav>\n", dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiPaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-pagination', imports: [SiIconComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav role=\"navigation\" [attr.aria-label]=\"navAriaLabel() | translate\">\n  <ul class=\"pagination\">\n    <li class=\"me-5\">\n      <button\n        type=\"button\"\n        class=\"page-item mx-4\"\n        [class.disabled]=\"prevDisabled()\"\n        [disabled]=\"prevDisabled()\"\n        [attr.aria-label]=\"backButtonText() | translate\"\n        (click)=\"direction($event, -1)\"\n      >\n        <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementLeft3\" />\n      </button>\n    </li>\n    @for (page of pageButtons(); track $index) {\n      <li>\n        @if (!page.sep) {\n          <button\n            type=\"button\"\n            class=\"page-item\"\n            [attr.aria-current]=\"page.page === currentPage() ? 'page' : ''\"\n            [class.active]=\"page.page === currentPage()\"\n            [disabled]=\"page.page === currentPage()\"\n            (click)=\"setPage($event, page.page)\"\n          >\n            {{ page.page }}\n          </button>\n        } @else {\n          <span class=\"page-item separator mx-2\">&hellip;</span>\n        }\n      </li>\n    }\n    <li class=\"ms-5\">\n      <button\n        type=\"button\"\n        class=\"page-item mx-4\"\n        [class.disabled]=\"nextDisabled()\"\n        [disabled]=\"nextDisabled()\"\n        [attr.aria-label]=\"forwardButtonText() | translate\"\n        (click)=\"direction($event, 1)\"\n      >\n        <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementRight3\" />\n      </button>\n    </li>\n  </ul>\n</nav>\n" }]
+            args: [{ selector: 'si-pagination', imports: [SiIconComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [attr.aria-label]=\"navAriaLabel() | translate\">\n  <ul class=\"pagination\">\n    <li class=\"me-5\">\n      <button\n        type=\"button\"\n        class=\"page-item mx-4\"\n        [class.disabled]=\"prevDisabled()\"\n        [disabled]=\"prevDisabled()\"\n        [attr.aria-label]=\"backButtonText() | translate\"\n        (click)=\"direction($event, -1)\"\n      >\n        <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementLeft3\" />\n      </button>\n    </li>\n    @for (page of pageButtons(); track $index) {\n      <li>\n        @if (!page.sep) {\n          <button\n            type=\"button\"\n            class=\"page-item\"\n            [attr.aria-current]=\"page.page === currentPage() ? 'page' : ''\"\n            [attr.aria-disabled]=\"page.page === currentPage() ? 'true' : null\"\n            [class.active]=\"page.page === currentPage()\"\n            (click)=\"setPage($event, page.page)\"\n          >\n            {{ page.page }}\n          </button>\n        } @else {\n          <span class=\"page-item separator mx-2\">&hellip;</span>\n        }\n      </li>\n    }\n    <li class=\"ms-5\">\n      <button\n        type=\"button\"\n        class=\"page-item mx-4\"\n        [class.disabled]=\"nextDisabled()\"\n        [disabled]=\"nextDisabled()\"\n        [attr.aria-label]=\"forwardButtonText() | translate\"\n        (click)=\"direction($event, 1)\"\n      >\n        <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementRight3\" />\n      </button>\n    </li>\n  </ul>\n</nav>\n" }]
         }], propDecorators: { totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], totalRowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRowCount", required: false }] }], backButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButtonText", required: false }] }], forwardButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "forwardButtonText", required: false }] }], navAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "navAriaLabel", required: false }] }] } });
 /**

package/fesm2022/siemens-element-ng-pagination.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"siemens-element-ng-pagination.mjs","sources":["../../../../projects/element-ng/pagination/si-pagination.component.ts","../../../../projects/element-ng/pagination/si-pagination.component.html","../../../../projects/element-ng/pagination/si-pagination.module.ts","../../../../projects/element-ng/pagination/index.ts","../../../../projects/element-ng/pagination/siemens-element-ng-pagination.ts"],"sourcesContent":["/*\n Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n /\nimport { ChangeDetectionStrategy, Component, computed, input, model } from '@angular/core';\nimport { elementLeft3, elementRight3 } from '@siemens/element-icons';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';\n\n@Component({\n selector: 'si-pagination',\n imports: [SiIconComponent, SiTranslatePipe],\n templateUrl: './si-pagination.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiPaginationComponent {\n private static maxItems = 7;\n\n /\n The total number of pages.\n * Alternatively use `itemsPerPage` and `totalItems`\n /\n readonly totalPages = input<number>();\n /\n The current active page, counting starts from 1\n \n @defaultValue 1\n /\n readonly currentPage = model<number>(1);\n /\n The number of items per page.\n * Used to calculate the total number of page if `totalPages` is not available\n /\n readonly pageSize = input<number>();\n /\n The total number of items.\n * Used to calculate the total number of page if `totalPages` is not available\n /\n readonly totalRowCount = input<number>();\n\n /\n The text of the back button for pagination. Required for a11y.\n \n @defaultValue\n * ```\n * t(() => $localize`:@@SI_PAGINATION.BACK:Back`)\n * ```\n /\n readonly backButtonText = input(t(() => $localize`:@@SI_PAGINATION.BACK:Back`));\n\n /\n The text of the forward button for pagination. Required for a11y.\n \n @defaultValue\n * ```\n * t(() => $localize`:@@SI_PAGINATION.FORWARD:Forward`)\n * ```\n /\n readonly forwardButtonText = input(t(() => $localize`:@@SI_PAGINATION.FORWARD:Forward`));\n /\n When multiple paginations are used on the same page each pagination needs a distinct aria label.\n * Required for a11y.\n \n @defaultValue\n * ```\n * t(() => $localize`:@@SI_PAGINATION.NAV_LABEL:Pagination`)\n * ```\n /\n readonly navAriaLabel = input(t(() => $localize`:@@SI_PAGINATION.NAV_LABEL:Pagination`));\n\n private readonly calculatedTotalPages = computed(\n () => this.totalPages() ?? Math.ceil((this.totalRowCount() ?? 0) / (this.pageSize() ?? 1))\n );\n\n protected readonly prevDisabled = computed(() => this.currentPage() === 1);\n\n protected readonly nextDisabled = computed(\n () => this.currentPage() === this.calculatedTotalPages()\n );\n\n protected readonly pageButtons = computed(() => {\n const pageButtons: { page: number; sep: boolean }[] = [];\n const totalPages = this.calculatedTotalPages();\n const currentPage = this.currentPage();\n\n if (totalPages <= SiPaginationComponent.maxItems) {\n for (let i = 0; i < totalPages; i++) {\n pageButtons.push({ page: i + 1, sep: false });\n }\n } else if (currentPage < SiPaginationComponent.maxItems - 2) {\n // separator only on the right (in LTR)\n for (let i = 0; i < SiPaginationComponent.maxItems - 2; i++) {\n pageButtons.push({ page: i + 1, sep: false });\n }\n pageButtons.push({ page: 0, sep: true });\n pageButtons.push({ page: totalPages, sep: false });\n } else if (currentPage >= totalPages - 3) {\n // separator only on the left (in LTR)\n pageButtons.push({ page: 1, sep: false });\n pageButtons.push({ page: 0, sep: true });\n for (let i = totalPages - SiPaginationComponent.maxItems + 2; i < totalPages; i++) {\n pageButtons.push({ page: i + 1, sep: false });\n }\n } else {\n // separator on both sides\n pageButtons.push({ page: 1, sep: false });\n pageButtons.push({ page: 0, sep: true });\n for (let i = -1; i <= 1; i++) {\n pageButtons.push({ page: currentPage + i, sep: false });\n }\n pageButtons.push({ page: 0, sep: true });\n pageButtons.push({ page: totalPages, sep: false });\n }\n\n return pageButtons;\n });\n\n protected readonly icons = addIcons({ elementLeft3, elementRight3 });\n\n protected direction(event: Event, delta: number): void {\n this.setPage(event, this.currentPage() + delta);\n }\n\n protected setPage(event: Event, page: number): void {\n (event.currentTarget as HTMLElement).blur();\n this.currentPage.set(page);\n }\n}\n","<nav role=\"navigation\" [attr.aria-label]=\"navAriaLabel() \| translate\">\n <ul class=\"pagination\">\n <li class=\"me-5\">\n <button\n type=\"button\"\n class=\"page-item mx-4\"\n [class.disabled]=\"prevDisabled()\"\n [disabled]=\"prevDisabled()\"\n [attr.aria-label]=\"backButtonText() \| translate\"\n (click)=\"direction($event, -1)\"\n >\n <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementLeft3\" />\n </button>\n </li>\n @for (page of pageButtons(); track $index) {\n <li>\n @if (!page.sep) {\n <button\n type=\"button\"\n class=\"page-item\"\n [attr.aria-current]=\"page.page === currentPage() ? 'page' : ''\"\n [class.active]=\"page.page === currentPage()\"\n [disabled]=\"page.page === currentPage()\"\n (click)=\"setPage($event, page.page)\"\n >\n {{ page.page }}\n </button>\n } @else {\n <span class=\"page-item separator mx-2\">…</span>\n }\n </li>\n }\n <li class=\"ms-5\">\n <button\n type=\"button\"\n class=\"page-item mx-4\"\n [class.disabled]=\"nextDisabled()\"\n [disabled]=\"nextDisabled()\"\n [attr.aria-label]=\"forwardButtonText() \| translate\"\n (click)=\"direction($event, 1)\"\n >\n <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementRight3\" />\n </button>\n </li>\n </ul>\n</nav>\n","/\n Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n /\nimport { NgModule } from '@angular/core';\n\nimport { SiPaginationComponent } from './si-pagination.component';\n\n@NgModule({\n imports: [SiPaginationComponent],\n exports: [SiPaginationComponent]\n})\nexport class SiPaginationModule {}\n","/\n Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n /\nexport from './si-pagination.component';\nexport * from './si-pagination.module';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"siemens-element-ng-pagination.mjs","sources":["../../../../projects/element-ng/pagination/si-pagination.component.ts","../../../../projects/element-ng/pagination/si-pagination.component.html","../../../../projects/element-ng/pagination/si-pagination.module.ts","../../../../projects/element-ng/pagination/index.ts","../../../../projects/element-ng/pagination/siemens-element-ng-pagination.ts"],"sourcesContent":["/*\n Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n /\nimport { ChangeDetectionStrategy, Component, computed, input, model } from '@angular/core';\nimport { elementLeft3, elementRight3 } from '@siemens/element-icons';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';\n\n@Component({\n selector: 'si-pagination',\n imports: [SiIconComponent, SiTranslatePipe],\n templateUrl: './si-pagination.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiPaginationComponent {\n private static maxItems = 7;\n\n /\n The total number of pages.\n * Alternatively use `itemsPerPage` and `totalItems`\n /\n readonly totalPages = input<number>();\n /\n The current active page, counting starts from 1\n \n @defaultValue 1\n /\n readonly currentPage = model<number>(1);\n /\n The number of items per page.\n * Used to calculate the total number of page if `totalPages` is not available\n /\n readonly pageSize = input<number>();\n /\n The total number of items.\n * Used to calculate the total number of page if `totalPages` is not available\n /\n readonly totalRowCount = input<number>();\n\n /\n The text of the back button for pagination. Required for a11y.\n \n @defaultValue\n * ```\n * t(() => $localize`:@@SI_PAGINATION.BACK:Back`)\n * ```\n /\n readonly backButtonText = input(t(() => $localize`:@@SI_PAGINATION.BACK:Back`));\n\n /\n The text of the forward button for pagination. Required for a11y.\n \n @defaultValue\n * ```\n * t(() => $localize`:@@SI_PAGINATION.FORWARD:Forward`)\n * ```\n /\n readonly forwardButtonText = input(t(() => $localize`:@@SI_PAGINATION.FORWARD:Forward`));\n /\n When multiple paginations are used on the same page each pagination needs a distinct aria label.\n * Required for a11y.\n \n @defaultValue\n * ```\n * t(() => $localize`:@@SI_PAGINATION.NAV_LABEL:Pagination`)\n * ```\n /\n readonly navAriaLabel = input(t(() => $localize`:@@SI_PAGINATION.NAV_LABEL:Pagination`));\n\n private readonly calculatedTotalPages = computed(\n () => this.totalPages() ?? Math.ceil((this.totalRowCount() ?? 0) / (this.pageSize() ?? 1))\n );\n\n protected readonly prevDisabled = computed(() => this.currentPage() === 1);\n\n protected readonly nextDisabled = computed(\n () => this.currentPage() === this.calculatedTotalPages()\n );\n\n protected readonly pageButtons = computed(() => {\n const pageButtons: { page: number; sep: boolean }[] = [];\n const totalPages = this.calculatedTotalPages();\n const currentPage = this.currentPage();\n\n if (totalPages <= SiPaginationComponent.maxItems) {\n for (let i = 0; i < totalPages; i++) {\n pageButtons.push({ page: i + 1, sep: false });\n }\n } else if (currentPage < SiPaginationComponent.maxItems - 2) {\n // separator only on the right (in LTR)\n for (let i = 0; i < SiPaginationComponent.maxItems - 2; i++) {\n pageButtons.push({ page: i + 1, sep: false });\n }\n pageButtons.push({ page: 0, sep: true });\n pageButtons.push({ page: totalPages, sep: false });\n } else if (currentPage >= totalPages - 3) {\n // separator only on the left (in LTR)\n pageButtons.push({ page: 1, sep: false });\n pageButtons.push({ page: 0, sep: true });\n for (let i = totalPages - SiPaginationComponent.maxItems + 2; i < totalPages; i++) {\n pageButtons.push({ page: i + 1, sep: false });\n }\n } else {\n // separator on both sides\n pageButtons.push({ page: 1, sep: false });\n pageButtons.push({ page: 0, sep: true });\n for (let i = -1; i <= 1; i++) {\n pageButtons.push({ page: currentPage + i, sep: false });\n }\n pageButtons.push({ page: 0, sep: true });\n pageButtons.push({ page: totalPages, sep: false });\n }\n\n return pageButtons;\n });\n\n protected readonly icons = addIcons({ elementLeft3, elementRight3 });\n\n protected direction(event: Event, delta: number): void {\n this.setPage(event, this.currentPage() + delta);\n }\n\n protected setPage(event: Event, page: number): void {\n if (page === this.currentPage()) {\n return;\n }\n (event.currentTarget as HTMLElement).blur();\n this.currentPage.set(page);\n }\n}\n","<nav [attr.aria-label]=\"navAriaLabel() \| translate\">\n <ul class=\"pagination\">\n <li class=\"me-5\">\n <button\n type=\"button\"\n class=\"page-item mx-4\"\n [class.disabled]=\"prevDisabled()\"\n [disabled]=\"prevDisabled()\"\n [attr.aria-label]=\"backButtonText() \| translate\"\n (click)=\"direction($event, -1)\"\n >\n <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementLeft3\" />\n </button>\n </li>\n @for (page of pageButtons(); track $index) {\n <li>\n @if (!page.sep) {\n <button\n type=\"button\"\n class=\"page-item\"\n [attr.aria-current]=\"page.page === currentPage() ? 'page' : ''\"\n [attr.aria-disabled]=\"page.page === currentPage() ? 'true' : null\"\n [class.active]=\"page.page === currentPage()\"\n (click)=\"setPage($event, page.page)\"\n >\n {{ page.page }}\n </button>\n } @else {\n <span class=\"page-item separator mx-2\">…</span>\n }\n </li>\n }\n <li class=\"ms-5\">\n <button\n type=\"button\"\n class=\"page-item mx-4\"\n [class.disabled]=\"nextDisabled()\"\n [disabled]=\"nextDisabled()\"\n [attr.aria-label]=\"forwardButtonText() \| translate\"\n (click)=\"direction($event, 1)\"\n >\n <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementRight3\" />\n </button>\n </li>\n </ul>\n</nav>\n","/\n Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n /\nimport { NgModule } from '@angular/core';\n\nimport { SiPaginationComponent } from './si-pagination.component';\n\n@NgModule({\n imports: [SiPaginationComponent],\n exports: [SiPaginationComponent]\n})\nexport class SiPaginationModule {}\n","/\n Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n /\nexport from './si-pagination.component';\nexport * from './si-pagination.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-password-toggle.mjs CHANGED Viewed

@@ -51,14 +51,14 @@ class SiPasswordToggleComponent {
         this.typeChange.emit(this.inputType);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiPasswordToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiPasswordToggleComponent, isStandalone: true, selector: "si-password-toggle", inputs: { showVisibilityIcon: { classPropertyName: "showVisibilityIcon", publicName: "showVisibilityIcon", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { typeChange: "typeChange" }, host: { properties: { "class.show-visibility-icon": "showVisibilityIcon()" }, classAttribute: "form-control-wrapper" }, queries: [{ propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content />\n@if (showVisibilityIcon()) {\n  <button\n    type=\"button\"\n    class=\"btn btn-tertiary btn-icon btn-sm text-body password-visibility-icon\"\n    [attr.aria-label]=\"(showPassword() ? hideLabel() : showLabel()) | translate\"\n    (click)=\"toggle()\"\n  >\n    <si-icon [icon]=\"showPassword() ? icons.elementHide : icons.elementShow\" />\n  </button>\n}\n", styles: [":host{display:block;position:relative;inline-size:100%}:host.show-visibility-icon{--si-action-icon-offset: 28px}:host ::ng-deep input::-ms-reveal{display:none}.password-visibility-icon{position:absolute;font-size:1.25rem;inset-inline-end:4px;inset-block-start:4px;z-index:2}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiPasswordToggleComponent, isStandalone: true, selector: "si-password-toggle", inputs: { showVisibilityIcon: { classPropertyName: "showVisibilityIcon", publicName: "showVisibilityIcon", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { typeChange: "typeChange" }, host: { properties: { "class.show-visibility-icon": "showVisibilityIcon()" }, classAttribute: "form-control-wrapper" }, queries: [{ propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content />\n@if (showVisibilityIcon()) {\n  <div class=\"form-control-actions\">\n    <button\n      type=\"button\"\n      class=\"btn btn-tertiary btn-icon btn-sm text-body password-visibility-icon\"\n      [attr.aria-label]=\"(showPassword() ? hideLabel() : showLabel()) | translate\"\n      (click)=\"toggle()\"\n    >\n      <si-icon [icon]=\"showPassword() ? icons.elementHide : icons.elementShow\" />\n    </button>\n  </div>\n}\n", styles: [":host{display:block;position:relative;inline-size:100%}:host.show-visibility-icon{--si-action-icon-offset: 28px}:host ::ng-deep input::-ms-reveal{display:none}.password-visibility-icon{font-size:1.25rem}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiPasswordToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-password-toggle', imports: [SiIconComponent, SiTranslatePipe], host: {
                         class: 'form-control-wrapper',
                         '[class.show-visibility-icon]': 'showVisibilityIcon()'
-                    }, template: "<ng-content />\n@if (showVisibilityIcon()) {\n  <button\n    type=\"button\"\n    class=\"btn btn-tertiary btn-icon btn-sm text-body password-visibility-icon\"\n    [attr.aria-label]=\"(showPassword() ? hideLabel() : showLabel()) | translate\"\n    (click)=\"toggle()\"\n  >\n    <si-icon [icon]=\"showPassword() ? icons.elementHide : icons.elementShow\" />\n  </button>\n}\n", styles: [":host{display:block;position:relative;inline-size:100%}:host.show-visibility-icon{--si-action-icon-offset: 28px}:host ::ng-deep input::-ms-reveal{display:none}.password-visibility-icon{position:absolute;font-size:1.25rem;inset-inline-end:4px;inset-block-start:4px;z-index:2}\n"] }]
+                    }, template: "<ng-content />\n@if (showVisibilityIcon()) {\n  <div class=\"form-control-actions\">\n    <button\n      type=\"button\"\n      class=\"btn btn-tertiary btn-icon btn-sm text-body password-visibility-icon\"\n      [attr.aria-label]=\"(showPassword() ? hideLabel() : showLabel()) | translate\"\n      (click)=\"toggle()\"\n    >\n      <si-icon [icon]=\"showPassword() ? icons.elementHide : icons.elementShow\" />\n    </button>\n  </div>\n}\n", styles: [":host{display:block;position:relative;inline-size:100%}:host.show-visibility-icon{--si-action-icon-offset: 28px}:host ::ng-deep input::-ms-reveal{display:none}.password-visibility-icon{font-size:1.25rem}\n"] }]
         }], propDecorators: { ngControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { isSignal: true }] }], showVisibilityIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showVisibilityIcon", required: false }] }], typeChange: [{ type: i0.Output, args: ["typeChange"] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }] } });
 /**

package/fesm2022/siemens-element-ng-password-toggle.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"siemens-element-ng-password-toggle.mjs","sources":["../../../../projects/element-ng/password-toggle/si-password-toggle.component.ts","../../../../projects/element-ng/password-toggle/si-password-toggle.component.html","../../../../projects/element-ng/password-toggle/si-password-toggle.module.ts","../../../../projects/element-ng/password-toggle/index.ts","../../../../projects/element-ng/password-toggle/siemens-element-ng-password-toggle.ts"],"sourcesContent":["/*\n Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n /\nimport { Component, contentChild, input, output, signal } from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { elementHide, elementShow } from '@siemens/element-icons';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';\n\n@Component({\n selector: 'si-password-toggle',\n imports: [SiIconComponent, SiTranslatePipe],\n templateUrl: './si-password-toggle.component.html',\n styleUrl: './si-password-toggle.component.scss',\n host: {\n class: 'form-control-wrapper',\n '[class.show-visibility-icon]': 'showVisibilityIcon()'\n }\n})\nexport class SiPasswordToggleComponent {\n protected readonly ngControl = contentChild(NgControl);\n /\n Whether to show the visibility toggle icon.\n \n @defaultValue true\n /\n readonly showVisibilityIcon = input(true);\n\n /\n Emits the `type` attribute for the `<input>` ('password' \| 'text')\n * whenever the password visibility is getting toggled.\n /\n readonly typeChange = output<string>();\n\n /\n The aria-label (translatable) for the password show icon.\n \n @defaultValue\n * ```\n * t(() => $localize`:@@SI_PASSWORD_TOGGLE.SHOW:show password`)\n * ```\n /\n readonly showLabel = input(t(() => $localize`:@@SI_PASSWORD_TOGGLE.SHOW:show password`));\n /\n The aria-label (translatable) for the password hide icon.\n \n @defaultValue\n * ```\n * t(() => $localize`:@@SI_PASSWORD_TOGGLE.HIDE:hide password`)\n * ```\n /\n readonly hideLabel = input(t(() => $localize`:@@SI_PASSWORD_TOGGLE.HIDE:hide password`));\n\n protected readonly showPassword = signal<boolean>(false);\n protected readonly icons = addIcons({ elementHide, elementShow });\n\n /* The `type` attribute for the `<input>` ('password' \| 'text'). /\n get inputType(): string {\n return this.showPassword() ? 'text' : 'password';\n }\n\n protected toggle(): void {\n this.showPassword.set(!this.showPassword());\n this.typeChange.emit(this.inputType);\n }\n}\n","<ng-content />\n@if (showVisibilityIcon()) {\n <button\n type=\"button\"\n class=\"btn btn-tertiary btn-icon btn-sm text-body password-visibility-icon\"\n [attr.aria-label]=\"(showPassword() ? hideLabel() : showLabel()) \| translate\"\n (click)=\"toggle()\"\n >\n <si-icon [icon]=\"showPassword() ? icons.elementHide : icons.elementShow\" />\n </button>\n}\n","/\n Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n /\nimport { NgModule } from '@angular/core';\n\nimport { SiPasswordToggleComponent } from './si-password-toggle.component';\n\n@NgModule({\n imports: [SiPasswordToggleComponent],\n exports: [SiPasswordToggleComponent]\n})\nexport class SiPasswordToggleModule {}\n","/\n Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n /\nexport from './si-password-toggle.component';\nexport * from './si-password-toggle.module';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;AAAA;;;AAGG;MAiBU,yBAAyB,CAAA;AACjB,IAAA,SAAS,GAAG,YAAY,CAAC,SAAS,qDAAC;AACtD;;;;AAIG;AACM,IAAA,kBAAkB,GAAG,KAAK,CAAC,IAAI,8DAAC;AAEzC;;;AAGG;IACM,UAAU,GAAG,MAAM,EAAU;AAEtC;;;;;;;AAOG;AACM,IAAA,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,SAAS,CAAA,CAAA,wCAAA,CAA0C,CAAC,qDAAC;AACxF;;;;;;;AAOG;AACM,IAAA,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,SAAS,CAAA,CAAA,wCAAA,CAA0C,CAAC,qDAAC;AAErE,IAAA,YAAY,GAAG,MAAM,CAAU,KAAK,wDAAC;IACrC,KAAK,GAAG,QAAQ,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC;;AAGjE,IAAA,IAAI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,YAAY,EAAE,GAAG,MAAM,GAAG,UAAU;IAClD;IAEU,MAAM,GAAA;QACd,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;QAC3C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;IACtC;uGA7CW,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAzB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,yBAAyB,usBACQ,SAAS,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECrBvD,~~yXAWA~~,EAAA,MAAA,EAAA,CAAA,~~sRAAA,~~CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,~~EDCY~~,eAAe,iEAAE,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,CAAA;;2FAQ/B,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAVrC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,oBAAoB,WACrB,CAAC,eAAe,EAAE,eAAe,CAAC,EAAA,IAAA,EAGrC;AACJ,wBAAA,KAAK,EAAE,sBAAsB;AAC7B,wBAAA,8BAA8B,EAAE;AACjC,qBAAA,EAAA,QAAA,EAAA,~~yXAAA~~,EAAA,MAAA,EAAA,CAAA,~~sRAAA,~~CAAA,EAAA;8FAG2C,SAAS,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,kBAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AErBvD;;;AAGG;MASU,sBAAsB,CAAA;uGAAtB,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;wGAAtB,sBAAsB,EAAA,OAAA,EAAA,CAHvB,yBAAyB,CAAA,EAAA,OAAA,EAAA,CACzB,yBAAyB,CAAA,EAAA,CAAA;AAExB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,sBAAsB,YAHvB,yBAAyB,CAAA,EAAA,CAAA;;2FAGxB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAJlC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,yBAAyB,CAAC;oBACpC,OAAO,EAAE,CAAC,yBAAyB;AACpC,iBAAA;;;ACXD;;;AAGG;;ACHH;;AAEG;;;;"}
1	+ {"version":3,"file":"siemens-element-ng-password-toggle.mjs","sources":["../../../../projects/element-ng/password-toggle/si-password-toggle.component.ts","../../../../projects/element-ng/password-toggle/si-password-toggle.component.html","../../../../projects/element-ng/password-toggle/si-password-toggle.module.ts","../../../../projects/element-ng/password-toggle/index.ts","../../../../projects/element-ng/password-toggle/siemens-element-ng-password-toggle.ts"],"sourcesContent":["/*\n Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n /\nimport { Component, contentChild, input, output, signal } from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { elementHide, elementShow } from '@siemens/element-icons';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';\n\n@Component({\n selector: 'si-password-toggle',\n imports: [SiIconComponent, SiTranslatePipe],\n templateUrl: './si-password-toggle.component.html',\n styleUrl: './si-password-toggle.component.scss',\n host: {\n class: 'form-control-wrapper',\n '[class.show-visibility-icon]': 'showVisibilityIcon()'\n }\n})\nexport class SiPasswordToggleComponent {\n protected readonly ngControl = contentChild(NgControl);\n /\n Whether to show the visibility toggle icon.\n \n @defaultValue true\n /\n readonly showVisibilityIcon = input(true);\n\n /\n Emits the `type` attribute for the `<input>` ('password' \| 'text')\n * whenever the password visibility is getting toggled.\n /\n readonly typeChange = output<string>();\n\n /\n The aria-label (translatable) for the password show icon.\n \n @defaultValue\n * ```\n * t(() => $localize`:@@SI_PASSWORD_TOGGLE.SHOW:show password`)\n * ```\n /\n readonly showLabel = input(t(() => $localize`:@@SI_PASSWORD_TOGGLE.SHOW:show password`));\n /\n The aria-label (translatable) for the password hide icon.\n \n @defaultValue\n * ```\n * t(() => $localize`:@@SI_PASSWORD_TOGGLE.HIDE:hide password`)\n * ```\n /\n readonly hideLabel = input(t(() => $localize`:@@SI_PASSWORD_TOGGLE.HIDE:hide password`));\n\n protected readonly showPassword = signal<boolean>(false);\n protected readonly icons = addIcons({ elementHide, elementShow });\n\n /* The `type` attribute for the `<input>` ('password' \| 'text'). /\n get inputType(): string {\n return this.showPassword() ? 'text' : 'password';\n }\n\n protected toggle(): void {\n this.showPassword.set(!this.showPassword());\n this.typeChange.emit(this.inputType);\n }\n}\n","<ng-content />\n@if (showVisibilityIcon()) {\n <div class=\"form-control-actions\">\n <button\n type=\"button\"\n class=\"btn btn-tertiary btn-icon btn-sm text-body password-visibility-icon\"\n [attr.aria-label]=\"(showPassword() ? hideLabel() : showLabel()) \| translate\"\n (click)=\"toggle()\"\n >\n <si-icon [icon]=\"showPassword() ? icons.elementHide : icons.elementShow\" />\n </button>\n </div>\n}\n","/\n Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n /\nimport { NgModule } from '@angular/core';\n\nimport { SiPasswordToggleComponent } from './si-password-toggle.component';\n\n@NgModule({\n imports: [SiPasswordToggleComponent],\n exports: [SiPasswordToggleComponent]\n})\nexport class SiPasswordToggleModule {}\n","/\n Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n /\nexport from './si-password-toggle.component';\nexport * from './si-password-toggle.module';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}