@siemens/element-ng 48.7.0 → 48.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.
- package/date-range-filter/index.d.ts +2 -2
- package/fesm2022/siemens-element-ng-avatar.mjs +2 -2
- package/fesm2022/siemens-element-ng-avatar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-common.mjs +2 -2
- package/fesm2022/siemens-element-ng-common.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-date-range-filter.mjs +13 -9
- package/fesm2022/siemens-element-ng-date-range-filter.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-datepicker.mjs +3 -0
- package/fesm2022/siemens-element-ng-datepicker.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-formly.mjs +4 -2
- package/fesm2022/siemens-element-ng-formly.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-header-dropdown.mjs +4 -3
- package/fesm2022/siemens-element-ng-header-dropdown.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-icon.mjs +19 -5
- package/fesm2022/siemens-element-ng-icon.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-list-details.mjs +5 -3
- package/fesm2022/siemens-element-ng-list-details.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-main-detail-container.mjs +11 -2
- package/fesm2022/siemens-element-ng-main-detail-container.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-navbar-vertical.mjs +2 -2
- package/fesm2022/siemens-element-ng-navbar-vertical.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-navbar.mjs +6 -3
- package/fesm2022/siemens-element-ng-navbar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-notification-item.mjs +11 -2
- package/fesm2022/siemens-element-ng-notification-item.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-password-toggle.mjs +2 -2
- package/fesm2022/siemens-element-ng-password-toggle.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-side-panel.mjs +121 -16
- package/fesm2022/siemens-element-ng-side-panel.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-status-toggle.mjs +1 -1
- package/fesm2022/siemens-element-ng-status-toggle.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-tabs.mjs +6 -4
- package/fesm2022/siemens-element-ng-tabs.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-threshold.mjs +4 -4
- package/fesm2022/siemens-element-ng-threshold.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-tour.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-translate.mjs.map +1 -1
- package/header-dropdown/index.d.ts +1 -0
- package/icon/index.d.ts +11 -1
- package/list-details/index.d.ts +1 -0
- package/main-detail-container/index.d.ts +1 -0
- package/navbar/index.d.ts +1 -0
- package/notification-item/index.d.ts +1 -0
- package/package.json +15 -15
- package/side-panel/index.d.ts +102 -9
- package/tabs/index.d.ts +1 -0
- package/template-i18n.json +2 -0
- package/threshold/index.d.ts +1 -1
- package/translate/index.d.ts +2 -0
|
@@ -5,6 +5,7 @@ import * as i0 from '@angular/core';
|
|
|
5
5
|
import { input, booleanAttribute, inject, Component } from '@angular/core';
|
|
6
6
|
import * as i1 from '@angular/router';
|
|
7
7
|
import { ActivatedRoute, RouterModule } from '@angular/router';
|
|
8
|
+
import { addIcons, elementOptionsVertical, SiIconComponent } from '@siemens/element-ng/icon';
|
|
8
9
|
import { SiMenuFactoryComponent } from '@siemens/element-ng/menu';
|
|
9
10
|
import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
|
|
10
11
|
|
|
@@ -18,6 +19,7 @@ import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
|
|
|
18
19
|
* router links, standard links, action buttons, and menus.
|
|
19
20
|
*/
|
|
20
21
|
class SiNotificationItemComponent {
|
|
22
|
+
icons = addIcons({ elementOptionsVertical });
|
|
21
23
|
/**
|
|
22
24
|
* The timestamp of the notification item.
|
|
23
25
|
*/
|
|
@@ -51,11 +53,18 @@ class SiNotificationItemComponent {
|
|
|
51
53
|
primaryAction = input();
|
|
52
54
|
activatedRoute = inject(ActivatedRoute, { optional: true });
|
|
53
55
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
54
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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 ('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 [ngClass]=\"unread() ? 'si-h5-bold' : 'si-h5'\">{{ 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-sm btn-circle\"\n [attr.aria-label]=\"action.ariaLabel\"\n (click)=\"action.action(action)\"\n >\n <
|
|
56
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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 ('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 [ngClass]=\"unread() ? 'si-h5-bold' : 'si-h5'\">{{ 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-sm btn-circle\"\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 btn-sm p-2 btn-circle\"\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 btn-sm p-2 btn-circle\"\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-circle btn-sm\"\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(1rem + 2px)}:host .notification-item-indicator:not(:has(si-avatar,si-circle-status,si-icon)){inline-size:0;margin-block-start:calc(1rem + 6px)}:host .notification-item-indicator:not(:has(si-avatar,si-circle-status,si-icon)) div{block-size:1rem}\n"], dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }, { 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }] });
|
|
55
57
|
}
|
|
56
58
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNotificationItemComponent, decorators: [{
|
|
57
59
|
type: Component,
|
|
58
|
-
args: [{ selector: 'si-notification-item', imports: [
|
|
60
|
+
args: [{ selector: 'si-notification-item', imports: [
|
|
61
|
+
SiTranslatePipe,
|
|
62
|
+
RouterModule,
|
|
63
|
+
CommonModule,
|
|
64
|
+
SiMenuFactoryComponent,
|
|
65
|
+
CdkMenuTrigger,
|
|
66
|
+
SiIconComponent
|
|
67
|
+
], 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 ('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 [ngClass]=\"unread() ? 'si-h5-bold' : 'si-h5'\">{{ 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-sm btn-circle\"\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 btn-sm p-2 btn-circle\"\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 btn-sm p-2 btn-circle\"\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-circle btn-sm\"\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(1rem + 2px)}:host .notification-item-indicator:not(:has(si-avatar,si-circle-status,si-icon)){inline-size:0;margin-block-start:calc(1rem + 6px)}:host .notification-item-indicator:not(:has(si-avatar,si-circle-status,si-icon)) div{block-size:1rem}\n"] }]
|
|
59
68
|
}] });
|
|
60
69
|
|
|
61
70
|
/**
|
|
@@ -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 - 2025\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 { 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 */\nexport interface NotificationItemActionCircleButton extends NotificationItemBase {\n type: 'action-circle-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 | NotificationItemLinkIcon\n | NotificationItemRouterLinkIcon;\n\n/**\n * Union type for primary actions in a notification item.\n */\nexport type NotificationItemPrimaryAction =\n | NotificationItemActionCircleButton\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: [SiTranslatePipe, RouterModule, CommonModule, SiMenuFactoryComponent, CdkMenuTrigger],\n templateUrl: './si-notification-item.component.html',\n styleUrl: './si-notification-item.component.scss'\n})\nexport class SiNotificationItemComponent {\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 ('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 [ngClass]=\"unread() ? 'si-h5-bold' : 'si-h5'\">{{ 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-sm btn-circle\"\n [attr.aria-label]=\"action.ariaLabel\"\n (click)=\"action.action(action)\"\n >\n <i [ngClass]=\"'icon ' + action.icon\"></i>\n </button>\n</ng-template>\n\n<ng-template #routerLink let-action>\n <a\n class=\"btn btn-ghost btn-sm p-2 btn-circle\"\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 <i class=\"icon\" [ngClass]=\"action.icon\"></i>\n </a>\n</ng-template>\n\n<ng-template #link let-action>\n <a\n class=\"btn btn-ghost btn-sm p-2 btn-circle\"\n [href]=\"action.href\"\n [target]=\"action.target\"\n [attr.aria-label]=\"action.ariaLabel\"\n >\n <i class=\"icon\" [ngClass]=\"action.icon\"></i>\n </a>\n</ng-template>\n\n<ng-template #menu let-action>\n <button\n type=\"button\"\n class=\"btn btn-ghost btn-circle btn-sm element-options-vertical\"\n [attr.aria-label]=\"heading() + ' dropdown'\"\n [cdkMenuTriggerFor]=\"actionMenu\"\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 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-notification-item.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"siemens-element-ng-notification-item.mjs","sources":["../../../../projects/element-ng/notification-item/si-notification-item.component.ts","../../../../projects/element-ng/notification-item/si-notification-item.component.html","../../../../projects/element-ng/notification-item/index.ts","../../../../projects/element-ng/notification-item/siemens-element-ng-notification-item.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\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 { addIcons, elementOptionsVertical, 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 */\nexport interface NotificationItemActionCircleButton extends NotificationItemBase {\n type: 'action-circle-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 | NotificationItemLinkIcon\n | NotificationItemRouterLinkIcon;\n\n/**\n * Union type for primary actions in a notification item.\n */\nexport type NotificationItemPrimaryAction =\n | NotificationItemActionCircleButton\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 ('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 [ngClass]=\"unread() ? 'si-h5-bold' : 'si-h5'\">{{ 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-sm btn-circle\"\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 btn-sm p-2 btn-circle\"\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 btn-sm p-2 btn-circle\"\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-circle btn-sm\"\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 - 2025\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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"}
|
|
@@ -48,13 +48,13 @@ class SiPasswordToggleComponent {
|
|
|
48
48
|
this.typeChange.emit(this.inputType);
|
|
49
49
|
}
|
|
50
50
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiPasswordToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
51
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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()" } }, ngImport: i0, template: "<ng-content />\n@if (showVisibilityIcon()) {\n <button\n type=\"button\"\n class=\"btn btn-tertiary btn-circle btn-xs 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}.password-visibility-icon{position:absolute;font-size:1.5rem;inset-inline-end:8px;inset-block-start:4px;z-index:2}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
|
|
51
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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()" } }, ngImport: i0, template: "<ng-content />\n@if (showVisibilityIcon()) {\n <button\n type=\"button\"\n class=\"btn btn-tertiary btn-circle btn-xs 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.5rem;inset-inline-end:8px;inset-block-start:4px;z-index:2}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
|
|
52
52
|
}
|
|
53
53
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiPasswordToggleComponent, decorators: [{
|
|
54
54
|
type: Component,
|
|
55
55
|
args: [{ selector: 'si-password-toggle', imports: [SiIconComponent, SiTranslatePipe], host: {
|
|
56
56
|
'[class.show-visibility-icon]': 'showVisibilityIcon()'
|
|
57
|
-
}, template: "<ng-content />\n@if (showVisibilityIcon()) {\n <button\n type=\"button\"\n class=\"btn btn-tertiary btn-circle btn-xs 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}.password-visibility-icon{position:absolute;font-size:1.5rem;inset-inline-end:8px;inset-block-start:4px;z-index:2}\n"] }]
|
|
57
|
+
}, template: "<ng-content />\n@if (showVisibilityIcon()) {\n <button\n type=\"button\"\n class=\"btn btn-tertiary btn-circle btn-xs 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.5rem;inset-inline-end:8px;inset-block-start:4px;z-index:2}\n"] }]
|
|
58
58
|
}] });
|
|
59
59
|
|
|
60
60
|
/**
|
|
@@ -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 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Component, input, output, signal } from '@angular/core';\nimport { addIcons, elementHide, elementShow, 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.show-visibility-icon]': 'showVisibilityIcon()'\n }\n})\nexport class SiPasswordToggleComponent {\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-circle btn-xs 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 - 2025\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 - 2025\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;MAcU,yBAAyB,CAAA;AACpC;;;;AAIG;AACM,IAAA,kBAAkB,GAAG,KAAK,CAAC,IAAI,CAAC;AAEzC;;;AAGG;IACM,UAAU,GAAG,MAAM,EAAU;AAEtC;;;;;;;AAOG;AACM,IAAA,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,SAAS,CAAA,CAAA,wCAAA,CAA0C,CAAC,CAAC;AACxF;;;;;;;AAOG;AACM,IAAA,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,SAAS,CAAA,CAAA,wCAAA,CAA0C,CAAC,CAAC;AAErE,IAAA,YAAY,GAAG,MAAM,CAAU,KAAK,CAAC;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;;IAGxC,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;;uGA3C3B,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,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,4BAAA,EAAA,sBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjBtC,2XAWA,EAAA,MAAA,EAAA,CAAA,
|
|
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 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Component, input, output, signal } from '@angular/core';\nimport { addIcons, elementHide, elementShow, 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.show-visibility-icon]': 'showVisibilityIcon()'\n }\n})\nexport class SiPasswordToggleComponent {\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-circle btn-xs 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 - 2025\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 - 2025\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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"}
|