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

@siemens/element-ng 49.7.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 (96) 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":";;;;;;;;;;;;AAAA;;;AAGG;AAuIH;;;;AAIG;MAcU,2BAA2B,CAAA;AACnB,IAAA,KAAK,GAAG,QAAQ,CAAC,EAAE,sBAAsB,EAAE,CAAC;AAE/D;;AAEG;AACM,IAAA,SAAS,GAAG,KAAK,CAAC,QAAQ,oDAAsB;AACzD;;AAEG;AACM,IAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,kDAAsB;AACvD;;AAEG;IACM,WAAW,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAsB;AAClD;;;;AAIG;IACM,MAAM,GAAG,KAAK,CAAC,KAAK,mDAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAC/D;;;AAGG;IACM,QAAQ,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAqD;AAC9E;;AAEG;IACM,YAAY,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,cAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAiC;AAC9D;;AAEG;IACM,aAAa,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,eAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAiC;IAE5C,cAAc,GAAG,MAAM,CAAC,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;uGAnCnE,2BAA2B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAA3B,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,2BAA2B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC5JxC,2+KAqKA,EAAA,MAAA,EAAA,CAAA,kvDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDlBI,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACZ,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,sBAAsB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACtB,cAAc,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,mBAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,iCAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,EAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,eAAe,iEALf,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,CAAA;;2FAUN,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBAbvC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,sBAAsB,EAAA,OAAA,EACvB;wBACP,eAAe;wBACf,YAAY;wBACZ,YAAY;wBACZ,sBAAsB;wBACtB,cAAc;wBACd;AACD,qBAAA,EAAA,QAAA,EAAA,2+KAAA,EAAA,MAAA,EAAA,CAAA,kvDAAA,CAAA,EAAA;;;AExJH;;;AAGG;;ACHH;;AAEG;;;;"}
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-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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"}

package/fesm2022/siemens-element-ng-photo-upload.mjs CHANGED Viewed

@@ -448,7 +448,7 @@ class SiPhotoUploadComponent {
         this.sanitizedPhotoUrl.set(photo ? this.sanitizer.bypassSecurityTrustResourceUrl(photo) : undefined);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiPhotoUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiPhotoUploadComponent, isStandalone: true, selector: "si-photo-upload", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabledCropping: { classPropertyName: "disabledCropping", publicName: "disabledCropping", isSignal: true, isRequired: false, transformFunction: null }, acceptedUploadFormats: { classPropertyName: "acceptedUploadFormats", publicName: "acceptedUploadFormats", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, uploadErrorWrongType: { classPropertyName: "uploadErrorWrongType", publicName: "uploadErrorWrongType", isSignal: true, isRequired: false, transformFunction: null }, uploadErrorTooBig: { classPropertyName: "uploadErrorTooBig", publicName: "uploadErrorTooBig", isSignal: true, isRequired: false, transformFunction: null }, photoAltText: { classPropertyName: "photoAltText", publicName: "photoAltText", isSignal: true, isRequired: false, transformFunction: null }, placeholderAltText: { classPropertyName: "placeholderAltText", publicName: "placeholderAltText", isSignal: true, isRequired: false, transformFunction: null }, changePhotoText: { classPropertyName: "changePhotoText", publicName: "changePhotoText", isSignal: true, isRequired: false, transformFunction: null }, cropperFrameAriaLabel: { classPropertyName: "cropperFrameAriaLabel", publicName: "cropperFrameAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, uploadPhotoText: { classPropertyName: "uploadPhotoText", publicName: "uploadPhotoText", isSignal: true, isRequired: false, transformFunction: null }, removePhotoText: { classPropertyName: "removePhotoText", publicName: "removePhotoText", isSignal: true, isRequired: false, transformFunction: null }, cancelEditText: { classPropertyName: "cancelEditText", publicName: "cancelEditText", isSignal: true, isRequired: false, transformFunction: null }, applyEditText: { classPropertyName: "applyEditText", publicName: "applyEditText", isSignal: true, isRequired: false, transformFunction: null }, modalHeader: { classPropertyName: "modalHeader", publicName: "modalHeader", isSignal: true, isRequired: false, transformFunction: null }, modalDescription: { classPropertyName: "modalDescription", publicName: "modalDescription", isSignal: true, isRequired: false, transformFunction: null }, cropperImageFormat: { classPropertyName: "cropperImageFormat", publicName: "cropperImageFormat", isSignal: true, isRequired: false, transformFunction: null }, cropperAspectRatio: { classPropertyName: "cropperAspectRatio", publicName: "cropperAspectRatio", isSignal: true, isRequired: false, transformFunction: null }, cropperMaintainAspectRatio: { classPropertyName: "cropperMaintainAspectRatio", publicName: "cropperMaintainAspectRatio", isSignal: true, isRequired: false, transformFunction: null }, cropperContainWithinAspectRatio: { classPropertyName: "cropperContainWithinAspectRatio", publicName: "cropperContainWithinAspectRatio", isSignal: true, isRequired: false, transformFunction: null }, cropperMinWidth: { classPropertyName: "cropperMinWidth", publicName: "cropperMinWidth", isSignal: true, isRequired: false, transformFunction: null }, cropperMinHeight: { classPropertyName: "cropperMinHeight", publicName: "cropperMinHeight", isSignal: true, isRequired: false, transformFunction: null }, cropperMaxWidth: { classPropertyName: "cropperMaxWidth", publicName: "cropperMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, cropperMaxHeight: { classPropertyName: "cropperMaxHeight", publicName: "cropperMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, roundImage: { classPropertyName: "roundImage", publicName: "roundImage", isSignal: true, isRequired: false, transformFunction: null }, sourcePhoto: { classPropertyName: "sourcePhoto", publicName: "sourcePhoto", isSignal: true, isRequired: false, transformFunction: null }, sourcePhotoUrl: { classPropertyName: "sourcePhotoUrl", publicName: "sourcePhotoUrl", isSignal: true, isRequired: false, transformFunction: null }, croppedPhoto: { classPropertyName: "croppedPhoto", publicName: "croppedPhoto", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sourcePhoto: "sourcePhotoChange", croppedPhoto: "croppedPhotoChange" }, viewQueries: [{ propertyName: "editPhotoTemplate", first: true, predicate: ["editPhotoTemplate"], descendants: true, isSignal: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }, { propertyName: "imageCropper", first: true, predicate: ["imageCropper"], descendants: true, isSignal: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.SiAvatarBackgroundColorDirective, inputs: ["color", "color", "autoColor", "autoColor"] }], ngImport: i0, template: "<div class=\"photo-upload d-flex flex-column p-6\">\n  <!-- File upload -->\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"d-none\"\n    [accept]=\"acceptedUploadFormats()\"\n    (change)=\"fileUpload($event)\"\n  />\n\n  <!-- Image -->\n  @if (sanitizedPhotoUrl()) {\n    <img\n      class=\"photo-upload-photo\"\n      [class.round]=\"roundImage()\"\n      [src]=\"sanitizedPhotoUrl()\"\n      [alt]=\"photoAltText() | translate\"\n    />\n  } @else {\n    <span\n      class=\"photo-upload-placeholder d-flex align-items-center justify-content-center flex-none\"\n      [class.round]=\"roundImage()\"\n    >\n      {{ placeholderAltText() | translate }}\n    </span>\n  }\n  <!-- Buttons -->\n  @if (!readonly()) {\n    <div class=\"d-flex justify-content-center gap-6 mt-8\">\n      <button\n        type=\"button\"\n        class=\"btn btn-secondary\"\n        (click)=\"\n          (sourcePhoto() || sourcePhotoUrl()) && !disabledCropping()\n            ? showCroppingDialog()\n            : fileInput.click()\n        \"\n      >\n        {{ editButtonText() | translate }}\n      </button>\n      @if (sanitizedPhotoUrl()) {\n        <button type=\"button\" class=\"btn btn-danger\" (click)=\"removePhoto()\">\n          {{ removePhotoText() | translate }}\n        </button>\n      }\n    </div>\n  }\n\n  <!-- Error message -->\n  @if (uploadErrorMessage() && !modalRef) {\n    <div class=\"mt-6\">\n      <ng-container [ngTemplateOutlet]=\"errorMessageTemplate\" />\n    </div>\n  }\n</div>\n\n<!-- Template: modal -->\n<ng-template #editPhotoTemplate>\n  <!-- Header -->\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\" [id]=\"titleId\">{{ modalHeader() | translate }}</h4>\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-ghost\"\n      [attr.aria-label]=\"cancelEditText() | translate\"\n      (click)=\"imageCropperCanceled()\"\n    >\n      <si-icon [icon]=\"icons.elementCancel\" />\n    </button>\n  </div>\n  <!-- Content -->\n  <div class=\"modal-body\">\n    @if (modalDescription()) {\n      <div class=\"mb-4\">\n        <span class=\"text-secondary\">{{ modalDescription() | translate }}</span>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"imageCropperTemplate\" />\n    @if (uploadErrorMessage()) {\n      <div class=\"d-flex mt-4\">\n        <ng-container [ngTemplateOutlet]=\"errorMessageTemplate\" />\n      </div>\n    }\n  </div>\n  <!-- Footer -->\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-secondary me-auto\" (click)=\"fileInput.click()\">\n      {{ changePhotoText() | translate }}\n    </button>\n    <div class=\"d-flex gap-6\">\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"imageCropperCanceled()\">\n        {{ cancelEditText() | translate }}\n      </button>\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"imageCropperApplied()\">\n        {{ applyEditText() | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Template: error message -->\n<ng-template #errorMessageTemplate>\n  <div class=\"d-flex align-items-center\">\n    <span class=\"icon-sm icon-stack d-inline-block my-n2 me-2\">\n      <si-icon class=\"status-danger\" [icon]=\"icons.elementCircleFilled\" />\n      <si-icon class=\"status-danger-contrast\" [icon]=\"icons.elementStateExclamationMark\" />\n    </span>\n    <span class=\"text-danger\">{{\n      uploadErrorMessage()\n        | translate\n          : {\n              mb: currentFileSizeMegabytes(),\n              kb: currentFileSizeKilobytes(),\n              maxSizeMb: maxSizeMb()\n            }\n    }}</span>\n  </div>\n</ng-template>\n\n<!-- Template: image cropper -->\n<ng-template #imageCropperTemplate>\n  <si-image-cropper-style>\n    <image-cropper\n      #imageCropper\n      output=\"base64\"\n      [aspectRatio]=\"cropperAspectRatio()\"\n      [containWithinAspectRatio]=\"cropperContainWithinAspectRatio()\"\n      [cropperMinWidth]=\"cropperMinWidth()\"\n      [cropperMinHeight]=\"cropperMinHeight()\"\n      [cropperMaxWidth]=\"cropperMaxWidth()\"\n      [cropperMaxHeight]=\"cropperMaxHeight()\"\n      [cropperFrameAriaLabel]=\"cropperFrameAriaLabel() | translate\"\n      [format]=\"cropperImageFormat()\"\n      [imageBase64]=\"imageCropperPhoto()\"\n      [imageURL]=\"sourcePhotoUrl()\"\n      [maintainAspectRatio]=\"cropperMaintainAspectRatio()\"\n      [onlyScaleDown]=\"true\"\n      [roundCropper]=\"roundImage()\"\n      (cropperReady)=\"cropperReady()\"\n      (imageCropped)=\"cropperImageCropped($event)\"\n    />\n  </si-image-cropper-style>\n</ng-template>\n", styles: [":host{--si-photo-upload-photo-width: 200px;--si-photo-upload-photo-height: 200px}.photo-upload{box-sizing:content-box;max-inline-size:var(--si-photo-upload-photo-width)}.photo-upload-photo,.photo-upload-placeholder{display:block;margin:auto;inline-size:var(--si-photo-upload-photo-width);max-inline-size:100%;block-size:var(--si-photo-upload-photo-height);object-fit:cover}.photo-upload-photo.round,.photo-upload-placeholder.round{border-radius:50%}.photo-upload-placeholder{background-color:var(--background);color:var(--element-ui-5);font-size:3rem;text-align:center;overflow:hidden;word-break:break-all;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiImageCropperStyleComponent, selector: "si-image-cropper-style" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiPhotoUploadComponent, isStandalone: true, selector: "si-photo-upload", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabledCropping: { classPropertyName: "disabledCropping", publicName: "disabledCropping", isSignal: true, isRequired: false, transformFunction: null }, acceptedUploadFormats: { classPropertyName: "acceptedUploadFormats", publicName: "acceptedUploadFormats", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, uploadErrorWrongType: { classPropertyName: "uploadErrorWrongType", publicName: "uploadErrorWrongType", isSignal: true, isRequired: false, transformFunction: null }, uploadErrorTooBig: { classPropertyName: "uploadErrorTooBig", publicName: "uploadErrorTooBig", isSignal: true, isRequired: false, transformFunction: null }, photoAltText: { classPropertyName: "photoAltText", publicName: "photoAltText", isSignal: true, isRequired: false, transformFunction: null }, placeholderAltText: { classPropertyName: "placeholderAltText", publicName: "placeholderAltText", isSignal: true, isRequired: false, transformFunction: null }, changePhotoText: { classPropertyName: "changePhotoText", publicName: "changePhotoText", isSignal: true, isRequired: false, transformFunction: null }, cropperFrameAriaLabel: { classPropertyName: "cropperFrameAriaLabel", publicName: "cropperFrameAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, uploadPhotoText: { classPropertyName: "uploadPhotoText", publicName: "uploadPhotoText", isSignal: true, isRequired: false, transformFunction: null }, removePhotoText: { classPropertyName: "removePhotoText", publicName: "removePhotoText", isSignal: true, isRequired: false, transformFunction: null }, cancelEditText: { classPropertyName: "cancelEditText", publicName: "cancelEditText", isSignal: true, isRequired: false, transformFunction: null }, applyEditText: { classPropertyName: "applyEditText", publicName: "applyEditText", isSignal: true, isRequired: false, transformFunction: null }, modalHeader: { classPropertyName: "modalHeader", publicName: "modalHeader", isSignal: true, isRequired: false, transformFunction: null }, modalDescription: { classPropertyName: "modalDescription", publicName: "modalDescription", isSignal: true, isRequired: false, transformFunction: null }, cropperImageFormat: { classPropertyName: "cropperImageFormat", publicName: "cropperImageFormat", isSignal: true, isRequired: false, transformFunction: null }, cropperAspectRatio: { classPropertyName: "cropperAspectRatio", publicName: "cropperAspectRatio", isSignal: true, isRequired: false, transformFunction: null }, cropperMaintainAspectRatio: { classPropertyName: "cropperMaintainAspectRatio", publicName: "cropperMaintainAspectRatio", isSignal: true, isRequired: false, transformFunction: null }, cropperContainWithinAspectRatio: { classPropertyName: "cropperContainWithinAspectRatio", publicName: "cropperContainWithinAspectRatio", isSignal: true, isRequired: false, transformFunction: null }, cropperMinWidth: { classPropertyName: "cropperMinWidth", publicName: "cropperMinWidth", isSignal: true, isRequired: false, transformFunction: null }, cropperMinHeight: { classPropertyName: "cropperMinHeight", publicName: "cropperMinHeight", isSignal: true, isRequired: false, transformFunction: null }, cropperMaxWidth: { classPropertyName: "cropperMaxWidth", publicName: "cropperMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, cropperMaxHeight: { classPropertyName: "cropperMaxHeight", publicName: "cropperMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, roundImage: { classPropertyName: "roundImage", publicName: "roundImage", isSignal: true, isRequired: false, transformFunction: null }, sourcePhoto: { classPropertyName: "sourcePhoto", publicName: "sourcePhoto", isSignal: true, isRequired: false, transformFunction: null }, sourcePhotoUrl: { classPropertyName: "sourcePhotoUrl", publicName: "sourcePhotoUrl", isSignal: true, isRequired: false, transformFunction: null }, croppedPhoto: { classPropertyName: "croppedPhoto", publicName: "croppedPhoto", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sourcePhoto: "sourcePhotoChange", croppedPhoto: "croppedPhotoChange" }, viewQueries: [{ propertyName: "editPhotoTemplate", first: true, predicate: ["editPhotoTemplate"], descendants: true, isSignal: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }, { propertyName: "imageCropper", first: true, predicate: ["imageCropper"], descendants: true, isSignal: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.SiAvatarBackgroundColorDirective, inputs: ["color", "color", "autoColor", "autoColor"] }], ngImport: i0, template: "<div class=\"photo-upload d-flex flex-column p-6\">\n  <!-- File upload -->\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"d-none\"\n    [accept]=\"acceptedUploadFormats()\"\n    (change)=\"fileUpload($event)\"\n  />\n\n  <!-- Image -->\n  @if (sanitizedPhotoUrl()) {\n    <img\n      class=\"photo-upload-photo\"\n      [class.round]=\"roundImage()\"\n      [src]=\"sanitizedPhotoUrl()\"\n      [alt]=\"photoAltText() | translate\"\n    />\n  } @else {\n    <span\n      class=\"photo-upload-placeholder d-flex align-items-center justify-content-center flex-none\"\n      [class.round]=\"roundImage()\"\n    >\n      {{ placeholderAltText() | translate }}\n    </span>\n  }\n  <!-- Buttons -->\n  @if (!readonly()) {\n    <div class=\"d-flex justify-content-center gap-6 mt-8\">\n      <button\n        type=\"button\"\n        class=\"btn btn-secondary\"\n        (click)=\"\n          (sourcePhoto() || sourcePhotoUrl()) && !disabledCropping()\n            ? showCroppingDialog()\n            : fileInput.click()\n        \"\n      >\n        {{ editButtonText() | translate }}\n      </button>\n      @if (sanitizedPhotoUrl()) {\n        <button type=\"button\" class=\"btn btn-danger\" (click)=\"removePhoto()\">\n          {{ removePhotoText() | translate }}\n        </button>\n      }\n    </div>\n  }\n\n  <!-- Error message -->\n  @if (uploadErrorMessage() && !modalRef) {\n    <div class=\"mt-6\">\n      <ng-container [ngTemplateOutlet]=\"errorMessageTemplate\" />\n    </div>\n  }\n</div>\n\n<!-- Template: modal -->\n<ng-template #editPhotoTemplate>\n  <!-- Header -->\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\" [id]=\"titleId\">{{ modalHeader() | translate }}</h4>\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-tertiary-ghost\"\n      [attr.aria-label]=\"cancelEditText() | translate\"\n      (click)=\"imageCropperCanceled()\"\n    >\n      <si-icon [icon]=\"icons.elementCancel\" />\n    </button>\n  </div>\n  <!-- Content -->\n  <div class=\"modal-body\">\n    @if (modalDescription()) {\n      <div class=\"mb-4\">\n        <span class=\"text-secondary\">{{ modalDescription() | translate }}</span>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"imageCropperTemplate\" />\n    @if (uploadErrorMessage()) {\n      <div class=\"d-flex mt-4\">\n        <ng-container [ngTemplateOutlet]=\"errorMessageTemplate\" />\n      </div>\n    }\n  </div>\n  <!-- Footer -->\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-secondary me-auto\" (click)=\"fileInput.click()\">\n      {{ changePhotoText() | translate }}\n    </button>\n    <div class=\"d-flex gap-6\">\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"imageCropperCanceled()\">\n        {{ cancelEditText() | translate }}\n      </button>\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"imageCropperApplied()\">\n        {{ applyEditText() | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Template: error message -->\n<ng-template #errorMessageTemplate>\n  <div class=\"d-flex align-items-center\">\n    <span class=\"icon-sm icon-stack d-inline-block my-n2 me-2\">\n      <si-icon class=\"status-danger\" [icon]=\"icons.elementCircleFilled\" />\n      <si-icon class=\"status-danger-contrast\" [icon]=\"icons.elementStateExclamationMark\" />\n    </span>\n    <span class=\"text-danger\">{{\n      uploadErrorMessage()\n        | translate\n          : {\n              mb: currentFileSizeMegabytes(),\n              kb: currentFileSizeKilobytes(),\n              maxSizeMb: maxSizeMb()\n            }\n    }}</span>\n  </div>\n</ng-template>\n\n<!-- Template: image cropper -->\n<ng-template #imageCropperTemplate>\n  <si-image-cropper-style>\n    <image-cropper\n      #imageCropper\n      output=\"base64\"\n      [aspectRatio]=\"cropperAspectRatio()\"\n      [containWithinAspectRatio]=\"cropperContainWithinAspectRatio()\"\n      [cropperMinWidth]=\"cropperMinWidth()\"\n      [cropperMinHeight]=\"cropperMinHeight()\"\n      [cropperMaxWidth]=\"cropperMaxWidth()\"\n      [cropperMaxHeight]=\"cropperMaxHeight()\"\n      [cropperFrameAriaLabel]=\"cropperFrameAriaLabel() | translate\"\n      [format]=\"cropperImageFormat()\"\n      [imageBase64]=\"imageCropperPhoto()\"\n      [imageURL]=\"sourcePhotoUrl()\"\n      [maintainAspectRatio]=\"cropperMaintainAspectRatio()\"\n      [onlyScaleDown]=\"true\"\n      [roundCropper]=\"roundImage()\"\n      (cropperReady)=\"cropperReady()\"\n      (imageCropped)=\"cropperImageCropped($event)\"\n    />\n  </si-image-cropper-style>\n</ng-template>\n", styles: [":host{--si-photo-upload-photo-width: 200px;--si-photo-upload-photo-height: 200px}.photo-upload{box-sizing:content-box;max-inline-size:var(--si-photo-upload-photo-width)}.photo-upload-photo,.photo-upload-placeholder{display:block;margin:auto;inline-size:var(--si-photo-upload-photo-width);max-inline-size:100%;block-size:var(--si-photo-upload-photo-height);object-fit:cover}.photo-upload-photo.round,.photo-upload-placeholder.round{border-radius:50%}.photo-upload-placeholder{background-color:var(--background);color:var(--element-ui-5);font-size:3rem;text-align:center;overflow:hidden;word-break:break-all;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiImageCropperStyleComponent, selector: "si-image-cropper-style" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiPhotoUploadComponent, decorators: [{
             type: Component,
@@ -463,7 +463,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             directive: SiAvatarBackgroundColorDirective,
                             inputs: ['color', 'autoColor']
                         }
-                    ], template: "<div class=\"photo-upload d-flex flex-column p-6\">\n  <!-- File upload -->\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"d-none\"\n    [accept]=\"acceptedUploadFormats()\"\n    (change)=\"fileUpload($event)\"\n  />\n\n  <!-- Image -->\n  @if (sanitizedPhotoUrl()) {\n    <img\n      class=\"photo-upload-photo\"\n      [class.round]=\"roundImage()\"\n      [src]=\"sanitizedPhotoUrl()\"\n      [alt]=\"photoAltText() | translate\"\n    />\n  } @else {\n    <span\n      class=\"photo-upload-placeholder d-flex align-items-center justify-content-center flex-none\"\n      [class.round]=\"roundImage()\"\n    >\n      {{ placeholderAltText() | translate }}\n    </span>\n  }\n  <!-- Buttons -->\n  @if (!readonly()) {\n    <div class=\"d-flex justify-content-center gap-6 mt-8\">\n      <button\n        type=\"button\"\n        class=\"btn btn-secondary\"\n        (click)=\"\n          (sourcePhoto() || sourcePhotoUrl()) && !disabledCropping()\n            ? showCroppingDialog()\n            : fileInput.click()\n        \"\n      >\n        {{ editButtonText() | translate }}\n      </button>\n      @if (sanitizedPhotoUrl()) {\n        <button type=\"button\" class=\"btn btn-danger\" (click)=\"removePhoto()\">\n          {{ removePhotoText() | translate }}\n        </button>\n      }\n    </div>\n  }\n\n  <!-- Error message -->\n  @if (uploadErrorMessage() && !modalRef) {\n    <div class=\"mt-6\">\n      <ng-container [ngTemplateOutlet]=\"errorMessageTemplate\" />\n    </div>\n  }\n</div>\n\n<!-- Template: modal -->\n<ng-template #editPhotoTemplate>\n  <!-- Header -->\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\" [id]=\"titleId\">{{ modalHeader() | translate }}</h4>\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-ghost\"\n      [attr.aria-label]=\"cancelEditText() | translate\"\n      (click)=\"imageCropperCanceled()\"\n    >\n      <si-icon [icon]=\"icons.elementCancel\" />\n    </button>\n  </div>\n  <!-- Content -->\n  <div class=\"modal-body\">\n    @if (modalDescription()) {\n      <div class=\"mb-4\">\n        <span class=\"text-secondary\">{{ modalDescription() | translate }}</span>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"imageCropperTemplate\" />\n    @if (uploadErrorMessage()) {\n      <div class=\"d-flex mt-4\">\n        <ng-container [ngTemplateOutlet]=\"errorMessageTemplate\" />\n      </div>\n    }\n  </div>\n  <!-- Footer -->\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-secondary me-auto\" (click)=\"fileInput.click()\">\n      {{ changePhotoText() | translate }}\n    </button>\n    <div class=\"d-flex gap-6\">\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"imageCropperCanceled()\">\n        {{ cancelEditText() | translate }}\n      </button>\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"imageCropperApplied()\">\n        {{ applyEditText() | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Template: error message -->\n<ng-template #errorMessageTemplate>\n  <div class=\"d-flex align-items-center\">\n    <span class=\"icon-sm icon-stack d-inline-block my-n2 me-2\">\n      <si-icon class=\"status-danger\" [icon]=\"icons.elementCircleFilled\" />\n      <si-icon class=\"status-danger-contrast\" [icon]=\"icons.elementStateExclamationMark\" />\n    </span>\n    <span class=\"text-danger\">{{\n      uploadErrorMessage()\n        | translate\n          : {\n              mb: currentFileSizeMegabytes(),\n              kb: currentFileSizeKilobytes(),\n              maxSizeMb: maxSizeMb()\n            }\n    }}</span>\n  </div>\n</ng-template>\n\n<!-- Template: image cropper -->\n<ng-template #imageCropperTemplate>\n  <si-image-cropper-style>\n    <image-cropper\n      #imageCropper\n      output=\"base64\"\n      [aspectRatio]=\"cropperAspectRatio()\"\n      [containWithinAspectRatio]=\"cropperContainWithinAspectRatio()\"\n      [cropperMinWidth]=\"cropperMinWidth()\"\n      [cropperMinHeight]=\"cropperMinHeight()\"\n      [cropperMaxWidth]=\"cropperMaxWidth()\"\n      [cropperMaxHeight]=\"cropperMaxHeight()\"\n      [cropperFrameAriaLabel]=\"cropperFrameAriaLabel() | translate\"\n      [format]=\"cropperImageFormat()\"\n      [imageBase64]=\"imageCropperPhoto()\"\n      [imageURL]=\"sourcePhotoUrl()\"\n      [maintainAspectRatio]=\"cropperMaintainAspectRatio()\"\n      [onlyScaleDown]=\"true\"\n      [roundCropper]=\"roundImage()\"\n      (cropperReady)=\"cropperReady()\"\n      (imageCropped)=\"cropperImageCropped($event)\"\n    />\n  </si-image-cropper-style>\n</ng-template>\n", styles: [":host{--si-photo-upload-photo-width: 200px;--si-photo-upload-photo-height: 200px}.photo-upload{box-sizing:content-box;max-inline-size:var(--si-photo-upload-photo-width)}.photo-upload-photo,.photo-upload-placeholder{display:block;margin:auto;inline-size:var(--si-photo-upload-photo-width);max-inline-size:100%;block-size:var(--si-photo-upload-photo-height);object-fit:cover}.photo-upload-photo.round,.photo-upload-placeholder.round{border-radius:50%}.photo-upload-placeholder{background-color:var(--background);color:var(--element-ui-5);font-size:3rem;text-align:center;overflow:hidden;word-break:break-all;-webkit-user-select:none;user-select:none}\n"] }]
+                    ], template: "<div class=\"photo-upload d-flex flex-column p-6\">\n  <!-- File upload -->\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"d-none\"\n    [accept]=\"acceptedUploadFormats()\"\n    (change)=\"fileUpload($event)\"\n  />\n\n  <!-- Image -->\n  @if (sanitizedPhotoUrl()) {\n    <img\n      class=\"photo-upload-photo\"\n      [class.round]=\"roundImage()\"\n      [src]=\"sanitizedPhotoUrl()\"\n      [alt]=\"photoAltText() | translate\"\n    />\n  } @else {\n    <span\n      class=\"photo-upload-placeholder d-flex align-items-center justify-content-center flex-none\"\n      [class.round]=\"roundImage()\"\n    >\n      {{ placeholderAltText() | translate }}\n    </span>\n  }\n  <!-- Buttons -->\n  @if (!readonly()) {\n    <div class=\"d-flex justify-content-center gap-6 mt-8\">\n      <button\n        type=\"button\"\n        class=\"btn btn-secondary\"\n        (click)=\"\n          (sourcePhoto() || sourcePhotoUrl()) && !disabledCropping()\n            ? showCroppingDialog()\n            : fileInput.click()\n        \"\n      >\n        {{ editButtonText() | translate }}\n      </button>\n      @if (sanitizedPhotoUrl()) {\n        <button type=\"button\" class=\"btn btn-danger\" (click)=\"removePhoto()\">\n          {{ removePhotoText() | translate }}\n        </button>\n      }\n    </div>\n  }\n\n  <!-- Error message -->\n  @if (uploadErrorMessage() && !modalRef) {\n    <div class=\"mt-6\">\n      <ng-container [ngTemplateOutlet]=\"errorMessageTemplate\" />\n    </div>\n  }\n</div>\n\n<!-- Template: modal -->\n<ng-template #editPhotoTemplate>\n  <!-- Header -->\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\" [id]=\"titleId\">{{ modalHeader() | translate }}</h4>\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-tertiary-ghost\"\n      [attr.aria-label]=\"cancelEditText() | translate\"\n      (click)=\"imageCropperCanceled()\"\n    >\n      <si-icon [icon]=\"icons.elementCancel\" />\n    </button>\n  </div>\n  <!-- Content -->\n  <div class=\"modal-body\">\n    @if (modalDescription()) {\n      <div class=\"mb-4\">\n        <span class=\"text-secondary\">{{ modalDescription() | translate }}</span>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"imageCropperTemplate\" />\n    @if (uploadErrorMessage()) {\n      <div class=\"d-flex mt-4\">\n        <ng-container [ngTemplateOutlet]=\"errorMessageTemplate\" />\n      </div>\n    }\n  </div>\n  <!-- Footer -->\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-secondary me-auto\" (click)=\"fileInput.click()\">\n      {{ changePhotoText() | translate }}\n    </button>\n    <div class=\"d-flex gap-6\">\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"imageCropperCanceled()\">\n        {{ cancelEditText() | translate }}\n      </button>\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"imageCropperApplied()\">\n        {{ applyEditText() | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Template: error message -->\n<ng-template #errorMessageTemplate>\n  <div class=\"d-flex align-items-center\">\n    <span class=\"icon-sm icon-stack d-inline-block my-n2 me-2\">\n      <si-icon class=\"status-danger\" [icon]=\"icons.elementCircleFilled\" />\n      <si-icon class=\"status-danger-contrast\" [icon]=\"icons.elementStateExclamationMark\" />\n    </span>\n    <span class=\"text-danger\">{{\n      uploadErrorMessage()\n        | translate\n          : {\n              mb: currentFileSizeMegabytes(),\n              kb: currentFileSizeKilobytes(),\n              maxSizeMb: maxSizeMb()\n            }\n    }}</span>\n  </div>\n</ng-template>\n\n<!-- Template: image cropper -->\n<ng-template #imageCropperTemplate>\n  <si-image-cropper-style>\n    <image-cropper\n      #imageCropper\n      output=\"base64\"\n      [aspectRatio]=\"cropperAspectRatio()\"\n      [containWithinAspectRatio]=\"cropperContainWithinAspectRatio()\"\n      [cropperMinWidth]=\"cropperMinWidth()\"\n      [cropperMinHeight]=\"cropperMinHeight()\"\n      [cropperMaxWidth]=\"cropperMaxWidth()\"\n      [cropperMaxHeight]=\"cropperMaxHeight()\"\n      [cropperFrameAriaLabel]=\"cropperFrameAriaLabel() | translate\"\n      [format]=\"cropperImageFormat()\"\n      [imageBase64]=\"imageCropperPhoto()\"\n      [imageURL]=\"sourcePhotoUrl()\"\n      [maintainAspectRatio]=\"cropperMaintainAspectRatio()\"\n      [onlyScaleDown]=\"true\"\n      [roundCropper]=\"roundImage()\"\n      (cropperReady)=\"cropperReady()\"\n      (imageCropped)=\"cropperImageCropped($event)\"\n    />\n  </si-image-cropper-style>\n</ng-template>\n", styles: [":host{--si-photo-upload-photo-width: 200px;--si-photo-upload-photo-height: 200px}.photo-upload{box-sizing:content-box;max-inline-size:var(--si-photo-upload-photo-width)}.photo-upload-photo,.photo-upload-placeholder{display:block;margin:auto;inline-size:var(--si-photo-upload-photo-width);max-inline-size:100%;block-size:var(--si-photo-upload-photo-height);object-fit:cover}.photo-upload-photo.round,.photo-upload-placeholder.round{border-radius:50%}.photo-upload-placeholder{background-color:var(--background);color:var(--element-ui-5);font-size:3rem;text-align:center;overflow:hidden;word-break:break-all;-webkit-user-select:none;user-select:none}\n"] }]
         }], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabledCropping: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledCropping", required: false }] }], acceptedUploadFormats: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptedUploadFormats", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], uploadErrorWrongType: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadErrorWrongType", required: false }] }], uploadErrorTooBig: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadErrorTooBig", required: false }] }], photoAltText: [{ type: i0.Input, args: [{ isSignal: true, alias: "photoAltText", required: false }] }], placeholderAltText: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderAltText", required: false }] }], changePhotoText: [{ type: i0.Input, args: [{ isSignal: true, alias: "changePhotoText", required: false }] }], cropperFrameAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropperFrameAriaLabel", required: false }] }], uploadPhotoText: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadPhotoText", required: false }] }], removePhotoText: [{ type: i0.Input, args: [{ isSignal: true, alias: "removePhotoText", required: false }] }], cancelEditText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelEditText", required: false }] }], applyEditText: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyEditText", required: false }] }], modalHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalHeader", required: false }] }], modalDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalDescription", required: false }] }], cropperImageFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropperImageFormat", required: false }] }], cropperAspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropperAspectRatio", required: false }] }], cropperMaintainAspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropperMaintainAspectRatio", required: false }] }], cropperContainWithinAspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropperContainWithinAspectRatio", required: false }] }], cropperMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropperMinWidth", required: false }] }], cropperMinHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropperMinHeight", required: false }] }], cropperMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropperMaxWidth", required: false }] }], cropperMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropperMaxHeight", required: false }] }], roundImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "roundImage", required: false }] }], sourcePhoto: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourcePhoto", required: false }] }, { type: i0.Output, args: ["sourcePhotoChange"] }], sourcePhotoUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourcePhotoUrl", required: false }] }], croppedPhoto: [{ type: i0.Input, args: [{ isSignal: true, alias: "croppedPhoto", required: false }] }, { type: i0.Output, args: ["croppedPhotoChange"] }], editPhotoTemplate: [{ type: i0.ViewChild, args: ['editPhotoTemplate', { isSignal: true }] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], imageCropper: [{ type: i0.ViewChild, args: ['imageCropper', { isSignal: true }] }] } });
 /**